Hugging Face's logo

Spaces:
LIMATEC
/
pizzaria
Running

App Files Community
pizzaria / index.html
LIMATEC's picture
LIMATEC
Add 3 files
6fa71f2 verified
raw
history blame contribute delete
60.4 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Pizzaria Sabor Italiano - Delivery e Balcão</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>
 .hero-section {
 background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3');
 background-size: cover;
 background-position: center;
 height: 80vh;
 }
.pizza-card:hover {
 transform: translateY(-10px);
 transition: all 0.3s ease;
 }
.cart-item {
 animation: fadeIn 0.5s ease-in-out;
 }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
.pizza-detail {
 background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3');
 background-size: cover;
 background-position: center;
 }
 </style>
</head>
<body class="font-sans bg-gray-100">
 <!-- Header/Navbar -->
 <header class="bg-red-700 text-white shadow-lg sticky top-0 z-50">
 <div class="container mx-auto px-4 py-3 flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-pizza-slice text-2xl"></i>
 <h1 class="text-2xl font-bold">Sabor Italiano</h1>
 </div>
<nav class="hidden md:flex space-x-6">
 <a href="#home" class="hover:text-yellow-300 transition">Início</a>
 <a href="#menu" class="hover:text-yellow-300 transition">Cardápio</a>
 <a href="#about" class="hover:text-yellow-300 transition">Sobre</a>
 <a href="#contact" class="hover:text-yellow-300 transition">Contato</a>
 </nav>
<div class="flex items-center space-x-4">
 <button id="cart-button" class="relative">
 <i class="fas fa-shopping-cart text-xl"></i>
 <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-400 text-red-700 rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">0</span>
 </button>
 <button id="mobile-menu-button" class="md:hidden text-xl">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-red-800 px-4 py-2">
 <div class="flex flex-col space-y-3">
 <a href="#home" class="hover:text-yellow-300 transition">Início</a>
 <a href="#menu" class="hover:text-yellow-300 transition">Cardápio</a>
 <a href="#about" class="hover:text-yellow-300 transition">Sobre</a>
 <a href="#contact" class="hover:text-yellow-300 transition">Contato</a>
 </div>
 </div>
 </header>
<!-- Hero Section -->
 <section id="home" class="hero-section flex items-center justify-center text-white">
 <div class="text-center px-4">
 <h1 class="text-4xl md:text-6xl font-bold mb-4">Pizzaria Sabor Italiano</h1>
 <p class="text-xl md:text-2xl mb-8">Autêntica pizza italiana com delivery rápido ou retirada no balcão</p>
 <div class="flex flex-col md:flex-row justify-center gap-4">
 <a href="#menu" class="bg-yellow-400 hover:bg-yellow-500 text-red-700 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
 <i class="fas fa-utensils mr-2"></i>Ver Cardápio
 </a>
 <a href="#delivery" class="bg-white hover:bg-gray-100 text-red-700 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
 <i class="fas fa-motorcycle mr-2"></i>Pedir Delivery
 </a>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="py-12 bg-white">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
 <i class="fas fa-clock text-4xl text-red-600 mb-4"></i>
 <h3 class="text-xl font-bold mb-2">Entrega Rápida</h3>
 <p class="text-gray-600">Entregamos em até 45 minutos ou sua pizza é grátis!</p>
 </div>
 <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
 <i class="fas fa-leaf text-4xl text-red-600 mb-4"></i>
 <h3 class="text-xl font-bold mb-2">Ingredientes Frescos</h3>
 <p class="text-gray-600">Usamos apenas ingredientes frescos e de alta qualidade.</p>
 </div>
 <div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition">
 <i class="fas fa-award text-4xl text-red-600 mb-4"></i>
 <h3 class="text-xl font-bold mb-2">Tradição Italiana</h3>
 <p class="text-gray-600">Receitas autênticas preparadas por pizzaiolos experientes.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Menu Section -->
 <section id="menu" class="py-12 bg-gray-100">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Nosso Cardápio</h2>
<div class="flex justify-center mb-8">
 <div class="inline-flex rounded-md shadow-sm">
 <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="all">
 Todas
 </button>
 <button type="button" class="category-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="classic">
 Clássicas
 </button>
 <button type="button" class="category-btn px-4 py-2 text-sm font-medium border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="special">
 Especiais
 </button>
 <button type="button" class="category-btn px-4 py-2 text-sm font-medium rounded-r-md border border-gray-300 bg-white text-red-700 hover:bg-gray-50 focus:z-10 focus:ring-2 focus:ring-red-500" data-category="dessert">
 Sobremesas
 </button>
 </div>
 </div>
<div id="pizza-menu" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Pizzas will be loaded here by JavaScript -->
 </div>
 </div>
 </section>
<!-- Delivery Section -->
 <section id="delivery" class="py-12 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Faça seu Pedido</h2>
<div class="flex flex-col lg:flex-row gap-8">
 <div class="lg:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-red-700">Informações de Entrega</h3>
 <form id="delivery-form">
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="name">Nome Completo</label>
 <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="phone">Telefone</label>
 <input type="tel" id="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="address">Endereço</label>
 <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="complement">Complemento</label>
 <input type="text" id="complement" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="payment">Forma de Pagamento</label>
 <select id="payment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 <option value="">Selecione...</option>
 <option value="cash">Dinheiro</option>
 <option value="credit">Cartão de Crédito</option>
 <option value="debit">Cartão de Débito</option>
 <option value="pix">PIX</option>
 </select>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="notes">Observações</label>
 <textarea id="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"></textarea>
 </div>
 <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md transition duration-300">
 Finalizar Pedido
 </button>
 </form>
 </div>
 </div>
<div class="lg:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg">
 <h3 class="text-xl font-bold mb-4 text-red-700">Seu Pedido</h3>
 <div id="cart-items" class="mb-4">
 <!-- Cart items will be loaded here -->
 <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>
 </div>
 <div class="border-t border-gray-300 pt-4">
 <div class="flex justify-between mb-2">
 <span class="font-semibold">Subtotal:</span>
 <span id="subtotal">R$ 0,00</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="font-semibold">Taxa de Entrega:</span>
 <span id="delivery-fee">R$ 8,00</span>
 </div>
 <div class="flex justify-between text-lg font-bold">
 <span>Total:</span>
 <span id="total">R$ 8,00</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-12 bg-gray-100">
 <div class="container mx-auto px-4">
 <div class="flex flex-col lg:flex-row items-center gap-12">
 <div class="lg:w-1/2">
 <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3" alt="Pizzaiolo preparando pizza" class="rounded-lg shadow-lg w-full">
 </div>
 <div class="lg:w-1/2">
 <h2 class="text-3xl font-bold mb-6 text-red-700">Nossa História</h2>
 <p class="text-gray-700 mb-4">Fundada em 1995, a Pizzaria Sabor Italiano nasceu do sonho de trazer para o Brasil a autêntica pizza napolitana, preparada com técnicas tradicionais e ingredientes selecionados.</p>
 <p class="text-gray-700 mb-4">Nosso mestre pizzaiolo, Giovanni Rossi, veio diretamente de Nápoles para compartilhar seu conhecimento e paixão pela verdadeira pizza italiana.</p>
 <p class="text-gray-700 mb-6">Hoje, continuamos mantendo viva essa tradição, assando nossas pizzas em forno a lenha e usando apenas ingredientes frescos e de alta qualidade.</p>
 <div class="flex flex-col sm:flex-row gap-4">
 <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
 <i class="fas fa-fire text-2xl text-red-600 mr-3"></i>
 <div>
 <h4 class="font-bold">Forno a Lenha</h4>
 <p class="text-sm text-gray-600">Temperatura ideal para pizza</p>
 </div>
 </div>
 <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
 <i class="fas fa-wheat-alt text-2xl text-red-600 mr-3"></i>
 <div>
 <h4 class="font-bold">Massa Artesanal</h4>
 <p class="text-sm text-gray-600">Feita diariamente</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-12 bg-white">
 <div class="container mx-auto px-4">
 <h2 class="text-3xl font-bold text-center mb-12 text-red-700">Entre em Contato</h2>
<div class="flex flex-col lg:flex-row gap-8">
 <div class="lg:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg h-full">
 <h3 class="text-xl font-bold mb-4 text-red-700">Informações de Contato</h3>
<div class="space-y-4">
 <div class="flex items-start">
 <i class="fas fa-map-marker-alt text-red-600 mt-1 mr-3"></i>
 <div>
 <h4 class="font-semibold">Endereço</h4>
 <p class="text-gray-600">Rua das Pizzas, 123 - Centro, São Paulo - SP</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-phone-alt text-red-600 mt-1 mr-3"></i>
 <div>
 <h4 class="font-semibold">Telefone</h4>
 <p class="text-gray-600">(11) 1234-5678</p>
 <p class="text-gray-600">WhatsApp: (11) 98765-4321</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-envelope text-red-600 mt-1 mr-3"></i>
 <div>
 <h4 class="font-semibold">Email</h4>
 <p class="text-gray-600">contato@saboritaliano.com.br</p>
 </div>
 </div>
<div class="flex items-start">
 <i class="fas fa-clock text-red-600 mt-1 mr-3"></i>
 <div>
 <h4 class="font-semibold">Horário de Funcionamento</h4>
 <p class="text-gray-600">Terça a Domingo: 18h - 23h</p>
 <p class="text-gray-600">Sexta e Sábado: 18h - 00h</p>
 </div>
 </div>
 </div>
<div class="mt-6">
 <h4 class="font-semibold mb-2">Siga-nos</h4>
 <div class="flex space-x-4">
 <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-red-600 hover:text-red-800 text-2xl"><i class="fab fa-whatsapp"></i></a>
 </div>
 </div>
 </div>
 </div>
<div class="lg:w-1/2">
 <div class="bg-gray-100 p-6 rounded-lg h-full">
 <h3 class="text-xl font-bold mb-4 text-red-700">Mensagem</h3>
 <form id="contact-form">
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="contact-name">Nome</label>
 <input type="text" id="contact-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="contact-email">Email</label>
 <input type="email" id="contact-email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="contact-subject">Assunto</label>
 <input type="text" id="contact-subject" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required>
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2" for="contact-message">Mensagem</label>
 <textarea id="contact-message" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500" required></textarea>
 </div>
 <button type="submit" class="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md transition duration-300">
 Enviar Mensagem
 </button>
 </form>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Pizza Detail Modal -->
 <div id="pizza-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
 <div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
 <div class="pizza-detail text-white p-6 rounded-t-lg">
 <div class="flex justify-between items-start">
 <div>
 <h2 id="modal-pizza-name" class="text-3xl font-bold mb-2">Nome da Pizza</h2>
 <p id="modal-pizza-category" class="bg-white text-red-700 px-2 py-1 rounded-full text-xs inline-block mb-4">Categoria</p>
 </div>
 <button id="close-modal" class="text-white hover:text-yellow-300 text-2xl">&times;</button>
 </div>
 <p id="modal-pizza-description" class="mb-4">Descrição da pizza</p>
 <div class="flex items-center">
 <span id="modal-pizza-price" class="text-2xl font-bold mr-4">R$ 00,00</span>
 <div class="flex items-center bg-white bg-opacity-20 rounded-full px-3 py-1">
 <i class="fas fa-star text-yellow-300 mr-1"></i>
 <span>4.9</span>
 </div>
 </div>
 </div>
<div class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
 <div>
 <img id="modal-pizza-image" src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3" alt="Pizza" class="w-full rounded-lg">
 </div>
 <div>
 <h3 class="text-xl font-bold mb-4 text-red-700">Ingredientes</h3>
 <ul id="modal-pizza-ingredients" class="list-disc pl-5 space-y-2">
 <!-- Ingredients will be added here -->
 </ul>
<div class="mt-8">
 <h3 class="text-xl font-bold mb-4 text-red-700">Tamanho</h3>
 <div class="flex space-x-4 mb-4">
 <label class="flex items-center">
 <input type="radio" name="size" value="small" class="h-4 w-4 text-red-600 focus:ring-red-500" checked>
 <span class="ml-2">Pequena (30cm)</span>
 </label>
 <label class="flex items-center">
 <input type="radio" name="size" value="medium" class="h-4 w-4 text-red-600 focus:ring-red-500">
 <span class="ml-2">Média (35cm)</span>
 </label>
 <label class="flex items-center">
 <input type="radio" name="size" value="large" class="h-4 w-4 text-red-600 focus:ring-red-500">
 <span class="ml-2">Grande (40cm)</span>
 </label>
 </div>
<h3 class="text-xl font-bold mb-4 text-red-700">Adicionais</h3>
 <div class="space-y-2">
 <label class="flex items-center">
 <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="extra-cheese">
 <span class="ml-2">Queijo Extra (+R$ 5,00)</span>
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="pepperoni">
 <span class="ml-2">Pepperoni Extra (+R$ 7,00)</span>
 </label>
 <label class="flex items-center">
 <input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500" value="mushrooms">
 <span class="ml-2">Cogumelos Extra (+R$ 4,00)</span>
 </label>
 </div>
 </div>
 </div>
 </div>
<div class="flex justify-between items-center border-t border-gray-200 pt-4">
 <div class="flex items-center">
 <button id="decrease-quantity" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-l">
 -
 </button>
 <span id="quantity" class="bg-gray-100 px-4 py-2">1</span>
 <button id="increase-quantity" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-r">
 +
 </button>
 </div>
 <button id="add-to-cart" class="bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-full transition duration-300">
 Adicionar ao Carrinho - R$ <span id="modal-total-price">00,00</span>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Cart Sidebar -->
 <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
 <div class="p-6">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-bold text-red-700">Seu Carrinho</h2>
 <button id="close-cart" class="text-gray-500 hover:text-red-700 text-2xl">&times;</button>
 </div>
<div id="sidebar-cart-items">
 <!-- Cart items will be loaded here -->
 <p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>
 </div>
<div class="border-t border-gray-300 pt-4 mt-4">
 <div class="flex justify-between mb-2">
 <span class="font-semibold">Subtotal:</span>
 <span id="sidebar-subtotal">R$ 0,00</span>
 </div>
 <div class="flex justify-between mb-2">
 <span class="font-semibold">Taxa de Entrega:</span>
 <span id="sidebar-delivery-fee">R$ 8,00</span>
 </div>
 <div class="flex justify-between text-lg font-bold">
 <span>Total:</span>
 <span id="sidebar-total">R$ 8,00</span>
 </div>
 </div>
<a href="#delivery" id="checkout-btn" class="block w-full bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-4 rounded-md text-center mt-6 transition duration-300">
 Finalizar Pedido
 </a>
<button id="continue-shopping" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-4 rounded-md text-center mt-4 transition duration-300">
 Continuar Comprando
 </button>
 </div>
 </div>
<!-- Order Confirmation Modal -->
 <div id="order-confirmation" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
 <div class="bg-white rounded-lg max-w-md w-full p-6 text-center">
 <div class="text-green-500 text-6xl mb-4">
 <i class="fas fa-check-circle"></i>
 </div>
 <h2 class="text-2xl font-bold mb-4 text-red-700">Pedido Confirmado!</h2>
 <p class="mb-6">Seu pedido foi recebido e está sendo preparado. Obrigado por escolher a Pizzaria Sabor Italiano!</p>
 <p class="font-semibold mb-2">Número do Pedido: <span id="order-number" class="text-red-700">#12345</span></p>
 <p class="mb-6">Tempo estimado de entrega: <span class="font-semibold">45 minutos</span></p>
 <button id="close-confirmation" class="bg-red-700 hover:bg-red-800 text-white font-bold py-2 px-6 rounded-full transition duration-300">
 Fechar
 </button>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-xl font-bold mb-4 flex items-center">
 <i class="fas fa-pizza-slice text-2xl mr-2"></i> Sabor Italiano
 </h3>
 <p class="text-gray-400">Autêntica pizza italiana com delivery rápido ou retirada no balcão.</p>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Links Rápidos</h4>
 <ul class="space-y-2">
 <li><a href="#home" class="text-gray-400 hover:text-white transition">Início</a></li>
 <li><a href="#menu" class="text-gray-400 hover:text-white transition">Cardápio</a></li>
 <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li>
 <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Horário de Funcionamento</h4>
 <ul class="space-y-2 text-gray-400">
 <li class="flex justify-between"><span>Terça - Quinta:</span> <span>18h - 23h</span></li>
 <li class="flex justify-between"><span>Sexta - Sábado:</span> <span>18h - 00h</span></li>
 <li class="flex justify-between"><span>Domingo:</span> <span>18h - 22h</span></li>
 <li class="flex justify-between"><span>Segunda:</span> <span>Fechado</span></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
 <p class="text-gray-400 mb-4">Inscreva-se para receber promoções especiais!</p>
 <form class="flex">
 <input type="email" placeholder="Seu email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-red-500 w-full">
 <button type="submit" class="bg-red-700 hover:bg-red-800 px-4 rounded-r-md">
 <i class="fas fa-paper-plane"></i>
 </button>
 </form>
 <div class="flex space-x-4 mt-4">
 <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
 <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-whatsapp"></i></a>
 </div>
 </div>
 </div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
 <p>&copy; 2023 Pizzaria Sabor Italiano. Todos os direitos reservados.</p>
 </div>
 </div>
 </footer>
<script>
 // Pizza Data
 const pizzas = [
 {
 id: 1,
 name: "Margherita",
 category: "classic",
 price: 45.90,
 description: "A clássica pizza Margherita com molho de tomate, mussarela fresca, manjericão e azeite de oliva.",
 ingredients: ["Molho de tomate", "Mussarela fresca", "Manjericão fresco", "Azeite de oliva extra virgem"],
 image: "https://images.unsplash.com/photo-1574071318508-1cdbab80d002?ixlib=rb-4.0.3",
 rating: 4.8
 },
 {
 id: 2,
 name: "Pepperoni",
 category: "classic",
 price: 52.90,
 description: "Pizza com molho de tomate, mussarela e pepperoni em fatias finas.",
 ingredients: ["Molho de tomate", "Mussarela", "Pepperoni", "Orégano"],
 image: "https://images.unsplash.com/photo-1627626775846-122b778965ce?ixlib=rb-4.0.3",
 rating: 4.9
 },
 {
 id: 3,
 name: "Quatro Queijos",
 category: "classic",
 price: 58.90,
 description: "Combinação perfeita de quatro queijos: mussarela, gorgonzola, parmesão e provolone.",
 ingredients: ["Molho de tomate", "Mussarela", "Gorgonzola", "Parmesão", "Provolone"],
 image: "https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3",
 rating: 4.7
 },
 {
 id: 4,
 name: "Calabresa",
 category: "classic",
 price: 49.90,
 description: "Pizza tradicional com calabresa fatiada, cebola e mussarela.",
 ingredients: ["Molho de tomate", "Mussarela", "Calabresa", "Cebola"],
 image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3",
 rating: 4.6
 },
 {
 id: 5,
 name: "Frango com Catupiry",
 category: "special",
 price: 62.90,
 description: "Deliciosa combinação de frango desfiado com cremoso catupiry.",
 ingredients: ["Molho de tomate", "Mussarela", "Frango desfiado", "Catupiry", "Orégano"],
 image: "https://images.unsplash.com/photo-1653277449107-7b5373f0a1a1?ixlib=rb-4.0.3",
 rating: 4.9
 },
 {
 id: 6,
 name: "Portuguesa",
 category: "special",
 price: 65.90,
 description: "Pizza com presunto, mussarela, ovos, cebola, azeitonas e pimentão.",
 ingredients: ["Molho de tomate", "Mussarela", "Presunto", "Ovos", "Cebola", "Azeitonas", "Pimentão"],
 image: "https://images.unsplash.com/photo-1565299507177-b0ac66763828?ixlib=rb-4.0.3",
 rating: 4.7
 },
 {
 id: 7,
 name: "Vegetariana",
 category: "special",
 price: 59.90,
 description: "Pizza repleta de vegetais frescos: berinjela, abobrinha, pimentão e cebola.",
 ingredients: ["Molho de tomate", "Mussarela", "Berinjela", "Abobrinha", "Pimentão", "Cebola", "Azeitonas"],
 image: "https://images.unsplash.com/photo-1541745537411-b8046dc6d66c?ixlib=rb-4.0.3",
 rating: 4.8
 },
 {
 id: 8,
 name: "Napolitana",
 category: "special",
 price: 68.90,
 description: "Autêntica pizza napolitana com anchovas, alcaparras e azeitonas pretas.",
 ingredients: ["Molho de tomate", "Mussarela de búfala", "Anchovas", "Alcaparras", "Azeitonas pretas", "Manjericão"],
 image: "https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-4.0.3",
 rating: 4.9
 },
 {
 id: 9,
 name: "Romeu e Julieta",
 category: "dessert",
 price: 48.90,
 description: "Doce combinação de queijo minas e goiabada.",
 ingredients: ["Queijo minas", "Goiabada", "Açúcar de confeiteiro"],
 image: "https://images.unsplash.com/photo-1627626775846-122b778965ce?ixlib=rb-4.0.3",
 rating: 4.8
 },
 {
 id: 10,
 name: "Banana com Canela",
 category: "dessert",
 price: 42.90,
 description: "Pizza doce com banana, canela e leite condensado.",
 ingredients: ["Banana", "Canela", "Leite condensado", "Açúcar mascavo"],
 image: "https://images.unsplash.com/photo-1601924582970-9238bcb495d9?ixlib=rb-4.0.3",
 rating: 4.7
 }
 ];
 // Cart
 let cart = [];
 const deliveryFee = 8.00;
 // DOM Elements
 const pizzaMenu = document.getElementById('pizza-menu');
 const cartButton = document.getElementById('cart-button');
 const cartCount = document.getElementById('cart-count');
 const cartSidebar = document.getElementById('cart-sidebar');
 const closeCart = document.getElementById('close-cart');
 const continueShopping = document.getElementById('continue-shopping');
 const sidebarCartItems = document.getElementById('sidebar-cart-items');
 const sidebarSubtotal = document.getElementById('sidebar-subtotal');
 const sidebarTotal = document.getElementById('sidebar-total');
 const sidebarDeliveryFee = document.getElementById('sidebar-delivery-fee');
 const pizzaModal = document.getElementById('pizza-modal');
 const closeModal = document.getElementById('close-modal');
 const modalPizzaName = document.getElementById('modal-pizza-name');
 const modalPizzaCategory = document.getElementById('modal-pizza-category');
 const modalPizzaDescription = document.getElementById('modal-pizza-description');
 const modalPizzaPrice = document.getElementById('modal-pizza-price');
 const modalPizzaImage = document.getElementById('modal-pizza-image');
 const modalPizzaIngredients = document.getElementById('modal-pizza-ingredients');
 const quantityElement = document.getElementById('quantity');
 const decreaseQuantity = document.getElementById('decrease-quantity');
 const increaseQuantity = document.getElementById('increase-quantity');
 const addToCart = document.getElementById('add-to-cart');
 const modalTotalPrice = document.getElementById('modal-total-price');
 const categoryButtons = document.querySelectorAll('.category-btn');
 const cartItems = document.getElementById('cart-items');
 const subtotal = document.getElementById('subtotal');
 const total = document.getElementById('total');
 const deliveryForm = document.getElementById('delivery-form');
 const orderConfirmation = document.getElementById('order-confirmation');
 const closeConfirmation = document.getElementById('close-confirmation');
 const orderNumber = document.getElementById('order-number');
 const checkoutBtn = document.getElementById('checkout-btn');
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
 // Current pizza being viewed in modal
 let currentPizza = null;
 let currentQuantity = 1;
 let currentSize = 'small';
 let currentExtras = [];
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
 loadMenu('all');
 setupEventListeners();
 });
 // Load menu based on category
 function loadMenu(category) {
 pizzaMenu.innerHTML = '';
const filteredPizzas = category === 'all'
? pizzas
: pizzas.filter(pizza => pizza.category === category);
filteredPizzas.forEach(pizza => {
 const pizzaCard = document.createElement('div');
 pizzaCard.className = 'pizza-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition cursor-pointer';
 pizzaCard.dataset.id = pizza.id;
pizzaCard.innerHTML = `
 <div class="relative">
 <img src="${pizza.image}" alt="${pizza.name}" class="w-full h-48 object-cover">
 <span class="absolute top-2 right-2 bg-white text-red-700 px-2 py-1 rounded-full text-xs">${getCategoryName(pizza.category)}</span>
 </div>
 <div class="p-4">
 <div class="flex justify-between items-start mb-2">
 <h3 class="text-xl font-bold text-gray-800">${pizza.name}</h3>
 <span class="text-lg font-bold text-red-700">R$ ${pizza.price.toFixed(2).replace('.', ',')}</span>
 </div>
 <p class="text-gray-600 text-sm mb-4">${pizza.description}</p>
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <i class="fas fa-star text-yellow-400 mr-1"></i>
 <span class="text-sm">${pizza.rating}</span>
 </div>
 <button class="view-details-btn bg-red-700 hover:bg-red-800 text-white text-sm font-bold py-2 px-4 rounded-full transition duration-300" data-id="${pizza.id}">
 Ver Detalhes
 </button>
 </div>
 </div>
 `;
pizzaMenu.appendChild(pizzaCard);
 });
// Add event listeners to view details buttons
 document.querySelectorAll('.view-details-btn').forEach(button => {
 button.addEventListener('click', (e) => {
 e.stopPropagation();
 const pizzaId = parseInt(button.dataset.id);
 showPizzaDetails(pizzaId);
 });
 });
// Add event listeners to pizza cards
 document.querySelectorAll('.pizza-card').forEach(card => {
 card.addEventListener('click', () => {
 const pizzaId = parseInt(card.dataset.id);
 showPizzaDetails(pizzaId);
 });
 });
 }
 // Get category name
 function getCategoryName(category) {
 switch(category) {
 case 'classic': return 'Clássica';
 case 'special': return 'Especial';
 case 'dessert': return 'Sobremesa';
 default: return '';
 }
 }
 // Show pizza details in modal
 function showPizzaDetails(pizzaId) {
 currentPizza = pizzas.find(pizza => pizza.id === pizzaId);
 currentQuantity = 1;
 currentSize = 'small';
 currentExtras = [];
modalPizzaName.textContent = currentPizza.name;
 modalPizzaCategory.textContent = getCategoryName(currentPizza.category);
 modalPizzaDescription.textContent = currentPizza.description;
 modalPizzaPrice.textContent = `R$ ${currentPizza.price.toFixed(2).replace('.', ',')}`;
 modalPizzaImage.src = currentPizza.image;
 modalPizzaImage.alt = currentPizza.name;
// Clear ingredients list
 modalPizzaIngredients.innerHTML = '';
// Add ingredients
 currentPizza.ingredients.forEach(ingredient => {
 const li = document.createElement('li');
 li.textContent = ingredient;
 modalPizzaIngredients.appendChild(li);
 });
// Reset quantity
 quantityElement.textContent = currentQuantity;
// Calculate total price
 updateModalTotalPrice();
// Show modal
 pizzaModal.classList.remove('hidden');
 }
 // Update modal total price
 function updateModalTotalPrice() {
 let price = currentPizza.price;
// Size adjustments
 if (currentSize === 'medium') price += 5;
 if (currentSize === 'large') price += 10;
// Extras
 currentExtras.forEach(extra => {
 if (extra === 'extra-cheese') price += 5;
 if (extra === 'pepperoni') price += 7;
 if (extra === 'mushrooms') price += 4;
 });
// Quantity
 price *= currentQuantity;
modalTotalPrice.textContent = price.toFixed(2).replace('.', ',');
 }
 // Add to cart
 function addPizzaToCart() {
 let price = currentPizza.price;
// Size adjustments
 if (currentSize === 'medium') price += 5;
 if (currentSize === 'large') price += 10;
// Extras
 const extras = [];
 currentExtras.forEach(extra => {
 if (extra === 'extra-cheese') {
 price += 5;
 extras.push('Queijo Extra');
 }
 if (extra === 'pepperoni') {
 price += 7;
 extras.push('Pepperoni Extra');
 }
 if (extra === 'mushrooms') {
 price += 4;
 extras.push('Cogumelos Extra');
 }
 });
// Add to cart
 cart.push({
 id: currentPizza.id,
 name: currentPizza.name,
 price: price,
 quantity: currentQuantity,
 size: currentSize,
 extras: extras
 });
// Update cart count
 updateCartCount();
// Update cart display
 updateCartDisplay();
// Close modal
 pizzaModal.classList.add('hidden');
// Show success message
 alert(`${currentPizza.name} foi adicionada ao carrinho!`);
 }
 // Update cart count
 function updateCartCount() {
 const count = cart.reduce((total, item) => total + item.quantity, 0);
 cartCount.textContent = count;
 }
 // Update cart display
 function updateCartDisplay() {
 // Sidebar cart
 if (cart.length === 0) {
 sidebarCartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>';
 checkoutBtn.classList.add('opacity-50', 'cursor-not-allowed');
 checkoutBtn.disabled = true;
 } else {
 sidebarCartItems.innerHTML = '';
cart.forEach((item, index) => {
 const cartItem = document.createElement('div');
 cartItem.className = 'cart-item bg-white p-4 rounded-lg mb-4 shadow-sm';
cartItem.innerHTML = `
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold">${item.name}</h4>
 <button class="remove-item text-red-600 hover:text-red-800" data-index="${index}">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="text-sm text-gray-600 mb-2">
 ${item.size === 'small' ? 'Pequena' : item.size === 'medium' ? 'Média' : 'Grande'}${item.extras.length > 0 ? ' • ' + item.extras.join(', ') : ''}
 </div>
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <button class="decrease-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
 <i class="fas fa-minus text-xs"></i>
 </button>
 <span class="mx-2">${item.quantity}</span>
 <button class="increase-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
 <i class="fas fa-plus text-xs"></i>
 </button>
 </div>
 <span class="font-semibold">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</span>
 </div>
 `;
sidebarCartItems.appendChild(cartItem);
 });
checkoutBtn.classList.remove('opacity-50', 'cursor-not-allowed');
 checkoutBtn.disabled = false;
 }
// Calculate totals
 calculateTotals();
// Delivery section cart
 if (cart.length === 0) {
 cartItems.innerHTML = '<p class="text-gray-500 text-center py-8">Seu carrinho está vazio</p>';
 } else {
 cartItems.innerHTML = '';
cart.forEach((item, index) => {
 const cartItem = document.createElement('div');
 cartItem.className = 'cart-item bg-white p-4 rounded-lg mb-4 shadow-sm';
cartItem.innerHTML = `
 <div class="flex justify-between items-start mb-2">
 <h4 class="font-bold">${item.name}</h4>
 <button class="remove-item text-red-600 hover:text-red-800" data-index="${index}">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="text-sm text-gray-600 mb-2">
 ${item.size === 'small' ? 'Pequena' : item.size === 'medium' ? 'Média' : 'Grande'}${item.extras.length > 0 ? ' • ' + item.extras.join(', ') : ''}
 </div>
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <button class="decrease-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
 <i class="fas fa-minus text-xs"></i>
 </button>
 <span class="mx-2">${item.quantity}</span>
 <button class="increase-quantity text-gray-500 hover:text-red-700 px-2" data-index="${index}">
 <i class="fas fa-plus text-xs"></i>
 </button>
 </div>
 <span class="font-semibold">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</span>
 </div>
 `;
cartItems.appendChild(cartItem);
 });
 }
// Add event listeners to remove buttons
 document.querySelectorAll('.remove-item').forEach(button => {
 button.addEventListener('click', (e) => {
 e.stopPropagation();
 const index = parseInt(button.dataset.index);
 cart.splice(index, 1);
 updateCartCount();
 updateCartDisplay();
 });
 });
// Add event listeners to quantity buttons
 document.querySelectorAll('.decrease-quantity').forEach(button => {
 button.addEventListener('click', (e) => {
 e.stopPropagation();
 const index = parseInt(button.dataset.index);
 if (cart[index].quantity > 1) {
 cart[index].quantity--;
 updateCartCount();
 updateCartDisplay();
 }
 });
 });
document.querySelectorAll('.increase-quantity').forEach(button => {
 button.addEventListener('click', (e) => {
 e.stopPropagation();
 const index = parseInt(button.dataset.index);
 cart[index].quantity++;
 updateCartCount();
 updateCartDisplay();
 });
 });
 }
 // Calculate totals
 function calculateTotals() {
 const subtotalValue = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
 const totalValue = subtotalValue + deliveryFee;
// Sidebar
 sidebarSubtotal.textContent = `R$ ${subtotalValue.toFixed(2).replace('.', ',')}`;
 sidebarDeliveryFee.textContent = `R$ ${deliveryFee.toFixed(2).replace('.', ',')}`;
 sidebarTotal.textContent = `R$ ${totalValue.toFixed(2).replace('.', ',')}`;
// Delivery section
 subtotal.textContent = `R$ ${subtotalValue.toFixed(2).replace('.', ',')}`;
 total.textContent = `R$ ${totalValue.toFixed(2).replace('.', ',')}`;
 }
 // Submit delivery form
 function submitDeliveryForm(e) {
 e.preventDefault();
if (cart.length === 0) {
 alert('Seu carrinho está vazio. Adicione itens antes de finalizar o pedido.');
 return;
 }
// In a real application, you would send this data to your backend
 const orderData = {
 customer: {
 name: document.getElementById('name').value,
 phone: document.getElementById('phone').value,
 address: document.getElementById('address').value,
 complement: document.getElementById('complement').value
 },
 payment: document.getElementById('payment').value,
 notes: document.getElementById('notes').value,
 items: cart,
 subtotal: cart.reduce((total, item) => total + (item.price * item.quantity), 0),
 deliveryFee: deliveryFee,
 total: cart.reduce((total, item) => total + (item.price * item.quantity), 0) + deliveryFee,
 date: new Date().toISOString()
 };
// Generate random order number
 const randomOrderNumber = Math.floor(Math.random() * 90000) + 10000;
 orderNumber.textContent = `#${randomOrderNumber}`;
// Show confirmation modal
 orderConfirmation.classList.remove('hidden');
// Reset form and cart
 deliveryForm.reset();
 cart = [];
 updateCartCount();
 updateCartDisplay();
 }
 // Setup event listeners
 function setupEventListeners() {
 // Mobile menu toggle
 mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Cart button
 cartButton.addEventListener('click', () => {
 cartSidebar.classList.remove('translate-x-full');
 });
// Close cart
 closeCart.addEventListener('click', () => {
 cartSidebar.classList.add('translate-x-full');
 });
// Continue shopping
 continueShopping.addEventListener('click', () => {
 cartSidebar.classList.add('translate-x-full');
 });
// Close modal
 closeModal.addEventListener('click', () => {
 pizzaModal.classList.add('hidden');
 });
// Quantity controls
 decreaseQuantity.addEventListener('click', () => {
 if (currentQuantity > 1) {
 currentQuantity--;
 quantityElement.textContent = currentQuantity;
 updateModalTotalPrice();
 }
 });
increaseQuantity.addEventListener('click', () => {
 currentQuantity++;
 quantityElement.textContent = currentQuantity;
 updateModalTotalPrice();
 });
// Size selection
 document.querySelectorAll('input[name="size"]').forEach(radio => {
 radio.addEventListener('change', () => {
 currentSize = radio.value;
 updateModalTotalPrice();
 });
 });
// Extras selection
 document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
 checkbox.addEventListener('change', () => {
 if (checkbox.checked) {
 currentExtras.push(checkbox.value);
 } else {
 currentExtras = currentExtras.filter(extra => extra !== checkbox.value);
 }
 updateModalTotalPrice();
 });
 });
// Add to cart
 addToCart.addEventListener('click', addPizzaToCart);
// Category buttons
 categoryButtons.forEach(button => {
 button.addEventListener('click', () => {
 categoryButtons.forEach(btn => btn.classList.remove('bg-red-700', 'text-white'));
 button.classList.add('bg-red-700', 'text-white');
 loadMenu(button.dataset.category);
 });
 });
// Delivery form
 deliveryForm.addEventListener('submit', submitDeliveryForm);
// Close confirmation
 closeConfirmation.addEventListener('click', () => {
 orderConfirmation.classList.add('hidden');
 });
// Checkout button
 checkoutBtn.addEventListener('click', () => {
 cartSidebar.classList.add('translate-x-full');
 // Scroll to delivery section
 document.getElementById('delivery').scrollIntoView({ behavior: 'smooth' });
 });
// Close modal when clicking outside
 pizzaModal.addEventListener('click', (e) => {
 if (e.target === pizzaModal) {
 pizzaModal.classList.add('hidden');
 }
 });
// Close order confirmation when clicking outside
 orderConfirmation.addEventListener('click', (e) => {
 if (e.target === orderConfirmation) {
 orderConfirmation.classList.add('hidden');
 }
 });
 }
 </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=LIMATEC/pizzaria" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>