stenodojo

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

practice.html (5012B)

      1 {% extends "base.html" %}
      2 
      3 {% block title %}{{ mode_label }} - StenoDojo{% endblock %}
      4 
      5 {% block content %}
      6 <div id="practice-container" data-mode="{{ mode }}" data-lesson="{{ lesson_id }}">
      7     <div class="practice-header">
      8         <a href="/" class="btn btn--ghost practice-back">&larr; Dashboard</a>
      9         <h1 class="practice-mode-label">{{ mode_label }}</h1>
     10         <button id="end-session-btn" class="btn btn--danger practice-end">End</button>
     11     </div>
     12 
     13     <div id="loading" class="practice-loading">
     14         {% if lesson_id %}
     15         <div id="session-config" class="session-config">
     16             <label class="session-config__label">Session Length</label>
     17             <div class="session-config__options">
     18                 <button class="session-config__btn" data-count="5">Short (5)</button>
     19                 <button class="session-config__btn session-config__btn--active" data-count="10">Medium (10)</button>
     20                 <button class="session-config__btn" data-count="20">Long (20)</button>
     21             </div>
     22             <button id="start-session-btn" class="btn btn--primary session-config__start">Start Practice</button>
     23         </div>
     24         {% else %}
     25         <div class="spinner"></div>
     26         <p>Loading session...</p>
     27         {% endif %}
     28     </div>
     29 
     30     <div id="practice-area" class="practice-area" style="display: none;">
     31         <div class="practice-main">
     32             <div class="practice-left">
     33                 <div id="typing-display" class="typing-display">
     34                     <div id="typing-words" class="typing-words"></div>
     35                 </div>
     36                 <input type="text" id="typing-input" class="typing-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus>
     37                 <div id="typed-text-display" class="typed-text-display"></div>
     38 
     39                 <div id="steno-hint" class="steno-hint">
     40                     <div id="steno-keyboards" class="steno-keyboards"></div>
     41                 </div>
     42             </div>
     43 
     44             <div id="hints-panel" class="hints-panel">
     45                 <div id="phrase-hints" class="phrase-hints" style="display: none;">
     46                     <div class="phrase-hints__header">Phrase Shortcuts</div>
     47                     <div id="phrase-hints-list" class="phrase-hints-list"></div>
     48                 </div>
     49                 <div class="hints-panel__header">Strokes</div>
     50                 <div id="hints-list" class="hints-list"></div>
     51             </div>
     52         </div>
     53 
     54         <div id="session-stats" class="session-stats">
     55             <div class="session-stat">
     56                 <span class="session-stat__icon session-stat__icon--time"></span>
     57                 <span id="stat-time" class="session-stat__value">0.0s</span>
     58             </div>
     59             <div class="session-stat">
     60                 <span class="session-stat__icon session-stat__icon--accuracy"></span>
     61                 <span id="stat-accuracy" class="session-stat__value">0%</span>
     62             </div>
     63             <div class="session-stat">
     64                 <span class="session-stat__icon session-stat__icon--streak"></span>
     65                 <span id="stat-streak" class="session-stat__value">0</span>
     66             </div>
     67             <div class="session-stat">
     68                 <span class="session-stat__icon session-stat__icon--wpm"></span>
     69                 <span id="stat-wpm" class="session-stat__value">0 WPM</span>
     70             </div>
     71             <div class="session-stat">
     72                 <span class="session-stat__icon session-stat__icon--progress"></span>
     73                 <span id="stat-progress" class="session-stat__value">0/0</span>
     74             </div>
     75         </div>
     76     </div>
     77 
     78     <div id="session-summary" class="modal-overlay" style="display: none;">
     79         <div class="modal">
     80             <h2 class="modal__title">Session Complete</h2>
     81             <div id="summary-accuracy" class="summary-accuracy"></div>
     82             <div class="summary-stats">
     83                 <div class="summary-stat">
     84                     <span class="summary-stat__label">Words</span>
     85                     <span id="summary-words" class="summary-stat__value"></span>
     86                 </div>
     87                 <div class="summary-stat">
     88                     <span class="summary-stat__label">Avg WPM</span>
     89                     <span id="summary-wpm" class="summary-stat__value"></span>
     90                 </div>
     91                 <div class="summary-stat">
     92                     <span class="summary-stat__label">Best Streak</span>
     93                     <span id="summary-streak" class="summary-stat__value"></span>
     94                 </div>
     95             </div>
     96             <div id="summary-weak-words" class="summary-weak-words"></div>
     97             <div class="modal__actions">
     98                 <a href="/practice?mode={{ mode }}{% if lesson_id %}&lesson={{ lesson_id }}{% endif %}" class="btn btn--primary">Practice Again</a>
     99                 <a href="/" class="btn btn--ghost">Back to Dashboard</a>
    100             </div>
    101         </div>
    102     </div>
    103 </div>
    104 {% endblock %}