<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExploraMente - Cinematic Intro Generator</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- GSAP for timeline animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #030712;
color: #f3f4f6;
overflow-x: hidden;
}
.text-cinematic {
letter-spacing: 0.15em;
}
.text-gold {
background: linear-gradient(135deg, #FFE082 0%, #FFB300 50%, #B78103 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(255, 179, 0, 0.2);
}
.glass-panel {
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Hide scrollbar but keep functionality */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #030712;
}
::-webkit-scrollbar-thumb {
background: #1f2937;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #374151;
}
</style>
</head>
<body class="min-h-screen flex flex-col justify-between">
<!-- Header Banner -->
<header class="w-full py-4 px-6 glass-panel border-b border-gray-800 flex justify-between items-center z-10">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-amber-500 flex items-center justify-center font-bold text-white shadow-lg shadow-blue-950/50">
X
</div>
<div>
<h1 class="text-sm font-bold tracking-wider uppercase text-gray-200">ExploraMente</h1>
<p class="text-xs text-gray-400">Cinematic Intro Engine v2.5</p>
</div>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400 border border-amber-500/20">
<span class="w-1.5 h-1.5 mr-1.5 bg-amber-400 rounded-full animate-ping"></span>
4K HDR Real-Time Sandbox
</span>
</div>
</header>
<!-- Main Workspace -->
<main class="flex-1 flex flex-col lg:flex-row items-stretch justify-center p-4 lg:p-6 gap-6 max-w-[1600px] w-full mx-auto">
<!-- Left Panel: Cinematic Viewport Container -->
<div class="flex-1 flex flex-col gap-4 min-w-0">
<!-- Cinematic Stage Frame (Locks to 16:9 aspect ratio) -->
<div class="relative w-full aspect-video rounded-2xl overflow-hidden shadow-2xl border border-gray-800/80 bg-black flex items-center justify-center group">
<!-- Render Target Canvas -->
<canvas id="intro-canvas" class="w-full h-full block"></canvas>
<!-- Subtle Viewport Overlay Info -->
<div class="absolute top-4 left-4 flex gap-2 pointer-events-none opacity-60 group-hover:opacity-100 transition-opacity duration-300">
<span class="bg-black/70 px-2 py-1 rounded text-[10px] font-mono tracking-widest text-blue-400 border border-blue-900/30">REC [06:00]</span>
<span class="bg-black/70 px-2 py-1 rounded text-[10px] font-mono tracking-widest text-amber-400 border border-amber-900/30">60 FPS</span>
<span class="bg-black/70 px-2 py-1 rounded text-[10px] font-mono tracking-widest text-gray-400 border border-gray-900/30" id="resolution-indicator">UHD 3840x2160</span>
</div>
<div class="absolute bottom-4 right-4 flex gap-2 pointer-events-none opacity-60 group-hover:opacity-100 transition-opacity duration-300">
<span class="bg-black/70 px-2.5 py-1 rounded text-[10px] font-mono text-gray-300 border border-gray-800">LUT: Cinematic Gold & Teal</span>
</div>
<!-- Custom Notification Toast inside view -->
<div id="toast-msg" class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-slate-900/90 text-gray-200 px-4 py-2 rounded-xl text-xs tracking-wider font-medium border border-gray-700/50 shadow-xl opacity-0 transition-opacity duration-300 pointer-events-none flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
<span id="toast-text">Áudio Ativado</span>
</div>
</div>
<!-- Playback Timeline & Audio HUD -->
<div class="glass-panel rounded-2xl p-4 flex flex-col gap-3">
<!-- Progress Bar and Scrubbing -->
<div class="flex items-center gap-4">
<span class="text-xs font-mono text-gray-400 w-10 text-right" id="current-time-label">0.00s</span>
<div class="flex-1 relative group py-2 cursor-pointer" id="timeline-container">
<div class="h-1.5 w-full bg-gray-800 rounded-full overflow-hidden transition-all group-hover:h-2">
<div class="h-full bg-gradient-to-r from-blue-500 via-indigo-500 to-amber-500 w-0 rounded-full relative" id="timeline-bar"></div>
</div>
<!-- Interactive marker indicator -->
<div class="absolute top-1/2 -translate-y-1/2 -ml-1.5 w-3 h-3 rounded-full bg-white shadow shadow-black border border-amber-500 left-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" id="timeline-handle"></div>
</div>
<span class="text-xs font-mono text-gray-400 w-10">6.00s</span>
</div>
<!-- Control Actions -->
<div class="flex flex-wrap items-center justify-between gap-4 pt-1">
<div class="flex items-center gap-2">
<button id="btn-play-pause" class="px-5 py-2 rounded-xl bg-amber-500 hover:bg-amber-600 active:scale-95 transition text-slate-950 font-bold text-xs tracking-wider flex items-center gap-2 shadow-lg shadow-amber-500/15">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
REPRODUZIR
</button>
<button id="btn-restart" class="p-2 rounded-xl bg-gray-800/80 hover:bg-gray-700 active:scale-95 transition text-gray-300 hover:text-white" title="Reiniciar">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 7.89M9 11l3-3 3 3m-3-3v12"/></svg>
</button>
<button id="btn-audio" class="p-2 rounded-xl bg-gray-800/80 hover:bg-gray-700 active:scale-95 transition text-amber-400" title="Alternar Áudio">
<svg id="audio-icon" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M12 18.75V5.25L7.75 9.5H4.5v5h3.25L12 18.75z"/>
</svg>
</button>
</div>
<!-- Sequence Milestones Timeline HUD -->
<div class="hidden sm:flex items-center gap-3 text-[11px] font-mono text-gray-500">
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span> 0s-1.5s Dúvida</span>
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-indigo-400"></span> 1.5s-3.5s Conexões</span>
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span> 3.5s-6s Resolução</span>
</div>
</div>
</div>
</div>
<!-- Right Panel: Creative Control Room -->
<div class="w-full lg:w-[400px] flex flex-col gap-4">
<!-- Sequence Storyboard Breakdown -->
<div class="glass-panel rounded-2xl p-5 flex flex-col gap-4">
<h2 class="text-xs font-bold tracking-widest text-amber-400 uppercase flex items-center gap-2">
<svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
</svg>
Storyboard do Diretor (6s)
</h2>
<div class="flex flex-col gap-3 text-xs">
<div class="flex gap-3 items-start border-l-2 border-blue-500 pl-3 py-0.5">
<span class="font-mono text-blue-400 font-bold w-12 shrink-0">0.0 - 1.5s</span>
<div>
<p class="font-medium text-gray-200">Caos e Dúvidas</p>
<p class="text-gray-400 mt-0.5">Pontos de interrogação flutuantes emergem da escuridão e se esticam em filamentos neurais de luz.</p>
</div>
</div>
<div class="flex gap-3 items-start border-l-2 border-indigo-500 pl-3 py-0.5">
<span class="font-mono text-indigo-400 font-bold w-12 shrink-0">1.5 - 3.5s</span>
<div>
<p class="font-medium text-gray-200">O Cruzamento "X"</p>
<p class="text-gray-400 mt-0.5">Os feixes se fundem num símbolo "X" tridimensional. Ícones de ciência e saber brilham suavemente.</p>
</div>
</div>
<div class="flex gap-3 items-start border-l-2 border-amber-500 pl-3 py-0.5">
<span class="font-mono text-amber-400 font-bold w-12 shrink-0">3.5 - 5.0s</span>
<div>
<p class="font-medium text-gray-200">A Revelação</p>
<p class="text-gray-400 mt-0.5">O "X" implode no centro e expande no logotipo: <span class="text-white">Explora</span><span class="text-amber-400">Mente</span> e slogan.</p>
</div>
</div>
<div class="flex gap-3 items-start border-l-2 border-gray-600 pl-3 py-0.5">
<span class="font-mono text-gray-400 font-bold w-12 shrink-0">5.0 - 6.0s</span>
<div>
<p class="font-medium text-gray-200">Varredura & Fade</p>
<p class="text-gray-400 mt-0.5">Uma onda de luz dourada varre as letras antes do fade-out elegante em preto absoluto.</p>
</div>
</div>
</div>
</div>
<!-- Engine Tuning Parameters -->
<div class="glass-panel rounded-2xl p-5 flex flex-col gap-4">
<h2 class="text-xs font-bold tracking-widest text-blue-400 uppercase flex items-center gap-2">
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
</svg>
Parâmetros do Canvas 3D
</h2>
<div class="flex flex-col gap-4">
<!-- Particle Density -->
<div class="flex flex-col gap-1.5">
<div class="flex justify-between items-center text-xs">
<span class="text-gray-300">Densidade de Estrelas & Conexões</span>
<span class="font-mono text-blue-400" id="val-particles">1200</span>
</div>
<input type="range" id="input-particles" min="500" max="3000" step="100" value="1200" class="w-full h-1 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500">
</div>
<!-- Color Theme Selection -->
<div class="flex flex-col gap-1.5">
<span class="text-xs text-gray-300">Paleta de Cores Cinemática</span>
<div class="grid grid-cols-3 gap-2">
<button class="palette-btn p-2 rounded-xl border border-amber-500/40 bg-amber-500/10 text-amber-300 text-[11px] font-medium text-center active:scale-95 transition" data-primary="#FFB300" data-secondary="#3B82F6">
Gold & Teal
</button>
<button class="palette-btn p-2 rounded-xl border border-gray-800 bg-gray-900/30 text-gray-400 text-[11px] font-medium text-center active:scale-95 transition" data-primary="#EC4899" data-secondary="#8B5CF6">
Cyber Punk
</button>
<button class="palette-btn p-2 rounded-xl border border-gray-800 bg-gray-900/30 text-gray-400 text-[11px] font-medium text-center active:scale-95 transition" data-primary="#10B981" data-secondary="#3B82F6">
Sci-Fi Mint
</button>
</div>
</div>
<!-- Custom Text / Subtitle Inputs -->
<div class="flex flex-col gap-2 pt-2 border-t border-gray-800">
<div class="flex flex-col gap-1">
<label class="text-[11px] text-gray-400 uppercase tracking-wider">Texto do Canal (Matte/Gold)</label>
<div class="flex gap-2">
<input type="text" id="input-text-1" value="Explora" class="bg-gray-950 border border-gray-800 rounded-lg px-3 py-1.5 text-xs text-white focus:outline-none focus:border-blue-500 flex-1">
<input type="text" id="input-text-2" value="Mente" class="bg-gray-950 border border-gray-800 rounded-lg px-3 py-1.5 text-xs text-amber-400 focus:outline-none focus:border-amber-500 flex-1">
</div>
</div>
<div class="flex flex-col gap-1">
<label class="text-[11px] text-gray-400 uppercase tracking-wider">Slogan</label>
<input type="text" id="input-slogan" value="Onde a curiosidade encontra o conhecimento." class="bg-gray-950 border border-gray-800 rounded-lg px-3 py-1.5 text-xs text-gray-300 focus:outline-none focus:border-blue-500">
</div>
</div>
<!-- Simulation Speed -->
<div class="flex items-center justify-between text-xs pt-1">
<span class="text-gray-300">Velocidade de Reprodução</span>
<select id="select-speed" class="bg-gray-950 border border-gray-800 text-xs text-gray-300 rounded-lg px-2 py-1 focus:outline-none">
<option value="0.5">Câmera Lenta (0.5x)</option>
<option value="1.0" selected>Velocidade Real (1.0x)</option>
<option value="1.5">Acelerado (1.5x)</option>
</select>
</div>
<!-- Render Blueprint Download Guide -->
<button id="btn-render-trigger" class="mt-2 w-full py-2.5 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98] transition font-bold text-xs tracking-widest text-white shadow-xl shadow-indigo-950/40 flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
<path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
SIMULAR CONEXÃO ULTRA-HD
</button>
</div>
</div>
</div>
</main>
<!-- Footer Info -->
<footer class="w-full py-4 px-6 glass-panel border-t border-gray-800/80 text-center text-xs text-gray-500 flex flex-col sm:flex-row justify-between items-center gap-2 z-10">
<p>© 2026 ExploraMente. Todos os direitos reservados. Design de Alta Fidelidade.</p>
<p>Aceleração de hardware WebGL ativada.</p>
</footer>
<!-- Core JavaScript Block -->
<script>
// --- APP & FIREBASE INITIALIZATION SAFEGUARDS ---
const appId = typeof __app_id !== 'undefined' ? __app_id : 'exploramente-intro';
// --- STATE MANAGEMENT ---
let timelineProgress = 0; // 0.0 to 1.0 (corresponds to 0 to 6 seconds)
let isPlaying = true;
let customSpeed = 1.0;
let audioEnabled = false;
let particleCount = 1200;
// Theme Colors
let colorPrimary = '#FFB300'; // Metallic Gold
let colorSecondary = '#3B82F6'; // Neural Electric Blue
// Audio Context Variables
let audioCtx = null;
// --- DOM SELECTORS ---
const canvas = document.getElementById('intro-canvas');
const btnPlayPause = document.getElementById('btn-play-pause');
const btnRestart = document.getElementById('btn-restart');
const btnAudio = document.getElementById('btn-audio');
const audioIcon = document.getElementById('audio-icon');
const timelineBar = document.getElementById('timeline-bar');
const timelineHandle = document.getElementById('timeline-handle');
const timelineContainer = document.getElementById('timeline-container');
const currentTimeLabel = document.getElementById('current-time-label');
const toastMsg = document.getElementById('toast-msg');
const toastText = document.getElementById('toast-text');
const inputParticles = document.getElementById('input-particles');
const valParticles = document.getElementById('val-particles');
const selectSpeed = document.getElementById('select-speed');
const inputText1 = document.getElementById('input-text-1');
const inputText2 = document.getElementById('input-text-2');
const inputSlogan = document.getElementById('input-slogan');
const btnRenderTrigger = document.getElementById('btn-render-trigger');
// --- PROCEDURAL AUDIO GENERATION (WEB AUDIO API) ---
// Creates high-fidelity cinematic soundtrack matching our 6-second timeline exactly!
function initAudioContext() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playCinematicAudioEvent(timePoint) {
if (!audioEnabled || !audioCtx) return;
// Ensure context is running (browser safeguards)
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
// 1. Cosmic Background Hum (Sustained at starting points)
if (timePoint > 0.0 && timePoint < 0.2) {
let osc = audioCtx.createOscillator();
let filter = audioCtx.createBiquadFilter();
let gain = audioCtx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(55, audioCtx.currentTime); // Low G
osc.frequency.exponentialRampToValueAtTime(110, audioCtx.currentTime + 3.0);
filter.type = 'lowpass';
filter.frequency.setValueAtTime(150, audioCtx.currentTime);
gain.gain.setValueAtTime(0.01, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0.1, audioCtx.currentTime + 1.5);
gain.gain.linearRampToValueAtTime(0.0, audioCtx.currentTime + 5.5);
osc.connect(filter);
filter.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + 5.8);
}
// 2. Neural Riser (Synthesizing connecting light streams)
if (timePoint > 1.2 && timePoint < 1.5) {
let osc = audioCtx.createOscillator();
let gain = audioCtx.createGain();
osc.type = 'triangle';
osc.frequency.setValueAtTime(120, audioCtx.currentTime);
osc.frequency.exponentialRampToValueAtTime(880, audioCtx.currentTime + 2.5);
gain.gain.setValueAtTime(0.0, audioCtx.currentTime);
gain.gain.linearRampToValueAtTime(0.08, audioCtx.currentTime + 1.5);
gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 2.6);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + 2.8);
}
// 3. Gold Chime Sweep & Transition Swell (At 4.2 seconds)
if (timePoint > 4.0 && timePoint < 4.3) {
// Bass impact boom
let boom = audioCtx.createOscillator();
let boomGain = audioCtx.createGain();
boom.type = 'triangle';
boom.frequency.setValueAtTime(80, audi