antux18
/
ChasseTresorPange
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Correction structure HTML + CSS. 

Ajout fichier manquant qr-scanner.
This commit is contained in:
antux18 2023-09-03 15:34:28 -04:00
parent 08d132d660
commit 03fb59404e
9 changed files with 46 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
article.php
View File

@ -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>

4
index.php
View File

@ -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>

7
puzzles.php
View File

@ -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>

1
require/js/qr-scanner/qr-scanner.min.js.map Normal file
View File

File diff suppressed because one or more lines are too long

2
require/js/qrscan.js
View File

@ -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 =>
{

3
require/locales/en.php
View File

@ -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",

3
require/locales/fr.php
View File

@ -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",

183
style.css
View File

@ -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;
}

6
team_confirm.php
View File

@ -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>