404.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <meta name="hackeros-offline" content="main">
    <title>HackerOS Search | Offline</title>
    <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/HackerOS-Linux-System/HackerOS-Website/main/HackerOS.png">
    <!--
        404.html - ekran offline ZWYKŁEJ strony HackerOS Search (index.html, motywy default/space/cyber/matrix/sunset)
        oraz strona 404. Blue Edition (blue.html) ma własny ekran offline: offline.html.
        Plik jest w pełni samodzielny (CSS + JS inline), żeby działał bez internetu.
        Kod JS pochodzi z src/offline.ts - podczas builda (scripts/build.ts) jest kompilowany
        i wstawiany w miejsce znacznika @@OFFLINE_JS@@ na dole tego pliku.
        Wyświetla go Service Worker (sw.js), gdy nie da się załadować zwykłej strony (blue.html dostaje offline.html),
        a gdy internet zniknie na otwartej stronie - wstawia go guard.ts z kopii w localStorage (hackeros_offline_html_main).
        Znacznik <meta name="hackeros-offline"> pozwala guardowi odróżnić ten plik od zwykłego błędu.

        Podgląd w przeglądarce (bez wyłączania internetu):
          404.html?offline                  -> wymuszony tryb offline (podgląd, nie wraca do strony)
          404.html?lost                     -> tryb offline z prawdziwym testem sieci (tak wchodzi tu strona główna)
          404.html?offline&theme=matrix     -> + wybrany motyw (default|space|cyber|matrix|sunset)
          404.html?theme=cyber              -> zwykły 404 w motywie cyber
    -->
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SFMono-Regular', Consolas, 'Courier New', monospace;
            --bg1: #1E293B; --bg2: #334155;
            --fg: #F3F4F6; --dim: #9CA3AF;
            --acc: #60a5fa; --acc2: #a78bfa; --warn: #f87171; --ok: #4ade80;
            --glow: rgba(96, 165, 250, .45);
            --scan: .10;
        }
        body.space-theme  { --bg1:#000000; --bg2:#000022; --fg:#e8eeff; --dim:#8b97c4; --acc:#9bb8ff; --acc2:#ffffff; --warn:#ff5a5a; --glow:rgba(155,184,255,.5); --scan:.06; }
        body.cyber-theme  { --bg1:#0a0f1e; --bg2:#1a0b2e; --fg:#e6faff; --dim:#7aa6b8; --acc:#00ffff; --acc2:#ff00ff; --warn:#ff2a6d; --glow:rgba(0,255,255,.5); --scan:.18; }
        body.matrix-theme { --bg1:#000000; --bg2:#001a00; --fg:#00ff66; --dim:#00a844; --acc:#00ff66; --acc2:#aaffcc; --warn:#ff4d4d; --ok:#aaffcc; --glow:rgba(0,255,102,.55); --scan:.22; }
        body.sunset-theme { --bg1:#2b0f1e; --bg2:#c9600f; --fg:#ffe4b8; --dim:#d9a77a; --acc:#ffb347; --acc2:#ff5e7e; --warn:#ff4d6d; --glow:rgba(255,179,71,.5); --scan:.14; }

        html, body { min-height: 100%; }
        body {
            font-family: var(--mono);
            color: var(--fg);
            background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%);
            background-attachment: fixed;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            transition: background .3s ease;
        }
        body.sunset-theme { background: linear-gradient(135deg, #2b0f1e 0%, #7a2f1f 50%, #c9600f 100%); background-attachment: fixed; }

        canvas#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -10; pointer-events: none; }
        body.matrix-theme canvas#bg { opacity: .85; }

        /* --- nakładki: szum, linie skanujące, winieta, "rozdarcia" ekranu --- */
        canvas#noise { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; opacity: .06; image-rendering: pixelated; mix-blend-mode: overlay; transition: opacity .1s; }
        .scan { position: fixed; inset: 0; z-index: 50; pointer-events: none;
            background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,var(--scan)) 3px); }
        .scan::after { content: ''; position: absolute; left: 0; right: 0; top: -20vh; height: 18vh;
            background: linear-gradient(to bottom, transparent, rgba(255,255,255,.05), transparent);
            animation: roll 7s linear infinite; }
        .vignette { position: fixed; inset: 0; z-index: 45; pointer-events: none;
            background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
        #tears { position: fixed; inset: 0; z-index: 46; pointer-events: none; overflow: hidden; }
        .tear { position: absolute; left: 0; width: 100%; display: none; background: var(--acc); mix-blend-mode: screen; opacity: .18; }
        .tear.alt { background: var(--acc2); }
        body.burst .tear { display: block; }

        /* --- logo i przełącznik motywu (jak na stronie głównej) --- */
        .logo { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 1000; display: block; transition: transform .2s ease; }
        .logo:hover { transform: scale(1.05); }
        .logo img { height: 2.5rem; width: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
        .theme-toggle { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 1000; cursor: pointer; user-select: none;
            color: var(--fg); font-family: var(--mono); font-size: 1rem; padding: .5rem 1rem;
            background: rgba(255,255,255,.1); border: 0; border-radius: .5rem; transition: background .2s, transform .1s, box-shadow .2s; }
        .theme-toggle:hover { background: rgba(255,255,255,.2); transform: scale(1.02); box-shadow: 0 0 10px var(--glow); }
        .theme-toggle:focus-visible, .btn:focus-visible, .logo:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

        /* --- scena --- */
        .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 1.25rem; padding: 6rem 1rem 2rem; text-align: center; position: relative; z-index: 1;
            animation: flicker 6s infinite; }

        .chip { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem;
            font-size: .8rem; letter-spacing: .12em; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
            color: var(--warn); border-radius: 9999px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); }
        .chip .dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 1s infinite; }
        .chip.is-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
        .chip.is-check { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
        .chip.is-404 { color: var(--acc2); border-color: color-mix(in srgb, var(--acc2) 55%, transparent); }

        /* --- główny glitch --- */
        .glitch { position: relative; max-width: 100%; font-size: clamp(1.9rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: .05em;
            line-height: 1.05; text-transform: uppercase; color: var(--fg); text-shadow: 0 0 22px var(--glow); cursor: pointer; word-break: break-word; }
        .glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .glitch::before { color: var(--acc);  transform: translateX(3px);  text-shadow: -2px 0 var(--acc2); animation: gl1 3.1s infinite linear alternate-reverse; }
        .glitch::after  { color: var(--acc2); transform: translateX(-3px); text-shadow:  2px 0 var(--acc);  animation: gl2 2.6s infinite linear alternate-reverse; }
        body.burst .glitch { text-shadow: 0 0 32px var(--acc), 4px 0 var(--acc2), -4px 0 var(--acc); }

        .sub { max-width: 38rem; color: var(--dim); font-size: .95rem; line-height: 1.6; min-height: 3.1em; }
        .sub b { color: var(--acc); font-weight: 600; }

        /* --- okno terminala --- */
        .term { width: min(46rem, 94vw); text-align: left; border-radius: .6rem; overflow: hidden;
            background: rgba(0,0,0,.58); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
            box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 8px 40px rgba(0,0,0,.5), 0 0 28px color-mix(in srgb, var(--acc) 18%, transparent);
            backdrop-filter: blur(8px); transition: border-color .1s, box-shadow .1s; }
        body.burst .term { border-color: var(--warn); box-shadow: 0 0 30px color-mix(in srgb, var(--warn) 45%, transparent); }
        .term-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; font-size: .75rem; color: var(--dim);
            background: rgba(255,255,255,.05); border-bottom: 1px solid color-mix(in srgb, var(--acc) 20%, transparent); }
        .term-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dim); opacity: .5; }
        .term-bar i:first-child { background: var(--warn); opacity: .9; }
        .term-bar span { margin-left: .5rem; }
        .term-body { padding: .8rem 1rem; font-size: .82rem; line-height: 1.5; overflow: hidden; }
        .term-body div { min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .term-body .cmd { color: var(--fg); }
        .term-body .dim { color: var(--dim); }
        .term-body .ok { color: var(--ok); }
        .term-body .fail { color: var(--warn); }
        .term-body .acc { color: var(--acc); text-shadow: 0 0 8px var(--glow); }
        .term-body div:last-child::after { content: '\2588'; margin-left: 2px; color: var(--acc); animation: blink 1s steps(1) infinite; }
        .term-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem;
            font-size: .75rem; color: var(--dim); border-top: 1px solid color-mix(in srgb, var(--acc) 20%, transparent); }

        .bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1rem; }
        .bars b { width: 4px; background: var(--warn); opacity: .25; border-radius: 1px; animation: bar 1.6s infinite; }
        .bars b:nth-child(1) { height: 25%; animation-delay: 0s; }
        .bars b:nth-child(2) { height: 45%; animation-delay: .15s; }
        .bars b:nth-child(3) { height: 65%; animation-delay: .3s; }
        .bars b:nth-child(4) { height: 82%; animation-delay: .45s; }
        .bars b:nth-child(5) { height: 100%; animation-delay: .6s; }
        .bars.is-ok b { background: var(--ok); opacity: 1; animation: none; }

        /* --- przyciski --- */
        .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
        .btn { font-family: var(--mono); font-size: .9rem; color: var(--acc); text-decoration: none; cursor: pointer;
            padding: .65rem 1.3rem; border-radius: .5rem; background: rgba(0,0,0,.35); border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent);
            transition: background .2s, box-shadow .2s, transform .1s, color .2s; }
        .btn:hover { background: color-mix(in srgb, var(--acc) 18%, transparent); box-shadow: 0 0 14px var(--glow); color: var(--fg); transform: translateY(-1px); animation: btnglitch .3s steps(2) 1; }
        .btn[hidden] { display: none; }

        footer { position: relative; z-index: 1; padding: 1rem; text-align: center; font-size: .8rem; color: var(--dim); border-top: 1px solid rgba(255,255,255,.1); }
        footer a { color: var(--acc); text-decoration: none; }
        footer a:hover { color: var(--fg); }

        /* --- animacje --- */
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes pulse { 50% { opacity: .35; } }
        @keyframes bar { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
        @keyframes roll { to { transform: translateY(140vh); } }
        @keyframes flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .82; } 92% { opacity: 1; } 95% { opacity: .9; } 96% { opacity: 1; } }
        @keyframes shake {
            0% { transform: translate(0,0); } 25% { transform: translate(-4px,1px) skewX(2deg); }
            50% { transform: translate(5px,-1px); } 75% { transform: translate(-3px,2px) skewX(-2deg); } 100% { transform: translate(0,0); }
        }
        body.burst .stage { animation: shake .12s steps(2) infinite; }
        @keyframes btnglitch { 0% { text-shadow: 2px 0 var(--acc2), -2px 0 var(--acc); } 100% { text-shadow: none; } }
        @keyframes gl1 {
            0% { clip-path: inset(8% 0 82% 0); } 8% { clip-path: inset(62% 0 12% 0); } 16% { clip-path: inset(30% 0 48% 0); }
            24% { clip-path: inset(78% 0 4% 0); } 32% { clip-path: inset(0 0 94% 0); } 40% { clip-path: inset(44% 0 38% 0); }
            52% { clip-path: inset(88% 0 2% 0); } 64% { clip-path: inset(18% 0 66% 0); } 76% { clip-path: inset(54% 0 28% 0); }
            88% { clip-path: inset(2% 0 90% 0); } 100% { clip-path: inset(70% 0 14% 0); }
        }
        @keyframes gl2 {
            0% { clip-path: inset(72% 0 10% 0); } 10% { clip-path: inset(14% 0 74% 0); } 20% { clip-path: inset(50% 0 30% 0); }
            30% { clip-path: inset(4% 0 88% 0); } 42% { clip-path: inset(84% 0 6% 0); } 55% { clip-path: inset(26% 0 52% 0); }
            66% { clip-path: inset(66% 0 20% 0); } 78% { clip-path: inset(36% 0 44% 0); } 90% { clip-path: inset(92% 0 0 0); }
            100% { clip-path: inset(10% 0 78% 0); }
        }

        /* --- akcenty zależne od motywu --- */
        body.matrix-theme .term { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(0,255,102,.22); }
        body.matrix-theme .glitch::before, body.matrix-theme .glitch::after { mix-blend-mode: screen; }
        body.cyber-theme .glitch { letter-spacing: .09em; }
        body.cyber-theme .term { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); border-radius: 0; }
        body.sunset-theme .glitch { text-shadow: 0 0 24px rgba(255,140,0,.6), 0 3px 0 rgba(255,94,126,.5); }
        body.sunset-theme .scan::after { height: 26vh; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.09), transparent); animation-duration: 5s; }
        body.space-theme .glitch { letter-spacing: .12em; font-weight: 700; }

        @media (max-width: 600px) {
            .logo { top: 1rem; left: 1rem; } .logo img { height: 2rem; }
            .theme-toggle { top: 1rem; right: 1rem; font-size: .875rem; padding: .375rem .75rem; }
            .stage { padding-top: 5rem; gap: 1rem; }
            .term-body { font-size: .72rem; padding: .6rem .75rem; }
            .sub { font-size: .85rem; }
            footer { font-size: .72rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; }
            .scan::after { display: none; }
        }
    </style>
</head>
<body>
    <canvas id="bg" aria-hidden="true"></canvas>
    <canvas id="noise" aria-hidden="true"></canvas>
    <div id="tears" aria-hidden="true"></div>
    <div class="vignette" aria-hidden="true"></div>
    <div class="scan" aria-hidden="true"></div>

    <a class="logo" id="logo" href="index.html" aria-label="HackerOS Search">
        <img src="https://raw.githubusercontent.com/HackerOS-Linux-System/HackerOS-Website/main/HackerOS.png" alt="HackerOS Logo" onerror="this.parentNode.style.display='none'">
    </a>
    <button type="button" class="theme-toggle" id="themeToggle">Change</button>

    <main class="stage">
        <div class="chip is-check" id="chip" role="status" aria-live="polite"><span class="dot"></span><span id="chipText">...</span></div>
        <h1 class="glitch" id="title" data-text="OFFLINE" title="glitch!">OFFLINE</h1>
        <p class="sub" id="sub">Brak połączenia z internetem.</p>

        <section class="term" aria-label="Terminal diagnostyczny">
            <div class="term-bar"><i></i><i></i><i></i><span id="termTitle">root@hackeros: ~/network</span></div>
            <div class="term-body" id="term" aria-hidden="true"></div>
            <div class="term-foot">
                <span class="bars" id="bars" aria-hidden="true"><b></b><b></b><b></b><b></b><b></b></span>
                <span id="statusText"></span>
            </div>
        </section>

        <div class="actions">
            <button type="button" class="btn" id="retry">Spróbuj ponownie</button>
            <a class="btn" id="homeBtn" href="index.html" hidden>Strona główna</a>
        </div>
        <noscript><p class="sub">Brak połączenia z internetem. Sprawdź kabel, Wi-Fi lub router i odśwież stronę.</p></noscript>
    </main>

    <footer>
        <a href="https://hackeros-linux-system.github.io/HackerOS-Website/" target="_blank" rel="noopener">HackerOS</a> Search | © 2026
    </footer>

<script>/* @@OFFLINE_JS@@ */</script>
</body>
</html>