Hugging Face's logo

Spaces:
nkjoy
/
aimuisc
Running

App Files Community
nkjoy commited on
Commit
5bad1ac
·
verified ·
1 Parent(s): e774b7c

탐색 페이지도 만들어줘! - Follow Up Deployment

Browse files
Files changed (8) hide show
  1. chart.html +530 -0
  2. collection.html +487 -0
  3. explore.html +643 -0
  4. index.html +2 -2
  5. login.html +1 -0
  6. mypage.html +3 -3
  7. prompts.txt +4 -1
  8. upload.html +1 -0
chart.html ADDED
@@ -0,0 +1,530 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>음악 차트 - AI Music Hub</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ navy: '#0f172a',
16
+ charcoal: '#1e293b',
17
+ accent: {
18
+ from: '#a855f7',
19
+ to: '#ec4899'
20
+ }
21
+ },
22
+ backgroundImage: {
23
+ 'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录1), rgba(255, 255, 255, 0.05))',
24
+ 'neon-glow': 'linear-gradient(45deg, #a855f7, #ec4899, #a855f7)',
25
+ },
26
+ boxShadow: {
27
+ 'neon': '0 0 5px #a855极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录f7, 0 0 10px #ec4899, 0 0 15px #a855f7',
28
+ 'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7'
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
35
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
36
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
37
+ <script src="https://unpkg.com/feather-icons"></script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
40
+
41
+ body {
42
+ font-family: 'Noto Sans KR', sans-serif;
43
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
44
+ color: #f8fafc;
45
+ min-height: 100vh;
46
+ }
47
+
48
+ .glass-button {
49
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
50
+ backdrop-filter: blur(10px);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ border-radius: 12px;
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .glass-button:hover {
57
+ box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #极速赛车开奖官网历史记录【——极速赛车开奖官网历史记录qq:49678154——】.极速赛车开奖官网历史记录a855f7;
58
+ transform: translateY(-2px);
59
+ }
60
+
61
+ .neon-border {
62
+ border: 1px solid transparent;
63
+ background: linear-gradient(#0f172a, #0f172a) padding-box,
64
+ linear-gradient(45deg, #a855f7, #ec4899) border-box;
65
+ }
66
+
67
+ .track-card {
68
+ transition: all 0.3s ease;
69
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
70
+ backdrop-filter: blur(10px);
71
+ }
72
+
73
+ .track-card:hover {
74
+ transform: translateY(-5px);
75
+ box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
76
+ }
77
+
78
+ .progress-bar {
79
+ appearance: none;
80
+ height: 4px;
81
+ border-radius: 2px;
82
+ background: #334155;
83
+ outline: none;
84
+ }
85
+
86
+ .progress-bar::-webkit-slider-thumb {
87
+ appearance: none;
88
+ width: 12px;
89
+ height: 12px;
90
+ border-radius: 50%;
91
+ background: linear-gradient(45deg, #a855f7, #ec4899);
92
+ cursor: pointer;
93
+ box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
94
+ }
95
+
96
+ .chart-badge {
97
+ background: linear-gradient(45deg, #a855f7, #ec4899);
98
+ box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
99
+ }
100
+
101
+ .tab-button {
102
+ transition: all 0.3s ease;
103
+ }
104
+
105
+ .tab-button.active {
106
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
107
+ box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
108
+ }
109
+
110
+ .rank-number {
111
+ width: 32px;
112
+ height: 32px;
113
+ border-radius: 8px;
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ font-weight: bold;
118
+ font-size: 16px;
119
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
120
+ }
121
+
122
+ .rank-1 {
123
+ background: linear-gradient(45deg, #FFD700, #FFA500);
124
+ color: #0f172a;
125
+ }
126
+
127
+ .rank-2 {
128
+ background: linear-gradient(45deg, #C0C0C0, #A9A9A9);
129
+ color: #0f172a;
130
+ }
131
+
132
+ .rank-3 {
133
+ background: linear-gradient(45deg, #CD7F32, #8C6B46);
134
+ color: #0f172a;
135
+ }
136
+ </style>
137
+ </head>
138
+ <body class="min-h-screen">
139
+ <!-- Navigation -->
140
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
141
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
142
+ <a href="index.html" class="flex items-center space-x-2">
143
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
144
+ <i data-feather="music" class="text-white"></i>
145
+ </div>
146
+ <span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
147
+ </a>
148
+
149
+ <div class="hidden md:flex items-center space-x-6">
150
+ <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
151
+ <a href="#" class="text-gray-300 hover:text-white transition">탐색</a>
152
+ <a href="chart.html" class="text-accent-from font-medium transition">차트</a>
153
+ <a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a>
154
+ </div>
155
+
156
+ <div class="flex items-center space-x-2 sm:space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-4">
157
+ <a href="upload.html" class="glass-button px-3 py-2 sm:px-4 text-white flex items-center space-x-1 sm:space-x-2">
158
+ <i data-feather="plus" class="w-4 h-4"></i>
159
+ <span class="hidden xs:block">업로드</span>
160
+ </a>
161
+
162
+ <a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
163
+ <i data-feather="log-in" class="w-4极速赛车开奖官网极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-4"></i>
164
+ <span class="hidden xs:block">로그인</span>
165
+ </a>
166
+
167
+ <a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
168
+ <i data-feather="user" class="w-4 h-4"></i>
169
+ <span class="hidden xs:block">마이페이지</span>
170
+ </a>
171
+
172
+ <!-- Mobile menu button -->
173
+ <button class="md:hidden glass-button p-2" id="mobile-menu-button">
174
+ <i data-feather="menu" class="w-5 h-5"></i>
175
+ </button>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Mobile menu -->
180
+ <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
181
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
182
+ <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a>
183
+ <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a>
184
+ <a href="chart.html" class="text-accent-from font-medium transition py-2">차트</a>
185
+ <a href="collection.html" class="text-gray-300 hover:text-white transition py-2">컬렉션</a>
186
+ <div class="relative block sm:hidden pt-2">
187
+ <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
188
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ </nav>
193
+
194
+ <!-- Chart Header -->
195
+ <section class="pt-28 pb-8 px-4">
196
+ <div class="container mx-auto text-center" data-aos="fade-up">
197
+ <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">AI 음악 차트</h1>
198
+ <p class="text-lg text-gray-300 max-w-2xl mx-auto">가장 인기 있는 AI 생성 음악들을 확인해보세요. 실시간으로 업데이트되는 인기 차트입니다.</p>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- Chart Tabs -->
203
+ <section class="py-6 px-4">
204
+ <div class="container mx-auto">
205
+ <div class="flex border-b border-gray-800 mb-8 overflow-x-auto">
206
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-accent-from active" data-tab="daily">
207
+ 일간 차트
208
+ </button>
209
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="weekly">
210
+ 주간 차트
211
+ </button>
212
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="monthly">
213
+ 월간 차트
214
+ </button>
215
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="genres">
216
+ 장르별
217
+ </button>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Daily Chart -->
223
+ <section class="py-6 px-4">
224
+ <div class="container mx-auto">
225
+ <div id="daily" class="tab-content active">
226
+ <div class="grid grid-cols-1 gap-4">
227
+ <!-- Rank 1 -->
228
+ <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up">
229
+ <div class="rank-number rank-1">1</div>
230
+ <img src="http://static.photos/abstract/80x80/701" alt="Cover" class="w-16 h-16 rounded-xl object-cover">
231
+ <div class="flex-1 min-w-0">
232
+ <h3 class="font-semibold text-lg mb-1">Cosmic Dreams</h3>
233
+ <p class="text-gray-400 text-sm">Soundful AI · 45.8K 재생</p>
234
+ </div>
235
+ <div class="hidden sm:flex items-center space-x-4">
236
+ <div class="flex items-center space-x-1 text-gray-400">
237
+ <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i>
238
+ <span>+3</span>
239
+ </div>
240
+ <div class="flex items-center space-x-1">
241
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
242
+ <span class="text-sm">12.4K</span>
243
+ </div>
244
+ </div>
245
+ <button class="glass-button p-3">
246
+ <i data-feather="play" class="w-5 h-5"></i>
247
+ </button>
248
+ </div>
249
+
250
+ <!-- Rank 2 -->
251
+ <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up" data-aos-delay="100">
252
+ <div class="rank-number rank-2">2</div>
253
+ <img src="http://static.photos/abstract/80x80/702" alt="Cover" class="w-16 h-16 rounded-xl object-cover">
254
+ <div class="flex-1 min-w-0">
255
+ <h3 class="font-semibold text-lg mb-1">Neon Pulse</h3>
256
+ <p class="text-gray-400 text-sm">AIVA · 38.2K 재생</p>
257
+ </div>
258
+ <div class="hidden sm:flex items-center space-x-4">
259
+ <div class="flex items-center space-x-1 text-gray-400">
260
+ <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i>
261
+ <span>+1</span>
262
+ </div>
263
+ <div class="flex items-center space-x-1">
264
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
265
+ <span class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="text-sm">9.8K</span>
266
+ </div>
267
+ </div>
268
+ <button class="glass-button p-3">
269
+ <i data-feather="play" class="w-5 h-5"></i>
270
+ </button>
271
+ </div>
272
+
273
+ <!-- Rank 3 -->
274
+ <div class="track-card rounded-2xl p-4 flex items-center space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-4" data-aos="fade-up" data-aos-delay="200">
275
+ <div class="rank-number rank-3">3</div>
276
+ <img src="http://static.photos/abstract/80x80/703" alt="Cover" class="w-16 h-16 rounded-xl object-cover">
277
+ <div class="flex-1 min-w-0">
278
+ <h3 class="font-semibold text-lg mb-1">Digital Ocean</h3>
279
+ <p class="text-gray-400 text-sm">Amper Music · 32.5K 재생</p>
280
+ </div>
281
+ <div class="hidden sm:flex items-center space-x-4">
282
+ <div class="flex items-center space-x-1 text-gray-400">
283
+ <i data-feather="trending-down" class="w-4 h-4 text-red-400"></i>
284
+ <span>-2</span>
285
+ </div>
286
+ <div class="flex items-center space-x-1">
287
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
288
+ <span class="text-sm">8.3K</span>
289
+ </div>
290
+ </div>
291
+ <button class="glass-button p-3">
292
+ <i data-feather="play" class="w-5 h-5"></i>
293
+ </button>
294
+ </div>
295
+
296
+ <!-- Ranks 4-10 -->
297
+ <div class="track-card rounded-2xl p-4 flex items-center space-x-4" data-aos="fade-up" data-aos-delay="300">
298
+ <div class="rank-number">4</div>
299
+ <img src="http://static.photos/abstract/80x80/704" alt="Cover" class="w-16 h-16 rounded-xl object-cover">
300
+ <div class="flex-1 min-w-0">
301
+ <h3 class="font-semibold text-lg mb-1">Synthwave Memories</h3>
302
+ <p class="text-gray-400 text-sm">OpenAI MuseNet · 28.7K 재생</p>
303
+ </div>
304
+ <div class="hidden sm:flex items-center space-x-4">
305
+ <div class="flex items-center space-x-1 text-gray-400">
306
+ <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i>
307
+ <span>+5</span>
308
+ </div>
309
+ <div class="flex items-center space-x-1">
310
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
311
+ <span class="text-sm">7.2K</span>
312
+ </div>
313
+ </div>
314
+ <button class="glass-button p-3">
315
+ <i data-feather="play" class="w-5 h-5"></i>
316
+ </button>
317
+ </div>
318
+
319
+ <!-- Add more ranks as needed -->
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Empty states for other tabs -->
324
+ <div id="weekly" class="tab-content hidden">
325
+ <div class="text-center py-12">
326
+ <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
327
+ <h3 class="text-xl font-semibold mb-2">주간 차트 데이터 준비 중</h3>
328
+ <p class="text-gray-400">곧 업데이트될 예정입니다</p>
329
+ </div>
330
+ </div>
331
+
332
+ <div id="monthly" class="tab-content hidden">
333
+ <div class="text-center py-12">
334
+ <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
335
+ <h3 class="text-xl font-semibold mb-2">월간 차트 데이터 준비 중</h3>
336
+ <p class="text-gray-400">곧 업데이트될 예정입니다</p>
337
+ </div>
338
+ </div>
339
+
340
+ <div id="genres" class="tab-content hidden">
341
+ <div class="text-center py-12">
342
+ <i data-feather="bar-chart-2" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
343
+ <h3 class="text-xl font-semibold mb-2">장르별 차트 데이터 준비 중</h3>
344
+ <p class="text-gray-400">곧 업데이트될 예정입니다</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Trending Now -->
351
+ <section class="py-12 px-4">
352
+ <div class="container mx-auto">
353
+ <h2 class="text-2xl font-bold mb-6" data-aos="fade-right">지금 뜨는 음악</h2>
354
+
355
+ <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
356
+ <!-- Trending Track 1 -->
357
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100">
358
+ <div class="relative mb-4">
359
+ <img src="http://static.photos/abstract/320x320/801" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
360
+ <div class="absolute top-2 left-2">
361
+ <span class="chart-badge text-xs px-2 py-1 rounded-full">Hot</span>
362
+ </div>
363
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
364
+ <i data-feather="play" class="text-white"></i>
365
+ </button>
366
+ </div>
367
+ <div class="mb-3">
368
+ <h3 class="font-semibold text-lg mb-1">Quantum Echo</h3>
369
+ <p class="text-gray-400 text-sm">Jukebox AI · 15K 재생</p>
370
+ </div>
371
+ <div class="flex items-center justify-between">
372
+ <div class="flex items-center space-x-2">
373
+ <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i>
374
+ <span class="text-sm">+124%</span>
375
+ </div>
376
+ <button class="glass-button p-2">
377
+ <i data-feather="heart" class="w-4 h-4"></i>
378
+ </button>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Trending Track 2 -->
383
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200">
384
+ <div class="relative mb-4">
385
+ <img src="http://static.photos/abstract/320x320/802" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
386
+ <div class="absolute top-2 left-2">
387
+ <span class="chart-badge text-xs px-2 py-1 rounded-full">New</span>
388
+ </div>
389
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录/50 flex items-center justify-center hover:bg-accent-from transition">
390
+ <i data-feather="play" class="text-white"></i>
391
+ </button>
392
+ </div>
393
+ <div class="mb-3">
394
+ <h3 class="font-semib极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录old text-lg mb-1">Neural Dawn</h3>
395
+ <p class="text-gray-400 text-sm">Amadeus Code · 8.7K 재생</p>
396
+ </div>
397
+ <div class="flex items-center justify-between">
398
+ <div class="flex items-center space-x-2">
399
+ <i data-feather="trending-up" class="w-4 h-4 text-green-400"></i>
400
+ <span class="text-sm">+89%</span>
401
+ </div>
402
+ <button class="glass-button p-2">
403
+ <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i data-feather="heart" class="w-4 h-4"></i>
404
+ </button>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Add more trending tracks as needed -->
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- Footer -->
414
+ <footer class="py-12 px-4 border-t border-gray-800 mt-12">
415
+ <div class="container mx-auto">
416
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
417
+ <div>
418
+ <div class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="flex items-center space-x-2 mb-4">
419
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
420
+ <i data-feather="music" class="text-white"></i>
421
+ </div>
422
+ <span class="text-xl font-bold">AI Music Hub</span>
423
+ </div>
424
+ <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
425
+ </div>
426
+
427
+ <div>
428
+ <h3 class="font-semibold mb-4">서비스</h3>
429
+ <ul class="space-y极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
430
+ <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li>
431
+ <li><a href="chart.html" class="text-gray-400 hover:text-white transition">차트</a></li>
432
+ <li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
433
+ <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
434
+ </ul>
435
+ </div>
436
+
437
+ <div>
438
+ <h3 class="font-semibold mb-4">지원</h3>
439
+ <ul class="space-y-2">
440
+ <li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li>
441
+ <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录></a></li>
442
+ <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
443
+ <li><a href="#" class="text-gray极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录官网历史记录-400 hover:text-white transition">문의하기</a></li>
444
+ </ul>
445
+ </div>
446
+
447
+ <div>
448
+ <h3 class="font-semibold mb-4">极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录소셜 미디어</h3>
449
+ <div class="flex space-x-4">
450
+ <a href="#" class="glass-button p-2">
451
+ <i data-feather="facebook" class="w-4 h-4"></i>
452
+ </a>
453
+ <a href="#" class="glass-button p-2">
454
+ <i data-feather="twitter" class="w-4 h-4"></极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i>
455
+ </a>
456
+ <a href="#" class="glass-button p-2">
457
+ <i data-feather="instagram" class="w-4 h-4"></i>
458
+ </a>
459
+ <a href="#" class="glass-button p-2">
460
+ <i data-feather="youtube" class="w-4 h-4"></i>
461
+ </a>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
467
+ <p>© 2023 AI Music Hub. All rights reserved.</p>
468
+ </div>
469
+ </div>
470
+ </footer>
471
+
472
+ <script>
473
+ AOS.init({
474
+ duration: 800,
475
+ easing: 'ease-in-out',
476
+ once: true
477
+ });
478
+
479
+ feather.replace();
480
+
481
+ // Mobile menu functionality
482
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
483
+ const mobileMenu = document.getElementById('mobile-menu');
484
+
485
+ mobileMenuButton.addEventListener('click', () => {
486
+ mobileMenu.classList.toggle('hidden');
487
+ const icon = mobileMenuButton.querySelector('i');
488
+ if (mobileMenu.classList.contains('hidden')) {
489
+ icon.setAttribute('data-feather', 'menu');
490
+ } else {
491
+ icon.setAttribute('data-feather', 'x');
492
+ }
493
+ feather.replace();
494
+ });
495
+
496
+ // Tab functionality
497
+ const tabButtons = document.querySelectorAll('.tab-button');
498
+ const tabContents = document.querySelectorAll('.tab-content');
499
+
500
+ tabButtons.forEach(button => {
501
+ button.addEventListener('click', () => {
502
+ const tabId = button.getAttribute('data-tab');
503
+
504
+ // Update active tab button
505
+ tabButtons.forEach(btn => btn.classList.remove('active'));
506
+ button.classList.add('active');
507
+
508
+ // Show active tab content
509
+ tabContents.forEach(content => {
510
+ content.classList.remove('active');
511
+ content.classList.add('hidden');
512
+ });
513
+
514
+ document.getElementById(tabId).classList.remove('hidden');
515
+ document.getElementById(tabId).classList.add('active');
516
+ });
517
+ });
518
+
519
+ // Close mobile menu when clicking outside
520
+ document.addEventListener('click', (e) => {
521
+ if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
522
+ mobileMenu.classList.add('hidden');
523
+ const icon = mobileMenuButton.querySelector('i');
524
+ icon.setAttribute('data-feather', 'menu');
525
+ feather.replace();
526
+ }
527
+ });
528
+ </script>
529
+ </body>
530
+ </html>
collection.html ADDED
@@ -0,0 +1,487 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>컬렉션 - AI Music Hub</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ navy: '#0f极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录172a',
16
+ charcoal: '#1e293b',
17
+ accent: {
18
+ from: '#a855f7',
19
+ to: '#ec4899'
20
+ }
21
+ },
22
+ backgroundImage: {
23
+ 'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
24
+ 'neon-glow': 'linear-gradient(45deg, #a855f7, #ec4899, #a855f7)',
25
+ },
26
+ boxShadow: {
27
+ 'neon': '0 0 5px #a855f7, 0 0 10px #ec4899, 0 0 15px #a855f7',
28
+ 'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录0 30px #a855f7'
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <link href="https://unpkg.com/aos@2.3.1/dist极速赛车开奖官网历史记录【——qq:496781极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录54——】.极速赛车开奖官网历史记录/aos.css" rel="stylesheet">
35
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
36
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
37
+ <script src="https://unpkg.com/feather-icons"></script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
40
+
41
+ body {
42
+ font-family: 'Noto Sans KR', sans-serif;
43
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
44
+ color: #f8fafc;
45
+ min-height: 100vh;
46
+ }
47
+
48
+ .glass-button {
49
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
50
+ backdrop-filter: blur(10px);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ border-radius: 12px;
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .glass-button:hover {
57
+ box-shadow: 0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7;
58
+ transform: translateY(-2px);
59
+ }
60
+
61
+ .neon-border {
62
+ border: 1px solid transparent;
63
+ background: linear-gradient(#0f172a, #0f172a) padding-box,
64
+ linear-gradient(45deg, #a855极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录f7, #ec4899) border-box;
65
+ }
66
+
67
+ .collection-card {
68
+ transition: all 0.3s ease;
69
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
70
+ backdrop-filter: blur(10px);
71
+ }
72
+
73
+ .collection-card:hover {
74
+ transform: translateY(-5px);
75
+ box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
76
+ }
77
+
78
+ .stats-card {
79
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
80
+ backdrop-filter: blur(10px);
81
+ }
82
+
83
+ .tab-button {
84
+ transition: all 0.3s ease;
85
+ }
86
+
87
+ .tab-button.active {
88
+ background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
89
+ box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
90
+ }
91
+
92
+ .playlist-grid {
93
+ display: grid;
94
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
95
+ gap: 1.5rem;
96
+ }
97
+ </style>
98
+ </head>
99
+ <body class="min-h-screen">
100
+ <!-- Navigation -->
101
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
102
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
103
+ <a href="index.html" class="flex items-center space-x-2">
104
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
105
+ <i data-feather="music" class="text-white"></i>
106
+ </div>
107
+ <span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
108
+ </a>
109
+
110
+ <div class="hidden md:flex items-center space-x-6">
111
+ <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
112
+ <a href="#" class="text-gray-300 hover:text-white transition">탐색</a>
113
+ <a href="collection.html" class="text-accent-from font-medium transition">컬렉션</a>
114
+ <a href="chart.html" class="text-gray-300 hover:text-white transition">차트</a>
115
+ </div>
116
+
117
+ <div class="flex items-center space-x-2 sm:space-x-4">
118
+ <a href="upload.html" class="glass-button px-3 py-2 sm:px-4 text-white flex items-center space-x-1 sm:space-x-2">
119
+ <i data-feather="plus" class="w-4 h-4"></i>
120
+ <span class="hidden xs:block">업로드</span>
121
+ </a>
122
+
123
+ <a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
124
+ <i data-feather="log-in" class="w-4 h-4"></i>
125
+ <span class="hidden xs:block">로그极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录인</span>
126
+ </a>
127
+
128
+ <a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
129
+ <i data-feather="user" class="w-4 h-4"></i>
130
+ <span class="hidden xs:block">마이페이지</span>
131
+ </a>
132
+
133
+ <!-- Mobile menu button -->
134
+ <button class="md:hidden glass-button p-2" id="mobile-menu-button">
135
+ <极速赛车开奖官网历史记录【——qq:49678154——极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录】.极速赛车开奖官网历史记录i data-feather="menu" class="w-5 h-5"></i>
136
+ </button>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Mobile menu -->
141
+ <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
142
+ <div class="container mx-auto px-4 py-3 flex flex-col space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-y-3">
143
+ <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a>
144
+ <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a>
145
+ <a href="collection.html" class="text-accent-from font-medium transition py-2">컬렉션</a>
146
+ <a href="chart.html" class="text-gray-300 hover:text-white transition py-2">차트</a>
147
+ <div class="relative block sm:hidden pt-2">
148
+ <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
149
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </nav>
154
+
155
+ <!-- Collection Header -->
156
+ <section class="pt-28 pb-8 px-4">
157
+ <div class="container mx-auto text-center" data-aos="fade-up">
158
+ <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">나의 컬렉션</h1>
159
+ <p class="text-lg text-gray-300 max-w-2xl mx-auto">저장한 플레이리스트와 좋아하는 음악들을 모아보세요</p>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Stats Section -->
164
+ <section class="py-8 px-4">
165
+ <div class="container mx-auto">
166
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
167
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="100">
168
+ <i data-feather="list" class="w-8 h-8 text-accent-from mx-auto mb-4"></i>
169
+ <div class="text-3xl font-bold mb-2">8</div>
170
+ <p class="text-gray-400">플레이리스트</p>
171
+ </div>
172
+
173
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="200">
174
+ <i data-feather="heart" class="w-8 h-8 text-red-400 mx-auto mb-4"></i>
175
+ <div class="text-3xl font-bold mb-2">127</div>
176
+ <p class="text-gray-400">좋아요한 음악</p>
177
+ </div>
178
+
179
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="300">
180
+ <i data-feather="clock" class="w-8 h-8 text-green-400 mx-auto mb-4"></i>
181
+ <div class="text-3xl font-bold mb-2">24.5</div>
182
+ <p class="text-gray-400">시간 음악</p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Tabs Section -->
189
+ <section class="py-8 px-4">
190
+ <div class="container mx-auto">
191
+ <div class="flex border-b border-gray-800 mb-8 overflow-x-auto">
192
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-accent-from active" data-tab="playlists">
193
+ 플레이리스트
194
+ </button>
195
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="liked">
196
+ 좋아요한 음악
197
+ </button>
198
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="recent">
199
+ 최근 들은 음악
200
+ </button>
201
+ </div>
202
+
203
+ <!-- Playlists Tab -->
204
+ <div id="playlists" class="tab-content active">
205
+ <div class="flex justify-between items-center mb-6">
206
+ <h2 class="text-xl font-semibold">내 플레이리스트</h2>
207
+ <button class="glass-button px-4 py-2 text-white flex items-center space-x-2">
208
+ <i data-feather="plus" class="w-4 h-4"></i>
209
+ <span>새 플레이리스트</span>
210
+ </button>
211
+ </div>
212
+
213
+ <div class="playlist-grid">
214
+ <!-- Playlist 1 -->
215
+ <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
216
+ <div class="relative">
217
+ <img src="http://static.photos/abstract/400x400/901" alt="Playlist" class="w-full h-48 object-cover">
218
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
219
+ <div class="absolute bottom-4 left-4">
220
+ <h3 class="text-xl font-bold">일렉트로닉 에센스</h3>
221
+ <p class="text-gray-300 text-sm">24곡 · 2.4K 재생</p>
222
+ </div>
223
+ </div>
224
+ <div class="p-4">
225
+ <div class="flex justify-between items-center">
226
+ <div class="flex items-center space-x-2">
227
+ <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full">
228
+ <span class="text-sm text-gray-400">내 플레이리스트</span>
229
+ </div>
230
+ <button class="glass-button p-2">
231
+ <i data-feather="play" class="w-4 h-4"></i>
232
+ </button>
233
+ </div>
234
+ </div>
235
+ </div>
236
+
237
+ <!-- Playlist 2 -->
238
+ <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
239
+ <div class="relative">
240
+ <img src="http://static.photos/abstract/400x400/902" alt="Playlist" class="w-full h-48 object-cover">
241
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
242
+ <div class="absolute bottom-4 left-4">
243
+ <h3 class="text-xl font-bold">아침을 깨우는 AI 음악</h3>
244
+ <p class="text-gray-300 text-sm">18곡 · 1.8K 재생</p>
245
+ </div>
246
+ </div>
247
+ <div class="p-4">
248
+ <div class="flex justify-between items-center">
249
+ <div class="flex items-center space-x-2">
250
+ <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full">
251
+ <span class="text-sm text-gray-400">내 플레이리스트</span>
252
+ </div>
253
+ <button class="glass-button p极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
254
+ <i data-feather="play" class="w-4 h-4"></i>
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Playlist 3 -->
261
+ <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
262
+ <div class="relative">
263
+ <img src="http://static.photos/abstract/400x400/903" alt="Playlist" class="w-full h-48 object-cover">
264
+ <div class="absolute inset极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-0 bg-gradient-to-t from-black/60 to-transparent"></div>
265
+ <div class="absolute bottom-4 left-4">
266
+ <h3 class="text-xl font-bold">집중 모드</h3>
267
+ <p class="text-gray-300 text-sm">32곡 · 3.2K 재생</p>
268
+ </div>
269
+ </div>
270
+ <div class="p-4">
271
+ <div class="flex justify-between items-center">
272
+ <div class="flex items-center space-x-2">
273
+ <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6 h-6 rounded-full">
274
+ <span class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="text-sm text-gray-400">내 플레이리스트</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录span>
275
+ </div>
276
+ <button class="glass-button p-2">
277
+ <i data-feather="play" class="w-4 h-4"></i>
278
+ </button>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Playlist 4 -->
284
+ <div class="collection-card rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
285
+ <div class="relative">
286
+ <img src="http://static.photos/abstract/400x400/904" alt="Playlist" class="w-full h-48 object-cover">
287
+ <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
288
+ <div class="absolute bottom-4 left-4">
289
+ <h3 class="text-xl font-bold">운동 플레이리스트</h3>
290
+ <p class="text-gray-300 text-sm">20곡 · 2.1K 재생</p>
291
+ </div>
292
+ </div>
293
+ <div class="p-4">
294
+ <div class="flex justify-between items-center">
295
+ <div class="flex items-center space-x-2">
296
+ <img src="http://static.photos/people/32x32/901" alt="Creator" class="w-6极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-6 rounded-full">
297
+ <span class="text-sm text-gray-400">내 플레이리스트</span>
298
+ </div>
299
+ <button class="glass-button p-2">
300
+ <i data-feather="play" class="w-4 h-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录4"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Liked Songs Tab -->
309
+ <div id="liked" class="tab-content hidden">
310
+ <div class="flex justify-between items-center mb-6">
311
+ <h2 class="text-xl font-semibold">좋아요한 음악</h2>
312
+ <button class="glass-button px-4 py-2 text-white flex items-center space-x-2">
313
+ <i data-feather="play" class="w-4 h-4"></i>
314
+ <span>모두 재생</span>
315
+ </button>
316
+ </div>
317
+
318
+ <div class="bg-charcoal/50 rounded-2xl p-6">
319
+ <div class="grid grid-cols-1 gap-4">
320
+ <!-- Liked Track 1 -->
321
+ <div class="flex items-center justify-between p-3 rounded-lg hover:bg-navy/50 transition">
322
+ <div class="flex items-center space-x-4">
323
+ <img src="http://static.photos/abstract/64x64/911" alt="Track" class="w-12 h-12 rounded-lg object-cover">
324
+ <div>
325
+ <h4 class="font-medium">Cosmic Dreams</h4>
326
+ <p class="text-gray-400 text-sm">Soundful AI</p>
327
+ </div>
328
+ </div>
329
+ <div class="flex items-center space-x-4">
330
+ <span class="text-gray-400 text-sm">3:42</span>
331
+ <button class="glass-button p-2">
332
+ <i data-feather="play" class="w-4 h-4"></i>
333
+ </button>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Liked Track 2 -->
338
+ <div class="flex items-center justify-between p-3 rounded-lg hover:bg-navy/50 transition">
339
+ <div class="flex items-center space-x-4">
340
+ <img src="http://static.photos/abstract/64x64/912" alt="Track" class="w-12 h-12 rounded-lg object-cover">
341
+ <div>
342
+ <h4 class="font-medium">Neon Pulse</h4>
343
+ <p class="text-gray-400 text-sm">AIVA</p>
344
+ </div>
345
+ </div>
346
+ <div class="flex items-center space-x-4">
347
+ <span class="text-gray-400 text-sm">4:15</span>
348
+ <button class="glass-button p-2">
349
+ <i data-feather="play" class="w-4 h-4"></i>
350
+ </button>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Add more liked tracks as needed -->
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Recent Tab -->
360
+ <div id="recent" class="tab-content hidden">
361
+ <div class="text-center py-12">
362
+ <i data-feather="clock" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
363
+ <h3 class="text-xl font-semibold mb-2">최근 들은 음악이 없어요</h3>
364
+ <p class="text-gray-400">음악을 재생하면 여기에 표시됩니다</p>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Footer -->
371
+ <footer class="py-12 px-4 border-t border-gray-800 mt-12">
372
+ <div class="container mx-auto">
373
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
374
+ <div>
375
+ <div class="flex items-center space-x极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2 mb-4">
376
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
377
+ <i data-feather="music" class="text-white"></i>
378
+ </div>
379
+ <span class="text-xl font-bold">AI Music Hub</span>
380
+ </div>
381
+ <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
382
+ </div>
383
+
384
+ <div>
385
+ <h3 class="font-semibold mb-4">서비스</h3>
386
+ <ul class="space-y-2">
387
+ <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li>
388
+ <li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
389
+ <li><a href="chart.html" class="text-gray-400 hover:text-white transition">차트</a></li>
390
+ <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
391
+ </ul>
392
+ </div>
393
+
394
+ <div>
395
+ <h3 class="font-semibold mb-4">지원</h3>
396
+ <ul class="space-y-2">
397
+ <li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
400
+ <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录li><a href="#" class="text-gray-400 hover:text-white transition">문의하기</a></li>
401
+ </ul>
402
+ </div>
403
+
404
+ <div>
405
+ <h3 class="font-semibold mb-4">소셜 미디어</h3>
406
+ <div class="flex space-x-4">
407
+ <a href="#" class="glass-button p-2">
408
+ <i data-feather="facebook" class="w-4 h-4"></i>
409
+ </a>
410
+ <a href="#" class="glass-button p-2">
411
+ <i data-feather="twitter" class="w-4 h-4"></i>
412
+ </a>
413
+ <a href="#" class="glass-button p-2">
414
+ <i data-feather="instagram" class="w-4 h-4"></极速赛车极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i>
415
+ </a>
416
+ <a href="#" class="glass-button p-2">
417
+ <i data-feather="youtube极速赛车开奖官网历史极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录录【——qq:49678154——】.极速赛车开奖官网历史记录" class="w-4 h-4"></i>
418
+ </a>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
424
+ <p>© 2023 AI Music Hub. All rights reserved.</p>
425
+ </极速赛车开奖官网历史记录【——qq:49678154——���.极速赛车开奖官网历史记录div>
426
+ </div>
427
+ </footer>
428
+
429
+ <script>
430
+ AOS.init({
431
+ duration: 800,
432
+ easing: 'ease-in-out',
433
+ once: true
434
+ });
435
+
436
+ feather.replace();
437
+
438
+ // Mobile menu functionality
439
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
440
+ const mobileMenu = document.getElementById('mobile-menu');
441
+
442
+ mobileMenuButton.addEventListener('click', () => {
443
+ mobileMenu.classList.toggle('hidden');
444
+ const icon = mobileMenuButton.querySelector('i');
445
+ if (mobileMenu.classList.contains('hidden')) {
446
+ icon.setAttribute('data-feather', 'menu');
447
+ } else {
448
+ icon.setAttribute('data-feather', 'x');
449
+ }
450
+ feather.replace();
451
+ });
452
+
453
+ // Tab functionality
454
+ const tabButtons = document.querySelectorAll('.tab-button');
455
+ const tabContents = document.querySelectorAll('.tab-content');
456
+
457
+ tabButtons.forEach(button => {
458
+ button.addEventListener('click', () => {
459
+ const tabId = button.getAttribute('data-tab');
460
+
461
+ // Update active tab button
462
+ tabButtons.forEach(btn => btn.classList.remove('active'));
463
+ button.classList.add('active');
464
+
465
+ // Show active tab content
466
+ tabContents.forEach(content => {
467
+ content.classList.remove('active');
468
+ content.classList.add('hidden');
469
+ });
470
+
471
+ document.getElementById(tabId).classList.remove('hidden');
472
+ document.getElementById(tabId).classList.add('active');
473
+ });
474
+ });
475
+
476
+ // Close mobile menu when clicking outside
477
+ document.addEventListener('click', (e) => {
478
+ if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
479
+ mobileMenu.classList.add('hidden');
480
+ const icon = mobileMenuButton.querySelector('i');
481
+ icon.setAttribute('data-feather', 'menu');
482
+ feather.replace();
483
+ }
484
+ });
485
+ </script>
486
+ </body>
487
+ </html>
explore.html ADDED
@@ -0,0 +1,643 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>탐색 - AI Music Hub</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ navy: '#0f172a',
16
+ charcoal: '#1极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录e293b',
17
+ accent: {
18
+ from: '#a855f7',
19
+ to: '#ec4899'
20
+ }
21
+ },
22
+ backgroundImage: {
23
+ 'glass': 'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
24
+ 'neon-glow': 'linear-gradient(45deg, #a855f7极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录, #ec4899, #a855f7)',
25
+ },
26
+ boxShadow: {
27
+ 'neon': '0 0 5px #a855f7, 0 0 10px #ec4899, 0 0 15px #a855f7',
28
+ 'neon-hover': '0 0 10px #a855f7, 0 0 20px #ec4899, 0 0 30px #a855f7'
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
35
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
36
+ <script src="https://cdn.jsdelivr.net极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录/npm/feather-icons/dist/feather.min.js"></script>
37
+ <script src="https://unpkg.com/feather-icons"></script>
38
+ <style>
39
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
40
+
41
+ body {
42
+ font-family: 'Noto Sans KR', sans-serif;
43
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
44
+ color: #f8fafc;
45
+ min-height: 100vh;
46
+ }
47
+
48
+ .glass-button {
49
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖极速赛车开奖官网历史记录【——qq极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录:49678154——】.极速赛车开奖官网历史记录官网历史记录0.05));
50
+ backdrop-filter: blur(10px);
51
+ border: 1px solid rgba(255, 255, 255, 0.1);
52
+ border-radius: 12px;
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .glass-button:hover {
57
+ box-shadow: 0 0 10px #a855f7, 0 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录0 20px #ec4899, 0 0 30px #a855f7;
58
+ transform: translateY(-2px);
59
+ }
60
+
61
+ .neon-border {
62
+ border: 1px solid transparent;
63
+ background: linear-gradient(#0f172a, #0f172a) padding-box,
64
+ linear-gradient(45deg, #a855f7, #ec4899) border-box;
65
+ }
66
+
67
+ .track-card {
68
+ transition: all 0.3s ease;
69
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
70
+ backdrop-filter: blur(10px);
71
+ }
72
+
73
+ .track-card:hover {
74
+ transform: translateY(-5px);
75
+ box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
76
+ }
77
+
78
+ .progress-bar {
79
+ appearance: none;
80
+ height: 4px;
81
+ border-radius: 2px;
82
+ background: #334155;
83
+ outline: none;
84
+ }
85
+
86
+ .progress-bar::-webkit-slider-thumb {
87
+ appearance: none;
88
+ width: 12px;
89
+ height: 12px;
90
+ border-radius: 50%;
91
+ background: linear-gradient(45deg, #a855f7, #ec4899);
92
+ cursor: pointer;
93
+ box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
94
+ }
95
+
96
+ .search-input {
97
+ background: rgba(30, 41, 59, 0.5);
98
+ backdrop-filter: blur(10px);
99
+ }
100
+
101
+ .search-input:focus {
102
+ box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
103
+ }
104
+
105
+ .category-chip {
106
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
107
+ backdrop-filter: blur(10px);
108
+ transition: all 0.3s ease;
109
+ }
110
+
111
+ .category-chip.active {
112
+ background: linear-gradient(45deg, #a855f7, #ec4899);
113
+ box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
114
+ }
115
+
116
+ .filter-panel {
117
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
118
+ backdrop-filter: blur(10px);
119
+ }
120
+ </style>
121
+ </head>
122
+ <body class="min-h-screen">
123
+ <!-- Navigation -->
124
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
125
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
126
+ <a href="index.html" class="flex items-center space-x-2">
127
+ <div class="w-8极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
128
+ <i data-feather="music" class="text-white"></i>
129
+ </div>
130
+ <span class="text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
131
+ </a>
132
+
133
+ <div class="hidden md:flex items-center space-x-6">
134
+ <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
135
+ <a href="explore.html" class="text-accent-from font-medium transition">탐색</a>
136
+ <a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a>
137
+ <a href="chart.html" class="text-gray-300 hover:text-white transition">차트</a>
138
+ </div>
139
+
140
+ <div class="flex items-center space-x-2 sm:space-x-4">
141
+ <div class="relative hidden sm:block">
142
+ <input type="text" placeholder="음악 검색..." class="search-input py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
143
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
144
+ </div>
145
+
146
+ <a href="upload.html" class="glass-button px-3 py-2 sm:px-4 text-white flex items-center space-x-1 sm:space-x-2">
147
+ <i data-feather="plus" class极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="w-4 h-4"></i>
148
+ <span class="hidden xs:block">업로드</span>
149
+ </a>
150
+
151
+ <a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-x-1 sm:space-x-2">
152
+ <i data-feather="log-in" class="w-4 h-4"></i>
153
+ <span class="hidden xs:block">로그인</span>
154
+ </a>
155
+
156
+ <a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
157
+ <i data-feather="user" class="w-4 h-4"></i>
158
+ <span class="hidden xs:block">마이페이지</span>
159
+ </a>
160
+
161
+ <!-- Mobile menu button -->
162
+ <button class="md:hidden glass-button p-2" id="mobile-menu-button">
163
+ <i data-feather="menu" class="w-5 h-5"></极速赛车开奖官网历史记录【——qq:49678154——】.极极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录速赛车开奖官网历史记录i>
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Mobile menu -->
169
+ <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
170
+ <div class="container mx-auto px-4极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录 py-3 flex flex-col space-y-3">
171
+ <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a>
172
+ <a href="explore.html" class="text-accent-from font-medium transition py-2">탐색</a>
173
+ <a href="collection.html" class="text-gray-300 hover:text-white transition py-2">컬렉션</a>
174
+ <a href="chart.html" class="text-gray-300 hover:text-white transition py-2">차极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录트</a>
175
+ <div class="relative block sm:hidden pt-2">
176
+ <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-7极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录00 focus:outline-none focus:border-transparent">
177
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </nav>
182
+
183
+ <!-- Explore Header -->
184
+ <section class="pt-28 pb-8 px-4">
185
+ <div class="container mx-auto text-center" data-aos="fade-up">
186
+ <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">AI 음악 탐색</h1>
187
+ <p class="text-lg text-gray-300 max-w-2xl mx-auto">다양한 AI 생성 음악을 발견하고 새로운 사운드를 경험해보세요</p>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Search and Filters -->
192
+ <section class="py-6 px-4">
193
+ <div class="container mx-auto">
194
+ <div class="flex flex-col md:flex-row gap-4 mb-8">
195
+ <!-- Search Bar -->
196
+ <div class="flex-1 relative">
197
+ <input type="text" placeholder="아티스트, 곡, 장르로 검색..." class="search-input w-full py-3 px-4 pl-12 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
198
+ <i data-feather="search" class="absolute left-4 top-3.5 text-gray-400"></i>
199
+ </div>
200
+
201
+ <!-- Filter Button -->
202
+ <button class="glass-button px-6 py-3 text-white flex items-center space-x-2" id="filter-button">
203
+ <i data-feather="filter" class="w-4 h-4"></i>
204
+ <span>필터</span>
205
+ </button>
206
+ </div>
207
+
208
+ <!-- Filter Panel -->
209
+ <div class="filter-panel rounded-2xl p-6 mb-8 hidden" id="filter-panel">
210
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
211
+ <div>
212
+ <h3 class="font-semibold mb-4">장르</h3>
213
+ <div class="space-y-2">
214
+ <label class="flex items-center space-x-2">
215
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
216
+ <span>일렉트로닉</span>
217
+ </label>
218
+ <label class="flex items-center space-x-2">
219
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
220
+ <span>앰비언트</span>
221
+ </label>
222
+ <label class="flex items-center space-x-2">
223
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
224
+ <span>팝</span>
225
+ </label>
226
+ <label class="flex items-center space-x-2">
227
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
228
+ <span>힙합</span>
229
+ </label>
230
+ </div>
231
+ </div>
232
+
233
+ <div>
234
+ <h3 class="font-semibold mb-4">AI 도구</h3>
235
+ <div class="space-y-2">
236
+ <label class="flex items-center space-x极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
237
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
238
+ <span>Soundful AI</span>
239
+ </label>
240
+ <label class="flex items-center space-x-2">
241
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
242
+ <span>AIVA</span>
243
+ </label>
244
+ <label class="flex items-center space-x-2">
245
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
246
+ <span>Amper Music</span>
247
+ </label>
248
+ <label class="flex items-center space-x-2">
249
+ <input type="checkbox" class="form-checkbox rounded text-accent-from">
250
+ <span>OpenAI MuseNet</span>
251
+ </label>
252
+ </div>
253
+ </div>
254
+
255
+ <div>
256
+ <h3 class="font-semibold mb-4">정렬</h3>
257
+ <div class="space-y-2">
258
+ <label class="flex items-center space-x-2">
259
+ <input type="radio" name="sort" checked class="form-radio text-accent-from">
260
+ <span>인기순</span>
261
+ </label>
262
+ <label class="flex items-center space-x-2">
263
+ <input type="radio" name="sort" class="form-radio text-accent-from">
264
+ <span>최신순</span>
265
+ </label>
266
+ <label class="flex items-center space-x-2">
267
+ <input type="radio" name="sort" class="form-radio text-accent-from">
268
+ <span>재생시간순</span>
269
+ </label>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="flex justify-end mt-6 space-x-3">
275
+ <button class="px-4 py-2 text-gray-400 hover:text-white transition">초기화</button>
276
+ <button class="glass-button px-6 py-2 text-white">적용</button>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Categories -->
281
+ <div class="flex flex-wrap gap-3 mb-8 overflow-x-auto py-2">
282
+ <button class="category-chip px-4 py-2 rounded-full text-white active">전체</button>
283
+ <button class="category-chip px-4 py-2 rounded-full text-white">인기</button>
284
+ <button class="category-chip px-4 py-2 rounded-full text-white">신규</button>
285
+ <button class="category-chip px-4 py-2 rounded-full text-white">일렉트로닉</button>
286
+ <button class="category-chip px-4 py-2 rounded-full text-white">앰비언트</button>
287
+ <button class="category-chip px-4 py-2 rounded-full text-white">팝</button>
288
+ <button class="category-chip px-4 py-2 rounded-full text-white">힙합</button>
289
+ <button class="category-chip px-4 py-2 rounded-full text-white">클래식</button>
290
+ <button class="category-chip px-4 py-2 rounded-full text-white">로파이</button>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- Discover Section -->
296
+ <section class="py-8 px-4">
297
+ <div class="container mx-auto">
298
+ <h2 class="text-2xl font-bold mb-6" data-aos="fade-right">추천 음악</h2>
299
+
300
+ <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
301
+ <!-- Track 1 -->
302
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100">
303
+ <div class="relative mb-4">
304
+ <img src="http://static.photos/abstract/320x320/1001" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
305
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
306
+ <i data-feather="play" class="text-white"></i>
307
+ </button>
308
+ </div>
309
+ <div class="mb-3">
310
+ <h3 class="font-semibold text-lg mb-1">Digital Dreams</h3>
311
+ <p class="text-gray-400 text-sm">Soundful AI · 12K 재생</p>
312
+ </div>
313
+ <div class="flex items-center justify-between mb-3">
314
+ <div class="flex items-center space-x-2">
315
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
316
+ <span class="text-sm">2.4K</span>
317
+ </div>
318
+ <button class="glass-button p-2">
319
+ <i data-feather="share" class="w极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-4 h-4"></i>
320
+ </button>
321
+ </div>
322
+ <input type="range" class="progress-bar w-full" value="0">
323
+ </div>
324
+
325
+ <!-- Track 2 -->
326
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200">
327
+ <div class="relative mb-4">
328
+ <img src="http://static.photos/abstract/320x320/1002" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
329
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
330
+ <i data-feather="play" class="text-white"></i>
331
+ </button>
332
+ </div>
333
+ <div class="mb-3">
334
+ <h3 class="font-semibold text-lg mb-1">Neon Skyline</h3>
335
+ <p class="text-gray-400 text-sm">AIVA · 8.7K 재생</p>
336
+ </div>
337
+ <div class="flex items-center justify-between mb-3">
338
+ <div class="flex items-center space-x-2">
339
+ <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i data-feather="heart" class="w-4 h-4 text-red-400"></i>
340
+ <span class="text-sm">1.8K</span>
341
+ </div>
342
+ <button class="glass-button p-2">
343
+ <i data-feather="share" class="w-4 h-4"></i>
344
+ </button>
345
+ </div>
346
+ <input type="range" class="progress-bar w-full" value="0">
347
+ </div>
348
+
349
+ <!-- Track 3 -->
350
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-aos-delay="300">
351
+ <div class="relative mb-4">
352
+ <img src="http://static.photos/abstract/320x320/1003" alt="Cover极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录" class="w-full rounded-xl aspect-square object-cover">
353
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:bg-accent-from transition">
354
+ <i data-feather="play" class="text-white"></i>
355
+ </button>
356
+ </div>
357
+ <div class="mb-3">
358
+ <h3 class="font-semibold text-lg mb-1">Quantum Waves</h3>
359
+ <p class="text-gray-400 text-sm">Amper Music · 15K 재생</p>
360
+ </div>
361
+ <div class="flex items-center justify-between mb-3">
362
+ <div class="flex items-center space-x-2">
363
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
364
+ <span class="text-sm">3.1K</span>
365
+ </div>
366
+ <button class="glass-button p-2">
367
+ <i data-feather="share" class="w-4 h-4"></i>
368
+ </button>
369
+ </div>
370
+ <input type="range" class="progress-bar w-full" value="0">
371
+ </div>
372
+
373
+ <!-- Track 4 -->
374
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="400">
375
+ <div class="relative mb-4">
376
+ <img src="http://static.photos/abstract/320x320/1004" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
377
+ <button class="absolute bottom-3 right-3 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center hover:极速赛车开奖官网历史记录【——qq:49678154——极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录】.极速赛车开奖官网历史记录bg-accent-from transition">
378
+ <i data-feather极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="play" class="text-white"></i>
379
+ </button>
380
+ </div>
381
+ <极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录div class="mb-3">
382
+ <h3 class="font-semibold text-lg mb-1">Synth Memories</h3>
383
+ <p class="text-gray-400 text-sm">OpenAI MuseNet · 9.5K 재생</p>
384
+ </div>
385
+ <div class="flex items-center justify-between mb-3">
386
+ <div class="flex items-center space-x-2">
387
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
388
+ <span class="text-sm">2.2K</span>
389
+ </div>
390
+ <button class="glass-button p-2">
391
+ <i data-feather="share" class="w-4 h-4"></i>
392
+ </button>
393
+ </div>
394
+ <input type="range" class="progress-bar w-full" value="0">
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </section>
399
+
400
+ <!-- Popular Artists -->
401
+ <section class="py-12 px-4">
402
+ <div class="container mx-auto">
403
+ <h2 class="text-2xl font-bold mb-6" data-aos="fade-right">인기 AI 아티스트</h2>
404
+
405
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6">
406
+ <!-- Artist 1 -->
407
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
408
+ <div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
409
+ <img src="http://static.photos/people/80x80/1101" alt="Artist" class="w-full h-full rounded-full object-cover">
410
+ </div>
411
+ <h3 class="font-semibold mb-1">Soundful AI</h3>
412
+ <p class="text-gray-400 text-sm">24.5K 팔로워</p>
413
+ </div>
414
+
415
+ <!-- Artist 2 -->
416
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
417
+ <div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
418
+ <img src="http://static.photos/people/80x80/1102" alt="Artist" class="w-full h-full rounded-full object-cover">
419
+ </div>
420
+ <h3 class="font-semibold mb-1">AIVA</h3>
421
+ <p class="text-gray-400 text-sm">18.7K 팔로워</p>
422
+ </div>
423
+
424
+ <!-- Artist 3 -->
425
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
426
+ <div class="极速赛车开奖官网历���记录【——qq:49678154——】.极速赛车开奖官网历史记录w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
427
+ <img src="http://static.photos/people/80x80/1103" alt="Artist" class="w-full h-full rounded-full object-cover">
428
+ </div>
429
+ <h3 class="font-semibold mb-1">Amper Music</h3>
430
+ <p class="text-gray-400 text-sm">32.1K 팔로워</p>
431
+ </div>
432
+
433
+ <!-- Artist 4 -->
434
+ <div class="text-center" data-aos="fade-up" data-aos-delay="400">
435
+ <div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
436
+ <img src="http://static.photos/people/80x80/1104" alt="Artist" class="w-full h-full rounded-full object-cover">
437
+ </div>
438
+ <h3 class="font-semibold mb-1">MuseNet</h3>
439
+ <p class="text-gray-400 text-sm">15.3K 팔로워</p>
440
+ </div>
441
+
442
+ <!-- Artist 5 -->
443
+ <div class="text-center" data-aos="fade-up" data-aos-delay="500">
444
+ <div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
445
+ <img src="http://static.photos/people/80x80/1105" alt="Artist" class="w-full h-full rounded-full object-cover">
446
+ </div>
447
+ <h3 class="font-semibold mb-1">Jukebox AI</h3>
448
+ <p class="text-gray-400 text-sm">12.8K 팔로워</p>
449
+ </div>
450
+
451
+ <!-- Artist 6 -->
452
+ <div class="text-center" data-aos极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录="fade-up" data-aos-delay="600">
453
+ <div class="w-20 h-20 mx-auto mb-3 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
454
+ <img src="http://static.photos/people/80x80/1106" alt="Artist" class="w-full h-full rounded-full object-cover">
455
+ </div>
456
+ <h3 class="font-semibold mb-1">Amadeus Code</h3>
457
+ <p class="text-gray-400 text-sm">9.6K 팔로워</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- New Releases -->
464
+ <section class="py-12 px-4">
465
+ <div class="container mx-auto">
466
+ <h2 class="text-2xl font-bold mb-6" data-aos="fade-right">최신 릴리즈</h2>
467
+
468
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-c极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录ols-3 gap-4 sm:gap-6">
469
+ <!-- New Track 1 -->
470
+ <div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x-4" data-aos="fade-up" data-aos-delay="100">
471
+ <img src="http://static.photos/abstract/120x120/1201" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
472
+ <div class="flex-1 min-w-0">
473
+ <h3 class="font-semibold text-sm sm:text-base mb-1 truncate">Neural Echo</h3>
474
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Jukebox AI · 1.2K 재생</p>
475
+ </div>
476
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
477
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
478
+ </button>
479
+ </div>
480
+
481
+ <!-- New Track 2 -->
482
+ <div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-4" data-aos="fade-up" data-aos-delay="200">
483
+ <img src="http://static.photos/abstract/120x120/1202" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
484
+ <div class="flex-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录1 min-w-0">
485
+ <h3 class="font-semibold text-sm sm:text-base mb极速赛车开奖官网历史记录【——qq:49678154——】极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录历史记录-1 truncate">Digital Dawn</h3>
486
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Amadeus Code · 890 재생</p>
487
+ </div>
488
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
489
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
490
+ </button>
491
+ </div>
492
+
493
+ <!-- New Track 3 -->
494
+ <div class="track-card rounded-xl sm:rounded-2xl p-3 sm:p-4 flex items-center space-x-3 sm:space-x-4" data-aos="fade-up" data-aos-delay="300">
495
+ <img src="http://static.photos/abstract/120x120/1203" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
496
+ <div class="flex-1 min-w-0">
497
+ <h3 class="font-semibold text-sm sm:text-base mb-1 truncate">AI Symphony</h3>
498
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Ecrett Music · 1.5K 재생</极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录p>
499
+ </div>
500
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
501
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
502
+ </button>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </section>
507
+
508
+ <!-- Footer -->
509
+ <footer class="py-12 px-4 border-t border-gray-800 mt-12">
510
+ <div class="container mx-auto">
511
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
512
+ <div>
513
+ <div class="flex items-center space-x-2 mb-4">
514
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
515
+ <i data-feather="music" class="text-white"></极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i>
516
+ </div>
517
+ <span class="text-xl font-bold">AI Music Hub</span>
518
+ </div>
519
+ <p class="极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
520
+ </div>
521
+
522
+ <div>
523
+ <h3 class="font-semibold mb-4">서비스</h3>
524
+ <ul class="space-y-2">
525
+ <li><a href="explore.html" class="text-gray-400 hover:text-white transition">탐색</a></li>
526
+ <li><a href="chart.html" class="text-gray-400 hover:text-white transition">차트</a></li>
527
+ <li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
528
+ <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
529
+ </ul>
530
+ </div>
531
+
532
+ <div>
533
+ <h3 class="font-semibold mb-4">지원</h极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录3>
534
+ <ul class="space-y-2">
535
+ <li><a href="#" class="text-gray-极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录400 hover:text-white transition">고객센터</a></li>
536
+ <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</a></li>
537
+ <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition">문의하기</a></li>
539
+ </ul>
540
+ </div>
541
+
542
+ <div>
543
+ <h3 class="font-semibold mb-4">소셜 미디어</h3>
544
+ <div class="flex space-x-4">
545
+ <a href="#" class="glass-button p极速赛车开奖官网历史极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录录【——qq:49678154——】.极速赛车开奖官网历史记录-2">
546
+ <i data-feather="facebook" class="w-4 h-4"></i>
547
+ </a>
548
+ <a href="#" class="glass-button p-2">
549
+ <i data-feather="twitter" class="w-4 h-4"></i>
550
+ </极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录a>
551
+ <a href="#" class="glass-button p-2">
552
+ <i data-feather="instagram" class="w-4 h-4"></i>
553
+ </a>
554
+ <a href="#" class="glass-button p-2">
555
+ <i data-feather="youtube" class="w-4 h-4"></i>
556
+ </a>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
562
+ <p>© 2023 AI Music Hub. All rights reserved.</p>
563
+ </div>
564
+ </div>
565
+ </footer>
566
+
567
+ <script>
568
+ AOS.init({
569
+ duration: 800,
570
+ easing: 'ease-in-out',
571
+ once: true
572
+ });
573
+
574
+ feather.replace();
575
+
576
+ // Mobile menu functionality
577
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
578
+ const mobileMenu = document.getElementById('mobile-menu');
579
+
580
+ mobileMenuButton.addEventListener('click', () => {
581
+ mobileMenu.classList.toggle('hidden');
582
+ const icon = mobileMenuButton.querySelector('i');
583
+ if (mobileMenu.classList.contains('hidden')) {
584
+ icon.setAttribute('data-feather', 'menu');
585
+ } else {
586
+ icon.setAttribute('data-feather', 'x');
587
+ }
588
+ feather.replace();
589
+ });
590
+
591
+ // Filter panel functionality
592
+ const filterButton = document.getElementById('filter-button');
593
+ const filterPanel = document.getElementById('filter-panel');
594
+
595
+ filterButton.addEventListener('click', () => {
596
+ filterPanel.classList.toggle('hidden');
597
+ });
598
+
599
+ // Category chips functionality
600
+ const categoryChips = document.querySelectorAll('.category-chip');
601
+ categoryChips.forEach(chip => {
602
+ chip.addEventListener('click', () => {
603
+ categoryChips.forEach(c => c.classList.remove('active'));
604
+ chip.classList.add('active');
605
+ });
606
+ });
607
+
608
+ // Simple music player functionality
609
+ document.querySelectorAll('.track-card button').forEach(button => {
610
+ button.addEventListener('click', function() {
611
+ const card = this.closest('.track-card');
612
+ const range = card.querySelector('input[type="range"]');
613
+
614
+ // Simulate playback
615
+ let value = 0;
616
+ const interval = setInterval(() => {
617
+ value += 0.5;
618
+ range.value = value;
619
+
620
+ if (value >= 100) {
621
+ clearInterval(interval);
622
+ range.value = 0;
623
+ }
624
+ }, 100);
625
+ });
626
+ });
627
+
628
+ // Close mobile menu when clicking outside
629
+ document.addEventListener('click', (极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录e) => {
630
+ if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
631
+ mobileMenu.classList.add('hidden');
632
+ const icon = mobileMenuButton.querySelector('i');
633
+ icon.setAttribute('data-feather', 'menu');
634
+ feather.replace();
635
+ }
636
+
637
+ if (!filterPanel.contains(e.target) && !filterButton.contains(e.target) && !filterPanel.classList.contains('hidden')) {
638
+ filterPanel.classList.add('hidden');
639
+ }
640
+ });
641
+ </script>
642
+ </body>
643
+ </html>
index.html CHANGED
@@ -164,7 +164,7 @@
164
  <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
165
  <a href="#" class="text-gray-300 hover:text-white transition py-2">홈</a>
166
  <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a>
167
- <a href="#" class="text-gray-300 hover:text-white transition py-2">컬렉션</a>
168
  <a href="#" class="text-gray-300 hover:text-white transition py-2">차트</a>
169
  <div class="relative block sm:hidden pt-2">
170
  <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
@@ -374,7 +374,7 @@
374
  <ul class="space-y-2">
375
  <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li>
376
  <li><a href="#" class="text-gray-400 hover:text-white transition">차트</a></li>
377
- <li><a href="#" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
378
  <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
379
  </ul>
380
  </div>
 
164
  <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
165
  <a href="#" class="text-gray-300 hover:text-white transition py-2">홈</a>
166
  <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a>
167
+ <a href="collection.html" class="text-gray-300 hover:text-white transition py-2">컬렉션</a>
168
  <a href="#" class="text-gray-300 hover:text-white transition py-2">차트</a>
169
  <div class="relative block sm:hidden pt-2">
170
  <input type="text" placeholder="음악 검색..." class="search-input w-full py-2 px-4 pl-10 rounded-full text-white placeholder-gray-400 border border-gray-700 focus:outline-none focus:border-transparent">
 
374
  <ul class="space-y-2">
375
  <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li>
376
  <li><a href="#" class="text-gray-400 hover:text-white transition">차트</a></li>
377
+ <li><a href="collection.html" class="text-gray-400 hover:text-white transition">컬렉션</a></li>
378
  <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
379
  </ul>
380
  </div>
login.html CHANGED
@@ -112,6 +112,7 @@
112
 
113
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈으로</a>
114
  <a href="mypage.html" class="text-gray-300 hover:text-white transition ml-4">마이페이지</a>
 
115
  </div>
116
  </nav>
117
 
 
112
 
113
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈으로</a>
114
  <a href="mypage.html" class="text-gray-300 hover:text-white transition ml-4">마이페이지</a>
115
+ <a href="collection.html" class="text-gray-300 hover:text-white transition ml-4">컬렉션</a>
116
  </div>
117
  </nav>
118
 
mypage.html CHANGED
@@ -121,9 +121,9 @@
121
 
122
  <div class="hidden md:flex items-center space-x-6">
123
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
124
- <a href="#" class="text-gray-300 hover:text-white transition">탐색</a>
125
- <a href="#" class="text-gray-300 hover:text-white transition">컬렉션</a>
126
- <a href="#" class="text-gray-300 hover:text-white transition">차트</a>
127
  </div>
128
 
129
  <div class="flex items-center space-x-2 sm:space-x-4">
 
121
 
122
  <div class="hidden md:flex items-center space-x-6">
123
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈</a>
124
+ <a href="#" class="text-gray-300 hover:text-white transition极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录">탐색</a>
125
+ <a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a>
126
+ <a href="chart.html" class="text-gray-300 hover:text-white transition">차트</a>
127
  </div>
128
 
129
  <div class="flex items-center space-x-2 sm:space-x-4">
prompts.txt CHANGED
@@ -4,4 +4,7 @@ Ai 로 만든 음악 파일 을 올리고 듣고 공유 할수 있는 사이트
4
  모바일에서 많이 사용할거라 모바일 에 작동 잘되도록 ! 반응형으로 해줘
5
  인기 AI 음악 이부분에서 모바일에서는 각로 2개씩 나오도록 해줘 디자인도 조금 변경 해줘봐 !
6
  로그인 페이지 만들어줘!
7
- 마이페이지도 줘!
 
 
 
 
4
  모바일에서 많이 사용할거라 모바일 에 작동 잘되도록 ! 반응형으로 해줘
5
  인기 AI 음악 이부분에서 모바일에서는 각로 2개씩 나오도록 해줘 디자인도 조금 변경 해줘봐 !
6
  로그인 페이지 만들어줘!
7
+ 마이페이지도 줘!
8
+ 차트 페이지도 만들어줘
9
+ 컬렉션 페이지도 만들어주세요 !
10
+ 탐색 페이지도 만들어줘!
upload.html CHANGED
@@ -108,6 +108,7 @@
108
 
109
  <div class="flex items-center space-x-4">
110
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈으로</a>
 
111
  <a href="mypage.html" class="text-gray-300 hover:text-white transition">마이페이지</a>
112
 
113
  <div class="relative">
 
108
 
109
  <div class="flex items-center space-x-4">
110
  <a href="index.html" class="text-gray-300 hover:text-white transition">홈으로</a>
111
+ <a href="collection.html" class="text-gray-300 hover:text-white transition">컬렉션</a>
112
  <a href="mypage.html" class="text-gray-300 hover:text-white transition">마이페이지</a>
113
 
114
  <div class="relative">