Add files via upload

matiere.html

@@ -100,20 +100,6 @@ <h5>Que voulez vous faire ?</h5>
                     <h2>Mathématiques</h2>
                     <div id="1" class="flashcardsnumber"></div>
                 </div>
-                <script>
-                    function loadJSON() {
-                      fetch('./api/math.json')
-                        .then(response => response.json())
-                        .then(data => {
-                          var numberOfObjects = data.length;
-                          document.getElementById('1').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
-                        })
-                        .catch(error => console.error('Error loading JSON:', error));
-                    }
-
-                    // Call the function to load and process the JSON file
-                    loadJSON();
-                  </script>
             </div>
             <!-- Fin d'une slide -->
             <!-- Début d'une slide -->
@@ -133,27 +119,13 @@ <h5>Que voulez vous faire ?</h5>
                     <h2>Anglais</h2>
                     <div id="2" class="flashcardsnumber"></div>
                 </div>
-                <script>
-                    function loadJSON() {
-                      fetch('./api/lv1.json')
-                        .then(response => response.json())
-                        .then(data => {
-                          var numberOfObjects = data.length;
-                          document.getElementById('2').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
-                        })
-                        .catch(error => console.error('Error loading JSON:', error));
-                    }
-
-                    // Call the function to load and process the JSON file
-                    loadJSON();
-                  </script>
             </div>
             <!-- Fin d'une slide -->
            <!-- Début d'une slide -->
            <div class="item" >
             <div class="inner">
                 <div class="front">
-                    <img src="./img/texture.png">
+                    <img src="./img/2.png">
 
                 </div>  
                 <div class="back">
@@ -166,28 +138,14 @@ <h5>Que voulez vous faire ?</h5>
                 <h2>Espagnol</h2>
                 <div id="3" class="flashcardsnumber"></div>
             </div>
-            <script>
-                function loadJSON() {
-                  fetch('./api/lv2.json')
-                    .then(response => response.json())
-                    .then(data => {
-                      var numberOfObjects = data.length;
-                      document.getElementById('3').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
-                    })
-                    .catch(error => console.error('Error loading JSON:', error));
-                }
-
-                // Call the function to load and process the JSON file
-                loadJSON();
-              </script>
 
         </div>
         <!-- Fin d'une slide -->
         <!-- Début d'une slide -->
         <div class="item" >
             <div class="inner">
                 <div class="front">
-                    <img src="./img/texture.png">
+                    <img src="./img/3.png">
 
                 </div>  
                 <div class="back">
@@ -200,20 +158,7 @@ <h5>Que voulez vous faire ?</h5>
                 <h2>Histoire</h2>
                 <div id="4" class="flashcardsnumber"></div>
             </div>
-            <script>
-                function loadJSON() {
-                  fetch('./api/hg.json')
-                    .then(response => response.json())
-                    .then(data => {
-                      var numberOfObjects = data.length;
-                      document.getElementById('4').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
-                    })
-                    .catch(error => console.error('Error loading JSON:', error));
-                }
 
-                // Call the function to load and process the JSON file
-                loadJSON();
-              </script>
 
         </div>
         <!-- Fin d'une slide -->
@@ -289,7 +234,62 @@ <h6>Le nombre de flashcards affichées lors de l'entrainement</h6>
           </div>
 
     </div>
-
+    <script>
+        function loadJSON() {
+                      fetch('./api/math.json')
+                        .then(response => response.json())
+                        .then(data => {
+                          var numberOfObjects = data.length;
+                          document.getElementById('1').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
+                        })
+                        .catch(error => console.error('Error loading JSON:', error));
+                    }
+
+                    // Call the function to load and process the JSON file
+                    loadJSON();
+                </script>
+                <script>
+        function loadJSON() {
+                      fetch('./api/lv1.json')
+                        .then(response => response.json())
+                        .then(data => {
+                          var numberOfObjects = data.length;
+                          document.getElementById('2').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
+                        })
+                        .catch(error => console.error('Error loading JSON:', error));
+                    }
+
+                    // Call the function to load and process the JSON file
+                    loadJSON();
+                </script>
+                <script>
+        function loadJSON() {
+                  fetch('./api/lv2.json')
+                    .then(response => response.json())
+                    .then(data => {
+                      var numberOfObjects = data.length;
+                      document.getElementById('3').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
+                    })
+                    .catch(error => console.error('Error loading JSON:', error));
+                }
+
+                // Call the function to load and process the JSON file
+                loadJSON();
+        </script>
+        <script>
+        function loadJSON() {
+          fetch('./api/hg.json')
+            .then(response => response.json())
+            .then(data => {
+              var numberOfObjects = data.length;
+              document.getElementById('4').innerHTML = '<i class="bx bx-grid-alt"></i>' + `${numberOfObjects} flashcards`;
+            })
+            .catch(error => console.error('Error loading JSON:', error));
+        }
+
+        // Call the function to load and process the JSON file
+        loadJSON();
+      </script>
     <!-- Script pour l'heure -->
     <script>
                 const timeElement = document.querySelector(".time");

st.html

@@ -77,7 +77,7 @@
     </div>
     <div class="home">
         <div class="cards st" >
-            <div class="card">
+            <div class="param">
                 <h8><i class='bx bx-paint'></i> Thème du site</h8>
                 <h6>Change l'apparence de Flace</h6>
                 <select name="themeselect" id="themeselect">
@@ -107,7 +107,7 @@ <h6>Change l'apparence de Flace</h6>
                     initThemeSelector();
                  </script>
             </div>
-            <div class="card">
+            <div class="param" >
                 <h8><i class='bx bx-book-open'></i> Matière préférée</h8>
                 <h6>Change la première matière affichée dans l'accueil</h6>
                 <select name="select" id="matiereselect">

style.css

@@ -263,7 +263,7 @@ i{
 .inner {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 60px);
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
@@ -282,7 +282,7 @@ i{
   flex-direction: column;
   position: absolute;
   width: 100%;
-  height: calc(100% - 60px);
+  height: 100%;
   overflow: hidden;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
@@ -302,9 +302,7 @@ i{
 }
 
 .back {
-  background-image: url('./img/texture.png');
-  background-color: #ffffff;
-  color: #000000;
+  background-color: var(--navbar);
   transform: rotateY(180deg);
 }
 .item .bottomcard{
@@ -337,7 +335,7 @@ i{
 }
 .back h5 {
   margin: 10px;
-  color: #000000;
+  color: var(--text-color);
   font-weight: 500;
   font-size: 20px;
 }
@@ -454,6 +452,9 @@ i{
       box-shadow: 4px 3px 8px 1px #42424233;
       -webkit-box-shadow: 4px 3px 8px 1px #42424233;
   }
+  .inner{
+    height: calc(100% - 40px);
+  }
   .back button {
     display: flex;
     justify-content: center;
@@ -475,7 +476,7 @@ i{
     flex-direction: column;
     position: absolute;
     width: 100%;
-    height: calc(100% - 40px);
+    height:100%;
     overflow: hidden;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
@@ -992,7 +993,7 @@ button#reussi {
   right: 30%;
   top: 30%;
   transform: rotate(-45deg);
-  display: flex;
+  display: none;
   align-items: end;
   gap: 5rem;
   z-index: -10;
@@ -1089,21 +1090,21 @@ button#reussi {
   width: 370px;
   margin: 10px;
   border-radius: 10px;
- background-image: url('./img/texture.png');
+  background-color: var(--navbar);
   box-shadow: 4px 3px 8px 1px #42424233;
   -webkit-box-shadow: 4px 3px 8px 1px #42424233;
 }
 
 .option h5 {
   text-align: center;
-  color: #000000;
+  color: var(--text-color);
   font-weight: 600;
   font-size: 20px;
 }
 .option h6 {
   text-align: center;
   margin: 10px;
-  color: #000000;
+  color: var(--text-color);
   font-weight: 400;
   font-size: 13px;
 }
@@ -1146,17 +1147,29 @@ button#reussi {
 }
 
 /* css paramètres */ 
-
-.card h8 {
+.param {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: var(--navbar);
+  height: 220px;
+  width: 380px;
+  border-radius: 15px;
+  box-shadow: 4px 3px 8px 1px #42424233;
+  	-webkit-box-shadow: 4px 3px 8px 1px #42424233;
+    margin: 10px;
+}
+.param h8 {
   text-align: center;
-  color: #000000;
+  color: var(--text-color);
   font-weight: 600;
   font-size: 21px;
 }
-.card h6 {
+.param h6 {
   text-align: center;
   margin: 10px;
-  color: #000000;
+  color: var(--text-color);
   font-weight: 400;
   font-size: 15px;
 }
@@ -1173,8 +1186,8 @@ select {
   box-shadow: 4px 3px 8px 1px #96969633;
   -webkit-box-shadow: 4px 3px 8px 1px #96969633;
 }
-.card i {
-  color: #000;
+.param i {
+  color: var(--text-color);
 }
 
 

themes/dark.css

@@ -2,4 +2,4 @@
     --bg: #171717;
     --text-color: #fff;
     --navbar: #2a2a2a;
-}
+}

themes/fluid.css

@@ -0,0 +1,13 @@
+:root {
+    --bg: #171717;
+    --text-color: #fff;
+    --navbar: #2a2a2a;
+}
+body {
+    background-image: url('../img/background.gif');
+    background-size: cover;
+    backdrop-filter: blur(15px) ;
+}
+.shapes {
+    display: none;
+}

themes/themes.json

@@ -0,0 +1,14 @@
+[
+    {
+        "name" : "Auto",
+        "id" : "auto"
+    },
+    {
+        "name" : "Clair",
+        "id" : "light"
+    },
+    {
+        "name" : "Sombre",
+        "id" : "dark"
+    }
+]