<!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 &middot; <b id="statusTz">Local</b></span></div> </div> <div class="tagline">8IE TIME &nbsp;&bull;&nbsp; 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&nbsp;Tac&nbsp;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&ndash;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 &mdash; 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 &nbsp;&middot;&nbsp; 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: &ndash;</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 &amp; 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 &amp; 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 &mdash; <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 them
Connect a wallet to buy, offer or transfer.
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
  1. Inscribed by 0x2bb5…3823
    Created
    Sep 25, 2026, 8:57 PM0xdf1bee41…e253bf78 ↗