ca42/templates/home.html

<link rel="stylesheet" href="../styles.css">
<style>
	body {
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-weight: regular;
}
h1, h2 {
  text-transform: uppercase;
}
header {
  min-height: 100px;
  background: #29AC51;
  color: #fff;
  text-align: center;
  h1 {
    padding: 30px;
    margin: auto;
    font-size: 50px;
  }
}
#desc {
  max-width: 550px;
  text-align: center;
  margin: auto;
  padding: 50px 0px 25px 0px;
}
#counter {
  max-width: 500px;
  margin: auto;
  padding: 25px 0 50px 0;
  text-align: center;
}
  h2 {
    font-size: 50px;
    font-family: 'Teko', sans-serif;
  }
  #days {
    font-family: 'Aldrich', sans-serif;
    font-size: 55px;
    padding: 50px 0 50px 0;
    color: red;
  }
  #record {
    font-family: 'Teko', sans-serif;
    font-size: 30px;
}
#incident-btn {
  padding: 35px 45px 35px 45px;
  max-width: 150px;
  text-align: center;
  margin: auto;
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  background: #B00000;
  border-bottom: solid #A20000 4px;
  cursor: pointer;
  user-select: none;
}
#incident-btn:hover {
	background-color: #ff0000;
}
.btn-text {
  text-align: center;
  padding-top: 15px;
}

</style>
    <script>
        // JavaScript function to handle button click
        document.addEventListener("DOMContentLoaded", function () {
            const incidentBtn = document.getElementById("incident-btn");

            incidentBtn.addEventListener("click", function () {
                // Make a POST request to the /api/update route
                fetch("/api/update", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    }
                })
                .then(response => {
                    if (response.redirected) {
                        // If the request is successful and we are redirected
                        window.location.href = response.url;
                    } else {
                        alert("Error: Could not update the incident.");
                    }
                })
                .catch(error => {
                    console.error("Error:", error);
                    alert("An error occurred while updating the incident.");
                });
            });
        });
    </script>
<header>
	<h1>ca42</h1>
  </header>
  <div id="desc">
	<p>Nombres de jours sans problèmes sanitaires a 42 Angoulême.</p>
  </div>
  <div id="counter">
	<h1>Jours depuis le dernier problème:</h1>
	<div>
	  <p id="days">{{days}}</p>
	</div>
	<div>
	  <p id="last-incident"></p>
	</div>
	<div>
	  <p id="record">Nombre total de problèmes : {{total}}<p>
	</div>
  </div>
  <div id="incident-btn" form action>Incident</div>
  <p class="btn-text">Note: Un accident par jour pour éviter la redondance</p>