Spaces:
Running
Running
Download index.html from RamitestAI/restaurant-test: direct link, hf CLI and curl.
- Browser
- Download file 40.8 kB
-
https://huggingface.co/spaces/RamitestAI/restaurant-test/resolve/main/index.html
- Command line
-
hf download hf://spaces/RamitestAI/restaurant-test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/RamitestAI/restaurant-test/resolve/main/index.html
40.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QueuePay | Get Paid to Wait at Trendy Spots</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .restaurant-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .queue-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); | |
| } | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-utensils text-green-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">QueuePay</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8"> | |
| <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-green-500 text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Restaurants</a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">How it works</a> | |
| <button id="loginBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300">Sign In</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <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-green-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="sm:text-center md:text-left lg:pr-12"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Get paid to</span> | |
| <span class="block text-green-500">wait in line</span> | |
| </h1> | |
| <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | |
| Join virtual queues at trendy restaurants and cafes. Earn money while you wait and get exclusive vouchers when it's your turn! | |
| </p> | |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-full text-base font-medium transition duration-300 shadow-lg"> | |
| Join as Customer | |
| </button> | |
| <button class="bg-white hover:bg-gray-100 text-gray-800 px-6 py-3 rounded-full text-base font-medium transition duration-300 shadow-lg"> | |
| List Your Business | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0"> | |
| <div class="relative mx-auto w-full rounded-lg shadow-lg overflow-hidden"> | |
| <div class="absolute top-0 left-0 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-br"> | |
| LIVE DEMO | |
| </div> | |
| <div class="bg-white p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-store text-green-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="font-bold">The Trendy Cafe</h3> | |
| <p class="text-xs text-gray-500">0.3 miles away</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Queue progress</span> | |
| <span>3/10 spots filled</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full progress-bar" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg mb-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-gray-500">Earn</p> | |
| <p class="font-bold text-green-600">$2.50 <span class="text-gray-500 text-sm">+ $5 voucher</span></p> | |
| </div> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300 queue-pulse"> | |
| Join Queue | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>~15 min wait</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users mr-1"></i> | |
| <span>12 people ahead</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How It Works --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-green-500 font-semibold tracking-wide uppercase">How it works</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Get rewarded for your patience | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10"> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <span class="text-xl font-bold">1</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Find a trendy spot</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Browse restaurants and cafes in your area that are looking to create buzz with virtual queues. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <span class="text-xl font-bold">2</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Join the virtual queue</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Reserve your spot in line. The longer the queue, the more you earn while waiting. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> | |
| <span class="text-xl font-bold">3</span> | |
| </div> | |
| <div class="ml-16"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Get paid & enjoy</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| When it's your turn, receive payment and a voucher to use at the venue. Everyone wins! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Restaurants --> | |
| <div class="py-12 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-10"> | |
| <h2 class="text-base text-green-500 font-semibold tracking-wide uppercase">Trending now</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Hot spots with active queues | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Restaurant Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden restaurant-card transition duration-300"> | |
| <div class="relative"> | |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Restaurant"> | |
| <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| $3.50 + $7 voucher | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold text-gray-900">Bistro Moderno</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-600">4.8</span> | |
| </div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Italian • $$ • 0.5 miles</p> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Queue progress</span> | |
| <span>7/12 spots filled</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 58%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>~25 min wait</span> | |
| </div> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300"> | |
| Join Queue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Restaurant Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden restaurant-card transition duration-300"> | |
| <div class="relative"> | |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Restaurant"> | |
| <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| $4.25 + $10 voucher | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold text-gray-900">The Coffee Lab</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-600">4.9</span> | |
| </div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Cafe • $ • 0.2 miles</p> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Queue progress</span> | |
| <span>5/8 spots filled</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 63%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>~18 min wait</span> | |
| </div> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300"> | |
| Join Queue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Restaurant Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden restaurant-card transition duration-300"> | |
| <div class="relative"> | |
| <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Restaurant"> | |
| <div class="absolute top-2 right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded"> | |
| $5.00 + $15 voucher | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold text-gray-900">Sushi Heaven</h3> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <span class="ml-1 text-gray-600">4.7</span> | |
| </div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">Japanese • $$$ • 0.7 miles</p> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Queue progress</span> | |
| <span>9/15 spots filled</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>~35 min wait</span> | |
| </div> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300"> | |
| Join Queue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-6 border border-gray-300 rounded-full shadow-sm"> | |
| View all restaurants | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Business CTA --> | |
| <div class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div class="lg:pr-12"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| For Restaurant Owners | |
| </h2> | |
| <p class="mt-3 text-lg text-gray-500"> | |
| QueuePay helps your business create buzz and attract more customers by turning waiting lines into marketing opportunities. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-500 hover:bg-green-600"> | |
| List your business | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 lg:mt-0"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Business benefits</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700"> | |
| <span class="font-medium">Create demand</span> - Make your venue appear popular and exclusive | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700"> | |
| <span class="font-medium">Controlled crowds</span> - Manage customer flow efficiently | |
| </p> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center h-6 w-6 rounded-md bg-green-500 text-white"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <p class="ml-3 text-base text-gray-700"> | |
| <span class="font-medium">Guaranteed customers</span> - People who wait are more likely to spend | |
| </p> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-gray-50 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-10"> | |
| <h2 class="text-base text-green-500 font-semibold tracking-wide uppercase">Testimonials</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What people are saying | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Sarah K.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "I've earned over $50 just by waiting in line at places I was going to visit anyway. The vouchers are an amazing bonus!" | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Michael T.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "QueuePay helped us triple our lunchtime traffic. The virtual queue makes us look popular and creates real demand." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Jessica L.</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600"> | |
| "I discovered so many cool places through QueuePay that I wouldn't have tried otherwise. Getting paid is just the cherry on top!" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-green-500"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"> | |
| <div> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Ready to get started? | |
| </h2> | |
| <p class="mt-3 text-lg text-green-100"> | |
| Join thousands of users and businesses already benefiting from QueuePay. | |
| </p> | |
| </div> | |
| <div class="mt-8 lg:mt-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-green-500 bg-white hover:bg-gray-50"> | |
| Download the app | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">QueuePay</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">For Customers</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">How it works</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">For Businesses</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Business benefits</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Get started</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <span class="sr-only">LinkedIn</span> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 QueuePay. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Sign in to QueuePay</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email address</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700">Password</label> | |
| <div class="mt-1"> | |
| <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-green-500 focus:ring-green-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-green-500 hover:text-green-600">Forgot your password?</a> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| Sign in | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white text-gray-500">Or continue with</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-3"> | |
| <div> | |
| <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Sign in with Google</span> | |
| <i class="fab fa-google"></i> | |
| </button> | |
| </div> | |
| <div> | |
| <button class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Sign in with Apple</span> | |
| <i class="fab fa-apple"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-500 text-base font-medium text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Create account | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functionality | |
| const loginBtn = document.getElementById('loginBtn'); | |
| const loginModal = document.getElementById('loginModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| loginBtn.addEventListener('click', () => { | |
| loginModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| loginModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (e) => { | |
| if (e.target === loginModal) { | |
| loginModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Animate progress bars on scroll | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const width = entry.target.style.width; | |
| entry.target.style.width = '0%'; | |
| setTimeout(() => { | |
| entry.target.style.width = width; | |
| }, 100); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| progressBars.forEach(bar => { | |
| observer.observe(bar); | |
| }); | |
| // Simulate queue updates | |
| setInterval(() => { | |
| const queueElements = document.querySelectorAll('[id^="queue-"]'); | |
| queueElements.forEach(el => { | |
| const current = parseInt(el.textContent); | |
| const max = parseInt(el.dataset.max); | |
| if (current < max) { | |
| el.textContent = current + 1; | |
| } else { | |
| el.textContent = 1; | |
| } | |
| }); | |
| }, 3000); | |
| }); | |
| </script> | |
| <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=RamitestAI/restaurant-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |