diff --git a/frontend/assets/bg-winter.png b/frontend/assets/bg-winter.png new file mode 100644 index 0000000..d80bc58 Binary files /dev/null and b/frontend/assets/bg-winter.png differ diff --git a/frontend/index.html b/frontend/index.html index ffd019e..f785417 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,39 @@ - Title + + Calendrier de l'Avent + - coucou +
+
+
5
+
17
+
1
+
24
+
12
+
7
+
19
+
3
+
9
+
22
+
15
+
13
+
8
+
6
+
2
+
20
+
14
+
10
+
23
+
11
+
4
+
18
+
16
+
21
+
+
+ - \ No newline at end of file + diff --git a/frontend/script.js b/frontend/script.js new file mode 100644 index 0000000..86eb278 --- /dev/null +++ b/frontend/script.js @@ -0,0 +1,39 @@ +// 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); + } +} + +// 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 "YYYY-MM-DD" + const day = parseInt(dateParts[2], 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/style.css b/frontend/style.css new file mode 100644 index 0000000..4c866f0 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,77 @@ +body { + margin: 0; + padding: 0; + font-family: 'Quicksand', sans-serif; + background: linear-gradient(to bottom, #005f73, #0a9396); + color: #fff; +} + +.background { + background: url('assets/bg-winter.png') no-repeat center center; + background-size: cover; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.grid { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-auto-rows: 100px; + gap: 5px; + padding: 10px; + max-width: 700px; + width: 100%; +} + +/* Style des boîtes */ +.box { + background: linear-gradient(145deg, #e63946, #f4a261); + border: 1px solid rgba(255, 255, 255, 0.6); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3); + border-radius: 10px; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Great Vibes', cursive; + font-size: 20px; + font-weight: bold; + transition: transform 0.2s, box-shadow 0.2s; + position: relative; +} + +/* Animation au survol */ +.box:hover { + transform: scale(1.05); + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.4); + cursor: pointer; +} + +/* Dispositions variées */ +.box-1 { grid-column: 1 / span 1; grid-row: 1 / span 1; } +.box-2 { grid-column: 2 / span 1; grid-row: 1 / span 2; } +.box-3 { grid-column: 3 / span 2; grid-row: 1 / span 1; } +.box-4 { grid-column: 5 / span 2; grid-row: 1 / span 1; } +.box-5 { grid-column: 1 / span 1; grid-row: 2 / span 1; } +.box-6 { grid-column: 4 / span 1; grid-row: 2 / span 1; } +.box-7 { grid-column: 6 / span 1; grid-row: 2 / span 1; } +.box-8 { grid-column: 1 / span 2; grid-row: 3 / span 1; } +.box-9 { grid-column: 3 / span 1; grid-row: 2 / span 2; } +.box-10 { grid-column: 4 / span 1; grid-row: 3 / span 2; } +.box-11 { grid-column: 5 / span 1; grid-row: 2 / span 2; } +.box-12 { grid-column: 6 / span 1; grid-row: 3 / span 2; } +.box-13 { grid-column: 1 / span 1; grid-row: 4 / span 1; } +.box-14 { grid-column: 2 / span 2; grid-row: 4 / span 1; } +.box-15 { grid-column: 5 / span 1; grid-row: 4 / span 1; } +.box-16 { grid-column: 1 / span 2; grid-row: 5 / span 1; } +.box-17 { grid-column: 3 / span 1; grid-row: 5 / span 1; } +.box-18 { grid-column: 4 / span 1; grid-row: 5 / span 1; } +.box-19 { grid-column: 5 / span 2; grid-row: 5 / span 1; } +.box-20 { grid-column: 1 / span 1; grid-row: 6 / span 1; } +.box-21 { grid-column: 2 / span 1; grid-row: 6 / span 1; } +.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; }