StudyFlow/index.html at main · K31C0/StudyFlow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StudyFlow</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="header-left">
      <h1 class="logo">STUDYFLOW</h1>
      <div class="theme-switcher">
        <svg class="theme-icon" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></svg>
        <div class="theme-options">
          <button class="theme-btn" id="theme-btn-1" data-theme="theme-purple-haze"></button>
          <button class="theme-btn" id="theme-btn-2" data-theme="theme-cyber-glow"></button>
          <button class="theme-btn" id="theme-btn-3" data-theme="theme-solar-flare"></button>
        </div>
      </div>
    </div>
    <nav>
      <a href="#" data-view="tracker-view" class="nav-link active">Dashboard</a>
      <a href="#" data-view="charts-view" class="nav-link">More Charts</a>
    </nav>
  </header>
  <main>
    <section id="tracker-view" class="view active">
      <div class="main-grid">
        <div id="start-card" class="card"><h2 class="card-title">Start a New Study Session</h2><div class="tracker-input"><input id="subjectInput" type="text" placeholder="Enter Subject..."><button id="startBtn">Start</button></div><div class="goal-setter"><label for="goal-slider">Session Goal: <span id="goal-display">60 min</span></label><input type="range" id="goal-slider" min="5" max="180" value="60" step="5"></div></div>
        <div id="stats-card" class="card"><h2 class="card-title">At a Glance</h2><div class="stats-grid"><div class="stat-card"><h3>Total Time</h3><p id="total-time-stat">0h 0m</p></div><div class="stat-card"><h3>Sessions</h3><p id="total-sessions-stat">0</p></div><div class="stat-card"><h3>Avg. Session</h3><p id="avg-session-stat">0m</p></div><div class="stat-card"><h3>Top Subject</h3><p id="most-studied-stat">-</p></div></div></div>
        <div id="calendar-card" class="card"><div class="calendar-header"><button id="prev-month-btn">&lt;</button><h2 id="month-year" class="card-title"></h2><button id="next-month-btn">&gt;</button></div><div id="calendar-day-names"></div><div id="calendar-grid"></div></div>
        <div id="chart-card" class="card">
            <h2 id="chart-title" class="card-title">Last 7 Days</h2>
            <div class="chart-container">
                <canvas id="weeklyBarChart"></canvas>
                <p id="chart-message"></p>
            </div>
        </div>
        <div id="recent-card" class="card"><h2 class="card-title">Recent Sessions</h2><ul id="sessionList"></ul></div>
      </div>
    </section>
    <section id="live-session-view" class="view"><div class="live-session-container"><h2 id="live-subject">Studying...</h2><div class="timer-container"><div id="live-timer">00:00:00</div></div><div class="goal-progress-container"><div id="goal-progress-bar"></div></div><div class="live-controls"><button id="pauseBtn">Pause</button><button id="resumeBtn" style="display:none;">Resume</button><button id="finishBtn">Finish</button></div></div></section>
    <section id="charts-view" class="view"><div class="card" style="max-width: 600px; margin: 2rem auto;"><h2>Time by Subject</h2><canvas id="subjectPieChart"></canvas></div></section>
  </main>

  <script src="script.js"></script>
</body>
</html>