<!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:#00c80522; --accent-glow:#00c80566; --accent-soft:#00c80511;
--bg:#000000; --card:#111315; --card-hi:#17191c; --line:#212429; --text:#f7f8fa; --sub:#8a9099; --sub2:#5b616a;
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:#000;}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
display:flex; align-items:center; justify-content:center;
background:#000; min-height:100%; color:var(--text);
}
.phone{
position:relative; width:min(94vw,420px); height:min(94vh,86vh); max-height:840px;
border-radius:46px; overflow:hidden; background:#000;
box-shadow:0 40px 80px rgba(0,0,0,.7), 0 0 0 1px #1a1d21;
}
.ambient{
position:absolute; inset:-20%; background:radial-gradient(circle at 50% 18%, var(--accent-soft), transparent 55%);
transition:background .5s ease; pointer-events:none; z-index:0;
}
.track{ position:relative; z-index:1; display:flex; width:300%; height:100%; transition:transform .5s cubic-bezier(.22,.9,.3,1); }
.screen{ width:33.3334%; height:100%; flex-shrink:0; position:relative; overflow:hidden; }
/* ---------- TOP NAV ---------- */
.topnav{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; z-index:3; }
.brand-mark{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; letter-spacing:.06em; }
.brand-mark .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.pillnav{ display:flex; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:3px; gap:2px; }
.pillnav button{ border:none; background:transparent; color:var(--sub); font-size:11px; font-weight:700; letter-spacing:.04em; padding:7px 13px; border-radius:16px; cursor:pointer; transition:background .25s, color .25s; }
.pillnav button.active{ background:var(--accent); color:#000; }
/* ---------- WATCH SCREEN ---------- */
#watchScreen{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 22px 30px; }
.stage-wrap{ position:relative; width:100%; max-width:320px; }
.stage{ width:100%; aspect-ratio:660/800; filter:drop-shadow(0 22px 40px rgba(0,0,0,.6)); animation:riseIn .8s cubic-bezier(.2,.9,.25,1); position:relative; z-index:1; }
@keyframes riseIn{ from{opacity:0; transform:translateY(22px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }
svg{ width:100%; height:100%; display:block; overflow:visible; }
.status-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; }
.status-chip{ display:flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); padding:7px 13px; border-radius:20px; }
.status-chip .pulse{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); animation:blink 1.8s ease-in-out infinite; }
.status-chip span{ font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--sub); text-transform:uppercase; }
.status-chip b{ color:var(--accent); transition:color .4s; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.tagline{ margin-top:10px; text-align:center; color:var(--sub2); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.swipe-track{ position:absolute; bottom:16px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:5px; }
.swipe-track .seg{ width:16px; height:3px; border-radius:2px; background:var(--line); transition:background .3s, width .3s; }
.swipe-track .seg.active{ background:var(--accent); width:24px; }
/* ---------- SETTINGS SCREEN ---------- */
#settingsScreen{ background:#000; padding:0; }
.settings-inner{ height:100%; overflow-y:auto; padding:78px 20px 40px; }
.settings-title{ font-size:26px; font-weight:800; letter-spacing:-.01em; margin-bottom:4px; }
.settings-sub{ font-size:12.5px; color:var(--sub); margin-bottom:24px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:12px; 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(12px);} to{opacity:1; transform:translateY(0);} }
.card-head{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.card-icon{ width:26px; height:26px; border-radius:8px; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; }
.card-icon svg{ width:14px; height:14px; stroke:var(--accent); transition:stroke .3s; }
.card-label{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
input[type="date"], input[type="time"], select{
width:100%; background:var(--card-hi); border:1px solid var(--line); color:var(--text);
border-radius:12px; padding:12px 13px; font-size:15px; font-family:inherit; font-weight:500;
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:9px; }
.row2 > div{ flex:1; }
.field-sub{ font-size:11px; color:var(--sub2); margin-top:9px; line-height:1.4; }
.apply-btn{
width:100%; margin-top:10px; background:var(--accent); color:#000; border:none; border-radius:12px;
padding:13px; font-weight:800; font-size:14px; letter-spacing:.02em; cursor:pointer;
transition:transform .12s ease, filter .2s, box-shadow .3s; box-shadow:0 8px 20px var(--accent-glow);
}
.apply-btn:active{ transform:scale(.97); filter:brightness(.92); }
.ghost-btn{ width:100%; margin-top:4px; background:transparent; color:var(--sub); border:1px solid var(--line); border-radius:12px; padding:12px; font-weight:700; font-size:13px; cursor:pointer; transition:border-color .2s, color .2s, transform .12s; }
.ghost-btn:active{ transform:scale(.97); border-color:var(--sub2); color:var(--text); }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.swatch{ width:42px; height:42px; border-radius:50%; position:relative; transition:transform .2s cubic-bezier(.34,1.6,.64,1); border:2px solid rgba(255,255,255,.06); }
.swatch-wrap:active .swatch{ transform:scale(.88); }
.swatch.active{ transform:scale(1.08); box-shadow:0 0 0 3px #000, 0 0 0 5px currentColor; }
.swatch.active::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#000; font-size:15px; font-weight:900; }
.swatch-name{ font-size:9.5px; color:var(--sub2); font-weight:600; letter-spacing:.02em; }
.live-preview{ display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); animation:blink 1.6s ease-in-out infinite; }
.live-preview span{ font-size:12px; color:var(--sub); }
.live-preview b{ color:var(--text); font-variant-numeric:tabular-nums; }
.toast{
position:absolute; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0;
background:var(--card-hi); border:1px solid var(--accent); color:var(--text);
padding:11px 20px; border-radius:30px; font-size:12.5px; font-weight:700; white-space:nowrap;
transition:transform .35s cubic-bezier(.22,.9,.3,1), opacity .35s ease; pointer-events:none; z-index:5;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
::-webkit-scrollbar{ width:0; }
/* ---------- GAMES SCREEN ---------- */
#gamesScreen{ background:#000; }
.games-inner{ height:100%; overflow-y:auto; padding:78px 20px 40px; }
.game-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 14px; cursor:pointer; transition:transform .15s, border-color .2s; animation:fadeUp .5s cubic-bezier(.2,.9,.25,1) both; }
.game-card:active{ transform:scale(.95); }
.game-card:nth-child(1){animation-delay:.03s;} .game-card:nth-child(2){animation-delay:.07s;} .game-card:nth-child(3){animation-delay:.11s;} .game-card:nth-child(4){animation-delay:.15s;} .game-card:nth-child(5){animation-delay:.19s;}
.game-emoji{ font-size:26px; margin-bottom:8px; }
.game-name{ font-size:13px; font-weight:700; }
.game-desc{ font-size:10.5px; color:var(--sub2); margin-top:3px; }
.game-view{ display:none; flex-direction:column; align-items:center; }
.game-view.active{ display:flex; }
.game-back{ display:flex; align-items:center; gap:8px; align-self:flex-start; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:8px 14px 8px 10px; font-size:12px; font-weight:700; color:var(--sub); cursor:pointer; margin-bottom:18px; }
.game-back svg{ width:14px; height:14px; stroke:var(--sub); }
.game-title{ font-size:18px; font-weight:800; margin-bottom:16px; }
.ttt-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:220px; }
.ttt-cell{ aspect-ratio:1; background:var(--card); border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; cursor:pointer; transition:background .2s; }
.ttt-cell:active{ background:var(--card-hi); }
.game-status{ margin-top:16px; font-size:13px; color:var(--sub); font-weight:600; min-height:18px; }
.rps-row{ display:flex; gap:12px; }
.rps-btn{ width:64px; height:64px; border-radius:50%; background:var(--card); border:1px solid var(--line); font-size:26px; cursor:pointer; transition:transform .15s, border-color .2s; }
.rps-btn:active{ transform:scale(.88); border-color:var(--accent); }
.rps-result{ margin-top:18px; font-size:15px; font-weight:800; text-align:center; }
.rps-score{ margin-top:6px; font-size:11px; color:var(--sub2); }
.guess-input{ width:140px; text-align:center; font-size:22px; font-weight:800; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; color:var(--text); outline:none; }
.guess-input:focus{ border-color:var(--accent); }
.mem-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; width:260px; }
.mem-cell{ aspect-ratio:1; background:var(--card); border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:background .2s, transform .2s; }
.mem-cell.flipped{ background:var(--accent-dim); border-color:var(--accent); }
.mem-cell.matched{ opacity:.35; }
.react-box{ width:260px; height:180px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; text-align:center; cursor:pointer; transition:background .15s; background:var(--card); border:1px solid var(--line); color:var(--sub); }
.react-box.go{ background:var(--accent); color:#000; }
.react-box.early{ background:#FF5000; color:#fff; }
</style>
</head>
<body>
<div class="phone">
<div class="ambient" id="ambient"></div>
<div class="track" id="track">
<div class="screen" id="watchScreen">
<div class="topnav">
<div class="brand-mark"><span class="dot"></span>8IE</div>
<div class="pillnav">
<button class="active" id="navWatch">Watch</button>
<button id="navGames">Games</button>
<button id="navSettings">Settings</button>
</div>
</div>
<div class="stage-wrap">
<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>
<div class="status-row">
<div class="status-chip"><span class="pulse"></span><span>Synced · <b id="statusTz">Local</b></span></div>
</div>
<div class="tagline">8IE TIME • Time On Chain</div>
<div class="swipe-track"><div class="seg active"></div><div class="seg"></div><div class="seg"></div></div>
</div>
<div class="screen" id="gamesScreen">
<div class="topnav">
<div class="brand-mark"><span class="dot"></span>8IE</div>
<div class="pillnav">
<button id="navWatch3">Watch</button>
<button class="active" id="navGames3">Games</button>
<button id="navSettings3">Settings</button>
</div>
</div>
<div class="games-inner">
<div id="gameList">
<div class="settings-title">Games</div>
<div class="settings-sub">5 quick games, on the house</div>
<div class="game-grid">
<div class="game-card" data-game="ttt"><div class="game-emoji">⭕</div><div class="game-name">Tic Tac Toe</div><div class="game-desc">Classic 3x3</div></div>
<div class="game-card" data-game="rps"><div class="game-emoji">✂️</div><div class="game-name">Rock Paper Scissors</div><div class="game-desc">Beat the bot</div></div>
<div class="game-card" data-game="guess"><div class="game-emoji">🎯</div><div class="game-name">Number Guess</div><div class="game-desc">1–50, few tries</div></div>
<div class="game-card" data-game="mem"><div class="game-emoji">🧠</div><div class="game-name">Memory Match</div><div class="game-desc">Find the pairs</div></div>
<div class="game-card" data-game="react"><div class="game-emoji">⚡</div><div class="game-name">Reaction Time</div><div class="game-desc">Tap on green</div></div>
</div>
</div>
<div class="game-view" id="view-ttt">
<div class="game-back" data-back><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>Games</div>
<div class="game-title">Tic Tac Toe</div>
<div class="ttt-board" id="tttBoard"></div>
<div class="game-status" id="tttStatus">Your turn — X</div>
<button class="ghost-btn" id="tttReset" style="width:220px;">New Game</button>
</div>
<div class="game-view" id="view-rps">
<div class="game-back" data-back><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>Games</div>
<div class="game-title">Rock Paper Scissors</div>
<div class="rps-row">
<button class="rps-btn" data-pick="rock">🪨</button>
<button class="rps-btn" data-pick="paper">📄</button>
<button class="rps-btn" data-pick="scissors">✂️</button>
</div>
<div class="rps-result" id="rpsResult">Make your move</div>
<div class="rps-score" id="rpsScore">You 0 · Bot 0</div>
</div>
<div class="game-view" id="view-guess">
<div class="game-back" data-back><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>Games</div>
<div class="game-title">Number Guess</div>
<input class="guess-input" id="guessInput" type="number" min="1" max="50" placeholder="1-50">
<button class="apply-btn" id="guessBtn" style="width:220px;">Guess</button>
<div class="game-status" id="guessStatus">Pick a number between 1 and 50</div>
<button class="ghost-btn" id="guessReset" style="width:220px;">New Game</button>
</div>
<div class="game-view" id="view-mem">
<div class="game-back" data-back><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>Games</div>
<div class="game-title">Memory Match</div>
<div class="mem-board" id="memBoard"></div>
<div class="game-status" id="memStatus">Moves: 0</div>
<button class="ghost-btn" id="memReset" style="width:220px;">New Game</button>
</div>
<div class="game-view" id="view-react">
<div class="game-back" data-back><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>Games</div>
<div class="game-title">Reaction Time</div>
<div class="react-box" id="reactBox">Tap to start<br>wait for green</div>
<div class="game-status" id="reactStatus">Best: –</div>
</div>
</div>
</div>
<div class="screen" id="settingsScreen">
<div class="topnav">
<div class="brand-mark"><span class="dot"></span>8IE</div>
<div class="pillnav">
<button id="navWatch2">Watch</button>
<button id="navGames2">Games</button>
<button class="active" id="navSettings2">Settings</button>
</div>
</div>
<div class="settings-inner">
<div class="settings-title">Settings</div>
<div class="settings-sub">Customize your 8IE TIME experience</div>
<div class="card">
<div class="card-head">
<div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/></svg></div>
<div class="card-label">Theme Color</div>
</div>
<div class="swatches" id="swatches"></div>
</div>
<div class="card">
<div class="card-head">
<div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg></div>
<div class="card-label">Region & Time Zone</div>
</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-head">
<div class="card-icon"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div>
<div class="card-label">Set Date & Time</div>
</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="ghost-btn" id="resetBtn">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);
}
/* Authentic Robinhood palette: signature green, alert red, gold tier, and mono */
const THEMES = [
{id:"green", name:"Classic", hex:"#00C805"},
{id:"red", name:"Alert", hex:"#FF5000"},
{id:"gold", name:"Gold", hex:"#FFD700"},
{id:"mono", name:"Mono", hex:"#FFFFFF"},
];
const strokeEls = ["dialRing","secLine","secDot"];
const fillEls = ["dateStripe","ruleBottom","ruleTop","secTail"];
const swatchesEl = document.getElementById("swatches");
THEMES.forEach(t=>{
const wrap=document.createElement("div"); wrap.className="swatch-wrap";
const s=document.createElement("div");
s.className="swatch"; s.style.background=t.hex; s.style.color=t.hex; s.dataset.id=t.id;
const label=document.createElement("div"); label.className="swatch-name"; label.textContent=t.name;
wrap.appendChild(s); wrap.appendChild(label);
wrap.addEventListener("click",()=>setTheme(t.id, true));
swatchesEl.appendChild(wrap);
});
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+"22");
document.documentElement.style.setProperty("--accent-glow", t.hex+"66");
document.documentElement.style.setProperty("--accent-soft", t.hex+"11");
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");
const statusTz = document.getElementById("statusTz");
REGIONS.forEach(([val,label])=>{
const o=document.createElement("option"); o.value=val; o.textContent=label; regionSelect.appendChild(o);
});
function updateStatusTz(){
const label = regionSelect.options[regionSelect.selectedIndex].text;
statusTz.textContent = regionSelect.value==="auto" ? "Local" : label.replace(/\s*\(.*\)/,"");
}
regionSelect.addEventListener("change", ()=>{
localStorage.setItem("8ie_region", regionSelect.value);
updateStatusTz();
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";
updateStatusTz();
const track = document.getElementById("track");
const phone = document.querySelector(".phone");
const segs = document.querySelectorAll(".swipe-track .seg");
const PANES = ["watch","games","settings"];
let startX=0, dragging=false, currentOffset=0, paneIdx=0;
function goTo(idx){
paneIdx = Math.max(0, Math.min(PANES.length-1, idx));
track.style.transform = "translateX(-" + (paneIdx*33.3334) + "%)";
document.querySelectorAll(".pillnav button").forEach(b=>b.classList.remove("active"));
const name = PANES[paneIdx];
document.querySelectorAll('[id^="nav' + name.charAt(0).toUpperCase()+name.slice(1) + '"]').forEach(b=>b.classList.add("active"));
segs.forEach((s,i)=>s.classList.toggle("active", i===paneIdx));
}
document.querySelectorAll('[id^="navWatch"]').forEach(b=>b.addEventListener("click", ()=>goTo(0)));
document.querySelectorAll('[id^="navGames"]').forEach(b=>b.addEventListener("click", ()=>goTo(1)));
document.querySelectorAll('[id^="navSettings"]').forEach(b=>b.addEventListener("click", ()=>goTo(2)));
function onStart(x){ startX=x; dragging=true; track.style.transition="none"; }
function onMove(x){
if(!dragging) return;
let delta = x - startX;
const base = -paneIdx * phone.offsetWidth;
let px = base + delta;
px = Math.max(-2*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 .5s cubic-bezier(.22,.9,.3,1)";
if(currentOffset < -60) goTo(paneIdx+1);
else if(currentOffset > 60) goTo(paneIdx-1);
else goTo(paneIdx);
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(0);
/* ================= GAMES ================= */
const gameList = document.getElementById("gameList");
document.querySelectorAll(".game-card").forEach(card=>{
card.addEventListener("click", ()=>{
gameList.style.display="none";
document.getElementById("view-"+card.dataset.game).classList.add("active");
});
});
document.querySelectorAll("[data-back]").forEach(b=>{
b.addEventListener("click", ()=>{
document.querySelectorAll(".game-view").forEach(v=>v.classList.remove("active"));
gameList.style.display="block";
});
});
/* Tic Tac Toe */
(function(){
const board = document.getElementById("tttBoard");
const status = document.getElementById("tttStatus");
let cells, turn, over;
function reset(){
cells = Array(9).fill("");
turn = "X"; over=false;
board.innerHTML="";
cells.forEach((_,i)=>{
const c=document.createElement("div"); c.className="ttt-cell"; c.dataset.i=i;
c.addEventListener("click", ()=>play(i));
board.appendChild(c);
});
status.textContent="Your turn — X";
}
const WINS=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
function checkWin(pl){ return WINS.some(w=>w.every(i=>cells[i]===pl)); }
function play(i){
if(over || cells[i]) return;
cells[i]=turn;
board.children[i].textContent=turn;
board.children[i].style.color = turn==="X" ? "var(--accent)" : "#fff";
if(checkWin(turn)){ status.textContent = turn+" wins!"; over=true; return; }
if(cells.every(c=>c)){ status.textContent="Draw game"; over=true; return; }
turn = turn==="X" ? "O" : "X";
status.textContent = turn==="X" ? "Your turn — X" : "Bot thinking...";
if(turn==="O") setTimeout(botMove, 400);
}
function botMove(){
if(over) return;
let open = cells.map((c,i)=>c?null:i).filter(i=>i!==null);
let pick = open[Math.floor(Math.random()*open.length)];
play(pick);
}
document.getElementById("tttReset").addEventListener("click", reset);
reset();
})();
/* Rock Paper Scissors */
(function(){
const result = document.getElementById("rpsResult");
const scoreEl = document.getElementById("rpsScore");
const opts=["rock","paper","scissors"]; const emo={rock:"🪨",paper:"📄",scissors:"✂️"};
let you=0, bot=0;
document.querySelectorAll(".rps-btn").forEach(b=>{
b.addEventListener("click", ()=>{
const pick=b.dataset.pick; const cpu=opts[Math.floor(Math.random()*3)];
let msg;
if(pick===cpu) msg="Tie — both " + emo[pick];
else if((pick==="rock"&&cpu==="scissors")||(pick==="paper"&&cpu==="rock")||(pick==="scissors"&&cpu==="paper")){ you++; msg="You win! "+emo[pick]+" beats "+emo[cpu]; }
else { bot++; msg="Bot wins. "+emo[cpu]+" beats "+emo[pick]; }
result.textContent=msg;
scoreEl.textContent="You "+you+" · Bot "+bot;
});
});
})();
/* Number Guess */
(function(){
const input=document.getElementById("guessInput");
const status=document.getElementById("guessStatus");
let target, tries;
function reset(){ target=1+Math.floor(Math.random()*50); tries=0; input.value=""; status.textContent="Pick a number between 1 and 50"; }
document.getElementById("guessBtn").addEventListener("click", ()=>{
const v=parseInt(input.value,10);
if(!v || v<1 || v>50){ status.textContent="Enter a number 1–50"; return; }
tries++;
if(v===target) status.textContent="Correct! " + target + " in " + tries + " tries 🎉";
else status.textContent = v<target ? "Higher ↑ (try "+tries+")" : "Lower ↓ (try "+tries+")";
});
document.getElementById("guessReset").addEventListener("click", reset);
reset();
})();
/* Memory Match */
(function(){
const board=document.getElementById("memBoard");
const status=document.getElementById("memStatus");
const EMOJI=["🍀","🔥","⭐","🌙","💎","🎧","🚀","🧩"];
let flipped, matched, moves, lock;
function reset(){
const deck=[...EMOJI,...EMOJI].sort(()=>Math.random()-.5);
flipped=[]; matched=new Set(); moves=0; lock=false;
board.innerHTML=""; status.textContent="Moves: 0";
deck.forEach((sym,i)=>{
const c=document.createElement("div"); c.className="mem-cell"; c.dataset.i=i; c.dataset.sym=sym;
c.addEventListener("click", ()=>flip(c));
board.appendChild(c);
});
}
function flip(c){
if(lock || c.classList.contains("flipped") || c.classList.contains("matched")) return;
c.classList.add("flipped"); c.textContent=c.dataset.sym;
flipped.push(c);
if(flipped.length===2){
moves++; status.textContent="Moves: "+moves; lock=true;
const [a,b]=flipped;
if(a.dataset.sym===b.dataset.sym){
a.classList.add("matched"); b.classList.add("matched");
flipped=[]; lock=false;
if(document.querySelectorAll(".mem-cell.matched").length===16) status.textContent="Solved in "+moves+" moves 🎉";
} else {
setTimeout(()=>{ a.classList.remove("flipped"); b.classList.remove("flipped"); a.textContent=""; b.textContent=""; flipped=[]; lock=false; }, 650);
}
}
}
document.getElementById("memReset").addEventListener("click", reset);
reset();
})();
/* Reaction Time */
(function(){
const box=document.getElementById("reactBox");
const status=document.getElementById("reactStatus");
let state="idle", timer, t0;
let best = parseFloat(localStorage.getItem("8ie_reactBest")||"0") || null;
if(best) status.textContent="Best: "+Math.round(best)+"ms";
box.addEventListener("click", ()=>{
if(state==="idle"){
state="waiting"; box.textContent="Wait for green..."; box.className="react-box";
const delay=800+Math.random()*2200;
timer=setTimeout(()=>{ state="go"; t0=performance.now(); box.textContent="TAP NOW"; box.className="react-box go"; }, delay);
} else if(state==="waiting"){
clearTimeout(timer); state="idle"; box.textContent="Too soon! Tap to retry"; box.className="react-box early";
setTimeout(()=>{ box.textContent="Tap to start<br>wait for green"; box.className="react-box"; }, 900);
} else if(state==="go"){
const t=performance.now()-t0; state="idle";
box.textContent="Tap to start<br>wait for green"; box.className="react-box";
if(!best || t<best){ best=t; localStorage.setItem("8ie_reactBest", String(best)); }
status.textContent = Math.round(t)+"ms · Best: "+Math.round(best)+"ms";
}
});
})();
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
#003194 · 8IE TIME
3195 of 3,226 inscriptions · text/html · 54.00 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:57 PM
- Block
- 72,530,571 · idx 4
- Tx
- 0xdf1bee41…e253bf78
- Size
- 54.00 KB
- Mime
- text/html
- Collection
- 8IE TIME Collection
- Provenance
- Held by creator
Provenance1 event
- Inscribed by 0x2bb5…3823Created
