Inscription 106053376

❮ ❯

id

0414a77245b19d2c0df3d3d4b8faa8fa5fd2a53d0d16a2bea08a20a66fd192c7i0

metadata

name

RootHub
<id>
Hammer21
<id>
DoctypeHtmlHtmlLang
"pl"><meta charset="utf-8">
MetaName
"color-scheme" content="dark light">
Item3
<title>Hammer21 — Root Hub (one-file)</title>
Item5
<style>
Item
===== 5) Helper ====== */
BoxSizing
border-box} html,body{margin:0;height:100%}
BodyBackground
radial-gradient(1200px 600px at 50% -10%,#101b37,#0b1224);color:var(--ink);
FontFamily
system-ui,Segoe UI,Roboto,Arial,sans-serif}
HeaderPosition
sticky;top:0;background:#0d1630;border-bottom:1px solid var(--line);
Display
flex;gap:.8rem;align-items:center;justify-content:space-between;padding:.7rem 1rem}
H1Margin
0;font-size:clamp(18px,2.8vw,22px);letter-spacing:.2px}
NavDisplay
flex;gap:.5rem;flex-wrap:wrap}
BtnAppearance
none;border:1px solid #2a3a62;background:#11204a;color:var(--ink);padding:.5rem .75rem;border-radius:12px;cursor:pointer}
BtnAriaCurrent
"page"]{outline:2px solid var(--a)}
MainMaxWidth
1100px;margin:0 auto;padding:1rem;display:grid;gap:12px}
GridDisplay
grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
CardBackground
linear-gradient(180deg,#0e1b3c,#0c1631);border:1px solid var(--line);border-radius:14px;padding:12px}
ALinkColor
var(--ink);text-decoration:none;border-bottom:1px dashed var(--mut)}
MutColor
var(--mut)}
Item21
/* modal-like viewer for modules */
ViewerDisplay
none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:50}
ViewerOnDisplay
grid;grid-template-rows:auto 1fr}
VbarDisplay
flex;justify-content:space-between;align-items:center;background:#0b1224;border-bottom:1px solid var(--line);padding:.6rem .9rem}
VstageBackground
#071024;display:grid;place-items:center}
CloseBorder
0;background:linear-gradient(90deg,var(--a),var(--b));color:#041224;font-weight:800;padding:.45rem .8rem;border-radius:12px;cursor:pointer}
Item27
/* basic elements used by embedded modules */
CanvasDisplay
block;max-width:100%}
TextareaWidth
100%;min-height:240px;background:#0a142b;color:var(--ink);border:1px solid #2a3a62;border-radius:12px;padding:.6rem;font-family:ui-monospace,Consolas,monospace}
BigFontWeight
900;text-align:center;white-space:pre-wrap;line-height:1.15;font-size:calc(18px + 2.6vw);padding:2vh}
TickerHeight
44px;overflow:hidden;position:relative;background:#0b1020;border-top:1px solid #1f2a44}
TickerDivPosition
absolute;white-space:nowrap;left:0;top:10px;font-weight:800}
Item33
</style>
Item34
<header>
Item35
<h1>📁 Hammer21 — Root Hub</h1>
NavId
"tabs">
ButtonClass
"btn" data-view="tools">Narzędzia</button>
Item42
</nav>
Item43
</header>
MainId
"page">
Item45

SectionDataPage
"tools" hidden>
DivClass
"mut">Wklej JSON i kliknij „TELEBIM”.</div>
H3Style
"margin:.2rem 0">Linki do inskrypcji</h3>
PClass
"mut">Wklej JSON → drzewko + tryb sceniczny (ticker).</p>
Item51
Każdy moduł możesz też uruchomić w wersji wbudowanej (offline) — kliknij „Podgląd”.</p>
Item52
</div>
UlId
"links" class="mut" style="margin:.4rem 0 0 1rem"></ul>
Item57
</div>
Item58
</div>
Item59
</section>
Item60

Item64
<h3>Hammer — 21 tiers (stub)</h3>
PAClass
"link" data-go="tool-telebim">Podgląd</a></p>
Item67
</div>
Item69
<h3>Timeline — Echo (stub)</h3>
Item72
</div>
Item73
</div>
Item74
</section>
Item75

Item78
<h3>Ścieżka życia — Jagiellońska 1988</h3>
Item81
</div>
Item82
</section>
Item83

Item87
<h3>Cache vs Cookies vs HSTS — Diagram</h3>
Item90
</div>
Item91
</div>
Item92
</section>
Item93

Item96
<h3>JSON Viewer — tryb TELEBIM</h3>
Item99
</div>
Item100
</section>
Item101
</main>
Item102

DivId
"big" style="display:none"></div>`;
ButtonId
"close">Zamknij</button>
Item107
</div>
Item110
</div>
Item111
<script>
ConstINSCRIPTIONS
[
Title
"JSON Viewer — TELEBIM", id:"<inscription_id_telebim>", href:""}
Item120
];
Item121
/* Wygeneruj listę linków */
ConstUL
document.getElementById('links');
INSCRIPTIONSForEachIt
>{
ConstLi
document.createElement('li');
ConstUrl
it.href || (it.id && `ord://${it.id}`) || "#";
LiInnerHTML
`<a class="link" href="${url}" target="_blank" rel="noopener">${escapeHtml(it.title)}</a> <span class="mut">— ${escapeHtml(it.id||'—')}</span>`;
Item127
UL.appendChild(li);
Item128
});
ConstTabs
document.getElementById('tabs'); const page=document.getElementById('page');
TabsAddEventListenerClickE
>{
ConstB
e.target.closest('button[data-view]'); if(!b) return;
Item133
for(const el of tabs.querySelectorAll('button')) el.removeAttribute('aria-current');
Item134
b.setAttribute('aria-current','page');
ConstView
b.dataset.view;
ForConstSecOfPageChildrenSecHidden
sec.dataset.page !== view; }
Item137
});
ConstViewer
document.getElementById('viewer'); const vstage=document.getElementById('vstage'); const vtitle=document.getElementById('vtitle');
DocumentGetElementByIdCloseOnclick
()=>viewer.classList.remove('on');
ViewerAddEventListenerClickE
>{ if(e.target===viewer) viewer.classList.remove('on'); });
Item142
/* Linki „Podgląd” */
DocumentAddEventListenerClickE
>{
ConstA
e.target.closest('a.link[data-go]'); if(!a) return;
Item145
e.preventDefault(); openPreview(a.dataset.go);
Item146
});
Item147
function openPreview(key){
VstageInnerHTML
''; vtitle.textContent='Podgląd';
Item149
// wyłącz ticker
Item150
stopTicker();
IfKey
=='app-hammer'){ vtitle.textContent='Hammer — 21 tiers (stub)';
ConstWrap
document.createElement('div'); wrap.style.display='grid'; wrap.style.gap='.6rem'; wrap.style.padding='1rem'; wrap.style.maxWidth='1100px';
WrapInnerHTML
`
H2Style
"margin:.2rem 0">🔒 Cache vs Cookies vs HSTS</h2>
CanvasId
"board" width="900" height="420" role="img" aria-label="Porównanie Cache, Cookies i HSTS"></canvas>`;
Item156
vstage.appendChild(wrap);
ConstC
wrap.querySelector('#board'),x=c.getContext('2d');
ConstBox
(x0,y0,w,h,col,title,items)=>{x.fillStyle=col;x.fillRect(x0,y0,w,h);
XStrokeStyle
'#fff';x.strokeRect(x0,y0,w,h);x.fillStyle='#fff';
XFont
'15px system-ui,Arial';items.forEach((t,i)=>x.fillText(t,x0+12,y0+56+i*22));};
Item162
box(40,70,260,280,'#3a6ea5',"📂 Cache",[
HTMLCSSJSObrazkiMBDanychMaxAge
sekundy–dni","Służy do szybszego ładowania"]);
Item164
box(320,70,260,280,'#d17b0f',"🍪 Cookies",[
Klucz
wartość","Małe porcje danych","max-age: sekundy–godziny","Sesje, loginy, preferencje"]);
Item166
box(600,70,260,280,'#4a9c36',"🔒 HSTS",[
HTTPSOnlyKilkaBajtowMaxAge
np. rok","Wymusza bezpieczne połączenie"]);
Item168
}
ConstSvg
`
SvgViewBox
"0 0 920 540" xmlns="http://www.w3.org/2000/svg" style="max-width:980px;width:94vw;height:auto">
Item172
<defs>
LinearGradientId
"g" x1="0" x2="1"><stop offset="0" stop-color="#60a5fa"/><stop offset="1" stop-color="#22d3ee"/></linearGradient>
Item174
<style><![CDATA[
TFill
#e6f1ff;font:700 20px/1.2 system-ui,Segoe UI,Roboto,Arial}
SFill
#9fb3d1;font:400 16px/1.35 system-ui,Segoe UI,Roboto,Arial}
PFill
#9fb3d1;font:400 14px/1.35 system-ui,Segoe UI,Roboto,Arial}
Item178
]]></style>
Item179
</defs>
PathD
"M80 280 H840" stroke="url(#g)" stroke-width="6" stroke-linecap="round"/>
GTransform
"translate(740,280)">
CircleR
"14" fill="#22d3ee"/>
TextClass
"p" y="36" text-anchor="middle">kolejne kroki do dopisania…</text>
Item187
</g>
Item193
</g>
TextX
"460" y="108" class="s" text-anchor="middle">oś czasu w jednym pliku (przyjazna inskrypcjom)</text>
Item196
</svg>`;
Item198
}
TextareaId
"src" spellcheck="false" placeholder='{"msg":"Hello","score":42}'></textarea>
DivButtonClass
"btn" id="pretty">Formatuj</button> <button class="btn" id="tele">TELEBIM</button></div>
Item206
vstage.appendChild(wrap);
ConstSrc
wrap.querySelector('#src'), big=document.getElementById('big');
WrapQuerySelectorPrettyOnclick
()=>{ try{ const o=JSON.parse(src.value); src.value=JSON.stringify(o,null,2); }catch(e){ alert('Błąd JSON'); } };
WrapQuerySelectorTeleOnclick
()=>{ const t=src.value.trim(); if(!t) return alert('Wklej JSON');
BigStyleDisplay
'block'; big.textContent=t; startTicker(' JSON • TELEBIM • '+new Date().toLocaleString()+' ');
Item211
};
Item212
}
ConstStub
document.createElement('div'); stub.style.color='var(--mut)'; stub.style.padding='1rem';
StubInnerHTML
'<p>Tu można wstawić mini-podgląd gry lub link do pełnej inskrypcji.</p>';
Item216
vstage.appendChild(stub);
Item217
}
Item218
viewer.classList.add('on');
Item219
}
LetRaf
null; function startTicker(text){ const marq=document.getElementById('marq'); const tick=document.getElementById('ticker');
MarqTextContent
' '+text+' '; let x=0; cancelAnimationFrame(_raf); tick.style.display='block';
FunctionStepX
(x-2)%(marq.textContent.length*16); marq.style.transform='translateX('+x+'px)'; _raf=requestAnimationFrame(step) })();
Item224
}
FunctionStopTickerCancelAnimationFrameRafDocumentGetElementByIdTickerStyleDisplay
'none'; }
FunctionEscapeHtmlSReturnStringSReplaceGM
>({ '&':'&','<':'<','>':'>','"':'"',"'":''' })[m]);}
Item228
</script>
Item229
</html>

address