<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seven Cruising Bar - Programação Carnaval 2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Import map for Gemini API -->
<script type="importmap">
{
"imports": {
"@google/generative-ai": "https://esm.run/@google/generative-ai"
}
}
</script>
<style>
:root {
--neon-red: #ff003c;
--neon-blue: #00f3ff;
--dark-bg: #050505;
}
body {
background-color: var(--dark-bg);
color: white;
font-family: 'Teko', sans-serif;
overflow-x: hidden;
background-image:
radial-gradient(circle at 50% 50%, rgba(20, 0, 0, 0.8), transparent 70%),
linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 100%);
}
/* Age Gate Overlay */
#age-gate {
position: fixed;
inset: 0;
background: black;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
}
/* Glitch Effect for Title */
.glitch-wrapper {
position: relative;
display: inline-block;
}
.glitch {
position: relative;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 2px 2px var(--neon-red), -2px -2px var(--neon-blue);
animation: glitch-anim 1s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { text-shadow: 2px 2px var(--neon-red), -2px -2px var(--neon-blue); transform: translate(0); }
20% { text-shadow: -2px 2px var(--neon-blue), 2px -2px var(--neon-red); transform: translate(-2px, 2px); }
40% { text-shadow: 2px -2px var(--neon-red), -2px 2px var(--neon-blue); transform: translate(2px, -2px); }
60% { text-shadow: 0px 0px var(--neon-red), 0px 0px var(--neon-blue); transform: translate(0); }
80% { text-shadow: 3px 0px var(--neon-blue), -3px 0px var(--neon-red); transform: translate(-1px, 1px); }
100% { text-shadow: 2px 2px var(--neon-red), -2px -2px var(--neon-blue); transform: translate(0); }
}
/* Age Gate Button */
.enter-btn {
background: transparent;
border: 2px solid var(--neon-red);
color: var(--neon-red);
padding: 1rem 2rem;
font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 0 10px var(--neon-red);
margin-top: 2rem;
letter-spacing: 0.1em;
}
.enter-btn:hover {
background: var(--neon-red);
color: black;
box-shadow: 0 0 30px var(--neon-red);
transform: scale(1.05);
}
/* Neon Pulse Border for cards */
.neon-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.neon-box:hover {
border-color: var(--neon-red);
box-shadow: 0 0 15px var(--neon-red), inset 0 0 10px rgba(255,0,60,0.2);
transform: scale(1.02);
}
/* Marquee Animation */
.marquee-container {
overflow: hidden;
white-space: nowrap;
position: absolute;
opacity: 0.3;
font-size: 8rem;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.2);
z-index: 0;
top: 5%;
pointer-events: none;
}
.marquee-content {
display: inline-block;
animation: scroll-left 40s linear infinite;
}
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Section Dividers */
.section-divider {
display: flex;
align-items: center;
text-align: center;
color: var(--neon-blue);
font-size: 1.5rem;
font-weight: bold;
margin: 2rem 0 1rem 0;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.section-divider::before, .section-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid var(--neon-blue);
margin: 0 10px;
opacity: 0.5;
}
/* Oracle Button Style */
.oracle-btn {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 50;
width: 80px;
height: 80px;
background: #000;
border: 2px solid var(--neon-blue);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px var(--neon-blue), inset 0 0 10px rgba(0, 243, 255, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: pulse-border 2s infinite;
}
@keyframes pulse-border {
0% { box-shadow: 0 0 10px var(--neon-blue), inset 0 0 5px rgba(0, 243, 255, 0.3); }
50% { box-shadow: 0 0 25px var(--neon-blue), inset 0 0 15px rgba(0, 243, 255, 0.5); }
100% { box-shadow: 0 0 10px var(--neon-blue), inset 0 0 5px rgba(0, 243, 255, 0.3); }
}
.oracle-btn:hover {
transform: scale(1.1) rotate(10deg);
border-color: var(--neon-red);
box-shadow: 0 0 30px var(--neon-red), inset 0 0 20px rgba(255, 0, 60, 0.5);
}
.oracle-btn svg { width: 40px; height: 40px; fill: var(--neon-blue); }
.oracle-btn:hover svg { fill: var(--neon-red); }
/* Oracle Chat UI */
#oracle-modal {
transition: opacity 0.3s ease, transform 0.3s ease;
backdrop-filter: blur(15px);
background: rgba(5, 5, 5, 0.95);
border: 2px solid var(--neon-blue);
border-radius: 8px;
}
.chat-msg {
margin-bottom: 8px; padding: 10px 14px; border-radius: 4px; font-size: 1.1rem; max-width: 85%; line-height: 1.2;
}
.chat-msg.user { background: rgba(255, 0, 60, 0.2); border-right: 3px solid var(--neon-red); align-self: flex-end; }
.chat-msg.ai { background: rgba(0, 243, 255, 0.1); border-left: 3px solid var(--neon-blue); align-self: flex-start; }
.typing-dot { animation: typing 1.4s infinite ease-in-out both; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-start p-4 md:p-8 relative">
<!-- Age Gate -->
<div id="age-gate">
<div class="glitch-wrapper mb-6">
<h1 class="glitch text-7xl md:text-9xl text-white">SEVEN</h1>
</div>
<p class="text-2xl md:text-4xl text-gray-400 mb-4 tracking-widest uppercase">Cruising Bar & Club</p>
<p class="text-white text-xl md:text-2xl">Este site contém conteúdo adulto.</p>
<button onclick="confirmAge()" class="enter-btn">
Você quer se divertir?<br>
<span class="text-sm">(Sou maior de 18 anos)</span>
</button>
</div>
<!-- Background Marquee Text -->
<div class="marquee-container w-full">
<div class="marquee-content">
CARNAVAL RIO 2026 /// SEVEN CRUISING BAR /// CARNAVAL RIO 2026 /// SEVEN CRUISING BAR ///
</div>
</div>
<!-- Header Section -->
<header class="z-10 text-center mb-8 mt-4 relative w-full max-w-2xl">
<div class="border-b-2 border-red-600 pb-4 mb-4">
<h2 class="text-xl md:text-2xl tracking-[0.3em] text-gray-400 mb-2 uppercase">Rio de Janeiro</h2>
<div class="glitch-wrapper">
<h1 class="glitch text-7xl md:text-9xl leading-none text-white">SEVEN</h1>
</div>
<p class="text-2xl md:text-3xl text-red-500 font-bold tracking-widest mt-2 uppercase">Cruising Festival</p>
<div class="bg-white text-black px-2 py-1 inline-block mt-2 font-bold text-lg transform -rotate-2">
CARNAVAL 2026
</div>
</div>
<p class="text-gray-400 text-lg uppercase tracking-wider">05 FEV - 22 FEV</p>
</header>
<!-- Main Schedule Grid -->
<main id="schedule-content" class="z-10 w-full max-w-2xl space-y-3 mb-12">
<div class="section-divider">Pré-Carnaval</div>
<div class="neon-box p-3 rounded-sm flex flex-col group border-l-2 border-l-gray-600">
<div class="text-red-500 text-lg font-bold leading-none">05/02 • QUI</div>
<div class="text-2xl text-white font-bold uppercase">Lado B Projeto!</div>
<div class="text-sm text-gray-400">Entrada: R$ 40 • Traje: Livre</div>
</div>
<div class="neon-box p-3 rounded-sm flex flex-col group border-l-2 border-l-red-600">
<div class="text-red-500 text-lg font-bold leading-none">06/02 • SEX</div>
<div class="text-3xl text-white font-bold uppercase glitch">RedRoom</div>
<div class="text-sm text-gray-300">Show Interativo +18 • PornStars</div>
</div>
<div class="section-divider glitch">Cruising Festival 2026</div>
<div class="neon-box p-3 rounded-sm flex flex-col group border-l-4 border-l-cyan-400">
<div class="text-cyan-400 text-lg font-bold leading-none">08/02 • DOM • GRITO DE CARNAVAL</div>
<div class="text-2xl text-white font-bold uppercase">Baile "Não Me Prende"</div>
<div class="text-sm text-gray-300">DJ Nu Math3w • Show Interativo • Traje: Nu</div>
</div>
<div class="neon-box p-4 rounded-sm flex flex-col justify-center items-center group border-2 border-red-600 bg-red-900/20 text-center">
<div class="text-white text-xl font-bold leading-none mb-1">13/02 • SEXTA DE CARNAVAL</div>
<div class="text-4xl text-white font-bold uppercase glitch">Baile "Não Me Prende"</div>
<div class="text-sm text-gray-300 uppercase tracking-widest mt-2">Gang... Edition 😈</div>
</div>
</main>
<!-- Oracle Toggle Button -->
<button id="oracle-toggle" onclick="toggleOracle()" class="oracle-btn group" aria-label="Consultar Oráculo">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
</svg>
</button>
<!-- Oracle Chat Modal -->
<div id="oracle-modal" class="fixed bottom-28 right-6 w-80 md:w-96 h-[450px] z-40 flex flex-col hidden overflow-hidden">
<div class="bg-black p-4 border-b border-cyan-500/30 flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-3 h-3 bg-cyan-400 rounded-full animate-pulse"></div>
<h3 class="text-cyan-400 font-bold text-xl tracking-widest uppercase">Oráculo Seven</h3>
</div>
<button onclick="toggleOracle()" class="text-gray-500 hover:text-white text-2xl">×</button>
</div>
<div id="chat-messages" class="flex-1 overflow-y-auto p-4 flex flex-col space-y-4 text-sm text-gray-200">
<div class="chat-msg ai">As sombras do Seven dão-te as boas-vindas. O que queres saber? 😈</div>
</div>
<div class="p-4 bg-black border-t border-cyan-500/30">
<div class="relative flex gap-2">
<input type="text" id="user-input" placeholder="Sussurra aqui..." class="flex-1 bg-gray-900 border border-gray-800 text-white px-4 py-3 rounded text-sm outline-none" onkeypress="handleKeyPress(event)">
<button onclick="sendMessage()" class="bg-cyan-900/30 text-cyan-400 border border-cyan-400 px-4 py-2 rounded">ENVIAR</button>
</div>
</div>
</div>
<footer class="z-10 mt-auto text-center border-t border-gray-800 pt-6 w-full max-w-lg pb-8">
<p class="text-gray-500 text-lg uppercase">Praça da República, 141 - Centro - Rio de Janeiro</p>
</footer>
<script type="module">
import { GoogleGenerativeAI } from "@google/generative-ai";
const apiKey = "";
const genAI = new GoogleGenerativeAI(apiKey);
const model = genAI.getGenerativeModel({ model: "gemini-2.5-flash-preview-09-2025" });
const scheduleContent = document.getElementById('schedule-content').innerText;
window.sendMessage = async function() {
const inputField = document.getElementById('user-input');
const userText = inputField.value.trim();
if (!userText) return;
addMessage(userText, 'user');
inputField.value = '';
const loadingId = addLoading();
try {
const result = await model.generateContent({
contents: [{ role: "user", parts: [{ text: `Persona: Oráculo Seven. Bar Cruising Rio. Sombrio. Dados: ${scheduleContent}. Pergunta: ${userText}` }] }]
});
removeLoading(loadingId);
addMessage(result.response.text(), 'ai');
} catch (e) { removeLoading(loadingId); addMessage("Erro nas sombras.", 'ai'); }
}
window.handleKeyPress = (e) => e.key === 'Enter' && sendMessage();
function addMessage(t, s) {
const c = document.getElementById('chat-messages');
const d = document.createElement('div');
d.className = `chat-msg ${s}`; d.innerText = t;
c.appendChild(d); c.scrollTop = c.scrollHeight;
}
function addLoading() {
const c = document.getElementById('chat-messages');
const d = document.createElement('div');
d.className = `chat-msg ai`; d.innerHTML = '...';
c.appendChild(d); return d;
}
function removeLoading(e) { if(e) e.remove(); }
</script>
<script>
function confirmAge() {
const gate = document.getElementById('age-gate');
gate.style.opacity = '0';
setTimeout(() => gate.style.display = 'none', 500);
}
function toggleOracle() {
const m = document.getElementById('oracle-modal');
m.classList.toggle('hidden');
}
</script>
</body>
</html>
