404.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HackerOS - Brak połączenia / 404</title>
<link rel="icon" type="image/png" href="HackerOS.png">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Arial',sans-serif;}
:root{--bg:#1C2526;--panel:#2F3A44;--dark:#121212;--grey:#B0B0B0;--cy:#00d4ff;--bl:#4a9eff;--red:#ff4d5e;--ok:#35e08a;--mono:'Courier New',Consolas,monospace;}
html,body{height:100%;}
body{background:var(--bg);color:#FFF;line-height:1.6;overflow-x:hidden;min-height:100vh;}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.35;}
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(47,58,68,.35) 0%,rgba(0,0,0,.75) 100%);}
/* scanlines + CRT flicker */
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px);animation:flick 4s infinite steps(1);}
.scan::after{content:'';position:absolute;left:0;width:100%;height:120px;top:-120px;background:linear-gradient(180deg,transparent,rgba(0,212,255,.07),transparent);animation:sweep 6s linear infinite;}
@keyframes sweep{to{top:100%}}
@keyframes flick{0%,100%{opacity:1}92%{opacity:.85}93%{opacity:1}96%{opacity:.9}}
.tear{position:fixed;left:0;width:100%;height:0;z-index:49;pointer-events:none;background:rgba(0,212,255,.12);mix-blend-mode:screen;display:none;}
header{background:var(--dark);position:fixed;width:100%;top:0;z-index:60;box-shadow:0 4px 10px rgba(0,0,0,.7);}
nav{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;}
nav .logo img{height:40px;width:auto;display:block;}
.status{font-family:var(--mono);font-size:13px;letter-spacing:2px;padding:5px 12px;border-radius:3px;border:1px solid var(--red);color:var(--red);background:rgba(255,77,94,.1);}
.status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:8px;animation:blink .9s infinite;}
.status.on{border-color:var(--ok);color:var(--ok);background:rgba(53,224,138,.1);}
.status.nf{border-color:var(--bl);color:var(--bl);background:rgba(74,158,255,.1);}
@keyframes blink{50%{opacity:.15}}
main{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 18px 50px;text-align:center;}
.wrap{width:100%;max-width:820px;transition:filter .1s;}
.wrap.burst{animation:burst .32s steps(2) 1;filter:hue-rotate(40deg) saturate(1.6);}
@keyframes burst{0%{transform:translate(0,0) skewX(0)}25%{transform:translate(-8px,2px) skewX(6deg)}50%{transform:translate(9px,-3px) skewX(-8deg)}75%{transform:translate(-4px,1px) skewX(3deg)}100%{transform:none}}
.eyebrow{font-family:var(--mono);color:var(--cy);font-size:12.5px;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;}
/* glitch title */
.glitch{position:relative;display:inline-block;font-family:var(--mono);font-weight:bold;font-size:clamp(54px,15vw,132px);line-height:1.05;letter-spacing:4px;color:#fff;text-shadow:0 0 18px rgba(0,212,255,.45);cursor:pointer;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.glitch::before{color:var(--cy);transform:translateX(-4px);text-shadow:none;animation:g1 2.6s infinite steps(1);}
.glitch::after{color:var(--red);transform:translateX(4px);text-shadow:none;animation:g2 3.1s infinite steps(1);}
@keyframes g1{0%{clip-path:inset(0 0 85% 0)}8%{clip-path:inset(30% 0 40% 0)}16%{clip-path:inset(70% 0 5% 0)}24%{clip-path:inset(10% 0 60% 0)}32%,100%{clip-path:inset(0 0 100% 0)}60%{clip-path:inset(45% 0 20% 0)}66%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%{clip-path:inset(60% 0 10% 0)}10%{clip-path:inset(5% 0 80% 0)}20%{clip-path:inset(40% 0 35% 0)}28%,100%{clip-path:inset(0 0 100% 0)}70%{clip-path:inset(80% 0 2% 0)}76%{clip-path:inset(0 0 100% 0)}}
.sub{font-size:clamp(16px,3.4vw,22px);color:var(--grey);margin:6px 0 24px;min-height:1.6em;}
.sub b{color:#fff;}
/* terminal */
.term{background:rgba(18,18,18,.88);border:1px solid #3A4A55;border-radius:10px;text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 24px rgba(0,212,255,.08);overflow:hidden;}
.term-bar{display:flex;align-items:center;gap:7px;background:var(--panel);padding:8px 12px;font-family:var(--mono);font-size:12px;color:var(--grey);}
.term-bar span{width:11px;height:11px;border-radius:50%;background:#ff5f56;}
.term-bar span:nth-child(2){background:#ffbd2e;}.term-bar span:nth-child(3){background:#27c93f;}
.term-bar em{font-style:normal;margin-left:8px;}
#log{font-family:var(--mono);font-size:13.5px;line-height:1.55;padding:14px 16px;height:250px;overflow:hidden;color:#C6C6C6;white-space:pre-wrap;word-break:break-word;}
#log .p{color:var(--cy);}#log .e{color:var(--red);}#log .w{color:#ffbd2e;}#log .o{color:var(--ok);}#log .d{color:#6f7f8a;}
.caret{display:inline-block;width:8px;height:15px;background:var(--cy);vertical-align:-2px;animation:blink .7s infinite;}
/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0;}
.stat{background:rgba(47,58,68,.85);border-radius:8px;padding:12px 8px;box-shadow:0 4px 10px rgba(0,0,0,.3);}
.stat small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;color:var(--grey);text-transform:uppercase;}
.stat strong{font-family:var(--mono);font-size:18px;color:var(--cy);}
.stat strong.bad{color:var(--red);}
.bars{display:inline-flex;gap:3px;align-items:flex-end;height:20px;}
.bars i{width:5px;background:#3A4A55;display:block;}
.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:9px}.bars i:nth-child(3){height:14px}.bars i:nth-child(4){height:20px}
.bars i.on{background:var(--cy);}
/* progress */
.prog{height:6px;background:#2a343c;border-radius:4px;overflow:hidden;margin:4px 0 6px;}
.prog div{height:100%;width:0;background:linear-gradient(90deg,var(--bl),var(--cy));box-shadow:0 0 10px var(--cy);}
.prog-t{font-family:var(--mono);font-size:12px;color:var(--grey);margin-bottom:22px;min-height:1.2em;}
/* buttons */
.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;padding:12px 24px;background-color:var(--grey);color:#121212;text-decoration:none;border-radius:5px;font-weight:bold;border:2px solid var(--grey);cursor:pointer;font-size:16px;transition:background-color .3s,transform .3s,box-shadow .3s;}
.btn:hover{background-color:#FFF;transform:scale(1.05);box-shadow:0 4px 14px rgba(0,212,255,.35);}
.btn.alt{background:transparent;color:#fff;border-color:#3A4A55;}
.btn.alt:hover{background:var(--panel);border-color:var(--cy);}
footer{position:relative;z-index:10;background:var(--dark);padding:16px;text-align:center;color:var(--grey);font-size:13px;box-shadow:0 -2px 5px rgba(0,0,0,.5);}
footer code{font-family:var(--mono);color:var(--cy);}
@media(max-width:560px){.stats{gap:8px}.stat strong{font-size:14px}#log{font-size:12px;height:230px}}
@media(prefers-reduced-motion:reduce){.glitch::before,.glitch::after,.scan,.scan::after,.wrap.burst{animation:none!important}#rain{display:none}}
</style>
</head>
<body>
<canvas id="rain"></canvas>
<div class="scan"></div>
<div class="tear" id="tear"></div>

<header><nav>
  <div class="logo"><img id="logo" src="HackerOS.png" alt="HackerOS" onerror="this.style.display='none'"></div>
  <div class="status" id="status"><i></i><span id="st-t">OFFLINE</span></div>
</nav></header>

<main>
  <div class="wrap" id="wrap">
    <div class="eyebrow" id="eyebrow">// connection.lost</div>
    <h1 class="glitch" id="title" data-text="OFFLINE">OFFLINE</h1>
    <p class="sub" id="sub"></p>

    <div class="term">
      <div class="term-bar"><span></span><span></span><span></span><em>root@hackeros:~# netcheck</em></div>
      <div id="log"></div>
    </div>

    <div class="stats">
      <div class="stat"><small id="l-link">Link</small><strong id="s-link" class="bad">DOWN</strong></div>
      <div class="stat"><small id="l-lat">Ping</small><strong id="s-lat" class="bad">∞</strong></div>
      <div class="stat"><small id="l-sig">Sygnał</small><strong><span class="bars" id="bars"><i></i><i></i><i></i><i></i></span></strong></div>
    </div>

    <div class="prog"><div id="pbar"></div></div>
    <div class="prog-t" id="ptxt"></div>

    <div class="hero-buttons">
      <button class="btn" id="retry">Spróbuj ponownie</button>
      <a class="btn alt" id="home" href="Home-page.html">Strona główna</a>
    </div>
  </div>
</main>

<footer>HackerOS &middot; <code id="code">ERR_INTERNET_DISCONNECTED</code></footer>

<script>
(function(){
'use strict';
var $=function(i){return document.getElementById(i)};
var reduce=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var PL=/^pl/i.test(navigator.language||'pl');

/* ---- base path (GitHub Pages project site vs. root) ---- */
var path=location.pathname,bi=path.indexOf('/HackerOS-Website/');
var BASE=bi>=0?path.slice(0,bi)+'/HackerOS-Website/':'/';
var HOME=BASE+'Home-page.html';
$('home').href=HOME;$('logo').src=BASE+'HackerOS.png';
var ico=document.querySelector('link[rel=icon]');if(ico)ico.href=BASE+'HackerOS.png';

/* ---- texts ---- */
var X=PL?{
 off:'OFFLINE',nf:'404',
 subOff:'<b>Brak połączenia z internetem.</b> Sprawdź kabel, Wi-Fi lub dane komórkowe.',
 subNf:'<b>Nie znaleziono strony.</b> Ten adres nie istnieje w systemie.',
 eyOff:'// połączenie.utracone',eyNf:'// zasób.nie_znaleziony',
 retry:'Spróbuj ponownie',home:'Strona główna',link:'Łącze',ping:'Ping',sig:'Sygnał',
 up:'ONLINE',down:'DOWN',
 rec:'Łączenie z serwerem',att:'Próba',
 back:'Połączenie przywrócone. Przekierowanie...',
 chk:'Sprawdzanie...',fail:'Nadal brak sieci.',
 stOff:'OFFLINE',stNf:'BŁĄD 404',stOn:'POŁĄCZONO'
}:{
 off:'OFFLINE',nf:'404',
 subOff:'<b>No internet connection.</b> Check your cable, Wi-Fi or mobile data.',
 subNf:'<b>Page not found.</b> This address does not exist in the system.',
 eyOff:'// connection.lost',eyNf:'// resource.not_found',
 retry:'Try again',home:'Home page',link:'Link',ping:'Ping',sig:'Signal',
 up:'ONLINE',down:'DOWN',
 rec:'Connecting to server',att:'Attempt',
 back:'Connection restored. Redirecting...',
 chk:'Checking...',fail:'Still offline.',
 stOff:'OFFLINE',stNf:'ERROR 404',stOn:'CONNECTED'
};
$('retry').textContent=X.retry;$('home').textContent=X.home;
$('l-link').textContent=X.link;$('l-lat').textContent=X.ping;$('l-sig').textContent=X.sig;
document.documentElement.lang=PL?'pl':'en';

/* ---- state ---- */
var offline=!navigator.onLine,timers=[],attempt=0,restored=false;
function T(f,ms){var t=setTimeout(f,ms);timers.push(t);return t}
function clearT(){timers.forEach(clearTimeout);timers=[]}

/* ---- scramble title ---- */
var CH='01#$%&*<>/\\{}[]=+?!ABCDEF';
function scramble(el,txt,done){
  if(reduce){el.textContent=txt;el.setAttribute('data-text',txt);done&&done();return}
  var i=0,len=txt.length,n=0;
  var iv=setInterval(function(){
    var s='';for(var k=0;k<len;k++)s+=k<i?txt[k]:CH[Math.floor(Math.random()*CH.length)];
    el.textContent=s;el.setAttribute('data-text',s);
    if(++n%3===0)i++;
    if(i>len){clearInterval(iv);el.textContent=txt;el.setAttribute('data-text',txt);done&&done()}
  },40);
}

/* ---- terminal ---- */
var log=$('log');
function line(txt,cls,instant,cb){
  var d=document.createElement('div');if(cls)d.className=cls;log.appendChild(d);
  while(log.children.length>13)log.removeChild(log.firstChild);
  if(instant||reduce){d.textContent=txt;cb&&cb();return}
  var i=0,c=document.createElement('span');c.className='caret';d.appendChild(c);
  (function step(){
    d.insertBefore(document.createTextNode(txt.slice(i,i+2)),c);i+=2;
    if(i<txt.length)T(step,12+Math.random()*18);else{c.remove();cb&&cb()}
  })();
}
function run(seq,i,end){
  if(i>=seq.length){end&&end();return}
  var s=seq[i];
  T(function(){line(s[0],s[1],s[3],function(){run(seq,i+1,end)})},s[2]||0);
}
function hex(n){var s='';while(n--)s+=('0'+Math.floor(Math.random()*256).toString(16)).slice(-2)+' ';return s}

function seqOffline(){
  return [
   ['$ ping -c 4 hackeros.org','p',200],
   ['PING hackeros.org (?): 56 bytes of data','d',150,1],
   ['Request timeout for icmp_seq 0','e',500,1],
   ['Request timeout for icmp_seq 1','e',600,1],
   ['Request timeout for icmp_seq 2','e',600,1],
   ['--- 100% packet loss ---','w',300,1],
   ['$ ip link show wlan0','p',500],
   ['wlan0: <NO-CARRIER,UP> state DOWN','e',200,1],
   ['[WARN] '+(PL?'utracono uplink, szyfruję bufor...':'uplink lost, encrypting buffer...'),'w',400],
   ['dump: '+hex(10),'d',250,1],
   ['[ OK ] '+(PL?'tryb offline aktywny':'offline mode active'),'o',500],
   ['$ ./reconnect.sh --auto','p',500]
  ];
}
function seqNotFound(){
  return [
   ['$ curl -I '+location.pathname.slice(0,48),'p',200],
   ['HTTP/2 404 Not Found','e',500,1],
   ['[WARN] '+(PL?'ścieżka nie istnieje w indeksie':'path missing from index'),'w',400],
   ['$ grep -r "'+(location.pathname.split('/').pop()||'index').slice(0,24)+'" ./site','p',500],
   ['grep: 0 matches','e',500,1],
   ['dump: '+hex(10),'d',250,1],
   ['[ OK ] '+(PL?'sieć działa, strony brak':'network ok, page missing'),'o',500],
   ['$ cd '+BASE+' && ls','p',500],
   ['Home-page.html  download.html  releases.html  articles.html','d',250,1]
  ];
}

/* ---- mode (offline / 404) ---- */
function setMode(){
  var st=$('status'),stt=$('st-t');
  clearT();log.innerHTML='';
  if(offline){
    st.className='status';stt.textContent=X.stOff;
    $('eyebrow').textContent=X.eyOff;$('sub').innerHTML=X.subOff;
    scramble($('title'),X.off);
    $('code').textContent='ERR_INTERNET_DISCONNECTED';
    $('s-link').textContent=X.down;$('s-link').className='bad';
    document.title='HackerOS - '+(PL?'Brak połączenia':'Offline');
    run(seqOffline(),0,function(){startReconnect()});
  }else{
    st.className='status nf';stt.textContent=X.stNf;
    $('eyebrow').textContent=X.eyNf;$('sub').innerHTML=X.subNf;
    scramble($('title'),X.nf);
    $('code').textContent='HTTP_404_NOT_FOUND';
    $('s-link').textContent=X.up;$('s-link').className='';
    document.title='HackerOS - 404';
    $('ptxt').textContent='';$('pbar').style.width='0';
    run(seqNotFound(),0);
  }
}

/* ---- reconnect loop ---- */
function startReconnect(){
  if(restored||!offline)return;
  attempt++;
  var dur=4500,t0=Date.now(),bar=$('pbar');
  $('ptxt').textContent=X.rec+'... ['+X.att+' '+attempt+']';
  (function tick(){
    if(restored||!offline)return;
    var p=Math.min(1,(Date.now()-t0)/dur);bar.style.width=(p*100)+'%';
    if(p<1)T(tick,60);else check(true);
  })();
}
function check(auto){
  if(restored)return;
  $('ptxt').textContent=X.chk;
  var done=false;
  var ctrl=window.AbortController?new AbortController():null;
  var to=setTimeout(function(){if(ctrl)ctrl.abort()},4000);
  fetch(BASE+'HackerOS.png?_='+Date.now(),{method:'HEAD',cache:'no-store',signal:ctrl?ctrl.signal:undefined})
   .then(function(r){clearTimeout(to);if(done)return;done=true;if(r&&r.status<500)restore();else fail(auto)})
   .catch(function(){clearTimeout(to);if(done)return;done=true;fail(auto)});
}
function fail(auto){
  if(!offline)return;
  $('pbar').style.width='0';$('ptxt').textContent=X.fail;
  line('[ERR] '+X.fail,'e',true);
  if(auto)T(startReconnect,1200);
}
function restore(){
  if(restored)return;restored=true;offline=false;clearT();
  $('status').className='status on';$('st-t').textContent=X.stOn;
  $('s-link').textContent=X.up;$('s-link').className='';
  $('pbar').style.width='100%';$('ptxt').textContent=X.back;
  line('[ OK ] '+X.back,'o',true);
  burst();
  setTimeout(function(){location.href=HOME},2200);
}
$('retry').addEventListener('click',function(){
  if(!offline){location.reload();return}
  clearT();$('pbar').style.width='0';check(false);
  T(function(){if(offline)startReconnect()},1500);
});
window.addEventListener('online',function(){if(offline)check(false)});
window.addEventListener('offline',function(){if(restored)return;offline=true;setMode()});

/* ---- live fake stats ---- */
var bars=$('bars').children;
setInterval(function(){
  var lat=$('s-lat');
  if(offline){
    lat.textContent=Math.random()<.5?'∞':'timeout';lat.className='bad';
    var n=Math.random()<.65?0:1+Math.floor(Math.random()*2);
    for(var i=0;i<4;i++)bars[i].className=i<n?'on':'';
  }else{
    lat.textContent=(8+Math.floor(Math.random()*40))+' ms';lat.className='';
    for(var j=0;j<4;j++)bars[j].className='on';
  }
},700);

/* ---- random glitch bursts + screen tear ---- */
var wrap=$('wrap'),tear=$('tear');
function burst(){
  if(reduce)return;
  wrap.classList.remove('burst');void wrap.offsetWidth;wrap.classList.add('burst');
  tear.style.top=Math.random()*100+'%';tear.style.height=(4+Math.random()*50)+'px';tear.style.display='block';
  setTimeout(function(){tear.style.display='none'},180);
  if(Math.random()<.6)scramble($('title'),restored?X.up:(offline?X.off:X.nf));
}
(function loop(){setTimeout(function(){burst();loop()},1800+Math.random()*4500)})();
$('title').addEventListener('mouseenter',burst);
$('title').addEventListener('click',burst);

/* ---- matrix rain ---- */
var cv=$('rain'),cx=cv.getContext('2d'),cols=[],fs=16,W,H;
var RC='01ABCDEF{}<>/\\#$%&*=+;:'.split('');
function size(){
  W=cv.width=innerWidth;H=cv.height=innerHeight;
  var n=Math.ceil(W/fs);cols=[];for(var i=0;i<n;i++)cols.push(Math.random()*H/fs);
}
size();addEventListener('resize',size);
function draw(){
  cx.fillStyle='rgba(28,37,38,.12)';cx.fillRect(0,0,W,H);
  cx.font=fs+'px monospace';
  for(var i=0;i<cols.length;i++){
    var ch=RC[Math.floor(Math.random()*RC.length)];
    cx.fillStyle=Math.random()<.04?'#ffffff':(offline&&Math.random()<.03?'#ff4d5e':'#00d4ff');
    cx.fillText(ch,i*fs,cols[i]*fs);
    if(cols[i]*fs>H&&Math.random()>.975)cols[i]=0;
    cols[i]+=offline&&Math.random()<.3?0:1;
  }
}
if(!reduce)setInterval(draw,55);

/* ---- service worker: serves this page when the network is gone ---- */
if('serviceWorker' in navigator&&location.protocol.indexOf('http')===0){
  navigator.serviceWorker.register(BASE+'sw.js').catch(function(){});
}

setMode();
})();
</script>
</body>
</html>