Hugging Face's logo

Spaces:
steake
/
uandme3
Running

App Files Community
steake commited on
Commit
5a77a8d
·
verified ·
1 Parent(s): 4a1fde7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +322 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Uandme3
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: yellow
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: uandme3
3
+ emoji: 🐳
4
+ colorFrom: green
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
index.html CHANGED
@@ -1,19 +1,322 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>You & Me Pub & Hostel | Kampot, Cambodia</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ 'sunset-yellow': '#FFD166',
18
+ 'sunset-orange': '#F4A261',
19
+ 'sunset-pink': '#EF476F',
20
+ 'sunset-purple': '#9C6ADE',
21
+ 'sunset-blue': '#118AB2',
22
+ 'electric-blue': '#06AED5',
23
+ 'amber': '#FF9F1C',
24
+ 'dark-bg': '#1a1a2e',
25
+ 'dark-card': '#16213e',
26
+ 'dark-text': '#e6e6e6',
27
+ },
28
+ fontFamily: {
29
+ heading: ['Space Grotesk', 'sans-serif'],
30
+ body: ['Inter', 'sans-serif'],
31
+ },
32
+ backgroundImage: {
33
+ 'sunset-gradient': 'linear-gradient(to right, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)',
34
+ 'logo-gradient': 'radial-gradient(circle, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)',
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style>
41
+ .logo-circle {
42
+ width: 80px;
43
+ height: 80px;
44
+ border-radius: 50%;
45
+ display: flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
49
+ transition: transform 0.3s ease;
50
+ }
51
+ .logo-circle:hover {
52
+ transform: rotate(15deg) scale(1.05);
53
+ }
54
+ .cocktail-icon {
55
+ font-size: 40px;
56
+ color: white;
57
+ }
58
+ .nav-link {
59
+ position: relative;
60
+ }
61
+ .nav-link:after {
62
+ content: '';
63
+ position: absolute;
64
+ width: 0;
65
+ height: 2px;
66
+ bottom: -2px;
67
+ left: 0;
68
+ background: currentColor;
69
+ transition: width 0.3s ease;
70
+ }
71
+ .nav-link:hover:after {
72
+ width: 100%;
73
+ }
74
+ .gallery-grid {
75
+ display: grid;
76
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
77
+ gap: 1rem;
78
+ }
79
+ .loyalty-card {
80
+ perspective: 1000px;
81
+ }
82
+ .loyalty-card-inner {
83
+ transition: transform 0.6s;
84
+ transform-style: preserve-3d;
85
+ }
86
+ .loyalty-card:hover .loyalty-card-inner {
87
+ transform: rotateY(180deg);
88
+ }
89
+ .loyalty-card-front, .loyalty-card-back {
90
+ backface-visibility: hidden;
91
+ }
92
+ .loyalty-card-back {
93
+ transform: rotateY(180deg);
94
+ }
95
+ .lazy-load {
96
+ opacity: 0;
97
+ transition: opacity 0.5s ease;
98
+ }
99
+ .lazy-load.loaded {
100
+ opacity: 1;
101
+ }
102
+ .theme-toggle {
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ width: 36px;
107
+ height: 36px;
108
+ border-radius: 50%;
109
+ transition: all 0.3s ease;
110
+ }
111
+ .theme-toggle:hover {
112
+ transform: scale(1.1);
113
+ }
114
+ .dark .theme-toggle {
115
+ background-color: rgba(255, 255, 255, 0.1);
116
+ }
117
+ .light .theme-toggle {
118
+ background-color: rgba(0, 0, 0, 0.05);
119
+ }
120
+ </style>
121
+ </head>
122
+ <body class="font-body bg-white text-gray-800 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300">
123
+ <!-- Header -->
124
+ <header class="sticky top-0 z-50 bg-white dark:bg-dark-card shadow-sm">
125
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
126
+ <a href="#" class="flex items-center">
127
+ <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3">
128
+ <span class="cocktail-icon">🍹</span>
129
+ </div>
130
+ <span class="font-heading text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue">You & Me</span>
131
+ </a>
132
+
133
+ <nav class="hidden md:flex items-center space-x-6">
134
+ <a href="#" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Home</a>
135
+ <a href="#events" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Events</a>
136
+ <a href="#book" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Book a Bed</a>
137
+ <a href="#join" class="nav-link font-medium text-sunset-blue dark:text-electric-blue hover:text-sunset-pink">Join Telegram</a>
138
+
139
+ <!-- Dark mode toggle for desktop -->
140
+ <button id="theme-toggle-desktop" class="theme-toggle ml-2">
141
+ <svg id="theme-icon-sun" class="w-5 h-5 text-amber dark:hidden" fill="currentColor" viewBox="0 0 20 20">
142
+ <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
143
+ </svg>
144
+ <svg id="theme-icon-moon" class="w-5 h-5 text-sunset-blue hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
145
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
146
+ </svg>
147
+ </button>
148
+ </nav>
149
+
150
+ <div class="flex items-center space-x-4">
151
+ <button class="bg-amber text-white px-4 py-2 rounded-full font-medium shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
152
+ Tonight's Free Shot Code
153
+ </button>
154
+
155
+ <!-- Mobile menu button -->
156
+ <button id="mobile-menu-button" class="md:hidden text-sunset-blue dark:text-electric-blue">
157
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
158
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
159
+ </svg>
160
+ </button>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Mobile menu -->
165
+ <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-dark-card py-2 px-4 shadow-md">
166
+ <a href="#" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Home</a>
167
+ <a href="#events" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Events</a>
168
+ <a href="#book" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Book a Bed</a>
169
+ <a href="#join" class="block py-2 font-medium text-sunset-blue dark:text-electric-blue">Join Telegram</a>
170
+
171
+ <!-- Dark mode toggle for mobile -->
172
+ <div class="flex items-center py-2">
173
+ <button id="theme-toggle-mobile" class="flex items-center space-x-2">
174
+ <svg id="theme-icon-sun-mobile" class="w-5 h-5 text-amber dark:hidden" fill="currentColor" viewBox="0 0 20 20">
175
+ <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
176
+ </svg>
177
+ <svg id="theme-icon-moon-mobile" class="w-5 h-5 text-sunset-blue hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
178
+ <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
179
+ </svg>
180
+ <span id="theme-text-mobile" class="text-sunset-blue dark:text-electric-blue">Dark Mode</span>
181
+ </button>
182
+ </div>
183
+ </div>
184
+ </header>
185
+
186
+ <!-- Rest of your content remains the same -->
187
+ <!-- Hero Section -->
188
+ <section class="relative bg-gradient-to-b from-white to-sunset-yellow/10 dark:from-dark-bg dark:to-sunset-blue/20 py-20">
189
+ <div class="container mx-auto px-4 flex flex-col items-center text-center">
190
+ <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mb-8">
191
+ <span class="cocktail-icon">🍹</span>
192
+ </div>
193
+
194
+ <h1 class="font-heading text-4xl md:text-6xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-sunset-yellow to-sunset-blue">
195
+ Drink. Chill. Crash. Repeat.
196
+ </h1>
197
+
198
+ <p class="text-lg md:text-xl max-w-2xl mb-8 text-gray-700 dark:text-gray-300">
199
+ The only pub in Kampot where you can party, sleep, and wake up to do it again.
200
+ </p>
201
+
202
+ <div class="flex flex-col sm:flex-row gap-4">
203
+ <a href="#join" class="bg-electric-blue text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
204
+ Join Telegram
205
+ </a>
206
+ <a href="#book" class="bg-amber text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
207
+ Book a Bed
208
+ </a>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-white dark:from-dark-bg to-transparent"></div>
213
+ </section>
214
+
215
+ <!-- Tonight at the Pub -->
216
+ <section id="events" class="py-16 bg-white dark:bg-dark-bg">
217
+ <div class="container mx-auto px-4">
218
+ <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue">
219
+ Tonight at the Pub
220
+ </h2>
221
+
222
+ <div class="max-w-2xl mx-auto bg-gradient-to-r from-sunset-yellow/10 to-sunset-blue/10 dark:from-sunset-blue/20 dark:to-sunset-purple/20 p-6 rounded-xl shadow-md">
223
+ <div class="flex items-center mb-4">
224
+ <div class="bg-sunset-pink text-white p-2 rounded-full mr-3">
225
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
226
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
227
+ </svg>
228
+ </div>
229
+ <h3 class="font-heading text-xl font-bold text-sunset-pink">Live Events</h3>
230
+ </div>
231
+
232
+ <div id="event-content" class="space-y-3">
233
+ <p class="text-lg dark:text-gray-200"><span class="font-bold">8:00 PM</span> - Open Mic Night</p>
234
+ <p class="text-lg dark:text-gray-200"><span class="font-bold">5:00-7:00 PM</span> - $1 Beers Happy Hour</p>
235
+ <p class="text-lg font-bold text-sunset-pink">Free shot if you say: "Sticky Mango"</p>
236
+ </div>
237
+
238
+ <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
239
+ <p class="text-sm text-gray-500 dark:text-gray-400">Events update daily. Join our Telegram for real-time updates.</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Sleep with Us -->
246
+ <section id="book" class="py-16 bg-gradient-to-b from-white to-sunset-blue/10 dark:from-dark-bg dark:to-sunset-blue/20">
247
+ <div class="container mx-auto px-4">
248
+ <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue">
249
+ Sleep with Us
250
+ </h2>
251
+
252
+ <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
253
+ <div class="bg-white dark:bg-dark-card p-6 rounded-xl shadow-md">
254
+ <div class="flex items-center mb-4">
255
+ <div class="bg-sunset-blue text-white p-2 rounded-full mr-3">
256
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
257
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
258
+ </svg>
259
+ </div>
260
+ <h3 class="font-heading text-xl font-bold text-sunset-blue dark:text-electric-blue">10-Bed Mixed Dorm</h3>
261
+ </div>
262
+
263
+ <ul class="space-y-2 mb-6 dark:text-gray-300">
264
+ <li class="flex items-center">
265
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
266
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
267
+ </svg>
268
+ <span>Only $5/night</span>
269
+ </li>
270
+ <li class="flex items-center">
271
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
272
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
273
+ </svg>
274
+ <span>Air-conditioned</span>
275
+ </li>
276
+ <li class="flex items-center">
277
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
278
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
279
+ </svg>
280
+ <span>Secure lockers</span>
281
+ </li>
282
+ <li class="flex items-center">
283
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
284
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
285
+ </svg>
286
+ <span>Free high-speed Wi-Fi</span>
287
+ </li>
288
+ </ul>
289
+
290
+ <button class="w-full bg-sunset-blue dark:bg-electric-blue text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all">
291
+ Check Bed Availability
292
+ </button>
293
+ </div>
294
+
295
+ <div class="bg-white dark:bg-dark-card p-6 rounded-xl shadow-md">
296
+ <div class="flex items-center mb-4">
297
+ <div class="bg-amber text-white p-2 rounded-full mr-3">
298
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
299
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
300
+ </svg>
301
+ </div>
302
+ <h3 class="font-heading text-xl font-bold text-amber">Special Offers</h3>
303
+ </div>
304
+
305
+ <ul class="space-y-3 mb-6 dark:text-gray-300">
306
+ <li class="flex items-start">
307
+ <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
308
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
309
+ </svg>
310
+ <span><span class="font-bold">Stay 3+ nights</span> - Get 1 free drink per night</span>
311
+ </li>
312
+ <li class="flex items-start">
313
+ <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
314
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
315
+ </svg>
316
+ <span><span class="font-bold">Weekly rate</span> - Only $30 (save $5)</span>
317
+ </li>
318
+ <li class="flex items-start">
319
+ <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
320
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
321
+ </svg
322
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ add dark mode toggle to menu.