Hugging Face's logo

Spaces:
nkjoy
/
aimuisc
Running

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

마이페이지도 줘! - Initial Deployment

Browse files
Files changed (6) hide show
  1. README.md +7 -5
  2. index.html +471 -18
  3. login.html +205 -0
  4. mypage.html +462 -0
  5. prompts.txt +7 -0
  6. upload.html +324 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aimuisc
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: blue
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: aimuisc
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,472 @@
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="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.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 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 #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
+ .pulse {
106
+ animation: pulse 2s infinite;
107
+ }
108
+
109
+ @keyframes pulse {
110
+ 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
111
+ 70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
112
+ 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="min-h-screen">
117
+ <!-- Navigation -->
118
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
119
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
120
+ <a href="#" class="flex items-center space-x-2">
121
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
122
+ <i data-feather="music" class="text-white"></i>
123
+ </div>
124
+ <span class="hidden sm:block text-xl font-bold bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">AI Music Hub</span>
125
+ </a>
126
+
127
+ <div class="hidden md:flex items-center space-x-6">
128
+ <a href="#" class="text-gray-300 hover:text-white transition">홈</a>
129
+ <a href="#" class="text-gray-300 hover:text-white transition">탐색</a>
130
+ <a href="#" class="text-gray-300 hover:text-white transition">컬렉션</a>
131
+ <a href="#" class="text-gray-300 hover:text-white transition">차트</a>
132
+ </div>
133
+
134
+ <div class="flex items-center space-x-2 sm:space-x-4">
135
+ <div class="relative hidden sm:block">
136
+ <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">
137
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
138
+ </div>
139
+
140
+ <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 pulse">
141
+ <i data-feather="plus" class="w-4 h-4"></i>
142
+ <span class="hidden xs:block">업로드</span>
143
+ </a>
144
+
145
+ <a href="login.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
146
+ <i data-feather="log-in" class="w-4 h-4"></i>
147
+ <span class="hidden xs:block">로그인</span>
148
+ </a>
149
+
150
+ <a href="mypage.html" class="glass-button px-3 py-2 text-white flex items-center space-x-1 sm:space-x-2">
151
+ <i data-feather="user" class="w-4 h-4"></i>
152
+ <span class="hidden xs:block">마이페이지</span>
153
+ </a>
154
+
155
+ <!-- Mobile menu button -->
156
+ <button class="md:hidden glass-button p-2" id="mobile-menu-button">
157
+ <i data-feather="menu" class="w-5 h-5"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Mobile menu -->
163
+ <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
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">
171
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </nav>
176
+
177
+ <!-- Hero Section -->
178
+ <section class="pt-28 pb-16 px-4">
179
+ <div class="container mx-auto text-center" data-aos="fade-up">
180
+ <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 sm:mb-6">AI가 생성한 음악의 <span class="bg-gradient-to-r from-accent-from to-accent-to bg-clip-text text-transparent">무한한 가능성</span></h1>
181
+ <p class="text-lg sm:text-xl text-gray-300 mb-8 sm:mb-10 max-w-3xl mx-auto px-2">최신 인공지능 기술로 만들어진 독특한 음악을 발견하고, 공유하고, 즐겨보세요</p>
182
+
183
+ <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center">
184
+ <button class="glass-button px-6 py-3 sm:px-8 text-white font-medium flex items-center justify-center space-x-2 mx-auto sm:mx-0">
185
+ <i data-feather="play" class="w-4 h-4 sm:w-5 sm:h-5"></i>
186
+ <span class="text-sm sm:text-base">지금 탐색하기</span>
187
+ </button>
188
+ <button class="neon-border px-6 py-3 sm:px-8 text-white font-medium flex items-center justify-center space-x-2 mx-auto sm:mx-0">
189
+ <i data-feather="trending-up" class="w-4 h-4 sm:w-5 sm:h-5"></i>
190
+ <span class="text-sm sm:text-base">인기 차트</span>
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- Featured Tracks -->
197
+ <section class="py-12 sm:py-16 px-4">
198
+ <div class="container mx-auto">
199
+ <div class="flex justify-between items-center mb-8 sm:mb-10">
200
+ <h2 class="text-xl sm:text-2xl md:text-3xl font-bold" data-aos="fade-right">인기 AI 음악</h2>
201
+ <a href="#" class="text-accent-from hover:text-accent-to transition flex items-center space-x-1" data-aos="fade-left">
202
+ <span class="text-sm sm:text-base">모두 보기</span>
203
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
204
+ </a>
205
+ </div>
206
+
207
+ <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
208
+ <!-- Track 1 -->
209
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100">
210
+ <div class="relative mb-4">
211
+ <img src="http://static.photos/abstract/320x320/101" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
212
+ <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">
213
+ <i data-feather="play" class="text-white"></i>
214
+ </button>
215
+ </div>
216
+ <div class="mb-3">
217
+ <h3 class="font-semibold text-lg mb-1">Cosmic Dreams</h3>
218
+ <p class="text-gray-400 text-sm">Soundful AI · 12K 재생</p>
219
+ </div>
220
+ <div class="flex items-center justify-between mb-3">
221
+ <div class="flex items-center space-x-2">
222
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
223
+ <span class="text-sm">2.4K</span>
224
+ </div>
225
+ <button class="glass-button p-2">
226
+ <i data-feather="share" class="w-4 h-4"></i>
227
+ </button>
228
+ </div>
229
+ <input type="range" class="progress-bar w-full" value="0">
230
+ </div>
231
+
232
+ <!-- Track 2 -->
233
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200">
234
+ <div class="relative mb-4">
235
+ <img src="http://static.photos/abstract/320x320/102" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
236
+ <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">
237
+ <i data-feather="play" class="text-white"></i>
238
+ </button>
239
+ </div>
240
+ <div class="mb-3">
241
+ <h3 class="font-semibold text-lg mb-1">Neon Pulse</h3>
242
+ <p class="text-gray-400 text-sm">AIVA · 8.7K 재생</p>
243
+ </div>
244
+ <div class="flex items-center justify-between mb-3">
245
+ <div class="flex items-center space-x-2">
246
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
247
+ <span class="text-sm">1.8K</span>
248
+ </div>
249
+ <button class="glass-button p-2">
250
+ <i data-feather="share" class="w-4 h-4"></i>
251
+ </button>
252
+ </div>
253
+ <input type="range" class="progress-bar w-full" value="0">
254
+ </div>
255
+
256
+ <!-- Track 3 -->
257
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="300">
258
+ <div class="relative mb-4">
259
+ <img src="http://static.photos/abstract/320x320/103" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
260
+ <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">
261
+ <i data-feather="play" class="text-white"></i>
262
+ </button>
263
+ </div>
264
+ <div class="mb-3">
265
+ <h3 class="font-semibold text-lg mb-1">Digital Ocean</h3>
266
+ <p class="text-gray-400 text-sm">Amper Music · 15K 재생</p>
267
+ </div>
268
+ <div class="flex items-center justify-between mb-3">
269
+ <div class="flex items-center space-x-2">
270
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
271
+ <span class="text-sm">3.1K</span>
272
+ </div>
273
+ <button class="glass-button p-2">
274
+ <i data-feather="share" class="w-4 h-4"></i>
275
+ </button>
276
+ </div>
277
+ <input type="range" class="progress-bar w-full" value="0">
278
+ </div>
279
+
280
+ <!-- Track 4 -->
281
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="400">
282
+ <div class="relative mb-4">
283
+ <img src="http://static.photos/abstract/320x320/104" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
284
+ <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">
285
+ <i data-feather="play" class="text-white"></i>
286
+ </button>
287
+ </div>
288
+ <div class="mb-3">
289
+ <h3 class="font-semibold text-lg mb-1">Synthwave Memories</h3>
290
+ <p class="text-gray-400 text-sm">OpenAI MuseNet · 9.5K 재생</p>
291
+ </div>
292
+ <div class="flex items-center justify-between mb-3">
293
+ <div class="flex items-center space-x-2">
294
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
295
+ <span class="text-sm">2.2K</span>
296
+ </div>
297
+ <button class="glass-button p-2">
298
+ <i data-feather="share" class="w-4 h-4"></i>
299
+ </button>
300
+ </div>
301
+ <input type="range" class="progress-bar w-full" value="0">
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- New Releases -->
308
+ <section class="py-12 sm:py-16 px-4">
309
+ <div class="container mx-auto">
310
+ <div class="flex justify-between items-center mb-8 sm:mb-10">
311
+ <h2 class="text-xl sm:text-2xl md:text-3xl font-bold" data-aos="fade-right">최신 릴리즈</h2>
312
+ <a href="#" class="text-accent-from hover:text-accent-to transition flex items-center space-x-1" data-aos="fade-left">
313
+ <span class="text-sm sm:text-base">모두 보기</span>
314
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
315
+ </a>
316
+ </div>
317
+
318
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
319
+ <!-- New Track 1 -->
320
+ <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">
321
+ <img src="http://static.photos/abstract/120x120/105" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
322
+ <div class="flex-1 min-w-0">
323
+ <h3 class="font-semibold text-sm sm:text-base mb-1 truncate">Quantum Echo</h3>
324
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Jukebox AI · 1.2K 재생</p>
325
+ </div>
326
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
327
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
328
+ </button>
329
+ </div>
330
+
331
+ <!-- New Track 2 -->
332
+ <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="200">
333
+ <img src="http://static.photos/abstract/120x120/106" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
334
+ <div class="flex-1 min-w-0">
335
+ <h3 class="font-semibold text-sm sm:text-base mb-1 truncate">Neural Dawn</h3>
336
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Amadeus Code · 890 재생</p>
337
+ </div>
338
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
339
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
340
+ </button>
341
+ </div>
342
+
343
+ <!-- New Track 3 -->
344
+ <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">
345
+ <img src="http://static.photos/abstract/极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录8b5c" alt="Cover" class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg sm:rounded-xl object-cover">
346
+ <div class="flex-1 min-w-0">
347
+ <h极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录3 class="font-semibold text-sm sm:text-base mb-1 truncate">Digital Serenity</h3>
348
+ <p class="text-gray-400 text-xs sm:text-sm truncate">Ecrett Music · 1.5K 재생</p>
349
+ </div>
350
+ <button class="glass-button p-1.5 sm:p-2 flex-shrink-0">
351
+ <i data-feather="play" class="w-3 h-3 sm:w-4 sm:h-4"></i>
352
+ </button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Footer -->
359
+ <footer class="py-12 px-4 border-t border-gray-800 mt-20">
360
+ <div class="container mx-auto">
361
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
362
+ <div>
363
+ <div class="flex items-center space-x-2 mb-4">
364
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
365
+ <i data-feather="music" class="text-white"></i>
366
+ </div>
367
+ <span class="text-xl font-bold">AI Music Hub</span>
368
+ </div>
369
+ <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
370
+ </div>
371
+
372
+ <div>
373
+ <h3 class="font-semibold mb-4">서비스</h3>
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>
381
+
382
+ <div>
383
+ <h3 class="font-semibold mb-4">지원</h3>
384
+ <ul class="space-y-2">
385
+ <li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
388
+ <li><a href="#" class="text-gray-400 hover:text-white transition">문의하기</a></li>
389
+ </ul>
390
+ </div>
391
+
392
+ <div>
393
+ <h3 class="font-semibold mb-4">소셜 미디어</h3>
394
+ <div class="flex space-x-4">
395
+ <a href="#" class="glass-button p-2">
396
+ <i data-feather="facebook" class="w-4 h-4"></i>
397
+ </a>
398
+ <a href="#" class="glass-button p-2">
399
+ <i data-feather="twitter" class="w-4 h-4"></i>
400
+ </a>
401
+ <a href="#" class="glass-button p-2">
402
+ <i data-feather="instagram" class="w-4 h-4"></i>
403
+ </a>
404
+ <a href="#" class="glass-button p-2">
405
+ <i data-feather="youtube" class="w-4 h-4"></i>
406
+ </a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
412
+ <p>© 2023 AI Music Hub. All rights reserved.</p>
413
+ </div>
414
+ </div>
415
+ </footer>
416
+
417
+ <script>
418
+ AOS.init({
419
+ duration: 800,
420
+ easing: 'ease-in-out',
421
+ once: true
422
+ });
423
+
424
+ feather.replace();
425
+
426
+ // Mobile menu functionality
427
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
428
+ const mobileMenu = document.getElementById('mobile-menu');
429
+
430
+ mobileMenuButton.addEventListener('click', () => {
431
+ mobileMenu.classList.toggle('hidden');
432
+ const icon = mobileMenuButton.querySelector('i');
433
+ if (mobileMenu.classList.contains('hidden')) {
434
+ icon.setAttribute('data-feather', 'menu');
435
+ } else {
436
+ icon.setAttribute('data-feather', 'x');
437
+ }
438
+ feather.replace();
439
+ });
440
+
441
+ // Simple music player functionality
442
+ document.querySelectorAll('.track-card button').forEach(button => {
443
+ button.addEventListener('click', function() {
444
+ const card = this.closest('.track-card');
445
+ const range = card.querySelector('input[type="range"]');
446
+
447
+ // Simulate playback
448
+ let value = 0;
449
+ const interval = setInterval(() => {
450
+ value += 0.5;
451
+ range.value = value;
452
+
453
+ if (value >= 100) {
454
+ clearInterval(interval);
455
+ range.value = 0;
456
+ }
457
+ }, 100);
458
+ });
459
+ });
460
+
461
+ // Close mobile menu when clicking outside
462
+ document.addEventListener('click', (e) => {
463
+ if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
464
+ mobileMenu.classList.add('hidden');
465
+ const icon = mobileMenuButton.querySelector('i');
466
+ icon.setAttribute('data-feather', 'menu');
467
+ feather.replace();
468
+ }
469
+ });
470
+ </script>
471
+ </body>
472
  </html>
login.html ADDED
@@ -0,0 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.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 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 #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
+ .form-input {
68
+ background: rgba(30, 41, 59, 0.5);
69
+ backdrop-filter: blur(10px);
70
+ border: 1px solid rgba(255, 255, 255, 0.1);
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .form-input:focus {
75
+ box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
76
+ border-color: transparent;
77
+ }
78
+
79
+ .social-login {
80
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8));
81
+ backdrop-filter: blur(10px);
82
+ border: 1px solid rgba(255, 255, 255, 0.1);
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .social-login:hover {
87
+ transform: translateY(-2px);
88
+ box-shadow: 0 5px 15px rgba(168, 85, 247, 0.2);
89
+ }
90
+
91
+ .pulse {
92
+ animation: pulse 2s infinite;
93
+ }
94
+
95
+ @keyframes pulse {
96
+ 0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4); }
97
+ 70% { box-shadow: 0 0 0 10px rgba(168, 85, 247, 0); }
98
+ 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
99
+ }
100
+ </style>
101
+ </head>
102
+ <body class="min-h-screen flex items-center justify-center px-4 py-12">
103
+ <!-- Navigation -->
104
+ <nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
105
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
106
+ <a href="index.html" class="flex items-center space-x-2">
107
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
108
+ <i data-feather="music" class="text-white"></i>
109
+ </div>
110
+ <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>
111
+ </a>
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
+
118
+ <!-- Login Form -->
119
+ <div class="w-full max-w-md mt-16" data-aos="fade-up">
120
+ <div class="text-center mb-8">
121
+ <h1 class="text-3xl font-bold mb-2">로그인</h1>
122
+ <p class="text-gray-400">AI Music Hub에 오��� 것을 환영합니다</p>
123
+ </div>
124
+
125
+ <div class="bg-charcoal/50 backdrop-blur-md rounded-2xl p-6 md:p-8">
126
+ <form>
127
+ <div class="mb-6">
128
+ <label class="block text-sm font-medium mb-2">이메일 주소</label>
129
+ <input type="email" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="이메일을 입력하세요" required>
130
+ </div>
131
+
132
+ <div class="mb-6">
133
+ <label class="block text-sm font-medium mb-2">비밀번호</label>
134
+ <input type="password" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="비밀번호를 입력하세요" required>
135
+ <div class="flex justify-end mt-2">
136
+ <a href="#" class="text-sm text-accent-from hover:text-accent-to transition">비밀번호 찾기</a>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="flex items-center mb-6">
141
+ <input type="checkbox" id="remember" class="mr-2">
142
+ <label for="remember" class="text-sm">로그인 상태 유지</label>
143
+ </div>
144
+
145
+ <button type="submit" class="w-full glass-button py-4 text-white font-semibold rounded-lg flex items-center justify-center space-x-2 pulse">
146
+ <i data-feather="log-in" class="w-5 h-5"></i>
147
+ <span>로그인</span>
148
+ </button>
149
+ </form>
150
+
151
+ <div class="relative my-6">
152
+ <div class="absolute inset-0 flex items-center">
153
+ <div class="w-full border-t border-gray-700"></div>
154
+ </div>
155
+ <div class="relative flex justify-center text-sm">
156
+ <span class="px-2 bg-charcoal/50 text-gray-400">또는</span>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Social Login -->
161
+ <div class="space-y-3">
162
+ <button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
163
+ <i data-feather="mail" class="w-5 h-5 text-red-400"></i>
164
+ <span>Google로 계속하기</span>
165
+ </button>
166
+
167
+ <button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
168
+ <i data-feather="github" class="w-5 h-5"></i>
169
+ <span>GitHub로 계속하기</span>
170
+ </button>
171
+
172
+ <button class="w-full social-login py-3 rounded-lg flex items-center justify-center space-x-2">
173
+ <i data-feather="facebook" class="w-5 h-5 text-blue-400"></i>
174
+ <span>Facebook으로 계속하기</span>
175
+ </button>
176
+ </div>
177
+
178
+ <div class="text-center mt-6">
179
+ <p class="text-gray-400">
180
+ 계정이 없으신가요?
181
+ <a href="register.html" class="text-accent-from hover:text-accent-to transition font-medium">회원가입</a>
182
+ </p>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <script>
188
+ AOS.init({
189
+ duration: 800,
190
+ easing: 'ease-in-out',
191
+ once: true
192
+ });
193
+
194
+ feather.replace();
195
+
196
+ // Form validation
197
+ const form = document.querySelector('form');
198
+ form.addEventListener('submit', (e) => {
199
+ e.preventDefault();
200
+ // Add your login logic here
201
+ console.log('Login attempt');
202
+ });
203
+ </script>
204
+ </body>
205
+ </html>
mypage.html ADDED
@@ -0,0 +1,462 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.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, 极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录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: #f8极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录afc;
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, #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
+ .stats-card {
97
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
98
+ backdrop-filter: blur(10px);
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
+ </style>
110
+ </head>
111
+ <body class="min-h-screen">
112
+ <!-- Navigation -->
113
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
114
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
115
+ <a href="index.html" class="flex items-center space-x-2">
116
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
117
+ <i data-feather="music" class="text-white"></i>
118
+ </div>
119
+ <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>
120
+ </a>
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">
130
+ <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">
131
+ <i data-feather="plus" class="w-4 h-4"></i>
132
+ <span class="hidden xs:block">업로드</span>
133
+ </a>
134
+
135
+ <div class="relative">
136
+ <button class="w-10 h-10 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
137
+ <i data-feather="user" class="text-white"></i>
138
+ </button>
139
+ </div>
140
+
141
+ <!-- Mobile menu button -->
142
+ <button class="md:hidden glass-button p-2" id="mobile-menu-button">
143
+ <i data-feather="menu" class="w-5 h-5"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Mobile menu -->
149
+ <div class="md:hidden hidden bg-charcoal border-t border-gray-800" id="mobile-menu">
150
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
151
+ <a href="index.html" class="text-gray-300 hover:text-white transition py-2">홈</a>
152
+ <a href="#" class="text-gray-300 hover:text-white transition py-2">탐색</a>
153
+ <a href="#" class="text-gray-300 hover:text-white transition py极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-2">컬렉션</a>
154
+ <a href="#" class="text-gray-300 hover:text-white transition py-2">차트</a>
155
+ <a href="mypage.html" class="text-gray-300 hover:text-white transition py-2">마이페이지</a>
156
+ </div>
157
+ </div>
158
+ </nav>
159
+
160
+ <!-- Profile Section -->
161
+ <section class="pt-28 pb-8 px-4">
162
+ <div class="container mx-auto">
163
+ <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
164
+ <!-- Profile Image -->
165
+ <div class="relative" data-aos="fade-right">
166
+ <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-gradient-to-r from-accent-from to-accent-to p-1">
167
+ <img src="http://static.photos/people/200x200/501" alt="Profile" class="w-full h-full rounded-full object-cover">
168
+ </div>
169
+ <button class="absolute bottom-0 right-0 glass-button p-2">
170
+ <i data-feather="edit-2" class="w-3 h-3 md:w-4 md:h-4"></i>
171
+ </button>
172
+ </div>
173
+
174
+ <!-- Profile Info -->
175
+ <div class="flex-1 text-center md:text-left" data-aos="fade-left">
176
+ <h1 class="text-2xl md:text-3xl font-bold mb-2">김뮤직</h1>
177
+ <p class="text-gray-400 mb-4">@musiclover_ai</p>
178
+ <p class="text-gray-300 mb-6 max-w-md">AI 생성 음악을 사랑하는 크리에이터입니다. 주로 일렉트로닉과 앰비언트 장르의 음악을 만들고 있어요.</p>
179
+
180
+ <div class="flex flex-wrap justify-center md:justify-start gap-4">
181
+ <div class="text-center">
182
+ <div class="text-2xl font-bold text-white">24</div>
183
+ <div class="text-gray-400 text-sm">업로드</div>
184
+ </div>
185
+ <div class="text-center">
186
+ <div class="text-2xl font-bold text-white">1.2K</div>
187
+ <div class="text-gray-400 text-sm">팔로워</div>
188
+ </div>
189
+ <div class="text-center">
190
+ <div class="text-2xl font-bold text-white">458</div>
191
+ <div class="text-gray-400 text-sm">팔로잉</div>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Action Buttons -->
197
+ <div class="flex gap-3" data-aos="fade-left">
198
+ <button class="glass-button px-4 py-2 text-white flex items-center space-x-2">
199
+ <i data-feather="edit" class="w-4 h-4"></i>
200
+ <span>프로필 편집</span>
201
+ </button>
202
+ <button class="neon-border px-4 py-2 text-white flex items-center space-x-2">
203
+ <i data-feather="settings" class="w-4 h-4"></i>
204
+ <span>설정</span>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Stats Section -->
212
+ <section class="py-8 px-4">
213
+ <div class="container mx-auto">
214
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
215
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="100">
216
+ <i data-feather="play" class="w-8 h-8 text-accent-from mx-auto mb-4"></i>
217
+ <div class="text-3xl font-bold mb-2">45.8K</div>
218
+ <p class="text-gray-400">총 재생 수</p>
219
+ </div>
220
+
221
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="200">
222
+ <i data-feather="heart" class="w-8 h-8 text-red-400 mx-auto mb-4"></i>
223
+ <div class="text-3xl font-bold mb-2">8.7K</div>
224
+ <p class="text-gray-400">좋아요 수</p>
225
+ </div>
226
+
227
+ <div class="stats-card rounded-2xl p-6 text-center" data-aos="fade-up" data-aos-delay="300">
228
+ <i data-feather="share" class="w-8 h-8 text-green-400 mx-auto mb-4"></i>
229
+ <div class="text-3xl font-bold mb-2">2.3K</div>
230
+ <p class="text-gray-400">공유 수</p>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Tabs Section -->
237
+ <section class="py-8 px-4">
238
+ <div class="container mx-auto">
239
+ <div class="flex border-b border-gray-800 mb-8 overflow-x-auto">
240
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from active" data-tab="my-music">
241
+ 내 음악
242
+ </button>
243
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="likes">
244
+ 좋아요한 음악
245
+ </button>
246
+ <button class="tab-button px-6 py-3 text-white font-medium border-b-2 border-transparent hover:border-accent-from" data-tab="playlists">
247
+ 플레이리스트
248
+ </button>
249
+ </div>
250
+
251
+ <!-- My Music Tab -->
252
+ <div id="my-music" class="tab-content active">
253
+ <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-6">
254
+ <!-- Track 1 -->
255
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="100">
256
+ <div class="relative mb-4">
257
+ <img src="http://static.photos/abstract/320x320/601" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
258
+ <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">
259
+ <i data-feather="play" class="text-white"></i>
260
+ </button>
261
+ </div>
262
+ <div class="mb-3">
263
+ <h3 class="font-semibold text-lg mb-1">Cosmic Dreams</h3>
264
+ <p class="text-gray-400 text-sm">12K 재생 · 3일 전</p>
265
+ </div>
266
+ <div class="flex items-center justify-between mb-3">
267
+ <div class="flex items-center space-x-2">
268
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
269
+ <span class="text-sm">2.4K</span>
270
+ </div>
271
+ <button class="glass-button p-2">
272
+ <i data-feather="more-vertical" class="w-4 h-4"></i>
273
+ </button>
274
+ </div>
275
+ <input type="range" class="progress-bar w-full" value="0">
276
+ </div>
277
+
278
+ <!-- Track 2 -->
279
+ <div class="track-card rounded-2xl p-4" data-aos="fade-up" data-aos-delay="200">
280
+ <div class="relative mb-4">
281
+ <img src="http://static.photos/abstract/320x320/602" alt="Cover" class="w-full rounded-xl aspect-square object-cover">
282
+ <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">
283
+ <i data-feather="play极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录" class="text-white"></i>
284
+ </button>
285
+ </div>
286
+ <div class="mb极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-3">
287
+ <h3 class="font-semibold text-lg mb-1">Neon Pulse</h3>
288
+ <p class="text-gray-400 text-sm">8.7K 재생 · 1주 전</p>
289
+ </div>
290
+ <div class="flex items-center justify-between mb-3">
291
+ <div class="极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录flex items-center space-x-2">
292
+ <i data-feather="heart" class="w-4 h-4 text-red-400"></i>
293
+ <span class="text-sm">1.8K</span>
294
+ </div>
295
+ <button class="glass-button p-2">
296
+ <i data-feather="more-vertical" class="w-4 h-4"></极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录i>
297
+ </button>
298
+ </div>
299
+ <input type="range" class="progress-bar w-full" value="0">
300
+ </div>
301
+
302
+ <!-- Add more tracks as needed -->
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Empty state for other tabs -->
307
+ <div id="likes" class="tab-content hidden">
308
+ <div class="text-center py-12">
309
+ <i data-feather="heart" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
310
+ <h3 class="text-xl font-semibold mb-2">아직 좋아요한 음악이 없어요</h3>
311
+ <p class="text-gray-400">마음에 드는 음악에 좋아요를 눌러보세요</p>
312
+ </div>
313
+ </div>
314
+
315
+ <div id="playlists" class="tab-content hidden">
316
+ <div class="text-center py-12">
317
+ <i data-feather="list" class="w-12 h-12 text-gray-600 mx-auto mb-4"></i>
318
+ <h3 class="text-xl font-semibold mb-2">아직 플레이리스트가 없어요</h3>
319
+ <p class="text-gray-400">음악을 모아 나만의 플레이리스트를 만들어보세요</p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- Footer -->
326
+ <footer class="py-12 px-4 border-t border-gray-800 mt-12">
327
+ <div class="container mx-auto">
328
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
329
+ <div>
330
+ <div class="flex items-center space-x-2 mb-4">
331
+ <div class="w-8 h-8 rounded-full bg-gradient极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-to-r from-accent-from to-accent-to flex items-center justify-center">
332
+ <i data-feather="music" class="text-white"></i>
333
+ </div>
334
+ <span class="text-xl font-bold">AI Music Hub</span>
335
+ </div>
336
+ <p class="text-gray-400">AI 생성 음악의 프리미엄 플랫폼</p>
337
+ </div>
338
+
339
+ <div>
340
+ <h3 class="font-semibold mb-4">서비스</h3>
341
+ <ul class="space-y-2">
342
+ <li><a href="#" class="text-gray-400 hover:text-white transition">탐색</a></li>
343
+ <li><a href="#" class="text-gray-400 hover:text-white transition">차트</a></li>
344
+ <li><a href="#" class="text极速赛车开奖官网历史记录【——qq:49678154——】.极速赛车开奖官网历史记录-gray-400 hover:text-white transition">컬렉션</a></li>
345
+ <li><a href="upload.html" class="text-gray-400 hover:text-white transition">업로드</a></li>
346
+ </ul>
347
+ </div>
348
+
349
+ <div>
350
+ <h3 class="font-semibold mb-4">지원</h3>
351
+ <ul class="space-y-2">
352
+ <li><a href="#" class="text-gray-400 hover:text-white transition">고객센터</a></li>
353
+ <li><a href="#" class="text-gray-400 hover:text-white transition">이용약관</a></li>
354
+ <li><a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a></li>
355
+ <li><a href="#" class="text-gray-400 hover:text-white transition">문의하기</a></li>
356
+ </ul>
357
+ </div>
358
+
359
+ <div>
360
+ <h3 class="font-semibold mb-4">소셜 미디어</h3>
361
+ <div class="flex space-x-4">
362
+ <a href="#" class="glass-button p-2">
363
+ <i data-feather="facebook" class="w-4 h-4"></i>
364
+ </a>
365
+ <a href="#" class="glass-button p-2">
366
+ <i data-feather="twitter" class="w-4 h-4"></i>
367
+ </a>
368
+ <a href="#" class="glass-button p-2">
369
+ <i data-feather="instagram" class="w-4 h-4"></i>
370
+ </a>
371
+ <a href="#" class="glass-button p-2">
372
+ <i data-feather="youtube" class="w-4 h-4"></i>
373
+ </a>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
379
+ <p>© 2023 AI Music Hub. All rights reserved.</p>
380
+ </div>
381
+ </div>
382
+ </footer>
383
+
384
+ <script>
385
+ AOS.init({
386
+ duration: 800,
387
+ easing: 'ease-in-out',
388
+ once: true
389
+ });
390
+
391
+ feather.replace();
392
+
393
+ // Mobile menu functionality
394
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
395
+ const mobileMenu = document.getElementById('mobile-menu');
396
+
397
+ mobileMenuButton.addEventListener('click', () => {
398
+ mobileMenu.classList.toggle('hidden');
399
+ const icon = mobileMenuButton.querySelector('i');
400
+ if (mobileMenu.classList.contains('hidden')) {
401
+ icon.setAttribute('data-feather', 'menu');
402
+ } else {
403
+ icon.setAttribute('data-feather', 'x');
404
+ }
405
+ feather.replace();
406
+ });
407
+
408
+ // Tab functionality
409
+ const tabButtons = document.querySelectorAll('.tab-button');
410
+ const tabContents = document.querySelectorAll('.tab-content');
411
+
412
+ tabButtons.forEach(button => {
413
+ button.addEventListener('click', () => {
414
+ const tabId = button.getAttribute('data-tab');
415
+
416
+ // Update active tab button
417
+ tabButtons.forEach(btn => btn.classList.remove('active'));
418
+ button.classList.add('active');
419
+
420
+ // Show active tab content
421
+ tabContents.forEach(content => {
422
+ content.classList.remove('active');
423
+ content.classList.add('hidden');
424
+ });
425
+
426
+ document.getElementById(tabId).classList.remove('hidden');
427
+ document.getElementById(tabId).classList.add('active');
428
+ });
429
+ });
430
+
431
+ // Simple music player functionality
432
+ document.querySelectorAll('.track-card button').forEach(button => {
433
+ button.addEventListener('click', function() {
434
+ const card = this.closest('.track-card');
435
+ const range = card.querySelector('input[type="range"]');
436
+
437
+ // Simulate playback
438
+ let value = 0;
439
+ const interval = setInterval(() => {
440
+ value += 0.5;
441
+ range.value = value;
442
+
443
+ if (value >= 100) {
444
+ clearInterval(interval);
445
+ range.value = 0;
446
+ }
447
+ }, 100);
448
+ });
449
+ });
450
+
451
+ // Close mobile menu when clicking outside
452
+ document.addEventListener('click', (e) => {
453
+ if (!mobileMenu.contains(e.target) && !mobileMenuButton.contains(e.target) && !mobileMenu.classList.contains('hidden')) {
454
+ mobileMenu.classList.add('hidden');
455
+ const icon = mobileMenuButton.querySelector('i');
456
+ icon.setAttribute('data-feather', 'menu');
457
+ feather.replace();
458
+ }
459
+ });
460
+ </script>
461
+ </body>
462
+ </html>
prompts.txt ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ Ai 로 만든 음악 파일 을 올리고 듣고 공유 할수 있는 사이트 만들자 ! 한국인들이 사용할것이며 ! 디자인은 프리미엄으로 해줘! 프리미엄 톤의 다크 테마(네이비/차콜) + 포인트 그라디언트(보라-핑크 네온)
2
+ 버튼: 유리질감(반투명) + 외곽선 글로우 + 은은한 반짝임 애니메이션 넣어줘
3
+ 모바일에서 많이 사용할거라 모바일 에 작동 잘되도록 ! 반응형으로 해줘
4
+ 모바일에서 많이 사용할거라 모바일 에 작동 잘되도록 ! 반응형으로 해줘
5
+ 인기 AI 음악 이부분에서 모바일에서는 각로 2개씩 나오도록 해줘 디자인도 조금 변경 해줘봐 !
6
+ 로그인 페이지 만들어줘!
7
+ 마이페이지도 줘!
upload.html ADDED
@@ -0,0 +1,324 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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.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 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 #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
+ .upload-area {
68
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
69
+ backdrop-filter: blur(10px);
70
+ border: 2px dashed rgba(168, 85, 247, 0.3);
71
+ transition: all 0.3s ease;
72
+ }
73
+
74
+ .upload-area:hover, .upload-area.dragover {
75
+ border-color: #a855f7;
76
+ box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
77
+ }
78
+
79
+ .form-input {
80
+ background: rgba(30, 41, 59, 0.5);
81
+ backdrop-filter: blur(10px);
82
+ border: 1px solid rgba(255, 255, 255, 0.1);
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .form-input:focus {
87
+ box-shadow: 0 0 5px #a855f7, 0 0 10px #ec4899;
88
+ border-color: transparent;
89
+ }
90
+
91
+ .select-box {
92
+ background: rgba(30, 41, 59, 0.5);
93
+ backdrop-filter: blur(10px);
94
+ border: 1px solid rgba(255, 255, 255, 0.1);
95
+ }
96
+ </style>
97
+ </head>
98
+ <body class="min-h-screen">
99
+ <!-- Navigation -->
100
+ <nav class="fixed w-full z-50 bg-navy/80 backdrop-blur-md border-b border-gray-800">
101
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
102
+ <a href="index.html" class="flex items-center space-x-2">
103
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
104
+ <i data-feather="music" class="text-white"></i>
105
+ </div>
106
+ <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>
107
+ </a>
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">
114
+ <a href="mypage.html" class="w-10 h-10 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
115
+ <i data-feather="user" class="text-white"></i>
116
+ </a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </nav>
121
+
122
+ <!-- Upload Section -->
123
+ <section class="pt-32 pb-20 px-4">
124
+ <div class="container mx-auto max-w-4xl">
125
+ <h1 class="text-3xl md:text-4xl font-bold mb-2 text-center" data-aos="fade-up">AI 음악 업로드</h1>
126
+ <p class="text-gray-400 text-center mb-10" data-aos="fade-up" data-aos-delay="100">AI로 생성한 음악을 업로드하고 커뮤니티와 공유하세요</p>
127
+
128
+ <div class="bg-charcoal/50 backdrop-blur-md rounded-2xl p-6 md:p-8" data-aos="fade-up" data-aos-delay="200">
129
+ <!-- Upload Area -->
130
+ <div class="upload-area rounded-xl p-8 text-center mb-8 cursor-pointer" id="dropArea">
131
+ <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-accent-from mb-4"></i>
132
+ <h3 class="text-xl font-semibold mb-2">음악 파일 업로드</h3>
133
+ <p class="text-gray-400 mb-4">MP3, WAV, FLAC 파일을 드래그 앤 드롭하거나 클릭하여 선택하세요</p>
134
+ <button class="glass-button px-6 py-2 text-white mx-auto">파일 선택</button>
135
+ <input type="file" class="hidden" id="fileInput" accept="audio/*">
136
+ </div>
137
+
138
+ <!-- Track Info Form -->
139
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
140
+ <div>
141
+ <label class="block text-sm font-medium mb-2">음악 제목</label>
142
+ <input type="text" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="제목을 입력하세요">
143
+ </div>
144
+
145
+ <div>
146
+ <label class="block text-sm font-medium mb-2">커버 아트</label>
147
+ <div class="flex items-center space-x-4">
148
+ <div class="w-16 h-16 bg-gray-700 rounded-lg flex items-center justify-center">
149
+ <i data-feather="image" class="text-gray-400"></i>
150
+ </div>
151
+ <button class="glass-button px-4 py-2 text-white">이미지 업로드</button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="mb-6">
157
+ <label class="block text-sm font-medium mb-2">음악 설명</label>
158
+ <textarea class="form-input w-full px-4 py-3 rounded-lg focus:outline-none h-32" placeholder="음악에 대한 설명을 입력하세요"></textarea>
159
+ </div>
160
+
161
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
162
+ <div>
163
+ <label class="block text-sm font-medium mb-2">태그</label>
164
+ <input type="text" class="form-input w-full px-4 py-3 rounded-lg focus:outline-none" placeholder="#일렉트로닉 #앰비언트 #AI">
165
+ <p class="text-gray-400 text-xs mt-2">쉼표로 구분하여 여러 태그를 추가하세요</p>
166
+ </div>
167
+
168
+ <div>
169
+ <label class="block text-sm font-medium mb-2">생성 AI 도구</label>
170
+ <div class="relative">
171
+ <select class="select-box w-full px-4 py-3 rounded-lg appearance-none focus:outline-none">
172
+ <option>Soundful AI</option>
173
+ <option>AIVA</option>
174
+ <option>Amper Music</option>
175
+ <option>OpenAI MuseNet</option>
176
+ <option>Jukebox AI</option>
177
+ <option>Amadeus Code</option>
178
+ <option>Ecrett Music</option>
179
+ <option>기타</option>
180
+ </select>
181
+ <i data-feather="chevron-down" class="absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none"></i>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Privacy Settings -->
187
+ <div class="mb-8">
188
+ <label class="block text-sm font-medium mb-4">공개 설정</label>
189
+ <div class="flex flex-wrap gap-4">
190
+ <label class="flex items-center space-x-2">
191
+ <input type="radio" name="privacy" checked>
192
+ <span>공개</span>
193
+ </label>
194
+ <label class="flex items-center space-x-2">
195
+ <input type="radio" name="privacy">
196
+ <span>비공개</span>
197
+ </label>
198
+ <label class="flex items-center space-x-2">
199
+ <input type="radio" name="privacy">
200
+ <span>링크 공유만</span>
201
+ </label>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Submit Button -->
206
+ <button class="w-full glass-button py-4 text-white font-semibold rounded-lg flex items-center justify-center space-x-2">
207
+ <i data-feather="upload" class="w-5 h-5"></i>
208
+ <span>음악 업로드</span>
209
+ </button>
210
+ </div>
211
+
212
+ <!-- Tips -->
213
+ <div class="mt-12 bg-charcoal/50 backdrop-blur-md rounded-2xl p-6" data-aos="fade-up" data-aos-delay="300">
214
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
215
+ <i data-feather="info" class="w-5 h-5 text-accent-from mr-2"></i>
216
+ 업로드 팁
217
+ </h3>
218
+ <ul class="space-y-2 text-gray-300">
219
+ <li class="flex items-start">
220
+ <i data-feather="check" class="w-4 h-4 text-green-400 mt-1 mr-2"></i>
221
+ <span>고음질 오디오 파일(320kbps MP3 또는 무손실 형식)을 사용하세요</span>
222
+ </li>
223
+ <li class="flex items-start">
224
+ <i data-feather="check" class="w-4 h-4 text-green-400 mt-1 mr-2"></i>
225
+ <span>정확한 태그를 추가하면 더 많은 사람들이 음악을 발견할 수 있습니다</span>
226
+ </li>
227
+ <li class="flex items-start">
228
+ <i data-feather="check" class="w-4 h-4 text-green-400 mt-1 mr-2"></i>
229
+ <span>커버 아트는 최소 1000x1000 픽셀 이상의 정사각형 이미지를 사용하세요</span>
230
+ </li>
231
+ <li class="flex items-start">
232
+ <i data-feather="check" class="w-4 h-4 text-green-400 mt-1 mr-2"></i>
233
+ <span>음악 생성에 사용한 AI 도구를 정확하게 선택해 주세요</span>
234
+ </li>
235
+ </ul>
236
+ </div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- Footer -->
241
+ <footer class="py-12 px-4 border-t border-gray-800">
242
+ <div class="container mx-auto text-center">
243
+ <div class="flex items-center justify-center space-x-2 mb-4">
244
+ <div class="w-6 h-6 rounded-full bg-gradient-to-r from-accent-from to-accent-to flex items-center justify-center">
245
+ <i data-feather="music" class="text-white"></i>
246
+ </div>
247
+ <span class="text-lg font-bold">AI Music Hub</span>
248
+ </div>
249
+ <p class="text-gray-400 mb-6">AI 생성 음악의 프리미엄 플랫폼</p>
250
+
251
+ <div class="flex justify-center space-x-4 mb-6">
252
+ <a href="#" class="text-gray-400 hover:text-white transition">이용약관</a>
253
+ <a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a>
254
+ <a href="#" class="text-gray-400 hover:text-white transition">문의하기</a>
255
+ </div>
256
+
257
+ <p class="text-gray-400">© 2023 AI Music Hub. All rights reserved.</p>
258
+ </div>
259
+ </footer>
260
+
261
+ <script>
262
+ AOS.init({
263
+ duration: 800,
264
+ easing: 'ease-in-out',
265
+ once: true
266
+ });
267
+
268
+ feather.replace();
269
+
270
+ // Drag and drop functionality
271
+ const dropArea = document.getElementById('dropArea');
272
+ const fileInput = document.getElementById('fileInput');
273
+
274
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
275
+ dropArea.addEventListener(eventName, preventDefaults, false);
276
+ });
277
+
278
+ function preventDefaults(e) {
279
+ e.preventDefault();
280
+ e.stopPropagation();
281
+ }
282
+
283
+ ['dragenter', 'dragover'].forEach(eventName => {
284
+ dropArea.addEventListener(eventName, highlight, false);
285
+ });
286
+
287
+ ['dragleave', 'drop'].forEach(eventName => {
288
+ dropArea.addEventListener(eventName, unhighlight, false);
289
+ });
290
+
291
+ function highlight() {
292
+ dropArea.classList.add('dragover');
293
+ }
294
+
295
+ function unhighlight() {
296
+ dropArea.classList.remove('dragover');
297
+ }
298
+
299
+ dropArea.addEventListener('drop', handleDrop, false);
300
+
301
+ function handleDrop(e) {
302
+ const dt = e.dataTransfer;
303
+ const files = dt.files;
304
+ handleFiles(files);
305
+ }
306
+
307
+ dropArea.addEventListener('click', () => {
308
+ fileInput.click();
309
+ });
310
+
311
+ fileInput.addEventListener('change', () => {
312
+ handleFiles(fileInput.files);
313
+ });
314
+
315
+ function handleFiles(files) {
316
+ if (files.length > 0) {
317
+ // Here you would handle the file upload
318
+ console.log('File selected:', files[0].name);
319
+ dropArea.querySelector('p').textContent = `선택된 파일: ${files[0].name}`;
320
+ }
321
+ }
322
+ </script>
323
+ </body>
324
+ </html>