Hugging Face's logo

Spaces:
nkjoy
/
gg
Running

App Files Community
nkjoy commited on
Commit
9abcb7f
·
verified ·
1 Parent(s): cd763bb

은다은TV 페이지도 줘 ! - Follow Up Deployment

Browse files
Files changed (5) hide show
  1. eundaentv.html +414 -0
  2. index.html +4 -4
  3. membership.html +294 -0
  4. movie.html +325 -0
  5. prompts.txt +4 -1
eundaentv.html ADDED
@@ -0,0 +1,414 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>은다은TV - 쉼터홈</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://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ body {
16
+ font-family: 'Noto Sans KR', sans-serif;
17
+ background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
18
+ background-size: 400% 400%;
19
+ animation: gradientBG 15s ease infinite;
20
+ }
21
+
22
+ @keyframes gradientBG {
23
+ 0% { background-position: 0% 50%; }
24
+ 50% { background-position: 100% 50%; }
25
+ 100% { background-position: 0% 50%; }
26
+ }
27
+
28
+ .video-card {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .video-card:hover {
33
+ transform: translateY(-10px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
35
+ }
36
+
37
+ .glow {
38
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
39
+ }
40
+
41
+ .category-btn {
42
+ transition: all 0.2s ease;
43
+ }
44
+
45
+ .category-btn:hover, .category-btn.active {
46
+ background: linear-gradient(to right, #f59e0b, #ef4444);
47
+ color: white;
48
+ }
49
+
50
+ .live-badge {
51
+ animation: pulse 1.5s infinite;
52
+ }
53
+
54
+ @keyframes pulse {
55
+ 0% { opacity: 1; }
56
+ 50% { opacity: 0.5; }
57
+ 100% { opacity: 1; }
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="min-h-screen text-white">
62
+ <!-- 헤더 -->
63
+ <header class="py-6 px-4 sm:px-8 bg-black bg-opacity-30 backdrop-blur-md">
64
+ <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
65
+ <div class="flex items-center mb-4 sm:mb-0">
66
+ <i data-feather="youtube" class="mr-2 text-red-500"></i>
67
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-yellow-400">은다은TV</h1>
68
+ </div>
69
+ <nav class="flex flex-wrap justify-center gap-4">
70
+ <a href="index.html" class="hover:text-red-300 transition">홈</a>
71
+ <a href="music.html" class="hover:text-red-300 transition">음악</a>
72
+ <a href="movie.html" class="hover:text-red-300 transition">영화</a>
73
+ <a href="#" class="hover:text-red-300 transition font-bold">TV</a>
74
+ <a href="membership.html" class="hover:text-red-300 transition">맴버십</a>
75
+ </nav>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- 히어로 섹션 -->
80
+ <section class="py-16 px-4 text-center" data-aos="fade-up">
81
+ <div class="container mx-auto max-w-4xl">
82
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">은다은TV</h1>
83
+ <p class="text-xl mb-10 text-gray-200">다양한 콘텐츠를 한 곳에서 즐기세요</p>
84
+ <div class="flex flex-wrap justify-center gap-4">
85
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
86
+ 지금 시청하기
87
+ </button>
88
+ <button class="bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm border border-white border-opacity-30 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
89
+ 구독하기
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- 실시간 방송 섹션 -->
96
+ <section class="container mx-auto px-4 mb-12">
97
+ <div class="flex items-center mb-6">
98
+ <h2 class="text-2xl font-bold mr-4">실시간 방송</h2>
99
+ <div class="live-badge bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center">
100
+ <span class="w-2 h-2 bg-white rounded-full mr-2"></span>
101
+ LIVE
102
+ </div>
103
+ </div>
104
+
105
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
106
+ <!-- 실시간 방송 카드 1 -->
107
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up">
108
+ <div class="relative">
109
+ <img src="http://static.photos/technology/640x360/1" alt="실시간 방송" class="w-full h-48 object-cover">
110
+ <div class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded flex items-center">
111
+ <span class="w-2 h-2 bg-white rounded-full mr-1"></span>
112
+ LIVE
113
+ </div>
114
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
115
+ 12.5K 시청 중
116
+ </div>
117
+ </div>
118
+ <div class="p-5">
119
+ <h3 class="text-xl font-bold mb-2">오늘의 인기 콘텐츠 라이브 리뷰</h3>
120
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">최신 영화와 드라마를 실시간으로 리뷰하고 추천해드립니다</p>
121
+ <div class="flex justify-between items-center">
122
+ <span class="text-red-400 font-bold">은다은TV</span>
123
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
124
+ 시청하기
125
+ </button>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- 실시간 방송 카드 2 -->
131
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
132
+ <div class="relative">
133
+ <img src="http://static.photos/people/640x360/2" alt="실시간 방송" class="w-full h-48 object-cover">
134
+ <div class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded flex items-center">
135
+ <span class="w-2 h-2 bg-white rounded-full mr-1"></span>
136
+ LIVE
137
+ </div>
138
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
139
+ 8.3K 시청 중
140
+ </div>
141
+ </div>
142
+ <div class="p-5">
143
+ <h3 class="text-xl font-bold mb-2">K-POP 뮤직 차트 실시간</h3>
144
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">실시간 K-POP 차트와 아티스트 인터뷰</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="text-red-400 font-bold">은다은TV 뮤직</span>
147
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
148
+ 시청하기
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- 실시간 방송 카드 3 -->
155
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
156
+ <div class="relative">
157
+ <img src="http://static.photos/food/640x360/3" alt="실시간 방송" class="w-full h-48 object-cover">
158
+ <div class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded flex items-center">
159
+ <span class="w-2 h-2 bg-white rounded-full mr-1"></span>
160
+ LIVE
161
+ </div>
162
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
163
+ 5.7K 시청 중
164
+ </div>
165
+ </div>
166
+ <div class="p-5">
167
+ <h3 class="text-xl font-bold mb-2">맛있는 요리 생방송</h3>
168
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">전문 셰프와 함께하는 실시간 요리 클래스</p>
169
+ <div class="flex justify-between items-center">
170
+ <span class="text-red-400 font-bold">은다은TV 푸드</span>
171
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
172
+ 시청하기
173
+ </button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- 비디오 카테고리 필터 -->
181
+ <section class="container mx-auto px-4 mb-12">
182
+ <div class="flex flex-wrap justify-center gap-3">
183
+ <button class="category-btn active px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">전체</button>
184
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">엔터테인먼트</button>
185
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">음악</button>
186
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">요리</button>
187
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">여행</button>
188
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">뉴스</button>
189
+ </div>
190
+ </section>
191
+
192
+ <!-- 비디오 그리드 -->
193
+ <main class="container mx-auto px-4 pb-20">
194
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
195
+ <!-- 비디오 카드 1 -->
196
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up">
197
+ <div class="relative">
198
+ <img src="http://static.photos/technology/320x240/10" alt="비디오 썸네일" class="w-full h-48 object-cover">
199
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
200
+ 25:42
201
+ </div>
202
+ </div>
203
+ <div class="p-5">
204
+ <h3 class="text-xl font-bold mb-2">최신 영화 리뷰 - 2023년 10월</h3>
205
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">이번 달에 개봉한 영화들을 전문가의 시선으로 분석합니다</p>
206
+ <div class="flex justify-between items-center">
207
+ <span class="text-red-400 font-bold">120K 회 시청</span>
208
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
209
+ 시청하기
210
+ </button>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- 비디오 카드 2 -->
216
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
217
+ <div class="relative">
218
+ <img src="http://static.photos/people/320x240/11" alt="비디오 썸네일" class="w-full h-48 object-cover">
219
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
220
+ 18:35
221
+ </div>
222
+ </div>
223
+ <div class="p-5">
224
+ <h3 class="text-xl font-bold mb-2">K-POP 아이돌 인터뷰</h3>
225
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">최신 K-POP 아이돌과의 특별한 인터뷰 영상</p>
226
+ <div class="flex justify-between items-center">
227
+ <span class="text-red-400 font-bold">98K 회 시청</span>
228
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
229
+ 시청하기
230
+ </button>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- 비디오 카드 3 -->
236
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
237
+ <div class="relative">
238
+ <img src="http://static.photos/food/320x240/12" alt="비디오 썸네일" class="w-full h-48 object-cover">
239
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
240
+ 32:18
241
+ </div>
242
+ </div>
243
+ <div class="p-5">
244
+ <h3 class="text-xl font-bold mb-2">한국 전통 요리의 비밀</h3>
245
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">전문가와 함께하는 한국 전통 요리의 깊이 있는 이야기</p>
246
+ <div class="flex justify-between items-center">
247
+ <span class="text-red-400 font-bold">85K 회 시청</span>
248
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
249
+ 시청하기
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- 비디오 카드 4 -->
256
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
257
+ <div class="relative">
258
+ <img src="http://static.photos/travel/320x240/13" alt="비디오 썸네일" class="w-full h-48 object-cover">
259
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
260
+ 42:05
261
+ </div>
262
+ </div>
263
+ <div class="p-5">
264
+ <h3 class="text-xl font-bold mb-2">한국의 숨은 명소 탐방</h3>
265
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">관광객들이 잘 모르는 한국의 아름다운 자연과 문화 유적지</p>
266
+ <div class="flex justify-between items-center">
267
+ <span class="text-red-400 font-bold">156K 회 시청</span>
268
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
269
+ 시청하기
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- 비디오 카드 5 -->
276
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
277
+ <div class="relative">
278
+ <img src="http://static.photos/technology/320x240/14" alt="비디오 썸네일" class="w-full h-48 object-cover">
279
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
280
+ 15:22
281
+ </div>
282
+ </div>
283
+ <div class="p-5">
284
+ <h3 class="text-xl font-bold mb-2">최신 기술 트렌드 분석</h3>
285
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">2023년 가장 주목받은 기술 트렌드와 미래 예측</p>
286
+ <div class="flex justify-between items-center">
287
+ <span class="text-red-400 font-bold">72K 회 시청</span>
288
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
289
+ 시청하기
290
+ </button>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- 비디오 카드 6 -->
296
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="500">
297
+ <div class="relative">
298
+ <img src="http://static.photos/people/320x240/15" alt="비디오 썸네일" class="w-full h-48 object-cover">
299
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
300
+ 28:47
301
+ </div>
302
+ </div>
303
+ <div class="p-5">
304
+ <h3 class="text-xl font-bold mb-2">유명 인플루언서 인터뷰</h3>
305
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">SNS에서 가장 인기 있는 인플루언서와의 특별한 대화</p>
306
+ <div class="flex justify-between items-center">
307
+ <span class="text-red-400 font-bold">210K 회 시청</span>
308
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
309
+ 시청하기
310
+ </button>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- 비디오 카드 7 -->
316
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="600">
317
+ <div class="relative">
318
+ <img src="http://static.photos/food/320x240/16" alt="비디오 썸네일" class="w-full h-48 object-cover">
319
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
320
+ 35:12
321
+ </div>
322
+ </div>
323
+ <div class="p-5">
324
+ <h3 class="text-xl font-bold mb-2">세계 미식 여행기</h3>
325
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">세계 각국의 특색 있는 음식과 문화 체험기</p>
326
+ <div class="flex justify-between items-center">
327
+ <span class="text-red-400 font-bold">93K 회 시청</span>
328
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
329
+ 시청하기
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- 비디오 카드 8 -->
336
+ <div class="video-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="700">
337
+ <div class="relative">
338
+ <img src="http://static.photos/travel/320x240/17" alt="비디오 썸네일" class="w-full h-48 object-cover">
339
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
340
+ 48:33
341
+ </div>
342
+ </div>
343
+ <div class="p-5">
344
+ <h3 class="text-xl font-bold mb-2">겨울 여행 추천지</h3>
345
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">겨울철에 가보면 후��� 없는 아름다운 여행지 추천</p>
346
+ <div class="flex justify-between items-center">
347
+ <span class="text-red-400 font-bold">134K 회 시청</span>
348
+ <button class="bg-gradient-to-r from-red-600 to-yellow-500 hover:from-red-700 hover:to-yellow-600 text-white px-4 py-2 rounded-lg text-sm transition">
349
+ 시청하기
350
+ </button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- 페이지네이션 -->
357
+ <div class="flex justify-center mt-16">
358
+ <nav class="flex gap-2">
359
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">이전</a>
360
+ <a href="#" class="px-4 py-2 bg-red-600 text-white rounded-lg font-bold">1</a>
361
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">2</a>
362
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">3</a>
363
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">다음</a>
364
+ </nav>
365
+ </div>
366
+ </main>
367
+
368
+ <!-- 푸터 -->
369
+ <footer class="bg-black bg-opacity-50 backdrop-blur-lg py-10 px-4">
370
+ <div class="container mx-auto">
371
+ <div class="flex flex-col md:flex-row justify-between items-center">
372
+ <div class="mb-6 md:mb-0">
373
+ <div class="flex items-center">
374
+ <i data-feather="youtube" class="mr-2 text-red-500"></i>
375
+ <h2 class="text-2xl font-bold">은다은TV</h2>
376
+ </div>
377
+ <p class="mt-2 text-gray-400">다양한 콘텐츠를 한 곳에서</p>
378
+ </div>
379
+
380
+ <div class="flex flex-wrap justify-center gap-6">
381
+ <a href="#" class="text-gray-400 hover:text-white transition">이용약관</a>
382
+ <a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a>
383
+ <a href="#" class="text-gray-400 hover:text-white transition">고객센터</a>
384
+ <a href="#" class="text-gray-400 hover:text-white transition">회사소개</a>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500">
389
+ <p>&copy; 2023 은다은TV. All rights reserved.</p>
390
+ </div>
391
+ </div>
392
+ </footer>
393
+
394
+ <script>
395
+ AOS.init({
396
+ duration: 800,
397
+ easing: 'ease-in-out',
398
+ once: true
399
+ });
400
+
401
+ feather.replace();
402
+
403
+ // 카테고리 버튼 클릭 이벤트
404
+ document.querySelectorAll('.category-btn').forEach(button => {
405
+ button.addEventListener('click', function() {
406
+ document.querySelectorAll('.category-btn').forEach(btn => {
407
+ btn.classList.remove('active');
408
+ });
409
+ this.classList.add('active');
410
+ });
411
+ });
412
+ </script>
413
+ </body>
414
+ </html>
index.html CHANGED
@@ -58,9 +58,9 @@
58
  <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500">쉼터홈</h1>
59
  </div>
60
  <nav class="flex flex-wrap justify-center gap-4">
61
- <a href="#" class="hover:text-yellow-300 transition">홈</a>
62
- <a href="#" class="hover:text-yellow-300 transition">음악</a>
63
- <a href="#" class="hover:text-yellow-300 transition">영화</a>
64
  <a href="#" class="hover:text-yellow-300 transition">TV</a>
65
  <a href="#" class="hover:text-yellow-300 transition">프리미엄</a>
66
  </nav>
@@ -141,7 +141,7 @@
141
  <h2 class="text-2xl font-bold">조선영화</h2>
142
  </div>
143
  <p class="text-gray-300 mb-6">조선 시대를 배경으로 한 영화들을 한 곳에서 감상하세요</p>
144
- <a href="https://toxjals.com/movie/" target="_blank" class="inline-flex items-center text-red-400 hover:text-red-300 font-medium">
145
  방문하기
146
  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
147
  </a>
 
58
  <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500">쉼터홈</h1>
59
  </div>
60
  <nav class="flex flex-wrap justify-center gap-4">
61
+ <a href="index.html" class="hover:text-yellow-300 transition">홈</a>
62
+ <a href="music.html" class="hover:text-yellow-300 transition">음악</a>
63
+ <a href="movie.html" class="hover:text-yellow-300 transition font-bold">영화</a>
64
  <a href="#" class="hover:text-yellow-300 transition">TV</a>
65
  <a href="#" class="hover:text-yellow-300 transition">프리미엄</a>
66
  </nav>
 
141
  <h2 class="text-2xl font-bold">조선영화</h2>
142
  </div>
143
  <p class="text-gray-300 mb-6">조선 시대를 배경으로 한 영화들을 한 곳에서 감상하세요</p>
144
+ <a href="movie.html" class="inline-flex items-center text-red-400 hover:text-red-300 font-medium">
145
  방문하기
146
  <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
147
  </a>
membership.html ADDED
@@ -0,0 +1,294 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>맴버십 가입 - 쉼터홈</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://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ body {
16
+ font-family: 'Noto Sans KR', sans-serif;
17
+ background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
18
+ background-size: 400% 400%;
19
+ animation: gradientBG 15s ease infinite;
20
+ }
21
+
22
+ @keyframes gradientBG {
23
+ 0% { background-position: 0% 50%; }
24
+ 50% { background-position: 100% 50%; }
25
+ 100% { background-position: 0% 50%; }
26
+ }
27
+
28
+ .plan-card {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .plan-card:hover {
33
+ transform: translateY(-10px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
35
+ }
36
+
37
+ .glow {
38
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
39
+ }
40
+
41
+ .form-input {
42
+ background: rgba(255, 255, 255, 0.1);
43
+ border: 1px solid rgba(255, 255, 255, 0.2);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .form-input:focus {
48
+ background: rgba(255, 255, 255, 0.15);
49
+ border-color: #f59e0b;
50
+ outline: none;
51
+ }
52
+
53
+ .feature-item {
54
+ transition: all 0.2s ease;
55
+ }
56
+
57
+ .feature-item:hover {
58
+ transform: translateX(5px);
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="min-h-screen text-white">
63
+ <!-- 헤더 -->
64
+ <header class="py-6 px-4 sm:px-8 bg-black bg-opacity-30 backdrop-blur-md">
65
+ <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
66
+ <div class="flex items-center mb-4 sm:mb-0">
67
+ <i data-feather="star" class="mr-2 text-yellow-400"></i>
68
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500">맴버십 가입</h1>
69
+ </div>
70
+ <nav class="flex flex-wrap justify-center gap-4">
71
+ <a href="index.html" class="hover:text-yellow-300 transition">홈</a>
72
+ <a href="music.html" class="hover:text-yellow-300 transition">음악</a>
73
+ <a href="movie.html" class="hover:text-yellow-300 transition">영화</a>
74
+ <a href="#" class="hover:text-yellow-300 transition">TV</a>
75
+ <a href="#" class="hover:text-yellow-300 transition font-bold">맴버십</a>
76
+ </nav>
77
+ </div>
78
+ </header>
79
+
80
+ <!-- 히어로 섹션 -->
81
+ <section class="py-16 px-4 text-center" data-aos="fade-up">
82
+ <div class="container mx-auto max-w-4xl">
83
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">프리미엄 멤버십 가입</h1>
84
+ <p class="text-xl mb-10 text-gray-200">특별한 혜택과 콘텐츠로 더욱 풍요로운 경험을 제공합니다</p>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- 멤버십 플랜 섹션 -->
89
+ <section class="container mx-auto px-4 mb-20">
90
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
91
+ <!-- 베이직 플랜 -->
92
+ <div class="plan-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl p-6 border border-gray-700" data-aos="fade-up" data-aos-delay="100">
93
+ <h3 class="text-2xl font-bold mb-4 text-center">베이직</h3>
94
+ <div class="text-4xl font-bold mb-6 text-center">무료</div>
95
+ <ul class="mb-8 space-y-3">
96
+ <li class="feature-item flex items-start">
97
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
98
+ <span>기본 콘텐츠 접근</span>
99
+ </li>
100
+ <li class="feature-item flex items-start">
101
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
102
+ <span>광고 포함</span>
103
+ </li>
104
+ <li class="feature-item flex items-start">
105
+ <i data-feather="x-circle" class="text-red-500 mr-3 mt-1 flex-shrink-0"></i>
106
+ <span>HD 화질</span>
107
+ </li>
108
+ <li class="feature-item flex items-start">
109
+ <i data-feather="x-circle" class="text-red-500 mr-3 mt-1 flex-shrink-0"></i>
110
+ <span>오프라인 다운로드</span>
111
+ </li>
112
+ </ul>
113
+ <button class="w-full py-3 bg-gray-700 hover:bg-gray-600 rounded-lg transition font-bold">무료로 시작하기</button>
114
+ </div>
115
+
116
+ <!-- 스탠다드 플랜 -->
117
+ <div class="plan-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl p-6 border-2 border-yellow-500 glow relative" data-aos="fade-up" data-aos-delay="200">
118
+ <div class="absolute top-0 right-0 bg-yellow-500 text-black text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">추천</div>
119
+ <h3 class="text-2xl font-bold mb-4 text-center">스탠다드</h3>
120
+ <div class="text-4xl font-bold mb-6 text-center">월 9,900원</div>
121
+ <ul class="mb-8 space-y-3">
122
+ <li class="feature-item flex items-start">
123
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
124
+ <span>모든 콘텐츠 접근</span>
125
+ </li>
126
+ <li class="feature-item flex items-start">
127
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
128
+ <span>광고 없음</span>
129
+ </li>
130
+ <li class="feature-item flex items-start">
131
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
132
+ <span>HD 화질</span>
133
+ </li>
134
+ <li class="feature-item flex items-start">
135
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
136
+ <span>오프라인 다운로드</span>
137
+ </li>
138
+ <li class="feature-item flex items-start">
139
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
140
+ <span>동시 접속 2개 기기</span>
141
+ </li>
142
+ </ul>
143
+ <button class="w-full py-3 bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 rounded-lg transition font-bold">구매하기</button>
144
+ </div>
145
+
146
+ <!-- 프리미엄 플랜 -->
147
+ <div class="plan-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl p-6 border border-purple-700" data-aos="fade-up" data-aos-delay="300">
148
+ <h3 class="text-2xl font-bold mb-4 text-center">프리미엄</h3>
149
+ <div class="text-4xl font-bold mb-6 text-center">월 14,900원</div>
150
+ <ul class="mb-8 space-y-3">
151
+ <li class="feature-item flex items-start">
152
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
153
+ <span>스탠다드 모든 혜택</span>
154
+ </li>
155
+ <li class="feature-item flex items-start">
156
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
157
+ <span>4K UHD 화질</span>
158
+ </li>
159
+ <li class="feature-item flex items-start">
160
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
161
+ <span>동시 접속 4개 기기</span>
162
+ </li>
163
+ <li class="feature-item flex items-start">
164
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
165
+ <span>조기 공개 콘텐츠</span>
166
+ </li>
167
+ <li class="feature-item flex items-start">
168
+ <i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
169
+ <span>프리미엄 고객 지원</span>
170
+ </li>
171
+ </ul>
172
+ <button class="w-full py-3 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 rounded-lg transition font-bold">구매하기</button>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- 결제 폼 섹션 -->
178
+ <section class="container mx-auto px-4 mb-20">
179
+ <div class="max-w-2xl mx-auto bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl p-8" data-aos="fade-up">
180
+ <h2 class="text-3xl font-bold mb-8 text-center">결제 정보 입력</h2>
181
+
182
+ <form>
183
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
184
+ <div>
185
+ <label class="block mb-2 font-medium">이름</label>
186
+ <input type="text" class="form-input w-full p-3 rounded-lg" placeholder="이름을 입력하세요">
187
+ </div>
188
+ <div>
189
+ <label class="block mb-2 font-medium">이메일</label>
190
+ <input type="email" class="form-input w-full p-3 rounded-lg" placeholder="이메일을 입력하세요">
191
+ </div>
192
+ </div>
193
+
194
+ <div class="mb-6">
195
+ <label class="block mb-2 font-medium">카드 번호</label>
196
+ <input type="text" class="form-input w-full p-3 rounded-lg" placeholder="카드 번호를 입력하세요">
197
+ </div>
198
+
199
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
200
+ <div class="md:col-span-2">
201
+ <label class="block mb-2 font-medium">만료일</label>
202
+ <div class="grid grid-cols-2 gap-4">
203
+ <input type="text" class="form-input w-full p-3 rounded-lg" placeholder="MM">
204
+ <input type="text" class="form-input w-full p-3 rounded-lg" placeholder="YY">
205
+ </div>
206
+ </div>
207
+ <div>
208
+ <label class="block mb-2 font-medium">CVC</label>
209
+ <input type="text" class="form-input w-full p-3 rounded-lg" placeholder="CVC">
210
+ </div>
211
+ </div>
212
+
213
+ <div class="mb-8">
214
+ <label class="flex items-center">
215
+ <input type="checkbox" class="form-input mr-3 w-5 h-5">
216
+ <span>이용 약관과 개인정보 처리방침에 동의합니다</span>
217
+ </label>
218
+ </div>
219
+
220
+ <button type="submit" class="w-full py-4 bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 rounded-lg transition font-bold text-lg">
221
+ 결제하기
222
+ </button>
223
+ </form>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- FAQ 섹션 -->
228
+ <section class="container mx-auto px-4 mb-20">
229
+ <h2 class="text-3xl font-bold mb-12 text-center">자주 묻는 질문</h2>
230
+
231
+ <div class="max-w-3xl mx-auto space-y-6">
232
+ <div class="bg-black bg-opacity-30 backdrop-blur-lg rounded-xl p-6" data-aos="fade-up">
233
+ <h3 class="text-xl font-bold mb-3 flex items-center">
234
+ <i data-feather="chevron-right" class="mr-3 text-yellow-400"></i>
235
+ 멤버십 해지는 어떻게 하나요?
236
+ </h3>
237
+ <p class="text-gray-300">마이페이지 > 멤버십 관리에서 언제든지 해지할 수 있습니다. 해지 시점까지 이용한 요금은 정상 청구되며, 다음 결제일부터 자동 갱신이 중지됩니다.</p>
238
+ </div>
239
+
240
+ <div class="bg-black bg-opacity-30 backdrop-blur-lg rounded-xl p-6" data-aos="fade-up" data-aos-delay="100">
241
+ <h3 class="text-xl font-bold mb-3 flex items-center">
242
+ <i data-feather="chevron-right" class="mr-3 text-yellow-400"></i>
243
+ 환불 정책은 어떻게 되나요?
244
+ </h3>
245
+ <p class="text-gray-300">멤버십 가입 후 7일 이내에 청약철회가 가능하며, 미사용 기간에 대한 금액은 전액 환불됩니다. 7일 이후에는 미사용 기간에 대한 일할 계산으로 환불됩니다.</p>
246
+ </div>
247
+
248
+ <div class="bg-black bg-opacity-30 backdrop-blur-lg rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
249
+ <h3 class="text-xl font-bold mb-3 flex items-center">
250
+ <i data-feather="chevron-right" class="mr-3 text-yellow-400"></i>
251
+ 여러 기기에서 동시 시청이 가능한가요?
252
+ </h3>
253
+ <p class="text-gray-300">스탠다드 플랜은 2개 기기, 프리미엄 플랜은 4개 기기에서 동시 시청이 가능합니다. 베이직 플랜은 동시 시청이 제한됩니다.</p>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- 푸터 -->
259
+ <footer class="bg-black bg-opacity-50 backdrop-blur-lg py-10 px-4">
260
+ <div class="container mx-auto">
261
+ <div class="flex flex-col md:flex-row justify-between items-center">
262
+ <div class="mb-6 md:mb-0">
263
+ <div class="flex items-center">
264
+ <i data-feather="star" class="mr-2 text-yellow-400"></i>
265
+ <h2 class="text-2xl font-bold">맴버십 가입</h2>
266
+ </div>
267
+ <p class="mt-2 text-gray-400">프리미엄 경험을 위한 첫 걸음</p>
268
+ </div>
269
+
270
+ <div class="flex flex-wrap justify-center gap-6">
271
+ <a href="#" class="text-gray-400 hover:text-white transition">이용약관</a>
272
+ <a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a>
273
+ <a href="#" class="text-gray-400 hover:text-white transition">고객센터</a>
274
+ <a href="#" class="text-gray-400 hover:text-white transition">회사소개</a>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500">
279
+ <p>&copy; 2023 쉼터홈. All rights reserved.</p>
280
+ </div>
281
+ </div>
282
+ </footer>
283
+
284
+ <script>
285
+ AOS.init({
286
+ duration: 800,
287
+ easing: 'ease-in-out',
288
+ once: true
289
+ });
290
+
291
+ feather.replace();
292
+ </script>
293
+ </body>
294
+ </html>
movie.html ADDED
@@ -0,0 +1,325 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>조선영화 - 쉼터홈</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://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
10
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
11
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+ <style>
15
+ body {
16
+ font-family: 'Noto Sans KR', sans-serif;
17
+ background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
18
+ background-size: 400% 400%;
19
+ animation: gradientBG 15s ease infinite;
20
+ }
21
+
22
+ @keyframes gradientBG {
23
+ 0% { background-position: 0% 50%; }
24
+ 50% { background-position: 100% 50%; }
25
+ 100% { background-position: 0% 50%; }
26
+ }
27
+
28
+ .movie-card {
29
+ transition: all 0.3s ease;
30
+ }
31
+
32
+ .movie-card:hover {
33
+ transform: translateY(-10px);
34
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
35
+ }
36
+
37
+ .glow {
38
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
39
+ }
40
+
41
+ .category-btn {
42
+ transition: all 0.2s ease;
43
+ }
44
+
45
+ .category-btn:hover, .category-btn.active {
46
+ background: linear-gradient(to right, #f59e0b, #ef4444);
47
+ color: white;
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="min-h-screen text-white">
52
+ <!-- 헤더 -->
53
+ <header class="py-6 px-4 sm:px-8 bg-black bg-opacity-30 backdrop-blur-md">
54
+ <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
55
+ <div class="flex items-center mb-4 sm:mb-0">
56
+ <i data-feather="film" class="mr-2 text-yellow-400"></i>
57
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-red-500">조선영화</h1>
58
+ </div>
59
+ <nav class="flex flex-wrap justify-center gap-4">
60
+ <a href="index.html" class="hover:text-yellow-300 transition">홈</a>
61
+ <a href="music.html" class="hover:text-yellow-300 transition">음악</a>
62
+ <a href="#" class="hover:text-yellow-300 transition font-bold">영화</a>
63
+ <a href="#" class="hover:text-yellow-300 transition">TV</a>
64
+ <a href="#" class="hover:text-yellow-300 transition">프리미엄</a>
65
+ </nav>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- 히어로 섹션 -->
70
+ <section class="py-16 px-4 text-center" data-aos="fade-up">
71
+ <div class="container mx-auto max-w-4xl">
72
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">조선 시대 영화관</h1>
73
+ <p class="text-xl mb-10 text-gray-200">조선 시대를 배경으로 한 영화들을 한 곳에서 감상하세요</p>
74
+ <div class="flex flex-wrap justify-center gap-4">
75
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
76
+ 최신 영화 보기
77
+ </button>
78
+ <button class="bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm border border-white border-opacity-30 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300">
79
+ 추천 영화
80
+ </button>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- 영화 카테고리 필터 -->
86
+ <section class="container mx-auto px-4 mb-12">
87
+ <div class="flex flex-wrap justify-center gap-3">
88
+ <button class="category-btn active px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">전체</button>
89
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">사극</button>
90
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">드라마</button>
91
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">로맨스</button>
92
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">액션</button>
93
+ <button class="category-btn px-6 py-2 rounded-full bg-white bg-opacity-10 backdrop-blur-sm">코미디</button>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- 영화 그리드 -->
98
+ <main class="container mx-auto px-4 pb-20">
99
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
100
+ <!-- 영화 카��� 1 -->
101
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up">
102
+ <div class="relative">
103
+ <img src="http://static.photos/movie/320x480/1" alt="영화 포스터" class="w-full h-64 object-cover">
104
+ <div class="absolute top-3 right-3 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">
105
+ NEW
106
+ </div>
107
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
108
+ 2023
109
+ </div>
110
+ </div>
111
+ <div class="p-5">
112
+ <h3 class="text-xl font-bold mb-2">왕의 남자</h3>
113
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 왕과 그의 곁을 지키는 남자의 이야기를 그린 사극 드라마</p>
114
+ <div class="flex justify-between items-center">
115
+ <span class="text-yellow-400 font-bold">9.2</span>
116
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
117
+ 보러가기
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- 영화 카드 2 -->
124
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
125
+ <div class="relative">
126
+ <img src="http://static.photos/movie/320x480/2" alt="영화 포스터" class="w-full h-64 object-cover">
127
+ <div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded">
128
+ HOT
129
+ </div>
130
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
131
+ 2022
132
+ </div>
133
+ </div>
134
+ <div class="p-5">
135
+ <h3 class="text-xl font-bold mb-2">춘향전</h3>
136
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 명작 소설을 영화화한 로맨스 사극</p>
137
+ <div class="flex justify-between items-center">
138
+ <span class="text-yellow-400 font-bold">8.7</span>
139
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
140
+ 보러가기
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- 영화 카드 3 -->
147
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
148
+ <div class="relative">
149
+ <img src="http://static.photos/movie/320x480/3" alt="영화 포스터" class="w-full h-64 object-cover">
150
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
151
+ 2021
152
+ </div>
153
+ </div>
154
+ <div class="p-5">
155
+ <h3 class="text-xl font-bold mb-2">허생전</h3>
156
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 유학자 허생의 삶을 조명한 역사 드라마</p>
157
+ <div class="flex justify-between items-center">
158
+ <span class="text-yellow-400 font-bold">8.5</span>
159
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
160
+ 보러가기
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- 영화 카드 4 -->
167
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
168
+ <div class="relative">
169
+ <img src="http://static.photos/movie/320x480/4" alt="영화 포스터" class="w-full h-64 object-cover">
170
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
171
+ 2020
172
+ </div>
173
+ </div>
174
+ <div class="p-5">
175
+ <h3 class="text-xl font-bold mb-2">홍길동전</h3>
176
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 의적 홍길동의 활약상을 그린 액션 사극</p>
177
+ <div class="flex justify-between items-center">
178
+ <span class="text-yellow-400 font-bold">8.9</span>
179
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
180
+ 보러가기
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- 영화 카드 5 -->
187
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="400">
188
+ <div class="relative">
189
+ <img src="http://static.photos/movie/320x480/5" alt="영화 포스터" class="w-full h-64 object-cover">
190
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
191
+ 2019
192
+ </div>
193
+ </div>
194
+ <div class="p-5">
195
+ <h3 class="text-xl font-bold mb-2">변강쇠</h3>
196
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 평민의 삶과 사랑을 그린 드라마</p>
197
+ <div class="flex justify-between items-center">
198
+ <span class="text-yellow-400 font-bold">8.3</span>
199
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
200
+ 보러가기
201
+ </button>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- 영화 카드 6 -->
207
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="500">
208
+ <div class="relative">
209
+ <img src="http://static.photos/movie/320x480/6" alt="영화 포스터" class="w-full h-64 object-cover">
210
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
211
+ 2018
212
+ </div>
213
+ </div>
214
+ <div class="p-5">
215
+ <h3 class="text-xl font-bold mb-2">장화신은 고양이</h3>
216
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 판타지 로맨스 영화</p>
217
+ <div class="flex justify-between items-center">
218
+ <span class="text-yellow-400 font-bold">8.1</span>
219
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
220
+ 보러가기
221
+ </button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- 영화 카드 7 -->
227
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="600">
228
+ <div class="relative">
229
+ <img src="http://static.photos/movie/320x480/7" alt="영화 포스터" class="w-full h-64 object-cover">
230
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
231
+ 2017
232
+ </div>
233
+ </div>
234
+ <div class="p-5">
235
+ <h3 class="text-xl font-bold mb-2">밀양</h3>
236
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대를 배경으로 한 심리 드라마</p>
237
+ <div class="flex justify-between items-center">
238
+ <span class="text-yellow-400 font-bold">8.6</span>
239
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
240
+ 보러가기
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- 영화 카드 8 -->
247
+ <div class="movie-card bg-black bg-opacity-40 backdrop-blur-lg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="700">
248
+ <div class="relative">
249
+ <img src="http://static.photos/movie/320x480/8" alt="영화 포스터" class="w-full h-64 object-cover">
250
+ <div class="absolute bottom-3 left-3 bg-black bg-opacity-70 px-2 py-1 rounded text-sm">
251
+ 2016
252
+ </div>
253
+ </div>
254
+ <div class="p-5">
255
+ <h3 class="text-xl font-bold mb-2">내 사랑 내 곁에</h3>
256
+ <p class="text-gray-300 text-sm mb-4 line-clamp-2">조선시대 사랑 이야기를 그린 멜로드라마</p>
257
+ <div class="flex justify-between items-center">
258
+ <span class="text-yellow-400 font-bold">8.4</span>
259
+ <button class="bg-gradient-to-r from-yellow-500 to-red-600 hover:from-yellow-600 hover:to-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
260
+ 보러가기
261
+ </button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- 페이지네이션 -->
268
+ <div class="flex justify-center mt-16">
269
+ <nav class="flex gap-2">
270
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">이전</a>
271
+ <a href="#" class="px-4 py-2 bg-yellow-500 text-black rounded-lg font-bold">1</a>
272
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">2</a>
273
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">3</a>
274
+ <a href="#" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30">다음</a>
275
+ </nav>
276
+ </div>
277
+ </main>
278
+
279
+ <!-- 푸터 -->
280
+ <footer class="bg-black bg-opacity-50 backdrop-blur-lg py-10 px-4">
281
+ <div class="container mx-auto">
282
+ <div class="flex flex-col md:flex-row justify-between items-center">
283
+ <div class="mb-6 md:mb-0">
284
+ <div class="flex items-center">
285
+ <i data-feather="film" class="mr-2 text-yellow-400"></i>
286
+ <h2 class="text-2xl font-bold">조선영화</h2>
287
+ </div>
288
+ <p class="mt-2 text-gray-400">쉬운 영화 감상, 풍부한 콘텐츠</p>
289
+ </div>
290
+
291
+ <div class="flex flex-wrap justify-center gap-6">
292
+ <a href="#" class="text-gray-400 hover:text-white transition">이용약관</a>
293
+ <a href="#" class="text-gray-400 hover:text-white transition">개인정보처리방침</a>
294
+ <a href="#" class="text-gray-400 hover:text-white transition">고객센터</a>
295
+ <a href="#" class="text-gray-400 hover:text-white transition">회사소개</a>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500">
300
+ <p>&copy; 2023 조선영화. All rights reserved.</p>
301
+ </div>
302
+ </div>
303
+ </footer>
304
+
305
+ <script>
306
+ AOS.init({
307
+ duration: 800,
308
+ easing: 'ease-in-out',
309
+ once: true
310
+ });
311
+
312
+ feather.replace();
313
+
314
+ // 카테고리 버튼 클릭 이벤트
315
+ document.querySelectorAll('.category-btn').forEach(button => {
316
+ button.addEventListener('click', function() {
317
+ document.querySelectorAll('.category-btn').forEach(btn => {
318
+ btn.classList.remove('active');
319
+ });
320
+ this.classList.add('active');
321
+ });
322
+ });
323
+ </script>
324
+ </body>
325
+ </html>
prompts.txt CHANGED
@@ -5,4 +5,7 @@
5
  은다은TV https://www.youtube.com/@%EC%9D%80%EB%8B%A4%EC%9D%80%ED%8B%B0%EB%B9%84
6
  한국영화 보기 https://theboda4.com/
7
  버튼들이 있는 사이트 만들어줘 프리미엄으로 !
8
- 모바일에서도 많이 사용하니 모바일에서도 친화적으로 !
 
 
 
 
5
  은다은TV https://www.youtube.com/@%EC%9D%80%EB%8B%A4%EC%9D%80%ED%8B%B0%EB%B9%84
6
  한국영화 보기 https://theboda4.com/
7
  버튼들이 있는 사이트 만들어줘 프리미엄으로 !
8
+ 모바일에서도 많이 사용하니 모바일에서도 친화적으로 !
9
+ 조선영화 페이지 만들어줘
10
+ 맴버십 가입 페이지 만들어줘
11
+ 은다은TV 페이지도 줘 !