calc.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>calc.exe // SYSTEM BREACH</title>
<style>
:root{--g:#00ff66;--cw:148px;--ch:206px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden;color:var(--g);
 font-family:"Courier New",monospace;user-select:none;-webkit-user-select:none;
 cursor:crosshair;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#matrix{position:fixed;inset:0;z-index:1;opacity:.45}
#scan{position:fixed;inset:0;z-index:2;pointer-events:none;
 background:repeating-linear-gradient(0deg,rgba(0,255,102,.07) 0 1px,transparent 1px 3px)}
#vig{position:fixed;inset:0;z-index:3;pointer-events:none;
 background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.9) 100%)}
#term{position:fixed;left:10px;top:10px;z-index:400;width:min(420px,72vw);
 font-size:12px;line-height:1.45;text-shadow:0 0 6px rgba(0,255,102,.8);pointer-events:none}
#term .l{white-space:pre-wrap;word-break:break-word;opacity:0;animation:fin .2s forwards}
@keyframes fin{to{opacity:1}}
.warn{color:#ffe14d;text-shadow:0 0 8px rgba(255,225,77,.8)!important}
.bad{color:#ff4d4d;text-shadow:0 0 8px rgba(255,77,77,.8)!important}
.cursor::after{content:"_";animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
#hint{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:400;
 padding:6px 14px;border:1px solid #0a5;background:rgba(0,25,10,.8);font-size:13px;
 opacity:0;transition:opacity .5s;pointer-events:none;text-shadow:0 0 8px var(--g);white-space:nowrap}
#hint.on{opacity:1}
#stage{position:fixed;inset:0;z-index:50}

.calc{position:absolute;width:var(--cw);height:var(--ch);background:#040b06;
 border:1px solid #10d15e;border-radius:7px;overflow:hidden;
 box-shadow:0 0 14px rgba(0,255,102,.35),inset 0 0 22px rgba(0,255,102,.05);
 transform:rotate(var(--r));animation:pop .16s ease-out;z-index:60}
@keyframes pop{from{transform:scale(.35) rotate(var(--r));opacity:0}
 to{transform:scale(1) rotate(var(--r));opacity:1}}
@keyframes popout{to{transform:scale(.15) rotate(calc(var(--r) * 4));opacity:0}}
@keyframes shake{0%{transform:rotate(var(--r)) translate(4px,-4px)}
 50%{transform:rotate(var(--r)) translate(-4px,4px)}100%{transform:rotate(var(--r))}}
.tb{height:22px;display:flex;align-items:center;justify-content:space-between;
 padding:0 6px;background:linear-gradient(#0b2f18,#04170b);border-bottom:1px solid #0d6;
 font-size:10px;letter-spacing:.5px;color:#8effbd}
.tbx{width:17px;height:17px;display:grid;place-items:center;font-size:11px;
 border:1px solid #0a5;border-radius:3px;cursor:pointer}
.tbx:hover{background:#0f6;color:#000}
.scr{height:34px;margin:6px;padding:0 7px;background:#00200d;border:1px solid #0a5;
 border-radius:4px;display:flex;align-items:center;justify-content:flex-end;
 font-size:15px;color:#9dffc6;overflow:hidden;text-shadow:0 0 7px var(--g)}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 6px 6px}
.k{height:23px;display:grid;place-items:center;font:inherit;font-size:11px;
 background:#07190d;color:#6dffab;border:1px solid #095;border-radius:3px;cursor:pointer}
.k:hover{background:#0f6;color:#000}
.k.op{color:#ffe14d;border-color:#6a5}

#boot{position:fixed;inset:0;z-index:500;background:#000;display:grid;
 place-content:center;justify-items:center;gap:14px;text-align:center;
 transition:opacity .35s;font-size:14px;text-shadow:0 0 10px var(--g)}
#boot.off{opacity:0;pointer-events:none}
#boot pre{font-size:12px;line-height:1.15;margin:0;color:#0f8}
#boot .t{font-size:26px;letter-spacing:6px;font-weight:700;animation:glitch 2.5s infinite}
@keyframes glitch{0%,92%,100%{transform:none;opacity:1}
 93%{transform:translate(-2px,1px)}95%{transform:translate(2px,-1px)}97%{transform:translate(-1px,0)}}
#boot .s{color:#7dffb0;animation:bl 1s steps(1) infinite}

@media (max-width:640px){
 :root{--cw:108px;--ch:152px}
 #term{font-size:10px}
 .tb{height:17px;font-size:8px}
 .tbx{width:13px;height:13px;font-size:9px}
 .scr{height:24px;margin:4px;font-size:11px}
 .keys{gap:2px;padding:0 4px 4px}
 .k{height:15px;font-size:8px}
 #hint{font-size:10px;padding:4px 8px}
 #boot .t{font-size:18px;letter-spacing:3px}
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<div id="scan"></div>
<div id="vig"></div>
<div id="term"><div class="l cursor">C:\&gt;</div></div>
<div id="stage"></div>
<div id="hint">ESC = salir de pantalla completa &nbsp;·&nbsp; ESPACIO = cerrar todo</div>

<div id="boot">
  <div class="t">SYSTEM BREACH</div>
  <pre>
┌─────────────┐
│  8 8 8 8 8  │
├─────────────┤
│ 7 │ 8 │ 9 │÷│
│ 4 │ 5 │ 6 │×│
│ 1 │ 2 │ 3 │−│
│ 0 │ . │ = │+│
└─────────────┘
  </pre>
  <div class="s">[ HAZ CLIC PARA INICIAR ]</div>
</div>

<script>
const $=s=>document.querySelector(s);
const term=$('#term'), stage=$('#stage'), hint=$('#hint'), boot=$('#boot');
let calcs=[], slotList=[], MAX=40, CW=148, CH=206, auto=null, started=false;

/* ---- audio ---- */
let actx=null;
function beep(f,d,type,vol){
  if(!actx) return;
  try{
    const o=actx.createOscillator(), g=actx.createGain();
    o.type=type||'square'; o.frequency.value=f; g.gain.value=vol||.035;
    o.connect(g); g.connect(actx.destination);
    const t=actx.currentTime;
    o.start(t); g.gain.exponentialRampToValueAtTime(.0001,t+d); o.stop(t+d+.02);
  }catch(e){}
}

/* ---- lluvia de codigo ---- */
const cv=document.getElementById('matrix'), ctx=cv.getContext('2d');
let mcols=[], FS=14;
function initM(){
  cv.width=innerWidth; cv.height=innerHeight; mcols=[];
  const n=Math.ceil(cv.width/FS);
  for(let i=0;i<n;i++) mcols.push(Math.random()*cv.height/FS);
}
function drawM(){
  ctx.fillStyle='rgba(0,0,0,.09)'; ctx.fillRect(0,0,cv.width,cv.height);
  ctx.fillStyle='#00ff66'; ctx.font=FS+'px "Courier New",monospace';
  const ch='01アイウエオカキクケコサシスセソ<>[]{}+-*/=';
  for(let i=0;i<mcols.length;i++){
    ctx.fillText(ch[Math.random()*ch.length|0], i*FS, mcols[i]*FS);
    if(mcols[i]*FS>cv.height && Math.random()>.975) mcols[i]=0;
    mcols[i]+=1;
  }
}
initM(); setInterval(drawM,50);
addEventListener('resize',()=>{ initM(); if(!calcs.length) makeSlots(); });

/* ---- terminal ---- */
function log(t,cls){
  const d=document.createElement('div');
  d.className='l'+(cls?' '+cls:''); d.textContent=t;
  term.appendChild(d);
  while(term.children.length>10) term.removeChild(term.firstChild);
}

/* ---- posiciones ---- */
function sizeVars(){
  const cs=getComputedStyle(document.documentElement);
  CW=parseFloat(cs.getPropertyValue('--cw'))||148;
  CH=parseFloat(cs.getPropertyValue('--ch'))||206;
}
function makeSlots(){
  const cols=Math.max(1,Math.floor(innerWidth/(CW+8)));
  const rows=Math.max(1,Math.floor((innerHeight-140)/(CH+6)));
  const arr=[];
  for(let r=0;r<rows;r++) for(let c=0;c<cols;c++)
    arr.push({x:c*(CW+8)+6+Math.random()*4, y:r*(CH+6)+62+Math.random()*4, rot:Math.random()*7-3.5});
  for(let i=arr.length-1;i>0;i--){const j=Math.random()*(i+1)|0; const t=arr[i]; arr[i]=arr[j]; arr[j]=t;}
  slotList=arr;
  MAX=Math.max(22, Math.min(48, arr.length));
}

/* ---- calculadora ---- */
const KEYS=[['7','7'],['8','8'],['9','9'],['÷','÷'],
            ['4','4'],['5','5'],['6','6'],['×','×'],
            ['1','1'],['2','2'],['3','3'],['−','−'],
            ['0','0'],['.','.'],['=','='],['+','+'],
            ['C','C'],['±','±'],['%','%'],['√','√']];

function buildCalc(x,y,rot){
  const el=document.createElement('div');
  el.className='calc';
  el.style.left=x+'px'; el.style.top=y+'px';
  el.style.setProperty('--r',rot+'deg');

  const tb=document.createElement('div'); tb.className='tb';
  const nm=document.createElement('span'); nm.textContent='calc.exe';
  const xb=document.createElement('div'); xb.className='tbx'; xb.textContent='✕';
  tb.append(nm,xb);

  const scr=document.createElement('div'); scr.className='scr'; scr.textContent='0';
  const keys=document.createElement('div'); keys.className='keys';
  let expr='';

  KEYS.forEach(pair=>{
    const b=document.createElement('button');
    b.className='k'+(/[÷×−+√%]/.test(pair[1])?' op':'');
    b.tabIndex=-1; b.textContent=pair[0];
    b.addEventListener('mousedown',e=>e.preventDefault());
    b.addEventListener('click',e=>{
      e.stopPropagation();
      beep(1500+Math.random()*400,.015,'square',.02);
      const v=pair[1];
      if(v==='C') expr='';
      else if(v==='±') expr = expr.charAt(0)==='-' ? expr.slice(1) : '-'+expr;
      else if(v==='√') expr=String(Math.sqrt(parseFloat(expr)||0));
      else if(v==='%') expr=String((parseFloat(expr)||0)/100);
      else if(v==='='){
        try{ expr=String(eval(expr.replace(/×/g,'*').replace(/÷/g,'/').replace(/−/g,'-'))) }
        catch(err){ expr='ERROR'; }
        if(expr==='NaN'||expr==='Infinity') expr='ERROR';
        if(expr!=='ERROR' && expr.length>9) expr=Number(expr).toPrecision(7);
      } else expr+=v;
      scr.textContent=(expr||'0').slice(-11);
    });
    keys.appendChild(b);
  });

  el.append(tb,scr,keys);
  xb.addEventListener('click',e=>{ e.stopPropagation(); onX(el,xb); });
  return el;
}

/* ---- la X traicionera ---- */
function onX(el,xb){
  beep(1400,.05,'square',.05);
  spawn(); spawn();
  xb.textContent='+2';
  setTimeout(()=>xb.textContent='✕',420);
  el.style.animation='shake .16s ease-out';
  setTimeout(()=>{ el.style.animation='none'; },170);
}

/* ---- spawn ---- */
function spawn(){
  if(calcs.length>=MAX) return;
  const s=slotList.pop();
  const x = s ? s.x : 6+Math.random()*Math.max(1,innerWidth-CW-12);
  const y = s ? s.y : 58+Math.random()*Math.max(1,innerHeight-CH-70);
  const rot = s ? s.rot : Math.random()*7-3.5;
  const el=buildCalc(x,y,rot);
  stage.appendChild(el); calcs.push(el);
  beep(520+Math.random()*700,.03,'square',.028);
  if(calcs.length%3===0) log('[ ok ] calculadora_'+String(calcs.length).padStart(4,'0')+'.exe');
}

function startSpawn(){
  if(auto) return;
  const t0=performance.now();
  log('> spawn masivo: ACTIVADO','warn');
  auto=setInterval(()=>{
    spawn();
    if(performance.now()-t0>9500){
      clearInterval(auto); auto=null;
      log('> spawn detenido. total: '+calcs.length,'warn');
    }
  },115);
}

/* ---- cerrar todo ---- */
function closeAll(){
  if(auto){ clearInterval(auto); auto=null; }
  const list=calcs.slice(); calcs=[];
  list.forEach((el,i)=>{
    setTimeout(()=>{
      el.style.animation='popout .18s ease-in forwards';
      beep(700-i*10,.02,'sine',.015);
      setTimeout(()=>el.remove(),190);
    }, i*16);
  });
  makeSlots();
  log('> cerrando '+list.length+' calculadoras ... OK');
}

/* ---- arranque ---- */
function goFull(){
  const el=document.documentElement;
  const fn=el.requestFullscreen||el.webkitRequestFullscreen||el.mozRequestFullScreen||el.msRequestFullscreen;
  if(fn){ try{ const p=fn.call(el); if(p&&p.catch)p.catch(()=>{}); }catch(e){} }
}

function bootSeq(){
  const lines=[
    ['> calc.exe v3.7.1 inicializando...',null,0],
    ['> memoria ......... OK',null,320],
    ['> unidad C:\\ .... OK',null,640],
    ['> cargando calculadoras.dll ....... OK',null,960],
    ['> ERROR: desbordamiento de pila de calculadoras','bad',1300],
    ['> ACCESO CONCEDIDO','warn',1700]
  ];
  lines.forEach(l=>setTimeout(()=>log(l[0],l[1]),l[2]));
  setTimeout(startSpawn,2100);
  setTimeout(()=>{
    log('> pista: la X NO cierra nada. abre 2 mas.','warn');
    hint.classList.add('on');
  },14000);
}

function begin(){
  if(started) return; started=true;
  try{ actx=new (window.AudioContext||window.webkitAudioContext)(); if(actx.state==='suspended') actx.resume(); }catch(e){}
  boot.classList.add('off');
  setTimeout(()=>boot.remove(),400);
  goFull();
  sizeVars(); makeSlots(); bootSeq();
}

document.addEventListener('pointerdown',()=>{ if(!started) begin(); });
document.addEventListener('keydown',e=>{
  if(!started){ begin(); return; }
  if(e.code==='Space'){
    e.preventDefault();
    if(document.activeElement && document.activeElement.blur) document.activeElement.blur();
    if(calcs.length) closeAll(); else startSpam();
  }
  if(e.code==='Escape') log('> ESC: pantalla completa desactivada','bad');
});
function startSpam(){ startSpawn(); }
</script>
</body>
</html>