bstocker · Nikaaaaaaaa · Dec 3, 2024 · Dec 3, 2024 · Jan 14, 2025 · Jan 14, 2025
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 ------------------------------------------------------------------------------------------------------
-PROJET API CryptoPython
+PROJET API CryptoPython  
 ------------------------------------------------------------------------------------------------------
 Quelles sont les notions qui vont être abordées au cours de cet atelier CryptoPython ?
 Cet atelier a pour objectif de vous apprendre à créer un système de cryptographie d'information grace à Python et sa bibliothèque Cryptography. Vous allez ensuite exploiter cette solution via la construction d'API sous le Framework Flask. Vous allez donc créer des API (des routes) mais également découvrir les Actions et les Secrets GitHUB pour au final mettre en service et exploiter une solution Web de Cryptographie. Large programme mais tout à fait accessible et ne nécessitant pas de base technique particulière. Juste de l'observation et de la rigueur dans votre travail.

diff --git a/__init__.py b/__init__.py
@@ -9,7 +9,19 @@
 
 @app.route('/')
 def hello_world():
-    return render_template('hello.html')
+    return render_template('')
+
+@app.route('/de_6_faces.html')
+def de6f():
+    return render_template('De_6_Faces.html')
+
+@app.route('/bibliotheque_images.html')
+def bbtimg():
+    return render_template('bibliotheque_images.html')
+
+@app.route('/roulette_russe')
+def rrusse():
+    return render_template('rouletterusse.html')
 
 key = Fernet.generate_key()
 f = Fernet(key)

diff --git a/static/images/geda.jpg b/static/images/geda.jpg
diff --git a/static/images/jlr.jpg b/static/images/jlr.jpg
diff --git a/static/images/tyler_mugshot.jpg b/static/images/tyler_mugshot.jpg
diff --git a/templates/De_6_Faces.html b/templates/De_6_Faces.html
@@ -0,0 +1,66 @@
+<html>
+  <head>
+    <script>
+      function lancer() {
+        // Générer une valeur aléatoire entre 1 et 6
+        var Val = Math.floor(Math.random() * 6) + 1;
+
+        // Cacher tous les cercles
+        for (let i = 1; i <= 7; i++) {
+          const cercle = document.getElementById("C" + i);
+          if (cercle) cercle.style.display = "none";
+        }
+
+        // Afficher les cercles correspondant à la face
+        switch (Val) {
+          case 1:
+            document.getElementById("C4").style.display = "block";
+            break;
+          case 2:
+            document.getElementById("C1").style.display = "block";
+            document.getElementById("C7").style.display = "block";
+            break;
+          case 3:
+            document.getElementById("C1").style.display = "block";
+            document.getElementById("C4").style.display = "block";
+            document.getElementById("C7").style.display = "block";
+            break;
+          case 4:
+            document.getElementById("C1").style.display = "block";
+            document.getElementById("C3").style.display = "block";
+            document.getElementById("C5").style.display = "block";
+            document.getElementById("C7").style.display = "block";
+            break;
+          case 5:
+            document.getElementById("C1").style.display = "block";
+            document.getElementById("C3").style.display = "block";
+            document.getElementById("C4").style.display = "block";
+            document.getElementById("C5").style.display = "block";
+            document.getElementById("C7").style.display = "block";
+            break;
+          case 6:
+            document.getElementById("C1").style.display = "block";
+            document.getElementById("C2").style.display = "block";
+            document.getElementById("C3").style.display = "block";
+            document.getElementById("C5").style.display = "block";
+            document.getElementById("C6").style.display = "block";
+            document.getElementById("C7").style.display = "block";
+            break;
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <button onclick="lancer()">Lancer</button>
+    <svg width="300px" height="300px" style="background-color: lightgray">
+      <!-- Cercles représentant les faces du dé -->
+      <circle id="C1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C2" cx="50" cy="150" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C3" cx="50" cy="250" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C4" cx="150" cy="150" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C5" cx="250" cy="50" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C6" cx="250" cy="150" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+      <circle id="C7" cx="250" cy="250" r="40" stroke="black" stroke-width="3" fill="red" style="display: none" />
+    </svg>
+  </body>
+</html>
diff --git a/templates/bibliotheque_images.html b/templates/bibliotheque_images.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bibliothèque d'images</title>
+    <!-- Lien vers Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script>
+        function afficherImage(checkboxId, imageId) {
+            const checkbox = document.getElementById(checkboxId);
+            const image = document.getElementById(imageId);
+            if (checkbox.checked) {
+                image.style.display = "block";
+            } else {
+                image.style.display = "none";
+            }
+        }
+
+        function toutAfficher() {
+            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
+            document.querySelectorAll('img').forEach(image => image.style.display = "block");
+        }
+
+        function toutCacher() {
+            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
+            document.querySelectorAll('img').forEach(image => image.style.display = "none");
+        }
+    </script>
+    <style>
+        body {
+            background-color: #f8f9fa;
+            padding: 20px;
+        }
+        .card {
+            margin: 15px;
+            text-align: center;
+        }
+        img {
+            display: none;
+            max-width: 100%;
+            border-radius: 10px;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="text-center text-primary mb-4">Bibliothèque d'images</h1>
+        <hr>
+        <h2 class="text-secondary">Choisissez des images à afficher</h2>
+        <div class="d-flex justify-content-center my-3">
+            <button class="btn btn-success me-2" onclick="toutAfficher()">Tout afficher</button>
+            <button class="btn btn-danger" onclick="toutCacher()">Tout cacher</button>
+        </div>
+        <div class="row">
+            <!-- Image 1 -->
+            <div class="col-md-4">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <input type="checkbox" id="checkbox1" onclick="afficherImage('checkbox1', 'image1')">
+                        <label for="checkbox1">Geda</label>
+                        <img id="image1" src="/static/images/geda.jpg" alt="Image de Geda">
+                    </div>
+                </div>
+            </div>
+            <!-- Image 2 -->
+            <div class="col-md-4">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <input type="checkbox" id="checkbox2" onclick="afficherImage('checkbox2', 'image2')">
+                        <label for="checkbox2">Jean-Luc Reichmann</label>
+                        <img id="image2" src="/static/images/jlr.jpg" alt="Image de Jean-Luc Reichmann">
+                    </div>
+                </div>
+            </div>
+            <!-- Image 3 -->
+            <div class="col-md-4">
+                <div class="card shadow-sm">
+                    <div class="card-body">
+                        <input type="checkbox" id="checkbox3" onclick="afficherImage('checkbox3', 'image3')">
+                        <label for="checkbox3">Tyler Mugshot</label>
+                        <img id="image3" src="/static/images/tyler_mugshot.jpg" alt="Image de Tyler">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Script Bootstrap -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/templates/chenille.html b/templates/chenille.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<title>La chenille qui vous forme</title>
+<html>
+<head>
+</head>
+
+<body>
+<svg width="700" height="500" style="background-color:rgba(255,255,255, 1)">
+
+  <!-- Corps de la chenille -->
+  <circle cx="100" cy="200" r="50" style="fill:cyan; stroke:black; stroke-width:2px;" />
+  <circle cx="200" cy="200" r="50" style="fill:lightblue; stroke:black; stroke-width:2px;" />
+  <circle cx="300" cy="200" r="50" style="fill:orange; stroke:black; stroke-width:2px;" />
+  <circle cx="400" cy="200" r="50" style="fill:magenta; stroke:black; stroke-width:2px;" />
+  <circle cx="500" cy="200" r="50" style="fill:yellowgreen; stroke:black; stroke-width:2px;" />
+  <circle cx="150" cy="300" r="50" style="fill:lightgreen; stroke:black; stroke-width:2px;" />
+  <circle cx="250" cy="300" r="50" style="fill:peachpuff; stroke:black; stroke-width:2px;" />
+  <circle cx="350" cy="300" r="50" style="fill:lightgrey; stroke:black; stroke-width:2px;" />
+
+  <!-- Tête -->
+  <circle cx="100" cy="100" r="60" style="fill:cyan; stroke:black; stroke-width:2px;" />
+
+  <!-- Yeux -->
+  <circle cx="80" cy="80" r="10" style="fill:white; stroke:black; stroke-width:2px;" />
+  <circle cx="120" cy="80" r="10" style="fill:white; stroke:black; stroke-width:2px;" />
+  <circle cx="80" cy="80" r="5" style="fill:black;" />
+  <circle cx="120" cy="80" r="5" style="fill:black;" />
+
+  <!-- Sourire -->
+  <path d="M75 100 Q100 130 125 100" style="fill:none; stroke:black; stroke-width:3px;" />
+
+  <!-- Nez -->
+  <circle cx="100" cy="100" r="5" style="fill:white;" />
+
+  <!-- Antennes -->
+  <line x1="80" y1="40" x2="70" y2="10" style="stroke:black; stroke-width:2px;" />
+  <line x1="120" y1="40" x2="130" y2="10" style="stroke:black; stroke-width:2px;" />
+  <circle cx="70" cy="10" r="5" style="fill:black;" />
+  <circle cx="130" cy="10" r="5" style="fill:black;" />
+
+  <!-- Pattes -->
+  <ellipse cx="140" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="160" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="240" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="260" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="340" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="360" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="440" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+  <ellipse cx="460" cy="250" rx="10" ry="5" style="fill:white; stroke:black; stroke-width:1px;" />
+
+  <!-- Texte -->
+  <text x="200" y="400" font-size="24" font-family="Arial" fill="black">La chenille qui vous forme</text>
+
+</svg>
+</body>
+</html>
diff --git a/templates/hello.html b/templates/hello.html
@@ -1,3 +1,17 @@
 <!doctype html>
 <title>CryptoPython</title>
-<h1>Bienvue dans votre atelier CryptoPython !</h1>
+<html>
+<head>
+
+</head>
+
+<body>
+
+<svg width="750" height="750" style="background-color:rgba(200,200,200, 0.5)">
+<circle id="foo" style="fill:none; stroke:red; stroke-width:30px;" cx="375" cy="375" r="200" />
+<rect style="fill:green; stroke:blue; stroke-width:30px;" x="230" y="300" width="290" height="150" />
+<polygon style="fill:green; stroke:blue; stroke-width:3px;" points="0 0, 100 100, 0 100"/>
+</svg>
+
+</body>
+</html>
diff --git a/templates/jack.html b/templates/jack.html
diff --git a/templates/maison.html b/templates/maison.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<title>Maison</title>
+<html>
+<head>
+</head>
+
+<body>
+<svg width="500" height="500" style="background-color:rgba(200,200,200, 0.5)">
+
+  <!-- Le corps de la maison -->
+  <rect x="100" y="200" width="300" height="200" style="fill:yellow; stroke:black; stroke-width:2px;" />
+
+  <!-- Le toit -->
+  <polygon points="100,200 250,100 400,200" style="fill:red; stroke:black; stroke-width:2px;" />
+
+  <!-- La porte -->
+  <rect x="200" y="300" width="50" height="100" style="fill:orange; stroke:black; stroke-width:2px;" />
+
+  <!-- Fenêtre gauche -->
+  <rect x="130" y="230" width="50" height="50" style="fill:white; stroke:black; stroke-width:2px;" />
+  <line x1="130" y1="255" x2="180" y2="255" style="stroke:black; stroke-width:2px;" />
+  <line x1="155" y1="230" x2="155" y2="280" style="stroke:black; stroke-width:2px;" />
+
+  <!-- Fenêtre ronde (au grenier) -->
+  <circle cx="250" cy="180" r="20" style="fill:white; stroke:black; stroke-width:2px;" />
+
+  <!-- Soleil -->
+  <circle cx="450" cy="50" r="30" style="fill:yellow;" />
+  <line x1="450" y1="10" x2="450" y2="40" style="stroke:yellow; stroke-width:2px;" />
+  <line x1="450" y1="60" x2="450" y2="90" style="stroke:yellow; stroke-width:2px;" />
+  <line x1="410" y1="50" x2="440" y2="50" style="stroke:yellow; stroke-width:2px;" />
+  <line x1="460" y1="50" x2="490" y2="50" style="stroke:yellow; stroke-width:2px;" />
+  <line x1="430" y1="30" x2="470" y2="70" style="stroke:yellow; stroke-width:2px;" />
+  <line x1="430" y1="70" x2="470" y2="30" style="stroke:yellow; stroke-width:2px;" />
+
+  <!-- Buissons -->
+  <circle cx="80" cy="370" r="30" style="fill:green;" />
+  <circle cx="110" cy="390" r="40" style="fill:green;" />
+  <circle cx="60" cy="400" r="35" style="fill:green;" />
+
+  <circle cx="410" cy="390" r="30" style="fill:green;" />
+  <circle cx="440" cy="410" r="40" style="fill:green;" />
+  <circle cx="400" cy="420" r="35" style="fill:green;" />
+
+  <!-- Nuages -->
+  <ellipse cx="150" cy="50" rx="40" ry="20" style="fill:white;" />
+  <ellipse cx="180" cy="50" rx="50" ry="25" style="fill:white;" />
+  <ellipse cx="210" cy="50" rx="40" ry="20" style="fill:white;" />
+
+  <ellipse cx="300" cy="100" rx="50" ry="25" style="fill:white;" />
+  <ellipse cx="340" cy="100" rx="60" ry="30" style="fill:white;" />
+  <ellipse cx="380" cy="100" rx="50" ry="25" style="fill:white;" />
+
+</svg>
+</body>
+</html>