Hugging Face's logo

Spaces:
chohj06ms
/
oddhtml
Running

App Files Community
oddhtml
File size: 4,212 Bytes 
721fd2a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144174f
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tripleS</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
  /* Additional styles for fixed navigation and scrollable content */
  .fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
  }
  
  .fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
  }
  
  .scrollable-content {
    padding-top: 96px; /* Height of top nav + tabs */
    padding-bottom: 48px; /* Height of bottom nav */
    overflow-y: auto;
  }
</style>
</head>
<body class="bg-black text-white font-sans">

<!-- Top Navigation -->
<div class="fixed-top">
  <div class="bg-gray-900 px-4 py-3 border-b border-gray-800">
    <div class="flex justify-between">
      <div>
        <h1 class="text-xl font-bold">tripleS</h1>
      </div>
      <div class="flex items-center">
        <button class="p-2 bg-gray-800 rounded-full">
          <i class="fas fa-shopping-cart"></i>
        </button>
        <span class="ml-2 p-1 bg-purple-800 rounded-full text-xs">144</span>
      </div>
    </div>
  </div>
  
  <!-- Tabs -->
  <div class="bg-gray-800 text-center py-2">
    <div class="flex justify-around">
      <button class="text-gray-300">Main</button>
      <button class="text-gray-300">Grid</button>
      <button class="text-gray-300">Gravity</button>
    </div>
  </div>
</div>

<!-- Scrollable Content -->
<div class="scrollable-content">
  <!-- Main Content Area -->
  <div class="px-4 py-2">
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- ... more content areas ... -->
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div><!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    <!-- Repeat this section for multiple content areas -->
    <div class="bg-gray-800 p-4 rounded-lg mb-4">
      <div class="h-32 bg-gray-700 rounded mb-4"></div>
      <p class="text-gray-400">Content area</p>
    </div>
    
  </div>
</div>

<!-- Bottom Navigation -->
<div class="fixed-bottom bg-gray-900 py-2">
  <div class="flex justify-around">
    <button class="text-gray-300">
      <i class="fas fa-home"></i>
      <span class="block text-xs">Home</span>
    </button>
    <button class="text-gray-300">
      <i class="fas fa-record-vinyl"></i>
      <span class="block text-xs">Record</span>
    </button>
    <button class="text-gray-300">
      <i class="fas fa-box"></i>
      <span class="block text-xs">Collect</span>
    </button>
    <button class="text-gray-300">
      <i class="fas fa-user"></i>
      <span class="block text-xs">My</span>
    </button>
  </div>
</div>

</body>
</html>