From fb120b6ad938407c53cbf2616ba578e191b22b7c Mon Sep 17 00:00:00 2001 From: greg Date: Thu, 15 May 2025 14:30:21 +0200 Subject: [PATCH] update dark mode --- index.html | 48 ++++++++++++++----------- static/css/style.css | 85 ++++++++++++++++++++++++++------------------ static/js/script.js | 22 ++++++++---- 3 files changed, 94 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index e9426cb..f63f2e2 100644 --- a/index.html +++ b/index.html @@ -65,10 +65,19 @@

Made with HTML code!

+
-
-

LES DEVELOPPEURS

-

Voici la team

+
+

Cette page est un exemple d'utilisation des classes du framework Bulma pour le CSS ainsi que + quelques fonctions basiques JS pour dynamiser le contenu. +

+
+ +

LA TEAM +

+
+ +
@@ -94,7 +103,7 @@ #colombia #responsive
- +

@@ -113,21 +122,21 @@
-
-
-

dev 2

-

dev2@devWeb.com

-
-
- -
-

Salut le monde. - #html - #js -
- -

-
+
+
+

dev 2

+

dev2@devWeb.com

+
+
+ +
+

Salut le monde. + #html + #js +
+ +

+
@@ -161,7 +170,6 @@ -
diff --git a/static/css/style.css b/static/css/style.css index 0c31853..afdb62c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,51 +1,65 @@ .card { - width: 400px; + width: 400px; } .logo-footer { - width: 100px; + width: 100px; } .hero-body { - background-color: #FFFF00; + background-color: #FFFF00; + height: 10em; } .switch { - text-align: center; + text-align: center; } -h3 h1 { +h3 { + color: var(--primary-text-color); +} + +h1 { color: var(--primary-text-color) !important; } +.card-content { + background-color: var(--card-bg-color); +} + +.card-content p { + color: var(--secondary-text-color)!important; +} /* DARK MODE */ :root { - --bg-color: #fff; - --primary-text-color: #222; - --secondary-text-color: #616060; - } + --card-bg-color: #222; + --bg-color: #fff; + --primary-text-color: #222; + --secondary-text-color: #ddd; +} body { - background: var(--bg-color); + background: var(--bg-color); } .content { - color: var(--primary-text-color); - text-align: center; + color: var(--primary-text-color); + text-align: center; } .content p { - color: var(--secondary-text-color); + color: var(--primary-text-color); } .dark-mode { - --bg-color: #3e4c59; - --primary-text-color: #fff; - --secondary-text-color: #ddd; + --card-bg-color: #fff; + --bg-color: #2f3943; + --primary-text-color: #fff; + --secondary-text-color: #787777; } -/* CAROUSSEL */ .carousel { - width: 1280px; + width: 100%; + max-width: 1280px; overflow: hidden; margin: auto; position: relative; @@ -60,8 +74,8 @@ body { } .carousel-slide { - min-width: 1280px; - height: 700px; + min-width: 100%; + height: 70vh; flex-shrink: 0; } @@ -71,15 +85,16 @@ body { object-fit: cover; } + /* TRICKY BOUTON */ .button-area { - width: 80%; - height: 300px; - position:relative; - overflow: hidden; - border: 1px solid #ccc; - margin: 0 auto; - } + width: 80%; + height: 300px; + position:relative; + overflow: hidden; + border: 1px solid #ccc; + margin: 0 auto; +} .contour { border: 1px solid #ccc; @@ -98,14 +113,14 @@ body { top: 50px; } +/* COMPTEUR */ #incrementer { margin-top: 5px; padding: 10px 20px; - background-color: #3f57c0 !important; - color: white !important; - border: none !important; - cursor: pointer !important; - left: 50px !important; - top: 120px !important; -} - \ No newline at end of file + background-color: #3f57c0; + color: white; + border: none; + cursor: pointer; + left: 50px; + top: 120px; +} \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index 81e10cf..cd8bdef 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,5 +1,20 @@ +// BULMA BURGER +document.addEventListener('DOMContentLoaded', () => { + const burgers = Array.from(document.querySelectorAll('.navbar-burger')); + + burgers.forEach(burger => { + burger.addEventListener('click', () => { + const targetId = burger.dataset.target; + const targetMenu = document.getElementById(targetId); + + burger.classList.toggle('is-active'); + targetMenu.classList.toggle('is-active'); + }); + }); +}); + // DARK MODE -document.addEventListener("DOMContentLoaded", function() { +document.addEventListener("DOMContentLoaded", function () { const switchTheme = document.querySelector("#switch"); switchTheme.addEventListener("click", function () { @@ -54,14 +69,9 @@ document.addEventListener("DOMContentLoaded", function () { document.getElementById("additionner").addEventListener("click", () => { const a = parseFloat(document.getElementById('chiffre1').value); const b = parseFloat(document.getElementById('chiffre2').value); - - if (isNaN(a) || isNaN(b)) { - document.getElementById('resultat').textContent = "Entrée invalide"; - } else { const somme = a + b; document.getElementById('resultat').textContent = somme; document.getElementById('resultBox').style.display = "block"; - } }); });