5
17
-
1
+
27
24
12
7
diff --git a/frontend/script.js b/frontend/script.js
deleted file mode 100644
index cc66745..0000000
--- a/frontend/script.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// URL de l'API
-const apiUrl = "http://localhost:8080/api/get_day";
-
-// Fonction pour récupérer les données depuis l'API
-async function fetchDayData() {
- try {
- const response = await fetch(apiUrl);
-
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
-
- const data = await response.json(); // Exemple de réponse : { link: "...", date: "..." }
- updateCalendar(data);
- } catch (error) {
- console.error("Erreur lors de l'appel API :", error);
- }
-
- document.getElementById("test").style.display = "none";
-}
-
-// Fonction pour mettre à jour le calendrier avec les données récupérées
-function updateCalendar(data) {
- const dateParts = data.date.split("-"); // Supposons que la date est au format "DD-MM-YYYY"
- const day = parseInt(dateParts[0], 10); // Récupérer le jour comme entier
- const box = document.getElementById(`day-${day}`);
- if (box) {
- // Ajouter un contenu ou une action à la boîte correspondant à la date
- box.innerHTML = `
🎁`;
- box.classList.add("opened"); // Classe CSS optionnelle pour indiquer que la case est ouverte
- } else {
- console.warn(`Aucune boîte trouvée pour le jour ${day}`);
- }
-}
-
-// Appel de la fonction à l'initialisation de la page
-document.addEventListener("DOMContentLoaded", () => {
- fetchDayData();
-});
diff --git a/frontend/static/script.js b/frontend/static/script.js
new file mode 100644
index 0000000..86f1f98
--- /dev/null
+++ b/frontend/static/script.js
@@ -0,0 +1,76 @@
+// URL de l'API
+const apiUrl = "http://localhost:8080/api/get_day";
+
+// Fonction pour récupérer les données depuis l'API
+async function fetchDayData() {
+ try {
+ const response = await fetch(apiUrl);
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const data = await response.json(); // Exemple de réponse : { link: "...", date: "27-11-2024" }
+ return data;
+ } catch (error) {
+ console.error("Erreur lors de l'appel API :", error);
+ }
+}
+
+// Fonction pour initialiser les événements des boîtes
+function initCalendar() {
+ const boxes = document.querySelectorAll(".box");
+
+ // Attacher un événement 'click' à chaque boîte
+ boxes.forEach(box => {
+ box.addEventListener("click", async () => {
+ const dayNumber = box.id.split("-")[1]; // Récupère le numéro de la boîte à partir de l'ID
+ const dayData = await fetchDayData();
+
+ if (!dayData) return; // Si l'appel API échoue, on ne fait rien
+
+ const todayDate = parseInt(dayData.date.split("-")[0], 10); // Extraire le jour de la date (ex : "27")
+ const link = dayData.link;
+
+ if (parseInt(dayNumber, 10) === todayDate) {
+ showModal("🎉 Bravo !", `Voici votre lien du jour :
${link}`);
+ } else {
+ showModal("⏳ Patience...", "Ce n'est pas encore le jour pour ouvrir cette boîte !");
+ }
+ });
+ });
+}
+
+// Fonction pour afficher une modale
+function showModal(title, message) {
+ // Créer la structure HTML de la modale
+ const modal = document.createElement("div");
+ modal.className = "modal";
+ modal.innerHTML = `
+
+
×
+
${title}
+
${message}
+
+ `;
+
+ // Ajouter la modale au corps du document
+ document.body.appendChild(modal);
+
+ // Fermer la modale quand l'utilisateur clique sur "close"
+ modal.querySelector(".close").addEventListener("click", () => {
+ modal.remove();
+ });
+
+ // Fermer la modale si l'utilisateur clique à l'extérieur du contenu
+ modal.addEventListener("click", (event) => {
+ if (event.target === modal) {
+ modal.remove();
+ }
+ });
+}
+
+// Appel de la fonction à l'initialisation de la page
+document.addEventListener("DOMContentLoaded", () => {
+ initCalendar();
+});
diff --git a/frontend/style.css b/frontend/static/style.css
similarity index 76%
rename from frontend/style.css
rename to frontend/static/style.css
index cc362fb..f4a4856 100644
--- a/frontend/style.css
+++ b/frontend/static/style.css
@@ -35,7 +35,7 @@ h1 {
left: 0;
width: 100%;
height: 100%;
- background: url('assets/bg-winter.png') no-repeat center center;
+ background: url('../assets/bg-winter.png') no-repeat center center;
background-size: cover;
filter: blur(5px);
z-index: -1;
@@ -100,3 +100,54 @@ h1 {
.box-22 { grid-column: 3 / span 2; grid-row: 6 / span 1; }
.box-23 { grid-column: 5 / span 1; grid-row: 6 / span 1; }
.box-24 { grid-column: 6 / span 1; grid-row: 6 / span 1; }
+
+/* Styles pour la modale */
+.modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.modal-content {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+ position: relative;
+ width: 80%;
+ max-width: 400px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.modal-content .close {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+.modal-content h2 {
+ margin: 0 0 10px;
+ font-size: 1.5rem;
+ color: #333;
+}
+
+.modal-content p {
+ font-size: 1rem;
+ color: #555;
+}
+
+.modal-content a {
+ color: #007bff;
+ text-decoration: none;
+ font-weight: bold;
+}
+