Make app responsive to different screen sizes

static/index.html.tmpl

@@ -9,6 +9,9 @@
         body {
             font-family: Arial, sans-serif;
             text-align: center;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         .calendar {
@@ -45,11 +48,65 @@
             /* Change color when clicked */
         }
 
-        // TODO(jona) This should be specific for the sumbit-name-lable id!
-        label {
+        #submit-name {
+            width: 90%;
+            max-width: 300px;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        #submit-btn {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        #submit-btn:hover {
+            background-color: #45a049;
+        }
+
+        #submit-name-label {
             color: red;
             visibility: hidden;
         }
+
+        @media (max-width: 768px) {
+            .calendar {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .hour-block {
+                font-size: 12px;
+                padding: 8px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .calendar {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 5px;
+            }
+
+            .day-column {
+                padding: 5px;
+            }
+
+            .hour-block {
+                font-size: 10px;
+                padding: 5px;
+            }
+
+            #submit-btn {
+                font-size: 14px;
+                padding: 8px 15px;
+            }
+        }
     </style>
 </head>
 
@@ -99,22 +156,24 @@
             calendar.appendChild(dayColumn);
         });
 
-        const submitName = document.getElementById("submit-name")
-        const submitBtn = document.getElementById("submit-btn")
-        const submitNameLabel = document.getElementById("submit-name-label")
+        const submitName = document.getElementById("submit-name");
+        const submitBtn = document.getElementById("submit-btn");
+        const submitNameLabel = document.getElementById("submit-name-label");
 
         submitBtn.onclick = function () {
             if (submitName.value == "") {
-                submitNameLabel.style.visibility = "visible"
-                return
+                submitNameLabel.style.visibility = "visible";
+                return;
             }
 
-            const days = calendar.children
-            const choices = Array.from(days).map(
-                day => Array.from(day.children).slice(1, 25).map(
-                    hour => hour.classList.contains("clicked")))
-            console.log(`Submitting dates for ${submitName.value}`)
-            console.log(JSON.stringify(choices))
+            const days = calendar.children;
+            const choices = Array.from(days).map(day =>
+                Array.from(day.children)
+                    .slice(1, 25)
+                    .map(hour => hour.classList.contains("clicked"))
+            );
+            console.log(`Submitting dates for ${submitName.value}`);
+            console.log(JSON.stringify(choices));
 
             const url = "/api/submit";
 
@@ -123,27 +182,34 @@
                 headers: {
                     "Content-Type": "application/json", // Inform the server about the data format
                 },
-                body: JSON.stringify({pollId: {{ .PollId }}, username: submitName.value, choices: choices}), // Convert the data to JSON string
+                body: JSON.stringify({
+                    pollId: {{ .PollId }},
+                    username: submitName.value,
+                    choices: choices
+                }), // Convert the data to JSON string
             })
                 .then(response => {
                     if (!response.ok) {
-                        console.log(response)
+                        console.log(response);
                     }
                 })
                 .then(data => {
-                    calendar.remove()
-                    submitName.remove()
-                    submitBtn.remove()
-                    submitNameLabel.remove()
+                    calendar.remove();
+                    submitName.remove();
+                    submitBtn.remove();
+                    submitNameLabel.remove();
 
-                    const textNode = document.createTextNode("Your choices have been submitted, thx :)");
+                    const textNode = document.createTextNode(
+                        "Your choices have been submitted, thx :)"
+                    );
                     document.body.appendChild(textNode);
                 })
                 .catch(error => {
-                    console.error('Error:', error); // Handle errors
+                    console.error("Error:", error); // Handle errors
                 });
-        }
+        };
     </script>
 </body>
 
 </html>
+