limoncello

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | LICENSE

index.html (2172B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="UTF-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1">
      6   <title>Unit Tracker</title>
      7   <link rel="stylesheet" href="/static/style.css">
      8 </head>
      9 <body>
     10 
     11 <div id="summary">{{SUMMARY}}</div>
     12 
     13 <details open>
     14   <summary>Calendar</summary>
     15   <div class="details-inner">
     16     <div class="month-nav">
     17       <button class="btn-nav" onclick="shiftMonth(-1)">◀ Prev</button>
     18       <span class="month-label" id="month-label">{{MONTH_LABEL}}</span>
     19       <button class="btn-nav" id="month-next-btn" onclick="shiftMonth(1)" disabled>Next ▶</button>
     20     </div>
     21     <div class="month-weekday-header">
     22       <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
     23     </div>
     24     <div class="month-grid" id="month-grid">{{MONTH_GRID}}</div>
     25   </div>
     26 </details>
     27 
     28 <details>
     29   <summary>Summary</summary>
     30   <div class="details-inner">
     31     <div class="period-toggle">
     32       <button class="btn-nav active" id="mode-weeks" onclick="setPeriodMode('weeks')">Weeks</button>
     33       <button class="btn-nav" id="mode-months" onclick="setPeriodMode('months')">Months</button>
     34     </div>
     35     <div class="period-list" id="period-list">{{PERIODS}}</div>
     36   </div>
     37 </details>
     38 
     39 <div class="legend">
     40   <div class="legend-item"><div class="legend-dot" style="background:#1e1e2e;border:1px solid #333"></div>0</div>
     41   <div class="legend-item"><div class="legend-dot" style="background:#1a4a7a"></div>&lt;2</div>
     42   <div class="legend-item"><div class="legend-dot" style="background:#1a5c2a"></div>&lt;4</div>
     43   <div class="legend-item"><div class="legend-dot" style="background:#5c4a00"></div>&lt;8</div>
     44   <div class="legend-item"><div class="legend-dot" style="background:#6b2e00"></div>&lt;14</div>
     45   <div class="legend-item"><div class="legend-dot" style="background:#6b0a0a"></div>&lt;20</div>
     46   <div class="legend-item"><div class="legend-dot" style="background:#3d0a6b"></div>&lt;30</div>
     47   <div class="legend-item"><div class="legend-dot" style="background:#0a0a0a;border:1px solid #333"></div>30+</div>
     48 </div>
     49 <script src="/static/app.js"></script>
     50 </body>
     51 </html>