restaurant-test / index.html
RamitestAI's picture
Add 2 files
5713de8 verified
Raw History Blame Contribute Delete
40.8 kB
<!DOCTYPE html>
<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">
&copy; 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">&#8203;</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>