1 line
5.6 KiB
HTML
1 line
5.6 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Infrastructure Provisioning System — Architecture</title><style> @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=DM+Sans:wght@300;400;500;600;700&display=swap");:root{--bg-primary:#0a0c10;--text-primary:#c8ccd4;--border-light:rgba(255,255,255,0.1);}html.light-mode{--bg-primary:#f3f4f6;--text-primary:#1a1a1a;--border-light: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:"DM Sans",sans-serif;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background-color 0.3s ease,color 0.3s ease;}.diagram-container{width:min(100vw,calc(100vh * 1280 / 900));height:min(100vh,calc(100vw * 900 / 1280));position:relative;}svg,img.diagram-svg{width:100%;height:100%;}@keyframes flowDash{to{stroke-dashoffset:-30;}}@keyframes flowDashReverse{to{stroke-dashoffset:30;}}@keyframes pulseGlow{0%,100%{opacity:0.6;}50%{opacity:1;}}@keyframes coreRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}@keyframes nodeAppear{from{opacity:0;transform:scale(0.85);}to{opacity:1;transform:scale(1);}}@keyframes dotPulse{0%,100%{r:3;opacity:0.5;}50%{r:5;opacity:1;}}.flow-blue{animation:flowDash 1.5s linear infinite;}.flow-green{animation:flowDash 2s linear infinite;}.flow-orange{animation:flowDash 1.8s linear infinite;}.flow-red{animation:flowDashReverse 1.6s linear infinite;}.pulse{animation:pulseGlow 3s ease-in-out infinite;}.core-ring{animation:coreRotate 60s linear infinite;transform-origin:640px 370px;}.node-group{animation:nodeAppear 0.6s ease-out both;}.node-group:nth-child(1){animation-delay:0.1s;}.node-group:nth-child(2){animation-delay:0.2s;}.node-group:nth-child(3){animation-delay:0.3s;}.node-group:nth-child(4){animation-delay:0.4s;}.dot-pulse{animation:dotPulse 2s ease-in-out infinite;}.dot-pulse-d1{animation-delay:0.3s;}.dot-pulse-d2{animation-delay:0.6s;}.dot-pulse-d3{animation-delay:0.9s;}.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:"IBM Plex Mono",monospace;text-decoration:none;display:inline-block;}.nav-btn.active{background:linear-gradient(135deg,#10b981 0%,#3b82f6 100%);color:#fff;}.nav-btn:hover{color:#10b981;}.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:#10b981;}@media (max-width:768px){.nav-toggle{top:1rem;right:1rem;}}</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(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.5); " >← PROVISIONING</a ></div><div class="diagram-container"><img id="dark-svg" src="arch-diag-v2.svg" alt="Provisioning Architecture - Dark Mode" style="width: 100%; height: 100%; display: block" /><img id="light-svg" src="w-arch-diag-v2.svg" alt="Provisioning Architecture - Light Mode" style="width: 100%; height: 100%; display: none" /><img id="logo" src="provisioning.svg" alt="Provisioning Logo" style="display:none; /*position: absolute; bottom: 5%; right: 5.5%; width: 7.8%; height: auto*/" /></div><script> const LANG_KEY = "provisioning-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 = "provisioning-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(darkSvg)darkSvg.style.display = "block";if(lightSvg)lightSvg.style.display = "none";}}function toggleTheme(){const currentTheme = getTheme();const newTheme = currentTheme === "dark" ? "light" : "dark";setTheme(newTheme);}</script></body></html>
|