stenodojo

stenodojo
git clone git@git.zachrice.app:repos/stenodojo.git
Log | Files | Refs

stats.html (3912B)

      1 {% extends "base.html" %}
      2 
      3 {% block title %}Statistics - StenoDojo{% endblock %}
      4 
      5 {% block content %}
      6 <div id="stats-container" class="stats-page">
      7     <h1 class="page-title">Statistics</h1>
      8 
      9     <section id="stats-overview" class="stats-overview">
     10         <div class="stat-card">
     11             <div class="stat-card__value" id="overview-sessions">--</div>
     12             <div class="stat-card__label">Total Sessions</div>
     13         </div>
     14         <div class="stat-card">
     15             <div class="stat-card__value" id="overview-words">--</div>
     16             <div class="stat-card__label">Words Practiced</div>
     17         </div>
     18         <div class="stat-card">
     19             <div class="stat-card__value" id="overview-mastered">--</div>
     20             <div class="stat-card__label">Words Mastered</div>
     21         </div>
     22         <div class="stat-card">
     23             <div class="stat-card__value" id="overview-accuracy">--</div>
     24             <div class="stat-card__label">Avg Accuracy</div>
     25         </div>
     26         <div class="stat-card">
     27             <div class="stat-card__value" id="overview-wpm">--</div>
     28             <div class="stat-card__label">Avg WPM</div>
     29         </div>
     30         <div class="stat-card">
     31             <div class="stat-card__value" id="overview-time">--</div>
     32             <div class="stat-card__label">Total Time</div>
     33         </div>
     34         <div class="stat-card stat-card--streak">
     35             <div class="stat-card__icon streak-fire"></div>
     36             <div class="stat-card__value" id="overview-streak">--</div>
     37             <div class="stat-card__label">Best Streak</div>
     38         </div>
     39     </section>
     40 
     41     <section class="stats-section">
     42         <h2 class="section-title">WPM &amp; Accuracy (Last 30 Days)</h2>
     43         <div class="chart-container">
     44             <canvas id="wpm-chart"></canvas>
     45         </div>
     46     </section>
     47 
     48     <section class="stats-section">
     49         <h2 class="section-title">Daily Activity (Last 30 Days)</h2>
     50         <div class="chart-container">
     51             <canvas id="daily-chart"></canvas>
     52         </div>
     53     </section>
     54 
     55     <section class="stats-section">
     56         <h2 class="section-title">Practice Heatmap</h2>
     57         <div id="heatmap-container" class="heatmap-container">
     58             <div class="heatmap-loading">Loading heatmap...</div>
     59         </div>
     60     </section>
     61 
     62     <section class="stats-section">
     63         <h2 class="section-title">Word Performance</h2>
     64         <div class="table-wrapper">
     65             <table id="word-table" class="table">
     66                 <thead>
     67                     <tr>
     68                         <th data-sort="word" class="sortable">Word</th>
     69                         <th data-sort="strokes" class="sortable">Strokes</th>
     70                         <th data-sort="attempts" class="sortable">Attempts</th>
     71                         <th data-sort="accuracy" class="sortable">Accuracy</th>
     72                         <th data-sort="avg_time" class="sortable">Avg Time</th>
     73                     </tr>
     74                 </thead>
     75                 <tbody id="word-table-body">
     76                     <tr><td colspan="5" class="table-empty">Loading...</td></tr>
     77                 </tbody>
     78             </table>
     79         </div>
     80     </section>
     81 
     82     <section class="stats-section">
     83         <h2 class="section-title">Session History</h2>
     84         <div class="table-wrapper">
     85             <table id="session-table" class="table">
     86                 <thead>
     87                     <tr>
     88                         <th>Date</th>
     89                         <th>Mode</th>
     90                         <th>Words</th>
     91                         <th>Accuracy</th>
     92                         <th>WPM</th>
     93                         <th>Duration</th>
     94                     </tr>
     95                 </thead>
     96                 <tbody id="session-table-body">
     97                     <tr><td colspan="6" class="table-empty">Loading...</td></tr>
     98                 </tbody>
     99             </table>
    100         </div>
    101     </section>
    102 </div>
    103 {% endblock %}