「🏗️」 wip: work in progress, not done yet.

2025-02-21 12:20:45 +01:00
parent 4056647aea
commit 758f37d7f2
10 changed files with 302 additions and 0 deletions
--- a/site/index.html
+++ b/site/index.html
@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Press F to Pay Respect</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f4f4f4;
+            color: #333;
+        }
+        h1 {
+            color: #555;
+        }
+        .image-container {
+			margin: 20px;
+        }
+		.kanel {
+			display: block;
+			margin-left: auto;
+			margin-right: auto;
+			width: 20%;
+		}
+        .button {
+            font-size: 20px;
+            padding: 10px 20px;
+            background-color: #333;
+            color: white;
+            border: none;
+            cursor: pointer;
+            margin-top: 30px;
+        }
+        .button:focus {
+            outline: none;
+        }
+        .disabled {
+            background-color: #777;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+
+    <h1>Press F to Pay Respect</h1>
+
+    <div class="image-container">
+        <img src="kanel.jpg" alt="Kanel" class="kanel">
+    </div>
+
+    <p>Current count: <span id="countDisplay"></span></p>
+
+    <button class="button" id="payRespectButton">Press F</button>
+    <div id="error-message" style="color: red; margin-top: 20px;"></div>
+
+    <script>
+        // Fonction pour envoyer à la base de données
+        function sendToDatabase() {
+            fetch('pressf.php')
+                .then(response => response.text())
+                .then(data => {
+                    updateCount(data); // Mettre à jour le compteur affiché
+                });
+        }
+
+        // Fonction pour mettre à jour le compteur affiché
+        function updateCount(newCount) {
+            document.getElementById('countDisplay').innerText = newCount;
+        }
+
+        // Fonction pour désactiver le bouton et empêcher le spam
+        function disableButton() {
+            const button = document.getElementById("payRespectButton");
+            button.disabled = true;
+            button.classList.add("disabled");
+
+			setTimeout(() => {
+                button.disabled = false;
+                button.classList.remove("disabled");
+            }, 5000);
+        }
+
+        // Gestion du clic sur le bouton
+        document.getElementById("payRespectButton").addEventListener("click", function() {
+            sendToDatabase();
+            disableButton(); // Désactiver le bouton après un clic
+        });
+
+        // Gestion de la touche "F"
+        document.addEventListener("keydown", function(event) {
+            if ((event.key === "f" || event.key === "F") && !document.getElementById("payRespectButton").disabled) {
+                sendToDatabase();
+                disableButton(); // Désactiver le bouton après un clic
+            }
+        });
+
+        // Initialisation de la page : récupérer et afficher le compteur
+        window.onload = function() {
+			fetch('fetchf.php')
+			.then(response => response.text())
+			.then(data => updateCount(data));
+		}
+    </script>
+
+</body>
+</html>