update dark mode

index.html

@@ -65,10 +65,19 @@
           <p class="subtitle">Made with HTML code!</p>
         </div>
     </section>
+    <br>
+
+    <div class="content has-text-centered">
+      <p>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.
+      </p>
+    </div>
+
+      <h1 class="has-text-centered" style="text-decoration: underline;">LA TEAM
+      </h1>
+      <br>
 
       <div class="content">
-      <h1>LES DEVELOPPEURS</h1>
-        <p>Voici la team</p>
 <!-- CARDS -->
       <div class="columns is-mobile is-multiline is-centered">
 <!-- CARD 1 -->
@@ -94,7 +103,7 @@
                     <a href="#">#colombia</a>
                     <a href="#">#responsive</a>
                     <br />
-                    <time datetime="2016-1-1">11:09 PM - 18 04 20246</time>
+                    <time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
                   </p>
                 </div>
                 </div>
@@ -161,7 +170,6 @@
           </div>
         </div>                
     </div>
-  <hr>
 
 <!-- JAVASCRIPT -->
     <div class="has-text-centered">

static/css/style.css

@@ -8,23 +8,36 @@
 
 .hero-body {
   background-color: #FFFF00;
+  height: 10em;
 }
 
 .switch {
   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 {
+  --card-bg-color: #222;
   --bg-color: #fff;
   --primary-text-color: #222;
-    --secondary-text-color: #616060;
-    }
+  --secondary-text-color:  #ddd;
+}
 
 body {
   background: var(--bg-color);
@@ -34,18 +47,19 @@ body {
   text-align: center;
 }
 .content p {
-    color: var(--secondary-text-color);
+  color: var(--primary-text-color);
 }
 
 .dark-mode {
-    --bg-color: #3e4c59;
+  --card-bg-color: #fff;
+  --bg-color: #2f3943;
   --primary-text-color: #fff;
-    --secondary-text-color: #ddd;
+  --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,6 +85,7 @@ body {
   object-fit: cover;
 }
 
+
 /* TRICKY BOUTON */
 .button-area {
   width: 80%;
@@ -79,7 +94,7 @@ body {
   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;
+  background-color: #3f57c0;
+  color: white;
+  border: none;
+  cursor: pointer;
+  left: 50px;
+  top: 120px;
 }
-  

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";
-    }
   });
 });