Create templates/index.html

templates/index.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<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 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">
+      <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 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>