Hugging Face's logo

Spaces:
nkjoy
/
music
Running

App Files Community
nkjoy commited on
Commit
6bf0ad1
·
verified ·
1 Parent(s): 57fb69a

프로필수정 페이지 만들어줘 - Follow Up Deployment

Browse files
Files changed (8) hide show
  1. index.html +3 -3
  2. list.html +437 -0
  3. login.html +140 -0
  4. mypage.html +322 -0
  5. player.html +3 -3
  6. profile.html +275 -0
  7. prompts.txt +7 -1
  8. register.html +145 -0
index.html CHANGED
@@ -125,11 +125,11 @@
125
  </div>
126
 
127
  <nav class="hidden md:flex space-x-8">
128
- <a href="#" class="font-medium hover:text-purple-200 transition">홈</a>
129
- <a href="#" class="font-medium hover:text-purple-200 transition">차트</a>
 
130
  <a href="#" class="font-medium hover:text-purple-200 transition">장르</a>
131
  <a href="#" class="font-medium hover:text-purple-200 transition">아티스트</a>
132
- <a href="#" class="font-medium hover:text-purple-200 transition">앨범</a>
133
  </nav>
134
 
135
  <div class="flex items-center space-x-4">
 
125
  </div>
126
 
127
  <nav class="hidden md:flex space-x-8">
128
+ <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
129
+ <a href="list.html" class="font-medium hover:text-purple-200 transition">음악 리스트</a>
130
+ <a href="player.html" class="font-medium hover:text-purple-200 transition">플레이어</a>
131
  <a href="#" class="font-medium hover:text-purple-200 transition">장르</a>
132
  <a href="#" class="font-medium hover:text-purple-200 transition">아티스트</a>
 
133
  </nav>
134
 
135
  <div class="flex items-center space-x-4">
list.html ADDED
@@ -0,0 +1,437 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HarmonyFlow - 음악 리스트</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .glass-panel {
24
+ backdrop-filter: blur(10px);
25
+ background: rgba(255, 255, 255, 0.15);
26
+ border: 1px solid rgba(255, 255, 255, 0.2);
27
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
28
+ }
29
+
30
+ .music-card {
31
+ transition: all 0.3s ease;
32
+ padding: 1rem;
33
+ }
34
+
35
+ .music-card:hover {
36
+ transform: translateY(-3px);
37
+ box-shadow: 0 8px 24px rgba(31, 38, 135, 0.3);
38
+ }
39
+
40
+ .download-btn {
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .download-btn:hover {
45
+ background: rgba(255, 255, 255, 0.25);
46
+ transform: scale(1.05);
47
+ }
48
+
49
+ .play-btn {
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .play-btn:hover {
54
+ background: white;
55
+ color: #764ba2;
56
+ }
57
+
58
+ .filter-btn.active {
59
+ background: white;
60
+ color: #764ba2;
61
+ }
62
+
63
+ .search-box {
64
+ backdrop-filter: blur(10px);
65
+ background: rgba(255, 255, 255, 0.15);
66
+ border: 1px solid rgba(255, 255, 255, 0.2);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="text-white">
71
+ <!-- 헤더 -->
72
+ <header class="container mx-auto px-4 py-6 flex justify-between items-center">
73
+ <div class="flex items-center space-x-2">
74
+ <i data-feather="music" class="w-8 h-8"></i>
75
+ <h1 class="text-2xl font-bold">HarmonyFlow</h1>
76
+ </div>
77
+
78
+ <nav class="hidden md:flex space-x-8">
79
+ <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
80
+ <a href="list.html" class="font-medium hover:text-purple-200 transition">음악 리스트</a>
81
+ <a href="player.html" class="font-medium hover:text-purple-200 transition">플레이어</a>
82
+ <a href="#" class="font-medium hover:text-purple-200 transition">장르</a>
83
+ <a href="#" class="font-medium hover:text-purple-200 transition">아티스트</a>
84
+ </nav>
85
+
86
+ <div class="flex items-center space-x-4">
87
+ <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
88
+ <a href="login.html">로그인</a>
89
+ </button>
90
+ </div>
91
+ </header>
92
+
93
+ <!-- 메인 콘텐츠 -->
94
+ <main class="container mx-auto px-4 py-8">
95
+ <!-- 검색 및 필터 -->
96
+ <div class="mb-12">
97
+ <div class="text-center mb-8">
98
+ <h2 class="text-4xl font-bold mb-4">음악 리스트</h2>
99
+ <p class="text-xl text-gray-200">원하는 음악을 찾아보세요</p>
100
+ </div>
101
+
102
+ <!-- 검색창 -->
103
+ <div class="max-w-2xl mx-auto mb-8">
104
+ <div class="search-box rounded-full px-6 py-4 flex items-center">
105
+ <i data-feather="search" class="w-5 h-5 mr-3"></i>
106
+ <input type="text" placeholder="곡 제목, 아티스트, 앨범명으로 검색..." class="bg-transparent flex-1 outline-none">
107
+ </div>
108
+ </div>
109
+
110
+ <!-- 필터 버튼 -->
111
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
112
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium active">전체</button>
113
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium">팝</button>
114
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium">락</button>
115
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium">힙합</button>
116
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium">재즈</button>
117
+ <button class="filter-btn glass-panel px-6 py-2 rounded-full text-sm font-medium">클래식</button>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- 음악 리스트 -->
122
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
123
+ <!-- 음악 카드 1 -->
124
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up">
125
+ <div class="relative mb-3">
126
+ <img src="http://static.photos/music/320x320/1" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
127
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
128
+ <i data-feather="play" class="w-4 h-4"></i>
129
+ </button>
130
+ </div>
131
+ <h3 class="font-medium text-sm mb-1 truncate">Midnight City</h3>
132
+ <p class="text-gray-300 text-xs mb-2 truncate">M83</p>
133
+ <div class="flex justify-between items-center">
134
+ <span class="text-xs text-gray-400">4:04</span>
135
+ <div class="flex space-x-1">
136
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
137
+ <i data-feather="download" class="w-4 h-4"></i>
138
+ </button>
139
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
140
+ <i data-feather="plus" class="w-4 h-4"></i>
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- 음악 카드 2 -->
147
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="50">
148
+ <div class="relative mb-3">
149
+ <img src="http://static.photos/music/320x320/2" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
150
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
151
+ <i data-feather="play" class="w-4 h-4"></i>
152
+ </button>
153
+ </div>
154
+ <h3 class="font-medium text-sm mb-1 truncate">Blinding Lights</h3>
155
+ <p class="text-gray-300 text-xs mb-2 truncate">The Weeknd</p>
156
+ <div class="flex justify-between items-center">
157
+ <span class="text-xs text-gray-400">3:22</span>
158
+ <div class="flex space-x-1">
159
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
160
+ <i data-feather="download" class="w-4 h-4"></i>
161
+ </button>
162
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
163
+ <i data-feather="plus" class="w-4 h-4"></i>
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- 음악 카드 3 -->
170
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="100">
171
+ <div class="relative mb-3">
172
+ <img src="http://static.photos/music/320x320/3" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
173
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
174
+ <i data-feather="play" class="w-4 h-4"></i>
175
+ </button>
176
+ </div>
177
+ <h3 class="font-medium text-sm mb-1 truncate">Save Your Tears</h3>
178
+ <p class="text-gray-300 text-xs mb-2 truncate">The Weeknd</p>
179
+ <div class="flex justify-between items-center">
180
+ <span class="text-xs text-gray-400">3:35</span>
181
+ <div class="flex space-x-1">
182
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
183
+ <i data-feather="download" class="w-4 h-4"></i>
184
+ </button>
185
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
186
+ <i data-feather="plus" class="w-4 h-4"></i>
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- 음악 카드 4 -->
193
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="150">
194
+ <div class="relative mb-3">
195
+ <img src="http://static.photos/music/320x320/4" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
196
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
197
+ <i data-feather="play" class="w-4 h-4"></i>
198
+ </button>
199
+ </div>
200
+ <h3 class="font-medium text-sm mb-1 truncate">Levitating</h3>
201
+ <p class="text-gray-300 text-xs mb-2 truncate">Dua Lipa</p>
202
+ <div class="flex justify-between items-center">
203
+ <span class="text-xs text-gray-400">3:23</span>
204
+ <div class="flex space-x-1">
205
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
206
+ <i data-feather="download" class="w-4 h-4"></i>
207
+ </button>
208
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
209
+ <i data-feather="plus" class="w-4 h-4"></i>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- 음악 카드 5 -->
216
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="200">
217
+ <div class="relative mb-3">
218
+ <img src="http://static.photos/music/320x320/5" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
219
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
220
+ <i data-feather="play" class="w-4 h-4"></i>
221
+ </button>
222
+ </div>
223
+ <h3 class="font-medium text-sm mb-1 truncate">Stay</h3>
224
+ <p class="text-gray-300 text-xs mb-2 truncate">The Kid LAROI, Justin Bieber</p>
225
+ <div class="flex justify-between items-center">
226
+ <span class="text-xs text-gray-400">2:59</span>
227
+ <div class="flex space-x-1">
228
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
229
+ <i data-feather="download" class="w-4 h-4"></i>
230
+ </button>
231
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
232
+ <i data-feather="plus" class="w-4 h-4"></i>
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- 음악 카드 6 -->
239
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="250">
240
+ <div class="relative mb-3">
241
+ <img src="http://static.photos/music/320x320/6" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
242
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
243
+ <i data-feather="play" class="w-4 h-4"></i>
244
+ </button>
245
+ </div>
246
+ <h3 class="font-medium text-sm mb-1 truncate">Good 4 U</h3>
247
+ <p class="text-gray-300 text-xs mb-2 truncate">Olivia Rodrigo</p>
248
+ <div class="flex justify-between items-center">
249
+ <span class="text-xs text-gray-400">2:58</span>
250
+ <div class="flex space-x-1">
251
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
252
+ <i data-feather="download" class="w-4 h-4"></i>
253
+ </button>
254
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
255
+ <i data-feather="plus" class="w-4 h-4"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- 음악 카드 7 -->
262
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="300">
263
+ <div class="relative mb-3">
264
+ <img src="http://static.photos/music/320x320/7" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
265
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
266
+ <i data-feather="play" class="w-4 h-4"></i>
267
+ </button>
268
+ </div>
269
+ <h3 class="font-medium text-sm mb-1 truncate">Montero</h3>
270
+ <p class="text-gray-300 text-xs mb-2 truncate">Lil Nas X</p>
271
+ <div class="flex justify-between items-center">
272
+ <span class="text-xs text-gray-400">2:17</span>
273
+ <div class="flex space-x-1">
274
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
275
+ <i data-feather="download" class="w-4 h-4"></i>
276
+ </button>
277
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
278
+ <i data-feather="plus" class="w-4 h-4"></i>
279
+ </button>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- 음악 카드 8 -->
285
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="350">
286
+ <div class="relative mb-3">
287
+ <img src="http://static.photos/music/320x320/8" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
288
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
289
+ <i data-feather="play" class="w-4 h-4"></i>
290
+ </button>
291
+ </div>
292
+ <h3 class="font-medium text-sm mb-1 truncate">Peaches</h3>
293
+ <p class="text-gray-300 text-xs mb-2 truncate">Justin Bieber</p>
294
+ <div class="flex justify-between items-center">
295
+ <span class="text-xs text-gray-400">3:18</span>
296
+ <div class="flex space-x-1">
297
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
298
+ <i data-feather="download" class="w-4 h-4"></i>
299
+ </button>
300
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
301
+ <i data-feather="plus" class="w-4 h-4"></i>
302
+ </button>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- 음악 카드 9 -->
308
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="400">
309
+ <div class="relative mb-3">
310
+ <img src="http://static.photos/music/320x320/9" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
311
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
312
+ <i data-feather="play" class="w-4 h-4"></i>
313
+ </button>
314
+ </div>
315
+ <h3 class="font-medium text-sm mb-1 truncate">Butter</h3>
316
+ <p class="text-gray-300 text-xs mb-2 truncate">BTS</p>
317
+ <div class="flex justify-between items-center">
318
+ <span class="text-xs text-gray-400">2:42</span>
319
+ <div class="flex space-x-1">
320
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
321
+ <i data-feather="download" class="w-4 h-4"></i>
322
+ </button>
323
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
324
+ <i data-feather="plus" class="w-4 h-4"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- 음악 카드 10 -->
331
+ <div class="music-card glass-panel rounded-xl" data-aos="fade-up" data-aos-delay="450">
332
+ <div class="relative mb-3">
333
+ <img src="http://static.photos/music/320x320/10" alt="앨범 커버" class="w-full h-32 object-cover rounded-lg">
334
+ <button class="play-btn absolute bottom-1 right-1 w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center">
335
+ <i data-feather="play" class="w-4 h-4"></i>
336
+ </button>
337
+ </div>
338
+ <h3 class="font-medium text-sm mb-1 truncate">Heat Waves</h3>
339
+ <p class="text-gray-300 text-xs mb-2 truncate">Glass Animals</p>
340
+ <div class="flex justify-between items-center">
341
+ <span class="text-xs text-gray-400">3:58</span>
342
+ <div class="flex space-x-1">
343
+ <button class="download-btn w-7 h-7 rounded-full flex items-center justify-center">
344
+ <i data-feather="download" class="w-4 h-4"></i>
345
+ </button>
346
+ <button class="save-btn w-7 h-7 rounded-full flex items-center justify-center">
347
+ <i data-feather="plus" class="w-4 h-4"></i>
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- 페이지네이션 -->
355
+ <div class="flex justify-center mt-12">
356
+ <div class="glass-panel rounded-full px-6 py-3 flex items-center space-x-2">
357
+ <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
358
+ <i data-feather="chevron-left" class="w-5 h-5"></i>
359
+ </button>
360
+ <button class="w-10 h-10 rounded-full flex items-center justify-center bg-white text-purple-700">1</button>
361
+ <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">2</button>
362
+ <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">3</button>
363
+ <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">...</button>
364
+ <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
365
+ <i data-feather="chevron-right" class="w-5 h-5"></i>
366
+ </button>
367
+ </div>
368
+ </div>
369
+ </main>
370
+
371
+ <!-- 푸터 -->
372
+ <footer class="py-12 border-t border-white border-opacity-20 mt-12">
373
+ <div class="container mx-auto px-4">
374
+ <div class="flex flex-col md:flex-row justify-between items-center">
375
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
376
+ <i data-feather="music" class="w-6 h-6"></i>
377
+ <h3 class="text-xl font-bold">HarmonyFlow</h3>
378
+ </div>
379
+
380
+ <div class="flex space-x-6 mb-6 md:mb-0">
381
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="facebook"></i></a>
382
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="twitter"></i></a>
383
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="instagram"></i></a>
384
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="youtube"></i></a>
385
+ </div>
386
+
387
+ <div class="text-gray-400 text-sm">
388
+ © 2023 HarmonyFlow. All rights reserved.
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </footer>
393
+
394
+ <script>
395
+ AOS.init();
396
+ feather.replace();
397
+
398
+ // 필터 버튼 클릭 이벤트
399
+ const filterButtons = document.querySelectorAll('.filter-btn');
400
+ filterButtons.forEach(button => {
401
+ button.addEventListener('click', function() {
402
+ filterButtons.forEach(btn => btn.classList.remove('active'));
403
+ this.classList.add('active');
404
+ });
405
+ });
406
+
407
+ // 다운로드 버튼 클릭 이벤트
408
+ const downloadButtons = document.querySelectorAll('.download-btn');
409
+ downloadButtons.forEach(button => {
410
+ button.addEventListener('click', function() {
411
+ const icon = this.querySelector('i');
412
+ icon.setAttribute('data-feather', 'check');
413
+ feather.replace();
414
+
415
+ setTimeout(() => {
416
+ icon.setAttribute('data-feather', 'download');
417
+ feather.replace();
418
+ }, 2000);
419
+ });
420
+ });
421
+
422
+ // 담기 버튼 클릭 이벤트
423
+ const saveButtons = document.querySelectorAll('.save-btn');
424
+ saveButtons.forEach(button => {
425
+ button.addEventListener('click', function() {
426
+ const icon = this.querySelector('i');
427
+ if (icon.getAttribute('data-feather') === 'plus') {
428
+ icon.setAttribute('data-feather', 'check');
429
+ } else {
430
+ icon.setAttribute('data-feather', 'plus');
431
+ }
432
+ feather.replace();
433
+ });
434
+ });
435
+ </script>
436
+ </body>
437
+ </html>
login.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HarmonyFlow - 로그인</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ }
25
+
26
+ .glass-panel {
27
+ backdrop-filter: blur(10px);
28
+ background: rgba(255, 255, 255, 0.15);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
31
+ }
32
+
33
+ .input-field {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(255, 255, 255, 0.1);
36
+ border: 1px solid rgba(255, 255, 255, 0.15);
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .input-field:focus {
41
+ background: rgba(255, 255, 255, 0.2);
42
+ border-color: rgba(255, 255, 255, 0.3);
43
+ outline: none;
44
+ }
45
+
46
+ .login-btn {
47
+ transition: all 0.3s ease;
48
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
49
+ }
50
+
51
+ .login-btn:hover {
52
+ transform: translateY(-2px);
53
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
54
+ }
55
+
56
+ .social-btn {
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .social-btn:hover {
61
+ transform: translateY(-2px);
62
+ background: rgba(255, 255, 255, 0.25);
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="text-white">
67
+ <div class="container mx-auto px-4">
68
+ <div class="max-w-md mx-auto">
69
+ <div class="glass-panel rounded-3xl p-8" data-aos="fade-up">
70
+ <div class="text-center mb-8">
71
+ <div class="flex items-center justify-center space-x-2 mb-4">
72
+ <i data-feather="music" class="w-10 h-10"></i>
73
+ <h1 class="text-3xl font-bold">HarmonyFlow</h1>
74
+ </div>
75
+ <p class="text-gray-200">계정에 로그인하여 음악의 세계를 경험하세요</p>
76
+ </div>
77
+
78
+ <form class="space-y-6">
79
+ <div>
80
+ <label class="block text-sm font-medium mb-2">이메일</label>
81
+ <input type="email" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="your@email.com">
82
+ </div>
83
+
84
+ <div>
85
+ <div class="flex justify-between items-center mb-2">
86
+ <label class="block text-sm font-medium">비밀번호</label>
87
+ <a href="#" class="text-sm text-purple-200 hover:text-white">비밀번호 찾기</a>
88
+ </div>
89
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
90
+ </div>
91
+
92
+ <div class="flex items-center">
93
+ <input type="checkbox" id="remember" class="mr-2">
94
+ <label for="remember" class="text-sm">로그인 상태 유지</label>
95
+ </div>
96
+
97
+ <button type="submit" class="login-btn w-full py-3 rounded-lg font-medium text-white">
98
+ 로그인
99
+ </button>
100
+ </form>
101
+
102
+ <div class="my-6 flex items-center">
103
+ <div class="flex-1 border-t border-gray-400"></div>
104
+ <span class="px-4 text-gray-400 text-sm">또는</span>
105
+ <div class="flex-1 border-t border-gray-400"></div>
106
+ </div>
107
+
108
+ <div class="space-y-4">
109
+ <button class="social-btn glass-panel w-full py-3 rounded-lg flex items-center justify-center space-x-2">
110
+ <i data-feather="smartphone" class="w-5 h-5"></i>
111
+ <span>전화번호로 로그인</span>
112
+ </button>
113
+
114
+ <button class="social-btn glass-panel w-full py-3 rounded-lg flex items-center justify-center space-x-2">
115
+ <svg class="w-5 h-5" viewBox="0 0 24 24">
116
+ <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
117
+ <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
118
+ <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
119
+ <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
120
+ </svg>
121
+ <span>Google로 로그인</span>
122
+ </button>
123
+ </div>
124
+
125
+ <div class="mt-8 text-center">
126
+ <p class="text-gray-300">
127
+ 계정이 없으신가요?
128
+ <a href="register.html" class="text-white font-medium hover:underline">회원가입</a>
129
+ </p>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <script>
136
+ AOS.init();
137
+ feather.replace();
138
+ </script>
139
+ </body>
140
+ </html>
mypage.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HarmonyFlow - 마이페이지</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .glass-panel {
24
+ backdrop-filter: blur(10px);
25
+ background: rgba(255, 255, 255, 0.15);
26
+ border: 1px solid rgba(255, 255, 255, 0.2);
27
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
28
+ }
29
+
30
+ .profile-img {
31
+ border: 3px solid white;
32
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
33
+ }
34
+
35
+ .stat-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .stat-card:hover {
40
+ transform: translateY(-5px);
41
+ box-shadow: 0 10px 25px rgba(31, 38, 135, 0.3);
42
+ }
43
+
44
+ .playlist-card {
45
+ transition: all 0.3s ease;
46
+ }
47
+
48
+ .playlist-card:hover {
49
+ transform: translateY(-3px);
50
+ box-shadow: 0 8px 24px rgba(31, 38, 135, 0.3);
51
+ }
52
+
53
+ .tab-btn.active {
54
+ background: white;
55
+ color: #764ba2;
56
+ }
57
+
58
+ .recent-item:hover {
59
+ background: rgba(255, 255, 255, 0.1);
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="text-white">
64
+ <!-- 헤더 -->
65
+ <header class="container mx-auto px-4 py-6 flex justify-between items-center">
66
+ <div class="flex items-center space-x-2">
67
+ <i data-feather="music" class="w-8 h-8"></i>
68
+ <h1 class="text-2xl font-bold">HarmonyFlow</h1>
69
+ </div>
70
+
71
+ <nav class="hidden md:flex space-x-8">
72
+ <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
73
+ <a href="list.html" class="font-medium hover:text-purple-200 transition">음악 리스트</a>
74
+ <a href="player.html" class="font-medium hover:text-purple-200 transition">플레이어</a>
75
+ <a href="mypage.html" class="font-medium hover:text-purple-200 transition">마이페이지</a>
76
+ </nav>
77
+
78
+ <div class="flex items-center space-x-4">
79
+ <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
80
+ <a href="login.html">로그인</a>
81
+ </button>
82
+ </div>
83
+ </header>
84
+
85
+ <!-- 메인 콘텐츠 -->
86
+ <main class="container mx-auto px-4 py-8">
87
+ <!-- 프로필 섹션 -->
88
+ <div class="glass-panel rounded-3xl p-8 mb-8" data-aos="fade-up">
89
+ <div class="flex flex-col md:flex-row items-center md:items-start gap-8">
90
+ <div class="relative">
91
+ <img src="http://static.photos/people/200x200/1" alt="프로필 이미지" class="profile-img w-32 h-32 rounded-full object-cover">
92
+ <button class="absolute bottom-2 right-2 glass-panel p-2 rounded-full">
93
+ <i data-feather="camera" class="w-4 h-4"></i>
94
+ </button>
95
+ </div>
96
+
97
+ <div class="flex-1 text-center md:text-left">
98
+ <h2 class="text-3xl font-bold mb-2">홍길동</h2>
99
+ <p class="text-gray-200 mb-4">Premium 회원 • 가입일: 2023년 1월 15일</p>
100
+
101
+ <div class="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
102
+ <button class="glass-panel px-6 py-2 rounded-full text-sm font-medium">
103
+ 프로필 수정
104
+ </button>
105
+ <button class="glass-panel px-6 py-2 rounded-full text-sm font-medium">
106
+ 설정
107
+ </button>
108
+ <button class="glass-panel px-6 py-2 rounded-full text-sm font-medium">
109
+ 로그아웃
110
+ </button>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="grid grid-cols-3 gap-4">
115
+ <div class="text-center">
116
+ <div class="text-2xl font-bold">127</div>
117
+ <div class="text-sm text-gray-300">플레이리스트</div>
118
+ </div>
119
+ <div class="text-center">
120
+ <div class="text-2xl font-bold">2.4K</div>
121
+ <div class="text-sm text-gray-300">팔로워</div>
122
+ </div>
123
+ <div class="text-center">
124
+ <div class="text-2xl font-bold">563</div>
125
+ <div class="text-sm text-gray-300">팔로잉</div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- 탭 네비게이션 -->
132
+ <div class="flex flex-wrap gap-2 mb-8">
133
+ <button class="tab-btn active glass-panel px-6 py-3 rounded-full text-sm font-medium">최근 재생</button>
134
+ <button class="tab-btn glass-panel px-6 py-3 rounded-full text-sm font-medium">내 플레이리스트</button>
135
+ <button class="tab-btn glass-panel px-6 py-3 rounded-full text-sm font-medium">좋아요</button>
136
+ <button class="tab-btn glass-panel px-6 py-3 rounded-full text-sm font-medium">앨범</button>
137
+ </div>
138
+
139
+ <!-- 최근 재생 목록 -->
140
+ <div class="glass-panel rounded-3xl p-6 mb-8" data-aos="fade-up">
141
+ <h3 class="text-2xl font-bold mb-6">최근 재생</h3>
142
+
143
+ <div class="space-y-3">
144
+ <div class="recent-item rounded-lg p-3 flex items-center space-x-4 cursor-pointer">
145
+ <div class="w-12 h-12 rounded overflow-hidden">
146
+ <img src="http://static.photos/music/100x100/1" alt="" class="w-full h-full object-cover">
147
+ </div>
148
+ <div class="flex-1">
149
+ <div class="font-medium">Midnight City</div>
150
+ <div class="text-sm text-gray-300">M83</div>
151
+ </div>
152
+ <div class="text-sm text-gray-300">4:04</div>
153
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
154
+ <i data-feather="play" class="w-4 h-4"></i>
155
+ </button>
156
+ </div>
157
+
158
+ <div class="recent-item rounded-lg p-3 flex items-center space-x-4 cursor-pointer">
159
+ <div class="w-12 h-12 rounded overflow-hidden">
160
+ <img src="http://static.photos/music/100x100/2" alt="" class="w-full h-full object-cover">
161
+ </div>
162
+ <div class="flex-1">
163
+ <div class="font-medium">Blinding Lights</div>
164
+ <div class="text-sm text-gray-300">The Weeknd</div>
165
+ </div>
166
+ <div class="text-sm text-gray-300">3:22</div>
167
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
168
+ <i data-feather="play" class="w-4 h-4"></i>
169
+ </button>
170
+ </div>
171
+
172
+ <div class="recent-item rounded-lg p-3 flex items-center space-x-4 cursor-pointer">
173
+ <div class="w-12 h-12 rounded overflow-hidden">
174
+ <img src="http://static.photos/music/100x100/3" alt="" class="w-full h-full object-cover">
175
+ </div>
176
+ <div class="flex-1">
177
+ <div class="font-medium">Save Your Tears</div>
178
+ <div class="text-sm text-gray-300">The Weeknd</div>
179
+ </div>
180
+ <div class="text-sm text-gray-300">3:35</div>
181
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
182
+ <i data-feather="play" class="w-4 h-4"></i>
183
+ </button>
184
+ </div>
185
+
186
+ <div class="recent-item rounded-lg p-3 flex items-center space-x-4 cursor-pointer">
187
+ <div class="w-12 h-12 rounded overflow-hidden">
188
+ <img src="http://static.photos/music/100x100/4" alt="" class="w-full h-full object-cover">
189
+ </div>
190
+ <div class="flex-1">
191
+ <div class="font-medium">Levitating</div>
192
+ <div class="text-sm text-gray-300">Dua Lipa</div>
193
+ </div>
194
+ <div class="text-sm text-gray-300">3:23</div>
195
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
196
+ <i data-feather="play" class="w-4 h-4"></i>
197
+ </button>
198
+ </div>
199
+
200
+ <div class="recent-item rounded-lg p-3 flex items-center space-x-4 cursor-pointer">
201
+ <div class="w-12 h-12 rounded overflow-hidden">
202
+ <img src="http://static.photos/music/100x100/5" alt="" class="w-full h-full object-cover">
203
+ </div>
204
+ <div class="flex-1">
205
+ <div class="font-medium">Stay</div>
206
+ <div class="text-sm text-gray-300">The Kid LAROI, Justin Bieber</div>
207
+ </div>
208
+ <div class="text-sm text-gray-300">2:59</div>
209
+ <button class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
210
+ <i data-feather="play" class="w-4 h-4"></i>
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- 내 플레이리스트 -->
217
+ <div class="mb-8">
218
+ <div class="flex justify-between items-center mb-6">
219
+ <h3 class="text-2xl font-bold">내 플레이리스트</h3>
220
+ <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium flex items-center space-x-1">
221
+ <i data-feather="plus" class="w-4 h-4"></i>
222
+ <span>새 플레이리스트</span>
223
+ </button>
224
+ </div>
225
+
226
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
227
+ <div class="playlist-card glass-panel rounded-xl p-4 cursor-pointer" data-aos="fade-up">
228
+ <div class="relative mb-3">
229
+ <img src="http://static.photos/music/320x320/1" alt="플레이리스트" class="w-full h-32 object-cover rounded-lg">
230
+ <div class="absolute inset-0 bg-black bg-opacity-40 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition">
231
+ <i data-feather="play-circle" class="w-12 h-12 text-white"></i>
232
+ </div>
233
+ </div>
234
+ <h4 class="font-medium text-sm mb-1 truncate">좋아하는 음악</h4>
235
+ <p class="text-gray-300 text-xs">32곡</p>
236
+ </div>
237
+
238
+ <div class="playlist-card glass-panel rounded-xl p-4 cursor-pointer" data-aos="fade-up" data-aos-delay="50">
239
+ <div class="relative mb-3">
240
+ <img src="http://static.photos/music/320x320/2" alt="플레이리스트" class="w-full h-32 object-cover rounded-lg">
241
+ <div class="absolute inset-0 bg-black bg-opacity-40 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition">
242
+ <i data-feather="play-circle" class="w-12 h-12 text-white"></i>
243
+ </div>
244
+ </div>
245
+ <h4 class="font-medium text-sm mb-1 truncate">운동할 때 듣는 음악</h4>
246
+ <p class="text-gray-300 text-xs">18곡</p>
247
+ </div>
248
+
249
+ <div class="playlist-card glass-panel rounded-xl p-4 cursor-pointer" data-aos="fade-up" data-aos-delay="100">
250
+ <div class="relative mb-3">
251
+ <img src="http://static.photos/music/320x320/3" alt="플레이리스트" class="w-full h-32 object-cover rounded-lg">
252
+ <div class="absolute inset-0 bg-black bg-opacity-40 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition">
253
+ <i data-feather="play-circle" class="w-12 h-12 text-white"></i>
254
+ </div>
255
+ </div>
256
+ <h4 class="font-medium text-sm mb-1 truncate">감성적인 밤</h4>
257
+ <p class="text-gray-300 text-xs">24곡</p>
258
+ </div>
259
+
260
+ <div class="playlist-card glass-panel rounded-xl p-4 cursor-pointer" data-aos="fade-up" data-aos-delay="150">
261
+ <div class="relative mb-3">
262
+ <img src="http://static.photos/music/320x320/4" alt="플레이리스트" class="w-full h-32 object-cover rounded-lg">
263
+ <div class="absolute inset-0 bg-black bg-opacity-40 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition">
264
+ <i data-feather="play-circle" class="w-12 h-12 text-white"></i>
265
+ </div>
266
+ </div>
267
+ <h4 class="font-medium text-sm mb-1 truncate">팝 음악 모음</h4>
268
+ <p class="text-gray-300 text-xs">45곡</p>
269
+ </div>
270
+
271
+ <div class="playlist-card glass-panel rounded-xl p-4 cursor-pointer" data-aos="fade-up" data-aos-delay="200">
272
+ <div class="relative mb-3">
273
+ <img src="http://static.photos/music/320x320/5" alt="플레이리스트" class="w-full h-32 object-cover rounded-lg">
274
+ <div class="absolute inset-0 bg-black bg-opacity-40 rounded-lg flex items-center justify-center opacity-0 hover:opacity-100 transition">
275
+ <i data-feather="play-circle" class="w-12 h-12 text-white"></i>
276
+ </div>
277
+ </div>
278
+ <h4 class="font-medium text-sm mb-1 truncate">클래식 명곡</h4>
279
+ <p class="text-gray-300 text-xs">12곡</p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </main>
284
+
285
+ <!-- 푸터 -->
286
+ <footer class="py-12 border-t border-white border-opacity-20 mt-12">
287
+ <div class="container mx-auto px-4">
288
+ <div class="flex flex-col md:flex-row justify-between items-center">
289
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
290
+ <i data-feather="music" class="w-6 h-6"></i>
291
+ <h3 class="text-xl font-bold">HarmonyFlow</h3>
292
+ </div>
293
+
294
+ <div class="flex space-x-6 mb-6 md:mb-0">
295
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="facebook"></i></a>
296
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="twitter"></i></a>
297
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="instagram"></i></a>
298
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="youtube"></i></a>
299
+ </div>
300
+
301
+ <div class="text-gray-400 text-sm">
302
+ © 2023 HarmonyFlow. All rights reserved.
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </footer>
307
+
308
+ <script>
309
+ AOS.init();
310
+ feather.replace();
311
+
312
+ // 탭 버튼 클릭 이벤트
313
+ const tabButtons = document.querySelectorAll('.tab-btn');
314
+ tabButtons.forEach(button => {
315
+ button.addEventListener('click', function() {
316
+ tabButtons.forEach(btn => btn.classList.remove('active'));
317
+ this.classList.add('active');
318
+ });
319
+ });
320
+ </script>
321
+ </body>
322
+ </html>
player.html CHANGED
@@ -99,15 +99,15 @@
99
 
100
  <nav class="hidden md:flex space-x-8">
101
  <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
102
- <a href="#" class="font-medium hover:text-purple-200 transition">차트</a>
 
103
  <a href="#" class="font-medium hover:text-purple-200 transition">장르</a>
104
  <a href="#" class="font-medium hover:text-purple-200 transition">아티스트</a>
105
- <a href="#" class="font-medium hover:text-purple-200 transition">앨범</a>
106
  </nav>
107
 
108
  <div class="flex items-center space-x-4">
109
  <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
110
- 프로필
111
  </button>
112
  </div>
113
  </header>
 
99
 
100
  <nav class="hidden md:flex space-x-8">
101
  <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
102
+ <a href="list.html" class="font-medium hover:text-purple-200 transition">음악 리스트</a>
103
+ <a href="player.html" class="font-medium hover:text-purple-200 transition">플레이어</a>
104
  <a href="#" class="font-medium hover:text-purple-200 transition">장르</a>
105
  <a href="#" class="font-medium hover:text-purple-200 transition">아티스트</a>
 
106
  </nav>
107
 
108
  <div class="flex items-center space-x-4">
109
  <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
110
+ <a href="login.html">로그인</a>
111
  </button>
112
  </div>
113
  </header>
profile.html ADDED
@@ -0,0 +1,275 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HarmonyFlow - 프로필 수정</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ .glass-panel {
24
+ backdrop-filter: blur(10px);
25
+ background: rgba(255, 255, 255, 0.15);
26
+ border: 1px solid rgba(255, 255, 255, 0.2);
27
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
28
+ }
29
+
30
+ .input-field {
31
+ backdrop-filter: blur(10px);
32
+ background: rgba(255, 255, 255, 0.1);
33
+ border: 1px solid rgba(255, 255, 255, 0.15);
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .input-field:focus {
38
+ background: rgba(255, 255, 255, 0.2);
39
+ border-color: rgba(255, 255, 255, 0.3);
40
+ outline: none;
41
+ }
42
+
43
+ .save-btn {
44
+ transition: all 0.3s ease;
45
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
46
+ }
47
+
48
+ .save-btn:hover {
49
+ transform: translateY(-2px);
50
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
51
+ }
52
+
53
+ .cancel-btn {
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .cancel-btn:hover {
58
+ background: rgba(255, 255, 255, 0.25);
59
+ }
60
+
61
+ .profile-img {
62
+ border: 3px solid white;
63
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="text-white">
68
+ <!-- 헤더 -->
69
+ <header class="container mx-auto px-4 py-6 flex justify-between items-center">
70
+ <div class="flex items-center space-x-2">
71
+ <i data-feather="music" class="w-8 h-8"></i>
72
+ <h1 class="text-2xl font-bold">HarmonyFlow</h1>
73
+ </div>
74
+
75
+ <nav class="hidden md:flex space-x-8">
76
+ <a href="index.html" class="font-medium hover:text-purple-200 transition">홈</a>
77
+ <a href="list.html" class="font-medium hover:text-purple-200 transition">음악 리스트</a>
78
+ <a href="player.html" class="font-medium hover:text-purple-200 transition">플레이어</a>
79
+ <a href="mypage.html" class="font-medium hover:text-purple-200 transition">마이페이지</a>
80
+ </nav>
81
+
82
+ <div class="flex items-center space-x-4">
83
+ <button class="glass-panel px-4 py-2 rounded-full text-sm font-medium">
84
+ <a href="login.html">로그인</a>
85
+ </button>
86
+ </div>
87
+ </header>
88
+
89
+ <!-- 메인 콘텐츠 -->
90
+ <main class="container mx-auto px-4 py-8">
91
+ <div class="max-w-4xl mx-auto">
92
+ <div class="glass-panel rounded-3xl p-8" data-aos="fade-up">
93
+ <div class="text-center mb-8">
94
+ <h2 class="text-3xl font-bold mb-2">프로필 수정</h2>
95
+ <p class="text-gray-200">개인 정보와 프로필을 업데이트하세요</p>
96
+ </div>
97
+
98
+ <form class="space-y-8">
99
+ <!-- 프로필 사진 -->
100
+ <div class="flex flex-col items-center">
101
+ <div class="relative mb-4">
102
+ <img src="http://static.photos/people/200x200/1" alt="프로필 이미지" class="profile-img w-32 h-32 rounded-full object-cover">
103
+ <button type="button" class="absolute bottom-2 right-2 glass-panel p-2 rounded-full">
104
+ <i data-feather="camera" class="w-4 h-4"></i>
105
+ </button>
106
+ </div>
107
+ <button type="button" class="text-sm text-purple-200 hover:text-white underline">
108
+ 프로필 사진 변경
109
+ </button>
110
+ </div>
111
+
112
+ <!-- 기본 정보 -->
113
+ <div>
114
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">기본 정보</h3>
115
+
116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
117
+ <div>
118
+ <label class="block text-sm font-medium mb-2">이름</label>
119
+ <input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="홍길동">
120
+ </div>
121
+
122
+ <div>
123
+ <label class="block text-sm font-medium mb-2">사용자 이름</label>
124
+ <input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="honggildong">
125
+ </div>
126
+
127
+ <div class="md:col-span-2">
128
+ <label class="block text-sm font-medium mb-2">이메일</label>
129
+ <input type="email" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" value="hong@example.com">
130
+ </div>
131
+
132
+ <div class="md:col-span-2">
133
+ <label class="block text-sm font-medium mb-2">소개</label>
134
+ <textarea class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" rows="4" placeholder="나를 소개해주세요...">음악을 사랑하는 일반인입니다. 다양한 장르의 음악을 즐기며 플레이리스트를 공유하고 있습니다.</textarea>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- 개인정보 -->
140
+ <div>
141
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">개인 정보</h3>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
144
+ <div>
145
+ <label class="block text-sm font-medium mb-2">성별</label>
146
+ <select class="input-field w-full px-4 py-3 rounded-lg text-white">
147
+ <option>선택 안함</option>
148
+ <option selected>남성</option>
149
+ <option>여성</option>
150
+ </select>
151
+ </div>
152
+
153
+ <div>
154
+ <label class="block text-sm font-medium mb-2">생년월일</label>
155
+ <input type="date" class="input-field w-full px-4 py-3 rounded-lg text-white" value="1990-01-15">
156
+ </div>
157
+
158
+ <div>
159
+ <label class="block text-sm font-medium mb-2">국가</label>
160
+ <select class="input-field w-full px-4 py-3 rounded-lg text-white">
161
+ <option>대한민국</option>
162
+ <option>미국</option>
163
+ <option>일본</option>
164
+ <option>중국</option>
165
+ </select>
166
+ </div>
167
+
168
+ <div>
169
+ <label class="block text-sm font-medium mb-2">언어</label>
170
+ <select class="input-field w-full px-4 py-3 rounded-lg text-white">
171
+ <option selected>한국어</option>
172
+ <option>English</option>
173
+ <option>日本語</option>
174
+ <option>中文</option>
175
+ </select>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- 소셜 미디어 -->
181
+ <div>
182
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">소셜 미디어</h3>
183
+
184
+ <div class="space-y-4">
185
+ <div class="flex items-center">
186
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
187
+ <i data-feather="facebook" class="w-5 h-5"></i>
188
+ </div>
189
+ <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Facebook 프로필 URL">
190
+ <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">연결</button>
191
+ </div>
192
+
193
+ <div class="flex items-center">
194
+ <div class="w-10 h-10 rounded-full bg-sky-500 flex items-center justify-center mr-3">
195
+ <i data-feather="twitter" class="w-5 h-5"></i>
196
+ </div>
197
+ <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Twitter 프로필 URL">
198
+ <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">연결</button>
199
+ </div>
200
+
201
+ <div class="flex items-center">
202
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-3">
203
+ <i data-feather="instagram" class="w-5 h-5"></i>
204
+ </div>
205
+ <input type="text" class="input-field flex-1 px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="Instagram 프로필 URL">
206
+ <button type="button" class="ml-2 glass-panel px-4 py-3 rounded-lg text-sm">연결</button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- 비밀번호 변경 -->
212
+ <div>
213
+ <h3 class="text-xl font-bold mb-6 pb-2 border-b border-white border-opacity-20">비밀번호 변경</h3>
214
+
215
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
216
+ <div>
217
+ <label class="block text-sm font-medium mb-2">현재 비밀번호</label>
218
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
219
+ </div>
220
+
221
+ <div>
222
+ <label class="block text-sm font-medium mb-2">새 비밀번호</label>
223
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
224
+ </div>
225
+
226
+ <div class="md:col-span-2">
227
+ <label class="block text-sm font-medium mb-2">새 비밀번호 확인</label>
228
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- 버튼 영역 -->
234
+ <div class="flex flex-col sm:flex-row gap-4 pt-6">
235
+ <button type="submit" class="save-btn flex-1 py-3 rounded-lg font-medium text-white">
236
+ 변경사항 저장
237
+ </button>
238
+ <button type="button" class="cancel-btn glass-panel flex-1 py-3 rounded-lg font-medium">
239
+ <a href="mypage.html">취소</a>
240
+ </button>
241
+ </div>
242
+ </form>
243
+ </div>
244
+ </div>
245
+ </main>
246
+
247
+ <!-- 푸터 -->
248
+ <footer class="py-12 border-t border-white border-opacity-20 mt-12">
249
+ <div class="container mx-auto px-4">
250
+ <div class="flex flex-col md:flex-row justify-between items-center">
251
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
252
+ <i data-feather="music" class="w-6 h-6"></i>
253
+ <h3 class="text-xl font-bold">HarmonyFlow</h3>
254
+ </div>
255
+
256
+ <div class="flex space-x-6 mb-6 md:mb-0">
257
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="facebook"></i></a>
258
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="twitter"></i></a>
259
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="instagram"></i></a>
260
+ <a href="#" class="hover:text-purple-300 transition"><i data-feather="youtube"></i></a>
261
+ </div>
262
+
263
+ <div class="text-gray-400 text-sm">
264
+ © 2023 HarmonyFlow. All rights reserved.
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </footer>
269
+
270
+ <script>
271
+ AOS.init();
272
+ feather.replace();
273
+ </script>
274
+ </body>
275
+ </html>
prompts.txt CHANGED
@@ -1,2 +1,8 @@
1
  음악 플레이어 홈페이지 만들자. 디자인은 그라데이션과 반투명 유리버튼+반짝임 효과 등 넣어서 이쁘게 만들어줘
2
- 플레이어 페이지 만들어
 
 
 
 
 
 
 
1
  음악 플레이어 홈페이지 만들자. 디자인은 그라데이션과 반투명 유리버튼+반짝임 효과 등 넣어서 이쁘게 만들어줘
2
+ 플레이어 페이지 만들어
3
+ 리스트 페이지도 만들어줘. 다운로드버튼, 넣어줘
4
+ 리스트는 좀 작게 만들어. 너무 큼직해
5
+ 담기 버튼도 넣어줘
6
+ 로그인페이지와 회원가입 페이지 만들어줘
7
+ 마이페이지도 만들어줘
8
+ 프로필수정 페이지 만들어줘
register.html ADDED
@@ -0,0 +1,145 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>HarmonyFlow - 회원가입</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
15
+
16
+ body {
17
+ font-family: 'Noto Sans KR', sans-serif;
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ min-height: 100vh;
20
+ overflow-x: hidden;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: center;
24
+ }
25
+
26
+ .glass-panel {
27
+ backdrop-filter: blur(10px);
28
+ background: rgba(255, 255, 255, 0.15);
29
+ border: 1px solid rgba(255, 255, 255, 0.2);
30
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
31
+ }
32
+
33
+ .input-field {
34
+ backdrop-filter: blur(10px);
35
+ background: rgba(255, 255, 255, 0.1);
36
+ border: 1px solid rgba(255, 255, 255, 0.15);
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .input-field:focus {
41
+ background: rgba(255, 255, 255, 0.2);
42
+ border-color: rgba(255, 255, 255, 0.3);
43
+ outline: none;
44
+ }
45
+
46
+ .register-btn {
47
+ transition: all 0.3s ease;
48
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
49
+ }
50
+
51
+ .register-btn:hover {
52
+ transform: translateY(-2px);
53
+ box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
54
+ }
55
+
56
+ .social-btn {
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .social-btn:hover {
61
+ transform: translateY(-2px);
62
+ background: rgba(255, 255, 255, 0.25);
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="text-white">
67
+ <div class="container mx-auto px-4">
68
+ <div class="max-w-md mx-auto">
69
+ <div class="glass-panel rounded-3xl p-8" data-aos="fade-up">
70
+ <div class="text-center mb-8">
71
+ <div class="flex items-center justify-center space-x-2 mb-4">
72
+ <i data-feather="music" class="w-10 h-10"></i>
73
+ <h1 class="text-3xl font-bold">HarmonyFlow</h1>
74
+ </div>
75
+ <p class="text-gray-200">새로운 계정을 만들어 음악의 세계를 경험하세요</p>
76
+ </div>
77
+
78
+ <form class="space-y-6">
79
+ <div>
80
+ <label class="block text-sm font-medium mb-2">이름</label>
81
+ <input type="text" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="홍길동">
82
+ </div>
83
+
84
+ <div>
85
+ <label class="block text-sm font-medium mb-2">이메일</label>
86
+ <input type="email" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="your@email.com">
87
+ </div>
88
+
89
+ <div>
90
+ <label class="block text-sm font-medium mb-2">비밀번호</label>
91
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
92
+ </div>
93
+
94
+ <div>
95
+ <label class="block text-sm font-medium mb-2">비밀번호 확인</label>
96
+ <input type="password" class="input-field w-full px-4 py-3 rounded-lg text-white placeholder-gray-300" placeholder="••••••••">
97
+ </div>
98
+
99
+ <div class="flex items-start">
100
+ <input type="checkbox" id="terms" class="mt-1 mr-2">
101
+ <label for="terms" class="text-sm">
102
+ <a href="#" class="text-purple-200 hover:text-white">이용약관</a>과
103
+ <a href="#" class="text-purple-200 hover:text-white">개인정보 처리방침</a>에 동의합니다
104
+ </label>
105
+ </div>
106
+
107
+ <button type="submit" class="register-btn w-full py-3 rounded-lg font-medium text-white">
108
+ 회원가입
109
+ </button>
110
+ </form>
111
+
112
+ <div class="my-6 flex items-center">
113
+ <div class="flex-1 border-t border-gray-400"></div>
114
+ <span class="px-4 text-gray-400 text-sm">또는</span>
115
+ <div class="flex-1 border-t border-gray-400"></div>
116
+ </div>
117
+
118
+ <div class="space-y-4">
119
+ <button class="social-btn glass-panel w-full py-3 rounded-lg flex items-center justify-center space-x-2">
120
+ <svg class="w-5 h-5" viewBox="0 0 24 24">
121
+ <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path>
122
+ <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path>
123
+ <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path>
124
+ <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path>
125
+ </svg>
126
+ <span>Google로 회원가입</span>
127
+ </button>
128
+ </div>
129
+
130
+ <div class="mt-8 text-center">
131
+ <p class="text-gray-300">
132
+ 이미 계정이 있으신가요?
133
+ <a href="login.html" class="text-white font-medium hover:underline">로그인</a>
134
+ </p>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <script>
141
+ AOS.init();
142
+ feather.replace();
143
+ </script>
144
+ </body>
145
+ </html>