ПРОТОКОЛ ВЗЛОМА // УЗЕЛ 31.10
Заражённый узел Zero Frame открыт для всех, кто готов рискнуть. Духи заперли в нём три демона — соберите их коды, пока не сомкнулся лёд.
Правила:
— первый код берётся из верхней строки матрицы;
— дальше строка и столбец чередуются: выбрали код в строке — следующий ищете в его столбце, и наоборот;
— в буфере шесть ячеек, на всё сорок пять секунд с первого клика;
— цель — собрать последовательности всех трёх демонов. Матрица каждый раз новая, но решение у неё есть всегда.
Делитесь результатом в теме — Зеро любит хвастунов.
[html]<div id="zb"><div class="zt"><span class="ztag">ZF//BREACH</span><span class="zttl" data-t="ПРОТОКОЛ ВЗЛОМА">ПРОТОКОЛ ВЗЛОМА</span><span class="znode">УЗЕЛ 31.10 · ЗАРАЖЁН</span></div><div class="ztm"><div class="zclk" id="zbc">00:45</div><div class="zbar"><em id="zbb"></em></div><div class="zhint">ОКНО ВЗЛОМА</div></div><div class="zbody"><div class="zmw"><div class="zl">МАТРИЦА КОДОВ <span id="zbax">// СТРОКА 01</span></div><div class="zm" id="zbm"></div></div><div class="zside"><div class="zl">БУФЕР <span id="zbn">0/6</span></div><div class="zbf" id="zbf"></div><div class="zl">ДЕМОНЫ ДЛЯ ЗАГРУЗКИ</div><div id="zbd"></div></div></div><div class="zft"><span id="zbs">Первый код — из подсвеченной строки.</span><button type="button" class="zbtn" id="zbx">ПЕРЕЗАПУСК</button></div><div class="zov" id="zbo"><div class="zst" id="zbo1"></div><div class="zsub" id="zbo2"></div><button type="button" class="zbtn" id="zby">НОВЫЙ СЕАНС</button></div></div>
<style>
html,body{margin:0;background:transparent!important}
#zb{--pk:#FF7518;--em:#D94B12;--gd:#FFB347;--bn:#E8DDCF;--as:#958A80;--tx:#B7E83A;--rd:#ff3b30;position:relative;max-width:720px;margin:0 auto;padding:18px 18px 16px;box-sizing:border-box;font-family:Consolas,'Courier New',monospace;color:var(--bn);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,117,24,.12),transparent 70%),linear-gradient(180deg,#110803,#080402);border:1px solid rgba(255,117,24,.35);box-shadow:inset 0 0 40px rgba(0,0,0,.82),0 0 34px -12px rgba(255,117,24,.7);overflow:hidden}
#zb *{box-sizing:border-box}
#zb::before{content:"";position:absolute;inset:6px;border:1px solid transparent;pointer-events:none;background:linear-gradient(var(--pk),var(--pk)) top left/18px 1px no-repeat,linear-gradient(var(--pk),var(--pk)) top left/1px 18px no-repeat,linear-gradient(var(--pk),var(--pk)) top right/18px 1px no-repeat,linear-gradient(var(--pk),var(--pk)) top right/1px 18px no-repeat,linear-gradient(var(--pk),var(--pk)) bottom left/18px 1px no-repeat,linear-gradient(var(--pk),var(--pk)) bottom left/1px 18px no-repeat,linear-gradient(var(--pk),var(--pk)) bottom right/18px 1px no-repeat,linear-gradient(var(--pk),var(--pk)) bottom right/1px 18px no-repeat}
#zb::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#zb .zt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid rgba(255,117,24,.22)}
#zb .ztag{font-size:10px;letter-spacing:.2em;color:#160904;background:var(--pk);padding:3px 7px;font-weight:700}
#zb .zttl{position:relative;font-size:18px;font-weight:700;letter-spacing:.28em;color:var(--gd);text-shadow:0 0 12px rgba(255,117,24,.55)}
#zb .zttl::before,#zb .zttl::after{content:attr(data-t);position:absolute;left:0;top:0;opacity:0}
#zb .zttl::before{color:var(--tx);animation:zgl 6s infinite steps(1)}
#zb .zttl::after{color:var(--rd);animation:zgl 6s infinite steps(1) .08s}
@keyframes zgl{0%,93%,100%{opacity:0;transform:none}94%{opacity:.8;transform:translate(-2px,1px);clip-path:inset(10% 0 55% 0)}96%{opacity:.8;transform:translate(2px,-1px);clip-path:inset(60% 0 8% 0)}}
#zb .znode{margin-left:auto;font-size:10px;letter-spacing:.18em;color:var(--as)}
#zb .ztm{display:flex;align-items:center;gap:12px;margin:12px 0 14px}
#zb .zclk{font-size:26px;font-weight:700;letter-spacing:.08em;color:var(--gd);min-width:92px;text-shadow:0 0 14px rgba(255,179,71,.45)}
#zb .zclk.hot{color:var(--rd);text-shadow:0 0 14px rgba(255,59,48,.6)}
#zb .zbar{flex:1;height:6px;background:rgba(255,117,24,.1);border:1px solid rgba(255,117,24,.25)}
#zb .zbar em{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--em),var(--gd));box-shadow:0 0 10px rgba(255,117,24,.6);transition:width 1s linear}
#zb .zhint{font-size:9px;letter-spacing:.2em;color:var(--as)}
#zb .zbody{display:flex;gap:20px;flex-wrap:wrap}
#zb .zl{font-size:10px;letter-spacing:.22em;color:var(--as);margin:0 0 8px}
#zb .zl span{color:var(--pk)}
#zb .zm{display:grid;grid-template-columns:repeat(5,52px);grid-auto-rows:44px;gap:3px;padding:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,117,24,.25)}
#zb .zc{border:0;background:transparent;color:rgba(232,221,207,.4);font:700 16px Consolas,monospace;letter-spacing:.06em;cursor:default;position:relative;transition:color .15s,background .15s}
#zb .zc.ln{background:rgba(255,117,24,.11);color:var(--bn);cursor:pointer}
#zb .zc.ln:hover{background:var(--pk);color:#160904;box-shadow:0 0 16px rgba(255,117,24,.7)}
#zb .zc.pv{background:rgba(183,232,58,.07);color:rgba(232,221,207,.7)}
#zb .zc.used{color:rgba(232,221,207,.12)}
#zb .zc.used::after{content:"··";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;color:rgba(255,117,24,.45)}
#zb .zc.used{font-size:0}
#zb .zside{flex:1;min-width:240px}
#zb .zbf{display:flex;gap:5px;margin-bottom:18px;flex-wrap:wrap}
#zb .zbf span{width:36px;height:32px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,117,24,.45);font-size:13px;font-weight:700;color:var(--gd)}
#zb .zbf span.f{border-style:solid;background:rgba(255,117,24,.12);box-shadow:inset 0 0 8px rgba(255,117,24,.25)}
#zb .zd{padding:8px 10px;margin-bottom:7px;border:1px solid rgba(255,117,24,.2);border-left:3px solid rgba(255,117,24,.5);background:rgba(0,0,0,.3)}
#zb .zd small{display:block;font-size:9px;letter-spacing:.22em;color:var(--as);margin-bottom:5px}
#zb .zd b{display:inline-block;min-width:30px;padding:2px 5px;margin-right:4px;font-size:13px;text-align:center;border:1px solid rgba(232,221,207,.2);color:var(--bn);font-weight:700}
#zb .zd b.m{border-color:var(--pk);color:var(--pk);background:rgba(255,117,24,.12)}
#zb .zd.ok{border-color:rgba(183,232,58,.5);border-left-color:var(--tx)}
#zb .zd.ok small,#zb .zd.ok b{color:var(--tx);border-color:rgba(183,232,58,.5)}
#zb .zd.no{opacity:.35}
#zb .zd.no b{text-decoration:line-through}
#zb .zft{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,117,24,.2)}
#zb .zft span{font-size:12px;letter-spacing:.06em;color:var(--gd)}
#zb .zbtn{background:transparent;border:1px solid var(--pk);color:var(--pk);font:700 11px Consolas,monospace;letter-spacing:.22em;padding:7px 14px;cursor:pointer}
#zb .zbtn:hover{background:var(--pk);color:#160904;box-shadow:0 0 14px rgba(255,117,24,.6)}
#zb .zov{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(9,4,2,.9);text-align:center}
#zb .zov.on{display:flex}
#zb .zst{font-size:28px;font-weight:700;letter-spacing:.3em;padding:10px 18px;border:2px solid currentColor;transform:rotate(-4deg)}
#zb .zst.win{color:var(--tx);text-shadow:0 0 18px rgba(183,232,58,.6)}
#zb .zst.lose{color:var(--rd);text-shadow:0 0 18px rgba(255,59,48,.6)}
#zb .zst.part{color:var(--gd)}
#zb .zsub{font-size:12px;letter-spacing:.14em;color:var(--bn);max-width:80%}
@media (max-width:560px){#zb .zm{grid-template-columns:repeat(5,44px);grid-auto-rows:40px}#zb .zttl{font-size:15px}#zb .znode{margin-left:0}}
@media (prefers-reduced-motion:reduce){#zb .zttl::before,#zb .zttl::after{animation:none}}
</style>
<script>
(function(){
var C=['1C','55','BD','E9','7A','FF'],N=5,L=6,T=45;
var M,D,buf,ax,ln,used,left,tm,go,fin;
function $(id){return document.getElementById(id)}
function rnd(n){return Math.floor(Math.random()*n)}
function has(q){for(var st=0;st+q.length<=buf.length;st++){var ok=true;for(var k=0;k<q.length;k++){if(buf[st+k]!==q[k]){ok=false;break}}if(ok)return true}return false}
function prog(q){if(has(q))return q.length;for(var k=Math.min(q.length-1,buf.length);k>0;k--){var ok=true;for(var j=0;j<k;j++){if(buf[buf.length-k+j]!==q[j]){ok=false;break}}if(ok)return k}return 0}
function dead(q){return !has(q)&&(L-buf.length)<(q.length-prog(q))}
function mmss(v){return '00:'+(v<10?'0':'')+v}
function gen(){
M=[];for(var y=0;y<N;y++){M.push([]);for(var x=0;x<N;x++)M[y].push(C[rnd(C.length)])}
var r=0,c=0,a='row',pth=[],seen={};
for(var k=0;k<L;k++){var op=[];for(var j=0;j<N;j++){var yy=a==='row'?r:j,xx=a==='row'?j:c;if(!seen[yy+'_'+xx])op.push([yy,xx])}
var pk=op[rnd(op.length)];seen[pk[0]+'_'+pk[1]]=1;pth.push(M[pk[0]][pk[1]]);if(a==='row'){c=pk[1];a='col'}else{r=pk[0];a='row'}}
D=[{n:'ДЕМОН СВЕТА // ГАСИТ КАМЕРЫ',q:pth.slice(0,2)},{n:'ДЕМОН ЗАМКА // ОТКРЫВАЕТ ДВЕРИ',q:pth.slice(1,4)},{n:'ДЕМОН ТЫКВЫ // ДАР ДЛЯ ЗЕРО',q:pth.slice(2,6)}];
buf=[];ax='row';ln=0;used={};left=T;go=false;fin=false;clearInterval(tm);
$('zbb').style.width='100%';$('zbc').textContent=mmss(T);$('zbc').className='zclk';$('zbo').className='zov';
$('zbs').textContent='Первый код — из подсвеченной строки.';draw(-1,-1);
}
function active(y,x){return !fin&&!used[y+'_'+x]&&(ax==='row'?y===ln:x===ln)}
function draw(hy,hx){
var m=$('zbm');m.innerHTML='';
for(var y=0;y<N;y++)for(var x=0;x<N;x++){(function(y,x){var e=document.createElement('button');e.type='button';var cls='zc';if(used[y+'_'+x])cls+=' used';else if(active(y,x))cls+=' ln';else if(hx>=0&&(ax==='row'?x===hx:y===hy))cls+=' pv';e.className=cls;e.textContent=M[y][x];e.setAttribute('data-y',y);e.setAttribute('data-x',x);e.onclick=function(){pick(y,x)};e.onmouseenter=function(){if(active(y,x))hov(y,x)};e.onmouseleave=function(){hov(-1,-1)};m.appendChild(e)})(y,x)}
$('zbax').textContent=fin?'// СЕАНС ЗАКРЫТ': (ax==='row'?'// СТРОКА 0'+(ln+1):'// СТОЛБЕЦ 0'+(ln+1));
var f=$('zbf');f.innerHTML='';for(var k=0;k<L;k++){var sp=document.createElement('span');if(buf[k]){sp.textContent=buf[k];sp.className='f'}f.appendChild(sp)}
$('zbn').textContent=buf.length+'/'+L;
var d=$('zbd');d.innerHTML='';D.forEach(function(o){var ok=has(o.q),pr=prog(o.q),no=fin?!ok:dead(o.q);var e=document.createElement('div');e.className='zd'+(ok?' ok':'')+(no?' no':'');var h='<small>'+o.n+(ok?' · ЗАГРУЖЕН': (no?' · ПОТЕРЯН':''))+'</small>';o.q.forEach(function(cd,j){h+='<b'+(!ok&&j<pr?' class="m"':'')+'>'+cd+'</b>'});e.innerHTML=h;d.appendChild(e)});
}
function hov(hy,hx){var bs=$('zbm').children;for(var n=0;n<bs.length;n++){var el=bs[n],y=+el.getAttribute('data-y'),x=+el.getAttribute('data-x');var on=hx>=0&&!used[y+'_'+x]&&!active(y,x)&&(ax==='row'?x===hx:y===hy);if(on)el.classList.add('pv');else el.classList.remove('pv')}}
function tick(){left--;$('zbb').style.width=(left/T*100)+'%';$('zbc').textContent=mmss(left);if(left<=10)$('zbc').className='zclk hot';if(left<=0)end('ВРЕМЯ ВЫШЛО')}
function pick(y,x){
if(!active(y,x))return;
if(!go){go=true;tm=setInterval(tick,1000)}
used[y+'_'+x]=1;buf.push(M[y][x]);
if(ax==='row'){ax='col';ln=x}else{ax='row';ln=y}
var all=D.every(function(o){return has(o.q)});
var free=false;for(var j=0;j<N;j++){if(ax==='row'?!used[ln+'_'+j]:!used[j+'_'+ln])free=true}
if(all)end(null);else if(buf.length>=L||!free)end(null);else{$('zbs').textContent=(ax==='row'?'Следующий код — в строке.':'Следующий код — в столбце.');draw(-1,-1)}
}
function end(why){fin=true;clearInterval(tm);var n=D.filter(function(o){return has(o.q)}).length;draw(-1,-1);
var st=$('zbo1'),sb=$('zbo2');
if(n===D.length){st.className='zst win';st.textContent='ДОСТУП ПОЛУЧЕН';sb.textContent='Все демоны загружены. Узел открыт. Зеро довольна.'}
else if(n>0){st.className='zst part';st.textContent='ЧАСТИЧНЫЙ ДОСТУП';sb.textContent=(why?why+'. ':'')+'Загружено демонов: '+n+' из '+D.length+'. Система заметила вторжение.'}
else{st.className='zst lose';st.textContent='ВЗЛОМ ПРОВАЛЕН';sb.textContent=(why?why+'. ':'')+'Ни один демон не загружен. Лёд сомкнулся.'}
$('zbs').textContent='Сеанс закрыт.';setTimeout(function(){$('zbo').className='zov on'},350);
}
$('zbx').onclick=gen;$('zby').onclick=gen;gen();
})();
</script>[/html]