mirror of
https://github.com/appen-isen/projet-cal.git
synced 2026-01-18 16:47:38 +01:00
modale
This commit is contained in:
florianboisdron
BIN
backend/backend
Executable file
BIN
backend/backend
Executable file
Binary file not shown.
@@ -11,13 +11,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="background-blur"></div>
|
||||
<h6 id="test">AAAAAAA</h6>
|
||||
<div class="background">
|
||||
<h1>Calendrier de l'avant 2024</h1>
|
||||
<h1>Calendrier de l'Avent 2024</h1>
|
||||
<div class="grid">
|
||||
<div class="box box-5" id="day-5">5</div>
|
||||
<div class="box box-17" id="day-17">17</div>
|
||||
<div class="box box-1" id="day-1">1</div>
|
||||
<div class="box box-27" id="day-27">27</div>
|
||||
<div class="box box-24" id="day-24">24</div>
|
||||
<div class="box box-12" id="day-12">12</div>
|
||||
<div class="box box-7" id="day-7">7</div>
|
||||
|
||||
@@ -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 = `<a href="${data.link}" target="_blank">🎁</a>`;
|
||||
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();
|
||||
});
|
||||
76
frontend/static/script.js
Normal file
76
frontend/static/script.js
Normal file
@@ -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 : <a href="${link}" target="_blank">${link}</a>`);
|
||||
} 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 = `
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>${title}</h2>
|
||||
<p>${message}</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 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();
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user