Hugging Face's logo

Spaces:
nkjoy
/
dday
Running

App Files Community
nkjoy commited on
Commit
09a8f56
·
verified ·
1 Parent(s): d8bb129

디데이 관리 페이지 만들자. 디데이 등록하면 남은날짜 등등 알려주고 보여주자 디자인은 커플전용이니 알콩달콩 이쁘게. 프리미엄으로 - Initial Deployment

Browse files
Files changed (5) hide show
  1. README.md +6 -4
  2. add.html +147 -0
  3. index.html +270 -18
  4. premium.html +291 -0
  5. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dday
3
- emoji: 🐨
4
  colorFrom: blue
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dday
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
add.html ADDED
@@ -0,0 +1,147 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>디데이 추가 | Sweet D-Day</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=Nanum+Pen+Script&family=Poor+Story&display=swap');
15
+ .love-font {
16
+ font-family: 'Nanum Pen Script', cursive;
17
+ }
18
+ .count-font {
19
+ font-family: 'Poor Story', cursive;
20
+ }
21
+ .gradient-text {
22
+ background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-pink-50">
30
+ <div class="min-h-screen flex flex-col">
31
+ <!-- Header -->
32
+ <header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
33
+ <div class="container mx-auto flex justify-between items-center">
34
+ <a href="index.html" class="text-3xl love-font text-pink-600 flex items-center">
35
+ <i data-feather="heart" class="mr-2 text-red-500"></i>
36
+ Sweet D-Day
37
+ </a>
38
+ <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full hover:opacity-90 transition flex items-center">
39
+ <i data-feather="star" class="mr-2"></i>
40
+ 프리미엄
41
+ </button>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- Main Content -->
46
+ <main class="flex-1 flex items-center justify-center py-12 px-6">
47
+ <div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-lg w-full max-w-md" data-aos="zoom-in">
48
+ <h2 class="text-3xl love-font text-center mb-6 gradient-text">
49
+ <i data-feather="plus" class="mr-2"></i>
50
+ 새 디데이 추가
51
+ </h2>
52
+
53
+ <form class="space-y-6">
54
+ <div>
55
+ <label for="eventName" class="block text-lg love-font text-pink-600 mb-2">이벤트 이름</label>
56
+ <input type="text" id="eventName" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 count-font" placeholder="예: 첫 만남, 100일, 생일">
57
+ </div>
58
+
59
+ <div>
60
+ <label for="eventDate" class="block text-lg love-font text-pink-600 mb-2">날짜 선택</label>
61
+ <input type="date" id="eventDate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-pink-500 count-font">
62
+ </div>
63
+
64
+ <div>
65
+ <label class="block text-lg love-font text-pink-600 mb-2">디자인 선택</label>
66
+ <div class="grid grid-cols-3 gap-3">
67
+ <label class="cursor-pointer">
68
+ <input type="radio" name="design" class="sr-only peer" checked>
69
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-pink-500 bg-pink-100 flex flex-col items-center">
70
+ <div class="w-8 h-8 rounded-full bg-pink-500 mb-2"></div>
71
+ <span class="count-font text-sm">핑크</span>
72
+ </div>
73
+ </label>
74
+ <label class="cursor-pointer">
75
+ <input type="radio" name="design" class="sr-only peer">
76
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-purple-500 bg-purple-100 flex flex-col items-center">
77
+ <div class="w-8 h-8 rounded-full bg-purple-500 mb-2"></div>
78
+ <span class="count-font text-sm">퍼플</span>
79
+ </div>
80
+ </label>
81
+ <label class="cursor-pointer">
82
+ <input type="radio" name="design" class="sr-only peer">
83
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-blue-500 bg-blue-100 flex flex-col items-center">
84
+ <div class="w-8 h-8 rounded-full bg-blue-500 mb-2"></div>
85
+ <span class="count-font text-sm">블루</span>
86
+ </div>
87
+ </label>
88
+ <label class="cursor-pointer">
89
+ <input type="radio" name="design" class="sr-only peer">
90
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-red-500 bg-red-100 flex flex-col items-center">
91
+ <div class="w-8 h-8 rounded-full bg-red-500 mb-2"></div>
92
+ <span class="count-font text-sm">레드</span>
93
+ </div>
94
+ </label>
95
+ <label class="cursor-pointer">
96
+ <input type="radio" name="design" class="sr-only peer">
97
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-green-500 bg-green-100 flex flex-col items-center">
98
+ <div class="w-8 h-8 rounded-full bg-green-500 mb-2"></div>
99
+ <span class="count-font text-sm">그린</span>
100
+ </div>
101
+ </label>
102
+ <label class="cursor-pointer">
103
+ <input type="radio" name="design" class="sr-only peer">
104
+ <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-yellow-500 bg-yellow-100 flex flex-col items-center">
105
+ <div class="w-8 h-8 rounded-full bg-yellow-500 mb-2"></div>
106
+ <span class="count-font text-sm">옐로우</span>
107
+ </div>
108
+ </label>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="pt-4">
113
+ <label class="inline-flex items-center">
114
+ <input type="checkbox" class="rounded border-pink-500 text-pink-600 shadow-sm focus:border-pink-500 focus:ring focus:ring-pink-200 focus:ring-opacity-50">
115
+ <span class="ml-2 count-font text-gray-600">프리미엄 디자인 적용</span>
116
+ </label>
117
+ </div>
118
+
119
+ <div class="flex space-x-4 pt-4">
120
+ <button type="button" onclick="window.location.href='index.html'" class="flex-1 px-4 py-3 border border-gray-300 rounded-lg count-font hover:bg-gray-100 transition">
121
+ 취소
122
+ </button>
123
+ <button type="submit" class="flex-1 px-4 py-3 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition count-font">
124
+ 저장하기
125
+ </button>
126
+ </div>
127
+ </form>
128
+ </div>
129
+ </main>
130
+
131
+ <!-- Footer -->
132
+ <footer class="bg-white bg-opacity-80 py-6 px-6">
133
+ <div class="container mx-auto text-center">
134
+ <p class="text-gray-600 count-font">
135
+ <i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
136
+ Sweet D-Day - 커플을 위한 특별한 디데이 관리 서비스
137
+ </p>
138
+ </div>
139
+ </footer>
140
+ </div>
141
+
142
+ <script>
143
+ AOS.init();
144
+ feather.replace();
145
+ </script>
146
+ </body>
147
+ </html>
index.html CHANGED
@@ -1,19 +1,271 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sweet D-Day | 커플을 위한 특별한 디데이</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
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Poor+Story&display=swap');
16
+ .love-font {
17
+ font-family: 'Nanum Pen Script', cursive;
18
+ }
19
+ .count-font {
20
+ font-family: 'Poor Story', cursive;
21
+ }
22
+ .heart-beat {
23
+ animation: heartbeat 1.5s ease-in-out infinite;
24
+ }
25
+ @keyframes heartbeat {
26
+ 0% { transform: scale(1); }
27
+ 25% { transform: scale(1.1); }
28
+ 50% { transform: scale(1); }
29
+ 75% { transform: scale(1.1); }
30
+ 100% { transform: scale(1); }
31
+ }
32
+ .gradient-text {
33
+ background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
34
+ -webkit-background-clip: text;
35
+ background-clip: text;
36
+ color: transparent;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-pink-50">
41
+ <!-- Vanta.js Background -->
42
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
43
+
44
+ <!-- Main Content -->
45
+ <div class="relative z-10 min-h-screen flex flex-col">
46
+ <!-- Header -->
47
+ <header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
48
+ <div class="container mx-auto flex justify-between items-center">
49
+ <h1 class="text-3xl love-font text-pink-600 flex items-center">
50
+ <i data-feather="heart" class="heart-beat mr-2 text-red-500"></i>
51
+ Sweet D-Day
52
+ </h1>
53
+ <div class="flex space-x-4">
54
+ <button class="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition flex items-center">
55
+ <i data-feather="plus" class="mr-2"></i>
56
+ 새 디데이
57
+ </button>
58
+ <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full hover:opacity-90 transition flex items-center">
59
+ <i data-feather="star" class="mr-2"></i>
60
+ 프리미엄
61
+ </button>
62
+ </div>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="py-16 px-6 text-center">
68
+ <div class="container mx-auto max-w-4xl" data-aos="fade-up">
69
+ <h2 class="text-5xl love-font mb-6 gradient-text">
70
+ 우리의 특별한 날을 기다리며
71
+ </h2>
72
+ <p class="text-xl text-gray-700 mb-8 count-font">
73
+ 사랑하는 연인과의 소중한 순간을 기억하고 기다려보세요
74
+ </p>
75
+ <div class="bg-white bg-opacity-80 rounded-2xl p-8 shadow-lg">
76
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
77
+ <div class="bg-pink-100 rounded-xl p-6 flex flex-col items-center">
78
+ <i data-feather="calendar" class="w-12 h-12 text-pink-500 mb-4"></i>
79
+ <h3 class="text-xl love-font text-pink-600 mb-2">디데이 등록</h3>
80
+ <p class="text-gray-600 count-font text-center">특별한 날을 등록하고 카운트다운을 시작하세요</p>
81
+ </div>
82
+ <div class="bg-purple-100 rounded-xl p-6 flex flex-col items-center">
83
+ <i data-feather="clock" class="w-12 h-12 text-purple-500 mb-4"></i>
84
+ <h3 class="text-xl love-font text-purple-600 mb-2">실시간 카운트</h3>
85
+ <p class="text-gray-600 count-font text-center">정확한 시간 단위로 남은 시간을 확인하세요</p>
86
+ </div>
87
+ <div class="bg-red-100 rounded-xl p-6 flex flex-col items-center">
88
+ <i data-feather="gift" class="w-12 h-12 text-red-500 mb-4"></i>
89
+ <h3 class="text-xl love-font text-red-600 mb-2">추억 공유</h3>
90
+ <p class="text-gray-600 count-font text-center">사진과 메모로 추억을 기록하고 공유하세요</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </section>
96
+
97
+ <!-- D-Day List -->
98
+ <section class="py-12 px-6 flex-1">
99
+ <div class="container mx-auto max-w-6xl">
100
+ <h2 class="text-3xl love-font text-pink-600 mb-8 text-center" data-aos="fade-up">
101
+ <i data-feather="list" class="mr-2"></i>
102
+ 우리의 디데이 목록
103
+ </h2>
104
+
105
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
106
+ <!-- D-Day Item 1 -->
107
+ <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-md hover:shadow-lg transition" data-aos="zoom-in">
108
+ <div class="flex justify-between items-start mb-4">
109
+ <h3 class="text-2xl love-font text-pink-600">첫 만남</h3>
110
+ <span class="bg-pink-100 text-pink-600 px-3 py-1 rounded-full text-sm count-font">D-128</span>
111
+ </div>
112
+ <p class="text-gray-500 count-font mb-4">2023년 5월 20일</p>
113
+ <div class="flex items-center mb-4">
114
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
115
+ <div class="bg-pink-500 h-2.5 rounded-full" style="width: 45%"></div>
116
+ </div>
117
+ <span class="ml-2 text-sm count-font text-gray-500">45%</span>
118
+ </div>
119
+ <div class="grid grid-cols-3 gap-2 text-center count-font">
120
+ <div class="bg-pink-50 p-2 rounded-lg">
121
+ <div class="text-2xl font-bold text-pink-600">128</div>
122
+ <div class="text-xs text-gray-500">일</div>
123
+ </div>
124
+ <div class="bg-pink-50 p-2 rounded-lg">
125
+ <div class="text-2xl font-bold text-pink-600">3</div>
126
+ <div class="text-xs text-gray-500">개월</div>
127
+ </div>
128
+ <div class="bg-pink-50 p-2 rounded-lg">
129
+ <div class="text-2xl font-bold text-pink-600">18</div>
130
+ <div class="text-xs text-gray-500">주</div>
131
+ </div>
132
+ </div>
133
+ <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
134
+ <button class="text-pink-500 hover:text-pink-700">
135
+ <i data-feather="edit"></i>
136
+ </button>
137
+ <button class="text-red-500 hover:text-red-700">
138
+ <i data-feather="trash-2"></i>
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- D-Day Item 2 -->
144
+ <div class="bg-white bg-opacity-90 rounded-2xl p-6 shadow-md hover:shadow-lg transition" data-aos="zoom-in" data-aos-delay="100">
145
+ <div class="flex justify-between items-start mb-4">
146
+ <h3 class="text-2xl love-font text-purple-600">100일</h3>
147
+ <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm count-font">D+32</span>
148
+ </div>
149
+ <p class="text-gray-500 count-font mb-4">2023년 8월 27일</p>
150
+ <div class="flex items-center mb-4">
151
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
152
+ <div class="bg-purple-500 h-2.5 rounded-full" style="width: 100%"></div>
153
+ </div>
154
+ <span class="ml-2 text-sm count-font text-gray-500">지난 날</span>
155
+ </div>
156
+ <div class="grid grid-cols-3 gap-2 text-center count-font">
157
+ <div class="bg-purple-50 p-2 rounded-lg">
158
+ <div class="text-2xl font-bold text-purple-600">32</div>
159
+ <div class="text-xs text-gray-500">일</div>
160
+ </div>
161
+ <div class="bg-purple-50 p-2 rounded-lg">
162
+ <div class="text-2xl font-bold text-purple-600">1</div>
163
+ <div class="text-xs text-gray-500">개월</div>
164
+ </div>
165
+ <div class="bg-purple-50 p-2 rounded-lg">
166
+ <div class="text-2xl font-bold text-purple-600">4</div>
167
+ <div class="text-xs text-gray-500">주</div>
168
+ </div>
169
+ </div>
170
+ <div class="mt-4 pt-4 border-t border-gray-100 flex justify-between">
171
+ <button class="text-purple-500 hover:text-purple-700">
172
+ <i data-feather="edit"></i>
173
+ </button>
174
+ <button class="text-red-500 hover:text-red-700">
175
+ <i data-feather="trash-2"></i>
176
+ </button>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Premium D-Day Item -->
181
+ <div class="bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl p-6 shadow-md hover:shadow-lg transition relative overflow-hidden" data-aos="zoom-in" data-aos-delay="200">
182
+ <div class="absolute top-2 right-2">
183
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs count-font flex items-center">
184
+ <i data-feather="star" class="w-3 h-3 mr-1"></i>
185
+ 프리미엄
186
+ </span>
187
+ </div>
188
+ <div class="flex justify-between items-start mb-4">
189
+ <h3 class="text-2xl love-font text-white">1주년</h3>
190
+ <span class="bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm count-font">D-237</span>
191
+ </div>
192
+ <p class="text-white text-opacity-80 count-font mb-4">2024년 5월 20일</p>
193
+ <div class="flex items-center mb-4">
194
+ <div class="w-full bg-white bg-opacity-30 rounded-full h-2.5">
195
+ <div class="bg-white h-2.5 rounded-full" style="width: 35%"></div>
196
+ </div>
197
+ <span class="ml-2 text-sm count-font text-white text-opacity-80">35%</span>
198
+ </div>
199
+ <div class="grid grid-cols-3 gap-2 text-center count-font">
200
+ <div class="bg-white bg-opacity-20 p-2 rounded-lg">
201
+ <div class="text-2xl font-bold text-white">237</div>
202
+ <div class="text-xs text-white text-opacity-80">일</div>
203
+ </div>
204
+ <div class="bg-white bg-opacity-20 p-2 rounded-lg">
205
+ <div class="text-2xl font-bold text-white">7</div>
206
+ <div class="text-xs text-white text-opacity-80">개월</div>
207
+ </div>
208
+ <div class="bg-white bg-opacity-20 p-2 rounded-lg">
209
+ <div class="text-2xl font-bold text-white">33</div>
210
+ <div class="text-xs text-white text-opacity-80">주</div>
211
+ </div>
212
+ </div>
213
+ <div class="mt-4 pt-4 border-t border-white border-opacity-20 flex justify-between">
214
+ <button class="text-white hover:text-white text-opacity-80 hover:text-opacity-100">
215
+ <i data-feather="edit"></i>
216
+ </button>
217
+ <button class="text-white hover:text-white text-opacity-80 hover:text-opacity-100">
218
+ <i data-feather="trash-2"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Add D-Day Floating Button -->
227
+ <div class="fixed bottom-8 right-8 z-20">
228
+ <button class="w-16 h-16 bg-pink-500 text-white rounded-full shadow-lg hover:bg-pink-600 transition flex items-center justify-center">
229
+ <i data-feather="plus" class="w-6 h-6"></i>
230
+ </button>
231
+ </div>
232
+
233
+ <!-- Footer -->
234
+ <footer class="bg-white bg-opacity-80 py-6 px-6 mt-12">
235
+ <div class="container mx-auto text-center">
236
+ <p class="text-gray-600 count-font">
237
+ <i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
238
+ Sweet D-Day - 커플을 위한 특별한 디데이 관리 서비스
239
+ </p>
240
+ </div>
241
+ </footer>
242
+ </div>
243
+
244
+ <script>
245
+ // Initialize Vanta.js
246
+ VANTA.GLOBE({
247
+ el: "#vanta-bg",
248
+ mouseControls: true,
249
+ touchControls: true,
250
+ gyroControls: false,
251
+ minHeight: 200.00,
252
+ minWidth: 200.00,
253
+ scale: 1.00,
254
+ scaleMobile: 1.00,
255
+ color: 0xff9a9e,
256
+ backgroundColor: 0xfff1f2,
257
+ size: 0.8
258
+ });
259
+
260
+ // Initialize AOS
261
+ AOS.init({
262
+ duration: 800,
263
+ easing: 'ease-in-out',
264
+ once: true
265
+ });
266
+
267
+ // Initialize Feather Icons
268
+ feather.replace();
269
+ </script>
270
+ </body>
271
  </html>
premium.html ADDED
@@ -0,0 +1,291 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>프리미엄 | Sweet D-Day</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=Nanum+Pen+Script&family=Poor+Story&display=swap');
15
+ .love-font {
16
+ font-family: 'Nanum Pen Script', cursive;
17
+ }
18
+ .count-font {
19
+ font-family: 'Poor Story', cursive;
20
+ }
21
+ .gradient-text {
22
+ background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+ .premium-gradient {
28
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="premium-gradient">
33
+ <div class="min-h-screen flex flex-col">
34
+ <!-- Header -->
35
+ <header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
36
+ <div class="container mx-auto flex justify-between items-center">
37
+ <a href="index.html" class="text-3xl love-font text-pink-600 flex items-center">
38
+ <i data-feather="heart" class="mr-2 text-red-500"></i>
39
+ Sweet D-Day
40
+ </a>
41
+ <a href="index.html" class="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition flex items-center">
42
+ <i data-feather="arrow-left" class="mr-2"></i>
43
+ 돌아가기
44
+ </a>
45
+ </div>
46
+ </header>
47
+
48
+ <!-- Main Content -->
49
+ <main class="flex-1 py-12 px-6">
50
+ <div class="container mx-auto max-w-4xl">
51
+ <div class="text-center mb-12" data-aos="fade-up">
52
+ <h2 class="text-4xl love-font gradient-text mb-4">
53
+ <i data-feather="award" class="mr-2"></i>
54
+ 프리미엄 멤버십
55
+ </h2>
56
+ <p class="text-xl count-font text-gray-700">
57
+ 특별한 기능과 디자인으로 더욱 로맨틱한 디데이를 경험해보세요
58
+ </p>
59
+ </div>
60
+
61
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
62
+ <!-- Free Plan -->
63
+ <div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-md" data-aos="fade-up">
64
+ <div class="text-center mb-6">
65
+ <h3 class="text-2xl love-font text-gray-700 mb-2">무료 버전</h3>
66
+ <p class="count-font text-gray-500">기본 기능 제공</p>
67
+ </div>
68
+ <div class="text-center mb-6">
69
+ <span class="text-4xl font-bold count-font text-gray-800">₩0</span>
70
+ <span class="count-font text-gray-500">/ 영원히 무료</span>
71
+ </div>
72
+ <ul class="space-y-3 mb-8 count-font text-gray-600">
73
+ <li class="flex items-center">
74
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
75
+ 기본 디자인 6종
76
+ </li>
77
+ <li class="flex items-center">
78
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
79
+ 디데이 5개까지 등록
80
+ </li>
81
+ <li class="flex items-center">
82
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
83
+ 프리미엄 디자인
84
+ </li>
85
+ <li class="flex items-center">
86
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
87
+ 사진 등록 기능
88
+ </li>
89
+ <li class="flex items-center">
90
+ <i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
91
+ 커플 연동 기능
92
+ </li>
93
+ </ul>
94
+ <button class="w-full py-3 bg-gray-200 text-gray-700 rounded-lg count-font">
95
+ 현재 사용 중
96
+ </button>
97
+ </div>
98
+
99
+ <!-- Premium Plan -->
100
+ <div class="bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl p-8 shadow-lg transform scale-105 relative" data-aos="fade-up" data-aos-delay="100">
101
+ <div class="absolute top-0 right-0 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-bl-lg rounded-tr-2xl text-sm count-font">
102
+ 인기 플랜
103
+ </div>
104
+ <div class="text-center mb-6">
105
+ <h3 class="text-2xl love-font text-white mb-2">프리미엄</h3>
106
+ <p class="count-font text-white text-opacity-80">모든 기능 제공</p>
107
+ </div>
108
+ <div class="text-center mb-6">
109
+ <span class="text-4xl font-bold count-font text-white">₩3,900</span>
110
+ <span class="count-font text-white text-opacity-80">/ 월</span>
111
+ </div>
112
+ <ul class="space-y-3 mb-8 count-font text-white text-opacity-90">
113
+ <li class="flex items-center">
114
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
115
+ 모든 기본 디자인
116
+ </li>
117
+ <li class="flex items-center">
118
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
119
+ 무제한 디데이 등록
120
+ </li>
121
+ <li class="flex items-center">
122
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
123
+ 프리미엄 디자인 10+
124
+ </li>
125
+ <li class="flex items-center">
126
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
127
+ 사진 등록 및 공유
128
+ </li>
129
+ <li class="flex items-center">
130
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
131
+ 커플 연동 및 알림
132
+ </li>
133
+ <li class="flex items-center">
134
+ <i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
135
+ 특별한 기념일 카드
136
+ </li>
137
+ </ul>
138
+ <button class="w-full py-3 bg-white text-pink-600 rounded-lg count-font font-bold hover:bg-opacity-90 transition">
139
+ 구독하기
140
+ </button>
141
+ </div>
142
+
143
+ <!-- Couple Plan -->
144
+ <div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-md" data-aos="fade-up" data-aos-delay="200">
145
+ <div class="text-center mb-6">
146
+ <h3 class="text-2xl love-font text-gray-700 mb-2">연간 프리미엄</h3>
147
+ <p class="count-font text-gray-500">20% 할인</p>
148
+ </div>
149
+ <div class="text-center mb-6">
150
+ <span class="text-4xl font-bold count-font text-gray-800">₩37,900</span>
151
+ <span class="count-font text-gray-500">/ 연 (월 ₩3,158)</span>
152
+ </div>
153
+ <ul class="space-y-3 mb-8 count-font text-gray-600">
154
+ <li class="flex items-center">
155
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
156
+ 모든 프리미엄 기능
157
+ </li>
158
+ <li class="flex items-center">
159
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
160
+ 1년간 무제한 이용
161
+ </li>
162
+ <li class="flex items-center">
163
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
164
+ 특별 기념일 알림
165
+ </li>
166
+ <li class="flex items-center">
167
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
168
+ 커플 추억 앨범
169
+ </li>
170
+ <li class="flex items-center">
171
+ <i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
172
+ 연간 리포트 제공
173
+ </li>
174
+ </ul>
175
+ <button class="w-full py-3 bg-pink-500 text-white rounded-lg count-font hover:bg-pink-600 transition">
176
+ 연간 구독
177
+ </button>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Premium Features -->
182
+ <div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-lg mb-12" data-aos="fade-up">
183
+ <h3 class="text-2xl love-font text-center mb-8 gradient-text">
184
+ <i data-feather="zap" class="mr-2"></i>
185
+ 프리미엄 기능
186
+ </h3>
187
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
188
+ <div class="flex items-start">
189
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
190
+ <i data-feather="image" class="w-6 h-6 text-pink-500"></i>
191
+ </div>
192
+ <div>
193
+ <h4 class="text-xl love-font text-pink-600 mb-2">사진 등록</h4>
194
+ <p class="count-font text-gray-600">특별한 순간을 사진으로 기록하고 추억을 공유하세요</p>
195
+ </div>
196
+ </div>
197
+ <div class="flex items-start">
198
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
199
+ <i data-feather="users" class="w-6 h-6 text-purple-500"></i>
200
+ </div>
201
+ <div>
202
+ <h4 class="text-xl love-font text-purple-600 mb-2">커플 연동</h4>
203
+ <p class="count-font text-gray-600">연인과 계정을 연동해 함께 디데이를 관리하세요</p>
204
+ </div>
205
+ </div>
206
+ <div class="flex items-start">
207
+ <div class="bg-red-100 p-3 rounded-full mr-4">
208
+ <i data-feather="gift" class="w-6 h-6 text-red-500"></i>
209
+ </div>
210
+ <div>
211
+ <h4 class="text-xl love-font text-red-600 mb-2">특별 카드</h4>
212
+ <p class="count-font text-gray-600">기념일에 맞춤 디지털 카드를 받아보세요</p>
213
+ </div>
214
+ </div>
215
+ <div class="flex items-start">
216
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
217
+ <i data-feather="bell" class="w-6 h-6 text-blue-500"></i>
218
+ </div>
219
+ <div>
220
+ <h4 class="text-xl love-font text-blue-600 mb-2">알림 설정</h4>
221
+ <p class="count-font text-gray-600">디데이를 놓치지 않도록 미리 알림을 받으세요</p>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Testimonials -->
228
+ <div class="text-center" data-aos="fade-up">
229
+ <h3 class="text-2xl love-font mb-8 gradient-text">
230
+ <i data-feather="heart" class="mr-2"></i>
231
+ 사용자 후기
232
+ </h3>
233
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
234
+ <div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
235
+ <div class="flex items-center mb-4">
236
+ <img src="http://static.photos/people/200x200/1" class="w-12 h-12 rounded-full mr-4" alt="User">
237
+ <div>
238
+ <h4 class="love-font text-pink-600">지현 ♡ 민준</h4>
239
+ <p class="text-xs count-font text-gray-500">1년 차 커플</p>
240
+ </div>
241
+ </div>
242
+ <p class="count-font text-gray-600 text-left">
243
+ "프리미엄 디자인이 너무 예뻐서 매일 들어가게 돼요! 100일부터 1주년까지 모든 순간을 기록하고 있어요."
244
+ </p>
245
+ </div>
246
+ <div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
247
+ <div class="flex items-center mb-4">
248
+ <img src="http://static.photos/people/200x200/2" class="w-12 h-12 rounded-full mr-4" alt="User">
249
+ <div>
250
+ <h4 class="love-font text-purple-600">수빈 ♡ 현우</h4>
251
+ <p class="text-xs count-font text-gray-500">3년 차 커플</p>
252
+ </div>
253
+ </div>
254
+ <p class="count-font text-gray-600 text-left">
255
+ "커플 연동 기능이 최고예요! 서로의 기념일을 놓치지 않고 챙길 수 있어서 정말 좋아요."
256
+ </p>
257
+ </div>
258
+ <div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
259
+ <div class="flex items-center mb-4">
260
+ <img src="http://static.photos/people/200x200/3" class="w-12 h-12 rounded-full mr-4" alt="User">
261
+ <div>
262
+ <h4 class="love-font text-red-600">예은 ♡ 준호</h4>
263
+ <p class="text-xs count-font text-gray-500">6개월 차 커플</p>
264
+ </div>
265
+ </div>
266
+ <p class="count-font text-gray-600 text-left">
267
+ "특별 카드 기능으로 기념일마다 서프라이즈를 준비할 수 있어요. 연인도 너무 좋아해요!"
268
+ </p>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </main>
274
+
275
+ <!-- Footer -->
276
+ <footer class="bg-white bg-opacity-80 py-6 px-6">
277
+ <div class="container mx-auto text-center">
278
+ <p class="text-gray-600 count-font">
279
+ <i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
280
+ Sweet D-Day - 커플을 위한 특별한 디데이 관리 서비스
281
+ </p>
282
+ </div>
283
+ </footer>
284
+ </div>
285
+
286
+ <script>
287
+ AOS.init();
288
+ feather.replace();
289
+ </script>
290
+ </body>
291
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 디데이 관리 페이지 만들자. 디데이 등록하면 남은날짜 등등 알려주고 보여주자 디자인은 커플전용이니 알콩달콩 이쁘게. 프리미엄으로