nathan.boileau
/
Scripted
0
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

Petites modif sur la page de présentation
continuous-integration/drone/push Build is passing Details

Browse Source
ServeurDeTest
nathan boileau 2 years ago
parent 70d51900fc
commit cdc8cf1eb8
3 changed files with 218 additions and 227 deletions
Show Stats Download Patch File Download Diff File

134
WEB/View/src/CSS/Pres.css
Unescape View File

@ -1,134 +0,0 @@
/*Fonts CSS */
@font-face {
font-family: Fauna;
src: url("../../assets/fonts/Fauna.ttf");
}
@font-face {
font-family: Equinox;
src: url("../../assets/fonts/Equinox.otf");
}
/* End Fonts CSS */
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: "Equinox", sans-serif;
color: white;
height: 100vh;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-color: #050e15;
}
/* Navbar CSS */
nav {
background-color: #050e15;
}
/* Moving fox CSS */
.moving-fox {
position: relative;
top: 0;
z-index: -1;
opacity: 0;
}
/* Section Histoire */
section {
min-height: 60vh;
margin-bottom: 10px;
}
.hidden {
opacity: 0;
filter: blur(10px);
transform: translateX(-100px);
transition: all 1.2s;
}
.show {
opacity: 1;
filter: blur(0px);
transform: translateX(0px);
}
@media (prefers-reduced-motion) {
.hidden {
transition: none;
}
}
p {
font-family: "Fauna", sans-serif;
font-size: 20px;
}
/* Scroll down arrow */
.scroll-down {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -16px;
display: block;
width: 40px;
height: 40px;
border: 2px solid #fff;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
}
40% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-o-transform: translateY(-5px);
}
}

142
WEB/View/src/CSS/Presentation.css
Unescape View File

@ -0,0 +1,142 @@
/*Fonts CSS */
@font-face {
font-family: Fauna;
src: url("../../assets/fonts/Fauna.ttf");
}
@font-face {
font-family: Equinox;
src: url("../../assets/fonts/Equinox.otf");
}
/* End Fonts CSS */
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: "Equinox", sans-serif;
color: white;
height: 100vh;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-color: #050e15;
}
/* Navbar CSS */
nav {
background-color: #050e15;
}
/* Moving fox CSS */
.moving-fox {
position: relative;
top: 0;
z-index: -1;
opacity: 0;
}
/* Section Histoire */
section {
min-height: 60vh;
margin-bottom: 10px;
}
.hidden {
opacity: 0;
filter: blur(10px);
transform: translateX(-100px);
transition: all 1.2s;
}
.show {
opacity: 1;
filter: blur(0px);
transform: translateX(0px);
}
@media (prefers-reduced-motion) {
.hidden {
transition: none;
}
}
p {
font-family: "Fauna", sans-serif;
font-size: 20px;
}
a {
color: #44fff6;
text-decoration: none;
}
a:hover {
color: #44fff6;
}
/* Scroll down arrow */
.scroll-down {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -16px;
display: block;
width: 40px;
height: 40px;
border: 2px solid #fff;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
}
40% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-o-transform: translateY(-5px);
}
}

167
WEB/View/src/pages/Presentation.html
Unescape View File

@ -1,108 +1,91 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Présentation</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
<script defer src="./View/src/JS/Presentation.js"></script>
<link rel="stylesheet" href="./View/src/CSS/Pres.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid mx-0">
<div class="nav-item nav-link">
<a class="navbar-brand" href="index.php?action=goToHome">Home</a>
</div>
<div class="mx-auto">
<h5
class="m-1 text-uppercase"
style="color: #fff; font-weight: bold; font-size: 22px"
>
Northgan
</h5>
</div>
<div class="nav-link">
<a class="navbar-brand" href="index.php?action=goToSolo">Skip</a>
</div>
<div class="nav-link">
<a class="navbar-brand" href="index.php?action=goToTest">Next</a>
</div>
</div>
</nav>
<img src="./View/assets/img/BGPres2.png" class="img-fluid" /> <head>
<a href="#first" class="scroll-down"></a> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Présentation</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
<script defer src="./View/src/JS/Presentation.js"></script>
<link rel="stylesheet" href="./View/src/CSS/Presentation.css" />
</head>
<div class="container pt-5" id="first"> <body>
<div class="col-12"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top d-flex justify-content-between user-select-none p-3">
<div class="row py-5"> <div class="nav-item nav-link">
<div class="col-8"> <a class="navbar-brand" href="index.php?action=goToHome">Home</a>
<section class="hidden row"> </div>
<p> <div>
Bonjour Utilisateur ! Je suis <b>Foxy</b>. <br /><br /><br /> <h5 class="text-uppercase" style="color: #fff; font-weight: bold; font-size: 22px">
Une IA créé dans le but de rétablir un environnement sain et Northgan
équilibré sur la planète. </h5>
</p> </div>
</section>
<section class="hidden row"> <div class="nav-link">
<p> <a class="navbar-brand" href="index.php?action=goToTest">Next</a>
J'ai donc besoin de ton aide pour me protéger d'une organisation </div>
malveillante nommée <b>Gamma</b> qui souhaite m'utiliser à des </nav>
fins militaires.
</p> <img src="./View/assets/img/BGPres2.png" class="img-fluid" />
</section> <a href="#first" class="scroll-down"></a>
<div class="container pt-5" id="first">
<div class="col-12">
<div class="row py-5">
<div class="col-8">
<section class="hidden row">
<p>
Bonjour Utilisateur ! Je suis <b>Foxy</b>. <br /><br /><br />
Une IA créé dans le but de rétablir un environnement sain et
équilibré sur la planète.
</p>
</section>
<section class="hidden row"> <section class="hidden row">
<p> <p>
Pour cela, je vais te demander de réaliser des missions pour moi. J'ai donc besoin de ton aide pour me protéger d'une organisation
Mais tout d'abord, tu dois passer un test de qualification. Si malveillante nommée <b>Gamma</b> qui souhaite m'utiliser à des
tu réussis, tu pourras m'aider à protéger mon code fins militaires.
source. </p>
</p> </section>
</section>
<section class="hidden row" style="min-height: 50vh"> <section class="hidden row">
<p> <p>
Clique sur le bouton NEXT pour commencer tes premiers pas dans Pour cela, je vais te demander de réaliser des missions pour moi.
l'ère du développement.<br /> Mais tout d'abord, tu dois passer un test de qualification. Si
<br /> tu réussis, tu pourras m'aider à protéger mon code
Clique sur SKIP pour aller directement aux énigmes. source.
</p> </p>
</section> </section>
</div>
<div class="col-3" id="fox"> <section class="hidden row" style="min-height: 50vh">
<img <p>
src="./View/assets/img/Foxy.png" Clique sur le bouton <a href="index.php?action=goToTest">NEXT</a> pour commencer tes premiers pas dans
alt="Logo" l'ère du développement, où je vais t'apprendre les bases !<br />
class="img-fluid rounded-circle moving-fox" <br />
style=" Si tu es déjà un boss, clique sur <a href="index.php?action=goToSolo">SKIP</a> pour aller directement aux énigmes.
</p>
</section>
</div>
<div class="col-3" id="fox">
<img src="./View/assets/img/Foxy.png" alt="Logo" class="img-fluid rounded-circle moving-fox" style="
border: 2px solid #44fff6; border: 2px solid #44fff6;
background-image: url('View/assets/img/BackgroundMain.jpg'); background-image: url('View/assets/img/BackgroundMain.jpg');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
" " />
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</body> </div>
</body>
</html> </html>
Write Preview
Loading…
Cancel
Save