Hugging Face's logo

Spaces:
steake
/
uandme3
Running

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +248 -3
  2. prompts.txt +2 -1
index.html CHANGED
@@ -183,7 +183,6 @@
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">
@@ -295,7 +294,7 @@
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>
@@ -318,5 +317,251 @@
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>
 
183
  </div>
184
  </header>
185
 
 
186
  <!-- Hero Section -->
187
  <section class="relative bg-gradient-to-b from-white to-sunset-yellow/10 dark:from-dark-bg dark:to-sunset-blue/20 py-20">
188
  <div class="container mx-auto px-4 flex flex-col items-center text-center">
 
294
  <div class="bg-white dark:bg-dark-card p-6 rounded-xl shadow-md">
295
  <div class="flex items-center mb-4">
296
  <div class="bg-amber text-white p-2 rounded-full mr-3">
297
+ <svg class="w-6 h-6" fill="none stroke="currentColor" viewBox="0 0 24 24">
298
  <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>
299
  </svg>
300
  </div>
 
317
  <li class="flex items-start">
318
  <svg class="w-5 h-5 text-amber mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
319
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
320
+ </svg>
321
+ <span><span class="font-bold">Group discount</span> - 10% off for groups of 4+</span>
322
+ </li>
323
+ </ul>
324
+
325
+ <button class="w-full bg-amber text-white px-6 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all">
326
+ View All Offers
327
+ </button>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </section>
332
+
333
+ <!-- Photo Gallery -->
334
+ <section class="py-16 bg-white dark:bg-dark-bg">
335
+ <div class="container mx-auto px-4">
336
+ <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-blue dark:text-electric-blue">
337
+ Our Vibe
338
+ </h2>
339
+
340
+ <div class="gallery-grid">
341
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
342
+ <img src="https://source.unsplash.com/random/600x400/?pub,1" alt="Pub atmosphere" class="w-full h-64 object-cover lazy-load" loading="lazy">
343
+ </div>
344
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
345
+ <img src="https://source.unsplash.com/random/600x400/?pub,2" alt="Live music" class="w-full h-64 object-cover lazy-load" loading="lazy">
346
+ </div>
347
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
348
+ <img src="https://source.unsplash.com/random/600x400/?hostel,1" alt="Dorm room" class="w-full h-64 object-cover lazy-load" loading="lazy">
349
+ </div>
350
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
351
+ <img src="https://source.unsplash.com/random/600x400/?pub,3" alt="Bar area" class="w-full h-64 object-cover lazy-load" loading="lazy">
352
+ </div>
353
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
354
+ <img src="https://source.unsplash.com/random/600x400/?hostel,2" alt="Common area" class="w-full h-64 object-cover lazy-load" loading="lazy">
355
+ </div>
356
+ <div class="overflow-hidden rounded-xl shadow-md hover:shadow-xl transition-shadow">
357
+ <img src="https://source.unsplash.com/random/600x400/?pub,4" alt="Outdoor seating" class="w-full h-64 object-cover lazy-load" loading="lazy">
358
+ </div>
359
+ </div>
360
+
361
+ <div class="mt-12 text-center">
362
+ <a href="#" class="inline-block bg-sunset-pink text-white px-8 py-3 rounded-full font-bold shadow-md hover:shadow-lg transform hover:scale-105 transition-all">
363
+ See More Photos
364
+ </a>
365
+ </div>
366
+ </div>
367
+ </section>
368
+
369
+ <!-- Join Telegram -->
370
+ <section id="join" class="py-16 bg-gradient-to-b from-white to-sunset-pink/10 dark:from-dark-bg dark:to-sunset-pink/20">
371
+ <div class="container mx-auto px-4">
372
+ <h2 class="font-heading text-3xl font-bold mb-8 text-center text-sunset-pink">
373
+ Join Our Telegram
374
+ </h2>
375
+
376
+ <div class="max-w-2xl mx-auto bg-white dark:bg-dark-card p-8 rounded-xl shadow-md">
377
+ <div class="flex items-center mb-6">
378
+ <div class="bg-sunset-purple text-white p-3 rounded-full mr-4">
379
+ <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
380
+ <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.598.295-.002 0-.003 0-.005 0l.213-3.054 5.794-5.24c.24-.213-.054-.334-.373-.121l-7.161 4.51-3.073-.957c-.643-.203-.658-.643.136-.953l15.733-6.08c.537-.232 1.054.132.864.941z"/>
381
+ </svg>
382
+ </div>
383
+ <h3 class="font-heading text-2xl font-bold text-sunset-purple">Instant Updates</h3>
384
+ </div>
385
+
386
+ <p class="mb-6 dark:text-gray-300">
387
+ Get real-time updates on events, special offers, and last-minute bed availability. Our Telegram group is the best way to stay connected with the You & Me community.
388
+ </p>
389
+
390
+ <ul class="space-y-3 mb-8 dark:text-gray-300">
391
+ <li class="flex items-start">
392
+ <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
393
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
394
+ </svg>
395
+ <span>Daily event schedules</span>
396
+ </li>
397
+ <li class="flex items-start">
398
+ <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
399
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
400
+ </svg>
401
+ <span>Exclusive member discounts</span>
402
+ </li>
403
+ <li class="flex items-start">
404
+ <svg class="w-5 h-5 text-sunset-purple mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
405
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
406
+ </svg>
407
+ <span>Flash sales and last-minute deals</span>
408
+ </li>
409
+ </ul>
410
+
411
+ <a href="#" class="block w-full bg-sunset-purple text-white px-6 py-3 rounded-full font-bold text-center shadow-md hover:shadow-lg transform hover:scale-[1.02] transition-all">
412
+ Join Telegram Group
413
+ </a>
414
+ </div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- Footer -->
419
+ <footer class="bg-gray-100 dark:bg-dark-card py-12">
420
+ <div class="container mx-auto px-4">
421
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
422
+ <div>
423
+ <div class="flex items-center mb-4">
424
+ <div class="logo-circle bg-gradient-to-br from-sunset-yellow to-sunset-blue mr-3">
425
+ <span class="cocktail-icon">🍹</span>
426
+ </div>
427
+ <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>
428
+ </div>
429
+ <p class="text-gray-600 dark:text-gray-400">
430
+ The best pub and hostel in Kampot for travelers who love to party and meet new friends.
431
+ </p>
432
+ </div>
433
+
434
+ <div>
435
+ <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Quick Links</h3>
436
+ <ul class="space-y-2">
437
+ <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Home</a></li>
438
+ <li><a href="#events" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Events</a></li>
439
+ <li><a href="#book" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Book a Bed</a></li>
440
+ <li><a href="#join" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">Join Telegram</a></li>
441
+ </ul>
442
+ </div>
443
+
444
+ <div>
445
+ <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Contact</h3>
446
+ <ul class="space-y-2">
447
+ <li class="flex items-start">
448
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
449
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
450
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
451
+ </svg>
452
+ <span class="text-gray-600 dark:text-gray-400">Riverside, Kampot, Cambodia</span>
453
+ </li>
454
+ <li class="flex items-start">
455
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
456
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
457
+ </svg>
458
+ <span class="text-gray-600 dark:text-gray-400">+855 12 345 678</span>
459
+ </li>
460
+ <li class="flex items-start">
461
+ <svg class="w-5 h-5 text-sunset-blue dark:text-electric-blue mr-2 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
462
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
463
+ </svg>
464
+ <span class="text-gray-600 dark:text-gray-400">hello@youandme.com</span>
465
+ </li>
466
+ </ul>
467
+ </div>
468
+
469
+ <div>
470
+ <h3 class="font-heading text-lg font-bold mb-4 text-sunset-blue dark:text-electric-blue">Follow Us</h3>
471
+ <div class="flex space-x-4">
472
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">
473
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
474
+ <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/>
475
+ </svg>
476
+ </a>
477
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">
478
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
479
+ <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
480
+ </svg>
481
+ </a>
482
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-sunset-pink">
483
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
484
+ <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
485
+ </svg>
486
+ </a>
487
+ </div>
488
+ </div>
489
+ </div>
490
+
491
+ <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-8 text-center text-gray-500 dark:text-gray-400">
492
+ <p>&copy; 2023 You & Me Pub & Hostel. All rights reserved.</p>
493
+ </div>
494
+ </div>
495
+ </footer>
496
+
497
+ <script>
498
+ // Mobile menu toggle
499
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
500
+ const mobileMenu = document.getElementById('mobile-menu');
501
+
502
+ mobileMenuButton.addEventListener('click', () => {
503
+ mobileMenu.classList.toggle('hidden');
504
+ });
505
+
506
+ // Dark mode toggle
507
+ const themeToggleDesktop = document.getElementById('theme-toggle-desktop');
508
+ const themeToggleMobile = document.getElementById('theme-toggle-mobile');
509
+ const themeIconSun = document.getElementById('theme-icon-sun');
510
+ const themeIconMoon = document.getElementById('theme-icon-moon');
511
+ const themeIconSunMobile = document.getElementById('theme-icon-sun-mobile');
512
+ const themeIconMoonMobile = document.getElementById('theme-icon-moon-mobile');
513
+ const themeTextMobile = document.getElementById('theme-text-mobile');
514
+
515
+ // Check for saved user preference or use system preference
516
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
517
+ const storedTheme = localStorage.getItem('theme');
518
+
519
+ // Apply the initial theme
520
+ if (storedTheme === 'dark' || (!storedTheme && userPrefersDark)) {
521
+ document.documentElement.classList.add('dark');
522
+ themeTextMobile.textContent = 'Light Mode';
523
+ } else {
524
+ document.documentElement.classList.remove('dark');
525
+ themeTextMobile.textContent = 'Dark Mode';
526
+ }
527
+
528
+ // Toggle theme function
529
+ function toggleTheme() {
530
+ if (document.documentElement.classList.contains('dark')) {
531
+ document.documentElement.classList.remove('dark');
532
+ localStorage.setItem('theme', 'light');
533
+ themeTextMobile.textContent = 'Dark Mode';
534
+ } else {
535
+ document.documentElement.classList.add('dark');
536
+ localStorage.setItem('theme', 'dark');
537
+ themeTextMobile.textContent = 'Light Mode';
538
+ }
539
+ }
540
+
541
+ // Add event listeners to both toggles
542
+ themeToggleDesktop.addEventListener('click', toggleTheme);
543
+ themeToggleMobile.addEventListener('click', toggleTheme);
544
+
545
+ // Lazy loading images
546
+ document.addEventListener('DOMContentLoaded', function() {
547
+ const lazyImages = document.querySelectorAll('.lazy-load');
548
+
549
+ const lazyLoad = (target) => {
550
+ const io = new IntersectionObserver((entries, observer) => {
551
+ entries.forEach(entry => {
552
+ if (entry.isIntersecting) {
553
+ const img = entry.target;
554
+ img.classList.add('loaded');
555
+ observer.unobserve(img);
556
+ }
557
+ });
558
+ });
559
+
560
+ io.observe(target);
561
+ };
562
+
563
+ lazyImages.forEach(lazyLoad);
564
+ });
565
+ </script>
566
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=steake/uandme3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
567
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- add dark mode toggle to menu.
 
 
1
+ add dark mode toggle to menu.
2
+ Dark mode must work with menubar toggle