Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PRÉ ARRAIÁ DO BODE - A Maior Festa Junina Gourmet do Ceará</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@400;700;900&family=Roboto:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f1e9; | |
| } | |
| .festival-title { | |
| text-shadow: 3px 3px 0 #8B0000, 5px 5px 0 #FFD700; | |
| } | |
| .menu-item { | |
| transition: all 0.3s ease; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .table { | |
| position: relative; | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| font-weight: bold; | |
| font-size: 10px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .table-seat { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin: 1px; | |
| } | |
| .zone-a { | |
| background-color: rgba(255, 215, 0, 0.3); | |
| border: 2px solid #FFD700; | |
| } | |
| .zone-b { | |
| background-color: rgba(139, 0, 0, 0.3); | |
| border: 2px solid #8B0000; | |
| } | |
| .barraca { | |
| background-color: rgba(0, 128, 0, 0.3); | |
| border: 2px solid #008000; | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 10px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-weight: bold; | |
| } | |
| .sold-table { | |
| background-color: rgba(0, 100, 0, 0.7); | |
| border: 2px solid #006400; | |
| color: white; | |
| } | |
| .map-container { | |
| background-image: url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg'); | |
| background-size: cover; | |
| } | |
| .banner { | |
| background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://img.freepik.com/free-vector/hand-drawn-brazilian-festival-background_23-2149430438.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 100; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| } | |
| .modal-content { | |
| background-color: #f8f1e9; | |
| margin: 5% auto; | |
| padding: 20px; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 500px; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
| } | |
| .sponsor-logo { | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 5px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| .food-area { | |
| background-color: rgba(255, 165, 0, 0.2); | |
| border: 2px dashed orange; | |
| } | |
| .cashier-area { | |
| background-color: rgba(0, 0, 255, 0.2); | |
| border: 2px dashed blue; | |
| } | |
| .stage-area { | |
| background-color: rgba(255, 0, 0, 0.2); | |
| border: 2px dashed red; | |
| } | |
| .corridor { | |
| background-color: rgba(255, 255, 255, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Banner --> | |
| <header class="banner text-white py-16 md:py-24 text-center"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <h1 class="festival-title text-4xl md:text-7xl font-black mb-4">PRÉ ARRAIÁ DO BODE</h1> | |
| <p class="text-xl md:text-2xl font-bold mb-8">A maior festa junina gourmet fora de época do Ceará</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-red-800 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full text-lg transition-all"> | |
| <i class="fas fa-calendar-alt mr-2"></i> 17 de Maio de 2025 | |
| </button> | |
| <button class="bg-yellow-600 hover:bg-yellow-500 text-white font-bold py-3 px-6 rounded-full text-lg transition-all"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> Sede da Loja Maçônica Deus e Pacajus nº. 81 | |
| </button> | |
| </div> | |
| <div class="mt-8 text-lg"> | |
| <p><i class="fas fa-phone-alt mr-2"></i> Contatos: 85-98424-3806 (Elisaldo Guerreiro) | 85-99912-5300 (João Bandeira Jr.)</p> | |
| <p class="mt-2"><i class="fas fa-clock mr-2"></i> Início às 20h - Sem hora pra acabar!</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- About Section --> | |
| <section class="py-12 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-lg p-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 text-red-800">Sobre o Evento</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-lg mb-6">O Pré Arraiá do Bode é o maior evento junino gourmet fora de época do Ceará, trazendo o melhor da culinária regional com um toque de sofisticação em um ambiente animado e descontraído.</p> | |
| <p class="text-lg mb-6">Nesta edição especial, teremos o lançamento do novo trabalho de João Bandeira Júnior e a participação especial do renomado Clécio Sanfoneiro.</p> | |
| <p class="text-lg">Endereço: Rua Cônego Eduardo Araripe 2135 - Centro, Pacajus - CE</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3979.123456789012!2d-38.12345678901234!3d-4.123456789012345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNMKwMDcnMjQuNCJTIDM4wrAwNyczNi4wIlc!5e0!3m2!1spt-BR!2sbr!4v1234567890123!5m2!1spt-BR!2sbr" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Menu Section --> | |
| <section class="py-12 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-red-800">Cardápio</h2> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-center text-yellow-600 border-b-2 border-yellow-600 pb-2">Comidas Típicas</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Food Items --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-shrimp text-6xl text-red-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Camarão à Moda do Chefe</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 30,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-utensils text-6xl text-yellow-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Porção de Vatapá com Paçoca, Salada e Arroz</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 20,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-drumstick-bite text-6xl text-pink-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Porção de Creme de Frango com Paçoca, Salada e Arroz</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 20,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-orange-100 flex items-center justify-center"> | |
| <i class="fas fa-bacon text-6xl text-orange-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Carne de Sol com Macaxeira Frita</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 40,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-fish text-6xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Bolinho de Bacalhau</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 35,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-otter text-6xl text-green-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Isca de Peixe</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 35,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-crab text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Patinha de Caranguejo</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 35,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-fire text-6xl text-red-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Churrasquinho Gourmet</h3> | |
| <div class="flex flex-col"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span>1 unidade</span> | |
| <span class="text-yellow-600 font-bold">R$ 8,00</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>3 unidades</span> | |
| <span class="text-yellow-600 font-bold">R$ 20,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-cheese text-6xl text-yellow-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Queijo à Milanesa</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 30,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-orange-100 flex items-center justify-center"> | |
| <i class="fas fa-sausage text-6xl text-orange-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Calabresa Acebolada no Molho de Barbecue e Mostarda</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-yellow-600 font-bold text-lg">R$ 35,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-center text-yellow-600 border-b-2 border-yellow-600 pb-2">Bebidas</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Drink Items --> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-beer text-6xl text-green-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Cerveja Heineken 350ml</h3> | |
| <div class="flex flex-col"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span>1 unidade</span> | |
| <span class="text-yellow-600 font-bold">R$ 10,00</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Balde com 6</span> | |
| <span class="text-yellow-600 font-bold">R$ 50,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-beer text-6xl text-green-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Cerveja Brahma 350ml</h3> | |
| <div class="flex flex-col"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span>1 unidade</span> | |
| <span class="text-yellow-600 font-bold">R$ 8,00</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Balde com 6</span> | |
| <span class="text-yellow-600 font-bold">R$ 40,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-wine-glass-alt text-6xl text-purple-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Vinhos 750ml</h3> | |
| <div class="text-sm"> | |
| <p class="mb-1">Carbenet Sauvignon</p> | |
| <p class="mb-1">Tannat</p> | |
| <p class="mb-1">Malbec</p> | |
| <p class="mb-2">Merlot</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">Preço:</span> | |
| <span class="text-yellow-600 font-bold">R$ 100,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-amber-100 flex items-center justify-center"> | |
| <i class="fas fa-glass-whiskey text-6xl text-amber-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Whiskies</h3> | |
| <div class="text-sm"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Red Label</span> | |
| <span class="text-yellow-600 font-bold">R$ 150,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Chivas</span> | |
| <span class="text-yellow-600 font-bold">R$ 200,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Old Parr</span> | |
| <span class="text-yellow-600 font-bold">R$ 250,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Ballantine's</span> | |
| <span class="text-yellow-600 font-bold">R$ 140,00</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Johnnie Walker</span> | |
| <span class="text-yellow-600 font-bold">R$ 230,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-cocktail text-6xl text-red-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Refrigerantes Lata</h3> | |
| <div class="text-sm"> | |
| <p class="mb-1">Coca Cola</p> | |
| <p class="mb-1">Guaraná Antarctica</p> | |
| <p class="mb-2">Água Tônica</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">Preço:</span> | |
| <span class="text-yellow-600 font-bold">R$ 8,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="menu-item bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <div class="h-40 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-tint text-6xl text-blue-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Outras Bebidas</h3> | |
| <div class="text-sm"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Água Mineral 500ml</span> | |
| <span class="text-yellow-600 font-bold">R$ 4,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Energético Red Bull 250ml</span> | |
| <span class="text-yellow-600 font-bold">R$ 25,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Suco de Caixinha Kapo 200ml</span> | |
| <span class="text-yellow-600 font-bold">R$ 7,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Suco da Fruta 200ml</span> | |
| <span class="text-yellow-600 font-bold">R$ 5,00</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span>Gêlo de Côco em Cubos (Pct)</span> | |
| <span class="text-yellow-600 font-bold">R$ 15,00</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Gêlo em Cubo Normal (Pct)</span> | |
| <span class="text-yellow-600 font-bold">R$ 10,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <section class="py-12 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-red-800">Mapa do Evento</h2> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <div class="flex flex-wrap justify-between mb-6 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-yellow-500 mr-2"></div> | |
| <span>Zona A (100 mesas) - Área mais agitada</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-red-800 mr-2"></div> | |
| <span>Zona B (100 mesas) - Área menos agitada</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-green-600 mr-2"></div> | |
| <span>Barracas de Bebidas (4 unidades)</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-orange-500 mr-2"></div> | |
| <span>Área de Comidas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 bg-blue-500 mr-2"></div> | |
| <span>Caixa</span> | |
| </div> | |
| </div> | |
| <div class="relative h-[500px] w-full bg-gray-100 rounded-lg overflow-hidden"> | |
| <!-- Stage --> | |
| <div class="stage-area absolute top-4 left-1/2 transform -translate-x-1/2 w-3/4 h-16 rounded-lg flex items-center justify-center font-bold text-lg"> | |
| PALCO PRINCIPAL | |
| </div> | |
| <!-- Corridor --> | |
| <div class="corridor absolute top-24 left-1/2 transform -translate-x-1/2 w-8 h-[400px]"></div> | |
| <!-- Zone A --> | |
| <div class="absolute top-24 left-4 w-[calc(50%-30px)] h-[400px] border-2 border-yellow-500 rounded-lg p-2 overflow-auto"> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <!-- Generate 100 tables for Zone A (001-100) --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const zoneA = document.querySelector('.zone-a-tables'); | |
| for (let i = 1; i <= 100; i++) { | |
| const tableNum = i.toString().padStart(3, '0'); | |
| const table = document.createElement('div'); | |
| table.className = 'table zone-a'; | |
| table.id = `table-${tableNum}`; | |
| table.innerHTML = ` | |
| <div>M${tableNum}</div> | |
| <div> | |
| <div class="table-seat bg-yellow-500"></div> | |
| <div class="table-seat bg-yellow-500"></div> | |
| <div class="table-seat bg-yellow-500"></div> | |
| <div class="table-seat bg-yellow-500"></div> | |
| </div> | |
| `; | |
| table.addEventListener('click', function() { | |
| openReservationModal(tableNum, 'A'); | |
| }); | |
| zoneA.appendChild(table); | |
| } | |
| }); | |
| </script> | |
| <div class="zone-a-tables grid grid-cols-5 gap-2"></div> | |
| </div> | |
| </div> | |
| <!-- Zone B --> | |
| <div class="absolute top-24 right-4 w-[calc(50%-30px)] h-[400px] border-2 border-red-800 rounded-lg p-2 overflow-auto"> | |
| <div class="grid grid-cols-5 gap-2"> | |
| <!-- Generate 100 tables for Zone B (101-200) --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const zoneB = document.querySelector('.zone-b-tables'); | |
| for (let i = 101; i <= 200; i++) { | |
| const tableNum = i.toString(); | |
| const table = document.createElement('div'); | |
| table.className = 'table zone-b'; | |
| table.id = `table-${tableNum}`; | |
| table.innerHTML = ` | |
| <div>M${tableNum}</div> | |
| <div> | |
| <div class="table-seat bg-red-800"></div> | |
| <div class="table-seat bg-red-800"></div> | |
| <div class="table-seat bg-red-800"></div> | |
| <div class="table-seat bg-red-800"></div> | |
| </div> | |
| `; | |
| table.addEventListener('click', function() { | |
| openReservationModal(tableNum, 'B'); | |
| }); | |
| zoneB.appendChild(table); | |
| } | |
| }); | |
| </script> | |
| <div class="zone-b-tables grid grid-cols-5 gap-2"></div> | |
| </div> | |
| </div> | |
| <!-- Drink Stands --> | |
| <div class="barraca absolute bottom-4 left-1/4 transform -translate-x-1/2 bg-green-600"> | |
| B1 | |
| </div> | |
| <div class="barraca absolute bottom-4 left-2/4 transform -translate-x-1/2 bg-green-600"> | |
| B2 | |
| </div> | |
| <div class="barraca absolute bottom-4 left-3/4 transform -translate-x-1/2 bg-green-600"> | |
| B3 | |
| </div> | |
| <div class="barraca absolute bottom-4 right-4 bg-green-600"> | |
| B4 | |
| </div> | |
| <!-- Food Area --> | |
| <div class="food-area absolute top-1/2 left-4 w-24 h-24 rounded-lg flex items-center justify-center text-center text-sm font-bold"> | |
| Área de Retirada de Comidas | |
| </div> | |
| <!-- Cashier --> | |
| <div class="cashier-area absolute top-1/2 right-4 w-24 h-24 rounded-lg flex items-center justify-center text-center text-sm font-bold"> | |
| Caixa (3 atendentes) | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold mb-4 text-red-800">Zona A - Área Mais Agitada</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-2"></div> Vista privilegiada para o palco</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-2"></div> Próximo às barracas de bebidas B1 e B2</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-2"></div> Melhor experiência musical</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-yellow-500 mr-2"></div> Ideal para quem quer curtir a festa</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <h3 class="text-xl font-bold mb-4 text-red-800">Zona B - Área Menos Agitada</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-red-800 mr-2"></div> Ambiente mais tranquilo para conversas</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-red-800 mr-2"></div> Próximo às barracas de bebidas B3 e B4</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-red-800 mr-2"></div> Fácil acesso à área de comidas</li> | |
| <li class="flex items-center"><div class="w-3 h-3 bg-red-800 mr-2"></div> Ideal para grupos familiares</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reservation Modal --> | |
| <div id="reservationModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close absolute top-2 right-4 text-2xl cursor-pointer" onclick="closeModal()">×</span> | |
| <h2 id="modalTitle" class="text-2xl font-bold mb-4 text-red-800">Reservar Mesa</h2> | |
| <form id="reservationForm" class="space-y-4"> | |
| <input type="hidden" id="tableNumber"> | |
| <input type="hidden" id="tableZone"> | |
| <div> | |
| <label for="name" class="block font-medium">Nome Completo*</label> | |
| <input type="text" id="name" required class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label for="email" class="block font-medium">E-mail*</label> | |
| <input type="email" id="email" required class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block font-medium">Telefone*</label> | |
| <input type="tel" id="phone" required class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label for="masonicLodge" class="block font-medium">Loja Maçônica (se aplicável)</label> | |
| <input type="text" id="masonicLodge" class="w-full p-2 border rounded"> | |
| </div> | |
| <div> | |
| <label class="block font-medium">Forma de Pagamento</label> | |
| <div class="mt-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="payment" value="pix" checked class="form-radio"> | |
| <span class="ml-2">PIX (Chave CNPJ: 23553936000145)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <p class="font-bold text-yellow-800">Instruções para Pagamento:</p> | |
| <p class="text-sm mt-2">1. Faça uma transferência via PIX para a chave CNPJ: 23553936000145</p> | |
| <p class="text-sm">2. Envie o comprovante para os números: 85-98424-3806 ou 85-99912-5300</p> | |
| <p class="text-sm">3. Sua mesa será confirmada após verificação do pagamento</p> | |
| </div> | |
| <button type="button" onclick="submitReservation()" class="w-full bg-red-800 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition-all"> | |
| Confirmar Reserva | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Sponsors Section --> | |
| <section class="py-12 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-red-800">Patrocinadores e Apoiadores</h2> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-center text-yellow-600 border-b-2 border-yellow-600 pb-2">Patrocinadores</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">VITAMAX INDÚSTRIAS DE PÃES</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">FARMÁCIA DO TINTIN</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">VIA CALÇADOS</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">RESTAURANTE SABOR CASEIRO</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">GALVÃO E CIA LTDA</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">JAJA VEÍCULOS</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">DÉ DO CAMARÃO</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6 text-center text-yellow-600 border-b-2 border-yellow-600 pb-2">Apoiadores</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">LIMA ADVOCACIA</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">LH7</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">PERFUMES & COSMÉTICOS</span> | |
| </div> | |
| <div class="sponsor-logo"> | |
| <span class="font-bold">ÁGUA ALICE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Artists Section --> | |
| <section class="py-12 px-4 md:px-8 max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-red-800">Atrações Musicais</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="h-48 bg-red-800 flex items-center justify-center"> | |
| <i class="fas fa-music text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Lançamento do Novo Trabalho</h3> | |
| <p class="text-lg font-bold mb-4">João Bandeira Júnior</p> | |
| <p class="text-gray-600">O cantor e compositor apresentará seu mais recente trabalho musical exclusivamente no Pré Arraiá do Bode.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="h-48 bg-yellow-600 flex items-center justify-center"> | |
| <i class="fas fa-guitar text-6xl text-white"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-800">Participação Especial</h3> | |
| <p class="text-lg font-bold mb-4">Clécio Sanfoneiro</p> | |
| <p class="text-gray-600">O renomado sanfoneiro trará todo o seu talento e energia para animar a noite do Pré Arraiá do Bode.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-red-900 text-white py-12 px-4 md:px-8"> | |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4">PRÉ ARRAIÁ DO BODE</h3> | |
| <p class="mb-4">A maior festa junina gourmet fora de época do Ceará, trazendo o melhor da culinária regional com um toque de sofisticação.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-2xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-2xl"><i class="fab fa-tiktok"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Informações</h4> | |
| <ul class="space-y-2"> | |
| <li><i class="fas fa-calendar-alt mr-2"></i> 17 de Maio de 2025</li> | |
| <li><i class="fas fa-clock mr-2"></i> 20h - Sem hora pra acabar</li> | |
| <li><i class="fas fa-map-marker-alt mr-2"></i> Sede da Loja Maçônica Deus e Pacajus nº. 81</li> | |
| <li><i class="fas fa-road mr-2"></i> Rua Cônego Eduardo Araripe 2135 - Centro, Pacajus - CE</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li><i class="fas fa-phone-alt mr-2"></i> Elisaldo Guerreiro: 85-98424-3806</li> | |
| <li><i class="fas fa-phone-alt mr-2"></i> João Bandeira Jr.: 85-99912-5300</li> | |
| <li><i class="fas fa-envelope mr-2"></i> contato@prearraiadobode.com</li> | |
| <li><i class="fas fa-qrcode mr-2"></i> PIX: CNPJ 23553936000145</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto mt-8 pt-8 border-t border-white border-opacity-20 text-center"> | |
| <p>© 2025 PRÉ ARRAIÁ DO BODE. Todos os direitos reservados.</p> | |
| </div> | |
| </footer> | |
| <!-- Floating WhatsApp Button --> | |
| <div class="fixed bottom-6 right-6"> | |
| <a href="https://wa.me/5585984243806" class="bg-green-500 hover:bg-green-600 text-white text-2xl w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-all"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| <script> | |
| // Modal functions | |
| function openReservationModal(tableNumber, zone) { | |
| document.getElementById('tableNumber').value = tableNumber; | |
| document.getElementById('tableZone').value = zone; | |
| document.getElementById('modalTitle').textContent = `Reservar Mesa M${tableNumber} (Zona ${zone})`; | |
| document.getElementById('reservationModal').style.display = 'block'; | |
| } | |
| function closeModal() { | |
| document.getElementById('reservationModal').style.display = 'none'; | |
| } | |
| function submitReservation() { | |
| const tableNumber = document.getElementById('tableNumber').value; | |
| const zone = document.getElementById('tableZone').value; | |
| const name = document.getElementById('name').value; | |
| const email = document.getElementById('email').value; | |
| const phone = document.getElementById('phone').value; | |
| const masonicLodge = document.getElementById('masonicLodge').value; | |
| if (!name || !email || !phone) { | |
| alert('Por favor, preencha todos os campos obrigatórios.'); | |
| return; | |
| } | |
| // In a real application, you would send this data to a server | |
| // For this example, we'll just simulate a successful reservation | |
| // Mark table as reserved | |
| const tableElement = document.getElementById(`table-${tableNumber}`); | |
| tableElement.classList.add('sold-table'); | |
| tableElement.innerHTML = ` | |
| <div>M${tableNumber}</div> | |
| <div class="text-xs text-center">${name.split(' ')[0]}</div> | |
| ${masonicLodge ? `<div class="text-xs text-center">${masonicLodge}</div>` : ''} | |
| `; | |
| // Close modal and show success message | |
| closeModal(); | |
| alert(`Reserva para a mesa M${tableNumber} confirmada para ${name}! Envie o comprovante PIX para 85-98424-3806 ou 85-99912-5300.`); | |
| } | |
| // Close modal when clicking outside | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('reservationModal'); | |
| if (event.target == modal) { | |
| closeModal(); | |
| } | |
| } | |
| </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=ELISALDO/pr-arrai-do-bode" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |