add weekends left calculator

This commit is contained in:
Fabian Montero 2026-04-13 17:00:56 -06:00
parent 427ba433db
commit dc791ae47c
Signed by: fabian
GPG key ID: 3EDA9AE3937CCDE3
5 changed files with 477 additions and 0 deletions

View file

@ -0,0 +1,41 @@
<div class="weekends-left-calculator">
<form id="weekends-form" class="weekends-form">
<div class="form-row">
<div class="form-group">
<label for="birth-year">Birth year:</label>
<input type="number" id="birth-year" min="1900" max="2100" placeholder="1998">
</div>
<div class="form-group">
<label for="death-year">Death year:</label>
<input type="number" id="death-year" min="1900" max="2200" placeholder="2088">
</div>
</div>
</form>
<div id="weekends-results" class="weekends-results" style="display: none;">
<div class="hero-stat">
<span class="hero-value" id="percentage-remaining">0%</span>
<span class="hero-label">of weekends remaining</span>
</div>
<div class="weekends-stat">
<span id="used-count">0</span> / <span id="total-count">0</span> weekends
</div>
<div class="waking-hours-stat" id="waking-hours">0 waking hours remaining</div>
<div class="grid-container">
<div class="grid-legend">
<span class="legend-item"><span class="legend-dot used"></span> used</span>
<span class="legend-item"><span class="legend-dot"></span> remaining</span>
</div>
<div id="weekends-grid" class="weekends-grid"></div>
</div>
<button type="button" id="download-btn" class="download-btn">Download as image</button>
</div>
<noscript>
<p>This calculator requires JavaScript to function.</p>
</noscript>
</div>
<script src="{{ get_url(path='js/weekendsLeft.js') | safe }}"></script>