Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <title>DistractIQ – Focus Intelligence</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Syne:wght@400;600;800&display=swap" rel="stylesheet"/> | |
| <link rel="stylesheet" href="/static/style.css"/> | |
| </head> | |
| <body> | |
| <canvas id="galaxy"></canvas> | |
| <div id="toast" class="toast"></div> | |
| <!-- ── SCREEN 1: LOGIN ── --> | |
| <div id="s-login" class="screen active"> | |
| <div class="login-wrap"> | |
| <div class="logo-block"> | |
| <div class="logo-icon">🧠</div> | |
| <h1 class="logo-text">DistractIQ</h1> | |
| <p class="logo-sub">AI-Powered Focus Intelligence</p> | |
| </div> | |
| <div class="glass login-card"> | |
| <h2>Enter the Zone</h2> | |
| <p class="muted">What should we call you, warrior?</p> | |
| <input id="name-in" class="neon-input" type="text" placeholder="Your name…" maxlength="20"/> | |
| <button class="btn-neon" onclick="doLogin()">Launch Dashboard <span class="arr">→</span></button> | |
| </div> | |
| <p class="ver">v2.0 · Galaxy Edition</p> | |
| </div> | |
| </div> | |
| <!-- ── SCREEN 2: QUIZ ── --> | |
| <div id="s-quiz" class="screen"> | |
| <div class="quiz-wrap"> | |
| <div class="quiz-top"> | |
| <div class="qprog-bar"><div id="qprog" class="qprog-fill"></div></div> | |
| <p id="qlabel" class="qlabel">Question 1 of 4</p> | |
| </div> | |
| <div id="qcard" class="glass quiz-card"> | |
| <div id="qemoji" class="qemoji">🕐</div> | |
| <h2 id="qtext">Loading…</h2> | |
| <div id="qopts" class="qopts"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ── SCREEN 3: INPUTS ── --> | |
| <div id="s-input" class="screen"> | |
| <div class="inp-wrap"> | |
| <div id="inp-card" class="glass inp-card"> | |
| <div id="inp-icon" class="inp-icon">📚</div> | |
| <h2 id="inp-title">Study Hours Today</h2> | |
| <p id="inp-desc" class="muted">How many hours did you study?</p> | |
| <div class="slider-block"> | |
| <input id="inp-slider" type="range" min="0" max="16" step="0.5" value="4" | |
| oninput="onSlide(this.value)"/> | |
| <div class="slider-display"> | |
| <span id="slid-val" class="slid-val">4</span> | |
| <span id="slid-unit" class="slid-unit">hrs</span> | |
| </div> | |
| </div> | |
| <button class="btn-neon" onclick="nextInp()">Confirm <span class="arr">✓</span></button> | |
| </div> | |
| <div id="inp-dots" class="inp-dots"></div> | |
| </div> | |
| </div> | |
| <!-- ── SCREEN 4: DASHBOARD ── --> | |
| <div id="s-dash" class="screen"> | |
| <div class="topbar"> | |
| <span id="greeting" class="greeting">Hey! 👋</span> | |
| <div class="topbar-r"> | |
| <button class="ico-btn" onclick="toggleTheme()" title="Theme">🌙</button> | |
| <div class="streak-chip" onclick="showTab('streaks')">🔥 <span id="streak-ct">0</span></div> | |
| <div id="xp-btn" class="xp-chip"> <span id="xp-ct">0</span> XP</div> | |
| </div> | |
| </div> | |
| <div id="sarcasm" class="glass sarcasm-bar"></div> | |
| <div class="score-row"> | |
| <div class="glass scard" id="sc-dist"> | |
| <div class="sc-lbl">Distraction</div> | |
| <div class="cring" id="cr-dist"> | |
| <svg viewBox="0 0 100 100"><circle class="cr-bg" cx="50" cy="50" r="42"/> | |
| <circle class="cr-fg" id="rg-dist" cx="50" cy="50" r="42"/></svg> | |
| <span class="cr-num" id="n-dist">0</span> | |
| </div> | |
| </div> | |
| <div class="glass scard" id="sc-risk"> | |
| <div class="sc-lbl">Risk Level</div> | |
| <div class="cring" id="cr-risk"> | |
| <svg viewBox="0 0 100 100"><circle class="cr-bg" cx="50" cy="50" r="42"/> | |
| <circle class="cr-fg" id="rg-risk" cx="50" cy="50" r="42"/></svg> | |
| <span class="cr-num" id="n-risk">0</span> | |
| </div> | |
| </div> | |
| <div class="glass scard" id="sc-prod"> | |
| <div class="sc-lbl">Productivity</div> | |
| <div class="cring" id="cr-prod"> | |
| <svg viewBox="0 0 100 100"><circle class="cr-bg" cx="50" cy="50" r="42"/> | |
| <circle class="cr-fg" id="rg-prod" cx="50" cy="50" r="42"/></svg> | |
| <span class="cr-num" id="n-prod">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HOME TAB --> | |
| <div id="tab-home" class="tab active"> | |
| <div class="glass sec trap-sec"> | |
| <div class="sec-ttl">⚠️ Focus Accelerator</div> | |
| <p class="muted tiny">Click for an AI-powered dopamine hit (totally safe).</p> | |
| <button id="trap-btn" class="btn-neon">ACTIVATE FOCUS</button> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">🧬 Focus Persona</div> | |
| <div class="persona-row"> | |
| <div id="p-icon" class="p-icon">🥷</div> | |
| <div> | |
| <div id="p-name" class="p-name">Deep Work Ninja</div> | |
| <div id="p-desc" class="p-desc muted">Loading persona…</div> | |
| </div> | |
| </div> | |
| <div class="lvl-block"> | |
| <div class="lvl-top"><span class="muted">Level:</span> <span id="lvl-name" class="lvl-name">Beginner</span></div> | |
| <div class="lvl-bar"><div id="lvl-fill" class="lvl-fill"></div></div> | |
| <div class="muted tiny"><span id="xp-ct2">0</span> / <span id="xp-max">500</span> XP</div> | |
| </div> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">🔥 Distraction Drivers</div> | |
| <div id="drivers" class="drivers"></div> | |
| </div> | |
| <div id="focus-optimizer" class="glass sec"> | |
| <div class="sec-ttl">⚡ Focus Optimizer</div> | |
| <div id="optimizer" class="optimizer"></div> | |
| </div> | |
| <div class="glass sec quote-sec"> | |
| <div class="sec-ttl">💬 Today's Fuel</div> | |
| <div id="quote-txt" class="quote-txt"></div> | |
| </div> | |
| <button class="btn-neon btn-full" onclick="rerun()">📊 Re-run Analysis</button> | |
| </div> | |
| <!-- STREAKS TAB --> | |
| <div id="tab-streaks" class="tab"> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">🔥 Your Streak</div> | |
| <div class="streak-hero"> | |
| <div class="s-fire">🔥</div> | |
| <div id="s-big" class="s-big">0</div> | |
| <div class="muted">Day Streak</div> | |
| </div> | |
| <div id="s-cal" class="s-cal"></div> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">🏆 Achievements</div> | |
| <div id="ach-list" class="ach-list"></div> | |
| </div> | |
| </div> | |
| <!-- BOARD TAB --> | |
| <div id="tab-distraction" class="tab"> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">📉 History</div> | |
| <div id="hist-list" class="hist-list"></div> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">📊 Score Breakdown</div> | |
| <div id="breakdown" class="breakdown"></div> | |
| </div> | |
| </div> | |
| <!-- PROFILE TAB --> | |
| <div id="tab-profile" class="tab"> | |
| <div class="glass sec prof-hero"> | |
| <div class="prof-av">🧠</div> | |
| <div id="prof-name" class="prof-name">Warrior</div> | |
| <div id="prof-persona" class="muted">Focus Persona</div> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">📈 Stats</div> | |
| <div id="prof-stats" class="prof-stats"></div> | |
| </div> | |
| <div class="glass sec"> | |
| <div class="sec-ttl">⚙️ Settings</div> | |
| <div class="srow"><span>Dark Mode</span> | |
| <label class="tog"><input type="checkbox" id="dark-tog" checked onchange="toggleThemeCheck(this)"/><span class="tog-sl"></span></label> | |
| </div> | |
| <div class="srow"><span>Notifications</span> | |
| <label class="tog"><input type="checkbox" id="notif-tog" checked/><span class="tog-sl"></span></label> | |
| </div> | |
| <button class="btn-sec" onclick="clearAll()">🗑 Reset All Data</button> | |
| </div> | |
| </div> | |
| <!-- BOTTOM NAV --> | |
| <nav class="bnav"> | |
| <button class="nb active" id="nb-home" onclick="showTab('home')"> <span>🏠</span><span>Home</span></button> | |
| <button class="nb" id="nb-streaks" onclick="showTab('streaks')"> <span>🔥</span><span>Streaks</span></button> | |
| <button class="nb" id="nb-distraction" onclick="showTab('distraction')"><span>📊</span><span>Board</span></button> | |
| <button class="nb" id="nb-profile" onclick="showTab('profile')"> <span>👤</span><span>Profile</span></button> | |
| </nav> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |