2 lines
4.2 KiB
HTML
2 lines
4.2 KiB
HTML
|
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>VAPORA — Architecture</title><style> @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");:root{--bg-primary:#0a0a0a;--text-primary:#c8ccd4;--border-light:rgba(255,255,255,0.1);--border-color:rgba(34,211,238,0.3);}html.light-mode{--bg-primary:#ffffff;--text-primary:#1a1a1a;--border-light:rgba(0,0,0,0.1);--border-color:rgba(0,0,0,0.1);}*{margin:0;padding:0;box-sizing:border-box;}body{background:var(--bg-primary);color:var(--text-primary);font-family:"Inter",sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color 0.3s ease,color 0.3s ease;}.diagram-container{width:1400px;height:1020px;position:relative;display:inline-block;}svg{width:100%;height:100%;}.nav-toggle{position:fixed;top:2rem;right:2rem;z-index:100;display:flex;gap:0.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:0.3rem 0.3rem;backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,0.1);}.nav-btn{background:transparent;border:none;color:#94a3b8;padding:0.5rem 1rem;border-radius:18px;cursor:pointer;font-weight:700;font-size:0.85rem;text-transform:uppercase;transition:all 0.3s ease;font-family:"JetBrains Mono",monospace;text-decoration:none;display:inline-block;}.nav-btn.active{background:linear-gradient(135deg,#22d3ee 0%,#a855f7 100%);color:#fff;}.nav-btn:hover{color:#22d3ee;}.theme-toggle{background:transparent;border:none;color:var(--text-primary);padding:0.5rem 1rem;border-radius:18px;cursor:pointer;font-weight:700;font-size:1.2rem;transition:all 0.3s ease;}.theme-toggle:hover{color:#22d3ee;}@media (max-width:768px){.nav-toggle{top:1rem;right:1rem;}.diagram-container{width:100vw;height:auto;}}</style></head><body><div class="nav-toggle"><button style="display: none" class="nav-btn active" data-lang="en" onclick="switchLanguage('en')" > EN </button><button style="display: none" class="nav-btn" data-lang="es" onclick="switchLanguage('es')" > ES </button><button class="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark mode" ><span id="theme-icon">🌙</span></button><a href="index.html" class="nav-btn" style=" background: rgba(34, 211, 238, 0.2); border: 1px solid rgba(34, 211, 238, 0.5); " >← VAPORA</a ></div><div class="diagram-container"><img id="dark-svg" src="vapora_architecture.svg" alt="VAPORA Architecture - Dark Mode" style="width: 100%; height: 100%; display: block" /><img id="light-svg" src="vapora_architecture_white.svg" alt="VAPORA Architecture - Light Mode" style="width: 100%; height: 100%; display: none" /></div><script> const LANG_KEY = "vapora-arch-lang";function getCurrentLanguage(){return localStorage.getItem(LANG_KEY)|| "en";}function switchLanguage(lang){localStorage.setItem(LANG_KEY,lang);document .querySelectorAll(".nav-btn[data-lang]").forEach((btn)=>{btn.classList.remove("active");if(btn.dataset.lang === lang){btn.classList.add("active");}});document .querySelectorAll("[data-en][data-es]").forEach((el)=>{const content = el.dataset[lang];el.textContent = content;});document.documentElement.lang = lang;}document.addEventListener("DOMContentLoaded",()=>{const currentLang = getCurrentLanguage();switchLanguage(currentLang);const currentTheme = getTheme();setTheme(currentTheme);});const THEME_KEY = "vapora-theme";function getTheme(){return localStorage.getItem(THEME_KEY)|| "dark";}function setTheme(theme){localStorage.setItem(THEME_KEY,theme);const html = document.documentElement;const icon = document.getElementById("theme-icon");const darkSvg = document.getElementById("dark-svg");const lightSvg = document.getElementById("light-svg");if(theme === "light"){html.classList.add("light-mode");icon.textContent = "🌙";if(darkSvg)darkSvg.style.display = "none";if(lightSvg)lightSvg.style.display = "block";}else{html.classList.remove("light-mode");icon.textContent = "☀️";if(
|