Hugging Face's logo

Spaces:
nkjoy
/
dday
Running

App Files Community
dday
File size: 8,494 Bytes
09a8f56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>๋””๋ฐ์ด ์ถ”๊ฐ€ | Sweet D-Day</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Poor+Story&display=swap');
        .love-font {
            font-family: 'Nanum Pen Script', cursive;
        }
        .count-font {
            font-family: 'Poor Story', cursive;
        }
        .gradient-text {
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body class="bg-pink-50">
    <div class="min-h-screen flex flex-col">
        <!-- Header -->
        <header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
            <div class="container mx-auto flex justify-between items-center">
                <a href="index.html" class="text-3xl love-font text-pink-600 flex items-center">
                    <i data-feather="heart" class="mr-2 text-red-500"></i>
                    Sweet D-Day
                </a>
                <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">
                    <i data-feather="star" class="mr-2"></i>
                    ํ”„๋ฆฌ๋ฏธ์—„
                </button>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-1 flex items-center justify-center py-12 px-6">
            <div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-lg w-full max-w-md" data-aos="zoom-in">
                <h2 class="text-3xl love-font text-center mb-6 gradient-text">
                    <i data-feather="plus" class="mr-2"></i>
                    ์ƒˆ ๋””๋ฐ์ด ์ถ”๊ฐ€
                </h2>
                
                <form class="space-y-6">
                    <div>
                        <label for="eventName" class="block text-lg love-font text-pink-600 mb-2">์ด๋ฒคํŠธ ์ด๋ฆ„</label>
                        <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์ผ, ์ƒ์ผ">
                    </div>
                    
                    <div>
                        <label for="eventDate" class="block text-lg love-font text-pink-600 mb-2">๋‚ ์งœ ์„ ํƒ</label>
                        <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">
                    </div>
                    
                    <div>
                        <label class="block text-lg love-font text-pink-600 mb-2">๋””์ž์ธ ์„ ํƒ</label>
                        <div class="grid grid-cols-3 gap-3">
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer" checked>
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-pink-500 bg-pink-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-pink-500 mb-2"></div>
                                    <span class="count-font text-sm">ํ•‘ํฌ</span>
                                </div>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer">
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-purple-500 bg-purple-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-purple-500 mb-2"></div>
                                    <span class="count-font text-sm">ํผํ”Œ</span>
                                </div>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer">
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-blue-500 bg-blue-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-blue-500 mb-2"></div>
                                    <span class="count-font text-sm">๋ธ”๋ฃจ</span>
                                </div>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer">
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-red-500 bg-red-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-red-500 mb-2"></div>
                                    <span class="count-font text-sm">๋ ˆ๋“œ</span>
                                </div>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer">
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-green-500 bg-green-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-green-500 mb-2"></div>
                                    <span class="count-font text-sm">๊ทธ๋ฆฐ</span>
                                </div>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="design" class="sr-only peer">
                                <div class="p-4 rounded-lg border-2 border-transparent peer-checked:border-yellow-500 bg-yellow-100 flex flex-col items-center">
                                    <div class="w-8 h-8 rounded-full bg-yellow-500 mb-2"></div>
                                    <span class="count-font text-sm">์˜๋กœ์šฐ</span>
                                </div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="pt-4">
                        <label class="inline-flex items-center">
                            <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">
                            <span class="ml-2 count-font text-gray-600">ํ”„๋ฆฌ๋ฏธ์—„ ๋””์ž์ธ ์ ์šฉ</span>
                        </label>
                    </div>
                    
                    <div class="flex space-x-4 pt-4">
                        <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">
                            ์ทจ์†Œ
                        </button>
                        <button type="submit" class="flex-1 px-4 py-3 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition count-font">
                            ์ €์žฅํ•˜๊ธฐ
                        </button>
                    </div>
                </form>
            </div>
        </main>

        <!-- Footer -->
        <footer class="bg-white bg-opacity-80 py-6 px-6">
            <div class="container mx-auto text-center">
                <p class="text-gray-600 count-font">
                    <i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
                    Sweet D-Day - ์ปคํ”Œ์„ ์œ„ํ•œ ํŠน๋ณ„ํ•œ ๋””๋ฐ์ด ๊ด€๋ฆฌ ์„œ๋น„์Šค
                </p>
            </div>
        </footer>
    </div>

    <script>
        AOS.init();
        feather.replace();
    </script>
</body>
</html>