Ayobami
79 lines
2.7 KiB
Plaintext
79 lines
2.7 KiB
Plaintext
<%- include('partials/header') %>
|
|
<div class="calendar-container">
|
|
<div class="calendar-header">Calendar</div>
|
|
<div class="calendar-content">
|
|
<div class="calendar-labels">
|
|
<div class="calendar-label-main">Pick a date and time</div>
|
|
<div class="calendar-label-duration">Duration: <span>1 hour</span></div>
|
|
<div class="calendar-label-timezone">
|
|
Your timezone:
|
|
<button id="select-timezone-btn" class="timezone-btn">
|
|
Please Select
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Overlay -->
|
|
<div id="timezone-modal" class="modal-overlay" style="display: none">
|
|
<div class="modal-content">
|
|
<div class="modal-title">TIME ZONE</div>
|
|
<div class="modal-format-switch">
|
|
<label
|
|
><input type="radio" name="format" value="ampm" checked />
|
|
am/pm</label
|
|
>
|
|
<label><input type="radio" name="format" value="24hr" /> 24hr</label>
|
|
</div>
|
|
<div class="timezone-groups">
|
|
<% for (const group in timezoneGroups) { %>
|
|
<div class="timezone-group">
|
|
<div class="timezone-group-title"><%= group %></div>
|
|
<% timezoneGroups[group].forEach(function(tz) { %>
|
|
<label class="timezone-option">
|
|
<input type="radio" name="timezone" value="<%= tz.name %>" />
|
|
<span
|
|
class="tz-time"
|
|
data-am="<%= tz.time_am %>"
|
|
data-24="<%= tz.time_24 %>"
|
|
>
|
|
<%= tz.label %>
|
|
<span class="tz-time-value"><%= tz.time_am %></span>
|
|
</span>
|
|
</label>
|
|
<% }) %>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%- include('partials/footer') %>
|
|
<script>
|
|
// Modal logic
|
|
const btn = document.getElementById("select-timezone-btn");
|
|
const modal = document.getElementById("timezone-modal");
|
|
btn.onclick = () => {
|
|
modal.style.display = "flex";
|
|
};
|
|
modal.onclick = (e) => {
|
|
if (e.target === modal) modal.style.display = "none";
|
|
};
|
|
document.querySelectorAll('input[name="timezone"]').forEach((el) => {
|
|
el.onclick = () => {
|
|
window.location.href = "/calendar?tz=" + encodeURIComponent(el.value);
|
|
};
|
|
});
|
|
|
|
// Time format toggle logic
|
|
document.querySelectorAll('input[name="format"]').forEach((el) => {
|
|
el.onchange = function () {
|
|
const is24 = this.value === "24hr";
|
|
document.querySelectorAll(".tz-time").forEach((span) => {
|
|
const am = span.getAttribute("data-am");
|
|
const t24 = span.getAttribute("data-24");
|
|
span.querySelector(".tz-time-value").textContent = is24 ? t24 : am;
|
|
});
|
|
};
|
|
});
|
|
</script>
|