Custom Countdown Components
Countdown Timer
<![CDATA[
<div style="display: flex; gap: 16px; align-items: center;" class="mb-5">
<div style="display: flex;gap: 16px;">
<div class="szi-input szi-input--inline" style="margin:0">
<label class="szi-input__label" for="date-picker">Date:</label>
<input class="szi-input__control szi-input--md" type="date" id="date-picker" required>
</div>
<div class="szi-input szi-input--inline" style="margin:0">
<label class="szi-input__label" for="time-picker">Time:</label>
<input class="szi-input__control szi-input--md" type="time" id="time-picker" required>
</div>
</div>
<div class="btn-group">
<button class="btn btn-gradient" id="start-timer">Start Timer</button>
<button class="btn btn-gradient countdown__reset" id="reset-timer">Reset Timer</button>
</div>
</div>
<div class="countdown__display" id="countdown-display">
<div class="countdown__unit countdown__months hide" id="months-container">
<div class="countdown__value" id="months">0</div>
<div class="countdown__label-text">Months</div>
</div>
<div class="countdown__unit countdown__days hide" id="days-container">
<div class="countdown__value" id="days">0</div>
<div class="countdown__label-text">Days</div>
</div>
<div class="countdown__unit countdown__hours hide" id="hours-container">
<div class="countdown__value" id="hours">0</div>
<div class="countdown__label-text">Hours</div>
</div>
<div class="countdown__unit countdown__minutes hide" id="minutes-container">
<div class="countdown__value" id="minutes">0</div>
<div class="countdown__label-text">Minutes</div>
</div>
<div class="countdown__unit countdown__seconds hide" id="seconds-container">
<div class="countdown__value" id="seconds">0</div>
<div class="countdown__label-text">Seconds</div>
</div>
</div>
]]>