gaugendre/potain
1
0
Fork 0
Code Issues Pull requests Releases Activity

Add some style

Browse source
This commit is contained in:
Gabriel Augendre 2021-06-05 08:13:41 +02:00
parent 54b2e8ec8c
commit 8bf67e12bc
5 changed files with 141 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -6,16 +6,20 @@
<link rel="stylesheet" href="jeux/assets/style.css"> <link rel="stylesheet" href="jeux/assets/style.css">
</head> </head>
<body> <body>
<h1>Potain de chantier #3</h1> <header>
<h2>Jeux interactifs</h2> <h1>Potain de chantier #3</h1>
<p> </header>
<main>
<h2>Jeux interactifs</h2>
<p>
Découvrez les magnifiques moquettes du Cecolyon avec notre série de jeux interactifs ! Découvrez les magnifiques moquettes du Cecolyon avec notre série de jeux interactifs !
</p> </p>
<ul> <ul>
<li><a href="jeux/signal.html">Signal</a></li> <li><a href="jeux/signal.html">Signal</a></li>
<li><a href="jeux/camel.html">Camel</a></li> <li><a href="jeux/camel.html">Camel</a></li>
<li><a href="jeux/nature.html">Urbain Nature</a></li> <li><a href="jeux/nature.html">Urbain Nature</a></li>
</ul> </ul>
</main>
<footer> <footer>
<p> <p>
Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>. Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.

37
jeux/assets/style.css
View file

@ -1,3 +1,22 @@
html {
height:100%;
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
body {
max-width: 1600px;
margin: 0 auto;
padding: 0 20px;
height:100%;
font-family: Arial, sans-serif;
display: grid;
grid-template-rows: auto 1fr auto;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -9,3 +28,21 @@
.success { .success {
color: green; color: green;
} }
h2 {
margin-top: 0;
}
header h1 {
text-align: center;
}
a {
color: rgb(40,53,131);
}
header {
background-color: rgb(40,53,131);
color: white;
margin-bottom: 20px;
}

40
jeux/camel.html
View file

@ -6,16 +6,19 @@
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">
</head> </head>
<body> <body>
<h1>Camel</h1> <header>
<nav><a href="..">&laquo; Retour</a></nav> <h1>Camel</h1>
<p> </header>
<main>
<nav><a href="..">&laquo; Retour</a></nav>
<p>
Jouons donc au jeu des 7 différences avec GSE France ! Jouons donc au jeu des 7 différences avec GSE France !
</p> </p>
<p class="side-by-side"> <p class="side-by-side">
<img src="images/camel-2.jpg" width="548" height="619" alt="Moquette" usemap="#map"> <img src="images/camel-2.jpg" width="548" height="619" alt="Moquette" usemap="#map">
<img src="images/camel.jpg" width="548" height="619" alt="Moquette" usemap="#map"> <img src="images/camel.jpg" width="548" height="619" alt="Moquette" usemap="#map">
</p> </p>
<map id="map" name="map"> <map id="map" name="map">
<area shape="rect" coords="180,65,226,97" onclick="zone('Chocolat')"> <area shape="rect" coords="180,65,226,97" onclick="zone('Chocolat')">
<area shape="circle" coords="101,439,25" onclick="zone('Logo Citroën')"> <area shape="circle" coords="101,439,25" onclick="zone('Logo Citroën')">
<area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')"> <area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')">
@ -23,26 +26,27 @@
<area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')"> <area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')">
<area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')"> <area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')">
<area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')"> <area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')">
</map> </map>
<p> <p>
Couleurs non contractuelles. Couleurs non contractuelles.
</p> </p>
<p> <p>
Score: <span id="counter">0</span>/7<br> Score: <span id="counter">0</span>/7<br>
Vous avez déjà trouvé : Vous avez déjà trouvé :
</p> </p>
<ol id="found"></ol> <ol id="found"></ol>
<p class="failure hidden"></p> <p class="failure hidden"></p>
<p class="success hidden"> <p class="success hidden">
Félicitations ! Vous avez trouvé toutes les différences ! 🎉 Félicitations ! Vous avez trouvé toutes les différences ! 🎉
(ou bien vous avez frénétiquement cliqué de partout) (ou bien vous avez frénétiquement cliqué de partout)
</p> </p>
<script src="assets/jeu.js" type="application/javascript"></script> </main>
<script src="assets/camel.js" type="application/javascript"></script>
<footer> <footer>
<p> <p>
Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>. Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
</p> </p>
</footer> </footer>
<script src="assets/jeu.js" type="application/javascript"></script>
<script src="assets/camel.js" type="application/javascript"></script>
</body> </body>
</html> </html>

26
jeux/nature.html
View file

@ -7,27 +7,31 @@
<link rel="stylesheet" href="assets/nature.css"> <link rel="stylesheet" href="assets/nature.css">
</head> </head>
<body> <body>
<h1>Urbain Nature</h1> <header>
<nav><a href="..">&laquo; Retour</a></nav> <h1>Urbain Nature</h1>
<p> </header>
<main>
<nav><a href="..">&laquo; Retour</a></nav>
<p>
Oh non ! Quelqu'un a laissé les fenêtres ouvertes sur le plateau de la certif et Oh non ! Quelqu'un a laissé les fenêtres ouvertes sur le plateau de la certif et
tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout
ça ! ça !
</p> </p>
<p class="img-holder"> <p class="img-holder">
<img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette"> <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
</p> </p>
<p class="failure hidden"></p> <p class="failure hidden"></p>
<p class="success hidden"> <p class="success hidden">
Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉 Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉
Vous pouvez être fier de vous ! Vous pouvez être fier de vous !
</p> </p>
<script src="assets/jeu.js" type="application/javascript"></script> </main>
<script src="assets/nature.js" type="application/javascript"></script>
<footer> <footer>
<p> <p>
Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>. Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
</p> </p>
</footer> </footer>
<script src="assets/jeu.js" type="application/javascript"></script>
<script src="assets/nature.js" type="application/javascript"></script>
</body> </body>
</html> </html>

30
jeux/signal.html
View file

@ -6,38 +6,42 @@
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">
</head> </head>
<body> <body>
<h1>Signal</h1> <header>
<nav><a href="..">&laquo; Retour</a></nav> <h1>Signal</h1>
<p> </header>
<main>
<nav><a href="..">&laquo; Retour</a></nav>
<p>
Peter le livreur arrive sur le plateau de la log au niveau du joli point rose Peter le livreur arrive sur le plateau de la log au niveau du joli point rose
et il doit déposer son colis au bon endroit.<br> et il doit déposer son colis au bon endroit.<br>
Les instructions qui lui sont fournies sont très claires : Les instructions qui lui sont fournies sont très claires :
</p> </p>
<ol> <ol>
<li></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
</ol> </ol>
<p> <p>
<img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map"> <img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map">
<map id="map" name="map"> <map id="map" name="map">
<area shape="rect" coords="527,48,585,229" onclick="win()"> <area shape="rect" coords="527,48,585,229" onclick="win()">
<area shape="rect" coords="0,0,1260,1292" onclick="lose()"> <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
</map> </map>
</p> </p>
<p class="failure hidden"> <p class="failure hidden">
Raté ! Les instructions de Peter sont pourtant claires 😉 Raté ! Les instructions de Peter sont pourtant claires 😉
</p> </p>
<p class="success hidden"> <p class="success hidden">
Félicitations ! Vous avez correctement suivi les instructions ! 🎉 Félicitations ! Vous avez correctement suivi les instructions ! 🎉
(ou bien vous avez frénétiquement cliqué de partout) (ou bien vous avez frénétiquement cliqué de partout)
</p> </p>
<script src="assets/jeu.js" type="application/javascript"></script> </main>
<footer> <footer>
<p> <p>
Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>. Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
</p> </p>
</footer> </footer>
<script src="assets/jeu.js" type="application/javascript"></script>
</body> </body>
</html> </html>