Hugging Face's logo

Spaces:
arthur6583
/
melodify
Running

App Files Community
arthur6583 commited on
Commit
ccb6073
·
verified ·
1 Parent(s): db49ac5

Refait le design a partir de l'image

Browse files
Files changed (5) hide show
  1. favorites.html +192 -0
  2. index.html +34 -27
  3. library.html +157 -0
  4. profile.html +170 -0
  5. search.html +165 -0
favorites.html ADDED
@@ -0,0 +1,192 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Melodify - Favorites</title>
8
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#8A2BE2',
19
+ secondary: '#1E1E2F',
20
+ accent: '#2D2D44',
21
+ dark: '#0F0F1A',
22
+ light: '#F5F5F5'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ body {
30
+ font-family: 'Montserrat', sans-serif;
31
+ background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%);
32
+ height: 100vh;
33
+ overflow: hidden;
34
+ }
35
+ .scroll-hidden {
36
+ -ms-overflow-style: none;
37
+ scrollbar-width: none;
38
+ }
39
+ .scroll-hidden::-webkit-scrollbar {
40
+ display: none;
41
+ }
42
+ .gradient-text {
43
+ background: linear-gradient(90deg, #8A2BE2, #FF6B6B);
44
+ -webkit-background-clip: text;
45
+ -webkit-text-fill-color: transparent;
46
+ }
47
+ .song-item:hover {
48
+ background: rgba(138, 43, 226, 0.1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="text-light">
53
+ <!-- Main Container -->
54
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-dark">
55
+ <!-- Header -->
56
+ <header class="p-4 flex justify-between items-center border-b border-accent">
57
+ <div class="flex items-center">
58
+ <a href="index.html">
59
+ <i data-feather="arrow-left" class="mr-4 text-light"></i>
60
+ </a>
61
+ <h1 class="text-xl font-bold gradient-text">Favorites</h1>
62
+ </div>
63
+ <div class="flex items-center">
64
+ <i data-feather="search" class="mr-4 text-light"></i>
65
+ <i data-feather="more-vertical" class="text-light"></i>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Playlist Info -->
70
+ <div class="p-4">
71
+ <div class="flex items-end mb-4">
72
+ <div class="w-32 h-32 rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 mr-4 flex items-center justify-center shadow-lg">
73
+ <i data-feather="heart" class="text-white w-16 h-16"></i>
74
+ </div>
75
+ <div>
76
+ <h1 class="text-2xl font-bold mb-2">Favorites</h1>
77
+ <p class="text-gray-400">345 songs</p>
78
+ </div>
79
+ </div>
80
+ <div class="flex">
81
+ <button class="bg-primary text-white rounded-full px-6 py-2 font-semibold mr-3 flex items-center">
82
+ <i data-feather="play" class="mr-2"></i> Play
83
+ </button>
84
+ <button class="border border-gray-400 text-light rounded-full px-4 py-2 font-semibold">
85
+ <i data-feather="shuffle"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Main Content -->
91
+ <main class="flex-1 overflow-y-auto scroll-hidden p-4">
92
+ <!-- Songs List -->
93
+ <section>
94
+ <div class="flex justify-between items-center mb-4">
95
+ <div class="flex items-center">
96
+ <span class="text-gray-400 mr-4">#</span>
97
+ <span class="text-gray-400">Title</span>
98
+ </div>
99
+ <span class="text-gray-400">Duration</span>
100
+ </div>
101
+
102
+ <div class="space-y-2">
103
+ <!-- Song Item -->
104
+ <div class="flex items-center p-2 rounded-lg song-item cursor-pointer">
105
+ <span class="text-gray-400 w-8">1</span>
106
+ <div class="flex items-center flex-1">
107
+ <img src="http://static.photos/music/40x40/12" alt="Song" class="w-10 h-10 rounded mr-3">
108
+ <div>
109
+ <h4 class="font-medium">Save Your Tears</h4>
110
+ <p class="text-gray-400 text-sm">The Weeknd</p>
111
+ </div>
112
+ </div>
113
+ <span class="text-gray-400 text-sm">3:24</span>
114
+ <i data-feather="more-vertical" class="text-gray-400 ml-4"></i>
115
+ </div>
116
+
117
+ <!-- Song Item -->
118
+ <div class="flex items-center p-2 rounded-lg song-item cursor-pointer">
119
+ <span class="text-gray-400 w-8">2</span>
120
+ <div class="flex items-center flex-1">
121
+ <img src="http://static.photos/music/40x40/23" alt="Song" class="w-10 h-10 rounded mr-3">
122
+ <div>
123
+ <h4 class="font-medium">Blinding Lights</h4>
124
+ <p class="text-gray-400 text-sm">The Weeknd</p>
125
+ </div>
126
+ </div>
127
+ <span class="text-gray-400 text-sm">3:20</span>
128
+ <i data-feather="more-vertical" class="text-gray-400 ml-4"></i>
129
+ </div>
130
+
131
+ <!-- Song Item -->
132
+ <div class="flex items-center p-2 rounded-lg song-item cursor-pointer">
133
+ <span class="text-gray-400 w-8">3</span>
134
+ <div class="flex items-center flex-1">
135
+ <img src="http://static.photos/music/40x40/34" alt="Song" class="w-10 h-10 rounded mr-3">
136
+ <div>
137
+ <h4 class="font-medium">Levitating</h4>
138
+ <p class="text-gray-400 text-sm">Dua Lipa</p>
139
+ </div>
140
+ </div>
141
+ <span class="text-gray-400 text-sm">3:23</span>
142
+ <i data-feather="more-vertical" class="text-gray-400 ml-4"></i>
143
+ </div>
144
+
145
+ <!-- Song Item -->
146
+ <div class="flex items-center p-2 rounded-lg song-item cursor-pointer">
147
+ <span class="text-gray-400 w-8">4</span>
148
+ <div class="flex items-center flex-1">
149
+ <img src="http://static.photos/music/40x40/45" alt="Song" class="w-10 h-10 rounded mr-3">
150
+ <div>
151
+ <h4 class="font-medium">Stay</h4>
152
+ <p class="text-gray-400 text-sm">The Kid LAROI, Justin Bieber</p>
153
+ </div>
154
+ </div>
155
+ <span class="text-gray-400 text-sm">2:59</span>
156
+ <i data-feather="more-vertical" class="text-gray-400 ml-4"></i>
157
+ </div>
158
+ </div>
159
+ </section>
160
+ </main>
161
+
162
+ <!-- Navigation -->
163
+ <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary">
164
+ <div class="flex flex-col items-center text-gray-400">
165
+ <i data-feather="home" class="w-6 h-6"></i>
166
+ <span class="text-xs mt-1">Home</span>
167
+ </div>
168
+ <div class="flex flex-col items-center text-gray-400">
169
+ <i data-feather="search" class="w-6 h-6"></i>
170
+ <span class="text-xs mt-1">Search</span>
171
+ </div>
172
+ <div class="flex flex-col items-center text-gray-400">
173
+ <i data-feather="book" class="w-6 h-6"></i>
174
+ <span class="text-xs mt-1">Library</span>
175
+ </div>
176
+ <div class="flex flex-col items-center text-primary">
177
+ <i data-feather="heart" class="w-6 h-6"></i>
178
+ <span class="text-xs mt-1">Favorites</span>
179
+ </div>
180
+ <div class="flex flex-col items-center text-gray-400">
181
+ <i data-feather="user" class="w-6 h-6"></i>
182
+ <span class="text-xs mt-1">Profile</span>
183
+ </div>
184
+ </nav>
185
+ </div>
186
+
187
+ <script>
188
+ feather.replace();
189
+ </script>
190
+ </body>
191
+ </html>
192
+ >>>>>>> REPLACE
index.html CHANGED
@@ -1,3 +1,4 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
@@ -8,16 +9,17 @@
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
  <script>
13
  tailwind.config = {
14
  theme: {
15
  extend: {
16
  colors: {
17
- primary: '#FF5E5B',
18
- secondary: '#1A1A2E',
19
- accent: '#16213E',
20
- dark: '#0F3460'
 
21
  }
22
  }
23
  }
@@ -25,15 +27,15 @@
25
  </script>
26
  <style>
27
  body {
28
- font-family: 'Poppins', sans-serif;
29
- background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
30
  height: 100vh;
31
  overflow: hidden;
32
  }
33
  .music-bar {
34
  height: 4px;
35
  width: 4px;
36
- background: #FF5E5B;
37
  margin: 0 2px;
38
  border-radius: 4px;
39
  animation: musicBar 1.2s ease infinite alternate;
@@ -72,7 +74,7 @@
72
  width: 16px;
73
  height: 16px;
74
  border-radius: 50%;
75
- background: #FF5E5B;
76
  cursor: pointer;
77
  }
78
  .scroll-hidden {
@@ -96,23 +98,28 @@
96
  }
97
  }
98
  .active-song {
99
- background: rgba(255, 94, 91, 0.15);
100
- border-left: 3px solid #FF5E5B;
 
 
 
 
 
101
  }
102
  </style>
103
  </head>
104
- <body class="text-white">
105
  <!-- Main Container -->
106
- <div class="flex flex-col h-screen max-w-md mx-auto bg-secondary">
107
  <!-- Header -->
108
- <header class="p-4 flex justify-between items-center border-b border-gray-800">
109
  <div class="flex items-center">
110
- <i data-feather="menu" class="mr-4"></i>
111
- <h1 class="text-xl font-bold">Melodify</h1>
112
  </div>
113
  <div class="flex items-center">
114
- <i data-feather="search" class="mr-4"></i>
115
- <i data-feather="user"></i>
116
  </div>
117
  </header>
118
 
@@ -123,10 +130,10 @@
123
  <h2 class="text-lg font-semibold mb-4">Now Playing</h2>
124
  <div class="flex justify-center mb-6">
125
  <div class="relative">
126
- <img src="http://static.photos/music/320x320/42" alt="Album Art" class="album-art w-64 h-64 rounded-2xl object-cover">
127
  <div class="absolute inset-0 flex items-center justify-center">
128
  <div class="bg-black bg-opacity-50 rounded-full p-4">
129
- <i data-feather="play" class="w-12 h-12"></i>
130
  </div>
131
  </div>
132
  </div>
@@ -148,11 +155,11 @@
148
  <!-- Player Controls -->
149
  <div class="flex justify-center items-center space-x-8 mt-6">
150
  <i data-feather="shuffle" class="text-gray-400"></i>
151
- <i data-feather="skip-back" class="w-8 h-8"></i>
152
  <div class="bg-primary rounded-full p-3">
153
- <i data-feather="pause" class="w-8 h-8"></i>
154
  </div>
155
- <i data-feather="skip-forward" class="w-8 h-8"></i>
156
  <i data-feather="repeat" class="text-gray-400"></i>
157
  </div>
158
  </section>
@@ -185,7 +192,7 @@
185
  </div>
186
 
187
  <!-- Song Item -->
188
- <div class="flex items-center p-3 rounded-lg">
189
  <img src="http://static.photos/music/60x60/23" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
190
  <div class="flex-1">
191
  <h4 class="font-medium">Levitating</h4>
@@ -198,7 +205,7 @@
198
  </div>
199
 
200
  <!-- Song Item -->
201
- <div class="flex items-center p-3 rounded-lg">
202
  <img src="http://static.photos/music/60x60/34" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
203
  <div class="flex-1">
204
  <h4 class="font-medium">Stay</h4>
@@ -211,7 +218,7 @@
211
  </div>
212
 
213
  <!-- Song Item -->
214
- <div class="flex items-center p-3 rounded-lg">
215
  <img src="http://static.photos/music/60x60/45" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
216
  <div class="flex-1">
217
  <h4 class="font-medium">Good 4 U</h4>
@@ -227,7 +234,7 @@
227
  </main>
228
 
229
  <!-- Navigation -->
230
- <nav class="flex justify-around items-center p-4 border-t border-gray-800 bg-accent">
231
  <div class="flex flex-col items-center text-primary">
232
  <i data-feather="home" class="w-6 h-6"></i>
233
  <span class="text-xs mt-1">Home</span>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
 
9
  <script src="https://cdn.tailwindcss.com"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
11
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
  <script>
14
  tailwind.config = {
15
  theme: {
16
  extend: {
17
  colors: {
18
+ primary: '#8A2BE2',
19
+ secondary: '#1E1E2F',
20
+ accent: '#2D2D44',
21
+ dark: '#0F0F1A',
22
+ light: '#F5F5F5'
23
  }
24
  }
25
  }
 
27
  </script>
28
  <style>
29
  body {
30
+ font-family: 'Montserrat', sans-serif;
31
+ background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%);
32
  height: 100vh;
33
  overflow: hidden;
34
  }
35
  .music-bar {
36
  height: 4px;
37
  width: 4px;
38
+ background: #8A2BE2;
39
  margin: 0 2px;
40
  border-radius: 4px;
41
  animation: musicBar 1.2s ease infinite alternate;
 
74
  width: 16px;
75
  height: 16px;
76
  border-radius: 50%;
77
+ background: #8A2BE2;
78
  cursor: pointer;
79
  }
80
  .scroll-hidden {
 
98
  }
99
  }
100
  .active-song {
101
+ background: rgba(138, 43, 226, 0.15);
102
+ border-left: 3px solid #8A2BE2;
103
+ }
104
+ .gradient-text {
105
+ background: linear-gradient(90deg, #8A2BE2, #FF6B6B);
106
+ -webkit-background-clip: text;
107
+ -webkit-text-fill-color: transparent;
108
  }
109
  </style>
110
  </head>
111
+ <body class="text-light">
112
  <!-- Main Container -->
113
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-dark">
114
  <!-- Header -->
115
+ <header class="p-4 flex justify-between items-center border-b border-accent">
116
  <div class="flex items-center">
117
+ <i data-feather="menu" class="mr-4 text-light"></i>
118
+ <h1 class="text-xl font-bold gradient-text">Melodify</h1>
119
  </div>
120
  <div class="flex items-center">
121
+ <i data-feather="search" class="mr-4 text-light"></i>
122
+ <i data-feather="user" class="text-light"></i>
123
  </div>
124
  </header>
125
 
 
130
  <h2 class="text-lg font-semibold mb-4">Now Playing</h2>
131
  <div class="flex justify-center mb-6">
132
  <div class="relative">
133
+ <img src="https://huggingface.co/spaces/arthur6583/melodify/resolve/main/images/Screenshot_2025-10-13-03-24-06-08_2ca4e1d5ec83da2f54025413ac83b968.jpg" alt="Album Art" class="album-art w-64 h-64 rounded-2xl object-cover">
134
  <div class="absolute inset-0 flex items-center justify-center">
135
  <div class="bg-black bg-opacity-50 rounded-full p-4">
136
+ <i data-feather="play" class="w-12 h-12 text-white"></i>
137
  </div>
138
  </div>
139
  </div>
 
155
  <!-- Player Controls -->
156
  <div class="flex justify-center items-center space-x-8 mt-6">
157
  <i data-feather="shuffle" class="text-gray-400"></i>
158
+ <i data-feather="skip-back" class="w-8 h-8 text-light"></i>
159
  <div class="bg-primary rounded-full p-3">
160
+ <i data-feather="pause" class="w-8 h-8 text-white"></i>
161
  </div>
162
+ <i data-feather="skip-forward" class="w-8 h-8 text-light"></i>
163
  <i data-feather="repeat" class="text-gray-400"></i>
164
  </div>
165
  </section>
 
192
  </div>
193
 
194
  <!-- Song Item -->
195
+ <div class="flex items-center p-3 rounded-lg bg-accent">
196
  <img src="http://static.photos/music/60x60/23" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
197
  <div class="flex-1">
198
  <h4 class="font-medium">Levitating</h4>
 
205
  </div>
206
 
207
  <!-- Song Item -->
208
+ <div class="flex items-center p-3 rounded-lg bg-accent">
209
  <img src="http://static.photos/music/60x60/34" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
210
  <div class="flex-1">
211
  <h4 class="font-medium">Stay</h4>
 
218
  </div>
219
 
220
  <!-- Song Item -->
221
+ <div class="flex items-center p-3 rounded-lg bg-accent">
222
  <img src="http://static.photos/music/60x60/45" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
223
  <div class="flex-1">
224
  <h4 class="font-medium">Good 4 U</h4>
 
234
  </main>
235
 
236
  <!-- Navigation -->
237
+ <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary">
238
  <div class="flex flex-col items-center text-primary">
239
  <i data-feather="home" class="w-6 h-6"></i>
240
  <span class="text-xs mt-1">Home</span>
library.html ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Melodify - Library</title>
8
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#8A2BE2',
19
+ secondary: '#1E1E2F',
20
+ accent: '#2D2D44',
21
+ dark: '#0F0F1A',
22
+ light: '#F5F5F5'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ body {
30
+ font-family: 'Montserrat', sans-serif;
31
+ background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%);
32
+ height: 100vh;
33
+ overflow: hidden;
34
+ }
35
+ .scroll-hidden {
36
+ -ms-overflow-style: none;
37
+ scrollbar-width: none;
38
+ }
39
+ .scroll-hidden::-webkit-scrollbar {
40
+ display: none;
41
+ }
42
+ .gradient-text {
43
+ background: linear-gradient(90deg, #8A2BE2, #FF6B6B);
44
+ -webkit-background-clip: text;
45
+ -webkit-text-fill-color: transparent;
46
+ }
47
+ .playlist-item:hover {
48
+ background: rgba(138, 43, 226, 0.1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="text-light">
53
+ <!-- Main Container -->
54
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-dark">
55
+ <!-- Header -->
56
+ <header class="p-4 flex justify-between items-center border-b border-accent">
57
+ <div class="flex items-center">
58
+ <a href="index.html">
59
+ <i data-feather="arrow-left" class="mr-4 text-light"></i>
60
+ </a>
61
+ <h1 class="text-xl font-bold gradient-text">Your Library</h1>
62
+ </div>
63
+ <div class="flex items-center">
64
+ <i data-feather="search" class="mr-4 text-light"></i>
65
+ <i data-feather="plus" class="text-light"></i>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Library Tabs -->
70
+ <div class="flex border-b border-accent px-4">
71
+ <div class="py-3 px-2 text-primary border-b-2 border-primary">Playlists</div>
72
+ <div class="py-3 px-2 text-gray-400">Artists</div>
73
+ <div class="py-3 px-2 text-gray-400">Albums</div>
74
+ </div>
75
+
76
+ <!-- Main Content -->
77
+ <main class="flex-1 overflow-y-auto scroll-hidden p-4">
78
+ <!-- Playlists -->
79
+ <section>
80
+ <div class="flex justify-between items-center mb-4">
81
+ <h2 class="text-lg font-semibold">Recently Added</h2>
82
+ <span class="text-primary text-sm">See All</span>
83
+ </div>
84
+
85
+ <div class="space-y-3">
86
+ <!-- Playlist Item -->
87
+ <div class="flex items-center p-3 rounded-lg playlist-item cursor-pointer">
88
+ <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-600 to-blue-500 mr-4 flex items-center justify-center">
89
+ <i data-feather="music" class="text-white"></i>
90
+ </div>
91
+ <div class="flex-1">
92
+ <h4 class="font-medium">Liked Songs</h4>
93
+ <p class="text-gray-400 text-sm">345 songs</p>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Playlist Item -->
98
+ <div class="flex items-center p-3 rounded-lg playlist-item cursor-pointer">
99
+ <img src="http://static.photos/music/60x60/56" alt="Playlist" class="w-12 h-12 rounded-lg object-cover mr-4">
100
+ <div class="flex-1">
101
+ <h4 class="font-medium">My Playlist #1</h4>
102
+ <p class="text-gray-400 text-sm">24 songs</p>
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Playlist Item -->
107
+ <div class="flex items-center p-3 rounded-lg playlist-item cursor-pointer">
108
+ <img src="http://static.photos/music/60x60/67" alt="Playlist" class="w-12 h-12 rounded-lg object-cover mr-4">
109
+ <div class="flex-1">
110
+ <h4 class="font-medium">Chill Vibes</h4>
111
+ <p class="text-gray-400 text-sm">18 songs</p>
112
+ </div>
113
+ </div>
114
+
115
+ <!-- Playlist Item -->
116
+ <div class="flex items-center p-3 rounded-lg playlist-item cursor-pointer">
117
+ <img src="http://static.photos/music/60x60/78" alt="Playlist" class="w-12 h-12 rounded-lg object-cover mr-4">
118
+ <div class="flex-1">
119
+ <h4 class="font-medium">Workout Mix</h4>
120
+ <p class="text-gray-400 text-sm">32 songs</p>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </section>
125
+ </main>
126
+
127
+ <!-- Navigation -->
128
+ <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary">
129
+ <div class="flex flex-col items-center text-gray-400">
130
+ <i data-feather="home" class="w-6 h-6"></i>
131
+ <span class="text-xs mt-1">Home</span>
132
+ </div>
133
+ <div class="flex flex-col items-center text-gray-400">
134
+ <i data-feather="search" class="w-6 h-6"></i>
135
+ <span class="text-xs mt-1">Search</span>
136
+ </div>
137
+ <div class="flex flex-col items-center text-primary">
138
+ <i data-feather="book" class="w-6 h-6"></i>
139
+ <span class="text-xs mt-1">Library</span>
140
+ </div>
141
+ <div class="flex flex-col items-center text-gray-400">
142
+ <i data-feather="heart" class="w-6 h-6"></i>
143
+ <span class="text-xs mt-1">Favorites</span>
144
+ </div>
145
+ <div class="flex flex-col items-center text-gray-400">
146
+ <i data-feather="user" class="w-6 h-6"></i>
147
+ <span class="text-xs mt-1">Profile</span>
148
+ </div>
149
+ </nav>
150
+ </div>
151
+
152
+ <script>
153
+ feather.replace();
154
+ </script>
155
+ </body>
156
+ </html>
157
+ >>>>>>> REPLACE
profile.html ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Melodify - Profile</title>
8
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#8A2BE2',
19
+ secondary: '#1E1E2F',
20
+ accent: '#2D2D44',
21
+ dark: '#0F0F1A',
22
+ light: '#F5F5F5'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ body {
30
+ font-family: 'Montserrat', sans-serif;
31
+ background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%);
32
+ height: 100vh;
33
+ overflow: hidden;
34
+ }
35
+ .scroll-hidden {
36
+ -ms-overflow-style: none;
37
+ scrollbar-width: none;
38
+ }
39
+ .scroll-hidden::-webkit-scrollbar {
40
+ display: none;
41
+ }
42
+ .gradient-text {
43
+ background: linear-gradient(90deg, #8A2BE2, #FF6B6B);
44
+ -webkit-background-clip: text;
45
+ -webkit-text-fill-color: transparent;
46
+ }
47
+ .option-item:hover {
48
+ background: rgba(138, 43, 226, 0.1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="text-light">
53
+ <!-- Main Container -->
54
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-dark">
55
+ <!-- Header -->
56
+ <header class="p-4 flex justify-between items-center border-b border-accent">
57
+ <div class="flex items-center">
58
+ <a href="index.html">
59
+ <i data-feather="arrow-left" class="mr-4 text-light"></i>
60
+ </a>
61
+ <h1 class="text-xl font-bold gradient-text">Profile</h1>
62
+ </div>
63
+ <div class="flex items-center">
64
+ <i data-feather="edit" class="text-light"></i>
65
+ </div>
66
+ </header>
67
+
68
+ <!-- Profile Info -->
69
+ <div class="p-4 flex items-center mb-6">
70
+ <div class="w-20 h-20 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 mr-4 flex items-center justify-center">
71
+ <i data-feather="user" class="text-white w-10 h-10"></i>
72
+ </div>
73
+ <div>
74
+ <h2 class="text-xl font-bold">John Doe</h2>
75
+ <p class="text-gray-400">Premium User</p>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <main class="flex-1 overflow-y-auto scroll-hidden p-4">
81
+ <!-- Options -->
82
+ <section class="space-y-2">
83
+ <!-- Option Item -->
84
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer">
85
+ <i data-feather="user" class="text-primary mr-4"></i>
86
+ <div class="flex-1">
87
+ <h4 class="font-medium">Account</h4>
88
+ </div>
89
+ <i data-feather="chevron-right" class="text-gray-400"></i>
90
+ </div>
91
+
92
+ <!-- Option Item -->
93
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer">
94
+ <i data-feather="settings" class="text-primary mr-4"></i>
95
+ <div class="flex-1">
96
+ <h4 class="font-medium">Settings</h4>
97
+ </div>
98
+ <i data-feather="chevron-right" class="text-gray-400"></i>
99
+ </div>
100
+
101
+ <!-- Option Item -->
102
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer">
103
+ <i data-feather="download" class="text-primary mr-4"></i>
104
+ <div class="flex-1">
105
+ <h4 class="font-medium">Downloaded Songs</h4>
106
+ </div>
107
+ <i data-feather="chevron-right" class="text-gray-400"></i>
108
+ </div>
109
+
110
+ <!-- Option Item -->
111
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer">
112
+ <i data-feather="help-circle" class="text-primary mr-4"></i>
113
+ <div class="flex-1">
114
+ <h4 class="font-medium">Help & Support</h4>
115
+ </div>
116
+ <i data-feather="chevron-right" class="text-gray-400"></i>
117
+ </div>
118
+
119
+ <!-- Option Item -->
120
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer">
121
+ <i data-feather="info" class="text-primary mr-4"></i>
122
+ <div class="flex-1">
123
+ <h4 class="font-medium">About</h4>
124
+ </div>
125
+ <i data-feather="chevron-right" class="text-gray-400"></i>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Logout -->
130
+ <section class="mt-8">
131
+ <div class="flex items-center p-3 rounded-lg option-item cursor-pointer bg-accent">
132
+ <i data-feather="log-out" class="text-primary mr-4"></i>
133
+ <div class="flex-1">
134
+ <h4 class="font-medium">Log Out</h4>
135
+ </div>
136
+ </div>
137
+ </section>
138
+ </main>
139
+
140
+ <!-- Navigation -->
141
+ <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary">
142
+ <div class="flex flex-col items-center text-gray-400">
143
+ <i data-feather="home" class="w-6 h-6"></i>
144
+ <span class="text-xs mt-1">Home</span>
145
+ </div>
146
+ <div class="flex flex-col items-center text-gray-400">
147
+ <i data-feather="search" class="w-6 h-6"></i>
148
+ <span class="text-xs mt-1">Search</span>
149
+ </div>
150
+ <div class="flex flex-col items-center text-gray-400">
151
+ <i data-feather="book" class="w-6 h-6"></i>
152
+ <span class="text-xs mt-1">Library</span>
153
+ </div>
154
+ <div class="flex flex-col items-center text-gray-400">
155
+ <i data-feather="heart" class="w-6 h-6"></i>
156
+ <span class="text-xs mt-1">Favorites</span>
157
+ </div>
158
+ <div class="flex flex-col items-center text-primary">
159
+ <i data-feather="user" class="w-6 h-6"></i>
160
+ <span class="text-xs mt-1">Profile</span>
161
+ </div>
162
+ </nav>
163
+ </div>
164
+
165
+ <script>
166
+ feather.replace();
167
+ </script>
168
+ </body>
169
+ </html>
170
+ >>>>>>> REPLACE
search.html ADDED
@@ -0,0 +1,165 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Melodify - Search</title>
8
+ <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#8A2BE2',
19
+ secondary: '#1E1E2F',
20
+ accent: '#2D2D44',
21
+ dark: '#0F0F1A',
22
+ light: '#F5F5F5'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ body {
30
+ font-family: 'Montserrat', sans-serif;
31
+ background: linear-gradient(135deg, #0F0F1A 0%, #1E1E2F 50%, #2D2D44 100%);
32
+ height: 100vh;
33
+ overflow: hidden;
34
+ }
35
+ .scroll-hidden {
36
+ -ms-overflow-style: none;
37
+ scrollbar-width: none;
38
+ }
39
+ .scroll-hidden::-webkit-scrollbar {
40
+ display: none;
41
+ }
42
+ .gradient-text {
43
+ background: linear-gradient(90deg, #8A2BE2, #FF6B6B);
44
+ -webkit-background-clip: text;
45
+ -webkit-text-fill-color: transparent;
46
+ }
47
+ .search-result:hover {
48
+ background: rgba(138, 43, 226, 0.1);
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="text-light">
53
+ <!-- Main Container -->
54
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-dark">
55
+ <!-- Header -->
56
+ <header class="p-4 flex justify-between items-center border-b border-accent">
57
+ <div class="flex items-center">
58
+ <a href="index.html">
59
+ <i data-feather="arrow-left" class="mr-4 text-light"></i>
60
+ </a>
61
+ <h1 class="text-xl font-bold gradient-text">Search</h1>
62
+ </div>
63
+ <div class="flex items-center">
64
+ <i data-feather="mic" class="text-light"></i>
65
+ </div>
66
+ </header>
67
+
68
+ <!-- Search Bar -->
69
+ <div class="p-4">
70
+ <div class="relative">
71
+ <input type="text" placeholder="Artists, songs, or albums" class="w-full p-3 pl-10 rounded-lg bg-accent text-light placeholder-gray-400">
72
+ <i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Main Content -->
77
+ <main class="flex-1 overflow-y-auto scroll-hidden px-4 pb-4">
78
+ <!-- Browse All -->
79
+ <section class="mb-8">
80
+ <h2 class="text-lg font-semibold mb-4">Browse All</h2>
81
+ <div class="grid grid-cols-2 gap-4">
82
+ <div class="bg-gradient-to-br from-purple-600 to-blue-500 rounded-lg p-4 h-24 flex items-end">
83
+ <span class="font-bold">Pop</span>
84
+ </div>
85
+ <div class="bg-gradient-to-br from-red-600 to-orange-500 rounded-lg p-4 h-24 flex items-end">
86
+ <span class="font-bold">Rock</span>
87
+ </div>
88
+ <div class="bg-gradient-to-br from-green-600 to-teal-500 rounded-lg p-4 h-24 flex items-end">
89
+ <span class="font-bold">Hip Hop</span>
90
+ </div>
91
+ <div class="bg-gradient-to-br from-yellow-600 to-amber-500 rounded-lg p-4 h-24 flex items-end">
92
+ <span class="font-bold">Jazz</span>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- Recent Searches -->
98
+ <section>
99
+ <div class="flex justify-between items-center mb-4">
100
+ <h2 class="text-lg font-semibold">Recent Searches</h2>
101
+ <span class="text-primary text-sm">Clear All</span>
102
+ </div>
103
+
104
+ <div class="space-y-3">
105
+ <!-- Search Item -->
106
+ <div class="flex items-center p-3 rounded-lg search-result cursor-pointer">
107
+ <i data-feather="clock" class="text-gray-400 mr-4"></i>
108
+ <div class="flex-1">
109
+ <h4 class="font-medium">The Weeknd</h4>
110
+ </div>
111
+ <i data-feather="x" class="text-gray-400"></i>
112
+ </div>
113
+
114
+ <!-- Search Item -->
115
+ <div class="flex items-center p-3 rounded-lg search-result cursor-pointer">
116
+ <i data-feather="clock" class="text-gray-400 mr-4"></i>
117
+ <div class="flex-1">
118
+ <h4 class="font-medium">Blinding Lights</h4>
119
+ </div>
120
+ <i data-feather="x" class="text-gray-400"></i>
121
+ </div>
122
+
123
+ <!-- Search Item -->
124
+ <div class="flex items-center p-3 rounded-lg search-result cursor-pointer">
125
+ <i data-feather="clock" class="text-gray-400 mr-4"></i>
126
+ <div class="flex-1">
127
+ <h4 class="font-medium">Dua Lipa</h4>
128
+ </div>
129
+ <i data-feather="x" class="text-gray-400"></i>
130
+ </div>
131
+ </div>
132
+ </section>
133
+ </main>
134
+
135
+ <!-- Navigation -->
136
+ <nav class="flex justify-around items-center p-4 border-t border-accent bg-secondary">
137
+ <div class="flex flex-col items-center text-gray-400">
138
+ <i data-feather="home" class="w-6 h-6"></i>
139
+ <span class="text-xs mt-1">Home</span>
140
+ </div>
141
+ <div class="flex flex-col items-center text-primary">
142
+ <i data-feather="search" class="w-6 h-6"></i>
143
+ <span class="text-xs mt-1">Search</span>
144
+ </div>
145
+ <div class="flex flex-col items-center text-gray-400">
146
+ <i data-feather="book" class="w-6 h-6"></i>
147
+ <span class="text-xs mt-1">Library</span>
148
+ </div>
149
+ <div class="flex flex-col items-center text-gray-400">
150
+ <i data-feather="heart" class="w-6 h-6"></i>
151
+ <span class="text-xs mt-1">Favorites</span>
152
+ </div>
153
+ <div class="flex flex-col items-center text-gray-400">
154
+ <i data-feather="user" class="w-6 h-6"></i>
155
+ <span class="text-xs mt-1">Profile</span>
156
+ </div>
157
+ </nav>
158
+ </div>
159
+
160
+ <script>
161
+ feather.replace();
162
+ </script>
163
+ </body>
164
+ </html>
165
+ >>>>>>> REPLACE