Download index.html from LIMATEC/pizzaria: direct link, hf CLI and curl.
- Browser
- Download file 60.4 kB
-
https://huggingface.co/spaces/LIMATEC/pizzaria/resolve/main/index.html
- Command line
-
hf download hf://spaces/LIMATEC/pizzaria/index.html
-
curl -L -o index.html https://huggingface.co/spaces/LIMATEC/pizzaria/resolve/main/index.html
60.4 kB
| <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">×</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">×</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>© 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> |