<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <title>8IE TIME</title> <style> :root{ --accent:#00C805; --accent-dim:#00c80533; --accent-glow:#00c80588; --bg:#000000; --panel:#0d1117; --panel2:#161b22; --text:#f5f7fa; --sub:#8b949e; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); box-sizing:border-box; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html,body{height:100%; margin:0; overflow:hidden; background:var(--bg);} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 20%, #111417 0%, #000 70%); min-height:100%; color:var(--text); transition:background .5s ease; } .phone{ position:relative; width:min(94vw,420px); height:min(94vh,86vh); max-height:820px; border-radius:44px; overflow:hidden; background:#000; box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px #1c2128; } .track{ display:flex; width:200%; height:100%; transition:transform .45s cubic-bezier(.22,.9,.3,1); } .screen{ width:50%; height:100%; flex-shrink:0; position:relative; overflow:hidden; } #watchScreen{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 18px; } .stage{ width:100%; max-width:340px; aspect-ratio:660/800; filter:drop-shadow(0 18px 34px rgba(0,0,0,.5)); animation:riseIn .7s cubic-bezier(.2,.9,.25,1); } @keyframes riseIn{ from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} } svg{ width:100%; height:100%; display:block; overflow:visible; } .tagline{ margin-top:16px; text-align:center; color:var(--sub); font-size:11px; letter-spacing:.22em; text-transform:uppercase; } .tagline b{ color:var(--accent); font-weight:600; letter-spacing:.22em; transition:color .4s; } .hint{ position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#4a5058; font-size:10px; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:6px; animation:pulseHint 2.6s ease-in-out infinite; } .hint svg{ width:14px; height:14px; } @keyframes pulseHint{ 0%,100%{opacity:.35;} 50%{opacity:.9;} } #settingsScreen{ background:linear-gradient(180deg,#05070a,#000 60%); padding:0; } .settings-inner{ height:100%; overflow-y:auto; padding:26px 20px 40px; } .settings-header{ display:flex; align-items:center; gap:10px; margin-bottom:22px; } .back-btn{ width:34px; height:34px; border-radius:50%; background:var(--panel2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .2s; } .back-btn:active{ transform:scale(.88); background:var(--accent-dim); } .back-btn svg{ width:16px; height:16px; stroke:var(--text); } .settings-title{ font-size:20px; font-weight:700; letter-spacing:.02em; } .card{ background:var(--panel); border:1px solid #1c2128; border-radius:16px; padding:16px 16px 18px; margin-bottom:14px; animation:fadeUp .5s cubic-bezier(.2,.9,.25,1) both; } .card:nth-of-type(1){animation-delay:.03s;} .card:nth-of-type(2){animation-delay:.08s;} .card:nth-of-type(3){animation-delay:.13s;} .card:nth-of-type(4){animation-delay:.18s;} @keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } .card-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin-bottom:10px; font-weight:600; } input[type="date"], input[type="time"], select{ width:100%; background:var(--panel2); border:1px solid #262c36; color:var(--text); border-radius:10px; padding:11px 12px; font-size:15px; font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s; appearance:none; } input[type="date"]:focus, input[type="time"]:focus, select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); } .row2{ display:flex; gap:10px; } .row2 > div{ flex:1; } .field-sub{ font-size:11px; color:var(--sub); margin-top:6px; } .apply-btn{ width:100%; margin-top:4px; background:var(--accent); color:#000; border:none; border-radius:10px; padding:12px; font-weight:700; font-size:14px; letter-spacing:.03em; cursor:pointer; transition:transform .12s ease, filter .2s, box-shadow .3s; box-shadow:0 6px 18px var(--accent-glow); } .apply-btn:active{ transform:scale(.97); filter:brightness(.92); } .swatches{ display:flex; gap:12px; flex-wrap:wrap; } .swatch{ width:40px; height:40px; border-radius:50%; cursor:pointer; position:relative; transition:transform .18s cubic-bezier(.34,1.6,.64,1); border:2px solid rgba(255,255,255,.08); } .swatch:active{ transform:scale(.9); } .swatch.active{ transform:scale(1.08); box-shadow:0 0 0 3px var(--bg), 0 0 0 5px currentColor; } .swatch.active::after{ content:''; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%; background:#000; opacity:.35; } .live-preview{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid #1c2128; } .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent-glow); animation:blink 1.6s ease-in-out infinite; } @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.3;} } .live-preview span{ font-size:12px; color:var(--sub); } .live-preview b{ color:var(--text); } .toast{ position:absolute; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0; background:var(--panel2); border:1px solid var(--accent); color:var(--text); padding:10px 18px; border-radius:30px; font-size:12.5px; font-weight:600; white-space:nowrap; transition:transform .35s cubic-bezier(.22,.9,.3,1), opacity .35s ease; pointer-events:none; z-index:5; } .toast.show{ transform:translate(-50%,0); opacity:1; } ::-webkit-scrollbar{ width:0; } </style> </head> <body> <div class="phone"> <div class="track" id="track"> <div class="screen" id="watchScreen"> <div class="stage"> <svg viewBox="0 0 660 800" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="caseGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#2c2c30"/><stop offset="18%" stop-color="#0a0a0c"/> <stop offset="50%" stop-color="#161619"/><stop offset="82%" stop-color="#050506"/> <stop offset="100%" stop-color="#2a2a2e"/> </linearGradient> <radialGradient id="dialGrad" cx="38%" cy="30%" r="80%"> <stop offset="0%" stop-color="#1a1c1f"/><stop offset="45%" stop-color="#101113"/> <stop offset="80%" stop-color="#0a0b0c"/><stop offset="100%" stop-color="#050506"/> </radialGradient> <linearGradient id="steelGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ffffff"/><stop offset="35%" stop-color="#d7dde3"/> <stop offset="55%" stop-color="#8b95a1"/><stop offset="75%" stop-color="#f2f5f8"/> <stop offset="100%" stop-color="#a7b0ba"/> </linearGradient> <linearGradient id="steelGradV" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#ffffff"/><stop offset="40%" stop-color="#ced5db"/> <stop offset="60%" stop-color="#828c98"/><stop offset="100%" stop-color="#eef1f4"/> </linearGradient> <pattern id="clous" width="18" height="18" patternUnits="userSpaceOnUse"> <rect x="2" y="2" width="14" height="14" fill="#16181a" opacity="0.6"/> <rect x="2" y="2" width="14" height="7" fill="#232629" opacity="0.5"/> <rect x="2" y="9" width="14" height="7" fill="#0a0b0c" opacity="0.55"/> </pattern> <radialGradient id="vignette" cx="50%" cy="45%" r="65%"> <stop offset="60%" stop-color="#000" stop-opacity="0"/><stop offset="100%" stop-color="#000" stop-opacity="0.6"/> </radialGradient> <clipPath id="dialClip"><rect x="60" y="34" width="540" height="732" rx="150" ry="150"/></clipPath> <filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%"> <feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.45"/> </filter> </defs> <rect x="4" y="4" width="652" height="792" rx="164" ry="164" fill="url(#caseGrad)"/> <rect x="20" y="20" width="620" height="760" rx="150" ry="150" fill="none" stroke="#4a4a50" stroke-width="2" opacity="0.5"/> <g clip-path="url(#dialClip)"> <rect x="60" y="34" width="540" height="732" fill="url(#dialGrad)"/> <rect x="60" y="34" width="540" height="732" fill="url(#clous)"/> <rect x="60" y="34" width="540" height="732" fill="url(#vignette)"/> <rect x="60" y="34" width="540" height="732" rx="150" ry="150" fill="none" id="dialRing" stroke="#00C805" stroke-width="3" opacity="0.4"/> </g> <g id="hourMarkers"></g> <g id="minuteTicks"></g> <g transform="translate(462,398)"> <rect x="-42" y="-30" width="84" height="60" rx="4" fill="#08090a" stroke="#1c1f22" stroke-width="2"/> <rect x="-38" y="-26" width="76" height="52" rx="2" fill="#111315"/> <rect x="-38" y="18" width="76" height="8" id="dateStripe" fill="#00C805" opacity="0.85"/> <text id="dateText" x="0" y="10" text-anchor="middle" font-family="Arial, sans-serif" font-size="34" font-weight="600" fill="#eef3f8">15</text> </g> <g text-anchor="middle" fill="#e9eef4"> <text x="330" y="200" font-family="Georgia, 'Times New Roman', serif" font-size="46" font-weight="700" letter-spacing="2" fill="#f2f5f9" filter="url(#softShadow)">8IE</text> <g filter="url(#softShadow)"> <text x="330" y="260" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="600" letter-spacing="2.5" fill="#f4f7fb">8IE TIME</text> <rect x="207" y="268" width="246" height="2" id="ruleBottom" fill="#00C805" opacity="0.75"/> <rect x="207" y="234" width="246" height="2" id="ruleTop" fill="#00C805" opacity="0.75"/> </g> <text x="330" y="712" font-family="Arial, sans-serif" font-size="12.5" letter-spacing="3" fill="#dbe4ee" opacity="0.85">TIME ON CHAIN</text> </g> <g id="handsGroup" transform="translate(330,398)"> <g id="hourHand" filter="url(#softShadow)"><path d="M -6,10 L -4,-140 L 0,-158 L 4,-140 L 6,10 Z" fill="url(#steelGrad)" stroke="#5b6672" stroke-width="0.6"/></g> <g id="minuteHand" filter="url(#softShadow)"><path d="M -5,14 L -3.4,-210 L 0,-228 L 3.4,-210 L 5,14 Z" fill="url(#steelGrad)" stroke="#5b6672" stroke-width="0.6"/></g> <g id="secondHand"> <line x1="0" y1="46" x2="0" y2="-238" id="secLine" stroke="#00C805" stroke-width="2"/> <circle cx="0" cy="-198" r="7" fill="none" id="secDot" stroke="#00C805" stroke-width="2"/> <circle cx="0" cy="46" r="4" id="secTail" fill="#00C805"/> </g> <circle cx="0" cy="0" r="9" fill="url(#steelGrad)" stroke="#3a4149" stroke-width="1"/> <circle cx="0" cy="0" r="3" fill="#2a2f35"/> </g> </svg> </div> <div class="tagline">8IE TIME &nbsp;&bull;&nbsp; <b>TIME ON CHAIN</b></div> <div class="hint"> <svg viewBox="0 0 24 24" fill="none" stroke="#4a5058" stroke-width="2" stroke-linecap="round"><path d="M15 5l7 7-7 7M22 12H2"/></svg> Swipe for settings </div> </div> <div class="screen" id="settingsScreen"> <div class="settings-inner"> <div class="settings-header"> <div class="back-btn" id="backBtn"> <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6 6 6"/></svg> </div> <div class="settings-title">Settings</div> </div> <div class="card"> <div class="card-label">Theme Color</div> <div class="swatches" id="swatches"></div> </div> <div class="card"> <div class="card-label">Region &amp; Time Zone</div> <select id="regionSelect"></select> <div class="field-sub">Watch hands follow this region's local time.</div> </div> <div class="card"> <div class="card-label">Set Date &amp; Time</div> <div class="row2"> <div><input type="date" id="dateInput"></div> <div><input type="time" id="timeInput" step="1"></div> </div> <button class="apply-btn" id="applyBtn">Apply to Watch</button> <div class="live-preview"><div class="dot"></div><span>Live &mdash; <b id="livePreview">--:--:--</b></span></div> </div> <button class="apply-btn" id="resetBtn" style="background:var(--panel2); color:var(--text); box-shadow:none; border:1px solid #262c36;">Reset to Real Time</button> </div> <div class="toast" id="toast"></div> </div> </div> </div> <script> (function(){ const NS="http://www.w3.org/2000/svg"; const cx=330, cy=398, outerR=262, innerR=218, tickOuterR=268, tickInnerR=256; const hourMarkersG=document.getElementById("hourMarkers"); const minuteTicksG=document.getElementById("minuteTicks"); for(let i=0;i<12;i++){ const angle=(i*30)*Math.PI/180; if(i===0){ [-9,9].forEach(off=>{ const line=document.createElementNS(NS,"line"); line.setAttribute("x1",cx+off); line.setAttribute("y1",cy-outerR); line.setAttribute("x2",cx+off); line.setAttribute("y2",cy-innerR); line.setAttribute("stroke","url(#steelGradV)"); line.setAttribute("stroke-width","10"); line.setAttribute("stroke-linecap","round"); line.setAttribute("filter","url(#softShadow)"); hourMarkersG.appendChild(line); }); } else { const x1=cx+innerR*Math.sin(angle), y1=cy-innerR*Math.cos(angle); const x2=cx+outerR*Math.sin(angle), y2=cy-outerR*Math.cos(angle); const line=document.createElementNS(NS,"line"); line.setAttribute("x1",x1); line.setAttribute("y1",y1); line.setAttribute("x2",x2); line.setAttribute("y2",y2); line.setAttribute("stroke","url(#steelGrad)"); line.setAttribute("stroke-width", i===3? "10":"13"); line.setAttribute("stroke-linecap","round"); line.setAttribute("filter","url(#softShadow)"); hourMarkersG.appendChild(line); } } for(let i=0;i<60;i++){ if(i%5===0) continue; const angle=(i*6)*Math.PI/180; const x1=cx+tickInnerR*Math.sin(angle), y1=cy-tickInnerR*Math.cos(angle); const x2=cx+tickOuterR*Math.sin(angle), y2=cy-tickOuterR*Math.cos(angle); const line=document.createElementNS(NS,"line"); line.setAttribute("x1",x1); line.setAttribute("y1",y1); line.setAttribute("x2",x2); line.setAttribute("y2",y2); line.setAttribute("stroke","#5a6068"); line.setAttribute("stroke-width","2"); line.setAttribute("opacity","0.55"); minuteTicksG.appendChild(line); } const THEMES = [ {id:"green", name:"Robinhood Green", hex:"#00C805"}, {id:"gold", name:"Gold Wealth", hex:"#FFD700"}, {id:"red", name:"Robinhood Red", hex:"#FF5000"}, {id:"blue", name:"Cash Blue", hex:"#3B82F6"}, {id:"white", name:"Platinum", hex:"#EDEDED"}, ]; const strokeEls = ["dialRing","secLine","secDot"]; const fillEls = ["dateStripe","ruleBottom","ruleTop","secTail"]; const swatchesEl = document.getElementById("swatches"); THEMES.forEach(t=>{ const s=document.createElement("div"); s.className="swatch"; s.style.background=t.hex; s.style.color=t.hex; s.dataset.id=t.id; s.title=t.name; s.addEventListener("click",()=>setTheme(t.id, true)); swatchesEl.appendChild(s); }); function setTheme(id, showToast){ const t = THEMES.find(x=>x.id===id) || THEMES[0]; document.documentElement.style.setProperty("--accent", t.hex); document.documentElement.style.setProperty("--accent-dim", t.hex+"33"); document.documentElement.style.setProperty("--accent-glow", t.hex+"88"); strokeEls.forEach(id2=>{ const el=document.getElementById(id2); if(el) el.setAttribute("stroke", t.hex); }); fillEls.forEach(id2=>{ const el=document.getElementById(id2); if(el) el.setAttribute("fill", t.hex); }); document.querySelectorAll(".swatch").forEach(s=>s.classList.toggle("active", s.dataset.id===t.id)); localStorage.setItem("8ie_theme", t.id); if(showToast) fireToast("Theme set to " + t.name); } const REGIONS = [ ["auto","Device Local Time"], ["America/New_York","New York (ET)"], ["America/Los_Angeles","Los Angeles (PT)"], ["America/Chicago","Chicago (CT)"], ["Europe/London","London (GMT)"], ["Europe/Paris","Paris (CET)"], ["Europe/Zurich","Zurich (CET)"], ["Asia/Dubai","Dubai (GST)"], ["Asia/Tokyo","Tokyo (JST)"], ["Asia/Hong_Kong","Hong Kong (HKT)"], ["Asia/Singapore","Singapore (SGT)"], ["Australia/Sydney","Sydney (AEST)"], ]; const regionSelect = document.getElementById("regionSelect"); REGIONS.forEach(([val,label])=>{ const o=document.createElement("option"); o.value=val; o.textContent=label; regionSelect.appendChild(o); }); regionSelect.addEventListener("change", ()=>{ localStorage.setItem("8ie_region", regionSelect.value); fireToast("Region set to " + regionSelect.options[regionSelect.selectedIndex].text); }); let timeOffsetMs = parseFloat(localStorage.getItem("8ie_offset")||"0") || 0; document.getElementById("applyBtn").addEventListener("click", ()=>{ const d = document.getElementById("dateInput").value; const t = document.getElementById("timeInput").value; if(!d || !t){ fireToast("Pick a date and time first"); return; } const chosen = new Date(d + "T" + (t.length===5? t+":00": t)); timeOffsetMs = chosen.getTime() - Date.now(); localStorage.setItem("8ie_offset", String(timeOffsetMs)); fireToast("Watch time updated"); }); document.getElementById("resetBtn").addEventListener("click", ()=>{ timeOffsetMs = 0; localStorage.removeItem("8ie_offset"); fireToast("Reset to real time"); }); let toastTimer; function fireToast(msg){ const el = document.getElementById("toast"); el.textContent = msg; el.classList.add("show"); clearTimeout(toastTimer); toastTimer = setTimeout(()=>el.classList.remove("show"), 1800); } setTheme(localStorage.getItem("8ie_theme") || "green", false); regionSelect.value = localStorage.getItem("8ie_region") || "auto"; const track = document.getElementById("track"); const phone = document.querySelector(".phone"); let startX=0, dragging=false, currentOffset=0, atSettings=false; function goTo(settings){ atSettings = settings; track.style.transform = "translateX(" + (settings? "-50%":"0%") + ")"; } document.getElementById("backBtn").addEventListener("click", ()=>goTo(false)); function onStart(x){ startX=x; dragging=true; track.style.transition="none"; } function onMove(x){ if(!dragging) return; let delta = x - startX; const base = atSettings? -phone.offsetWidth : 0; let px = base + delta; px = Math.max(-phone.offsetWidth, Math.min(0, px)); track.style.transform = "translateX(" + px + "px)"; currentOffset = delta; } function onEnd(){ if(!dragging) return; dragging=false; track.style.transition="transform .45s cubic-bezier(.22,.9,.3,1)"; if(!atSettings && currentOffset < -60) goTo(true); else if(atSettings && currentOffset > 60) goTo(false); else goTo(atSettings); currentOffset=0; } phone.addEventListener("touchstart", e=>onStart(e.touches[0].clientX), {passive:true}); phone.addEventListener("touchmove", e=>onMove(e.touches[0].clientX), {passive:true}); phone.addEventListener("touchend", onEnd); phone.addEventListener("mousedown", e=>onStart(e.clientX)); window.addEventListener("mousemove", e=>{ if(dragging) onMove(e.clientX); }); window.addEventListener("mouseup", onEnd); goTo(false); const hourHand=document.getElementById("hourHand"); const minuteHand=document.getElementById("minuteHand"); const secondHand=document.getElementById("secondHand"); const dateText=document.getElementById("dateText"); const livePreview=document.getElementById("livePreview"); function getEffectiveNow(){ const now = new Date(Date.now() + timeOffsetMs); const tz = regionSelect.value; if(tz === "auto") return now; try{ const parts = new Intl.DateTimeFormat("en-US",{ timeZone: tz, hour12:false, year:"numeric", month:"2-digit", day:"2-digit", hour:"2-digit", minute:"2-digit", second:"2-digit" }).formatToParts(now); const p={}; parts.forEach(x=>p[x.type]=x.value); return new Date(+p.year, +p.month-1, +p.day, +p.hour, +p.minute, +p.second, now.getMilliseconds()); }catch(e){ return now; } } function tick(){ const eff = getEffectiveNow(); const h=eff.getHours()%12, m=eff.getMinutes(), s=eff.getSeconds(), ms=eff.getMilliseconds(); hourHand.setAttribute("transform","rotate(" + ((h+m/60)*30) + ")"); minuteHand.setAttribute("transform","rotate(" + ((m+s/60)*6) + ")"); secondHand.setAttribute("transform","rotate(" + ((s+ms/1000)*6) + ")"); dateText.textContent = String(eff.getDate()).padStart(2,"0"); livePreview.textContent = eff.toLocaleTimeString("en-US",{hour12:false}); requestAnimationFrame(tick); } requestAnimationFrame(tick); })(); </script> </body> </html>
htmlSub-10k

#003196 · 8IE TIME

3197 of 3,226 inscriptions · text/html · 28.49 KB onchain

Not listed
Offers open once there is a relay to hold them
Connect a wallet to buy, offer or transfer.
Creator
0x2bb5…3823
Owner
0x2bb5…3823
Inscribed
Sep 25, 2026, 8:58 PM
Block
72,531,570 · idx 9
Tx
0xbb8c225a…02f95ec1
Size
28.49 KB
Mime
text/html
Collection
8IE TIME Collection
Provenance
Held by creator
Provenance1 event
  1. Inscribed by 0x2bb5…3823
    Created
    Sep 25, 2026, 8:58 PM0xbb8c225a…02f95ec1 ↗