Site Builder
Editing:
index.php
writable 0666
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Hash Spectrum — Mini</title> <style> :root{ --bg:#0b0c10; --ink:#e7e9ee; --panel:#131722; --line:#202738; --muted:#aeb6c2; } *{box-sizing:border-box} body{margin:0; font:15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--ink)} .wrap{max-width:920px; margin:24px auto; padding:0 16px} h1{font-size:22px; margin:0 0 12px} .card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.25)} .row{display:grid; grid-template-columns:1.2fr .8fr; gap:12px} @media (max-width: 800px){ .row{grid-template-columns:1fr} } textarea,input,select{ width:100%; background:#0d1117; color:var(--ink); border:1px solid #222a3f; border-radius:10px; padding:10px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace } .btn{ appearance:none; border:1px solid #2a3350; background:#0e1421; color:var(--ink); border-radius:10px; padding:9px 12px; cursor:pointer; font-weight:600 } .btn:hover{ border-color:#3b4a79 } .inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center} .note{color:var(--muted); font-size:12px} .band{ display:flex; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; height:54px; } .seg{ flex:0 0 var(--w,18px); height:100% } #grad{ height:48px; border:1px dashed #2a3350; border-radius:10px; margin-top:8px } .mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace} </style> </head> <body> <div class="wrap"> <h1>Hash Spectrum — Mini</h1> <div class="card row"> <div> <label class="note">Input <span class="mono" id="modeLabel">(Hex)</span></label> <textarea id="inp" rows="5" spellcheck="false"></textarea> <div class="inline" style="margin-top:8px"> <button class="btn" id="btnGenesis">Use Bitcoin Genesis Hash</button> <button class="btn" id="btnRandom">Random 64‑hex</button> <select id="mode" style="max-width:200px"> <option value="hex" selected>Interpret as Hex</option> <option value="ascii">Interpret as Text (ASCII)</option> </select> <input id="segw" type="range" min="8" max="36" value="18" title="Segment width" /> <span class="note">segment width</span> <button class="btn" id="btnRender">Render</button> </div> <div class="note" style="margin-top:6px">Tip: Hex mode is a lossless 1:1 map (#RRGGBB per 6 hex). Not encryption—anyone can reverse it.</div> </div> <div> <label class="note">Gradient (CSS)</label> <div id="grad"></div> <div class="inline" style="margin-top:8px"> <button class="btn" id="btnCopyCss">Copy CSS</button> <button class="btn" id="btnDecodeHex">Decode → Hex (from band)</button> </div> <div class="note" style="margin-top:6px">First 10: <span class="mono" id="first10">—</span> | Last 10: <span class="mono" id="last10">—</span></div> </div> </div> <div class="card" style="margin-top:12px"> <div id="band" class="band"></div> </div> <div style="margin-top:14px" class="note"> Addresses: Bitcoin addresses are Base58 or Bech32 strings. You can still visualize them by switching to <b>Text</b> mode (ASCII), or we can add address decoding later. For now this tool keeps things simple and fast. </div> </div> <script> const genesis = "000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f"; const els = { inp: document.getElementById('inp'), mode: document.getElementById('mode'), modeLabel: document.getElementById('modeLabel'), band: document.getElementById('band'), grad: document.getElementById('grad'), segw: document.getElementById('segw'), first10: document.getElementById('first10'), last10: document.getElementById('last10'), btnGenesis: document.getElementById('btnGenesis'), btnRandom: document.getElementById('btnRandom'), btnRender: document.getElementById('btnRender'), btnCopyCss: document.getElementById('btnCopyCss'), btnDecodeHex: document.getElementById('btnDecodeHex') }; function sanitizeHex(s){ return (s||'').toLowerCase().replace(/[^0-9a-f]/g,''); } function toHexBytesFromAscii(s){ const bytes = []; for(let i=0;i<s.length;i++) bytes.push(s.charCodeAt(i)); return bytes.map(b=>b.toString(16).padStart(2,'0')).join(''); } function ensureMultipleOf(hex, m){ const rem = hex.length % m; return rem? hex + '0'.repeat(m-rem) : hex; } function chunk6(hex){ const out=[]; for(let i=0;i<hex.length;i+=6){ out.push(hex.slice(i,i+6)); } return out; } function hex6ToRgbStr(h){ return `#${h}`; } function render(){ let mode = els.mode.value; els.modeLabel.textContent = mode==='hex'? '(Hex)': '(Text)'; let raw = els.inp.value; let hex = mode==='hex'? sanitizeHex(raw) : toHexBytesFromAscii(raw); // pad to groups of 6 hex = ensureMultipleOf(hex, 6); // highlights els.first10.textContent = (mode==='hex'? hex : raw).slice(0,10) || '—'; els.last10.textContent = (mode==='hex'? hex : raw).slice(-10) || '—'; const chunks = chunk6(hex); els.band.style.setProperty('--w', els.segw.value+'px'); els.band.innerHTML = ''; const colors = []; for(let i=0;i<chunks.length;i++){ const c = chunks[i]; const div = document.createElement('div'); div.className='seg'; const color = hex6ToRgbStr(c); div.style.background = color; div.title = `#${i.toString().padStart(2,'0')} • ${c} → ${color}`; els.band.appendChild(div); colors.push(color); } els.grad.style.background = colors.length? `linear-gradient(to right, ${colors.join(', ')})` : 'none'; } function copyCss(){ const g = els.grad.style.background || ''; navigator.clipboard?.writeText(g); } function decodeFromBandToHex(){ // Only meaningful for current visual; returns concatenated rrggbb const segs = els.band.querySelectorAll('.seg'); if(!segs.length) return alert('Nothing to decode'); let out=''; segs.forEach(seg=>{ const bg = seg.style.background.trim(); const m = bg.match(/#([0-9a-fA-F]{6})/); if(m) out += m[1].toLowerCase(); }); alert(out || '—'); } function randomHex(n){ const bytes = new Uint8Array(n/2); crypto.getRandomValues(bytes); return Array.from(bytes, b=>b.toString(16).padStart(2,'0')).join(''); } // events els.btnGenesis.onclick = ()=>{ els.inp.value = genesis; els.mode.value='hex'; render(); }; els.btnRandom.onclick = ()=>{ els.inp.value = randomHex(64); els.mode.value='hex'; render(); }; els.btnRender.onclick = render; els.mode.onchange = render; els.segw.oninput = render; els.btnCopyCss.onclick = copyCss; els.btnDecodeHex.onclick = decodeFromBandToHex; // boot els.inp.value = genesis; render(); </script> </body> </html>
Save changes
Create folder
writable 0777
Create
Cancel