nouveau chgmt

INSA/projet-clicodrome/bdd/arbre.json

@@ -0,0 +1,231 @@
+{
+    "technologies": {
+      "html": {
+        "nom": "HTML",
+        "elements": {
+          "button": {
+          }
+        },
+        "boost": 2,
+        "cout": 10,
+        "borne": 5,
+        "evolution":0,
+        "css_id": "t1.css",
+        "narration": "C'est le début de l'aventure web ! HTML, le langage de base, permet de structurer des pages avec des titres, des paragraphes, des listes, et surtout des boutons pour interagir avec les utilisateurs. Vous avez posé les premières pierres de l'Internet. Le web commence tout juste à s'ouvrir au monde."
+      },
+  
+      "html+": {
+        "nom": "HTML+",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 5,
+        "cout": 100,
+        "borne": 50,
+        "evolution":1,
+        "css_id": "t2.css",
+        "narration": "L'HTML+ améliore ce que vous avez construit. Plus de possibilités pour styliser votre page, et le pouvoir d'ajouter des formulaires et des éléments interactifs. Le web devient plus attrayant et engageant, prêt à accueillir un public plus large !"
+      },
+  
+      "html_2.0": {
+        "nom": "HTML 2.0",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 10,
+        "cout": 1000,
+        "borne": 500,
+        "evolution":2,
+        "css_id": "t3.css",
+        "narration": "HTML 2.0 est arrivé ! Ce n'est pas juste une mise à jour, c'est une révolution. Avec cette version, vous pouvez organiser vos pages avec des tableaux et ajouter des formulaires interactifs. Le web devient un lieu où l'on peut entrer et interagir, et non seulement lire. Bienvenue dans l'ère de l'interaction !"
+      },
+  
+      "html_3.2": {
+        "nom": "HTML 3.2",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 20,
+        "cout": 10000,
+        "borne": 5000,
+        "evolution":3,
+        "css_id": "t4.css",
+        "narration": "L'HTML 3.2 marque un tournant décisif dans l'histoire du web. Grâce à l'introduction de la balise `<img>`, vous pouvez désormais ajouter des images à vos pages ! Le web devient visuel et prend vie avec des images. Vous êtes sur le point de changer la façon dont les utilisateurs perçoivent Internet."
+      },
+  
+      "html_4.01": {
+        "nom": "HTML 4.01",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 30,
+        "cout": 100000,
+        "borne": 50000,
+        "evolution":3,
+        "css_id": "t5.css",
+        "narration": "HTML 4.01 a ouvert la voie à une nouvelle ère de personnalisation du design web. L'ajout des feuilles de style CSS a permis de donner libre cours à la créativité. Vous avez désormais un contrôle total sur l'apparence de vos pages, et le web devient plus dynamique et élégant."
+      },
+  
+      "xhtml_4.01": {
+        "nom": "XHTML 4.01",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 40,
+        "cout": 1000000,
+        "borne": 500000,
+        "evolution":4,
+        "css_id": "t6.css",
+        "narration": "XHTML 4.01 améliore encore la norme HTML, avec une plus grande rigueur et des règles de codage strictes. Vous commencez à créer des pages web plus robustes et accessibles, prêtes à supporter un contenu riche et diversifié. Le web devient plus stable et professionnel."
+      },
+  
+      "xhtml_1.0": {
+        "nom": "XHTML 1.0",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 50,
+        "cout": 10000000,
+        "borne": 5000000,
+        "evolution":5,
+        "css_id": "t7.css",
+        "narration": "Avec XHTML 1.0, vous atteignez un nouveau niveau de qualité. Vous écrivez un code plus propre et plus cohérent, et l'expérience utilisateur s'en trouve améliorée. Les pages se chargent plus rapidement et sont plus fiables. La perfection est en marche !"
+      },
+  
+      "html_5": {
+        "nom": "HTML 5",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 60,
+        "cout": 1000000000,
+        "borne": 50000000,
+        "evolution":6,
+        "css_id": "t8.css",
+        "narration": "L'HTML 5 débarque ! C'est l'arrivée des vidéos et de l'audio sur le web. Grâce à la balise `<video>`, vous pouvez intégrer des vidéos directement dans vos pages, et la balise `<audio>` permet de diffuser des sons. Vous redéfinissez l'expérience multimédia sur Internet."
+      },
+  
+      "xhtml_5": {
+        "nom": "XHTML 5",
+        "elements": {
+          "button": {
+
+          }
+        },
+        "boost": 70,
+        "cout": 10000000000,
+        "borne": 500000000,
+        "evolution":7,
+        "css_id": "t9.css",
+        "narration": "XHTML 5 vous permet d'aller encore plus loin dans l'interactivité. Grâce à l'introduction des balises HTML5, vous pouvez gérer des éléments multimédia comme des vidéos, des sons, et même des animations interactives avec le JavaScript intégré. Le web devient une plateforme riche et immersive, tout est possible !"
+      }
+    },
+    
+  "collegues": {
+    "ada_lovelace": {
+      "nom": "Ada Lovelace",
+      "cout": 15,
+      "revenu_passif": 0.1,
+      "evolution": 0,
+      "narration": "Ada Lovelace est considérée comme la première programmeuse de l'histoire. Elle a collaboré avec Charles Babbage sur la machine analytique et a écrit des notes qui contiennent l'algorithme destiné à être exécuté par la machine, un concept essentiel à la programmation moderne.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Ada_Lovelace",
+      "nom_fichier_image":"img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png"
+    },
+    "george_boole": {
+      "nom": "George Boole",
+      "cout": 100,
+      "revenu_passif": 1,
+      "evolution": 0,
+      "narration": "George Boole était un mathématicien et logicien britannique, connu pour avoir formulé les bases de l'algèbre logique, un outil fondamental en informatique et en intelligence artificielle.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/George_Boole",
+      "nom_fichier_image":"img/George_Boole_color.jpg"
+    },
+    "grace_hopper": {
+      "nom": "Grace Hopper",
+      "cout": 1100,
+      "revenu_passif": 8,
+      "evolution": 0,
+      "narration": "Grace Hopper était une informaticienne et contre-amiral de la marine américaine. Elle est connue pour ses travaux sur le développement du premier compilateur et pour avoir popularisé le terme 'bug' pour décrire un dysfonctionnement dans les programmes.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Grace_Hopper",
+      "nom_fichier_image":"img/390px-Commodore_Grace_M._Hopper,_USN_(covered).jpg"
+    },
+    "france_spence": {
+      "nom": "Frances V. Spence",
+      "cout": 6000,
+      "revenu_passif": 47,
+      "evolution": 1,
+      "narration": "Frances V. Spence est l'une des premières programmeuses pour l'ENIAC (le premier ordinateur numérique). Elle est considérée comme l'une des pionnières de l'histoire de la programmation informatique.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Frances_Spence",
+      "nom_fichier_image":"img/Frances_Bilas_Spence_feeding_punch_cards_into_ENIAC,_Feb_1946.png"
+    },
+    "claude_shannon": {
+      "nom": "Claude Shannon",
+      "cout": 10000,
+      "revenu_passif": 260,
+      "evolution": 1,
+      "narration": "Claude Shannon est considéré comme le père de la théorie de l'information. Ses travaux ont révolutionné les domaines de la communication et de l'informatique.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Claude_Shannon",
+      "nom_fichier_image":"img/ClaudeShannon_MFO3807.jpg"
+    },
+    "alan_turing": {
+      "nom": "Alan Turing",
+      "cout": 700000,
+      "revenu_passif": 1400,
+      "evolution": 1,
+      "narration": "Alan Turing était un mathématicien et cryptanalyste britannique, célèbre pour son travail sur la machine de Turing, une base fondamentale pour la conception des ordinateurs modernes.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Alan_Turing",
+      "nom_fichier_image":"img/Alan_Turing_(1912-1954)_in_1936_at_Princeton_University.jpg"
+    },
+    "maragaret_hamilton": {
+      "nom": "Margaret Hamilton",
+      "cout": 5000000,
+      "revenu_passif": 7800,
+      "evolution": 2,
+      "narration": "Margaret Hamilton est une informaticienne qui a dirigé l'équipe de développement logiciel pour la mission Apollo. Elle est connue pour avoir écrit le code qui a permis de poser l'homme sur la Lune.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Margaret_Hamilton_(scientifique)",
+      "nom_fichier_image":"img/330px-Margaret_Hamilton_-_restoration.jpg"
+    },
+    "tim_berners_lee": {
+      "nom": "Tim Berner-Lee",
+      "cout": 50000000,
+      "revenu_passif": 44000,
+      "evolution": 2,
+      "narration": "Tim Berners-Lee est l'inventeur du World Wide Web. Son travail a permis de rendre Internet accessible et compréhensible pour le grand public.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Tim_Berners-Lee",
+      "nom_fichier_image":"img/390px-Tim_Berners-Lee_closeup.jpg"
+    },
+    "dennis_ritchie": {
+      "nom": "Dennis Ritchie",
+      "cout": 70000000,
+      "revenu_passif": 260000,
+      "evolution": 2,
+      "narration": "Dennis Ritchie était un informaticien américain, co-créateur du langage de programmation C et du système d'exploitation UNIX, qui sont devenus des fondations de l'informatique moderne.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Dennis_Ritchie",
+      "nom_fichier_image":"img/390px-Dennis_Ritchie_2011.jpg"
+    },
+    "linus_torvald": {
+      "nom": "Linus Torvald",
+      "cout": 100000000,
+      "revenu_passif": 1600000,
+      "evolution": 3,
+      "narration": "Linus Torvalds est le créateur de Linux, un noyau de système d'exploitation open-source qui est devenu la base de nombreuses distributions utilisées dans des serveurs, des ordinateurs personnels et des appareils mobiles.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Linus_Torvalds",
+      "nom_fichier_image":"img/LinuxCon_Europe_Linus_Torvalds_03_(cropped).jpg"
+    }
+  }
+}
+  

INSA/projet-clicodrome/css/alerte.css

@@ -0,0 +1,56 @@
+/*
+ * @file            css/alerte.css
+ * @description     
+ * @author          mougnibas <mougnibas@insa-toulouse.fr>
+ * @createTime      2024-11-29 10:35:07
+ * @lastModified    2024-12-15 18:53:32
+ * Copyright ©Théo Mougnibas All rights reserved
+*/
+
+/* Le conteneur de l'alerte, va couvrir tout l'écran*/
+.modal {
+  display: none; /* on la cache par défaut */
+  position: fixed; 
+  z-index: 1; /* BAM ! AU DESSUS DE TOUT */
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); /* On floute le derrière */
+}
+  
+/* Contenu de l'alerte */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* on le centre */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  max-width: 400px;
+  text-align: center;
+}
+  
+/* Bouton pour fermer l'alerte */
+.close-btn {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Bouton OK */
+.modal.button {
+  padding: 10px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+

INSA/projet-clicodrome/css/alerte/a1.css

@@ -0,0 +1,32 @@
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #ccc; /* Gris uni */
+}
+
+.modal-content {
+    background-color: white;
+    margin: 15% auto;
+    padding: 10px;
+    border: 2px solid black; /* Bordures noires bien visibles */
+    width: 40vw;
+    text-align: left; /* Alignement à gauche */
+    font-family: Arial, sans-serif; /* Typo basique */
+}
+
+.close-btn {
+    color: black;
+    font-size: 18px;
+}
+
+.modal.button {
+    padding: 5px 10px;
+    background-color: #008CBA; /* Bleu très simple */
+    color: white;
+}
+  

INSA/projet-clicodrome/css/alerte/a2.css

@@ -0,0 +1,39 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ccc; /* Gris uni */
+}
+
+.modal-content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 10px;
+  border: 2px solid black; /* Bordures noires bien visibles */
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  font-family: Arial, sans-serif; /* Typo basique */
+  border-radius: 5px; /* Bordures légèrement arrondies */
+  border: 1px solid gray;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #008CBA; /* Bleu très simple */
+  color: white;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a3.css

@@ -0,0 +1,39 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: url('background.jpg') repeat; /* Texture kitsch */
+}
+
+.modal-content {
+  background-color: white;
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  border-radius: 5px; /* Bordures légèrement arrondies */
+  border: 1px solid gray;
+  font-family: "Comic Sans MS", cursive; /* Typo iconique des années 2000 */
+  background-color: pink; /* Couleurs flashy */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Ombres portées pour effet "pop" */
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #ff69b4; /* Rose bonbon */
+  font-weight: bold;}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a4.css

@@ -0,0 +1,44 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: url('../../img/tecktonik.jpeg') repeat; /* Texture kitsch */
+}
+@font-face {
+  font-family: "Comic Sans MS";
+  src: url("../font/comic-sans.woff") format("woff");
+}
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  font-family:"Comic Sans MS"; /* Typo iconique des années 2000 */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* Ombres portées pour effet "pop" */
+  background: linear-gradient(to bottom, #ffffff, #e0e0e0); /* Dégradé élégant */
+  border: none;
+  border-radius: 10px;
+  color:purple;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  padding: 5px 10px;
+  background-color: #ff69b4; /* Rose bonbon */
+  font-weight: bold;
+  border-radius: 0px !important;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a5.css

@@ -0,0 +1,37 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  text-align: left; /* Alignement à gauche */
+  background-color: white;
+  border: 2px solid #4caf50; /* Vert plat */
+  box-shadow: none;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  background-color: #4caf50;
+  color: white;
+  border-radius: 3px;
+  border: none;
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a6.css

@@ -0,0 +1,41 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  background-color: white;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
+  border-radius: 4px;
+}
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  background-color: #4caf50;
+  color: white;
+  border-radius: 3px;
+  border: none;
+  transition: background-color 0.3s ease;
+}
+
+.modal.button:hover {
+  background-color: #45a049; /* Vert plus sombre au survol */
+}
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a7.css

@@ -0,0 +1,41 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Ombres douces */
+  background-color: #1e1e1e; /* Fond sombre */
+  color: #ffffff;
+  border: 1px solid #444444;
+  border-radius: 4px;
+}
+
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  border-radius: 3px;
+  border: none;
+  background-color: #bb86fc; /* Couleur violet pastel */
+  color: #000;
+}
+
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a8.css

@@ -0,0 +1,40 @@
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
+}
+
+.modal-content {
+  margin: 15% auto;
+  padding: 10px;
+  width: 40vw;
+  background-color: #ffdb00; /* Jaune vif */
+  color: #000;
+  border: 4px solid #000; /* Bordures audacieuses */
+  font-family: "Arial Black", sans-serif;
+}
+
+
+.close-btn {
+  color: black;
+  font-size: 18px;
+}
+
+.modal.button {
+  border-radius: 3px;
+  border: none;
+  background-color: #e63946; /* Rouge frappant */
+  font-size: 18px;
+}
+
+
+.close-btn:hover,
+.close-btn:focus {
+  color: red; /* Rouge pour attirer l’attention */
+}
+  

INSA/projet-clicodrome/css/alerte/a9.css

@@ -0,0 +1,33 @@
+.modal {
+  background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
+  backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
+}
+
+.modal-content {
+  background: radial-gradient(circle, #222, #000);
+  color: #fff;
+  border-radius: 20px;
+  border: none;
+  width: 40vw;
+  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
+  transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
+}
+
+.modal.button {
+  background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
+  font-size: 20px;
+  border-radius: 50px;
+  animation: pulse 1.5s infinite; /* Animation d’impulsion */
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

INSA/projet-clicodrome/css/index.css

@@ -0,0 +1,53 @@
+@keyframes faireTournerImage {
+    0% {
+        transform: rotate(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: rotate(360deg);
+        opacity: 1;
+    }
+}
+
+#image-collegue-animee {
+    width: auto;
+    height: auto;
+    animation: faireTournerImage 2s linear forwards infinite;
+    z-index: 1;
+}
+
+.div-centrer-contenu{
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+}
+
+
+@keyframes pluieConfetti {
+    0% {
+        transform: translateY(-100px) rotate(0deg);
+        opacity: 1;
+    }
+    100% {
+        transform: translateY(100vh) rotate(720deg);
+        opacity: 0;
+    }
+}
+
+.confetti {
+    position: absolute;
+    width: 10px;
+    height: 20px;
+    animation: pluieConfetti 5s linear infinite;
+    opacity: 0;
+}
+
+.confetti-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none; /* pour ne pas interagir avec les confettis */
+}

INSA/projet-clicodrome/css/t1.css

@@ -0,0 +1,33 @@
+/* t1.css - HTML */
+body {
+    font-family: Arial, sans-serif;
+    background-color: white;
+    color: black;
+    margin: 500;
+    padding: 20px;
+}
+
+
+
+button {
+    padding: 5px 15px;
+    border: 1px solid #000;
+    background-color: white;
+    cursor: pointer;
+}
+
+
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #000;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t2.css

@@ -0,0 +1,74 @@
+/* t2.css - HTML+ */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f55555;
+    color: #333333;
+    margin: 10;
+    padding: 20px;
+}
+
+output {
+    color: aqua;
+    font-size: 75px;
+    border:dotted #00ff62;
+    border-radius: 14px;
+}
+
+button {
+    padding: 8px 15px;
+    border: 1px solid #ddd;
+    background-color: #0206ff;
+    cursor: pointer;
+    border-radius: 5px;
+    color: #ddd;
+}
+
+button:hover {
+    background-color: #bbb;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 5px;
+}
+
+th {
+    font-family:Impact;
+    color: rgb(77, 230, 143);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 15px solid #e99d0f;
+}
+
+td, th {
+    padding: 8px;
+    text-align: left;
+    border: 8px solid #fc04fc;
+}
+
+div.ad{
+    visibility: visible;
+    display: block !important;
+    
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #87bc44;
+    background: #e0ff92;
+    line-height: 1.2;
+    }
+div.ad.adt3{
+    visibility: hidden;
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t3.css

@@ -0,0 +1,78 @@
+/* t3.css - HTML 2.0 */
+body {
+    font-family: 'Segoe UI', sans-serif;
+    background-color: #f0f0f0;
+    color: #ddd;
+    margin: 0;
+    padding: 30px;
+    background-image: url(../img/codevert.jpg);
+}
+
+
+
+button {
+    padding: 10px 20px;
+    border: none;
+    background-color: #000000;
+    color: white;
+    cursor: pointer;
+    border-radius: 10px;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: #66ff00;
+}
+
+output {
+    color: #ddd;
+    font-size: 50px;
+
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+}
+th {   
+    font-size: 20px;
+
+}
+
+td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+
+div.ad{
+    visibility: visible;
+    display: block !important;
+    float: right;
+    width: 162px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #87bc44;
+    background: #e0ff92;
+    line-height: 1.2;
+    }
+div.ad.adt3{
+    visibility: visible;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t4.css

@@ -0,0 +1,72 @@
+/*
+ * @file            css/t4.css
+ * @description     
+ * @author          mougnibas <mougnibas@insa-toulouse.fr>
+ * @createTime      2024-11-21 11:51:17
+ * @lastModified    2024-12-15 20:38:31
+ * Copyright ©Théo Mougnibas All rights reserved
+*/
+
+body {
+    background-color: #ecf0f1;
+    color: #ddd;
+    margin: 0;
+    padding: 40px;
+    background-image: url(../img/matrix.gif), url(../img/codevert.jpg);
+}
+
+button {
+    padding: 12px 25px;
+    border: none;
+    background-color: #000000;
+    color: white;
+    cursor: pointer;
+    border-radius: 20px;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #33ff00;
+}
+
+output {
+    font-size: 50px;
+    color: #ddd;
+    background-color: #000000;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 15px;
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+
+    border: 1px solid #ddd;
+}
+
+th {
+    padding: 12px;
+    text-align: left;
+    border: 1px solid #ccc;
+    color: #ddd;
+    font-size: 20px;
+}
+td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t5.css

@@ -0,0 +1,70 @@
+/* t5.css - HTML 4.01 */
+body {
+    font-family: 'Helvetica Neue', sans-serif;
+    background-color: #fafafa;
+    color: #ddd;
+    margin: 0;
+    padding: 50px;
+    background-image: url(../img/codevertmatrix.gif);
+}
+
+h1, h2, h3 {
+    color: #e74c3c;
+    text-align: center;
+    margin-bottom: 25px;
+}
+
+output {
+    font-size: 50px;
+    color: #ddd;
+    background-color: #000000;
+}
+
+button {
+    padding: 15px 30px;
+    border: 2px solid #33ff00;
+    background-color: #ecf0f1;
+    color: #33ff00;
+    cursor: pointer;
+    border-radius: 25px;
+    font-size: 16px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #33ff00;
+    color: white;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #ecf0f1;
+}
+
+td, th {
+    padding: 15px;
+    text-align: left;
+    border: 1px solid #ecf0f1;
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}
+a{
+    color: #33ff00;
+
+}
+a.hoover{
+    color: #ffffff;
+}

INSA/projet-clicodrome/css/t6.css

@@ -0,0 +1,49 @@
+/* t6.css - XHTML 4.01 */
+body {
+    font-family: 'Verdana', sans-serif;
+    background-color: #ffffff;
+    color: #2c3e50;
+    margin: 0;
+    padding: 60px;
+}
+
+
+
+button {
+    padding: 18px 35px;
+    border: none;
+    background-color: #e74c3c;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 18px;
+}
+
+button:hover {
+    background-color: #fda500;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+td, th {
+    padding: 18px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t7.css

@@ -0,0 +1,58 @@
+/* t7.css - XHTML 1.0 */
+body {
+    font-family: 'Segoe UI', serif;
+    background-color: #ecf0f1;
+    color: #34495e;
+    margin: 0;
+    padding: 70px;
+}
+
+output {
+    font-size: 30px;
+
+}
+
+button {
+    padding: 15px 30px;
+    border: 2px solid #e74c3c;
+    background-color: white;
+    color: #e74c3c;
+    cursor: pointer;
+    border-radius: 25px;
+    font-size: 20px;
+    transition: transform 0.2s ease;
+}
+
+button:hover {
+    transform: scale(1.1);
+    background-color: #e74c3c;
+    color: white;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 20px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 2px solid #ff9900;
+    
+}
+
+td, th {
+    padding: 20px;
+    text-align: left;
+    border: 1px solid #ff9900;
+    
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/css/t8.css

@@ -0,0 +1,73 @@
+/* t8.css - HTML 5 */
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    margin: 0;
+    padding: 80px;
+}
+
+h1, h2, h3 {
+    color: #16a085;
+    text-align: center;
+    margin-bottom: 30px;
+    font-weight: 700;
+}
+
+button {
+    padding: 20px 40px;
+    border: none;
+    background-color: #e74c3c;
+    color: white;
+    cursor: pointer;
+    border-radius: 50px;
+    font-size: 22px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background-color: #ff9900;
+    transform: translateY(-3px);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 20px;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 2px solid #ff9900;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+td, th {
+    padding: 25px;
+    text-align: left;
+    border: 1px solid #ff9900;
+    font-size: 18px;
+}
+
+td {
+    background-color: #ecf0f1;
+}
+
+th {
+    background-color: #ff9900;
+    color: white;
+}
+
+table tr:hover {
+    background-color: #f1f1f1;
+}
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+

INSA/projet-clicodrome/css/t9.css

@@ -0,0 +1,91 @@
+/* t9.css - XHTML 5 */
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: #ffffff;
+    color: #2c3e50;
+    margin: 0;
+    padding: 90px;
+    
+    
+}
+
+h1, h2, h3 {
+    color: #2980b9;
+    text-align: center;
+    font-weight: 800;
+    text-transform: uppercase;
+    margin-bottom: 35px;
+}
+
+button {
+    padding: 25px 50px;
+    border: none;
+    background-color: #e74c3c;
+    color: white;
+    cursor: pointer;
+    border-radius: 40px;
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+    background-color: #ff9900;
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+}
+
+button:active {
+    transform: translateY(2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 25px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+img:hover {
+    transform: scale(1.05);
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 3px solid #ff9900;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+td, th {
+    padding: 30px;
+    text-align: left;
+    border: 1px solid #ff9900;
+    font-size: 20px;
+    letter-spacing: 1px;
+}
+
+td {
+    background-color: #ecf0f1;
+}
+
+th {
+    background-color: #ff9900;
+    color: white;
+    text-transform: uppercase;
+}
+
+table tr:hover {
+    background-color: #b61212;
+}
+
+table.table_magasin{
+    width: 150px;
+    padding: 12px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+}

INSA/projet-clicodrome/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prog Web Legend</title>
+    <script> alert("click")</script>
+    <link rel="stylesheet" href="" id="link-css">
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
+
+</head>
+<body>
+    <script src="./js/intro.js" defer></script>
+    <script src="./js/element.js"></script>
+    <script src="./js/technologie.js"></script>
+    <script src="./js/main.js" defer></script>
+    <script src="./js/alerte.js"></script>
+    <script src="./js/collegue.js"></script>
+    <div id="confetti-container"></div>
+
+    <div id="div_score" style=" display: flex; justify-content: center;">
+
+    </div>
+
+    <div id="div_button" style=" display: flex; justify-content: center;">
+
+        <button id="bouton-prof" onclick="leBoostDuProf()">Le Méga Boost du Prof</button>
+    </div>
+
+    <table id="table_magasin_technologies" class="table_magasin">
+        <thead id="table_magasin_technologies_head">
+
+        </thead>
+
+        <tbody id="table_magasin_technologies_body">
+
+        </tbody>
+    </table>
+
+    <table style="margin-top:10px ;">
+        <thead>
+            <th>nom</th>
+            <th>revenu passif</th>
+            <th>cout</th>
+            <th>lien</th>
+        </thead>
+        <tbody id="table_magasin_collegues_body">
+            
+        </tbody>
+    </table>
+
+
+
+
+
+    <!-- Custom Alert Modal -->
+    <div id="alerte_jolie" class="modal">
+        <div class="modal-content">
+        <span class="close-btn" onclick="fermerAlerte()">&times;</span>
+        <p id="message_alerte_jolie"></p>
+        <button onclick="fermerAlerte()">OK</button>
+        </div>
+    </div>
+    <div class="ad" style="display: none;">
+        
+        <img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
+        <div></div>
+        <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
+    </div>
+
+    <div class="div-centrer-contenu">
+        <img id="image-collegue-animee">
+
+    </div>
+
+</body>
+<footer>
+    <p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
+</footer>
+</html>

INSA/projet-clicodrome/js/alerte.js

@@ -0,0 +1,52 @@
+// prévention de l'empilement d'alertes, qui entrainerait la suppression de tous les messages sauf le dernier
+// Pour cela, on utilise une file et une fonction asynchrone qui boucle et vide la file alerte par alerte
+let file_alertes = []
+
+function ouvrirAlerte(message){
+    file_alertes.push(message)
+
+    // si c'est la seule alerte en attente, on l'affiche
+    if(file_alertes.length == 1 ) {
+        afficherAlerte(file_alertes[0])
+    }
+    // sinon, elle sera automatiquement affichée lors de la fermeture de l'alerte juste avant dans la file
+}
+
+
+// Fonction pour afficher une alerte mais plus jolie que celle par défaut
+function afficherAlerte(message) {
+
+    // on signale une alerte en train d'être visionnée
+    flag = true
+
+
+    // on prend les elements
+    let modal = document.getElementById('alerte_jolie');
+
+    var messageElement = document.getElementById('message_alerte_jolie');
+    
+    // Mettre le message
+    messageElement.textContent = message;
+    
+    // et on affiche en changeant la propriété css
+    modal.style.display = "block";
+}
+
+
+// Fonction pour fermer l'alerte
+function fermerAlerte() {
+
+    var modal = document.getElementById('alerte_jolie');
+    
+    // et on cache en changeant la propriété css
+    modal.style.display = "none";
+
+    // enlève notre élément de la file
+    file_alertes.shift()
+
+    // affiche récursivement les autres alertes en attentes
+    if(file_alertes.length > 0){
+        afficherAlerte(file_alertes[0])
+    }
+
+}

INSA/projet-clicodrome/js/collegue.js

@@ -0,0 +1,10 @@
+class Collegue{
+    constructor(json) {
+        this.props = json
+        this.nom = this.props.nom
+        this.cout = this.props.cout
+        this.boost = this.props.boost
+        this.revenu_passif = this.props.revenu_passif
+    }
+
+}

INSA/projet-clicodrome/js/element.js

@@ -0,0 +1,32 @@
+class Element{
+    constructor(techno,tag) {
+        this.tag = tag
+        this.techno = techno
+    }
+
+    async chargerDepuisBdd(){
+        let data = await fetch("../bdd/arbre.json")
+        data = await data.json()
+
+        this.props = data["technologies"][this.techno]["elements"][this.tag]
+        this.cout = this.props.cout
+        this.nom = this.props.nom
+        this.boost = this.props.boost
+    }
+
+    afficherDropsDansHtml(){
+        const table= document.getElementById("table_technologies_body")
+        
+        const tr = document.createElement("tr")
+        const nom = document.createElement("td")
+        nom.innerText = this.nom
+        const boost = document.createElement("td")
+        boost.innerText = this.boost
+
+        tr.appendChild(nom)
+        tr.appendChild(boost)
+        table.appendChild(tr)
+
+    }
+
+}

INSA/projet-clicodrome/js/intro.js

@@ -0,0 +1,27 @@
+document.addEventListener("click",firstClick)
+
+
+function firstClick(){
+    let position_button=document.getElementById("div_button")
+    let position_score=document.getElementById("div_score")
+
+    const score_aff = document.createElement("output")
+    score_aff.innerText="SCORE"
+    score_aff.id = "score_affichage"
+
+    const click = document.createElement("button")
+    click.innerText="click"
+
+    position_score.appendChild(score_aff)
+    position_button.appendChild(click)
+
+    click.addEventListener("click",scoreCount)
+
+
+    document.removeEventListener("click",firstClick)
+
+    augmenterScorePassivement()
+
+}
+
+

INSA/projet-clicodrome/js/main.js

@@ -0,0 +1,392 @@
+let score = 0
+
+// stoque les ameliorations deja disponibles dans le magasin pour ne pas le faire clignoter
+let magasin_tech = {}
+
+let magasin_coll = {}
+
+// stoquer les ameliorations deja achetees pour ne pas les afficher dans le magasin
+let sacado = {}
+
+// premet de ne pas laisser le joueur acheter html 5 si il n'a pas débloqué html 1.0 etc..
+let evolution_tech = 0
+let evolution_coll = 0
+
+// variable qui permet d'augmenter la taille de l'incrément du score pour chaque clic, en fonction de la technlologie déloquée
+let boost = 1
+
+let revenu_passif = 0
+
+
+
+async function remplirMagasinTechnologies(){
+
+
+    const table= document.getElementById("table_magasin_technologies_body") 
+
+    let data = await fetch("../bdd/arbre.json")
+    data = await data.json() 
+
+
+    let tech = data["technologies"]
+
+    for(const key in tech){
+        // ne va pas s'embeter à proecess si on a deja acheté l'amelioration
+        if(!sacado[key] && !magasin_tech[key]){
+            el = tech[key]
+            
+
+            
+            const tr = document.createElement("tr")
+            const case_nom = document.createElement("td")
+            case_nom.innerText = el.nom
+            const case_boost = document.createElement("td")
+            case_boost.innerText = el.boost
+            const case_cout = document.createElement("td")
+            case_cout.innerText = el.cout
+        
+            const test  = document.createElement("td")
+            const btn_acheter = document.createElement("button")
+                
+    
+            let t = new Technologie(el)
+    
+            /* fonction qui va s'activer lorsqu'on achète l'objet*/
+            btn_acheter.addEventListener("click", (event) =>{
+
+
+                // ne laisse acheter que si on a l'argent
+                if(score >= t.cout){
+
+
+                    // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
+                    evolution_tech += 1
+                    
+                    // on améliore le style de la page :)
+                    t.appliquerAmeliorationStyle()
+                        
+                    // et on ajouter l'amélioration dans l'abre des compétences débloquées
+                    sacado[key] = true
+
+
+
+                    // on refresh le magasin pour enlever l'amelioration de la liste
+                    // vide le ventre du magasin
+                    table.innerHTML = ""
+                    magasin_tech = {}
+                    remplirMagasinTechnologies()
+
+
+                    // finalement, on lui débit son compte de points tel un vendeur de voitures
+                    score -= t.cout
+                    majAffichageScore()
+
+                    // augmentation du boost d'incrément
+                    ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!")
+
+                    if(t.props.evolution == 0){
+                        boost += t.boost -1    // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :)        
+
+                    }else{
+                        boost += t.boost
+                    }
+
+                }else{
+                    // PAS ASSEZ RICHE !!!!!
+                    ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
+                }
+                
+                
+            })
+    
+            btn_acheter.innerText = "Acheter"
+            
+            // n'afficher l'amélioration que si le score est assez élevé
+            if((t.props.borne <= score) && (evolution_tech === parseInt(t.props.evolution))){
+                ouvrirAlerte(tech[key]["narration"])
+                // met à jour le contenu du magasin
+                // pour ne pas re-afficher cette ligne et éviter un clignotement
+                magasin_tech[key] = true
+
+                test.appendChild(btn_acheter)
+    
+    
+                tr.appendChild(case_nom)
+                tr.appendChild(case_boost)
+                tr.appendChild(case_cout)
+                tr.appendChild(test)
+                
+                table.appendChild(tr)
+            }
+        }
+        
+
+    }
+
+}
+
+
+async function remplirMagasinCollegues(){
+
+
+    const table= document.getElementById("table_magasin_collegues_body") 
+
+    let data = await fetch("../bdd/arbre.json")
+    data = await data.json() 
+
+
+    let collegues = data["collegues"]
+
+    for(const key in collegues){
+        // ne va pas s'embeter à proecess si déjà présent dans le magasin
+        // ou si le score d'évolution n'est pas assez élevé
+        const el = collegues[key]
+        if(!magasin_coll[key] && evolution_coll === parseInt(el.evolution)){
+
+            
+
+            const tr = document.createElement("tr")
+            const case_nom = document.createElement("td")
+            case_nom.innerText = el.nom
+            const case_boost = document.createElement("td")
+            case_boost.innerText = el.revenu_passif
+            const case_cout = document.createElement("td")
+            case_cout.innerText = el.cout
+            case_cout.id = "case_cout_"+key
+
+            // case contenant un lien vers la page wikipédia du personnage
+            const case_wiki = document.createElement("td")
+            let a = document.createElement("a")
+            a.href = el.wikipedia
+            a.innerText = el.nom
+            case_wiki.appendChild(a)
+
+        
+            const action  = document.createElement("td")
+            const btn_acheter = document.createElement("button")
+            
+    
+            let c = new Collegue(el)
+
+    
+            /* fonction qui va s'activer lorsqu'on achète l'objet*/
+            btn_acheter.addEventListener("click", (event) =>{
+                
+                // calcul du cout en fonction du nombre de collegue de ce type déjà acheté
+                let exp = 0
+                if(key in sacado){
+                    exp = sacado[key]
+                }
+                const cout_reel = Number(el.cout * (1.1)**exp).toFixed(1)
+                
+                // ne laisse acheter que si on a l'argent
+                if(score >= cout_reel){
+                
+
+                    if(!(key in sacado)){
+
+                        //lancer l'animation d'achat avec l'image correspondante
+                        let image = document.getElementById("image-collegue-animee")
+                        image.setAttribute("src",c.props.nom_fichier_image)
+                        // affiche l'image
+                        image.removeAttribute("hidden")
+
+                        // PLUIE DE CONFETTTIIII
+                        genererConfetti()
+
+
+                        // recache l'image après 6 secondes et lance la narration
+                        setTimeout(() => {
+                            image.setAttribute("hidden",true)
+
+                            // narration comme c'est la première fois qu'on achète
+
+                            ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
+                            ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!")
+                            
+                        }, (4000));
+
+                        // on ajoute l'amélioration dans l'abre des compétences débloquées
+                        sacado[key] = 1   
+
+                        // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
+                        evolution_coll += 1
+                    
+                    }else{
+                        // on incrémente la qtt d'objet dans son sacado
+                        sacado[key] += 1
+                    }
+
+                    // augmentation du boost d'incrément
+                    revenu_passif += c.revenu_passif
+
+                    // finalement, on lui débit son compte de points tel un vendeur de voitures
+                    console.log(cout_reel)
+                    console.log(score)
+                    console.log(score-cout_reel)
+                    score = score - cout_reel
+                    majAffichageScore()
+
+                    // on change le futur cout dans le tableau
+                    document.getElementById("case_cout_"+key).innerText = Number(c.cout * (1.1)**sacado[key]).toFixed(1)
+
+
+                }else{
+                    // PAS ASSEZ RICHE !!!!!
+                    ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
+                }
+                
+                
+            })
+    
+            btn_acheter.innerText = "Acheter"
+            
+            // met à jour le contenu du magasin
+            // pour ne pas re-afficher cette ligne et éviter un clignotement
+            magasin_coll[key] = true
+
+            action.appendChild(btn_acheter)
+
+
+            tr.appendChild(case_nom)
+            tr.appendChild(case_boost)
+            tr.appendChild(case_cout)
+            tr.appendChild(case_wiki)
+            tr.appendChild(action)
+            
+            table.appendChild(tr)
+            
+        }
+        
+
+    }
+
+}
+
+function majAffichageScore(){
+    const score_aff = document.getElementById("score_affichage")
+    score = Number((score).toFixed(1))
+    score_aff.textContent ="SCORE  : " + rendreNombreLisible(score)
+
+}
+
+// fonction appelée à chaque clic de souris
+function scoreCount(){
+    score += boost
+    majAffichageScore()
+    // check refresh la table magasin pour afficher une amélioration si un palier est atteint
+    remplirMagasinTechnologies()
+    remplirMagasinCollegues()
+}
+
+// revenu passif à chaque seconde
+
+function augmenterScorePassivement(){
+    score += revenu_passif
+    majAffichageScore()
+    setTimeout(() => {
+        augmenterScorePassivement()
+    }, 1000)    
+}
+
+function leBoostDuProf(){
+    score += 10000000000000000
+    majAffichageScore()
+}
+
+
+// fonction qui va creer plein d'elements confetti
+function genererConfetti() {
+
+    const container = document.getElementById("confetti-container")
+
+    // couleurs des confetti à generer
+    const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFD633", "#A833FF", "#33FFF6"]
+    
+    const nb_confetti = 150 // nombre de confettis
+
+    for (let i = 0; i < nb_confetti; i++) {
+
+        //créer un nouvel element de classe confetti
+        const confetti = document.createElement("div")
+        confetti.classList.add("confetti")
+
+        //prendre une couleur aléatoire dans la liste
+        confetti.style.setProperty("background-color", colors[Math.floor(Math.random() * colors.length)])
+        
+        // positionner le confetti à un endroit random horizontalement
+        confetti.style.left = Math.random() * 100 + "vw"
+
+        // mettre une fraction de 5s pour faire un temps à l'écran assez naturel
+        const longevite = Math.random() * 5
+        confetti.style.animationDelay = longevite+"s"
+
+        // faire des confettis qui vont plus vite que d'autres
+        confetti.style.animationDuration = 4 + Math.random() * 2 + "s" 
+
+        // ajouter le confetti au container
+        container.appendChild(confetti)
+
+    }
+
+    setTimeout(() => {
+        // vide le conteneur à la fin pour ne pas surcharger la page d'elements
+        container.innerHTML = ""
+    }, 10000);
+
+}
+
+
+function rendreNombreLisible(n){
+    let ret = n
+
+    if(n>=1000){
+        const quantifiers = [
+            "Millier",         // 10^3
+            "Million",         // 10^6
+            "Milliard",        // 10^9
+            "Billion",         // 10^12
+            "Billiard",        // 10^15
+            "Trillion",        // 10^18
+            "Trilliard",       // 10^21
+            "Quadrillion",     // 10^24
+            "Quadrilliard",    // 10^27
+            "Quintillion",     // 10^30
+            "Quintilliard",    // 10^33
+            "Sextillion",      // 10^36
+            "Sextilliard",     // 10^39
+            "Septillion",      // 10^42
+            "Septilliard",     // 10^45
+            "Octillion",       // 10^48
+            "Octilliard",      // 10^51
+            "Nonillion",       // 10^54
+            "Nonilliard",      // 10^57
+            "Décillion",       // 10^60
+            "Décilliard",      // 10^63
+            "Undécillion",     // 10^66
+        ];
+        // on enlève la virgule et la partie decimal pour ne pas 
+        // fausser la longueur du string
+        const rpz_string = Number(n).toFixed(0)+"" 
+        // les qualificatifs étant par puissance de mille,
+        // compte la puissance de 10 mais divisée par 3
+        const puiss_mil = Math.floor((rpz_string.length-1)/3)
+
+        // ici, on ne garde que jusqu'à la centaine de l'unité choisie
+        // et on le met dans la variable de retour
+        ret = Math.floor( n/(10**(3*puiss_mil)) )
+
+        // enfin, on rajoute le quantificateur, avec un 's' si on est pas à l'unité
+        let q = " "+ quantifiers[puiss_mil -1]
+        if(ret != 1){
+            q +='s'
+        }
+
+        ret += q
+
+    }
+
+    return ret
+    
+
+}

INSA/projet-clicodrome/js/technologie.js

@@ -0,0 +1,15 @@
+class Technologie{
+    constructor(json) {
+        this.props = json
+        this.cout = this.props.cout
+        this.boost = this.props.boost
+        this.nom = this.props.nom
+    }
+
+    appliquerAmeliorationStyle(){
+        document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css")
+        document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id)
+    }
+
+
+}

INSA/projet-clicodrome/lisezmoi.md

@@ -0,0 +1,49 @@
+# Projet de prog web
+
+- A simple cookie clicker
+- but every power up is on a technologic tree of web
+- the interface becomes more and more fancy
+- you can unlock AI, coworkers, html elements ....
+
+## Element properties 
+- each element has its own passive or active boost
+- each element has a cost
+
+## coworkers properties
+- each coworker bring its own passive income per second
+- the coworker are:
+Ada Lovelace
+George Boole
+Grace Hopper
+Jean Bartik
+Claude Shannon
+Alan Turing
+Margaret Hamilton
+Tim Berners-Lee
+Dennis Ritchie
+Linus Torvald
+
+## Technologie properties
+- each technologies give a boost like double the gain per click.
+- the technologies are:
+HTML
+HTML+
+HTML 2.0
+HTML 3.2
+HTML 4.01
+XHTML 4.01
+XHTML 1.0
+HTML 5
+XHTML5
+
+## TOUDOU
+- rajouter dans le html des elements invisibles qui pop petit à petit et s'améliorent
+- mettre des animations quand le score change de milier ( feu d'artifice ?)
+- vidéos
+- ne faire apparaitre les header du tableau qu'au premier clic
+- faire une fonction qui en fonction de la puissance de 10 troncature le nb et met "milions", "quintilions"...
+- mettre un palier où des photos aparaissent à coté de chaque collegue dans le magasin
+
+## Idée de con
+- Quand on débloque la balise vidéo , on rick roll le prof
+- Quand on débloque la sécurité , on a un capchat (on met juste une grosse image de chat) qui apparait 

INSA/test.py

@@ -0,0 +1 @@
+print("hello world")