Add changing gamemode

index.html

@@ -145,6 +145,13 @@
         <img id="outline" src="" width="400">
     </div>
 
+    <h1>Choose gamemode</h1>
+    <p>Set to 0 to disable</p>
+    <input type="number" class="practice-minutes" placeholder="Practice minutes">
+    <input type="number" class="qualify-minutes" placeholder="Qualify minutes">
+    <input type="number" class="race-laps" placeholder="Race laps">
+    <button onclick="applyGamemodes()">Apply</button>
+
     <h1>Choose cars</h1>
     <button id="addCarBtn">Add Car</button>
     <button id="applyCarsBtn">Change cars</button>
@@ -222,6 +229,54 @@
             window.addEventListener('load', updateCurrentTrack, false); // NB **not** 'onload'
         } 
     </script>
+    <script>
+        function updateGameModes() {
+            fetch('/gamemodes')
+                .then(r => r.json())
+                .then(data => {
+                    document.querySelector(".practice-minutes").value = data.gamemodes.practice_minutes;
+                    document.querySelector(".qualify-minutes").value = data.gamemodes.qualify_minutes;
+                    document.querySelector(".race-laps").value = data.gamemodes.race_laps;
+                });
+        }
+
+        function applyGamemodes() {
+            const practiceMinutes = document.querySelector(".practice-minutes").value || 0;
+            const qualifyMinutes = document.querySelector(".qualify-minutes").value || 0;
+            const raceLaps = document.querySelector(".race-laps").value || 0;
+
+            const payload = {
+                gamemodes: {
+                    practice_minutes: parseInt(practiceMinutes),
+                    qualify_minutes: parseInt(qualifyMinutes),
+                    race_laps: parseInt(raceLaps)
+                }
+            };
+
+            fetch("/changegamemodes", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(payload)
+            })
+                .then(res => res.json())
+                .then(data => {
+                    console.log("Server response:", data);
+                    if (data.status == "success") {
+                        alert("Gamemodes changed successfully!");
+                    } else {
+                        alert("Failed to change gamemodes: " + data.message);
+                    }
+                });
+        }
+
+        if (window.addEventListener) // W3C standard
+        {
+            window.addEventListener('load', updateGameModes, false); // NB **not** 'onload'
+        }
+    </script>
+
     <script>
         const addCarBtn = document.getElementById("addCarBtn");
         const carList = document.getElementById("carList");
@@ -237,7 +292,7 @@
             blocks.forEach(block => {
                 const carSelect = block.querySelector(".car-select");
                 const skinSelect = block.querySelector(".skin-select");
-                const amountInput = block.querySelector("input[type='number']");
+                const amountInput = block.querySelector(".amount-input");
 
                 const carName = carSelect?.value || "";
                 const skinName = skinSelect?.value || "";
@@ -310,6 +365,7 @@
 
             const amountSelect = document.createElement("input");
             amountSelect.style.marginLeft = "10px";
+            amountSelect.className = "amount-input";
             amountSelect.type = "number";
             amountSelect.min = "1";
             if (amount > 0) {