| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta |
| name="viewport" |
| content="width=device-width, initial-scale=1, viewport-fit=cover" |
| /> |
| <meta name="theme-color" content="#050509" /> |
| <title>ZENos Boot Screen</title> |
|
|
| <style> |
| :root { |
| --black: #050509; |
| --deep-black: #020205; |
| --white: #ffffff; |
| --soft-white: rgba(255, 255, 255, 0.7); |
| --red: #ff254f; |
| --lava-red: #ff3048; |
| --lava-orange: #ff8a21; |
| --lava-blue: #176fff; |
| --glass: rgba(255, 255, 255, 0.085); |
| --glass-border: rgba(255, 255, 255, 0.2); |
| --safe-top: env(safe-area-inset-top, 0px); |
| --safe-bottom: env(safe-area-inset-bottom, 0px); |
| } |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| html, |
| body { |
| width: 100%; |
| min-height: 100%; |
| margin: 0; |
| overflow: hidden; |
| background: var(--deep-black); |
| color: var(--white); |
| font-family: |
| Inter, |
| ui-sans-serif, |
| system-ui, |
| -apple-system, |
| BlinkMacSystemFont, |
| "Segoe UI", |
| sans-serif; |
| } |
| |
| body { |
| min-height: 100svh; |
| } |
| |
| button { |
| font: inherit; |
| } |
| |
| .app { |
| position: relative; |
| isolation: isolate; |
| width: 100%; |
| min-height: 100svh; |
| overflow: hidden; |
| background: |
| radial-gradient(circle at 50% 20%, rgba(36, 38, 68, 0.25), transparent 45%), |
| linear-gradient(145deg, #08080d, #020205 75%); |
| } |
| |
| |
| .svg-filters { |
| position: absolute; |
| width: 0; |
| height: 0; |
| pointer-events: none; |
| } |
| |
| .lava-world { |
| position: absolute; |
| inset: -12%; |
| z-index: -3; |
| overflow: hidden; |
| filter: saturate(1.3) contrast(1.15); |
| transform: scale(1.08); |
| } |
| |
| .lava-world::before { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: |
| radial-gradient( |
| ellipse at 30% 35%, |
| rgba(255, 42, 64, 0.9) 0%, |
| rgba(255, 42, 64, 0.5) 14%, |
| transparent 37% |
| ), |
| radial-gradient( |
| ellipse at 76% 28%, |
| rgba(255, 133, 28, 0.85) 0%, |
| rgba(255, 112, 24, 0.38) 17%, |
| transparent 42% |
| ), |
| radial-gradient( |
| ellipse at 61% 82%, |
| rgba(20, 104, 255, 0.88) 0%, |
| rgba(20, 104, 255, 0.34) 19%, |
| transparent 44% |
| ), |
| radial-gradient( |
| ellipse at 15% 84%, |
| rgba(255, 48, 75, 0.55) 0%, |
| transparent 35% |
| ); |
| filter: blur(45px) url("#lavaDistortion"); |
| animation: lavaShift 18s ease-in-out infinite alternate; |
| } |
| |
| .lava-world::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: |
| linear-gradient( |
| 115deg, |
| transparent 0%, |
| rgba(255, 255, 255, 0.05) 28%, |
| transparent 52% |
| ), |
| radial-gradient( |
| ellipse at center, |
| transparent 0%, |
| rgba(0, 0, 0, 0.4) 66%, |
| rgba(0, 0, 0, 0.85) 100% |
| ); |
| mix-blend-mode: screen; |
| opacity: 0.65; |
| pointer-events: none; |
| } |
| |
| .lava-orb { |
| position: absolute; |
| border-radius: 999px; |
| opacity: 0.75; |
| mix-blend-mode: screen; |
| filter: blur(35px) url("#lavaDistortion"); |
| will-change: transform; |
| } |
| |
| .orb-red { |
| width: 38vw; |
| height: 38vw; |
| min-width: 220px; |
| min-height: 220px; |
| left: -8vw; |
| top: 8vh; |
| background: var(--lava-red); |
| animation: orbRed 14s ease-in-out infinite alternate; |
| } |
| |
| .orb-orange { |
| width: 34vw; |
| height: 34vw; |
| min-width: 190px; |
| min-height: 190px; |
| right: -5vw; |
| top: 4vh; |
| background: var(--lava-orange); |
| animation: orbOrange 17s ease-in-out infinite alternate; |
| } |
| |
| .orb-blue { |
| width: 46vw; |
| height: 46vw; |
| min-width: 260px; |
| min-height: 260px; |
| right: 12vw; |
| bottom: -16vh; |
| background: var(--lava-blue); |
| animation: orbBlue 19s ease-in-out infinite alternate; |
| } |
| |
| .orb-red-small { |
| width: 24vw; |
| height: 24vw; |
| min-width: 140px; |
| min-height: 140px; |
| left: 18vw; |
| bottom: 1vh; |
| background: #ff183e; |
| animation: orbSmall 12s ease-in-out infinite alternate; |
| } |
| |
| .grain { |
| position: absolute; |
| inset: 0; |
| z-index: -1; |
| pointer-events: none; |
| opacity: 0.08; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); |
| mix-blend-mode: soft-light; |
| } |
| |
| .boot-screen, |
| .login-placeholder { |
| position: absolute; |
| inset: 0; |
| display: grid; |
| place-items: center; |
| padding: |
| calc(24px + var(--safe-top)) |
| 22px |
| calc(24px + var(--safe-bottom)); |
| transition: |
| opacity 0.7s ease, |
| transform 0.7s ease, |
| visibility 0.7s ease; |
| } |
| |
| .boot-screen { |
| opacity: 1; |
| visibility: visible; |
| transform: scale(1); |
| } |
| |
| .login-placeholder { |
| opacity: 0; |
| visibility: hidden; |
| transform: scale(1.04); |
| pointer-events: none; |
| } |
| |
| .app.boot-complete .boot-screen { |
| opacity: 0; |
| visibility: hidden; |
| transform: scale(0.97); |
| } |
| |
| .app.boot-complete .login-placeholder { |
| opacity: 1; |
| visibility: visible; |
| transform: scale(1); |
| pointer-events: auto; |
| } |
| |
| .glass-panel { |
| width: min(88vw, 560px); |
| min-height: min(62svh, 580px); |
| padding: clamp(34px, 8vw, 72px) clamp(24px, 7vw, 60px); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| border: 1px solid var(--glass-border); |
| border-radius: clamp(28px, 6vw, 46px); |
| background: |
| linear-gradient( |
| 145deg, |
| rgba(255, 255, 255, 0.15), |
| rgba(255, 255, 255, 0.045) |
| ); |
| box-shadow: |
| 0 30px 100px rgba(0, 0, 0, 0.48), |
| inset 0 1px 0 rgba(255, 255, 255, 0.18), |
| inset 0 -1px 0 rgba(255, 255, 255, 0.04); |
| backdrop-filter: blur(30px) saturate(145%); |
| -webkit-backdrop-filter: blur(30px) saturate(145%); |
| } |
| |
| .logo-mark { |
| position: relative; |
| width: clamp(82px, 20vw, 118px); |
| aspect-ratio: 1; |
| margin-bottom: clamp(22px, 5vw, 34px); |
| display: grid; |
| place-items: center; |
| border-radius: 31%; |
| background: |
| linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04)); |
| border: 1px solid rgba(255, 255, 255, 0.35); |
| box-shadow: |
| 0 0 0 1px rgba(255, 39, 73, 0.2), |
| 0 0 38px rgba(255, 37, 79, 0.42), |
| inset 0 0 30px rgba(255, 255, 255, 0.1); |
| } |
| |
| .logo-mark::before, |
| .logo-mark::after { |
| content: ""; |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(3px); |
| } |
| |
| .logo-mark::before { |
| width: 42%; |
| height: 42%; |
| background: var(--red); |
| transform: translate(-22%, -22%); |
| box-shadow: 0 0 22px var(--red); |
| } |
| |
| .logo-mark::after { |
| width: 29%; |
| height: 29%; |
| background: white; |
| transform: translate(35%, 35%); |
| box-shadow: 0 0 17px white; |
| } |
| |
| .logo-letter { |
| position: relative; |
| z-index: 1; |
| font-size: clamp(2.7rem, 12vw, 5rem); |
| font-weight: 800; |
| line-height: 1; |
| letter-spacing: -0.13em; |
| transform: translateX(-0.08em); |
| text-shadow: 0 0 24px rgba(255, 255, 255, 0.35); |
| } |
| |
| .brand-name { |
| margin: 0; |
| font-size: clamp(2.1rem, 9vw, 4.4rem); |
| font-weight: 700; |
| letter-spacing: -0.075em; |
| } |
| |
| .brand-name span { |
| color: var(--red); |
| } |
| |
| .tagline { |
| margin: 14px 0 0; |
| color: var(--soft-white); |
| font-size: clamp(0.75rem, 2.8vw, 1rem); |
| letter-spacing: 0.2em; |
| text-transform: uppercase; |
| } |
| |
| .boot-status { |
| width: min(100%, 300px); |
| margin-top: clamp(42px, 9vw, 72px); |
| } |
| |
| .status-row { |
| display: flex; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 11px; |
| color: rgba(255, 255, 255, 0.75); |
| font-size: 0.72rem; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
| |
| .status-message { |
| color: white; |
| } |
| |
| .status-message::after { |
| content: ""; |
| display: inline-block; |
| width: 4px; |
| height: 13px; |
| margin-left: 6px; |
| vertical-align: -2px; |
| background: var(--red); |
| animation: blink 0.85s steps(2, start) infinite; |
| } |
| |
| .progress-track { |
| height: 4px; |
| overflow: hidden; |
| border-radius: 20px; |
| background: rgba(255, 255, 255, 0.15); |
| } |
| |
| .progress-bar { |
| width: 0%; |
| height: 100%; |
| border-radius: inherit; |
| background: |
| linear-gradient(90deg, white 0%, var(--red) 68%, var(--lava-orange) 100%); |
| box-shadow: 0 0 15px rgba(255, 37, 79, 0.8); |
| transition: width 0.12s linear; |
| } |
| |
| .version { |
| position: absolute; |
| bottom: calc(20px + var(--safe-bottom)); |
| color: rgba(255, 255, 255, 0.38); |
| font-size: 0.68rem; |
| letter-spacing: 0.17em; |
| text-transform: uppercase; |
| } |
| |
| .placeholder-card { |
| width: min(88vw, 520px); |
| min-height: 280px; |
| display: grid; |
| place-items: center; |
| padding: 32px; |
| border: 1px solid var(--glass-border); |
| border-radius: 34px; |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(28px); |
| -webkit-backdrop-filter: blur(28px); |
| text-align: center; |
| } |
| |
| .placeholder-card p { |
| margin: 0; |
| color: rgba(255, 255, 255, 0.65); |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| font-size: 0.75rem; |
| } |
| |
| @keyframes lavaShift { |
| 0% { |
| transform: translate3d(-3%, -2%, 0) scale(1); |
| } |
| 50% { |
| transform: translate3d(3%, 4%, 0) scale(1.1); |
| } |
| 100% { |
| transform: translate3d(-1%, 5%, 0) scale(1.04); |
| } |
| } |
| |
| @keyframes orbRed { |
| from { |
| transform: translate3d(-5vw, 3vh, 0) scale(0.9); |
| } |
| to { |
| transform: translate3d(23vw, 19vh, 0) scale(1.35); |
| } |
| } |
| |
| @keyframes orbOrange { |
| from { |
| transform: translate3d(5vw, -4vh, 0) scale(0.88); |
| } |
| to { |
| transform: translate3d(-25vw, 25vh, 0) scale(1.3); |
| } |
| } |
| |
| @keyframes orbBlue { |
| from { |
| transform: translate3d(10vw, 8vh, 0) scale(0.9); |
| } |
| to { |
| transform: translate3d(-25vw, -19vh, 0) scale(1.3); |
| } |
| } |
| |
| @keyframes orbSmall { |
| from { |
| transform: translate3d(-9vw, -8vh, 0) scale(0.7); |
| } |
| to { |
| transform: translate3d(28vw, -19vh, 0) scale(1.25); |
| } |
| } |
| |
| @keyframes blink { |
| 50% { |
| opacity: 0; |
| } |
| } |
| |
| @media (max-width: 380px) { |
| .glass-panel { |
| width: 92vw; |
| min-height: 68svh; |
| padding-inline: 20px; |
| } |
| |
| .tagline { |
| letter-spacing: 0.13em; |
| } |
| |
| .boot-status { |
| margin-top: 36px; |
| } |
| } |
| |
| @media (min-width: 600px) { |
| .glass-panel { |
| min-height: 540px; |
| } |
| } |
| |
| @media (orientation: landscape) and (max-height: 600px) { |
| .glass-panel { |
| min-height: 88svh; |
| padding-block: 24px; |
| } |
| |
| .logo-mark { |
| width: 72px; |
| margin-bottom: 14px; |
| } |
| |
| .brand-name { |
| font-size: 2.4rem; |
| } |
| |
| .boot-status { |
| margin-top: 26px; |
| } |
| } |
| |
| @media (prefers-reduced-motion: reduce) { |
| .lava-world::before, |
| .lava-orb, |
| .status-message::after { |
| animation: none; |
| } |
| |
| .progress-bar, |
| .boot-screen, |
| .login-placeholder { |
| transition: none; |
| } |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <main class="app" id="app"> |
| |
| <svg class="svg-filters" aria-hidden="true"> |
| <filter id="lavaDistortion" x="-20%" y="-20%" width="140%" height="140%"> |
| <feTurbulence |
| type="fractalNoise" |
| baseFrequency="0.008 0.018" |
| numOctaves="3" |
| seed="8" |
| result="noise" |
| > |
| <animate |
| attributeName="baseFrequency" |
| dur="16s" |
| values="0.008 0.018;0.016 0.009;0.008 0.018" |
| repeatCount="indefinite" |
| /> |
| </feTurbulence> |
|
|
| <feDisplacementMap |
| in="SourceGraphic" |
| in2="noise" |
| scale="90" |
| xChannelSelector="R" |
| yChannelSelector="B" |
| /> |
| </filter> |
| </svg> |
|
|
| <div class="lava-world" aria-hidden="true"> |
| <div class="lava-orb orb-red"></div> |
| <div class="lava-orb orb-orange"></div> |
| <div class="lava-orb orb-blue"></div> |
| <div class="lava-orb orb-red-small"></div> |
| </div> |
|
|
| <div class="grain" aria-hidden="true"></div> |
|
|
| |
| <section class="boot-screen" aria-label="ZENos boot screen"> |
| <div class="glass-panel"> |
| <div class="logo-mark" aria-hidden="true"> |
| <span class="logo-letter">Z</span> |
| </div> |
|
|
| <h1 class="brand-name">ZEN<span>os</span></h1> |
| <p class="tagline">A calmer way forward</p> |
|
|
| <div class="boot-status"> |
| <div class="status-row"> |
| <span class="status-message" id="statusMessage"> |
| Initializing system |
| </span> |
| <span id="progressValue">0%</span> |
| </div> |
|
|
| <div |
| class="progress-track" |
| role="progressbar" |
| aria-label="System boot progress" |
| aria-valuemin="0" |
| aria-valuemax="100" |
| aria-valuenow="0" |
| > |
| <div class="progress-bar" id="progressBar"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="version">ZENos • Core 01.00.00</div> |
| </section> |
|
|
| |
| <section class="login-placeholder" aria-label="Login page placeholder"> |
| <div class="placeholder-card"> |
| <p>Login interface goes here</p> |
| </div> |
| </section> |
| </main> |
|
|
| <script> |
| const app = document.getElementById("app"); |
| const progressBar = document.getElementById("progressBar"); |
| const progressValue = document.getElementById("progressValue"); |
| const statusMessage = document.getElementById("statusMessage"); |
| const progressTrack = document.querySelector('[role="progressbar"]'); |
| |
| const bootStages = [ |
| { progress: 14, message: "Initializing system" }, |
| { progress: 31, message: "Loading visual core" }, |
| { progress: 52, message: "Warming light engine" }, |
| { progress: 74, message: "Mounting ZENos shell" }, |
| { progress: 91, message: "Preparing workspace" }, |
| { progress: 100, message: "System ready" } |
| ]; |
| |
| const reducedMotion = window.matchMedia( |
| "(prefers-reduced-motion: reduce)" |
| ).matches; |
| |
| let currentStage = 0; |
| |
| function updateBootScreen() { |
| const stage = bootStages[currentStage]; |
| |
| progressBar.style.width = `${stage.progress}%`; |
| progressValue.textContent = `${stage.progress}%`; |
| statusMessage.textContent = stage.message; |
| progressTrack.setAttribute("aria-valuenow", stage.progress); |
| |
| if (currentStage < bootStages.length - 1) { |
| currentStage++; |
| |
| window.setTimeout( |
| updateBootScreen, |
| reducedMotion ? 220 : 520 + Math.random() * 340 |
| ); |
| } else { |
| window.setTimeout(() => { |
| app.classList.add("boot-complete"); |
| }, reducedMotion ? 300 : 900); |
| } |
| } |
| |
| window.addEventListener("load", () => { |
| window.setTimeout(updateBootScreen, reducedMotion ? 100 : 500); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
