thandClaude Opus 4.6
3b7c7cf5ac
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
70 lines
3.2 KiB
HTML
70 lines
3.2 KiB
HTML
<div id="tim-overlay" class="hidden">
|
|
<div class="tim-panel">
|
|
<div class="tim-header">
|
|
<i class="ph ph-clock text-t-accent"></i>
|
|
<h2>tim — time calculator</h2>
|
|
<span class="tim-spacer"></span>
|
|
<button id="tim-close" class="tim-btn-secondary"><i class="ph ph-x"></i> close</button>
|
|
</div>
|
|
|
|
<div class="tim-tabs">
|
|
<button class="tim-tab active" data-tim-tab="duration">Duration</button>
|
|
<button class="tim-tab" data-tim-tab="add">Add</button>
|
|
<button class="tim-tab" data-tim-tab="workday">Workday</button>
|
|
</div>
|
|
|
|
<div class="tim-tab-body" data-tim-panel="duration">
|
|
<p class="tim-hint">Duration between two times. Format HHMM, e.g. 0830-1715.</p>
|
|
<div class="tim-fields">
|
|
<div class="tim-field">
|
|
<label for="tim-dur-start">Start</label>
|
|
<input type="text" id="tim-dur-start" placeholder="0830" maxlength="4">
|
|
</div>
|
|
<div class="tim-field">
|
|
<label for="tim-dur-end">End</label>
|
|
<input type="text" id="tim-dur-end" placeholder="1715" maxlength="4">
|
|
</div>
|
|
</div>
|
|
<div class="tim-result" id="tim-dur-result"></div>
|
|
</div>
|
|
|
|
<div class="tim-tab-body hidden" data-tim-panel="add">
|
|
<p class="tim-hint">Add a duration to a given time.</p>
|
|
<div class="tim-fields">
|
|
<div class="tim-field">
|
|
<label for="tim-add-time">Time</label>
|
|
<input type="text" id="tim-add-time" placeholder="0830" maxlength="4">
|
|
</div>
|
|
<div class="tim-field">
|
|
<label for="tim-add-dur">Duration</label>
|
|
<input type="text" id="tim-add-dur" placeholder="0130" maxlength="4">
|
|
</div>
|
|
</div>
|
|
<div class="tim-result" id="tim-add-result"></div>
|
|
</div>
|
|
|
|
<div class="tim-tab-body hidden" data-tim-panel="workday">
|
|
<p class="tim-hint">End time to reach target work duration, given start, break start, and break end.</p>
|
|
<div class="tim-fields">
|
|
<div class="tim-field">
|
|
<label for="tim-wd-start">Start</label>
|
|
<input type="text" id="tim-wd-start" placeholder="0820" maxlength="4">
|
|
</div>
|
|
<div class="tim-field">
|
|
<label for="tim-wd-break-from">Break from</label>
|
|
<input type="text" id="tim-wd-break-from" placeholder="1200" maxlength="4">
|
|
</div>
|
|
<div class="tim-field">
|
|
<label for="tim-wd-break-back">Back from break</label>
|
|
<input type="text" id="tim-wd-break-back" placeholder="1245" maxlength="4">
|
|
</div>
|
|
<div class="tim-field">
|
|
<label for="tim-wd-target">Target</label>
|
|
<input type="text" id="tim-wd-target" placeholder="0800" maxlength="4">
|
|
</div>
|
|
</div>
|
|
<div class="tim-result" id="tim-wd-result"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|