Spaces:

steake
/

youandmepub

Running

App Files Files Community

steake commited on May 8, 2025

Commit

166f1f4

verified ·

1 Parent(s): 6c31706

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +328 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Youandmepub
-emoji: 😻
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: youandmepub
+emoji: 🐳
+colorFrom: red
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,328 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>You & Me Pub & Hostel | Kampot's Party Hub</title>
+    <meta name="description" content="Kampot's favorite bar-hostel combo. Drink, chill, crash, repeat with our $5 beds and legendary parties.">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'sunset-yellow': '#FFD166',
+                        'sunset-orange': '#F4A261',
+                        'sunset-pink': '#EF476F',
+                        'sunset-purple': '#9C6ADE',
+                        'sunset-blue': '#118AB2',
+                        'electric-blue': '#06AED5',
+                        'amber': '#FF9F1C',
+                    },
+                    fontFamily: {
+                        heading: ['Space Grotesk', 'sans-serif'],
+                        body: ['Inter', 'sans-serif'],
+                    },
+                    backgroundImage: {
+                        'sunset-gradient': 'linear-gradient(to right, #FFD166, #F4A261, #EF476F, #9C6ADE, #118AB2)',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .logo-circle {
+            background: linear-gradient(135deg, #FFD166 0%, #F4A261 25%, #EF476F 50%, #9C6ADE 75%, #118AB2 100%);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+        }
+        .sticky-nav {
+            backdrop-filter: blur(10px);
+            background-color: rgba(255,255,255,0.85);
+        }
+        .lazy {
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
+        }
+        .lazy.loaded {
+            opacity: 1;
+        }
+        .punch-card-hole {
+            box-shadow: inset 0 0 0 3px white, inset 0 0 0 8px #EF476F;
+        }
+    </style>
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'G-XXXXXXXXXX');
+    </script>
+    <!-- Schema.org markup -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "BarOrPub",
+      "name": "You & Me Pub & Hostel",
+      "image": "https://youandmekampot.com/logo.jpg",
+      "@id": "",
+      "url": "https://youandmekampot.com",
+      "telephone": "+855123456789",
+      "address": {
+        "@type": "PostalAddress",
+        "streetAddress": "Riverside Road",
+        "addressLocality": "Kampot",
+        "addressRegion": "Cambodia",
+        "postalCode": "07000",
+        "addressCountry": "KH"
+      },
+      "geo": {
+        "@type": "GeoCoordinates",
+        "latitude": 10.6108,
+        "longitude": 104.1815
+      },
+      "openingHoursSpecification": {
+        "@type": "OpeningHoursSpecification",
+        "dayOfWeek": [
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday",
+          "Sunday"
+        ],
+        "opens": "12:00",
+        "closes": "02:00"
+      },
+      "priceRange": "$",
+      "servesCuisine": "Bar Food"
+    }
+    </script>
+</head>
+<body class="font-body bg-white text-gray-800">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 sticky-nav">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <a href="#" class="flex items-center">
+                <div class="logo-circle w-12 h-12 rounded-full flex items-center justify-center mr-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                </div>
+                <span class="font-heading font-bold text-xl text-sunset-blue">You & Me</span>
+            </a>
+            <nav class="hidden md:flex space-x-6 items-center">
+                <a href="#" class="font-medium hover:text-sunset-pink transition">Home</a>
+                <a href="#events" class="font-medium hover:text-sunset-pink transition">Events</a>
+                <a href="#book" class="font-medium hover:text-sunset-pink transition">Book a Bed</a>
+                <a href="#join" class="font-medium hover:text-sunset-pink transition">Join Telegram</a>
+                <a href="#free-shot" class="bg-amber text-white px-4 py-2 rounded-full font-bold hover:bg-opacity-90 transition">Tonight's Free Shot Code</a>
+            </nav>
+            <button class="md:hidden">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="relative overflow-hidden">
+        <div class="absolute inset-0 bg-sunset-gradient opacity-10"></div>
+        <div class="container mx-auto px-4 py-20 md:py-32 relative z-10">
+            <div class="max-w-3xl mx-auto text-center">
+                <h1 class="font-heading font-bold text-4xl md:text-6xl mb-6 text-sunset-blue">
+                    Drink. Chill. Crash. Repeat.
+                </h1>
+                <p class="text-xl md:text-2xl mb-10 text-gray-700">
+                    The only pub in Kampot where you can party, sleep, and wake up to do it again.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#join" class="bg-electric-blue text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-opacity-90 transition shadow-lg">
+                        Join Telegram
+                    </a>
+                    <a href="#book" class="bg-white border-2 border-electric-blue text-electric-blue px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-50 transition shadow-lg">
+                        Book a Bed
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Tonight at the Pub -->
+    <section id="events" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="font-heading font-bold text-3xl md:text-4xl mb-12 text-center text-sunset-pink">
+                Tonight at the Pub
+            </h2>
+            <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="p-6 md:p-8">
+                    <div class="flex items-start mb-6">
+                        <div class="bg-sunset-blue text-white rounded-full p-3 mr-4">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h3 class="font-heading font-bold text-xl text-sunset-blue mb-2">Open Mic Night</h3>
+                            <p class="text-gray-600 mb-2">8PM - Late | Free entry</p>
+                            <p class="text-gray-800">$1 beers from 5–7PM | Free shot if you say: "Sticky Mango"</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+                        <div class="bg-sunset-yellow bg-opacity-20 p-3 rounded-lg text-center">
+                            <p class="font-bold text-sunset-yellow">Mon</p>
+                            <p class="text-sm">Quiz Night</p>
+                        </div>
+                        <div class="bg-sunset-pink bg-opacity-20 p-3 rounded-lg text-center">
+                            <p class="font-bold text-sunset-pink">Tue</p>
+                            <p class="text-sm">Live Music</p>
+                        </div>
+                        <div class="bg-sunset-blue bg-opacity-20 p-3 rounded-lg text-center">
+                            <p class="font-bold text-sunset-blue">Wed</p>
+                            <p class="text-sm">Open Mic</p>
+                        </div>
+                        <div class="bg-sunset-purple bg-opacity-20 p-3 rounded-lg text-center">
+                            <p class="font-bold text-sunset-purple">Thu</p>
+                            <p class="text-sm">DJ Party</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-100 px-6 py-4 flex items-center justify-between">
+                    <p class="text-sm text-gray-600">Updated daily via Telegram</p>
+                    <a href="#join" class="text-sm font-bold text-sunset-blue hover:text-sunset-pink transition">Get Live Updates →</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Sleep with Us -->
+    <section id="book" class="py-16">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <h2 class="font-heading font-bold text-3xl md:text-4xl mb-6 text-sunset-blue">
+                        Sleep with Us
+                    </h2>
+                    <p class="text-lg text-gray-700 mb-8">
+                        After the party, crash in our comfortable dorms just steps away from your last drink.
+                        Air-conditioned, secure lockers, and fast Wi-Fi included.
+                    </p>
+                    <div class="bg-gray-50 p-6 rounded-xl mb-8">
+                        <div class="flex items-center mb-4">
+                            <div class="bg-sunset-blue text-white rounded-full p-2 mr-4">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                                </svg>
+                            </div>
+                            <h3 class="font-heading font-bold text-xl">10-Bed Mixed Dorm</h3>
+                        </div>
+                        <ul class="space-y-2 pl-12">
+                            <li class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <span>Air conditioning</span>
+                            </li>
+                            <li class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <span>Personal lockers</span>
+                            </li>
+                            <li class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <span>Free high-speed Wi-Fi</span>
+                            </li>
+                            <li class="flex items-center">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-sunset-blue mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <span>24/7 reception</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="flex items-center justify-between bg-amber bg-opacity-10 p-4 rounded-lg border border-amber border-opacity-30">
+                        <div>
+                            <p class="font-bold text-amber">Only $5/night</p>
+                            <p class="text-sm text-gray-600">Best value in Kampot</p>
+                        </div>
+                        <a href="https://m.me/youandmekampot" class="bg-amber text-white px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition">
+                            Check Bed Availability
+                        </a>
+                    </div>
+                </div>
+                <div class="md:w-1/2">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="rounded-xl overflow-hidden shadow-lg">
+                            <img src="https://images.unsplash.com/photo-1566669437685-b9e6e8a5578f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                                 alt="Dorm beds"
+                                 class="lazy w-full h-64 object-cover"
+                                 loading="lazy">
+                        </div>
+                        <div class="rounded-xl overflow-hidden shadow-lg">
+                            <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                                 alt="Hostel common area"
+                                 class="lazy w-full h-64 object-cover"
+                                 loading="lazy">
+                        </div>
+                        <div class="rounded-xl overflow-hidden shadow-lg">
+                            <img src="https://images.unsplash.com/photo-1596178065887-1198b6148b2f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                                 alt="Hostel locker"
+                                 class="lazy w-full h-64 object-cover"
+                                 loading="lazy">
+                        </div>
+                        <div class="rounded-xl overflow-hidden shadow-lg">
+                            <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                                 alt="Hostel bathroom"
+                                 class="lazy w-full h-64 object-cover"
+                                 loading="lazy">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="font-heading font-bold text-3xl md:text-4xl mb-12 text-center text-sunset-pink">
+                Life at You & Me
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300">
+                    <img src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                         alt="Bar scene"
+                         class="lazy w-full h-64 object-cover"
+                         loading="lazy">
+                </div>
+                <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300">
+                    <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                         alt="Cocktails"
+                         class="lazy w-full h-64 object-cover"
+                         loading="lazy">
+                </div>
+                <div class="rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition duration-300">
+                    <img src="https://images.unsplash.com/photo-1532635241-17ec820b5df8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
+                         alt="Pub food"
+                         class="lazy w-full h-64 object-cover"
+                         loading="lazy">
+                </div>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ You are a website creation AI. Build a stylish, mobile-first, single-page site for a bar-hostel in Kampot, Cambodia named **You & Me Pub & Hostel**. --- ## Brand Assets: - Logo: circular gradient logo with cocktail icon (filename: `photo_2025-05-08_12-07-29.jpg`) - Tagline: “Drink. Chill. Crash. Repeat.” --- ## Visual Style: - Color Palette: Sunset gradient (yellow → blue), white background, bold contrast CTAs (electric blue / amber) - Fonts: - Headings: bold rounded (like the logo font) - Body: clean sans-serif (e.g., Inter, Space Grotesk) - Style: Retro-travel meets minimalist tropical --- ## Page Structure: ### Header - Sticky nav: Home | Events | Book a Bed | Join Telegram - Centered logo linking to top - CTA button: “Tonight’s Free Shot Code” ### Hero Section - Headline: “Drink. Chill. Crash. Repeat.” - Subtext: “The only pub in Kampot where you can party, sleep, and wake up to do it again.” - Primary CTA: “Join Telegram” (linked to group) - Secondary CTA: “Book a Bed” ### Tonight at the Pub - Live event preview pulled from Telegram (or fallback to weekly event block) - Sample entry: “Open Mic at 8PM | $1 Beers 5–7PM | Free shot if you say: ‘Sticky Mango’” ### Sleep with Us - Dorms: 10-bed mixed, $5/night, AC, lockers, Wi-Fi - CTA: “Check Bed Availability” (links to Messenger or booking form) ### Gallery - 6–9 images of bar, guests, dorm, cocktails - Lazy loading for mobile speed ### Join the Party - QR code and Telegram group link - Text: “Insider deals. Secret events. Free drinks. Join the crew on Telegram.” ### Loyalty + Referral - Visual loyalty punch card (Loopy) - “Bring a friend, get a free shot” offer with QR code ### Find Us - Google Map embed - Directions: 3 mins from Old Market - Open: 12PM – Late - Contact: Phone, WhatsApp, FB Messenger ### Footer - Social links: Telegram, Facebook, Instagram - Text: “Designed by drunks. Refined by code.” - Copyright: © You & Me Pub 2024 --- ## Technical Requirements: - Mobile-first responsive layout - Optimized images (SVG logo, lazy load photos) - Schema.org markup (LocalBusiness) - Bit.ly or UTM links for CTA tracking - Google Analytics 4 enabled - Optional: Telegram bot integration for event sync --- ## Deployment Preference: Generate as either: - SvelteKit + Tailwind for performance - Framer or Dora AI for no-code - Notion/Super for MVP