Hugging Face's logo

Spaces:
Anzax69
/
undefined
Running

App Files Community
Anzax69 commited on
Commit
0607b42
·
verified ·
1 Parent(s): 0a7e121

whenever someone clicks 'Confirm Reservation' button, show - your reservation is successfully done

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +389 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: red
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: undefined
3
+ colorFrom: blue
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,389 @@
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>Bean Bliss Bistro | Artisanal Coffee Haven</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 50: '#f0fdf4',
18
+ 100: '#dcfce7',
19
+ 200: '#bbf7d0',
20
+ 300: '#86efac',
21
+ 400: '#4ade80',
22
+ 500: '#22c55e',
23
+ 600: '#16a34a',
24
+ 700: '#15803d',
25
+ 800: '#166534',
26
+ 900: '#14532d',
27
+ },
28
+ secondary: {
29
+ 50: '#f8fafc',
30
+ 100: '#f1f5f9',
31
+ 200: '#e2e8f0',
32
+ 300: '#cbd5e1',
33
+ 400: '#94a3b8',
34
+ 500: '#64748b',
35
+ 600: '#475569',
36
+ 700: '#334155',
37
+ 800: '#1e293b',
38
+ 900: '#0f172a',
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ </script>
45
+ <style>
46
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
47
+
48
+ body {
49
+ font-family: 'Poppins', sans-serif;
50
+ }
51
+
52
+ .heading-font {
53
+ font-family: 'Playfair Display', serif;
54
+ }
55
+
56
+ .hero-gradient {
57
+ background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(248,250,252,1) 100%);
58
+ }
59
+
60
+ .menu-card:hover {
61
+ transform: translateY(-5px);
62
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
63
+ }
64
+
65
+ .booking-form {
66
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-50">
71
+ <!-- Navigation -->
72
+ <nav class="bg-white shadow-sm">
73
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
74
+ <div class="flex justify-between h-16">
75
+ <div class="flex items-center">
76
+ <div class="flex-shrink-0 flex items-center">
77
+ <i data-feather="coffee" class="text-primary-500 h-8 w-8"></i>
78
+ <span class="ml-2 heading-font text-xl font-bold text-gray-900">Bean Bliss</span>
79
+ </div>
80
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
81
+ <a href="#" class="border-primary-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
82
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Menu</a>
83
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
84
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>
85
+ </div>
86
+ </div>
87
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
88
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Book a Table</button>
89
+ </div>
90
+ <div class="-mr-2 flex items-center sm:hidden">
91
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500" aria-controls="mobile-menu" aria-expanded="false">
92
+ <span class="sr-only">Open main menu</span>
93
+ <i data-feather="menu"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </nav>
99
+
100
+ <!-- Hero Section -->
101
+ <div class="hero-gradient">
102
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
103
+ <div class="text-center">
104
+ <h1 class="heading-font text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
105
+ <span class="block">Sip. Savor.</span>
106
+ <span class="block text-primary-600">Repeat.</span>
107
+ </h1>
108
+ <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
109
+ Artisanal coffee meets cozy ambiance at Bean Bliss. Reserve your table today for an unforgettable café experience.
110
+ </p>
111
+ <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
112
+ <div class="rounded-md shadow">
113
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 md:py-4 md:text-lg md:px-10">
114
+ Book Now
115
+ </a>
116
+ </div>
117
+ <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
118
+ <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary-500 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
119
+ View Menu
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Booking Section -->
128
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
129
+ <div class="booking-form bg-white rounded-lg p-6 md:p-8 lg:p-10">
130
+ <h2 class="heading-font text-3xl font-bold text-gray-900 mb-6 text-center">Reserve Your Table</h2>
131
+ <form class="space-y-6">
132
+ <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2 md:grid-cols-3">
133
+ <div>
134
+ <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
135
+ <div class="mt-1">
136
+ <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
137
+ </div>
138
+ </div>
139
+ <div>
140
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
141
+ <div class="mt-1">
142
+ <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
143
+ </div>
144
+ </div>
145
+ <div>
146
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
147
+ <div class="mt-1">
148
+ <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
149
+ </div>
150
+ </div>
151
+ <div>
152
+ <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
153
+ <div class="mt-1">
154
+ <input type="date" name="date" id="date" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
155
+ </div>
156
+ </div>
157
+ <div>
158
+ <label for="time" class="block text-sm font-medium text-gray-700">Time</label>
159
+ <div class="mt-1">
160
+ <input type="time" name="time" id="time" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
161
+ </div>
162
+ </div>
163
+ <div>
164
+ <label for="guests" class="block text-sm font-medium text-gray-700">Number of Guests</label>
165
+ <div class="mt-1">
166
+ <select id="guests" name="guests" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md">
167
+ <option>1 person</option>
168
+ <option>2 people</option>
169
+ <option>3 people</option>
170
+ <option>4 people</option>
171
+ <option>5 people</option>
172
+ <option>6+ people</option>
173
+ </select>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div>
178
+ <label for="special-requests" class="block text-sm font-medium text-gray-700">Special Requests</label>
179
+ <div class="mt-1">
180
+ <textarea id="special-requests" name="special-requests" rows="3" class="py-3 px-4 block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 border-gray-300 rounded-md"></textarea>
181
+ </div>
182
+ </div>
183
+ <div class="flex items-center">
184
+ <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded">
185
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
186
+ I agree to the <a href="#" class="text-primary-600 hover:text-primary-500">terms and conditions</a>
187
+ </label>
188
+ </div>
189
+ <div>
190
+ <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
191
+ Confirm Reservation
192
+ </button>
193
+ </div>
194
+ </form>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Features Section -->
199
+ <div class="bg-white py-12 sm:py-16">
200
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
201
+ <div class="text-center">
202
+ <h2 class="heading-font text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
203
+ Why Choose Bean Bliss
204
+ </h2>
205
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
206
+ We're more than just a coffee shop. Here's what makes us special.
207
+ </p>
208
+ </div>
209
+
210
+ <div class="mt-10">
211
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
212
+ <div class="relative">
213
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
214
+ <i data-feather="coffee"></i>
215
+ </div>
216
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Premium Coffee</p>
217
+ <p class="mt-2 ml-16 text-base text-gray-500">
218
+ Single-origin beans roasted to perfection by our master baristas.
219
+ </p>
220
+ </div>
221
+
222
+ <div class="relative">
223
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
224
+ <i data-feather="clock"></i>
225
+ </div>
226
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Convenient Hours</p>
227
+ <p class="mt-2 ml-16 text-base text-gray-500">
228
+ Open early for morning commuters and late for night owls.
229
+ </p>
230
+ </div>
231
+
232
+ <div class="relative">
233
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
234
+ <i data-feather="wifi"></i>
235
+ </div>
236
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Free WiFi</p>
237
+ <p class="mt-2 ml-16 text-base text-gray-500">
238
+ Fast, reliable internet for remote workers and students.
239
+ </p>
240
+ </div>
241
+
242
+ <div class="relative">
243
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
244
+ <i data-feather="smile"></i>
245
+ </div>
246
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Friendly Staff</p>
247
+ <p class="mt-2 ml-16 text-base text-gray-500">
248
+ Our team remembers your name and your favorite drink.
249
+ </p>
250
+ </div>
251
+
252
+ <div class="relative">
253
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
254
+ <i data-feather="users"></i>
255
+ </div>
256
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Community Hub</p>
257
+ <p class="mt-2 ml-16 text-base text-gray-500">
258
+ Regular events, book clubs, and live music nights.
259
+ </p>
260
+ </div>
261
+
262
+ <div class="relative">
263
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
264
+ <i data-feather="heart"></i>
265
+ </div>
266
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">Eco-Conscious</p>
267
+ <p class="mt-2 ml-16 text-base text-gray-500">
268
+ Compostable cups and sustainable sourcing practices.
269
+ </p>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Footer -->
277
+ <footer class="bg-secondary-900">
278
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
279
+ <div class="xl:grid xl:grid-cols-3 xl:gap-8">
280
+ <div class="space-y-8 xl:col-span-1">
281
+ <div class="flex items-center">
282
+ <i data-feather="coffee" class="text-primary-500 h-8 w-8"></i>
283
+ <span class="ml-2 heading-font text-xl font-bold text-white">Bean Bliss</span>
284
+ </div>
285
+ <p class="text-gray-300 text-base">
286
+ Crafting exceptional coffee experiences since 2010. Join us for your next cup.
287
+ </p>
288
+ <div class="flex space-x-6">
289
+ <a href="#" class="text-gray-400 hover:text-white">
290
+ <i data-feather="facebook"></i>
291
+ </a>
292
+ <a href="#" class="text-gray-400 hover:text-white">
293
+ <i data-feather="instagram"></i>
294
+ </a>
295
+ <a href="#" class="text-gray-400 hover:text-white">
296
+ <i data-feather="twitter"></i>
297
+ </a>
298
+ </div>
299
+ </div>
300
+ <div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
301
+ <div class="md:grid md:grid-cols-2 md:gap-8">
302
+ <div>
303
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
304
+ Navigation
305
+ </h3>
306
+ <ul class="mt-4 space-y-4">
307
+ <li>
308
+ <a href="#" class="text-base text-gray-400 hover:text-white">Home</a>
309
+ </li>
310
+ <li>
311
+ <a href="#" class="text-base text-gray-400 hover:text-white">Menu</a>
312
+ </li>
313
+ <li>
314
+ <a href="#" class="text-base text-gray-400 hover:text-white">About Us</a>
315
+ </li>
316
+ <li>
317
+ <a href="#" class="text-base text-gray-400 hover:text-white">Contact</a>
318
+ </li>
319
+ </ul>
320
+ </div>
321
+ <div class="mt-12 md:mt-0">
322
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
323
+ Legal
324
+ </h3>
325
+ <ul class="mt-4 space-y-4">
326
+ <li>
327
+ <a href="#" class="text-base text-gray-400 hover:text-white">Privacy Policy</a>
328
+ </li>
329
+ <li>
330
+ <a href="#" class="text-base text-gray-400 hover:text-white">Terms of Service</a>
331
+ </li>
332
+ <li>
333
+ <a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a>
334
+ </li>
335
+ </ul>
336
+ </div>
337
+ </div>
338
+ <div class="md:grid md:grid-cols-2 md:gap-8">
339
+ <div>
340
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
341
+ Contact
342
+ </h3>
343
+ <ul class="mt-4 space-y-4">
344
+ <li class="flex">
345
+ <i data-feather="map-pin" class="flex-shrink-0 h-5 w-5 text-gray-400"></i>
346
+ <span class="ml-3 text-base text-gray-400">123 Brew Street, Coffeetown</span>
347
+ </li>
348
+ <li class="flex">
349
+ <i data-feather="mail" class="flex-shrink-0 h-5 w-5 text-gray-400"></i>
350
+ <span class="ml-3 text-base text-gray-400">hello@beanbliss.com</span>
351
+ </li>
352
+ <li class="flex">
353
+ <i data-feather="phone" class="flex-shrink-0 h-5 w-5 text-gray-400"></i>
354
+ <span class="ml-3 text-base text-gray-400">(555) 123-4567</span>
355
+ </li>
356
+ </ul>
357
+ </div>
358
+ <div class="mt-12 md:mt-0">
359
+ <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">
360
+ Hours
361
+ </h3>
362
+ <ul class="mt-4 space-y-4">
363
+ <li>
364
+ <span class="text-base text-gray-400">Mon-Fri: 6am - 10pm</span>
365
+ </li>
366
+ <li>
367
+ <span class="text-base text-gray-400">Saturday: 7am - 11pm</span>
368
+ </li>
369
+ <li>
370
+ <span class="text-base text-gray-400">Sunday: 7am - 9pm</span>
371
+ </li>
372
+ </ul>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <div class="mt-12 border-t border-gray-700 pt-8">
378
+ <p class="text-base text-gray-400 text-center">
379
+ &copy; 2023 Bean Bliss Bistro. All rights reserved.
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </footer>
384
+
385
+ <script>
386
+ feather.replace();
387
+ </script>
388
+ </body>
389
+ </html>