41 lines
1.7 KiB
HTML
41 lines
1.7 KiB
HTML
<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-age">Age at death:</label>
|
|
<input type="number" id="death-age" min="1" max="999" placeholder="90">
|
|
</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>
|