<!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 • <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 & 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 & 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 — <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 themConnect a wallet to buy, offer or transfer.
DetailsView on Explorer ↗
- 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
- Inscribed by 0x2bb5…3823Created
