feat: complete day 17

2025-07-22 19:21:32 +01:00
parent 29e6eb82c7
commit 743187b216
19 changed files with 721 additions and 226 deletions
@@ -1,48 +1,78 @@
 <%- include('partials/header') %>
-<div style="padding: 32px; max-width: 900px; margin: 0 auto">
-  <h3>Pick a date and time</h3>
-  <p><b>Duration:</b> 1 hour</p>
-  <label>Your timezone:</label>
-  <select name="timezone" id="timezone-select">
-    <% timezones.forEach(function(tz) { %>
-    <option value="<%= tz.value %>"><%= tz.label %></option>
-    <% }) %>
-  </select>
-  <hr />
-  <div style="display: flex; justify-content: center; margin-top: 40px">
-    <div
-      style="
-        background: #fff;
-        padding: 32px;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px #0001;
-        min-width: 400px;
-      "
-    >
-      <h4>TIME ZONE</h4>
-      <div style="display: flex; gap: 32px">
-        <% Object.keys(timezoneGroups).forEach(function(region) { %>
-        <div>
-          <b><%= region %></b>
-          <% timezoneGroups[region].forEach(function(tz) { %>
-          <div>
-            <input type="radio" name="timezoneRadio" value="<%= tz.value %>" />
-            <%= tz.label %>
-          </div>
-          <% }) %>
-        </div>
-        <% }) %>
+<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 style="margin-top: 16px">
-        <label
-          ><input type="radio" name="format" value="ampm" checked />
-          am/pm</label
-        >
-        <label style="margin-left: 16px"
-          ><input type="radio" name="format" value="24hr" /> 24hr</label
-        >
+    </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>