Correction structure HTML + CSS.

Ajout fichier manquant qr-scanner.

article.php

@@ -72,25 +72,28 @@
         <main>
             <header>
                 <h1><?= $tr["page_title"]["article"] . $art_id . " : " . $article["title"] ?></h1>
-                <p><?= $article["text"] ?></p>
-            </header>
-            <article>
-                <div>
+                <h2><?= $article["text"] ?></h2>
+                <section>
                     <a href="puzzles.php?team=<?= $team_id ?>">
                         <button><?= $tr["article"]["back_but"] ?></button>
                     </a>
                     <a href="article.php?team=<?= $team_id ?>&id=<?= ($art_id % $max_art) + 1 ?>">
                         <button><?= $tr["article"]["next_but"] ?></button>
                     </a>
-                </div>
+                </section>
                 <?php if ($solved) : ?>
                     <p><?= $tr["article"]["success"] ?></p>
+                <?php else : ?>
+                    <p><?= $tr["article"]["message"] ?></p>
+                <?php endif; ?>
+            </header>
+            <article>
+                <?php if ($solved) : ?>
                     <p><?= $article["answer"] ?></p>
                     <img src="images/map/puzzles/<?= $article["id"] ?>.png"/>
                 <?php else : ?>
-                    <p><?= $tr["article"]["message"] ?></p>
-                    <p></p> <!-- Emplacement du message d'erreur JS concernant la caméra. !-->
                     <button><?= $tr["article"]["qr_but"] ?></button>
+                    <p></p> <!-- Emplacement du message d'erreur JS concernant la caméra. !-->
                     <video></video>
                     <p><?= $tr["article"]["cam_sel"] ?></p>
                     <select>

index.php

@@ -44,10 +44,10 @@
         <main>
             <header>
                 <h1><?= $tr["page_title"]["home"]?></h1>
-                <p><?= $tr["home"]["subtitle"]?></p>
-                <p><?= $tr["home"]["message"]?></p>
+                <h2><?= $tr["home"]["subtitle"]?></h2>
             </header>
             <article>
+                <p><?= $tr["home"]["message"]?></p>
                 <form action="team_confirm.php" method="get">
                     <input type="number" name="team" placeholder="<?= $tr['home']['team'] ?>">
                     <button type="submit"><?= $tr["home"]["button"] ?></button>

puzzles.php

@@ -74,15 +74,18 @@
         <main>
             <header>
                 <h1><?= $tr["page_title"]["puzzles"] . $team_id ?></h1>
-                <p></p>
-                <p><?= $tr["puzzles"]["message"]?></p>
             </header>
             <article>
+                <p><?= $tr["puzzles"]["message"]?></p>
                 <ul>
                     <?php foreach ($puzzles as $puzzle) : ?>
                         <li><a href="article.php?team=<?= $team_id ?>&id=<?= $puzzle["id"] ?>"><?= $tr["page_title"]["article"] . $puzzle["id"] . " : " . $puzzle["title"] ?></a></li>
                     <?php endforeach; ?>
                 </ul>
+                <p><?= $tr["puzzles"]["map_desc"] ?></p>
+                <canvas width="2199px" height="2459px">
+                    <img src="images/map/base_map.png" alt="Puzzles map">
+                </canvas>
             </article>
         </main>
         <footer>

require/js/qrscan.js

@@ -63,7 +63,7 @@ camList.addEventListener("change", event => {
 });
 
 // Démarrage du scan :
-document.querySelector("p + button").addEventListener("click", () => {
+document.querySelector("article button").addEventListener("click", () => {
     scanner.start().then(() => {
         QrScanner.listCameras(true).then(cameras => cameras.forEach(camera =>
             {

require/locales/en.php

@@ -34,7 +34,8 @@
             "r_cam" => "Rear camera"
         ],
         "puzzles" => [
-            "message" => "Select a puzzle in the list below :"
+            "message" => "Select a puzzle in the list below :",
+            "map_desc" => "Here is a map showing the location of the puzzles you already solved :"
         ],
         "nav" => [
             "title" => "Code Hunt Pange",

require/locales/fr.php

@@ -34,7 +34,8 @@
             "r_cam" => "Caméra arrière"
         ],
         "puzzles" => [
-            "message" => "Choisissez une énigme dans la liste ci-dessous :"
+            "message" => "Choisissez une énigme dans la liste ci-dessous :",
+            "map_desc" => "Voici la carte des emplacements des énigmes que vous avez résolues :"
         ],
         "nav" => [
             "title" => "Chasse au code Pange",

style.css

@@ -17,12 +17,14 @@ body {
 
 h1, h2, h3, h4 {
     font-weight: lighter;
-    border-left: solid;
-    border-width: 5px;
-    padding-left: 5px;
-    padding-right: 5px;
-    display: inline-block;
-    border-color: var(--hl);
+}
+
+h1 {
+    font-size: 36px;
+}
+
+h2 {
+    font-size: 20px;
 }
 
 p {
@@ -34,26 +36,12 @@ a {
     color: var(--hl);
 }
 
-dt {
-    font-weight: bold;
-    font-size: 90%;
-    border-bottom-style: solid;
-    border-bottom-width: 2px;
-    border-bottom-color: var(--bg-light);
-    padding: 10px;
-}
-
 form {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }
 
-form p {
-    text-align: center;
-    font-weight: bold;
-}
-
 input {
     background: var(--bg-dark);
 }
@@ -66,31 +54,15 @@ input[type="submit"], button {
     border-radius: 10px;
     transition: background 0.1s;
     color: var(--fg);
-    text-decoration: none;
-    width: fit-content;
     align-self: center;
 }
 
 input[type="submit"]:hover, button:hover {
     background: var(--hl-light);
-    color: var(--fg);
 }
 
-button a {
-    color: var(--fg);
-}
-
-input[type="time"], input[type="date"] {
-    font-family: "Ubuntu", sans-serif;
-    background: var(--bg-dark);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--bg);
-    padding: 20px;
-    border-radius: 10px;
-    transition: background 0.1s;
-    margin: 10px;
-    color: var(--fg);
+article a {
+    align-self: center;
 }
 
 input[type="text"], input[type="email"], input[type="number"], textarea {
@@ -105,40 +77,7 @@ input[type="text"], input[type="email"], input[type="number"], textarea {
     color: var(--fg);
 }
 
-input[type="checkbox"] {
-    display: none;
-    width: 0px;
-    height: 0px;
-}
-
-input[type=checkbox]:checked ~ .remove-check {
-    display: none;
-}
-
-input[type="checkbox"] + label {
-    background: var(--bg-light);
-    transition: background 0.1s;
-    display: inline-block;
-    width: 200px;
-    height: 80px;
-    padding: 10px;
-    margin: 10px;
-    text-align: center;
-    border-radius: 15px;
-    box-shadow: 5px 5px black;
-}
-
-input[type="checkbox"]:hover + label {
-    background: var(--bg-dark);
-}
-
-input[type="checkbox"]:checked + label {
-    background: var(--hl);
-}
-
 header {
-    display: inline-block;
-    font-size: 150%;
     width: 100%;
     font-weight: lighter;
     text-align: center;
@@ -173,17 +112,12 @@ header a {
 }
 
 header a:hover {
-    color: var(--bg);
+    color: var(--hl);
 }
 
-header > h1 {
-    font-size: 150%;
-    border: none;
-}
-
-header > p:first-of-type {
-    font-size: 20px !important;
+header p:first-of-type {
     text-align: center;
+    font-weight: bold;
 }
 
 main {
@@ -196,96 +130,26 @@ main {
     gap: 20px;
 }
 
-main table {
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--bg-dark);
-    border-radius: 10px;
-    background-color: var(--bg-dark);
-}
-
-main table td {
-    padding: 10px;
-    padding-left: 20px;
-    padding-right: 20px;
-    border-bottom: 2px solid var(--bg);
-}
-
-main table tr:last-of-type td {
-    border: none;
-}
-
-main table td p:first-of-type {
-    font-weight: bold;
-}
-
-main p {
-    font-size: 16px;
-}
-
-main nav {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    /* grid-template-columns: repeat(3, 1fr); */
-    gap: 15px;
-}
-
 main img {
     align-self: center;
 }
 
-main article p {
-    line-height: 2.2;
-}
-
-main > article {
-    /* display: flex;
-    flex-direction: row; */
+main article {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }
 
-main > article img {
+main article img {
     max-width: 100%;
     max-height: 600px;
 }
 
-main > article div {
+main header section {
     display: flex;
     flex-direction: row;
-    align-self: center;
-    gap: 15px;
-}
-
-nav article {
-    background-color: var(--bg-dark);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--bg-dark);
-    padding: 20px;
-    border-radius: 10px;
-}
-
-nav article img {
-    max-width: 100%;
-    max-height: 200px;
-}
-
-nav article footer {
-    border: none;
-}
-
-section article {
-    display: flex;
-    flex-wrap: wrap;
     justify-content: center;
-}
-
-article p:first-of-type {
-    text-align: center;
-    font-weight: bold;
+    gap: 15px;
 }
 
 footer {
@@ -296,7 +160,7 @@ footer {
     text-align: center;
 }
 
-footer > p {
+footer p {
     text-align: center;
     font-size: smaller;
 }
@@ -315,20 +179,13 @@ video {
         padding: 25px;
     }
 
-    main nav {
-        width: 100%;
-        display: grid;
-        grid-template-columns: auto;
-        gap: 15px;
-    }
-
-    main > article {
+    main article {
         display: flex;
         flex-direction: column;
         gap: 15px;
     }
 
-    main > article div {
+    main header section {
         flex-direction: row;
     }
 

team_confirm.php

@@ -46,7 +46,9 @@
         <main>
             <header>
                 <h1><?= $tr["page_title"]["team_confirm"] ?></h1>
-                <p><?= $tr["team_confirm"]["subtitle"] ?></p>
+                <h2><?= $tr["team_confirm"]["subtitle"] ?></h2>
+            </header>
+            <article>
                 <p>
                     <?= $tr["team_confirm"]["message"] ?>
                     <?php foreach ($members as $member) : ?>
@@ -56,8 +58,6 @@
                 <a href="puzzles.php?team=<?= $team_id ?>">
                     <button><?= $tr["team_confirm"]["button"] ?></button>
                 </a>
-            </header>
-            <article>
             </article>
         </main>
         <footer>