Hugging Face's logo

Spaces:
arthur6583
/
melodify
Running

App Files Community
arthur6583 commited on
Commit
13b0fa3
·
verified ·
1 Parent(s): ae30c09

App de musique mobile comme deezer en 1 fichier html JS et css

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +273 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Melodify
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: gray
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: Melodify 🎵
3
+ colorFrom: red
4
+ colorTo: red
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,274 @@
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>Melodify - Music Streaming</title>
7
+ <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>">
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
+ }
24
+ }
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;
40
+ }
41
+ .music-bar:nth-child(2) {
42
+ animation-delay: 0.2s;
43
+ }
44
+ .music-bar:nth-child(3) {
45
+ animation-delay: 0.4s;
46
+ }
47
+ .music-bar:nth-child(4) {
48
+ animation-delay: 0.6s;
49
+ }
50
+ .music-bar:nth-child(5) {
51
+ animation-delay: 0.8s;
52
+ }
53
+ @keyframes musicBar {
54
+ 0% {
55
+ transform: scaleY(1);
56
+ }
57
+ 100% {
58
+ transform: scaleY(5);
59
+ }
60
+ }
61
+ .player-progress {
62
+ -webkit-appearance: none;
63
+ appearance: none;
64
+ height: 4px;
65
+ background: rgba(255, 255, 255, 0.2);
66
+ border-radius: 2px;
67
+ outline: none;
68
+ }
69
+ .player-progress::-webkit-slider-thumb {
70
+ -webkit-appearance: none;
71
+ appearance: none;
72
+ width: 16px;
73
+ height: 16px;
74
+ border-radius: 50%;
75
+ background: #FF5E5B;
76
+ cursor: pointer;
77
+ }
78
+ .scroll-hidden {
79
+ -ms-overflow-style: none;
80
+ scrollbar-width: none;
81
+ }
82
+ .scroll-hidden::-webkit-scrollbar {
83
+ display: none;
84
+ }
85
+ .album-art {
86
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
87
+ animation: rotateAlbum 20s linear infinite;
88
+ transform-origin: center;
89
+ }
90
+ @keyframes rotateAlbum {
91
+ from {
92
+ transform: rotate(0deg);
93
+ }
94
+ to {
95
+ transform: rotate(360deg);
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
+
119
+ <!-- Main Content -->
120
+ <main class="flex-1 overflow-y-auto scroll-hidden p-4">
121
+ <!-- Now Playing Section -->
122
+ <section class="mb-8">
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>
133
+ </div>
134
+ <div class="text-center mb-2">
135
+ <h3 class="text-xl font-bold">Blinding Lights</h3>
136
+ <p class="text-gray-400">The Weeknd</p>
137
+ </div>
138
+
139
+ <!-- Progress Bar -->
140
+ <div class="mb-2">
141
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
142
+ <span>1:23</span>
143
+ <span>3:45</span>
144
+ </div>
145
+ <input type="range" min="0" max="100" value="35" class="player-progress w-full">
146
+ </div>
147
+
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>
159
+
160
+ <!-- Recently Played -->
161
+ <section>
162
+ <div class="flex justify-between items-center mb-4">
163
+ <h2 class="text-lg font-semibold">Recently Played</h2>
164
+ <span class="text-primary text-sm">See All</span>
165
+ </div>
166
+
167
+ <div class="space-y-3">
168
+ <!-- Song Item -->
169
+ <div class="flex items-center p-3 rounded-lg active-song">
170
+ <img src="http://static.photos/music/60x60/12" alt="Song" class="w-12 h-12 rounded-lg object-cover mr-4">
171
+ <div class="flex-1">
172
+ <h4 class="font-medium">Save Your Tears</h4>
173
+ <p class="text-gray-400 text-sm">The Weeknd</p>
174
+ </div>
175
+ <div class="flex items-center">
176
+ <div class="flex mr-3">
177
+ <div class="music-bar"></div>
178
+ <div class="music-bar"></div>
179
+ <div class="music-bar"></div>
180
+ <div class="music-bar"></div>
181
+ <div class="music-bar"></div>
182
+ </div>
183
+ <i data-feather="more-vertical" class="text-gray-400"></i>
184
+ </div>
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>
192
+ <p class="text-gray-400 text-sm">Dua Lipa</p>
193
+ </div>
194
+ <div class="flex items-center">
195
+ <span class="text-gray-400 text-sm mr-3">3:24</span>
196
+ <i data-feather="more-vertical" class="text-gray-400"></i>
197
+ </div>
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>
205
+ <p class="text-gray-400 text-sm">The Kid LAROI, Justin Bieber</p>
206
+ </div>
207
+ <div class="flex items-center">
208
+ <span class="text-gray-400 text-sm mr-3">2:59</span>
209
+ <i data-feather="more-vertical" class="text-gray-400"></i>
210
+ </div>
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>
218
+ <p class="text-gray-400 text-sm">Olivia Rodrigo</p>
219
+ </div>
220
+ <div class="flex items-center">
221
+ <span class="text-gray-400 text-sm mr-3">2:58</span>
222
+ <i data-feather="more-vertical" class="text-gray-400"></i>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </section>
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>
234
+ </div>
235
+ <div class="flex flex-col items-center text-gray-400">
236
+ <i data-feather="search" class="w-6 h-6"></i>
237
+ <span class="text-xs mt-1">Search</span>
238
+ </div>
239
+ <div class="flex flex-col items-center text-gray-400">
240
+ <i data-feather="book" class="w-6 h-6"></i>
241
+ <span class="text-xs mt-1">Library</span>
242
+ </div>
243
+ <div class="flex flex-col items-center text-gray-400">
244
+ <i data-feather="heart" class="w-6 h-6"></i>
245
+ <span class="text-xs mt-1">Favorites</span>
246
+ </div>
247
+ <div class="flex flex-col items-center text-gray-400">
248
+ <i data-feather="user" class="w-6 h-6"></i>
249
+ <span class="text-xs mt-1">Profile</span>
250
+ </div>
251
+ </nav>
252
+ </div>
253
+
254
+ <script>
255
+ feather.replace();
256
+
257
+ // Simulate music progress
258
+ const progressBar = document.querySelector('.player-progress');
259
+ let progress = 35;
260
+
261
+ setInterval(() => {
262
+ progress += 0.1;
263
+ if (progress > 100) progress = 0;
264
+ progressBar.value = progress;
265
+
266
+ // Update time display
267
+ const currentTime = document.querySelector('.text-sm.text-gray-400:first-child');
268
+ const minutes = Math.floor(progress * 2.2 / 60);
269
+ const seconds = Math.floor(progress * 2.2 % 60);
270
+ currentTime.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
271
+ }, 1000);
272
+ </script>
273
+ </body>
274
  </html>