Hugging Face's logo

Spaces:
BurAndBY
/
melodymetrics-groove-guru
Running

App Files Community
BurAndBY commited on
Commit
9efae9a
·
verified ·
1 Parent(s): 1da0a5e

Write a user profile page for a music stats website based on lastfm

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +254 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Melodymetrics Groove Guru
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: MelodyMetrics Groove Guru 🎵
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,255 @@
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>MelodyMetrics | Your Music Profile</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+ .gradient-text {
17
+ background: linear-gradient(45deg, #6366f1, #8b5cf6);
18
+ -webkit-background-clip: text;
19
+ background-clip: text;
20
+ color: transparent;
21
+ }
22
+ .glass-effect {
23
+ background: rgba(255, 255, 255, 0.1);
24
+ backdrop-filter: blur(10px);
25
+ -webkit-backdrop-filter: blur(10px);
26
+ border-radius: 20px;
27
+ border: 1px solid rgba(255, 255, 255, 0.2);
28
+ }
29
+ .wave-animation {
30
+ animation: wave 3s ease-in-out infinite;
31
+ }
32
+ @keyframes wave {
33
+ 0%, 100% { transform: translateY(0); }
34
+ 50% { transform: translateY(-10px); }
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gradient-to-br from-gray-900 to-indigo-900 text-white min-h-screen">
39
+ <div id="waves-bg" class="fixed inset-0 -z-10"></div>
40
+
41
+ <header class="container mx-auto px-4 py-6">
42
+ <div class="flex justify-between items-center">
43
+ <h1 class="text-3xl font-bold gradiant-text flex items-center gap-2">
44
+ <i data-feather="music"></i>
45
+ <span class="gradient-text">MelodyMetrics</span>
46
+ </h1>
47
+ <button class="flex items-center gap-2 px-4 py-2 rounded-full glass-effect hover:bg-indigo-700 transition">
48
+ <i data-feather="user"></i>
49
+ <span>Sign In</span>
50
+ </button>
51
+ </div>
52
+ </header>
53
+
54
+ <main class="container mx-auto px-4 py-8">
55
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
56
+ <!-- Profile Section -->
57
+ <div class="lg:col-span-1">
58
+ <div class="glass-effect p-6 rounded-2xl flex flex-col items-center">
59
+ <img src="http://static.photos/music/320x240/42" alt="Profile" class="w-32 h-32 rounded-full object-cover border-4 border-indigo-500 mb-4 wave-animation">
60
+ <h2 class="text-2xl font-bold mb-1">GrooveGuru</h2>
61
+ <p class="text-indigo-300 mb-4">Music Explorer Since 2018</p>
62
+ <div class="flex gap-4 mb-6">
63
+ <div class="text-center">
64
+ <p class="text-3xl font-bold">1,247</p>
65
+ <p class="text-sm text-gray-300">Scrobbles</p>
66
+ </div>
67
+ <div class="text-center">
68
+ <p class="text-3xl font-bold">428</p>
69
+ <p class="text-sm text-gray-300">Artists</p>
70
+ </div>
71
+ <div class="text-center">
72
+ <p class="text-3xl font-bold">89</p>
73
+ <p class="text-sm text-gray-300">Albums</p>
74
+ </div>
75
+ </div>
76
+ <button class="flex items-center gap-2 px-6 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-full transition">
77
+ <i data-feather="plus"></i>
78
+ <span>Follow</span>
79
+ </button>
80
+ </div>
81
+
82
+ <div class="glass-effect p-6 rounded-2xl mt-6">
83
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
84
+ <i data-feather="award"></i>
85
+ <span>Badges</span>
86
+ </h3>
87
+ <div class="grid grid-cols-3 gap-3">
88
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
89
+ <i data-feather="star" class="text-yellow-400"></i>
90
+ <span class="text-xs mt-1">Golden Ear</span>
91
+ </div>
92
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
93
+ <i data-feather="trending-up" class="text-green-400"></i>
94
+ <span class="text-xs mt-1">Trendsetter</span>
95
+ </div>
96
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
97
+ <i data-feather="clock" class="text-blue-400"></i>
98
+ <span class="text-xs mt-1">Night Owl</span>
99
+ </div>
100
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
101
+ <i data-feather="headphones" class="text-purple-400"></i>
102
+ <span class="text-xs mt-1">Listener</span>
103
+ </div>
104
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
105
+ <i data-feather="zap" class="text-orange-400"></i>
106
+ <span class="text-xs mt-1">Power User</span>
107
+ </div>
108
+ <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center">
109
+ <i data-feather="heart" class="text-pink-400"></i>
110
+ <span class="text-xs mt-1">Loyal Fan</span>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Main Content -->
117
+ <div class="lg:col-span-2 space-y-6">
118
+ <div class="glass-effect p-6 rounded-2xl">
119
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
120
+ <i data-feather="bar-chart-2"></i>
121
+ <span>Your Weekly Stats</span>
122
+ </h3>
123
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
124
+ <div class="bg-indigo-900/50 p-4 rounded-lg">
125
+ <div class="flex justify-between items-center mb-2">
126
+ <span class="text-sm text-gray-300">Top Artist</span>
127
+ <i data-feather="mic" class="text-pink-400"></i>
128
+ </div>
129
+ <p class="text-lg font-semibold">The Weeknd</p>
130
+ <p class="text-sm text-gray-400">42 plays</p>
131
+ </div>
132
+ <div class="bg-indigo-900/50 p-4 rounded-lg">
133
+ <div class="flex justify-between items-center mb-2">
134
+ <span class="text-sm text-gray-300">Top Track</span>
135
+ <i data-feather="music" class="text-blue-400"></i>
136
+ </div>
137
+ <p class="text-lg font-semibold">Blinding Lights</p>
138
+ <p class="text-sm text-gray-400">18 plays</p>
139
+ </div>
140
+ <div class="bg-indigo-900/50 p-4 rounded-lg">
141
+ <div class="flex justify-between items-center mb-2">
142
+ <span class="text-sm text-gray-300">Top Album</span>
143
+ <i data-feather="disc" class="text-purple-400"></i>
144
+ </div>
145
+ <p class="text-lg font-semibold">After Hours</p>
146
+ <p class="text-sm text-gray-400">36 plays</p>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="glass-effect p-6 rounded-2xl">
152
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
153
+ <i data-feather="list"></i>
154
+ <span>Recently Played</span>
155
+ </h3>
156
+ <div class="space-y-4">
157
+ <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition">
158
+ <img src="http://static.photos/music/200x200/1" alt="Track" class="w-12 h-12 rounded-lg">
159
+ <div class="flex-1">
160
+ <p class="font-medium">Save Your Tears</p>
161
+ <p class="text-sm text-gray-400">The Weeknd • After Hours</p>
162
+ </div>
163
+ <div class="text-sm text-gray-400">3 hours ago</div>
164
+ </div>
165
+ <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition">
166
+ <img src="http://static.photos/music/200x200/2" alt="Track" class="w-12 h-12 rounded-lg">
167
+ <div class="flex-1">
168
+ <p class="font-medium">Levitating</p>
169
+ <p class="text-sm text-gray-400">Dua Lipa • Future Nostalgia</p>
170
+ </div>
171
+ <div class="text-sm text-gray-400">5 hours ago</div>
172
+ </div>
173
+ <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition">
174
+ <img src="http://static.photos/music/200x200/3" alt="Track" class="w-12 h-12 rounded-lg">
175
+ <div class="flex-1">
176
+ <p class="font-medium">Stay</p>
177
+ <p class="text-sm text-gray-400">The Kid LAROI, Justin Bieber</p>
178
+ </div>
179
+ <div class="text-sm text-gray-400">Yesterday</div>
180
+ </div>
181
+ <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition">
182
+ <img src="http://static.photos/music/200x200/4" alt="Track" class="w-12 h-12 rounded-lg">
183
+ <div class="flex-1">
184
+ <p class="font-medium">good 4 u</p>
185
+ <p class="text-sm text-gray-400">Olivia Rodrigo • SOUR</p>
186
+ </div>
187
+ <div class="text-sm text-gray-400">Yesterday</div>
188
+ </div>
189
+ </div>
190
+ <button class="mt-4 flex items-center gap-2 text-indigo-300 hover:text-indigo-200 transition">
191
+ <span>View All History</span>
192
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
193
+ </button>
194
+ </div>
195
+
196
+ <div class="glass-effect p-6 rounded-2xl">
197
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
198
+ <i data-feather="heart"></i>
199
+ <span>Your Top Artists</span>
200
+ </h3>
201
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
202
+ <div class="text-center">
203
+ <img src="http://static.photos/music/200x200/5" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto">
204
+ <p class="font-medium">The Weeknd</p>
205
+ <p class="text-sm text-gray-400">1,042 plays</p>
206
+ </div>
207
+ <div class="text-center">
208
+ <img src="http://static.photos/music/200x200/6" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto">
209
+ <p class="font-medium">Dua Lipa</p>
210
+ <p class="text-sm text-gray-400">873 plays</p>
211
+ </div>
212
+ <div class="text-center">
213
+ <img src="http://static.photos/music/200x200/7" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto">
214
+ <p class="font-medium">Billie Eilish</p>
215
+ <p class="text-sm text-gray-400">756 plays</p>
216
+ </div>
217
+ <div class="text-center">
218
+ <img src="http://static.photos/music/200x200/8" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto">
219
+ <p class="font-medium">Post Malone</p>
220
+ <p class="text-sm text-gray-400">689 plays</p>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </main>
227
+
228
+ <footer class="container mx-auto px-4 py-8 mt-12 text-center text-gray-400">
229
+ <p>MelodyMetrics is not affiliated with Last.fm. Powered by the Last.fm API.</p>
230
+ <p class="mt-2">© 2023 MelodyMetrics. All rights reserved.</p>
231
+ </footer>
232
+
233
+ <script>
234
+ // Initialize Vanta.js waves background
235
+ VANTA.WAVES({
236
+ el: "#waves-bg",
237
+ mouseControls: true,
238
+ touchControls: true,
239
+ gyroControls: false,
240
+ minHeight: 200.00,
241
+ minWidth: 200.00,
242
+ scale: 1.00,
243
+ scaleMobile: 1.00,
244
+ color: 0x4c1d95,
245
+ shininess: 50.00,
246
+ waveHeight: 15.00,
247
+ waveSpeed: 0.50,
248
+ zoom: 0.85
249
+ });
250
+
251
+ // Initialize feather icons
252
+ feather.replace();
253
+ </script>
254
+ </body>
255
  </html>