Hugging Face's logo

Spaces:
chohj06ms
/
oddhtml
Running

App Files Community
chohj06ms commited on
Commit
721fd2a
•
1 Parent(s): 144174f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +130 -18
index.html CHANGED
@@ -1,19 +1,131 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>tripleS</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
9
+ <style>
10
+ /* Additional styles for fixed navigation and scrollable content */
11
+ .fixed-top {
12
+ position: fixed;
13
+ top: 0;
14
+ width: 100%;
15
+ z-index: 10;
16
+ }
17
+
18
+ .fixed-bottom {
19
+ position: fixed;
20
+ bottom: 0;
21
+ width: 100%;
22
+ z-index: 10;
23
+ }
24
+
25
+ .scrollable-content {
26
+ padding-top: 96px; /* Height of top nav + tabs */
27
+ padding-bottom: 48px; /* Height of bottom nav */
28
+ overflow-y: auto;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-black text-white font-sans">
33
+
34
+ <!-- Top Navigation -->
35
+ <div class="fixed-top">
36
+ <div class="bg-gray-900 px-4 py-3 border-b border-gray-800">
37
+ <div class="flex justify-between">
38
+ <div>
39
+ <h1 class="text-xl font-bold">tripleS</h1>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <button class="p-2 bg-gray-800 rounded-full">
43
+ <i class="fas fa-shopping-cart"></i>
44
+ </button>
45
+ <span class="ml-2 p-1 bg-purple-800 rounded-full text-xs">144</span>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Tabs -->
51
+ <div class="bg-gray-800 text-center py-2">
52
+ <div class="flex justify-around">
53
+ <button class="text-gray-300">Main</button>
54
+ <button class="text-gray-300">Grid</button>
55
+ <button class="text-gray-300">Gravity</button>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <!-- Scrollable Content -->
61
+ <div class="scrollable-content">
62
+ <!-- Main Content Area -->
63
+ <div class="px-4 py-2">
64
+ <!-- Repeat this section for multiple content areas -->
65
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
66
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
67
+ <p class="text-gray-400">Content area</p>
68
+ </div>
69
+ <!-- ... more content areas ... -->
70
+ <!-- Repeat this section for multiple content areas -->
71
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
72
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
73
+ <p class="text-gray-400">Content area</p>
74
+ </div>
75
+ <!-- Repeat this section for multiple content areas -->
76
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
77
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
78
+ <p class="text-gray-400">Content area</p>
79
+ </div>
80
+ <!-- Repeat this section for multiple content areas -->
81
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
82
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
83
+ <p class="text-gray-400">Content area</p>
84
+ </div><!-- Repeat this section for multiple content areas -->
85
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
86
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
87
+ <p class="text-gray-400">Content area</p>
88
+ </div>
89
+ <!-- Repeat this section for multiple content areas -->
90
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
91
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
92
+ <p class="text-gray-400">Content area</p>
93
+ </div>
94
+ <!-- Repeat this section for multiple content areas -->
95
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
96
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
97
+ <p class="text-gray-400">Content area</p>
98
+ </div>
99
+ <!-- Repeat this section for multiple content areas -->
100
+ <div class="bg-gray-800 p-4 rounded-lg mb-4">
101
+ <div class="h-32 bg-gray-700 rounded mb-4"></div>
102
+ <p class="text-gray-400">Content area</p>
103
+ </div>
104
+
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Bottom Navigation -->
109
+ <div class="fixed-bottom bg-gray-900 py-2">
110
+ <div class="flex justify-around">
111
+ <button class="text-gray-300">
112
+ <i class="fas fa-home"></i>
113
+ <span class="block text-xs">Home</span>
114
+ </button>
115
+ <button class="text-gray-300">
116
+ <i class="fas fa-record-vinyl"></i>
117
+ <span class="block text-xs">Record</span>
118
+ </button>
119
+ <button class="text-gray-300">
120
+ <i class="fas fa-box"></i>
121
+ <span class="block text-xs">Collect</span>
122
+ </button>
123
+ <button class="text-gray-300">
124
+ <i class="fas fa-user"></i>
125
+ <span class="block text-xs">My</span>
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ </body>
131
  </html>