v0.0.1

web/lib/pages/stand/index.html

@@ -0,0 +1,4 @@
+<div class="page-stand">
+    <label for="dateSelect">Виберіть дату:</label>
+    <select id="dateSelect"></select>
+</div>

web/lib/pages/stand/script.js

@@ -0,0 +1,38 @@
+const Stand = {
+    init: async () => {
+        let html = await fetch('/lib/pages/stand/index.html').then((response) => response.text());
+        app.innerHTML = html;
+
+        let listDate = [1, 4];
+
+        function generateAvailableDates() {
+            let select = document.getElementById("dateSelect");
+            select.innerHTML = "";
+
+            let today = new Date();
+            today.setHours(0, 0, 0, 0);
+            let months = [today.getMonth(), today.getMonth() + 1];
+            let year = today.getFullYear();
+
+            months.forEach(month => {
+                let date = new Date(year, month, 1);
+                while (date.getMonth() === month) {
+                    if (date >= today) {
+                        let day = date.getDay();
+                        if (listDate.includes(day)) {
+                            let option = document.createElement("option");
+                            option.value = date.toISOString().split("T")[0];
+                            option.textContent = date.toLocaleDateString("uk-UA", {
+                                weekday: "long", year: "numeric", month: "long", day: "numeric"
+                            });
+                            select.appendChild(option);
+                        }
+                    }
+                    date.setDate(date.getDate() + 1);
+                }
+            });
+        }
+
+        generateAvailableDates();
+    }
+}

web/lib/pages/stand/style.css

@@ -0,0 +1,20 @@
+.page-stand {
+    width: calc(100% - 40px);
+    display: flex;
+    flex-direction: column;
+    margin: 20px 20px 0 20px;
+}
+
+.page-stand select {
+    width: 100%;
+    min-width: 140px;
+    padding: 0 5px;
+    border-radius: 6px;
+    height: 30px;
+    background-color: var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    border: 1px solid var(--ColorThemes2);
+    margin: 10px 0;
+    box-shadow: var(--shadow-l1);
+    font-size: 14px;
+}