diff --git a/WEB/Config/Config.php b/WEB/Config/Config.php index 1bd68050..bc5331c8 100644 --- a/WEB/Config/Config.php +++ b/WEB/Config/Config.php @@ -17,7 +17,7 @@ $sel = "JeSuisUnSeldeHashageEtJeSuisUniqueEtTresSecuriseEtJeSuisTresLong"; //View //Page $vues['main'] = 'View/src/pages/Main.php'; -$vues['presenation'] = 'View/src/pages/Presentation.html'; +$vues['presentation'] = 'View/src/pages/Presentation.html'; $vues['login'] = 'View/src/pages/LogSign/Login.php'; $vues['signUp'] = 'View/src/pages/LogSign/SignUp.php'; $vues['enigme'] = 'View/src/pages/Enigme/palindrome.html'; diff --git a/WEB/Controller/Controller.php b/WEB/Controller/Controller.php index 928b9c3f..ff9215bc 100644 --- a/WEB/Controller/Controller.php +++ b/WEB/Controller/Controller.php @@ -11,7 +11,6 @@ class Controller $this->con=$con; session_start(); try{ - echo "controller"; global $rep, $vues, $error; $action=$_REQUEST['action']; switch($action) { @@ -103,7 +102,7 @@ class Controller private function goToPresentation() { global $rep, $vues, $error; try { - require ($rep.$vues['presenation']); + require ($rep.$vues['presentation']); }catch (Exception $e){ $error = "Erreur Inconnue"; require($rep.$vues['erreur']); diff --git a/WEB/View/assets/img/BGBotPres.png b/WEB/View/assets/img/BGBotPres.png deleted file mode 100644 index 135b3985..00000000 Binary files a/WEB/View/assets/img/BGBotPres.png and /dev/null differ diff --git a/WEB/View/assets/img/BGPres.png b/WEB/View/assets/img/BGPres.png new file mode 100644 index 00000000..e5b7750b Binary files /dev/null and b/WEB/View/assets/img/BGPres.png differ diff --git a/WEB/View/assets/img/BGTopPres.png b/WEB/View/assets/img/BGTopPres.png deleted file mode 100644 index 9f67c5da..00000000 Binary files a/WEB/View/assets/img/BGTopPres.png and /dev/null differ diff --git a/WEB/View/assets/img/Foxy.png b/WEB/View/assets/img/Foxy.png new file mode 100644 index 00000000..3dbfe61d Binary files /dev/null and b/WEB/View/assets/img/Foxy.png differ diff --git a/WEB/View/assets/img/TestBg.png b/WEB/View/assets/img/TestBg.png deleted file mode 100644 index 8fd34d4a..00000000 Binary files a/WEB/View/assets/img/TestBg.png and /dev/null differ diff --git a/WEB/View/src/CSS/Enigme.css b/WEB/View/src/CSS/Enigme.css index 0c34632e..02f79283 100644 --- a/WEB/View/src/CSS/Enigme.css +++ b/WEB/View/src/CSS/Enigme.css @@ -1,47 +1,55 @@ /*Fonts CSS */ -@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); - +@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap"); /*Default CSS*/ * { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -h1, h2, h3, h4, h5, h6 { - margin: 0; - padding: 0; - line-height: normal; -} - - p, a, li, button, ul { - margin: 0; - padding: 0; - line-height: normal; - text-decoration: none !important; - } - -a:hover { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; + line-height: normal; +} + +p, +a, +li, +button, +ul { + margin: 0; + padding: 0; + line-height: normal; text-decoration: none !important; } +a:hover { + text-decoration: none !important; +} -input:focus, textarea:focus, select:focus { +input:focus, +textarea:focus, +select:focus { outline: none; } - -@media (min-width:1700px) { - main .buttons { - max-width: 100%; - padding: 0 150px; - } -} +@media (min-width: 1700px) { + main .buttons { + max-width: 100%; + padding: 0 150px; + } +} /* Main CSS */ -html{ +html { scroll-behavior: smooth; height: 100vh; background-position: center center; @@ -51,39 +59,39 @@ html{ background-size: cover; } -body{ - display: flex; - font-family: "Orbitron", sans-serif; - flex-direction: row; - align-items: stretch; - height: 95%; - margin-top: 10px; - padding: 0; +body { + display: flex; + font-family: "Orbitron", sans-serif; + flex-direction: row; + align-items: stretch; + height: 95%; + margin-top: 10px; + padding: 0; --light: hsl(220, 50%, 90%); --primary: hsl(255, 30%, 55%); --focus: hsl(210, 90%, 50%); - --border-color: hsla(0, 0%, 100%, .2); + --border-color: hsla(0, 0%, 100%, 0.2); --global-background: hsl(220, 25%, 10%); --background: linear-gradient(to right, #040a29, #0e1538); --shadow-1: #0b1b78; --shadow-2: #173c45; } -.enigme{ - width: 25%; - height: fit-content; - color: aliceblue; - background: rgba(0,0,0,0.6); - box-sizing: border-box; - border-radius: 10px; - padding: 10px; - margin-left: 10px; - margin-right: 20px; - letter-spacing: 1.2px; +.enigme { + width: 25%; + height: fit-content; + color: aliceblue; + background: rgba(0, 0, 0, 0.6); + box-sizing: border-box; + border-radius: 10px; + padding: 10px; + margin-left: 10px; + margin-right: 20px; + letter-spacing: 1.2px; } -.titre_pre{ +.titre_pre { display: flex; margin-top: 10px; margin-right: 10px; @@ -91,115 +99,105 @@ body{ padding-left: 10px; } -.sign{ - margin-left:5%; +.sign { + margin-left: 5%; } - - - /* Main Button Css */ -.buttons{ +.buttons { display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - cursor: pointer; - } + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; +} -.compiler_class .buttons div{ +.compiler_class .buttons div { display: flex; } -.buttons .btn{ +.buttons .btn { position: relative; - width: 120px; - height: 60px; - display: inline-block; - background: transparent; - margin: 20px; - } - - - .buttons .btn:before, .buttons .btn:after - { - content:''; - position: absolute; - inset: 0; - transition: 0.5s; - background: #f00 - } - - -.buttons .btn:nth-child(1):before, .buttons .btn:nth-child(1):after -{ - background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4) + width: 120px; + height: 60px; + display: inline-block; + background: transparent; + margin: 20px; } -.buttons .btn:nth-child(2):before, .buttons .btn:nth-child(2):after -{ - background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942); +.buttons .btn:before, +.buttons .btn:after { + content: ""; + position: absolute; + inset: 0; + transition: 0.5s; + background: #f00; } -.buttons .btn:hover:before -{ - inset: -3px; +.buttons .btn:nth-child(1):before, +.buttons .btn:nth-child(1):after { + background: linear-gradient(45deg, #00ccff, #0e1538, #d400d4); } -.buttons .btn:hover:after -{ - inset: -3px; - filter: blur(10px); +.buttons .btn:nth-child(2):before, +.buttons .btn:nth-child(2):after { + background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942); } -.buttons .btn span{ - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: inline-block; - background: #0e1538; - z-index: 10; - display: flex; - justify-content: center; - align-items: center; - font-size: 1.2em; - text-transform: uppercase; - letter-spacing: 2px; - color: #fff; - border: 1px solid #040a29; - overflow: hidden; +.buttons .btn:hover:before { + inset: -3px; } -.buttons .btn span::before{ - content:''; - position: absolute; - top: 0; - left: -50%; - width: 100%; - height: 100%; - background: rgba(255,255,255,0.075); - transform: skew(25deg) +.buttons .btn:hover:after { + inset: -3px; + filter: blur(10px); } +.buttons .btn span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: inline-block; + background: #0e1538; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2em; + text-transform: uppercase; + letter-spacing: 2px; + color: #fff; + border: 1px solid #040a29; + overflow: hidden; +} +.buttons .btn span::before { + content: ""; + position: absolute; + top: 0; + left: -50%; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.075); + transform: skew(25deg); +} .buttons .btn .noAnimation { animation: none; font-size: 1em; } - /* Console CSS*/ -.compiler_class{ +.compiler_class { width: 30%; } -#console{ - font-size: .8rem; +#console { + font-size: 0.8rem; opacity: 0.85; letter-spacing: 1px; background-color: #040a29; @@ -215,10 +213,9 @@ body{ resize: none; } - /* Ace CSS*/ -.ace{ +.ace { width: 45%; max-height: 100%; margin-bottom: 0; @@ -227,36 +224,33 @@ body{ /* Text Css */ -.enigme h1{ - font-size: 1.5rem !important; - font-weight: 700; - text-align: center; - +.enigme h1 { + font-size: 1.5rem !important; + font-weight: 700; + text-align: center; } -.enigme .sign{ +.enigme .sign { display: contents; } -.enigme h2{ - font-size: 1.5rem; - font-weight: 600; - +.enigme h2 { + font-size: 1.5rem; + font-weight: 600; } -.enigme p{ - font-size: 1rem; - font-weight: 400; - margin-right: 10px; +.enigme p { + font-size: 1rem; + font-weight: 400; + margin-right: 10px; } -#result{ +#result { display: flex; align-items: center; margin: 0 30px; font-size: 1.5rem; } - /* Modal CSS */ .modal-container { @@ -286,18 +280,18 @@ body{ width: 30%; height: 35%; padding: 10px 0; - border-radius: .8rem; + border-radius: 0.8rem; color: aliceblue; background: var(--background); - box-shadow: var(--m-shadow, .4rem .4rem 8.2rem .2rem) var(--shadow-1); + box-shadow: var(--m-shadow, 0.4rem 0.4rem 8.2rem 0.2rem) var(--shadow-1); position: relative; overflow: hidden; } /* Modal H1 */ -.modal #containerResult{ +.modal #containerResult { display: flex; justify-content: center; align-items: center; @@ -306,17 +300,16 @@ body{ height: 100%; } - /* Modal Container Buttons */ -.modal .buttons{ +.modal .buttons { display: flex; align-items: flex-end; height: 100%; width: auto; } -.modal .buttons #top{ +.modal .buttons #top { display: flex; justify-content: flex-end; align-items: flex-start; @@ -324,7 +317,7 @@ body{ height: 50%; } -.modal .buttons #bottom{ +.modal .buttons #bottom { display: flex; justify-content: center; align-items: flex-end; @@ -334,28 +327,28 @@ body{ /* Modal buttons btn */ -.modal .buttons .btn{ +.modal .buttons .btn { width: 30px; height: 30px; - margin : 0 15px; + margin: 0 15px; } -.modal .buttons #bottom{ +.modal .buttons #bottom { width: 100%; } -.modal .buttons #fleche{ - display: none; +.modal .buttons #fleche { + display: none; width: 75px; height: 40px; } -.modal .buttons .btn span{ +.modal .buttons .btn span { background: #06124b; color: white; } -.modal .buttons #bottom .btn:nth-child(1):before, .modal .buttons #bottom .btn:nth-child(1):after -{ - background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942); -} \ No newline at end of file +.modal .buttons #bottom .btn:nth-child(1):before, +.modal .buttons #bottom .btn:nth-child(1):after { + background: linear-gradient(45deg, #d400d4, #0e1538, #fb5942); +} diff --git a/WEB/View/src/CSS/Pres.css b/WEB/View/src/CSS/Pres.css deleted file mode 100644 index d2aec2e1..00000000 --- a/WEB/View/src/CSS/Pres.css +++ /dev/null @@ -1,61 +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"); -} - -body { - min-height: 100vh; - font-family: "Equinox", sans-serif; - color: white; - scroll-behavior: smooth; - 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; -} - -/* Scrolling Page */ - -/* Section Histoire */ - -section{ - min-height: 30vh; -} - -.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; -} diff --git a/WEB/View/src/CSS/Presentation.css b/WEB/View/src/CSS/Presentation.css index 456fee48..03f8b5ab 100644 --- a/WEB/View/src/CSS/Presentation.css +++ b/WEB/View/src/CSS/Presentation.css @@ -1,82 +1,70 @@ +/*Fonts CSS */ -html{ - scroll-behavior: smooth; - background-image: url(../../assets/img/BackgroundPresentation.jpg); - scroll-behavior: smooth; - height: 100vh; - background-position: center center; - background-color: #464646; - background-attachment: fixed; - background-repeat: no-repeat; - background-size: cover; - letter-spacing: 1.2px; +@font-face { + font-family: Fauna; + src: url("../../assets/fonts/Fauna.ttf"); } - -body{ - font-family: "Orbitron", sans-serif; - height: 95%; - display: flex; - flex-direction: row; - justify-content: center; +@font-face { + font-family: Equinox; + src: url("../../assets/fonts/Equinox.otf"); } -.Presentation{ - font-family: "Orbitron", sans-serif; - color:aliceblue; - font-size: 20px; +body { + min-height: 100vh; + font-family: "Equinox", sans-serif; + color: white; + scroll-behavior: smooth; + height: 100vh; + background-position: center center; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + background-color: #050e15; } -.Histoire{ - margin-left: 5% ; - width: 80%; - display: flex; - justify-content: space-around; - align-items: center; -} +/* Navbar CSS */ -.ConsigneRun{ - margin-left: 5% ; - width: 80%; - display: flex; - justify-content: space-around; - align-items: center; +nav { + background-color: #050e15; } -.ConsigneSubmit{ - margin-left: 5% ; - width: 80%; - display: flex; - justify-content: space-around; - align-items: center; -} +/* Moving fox CSS */ -.Consigne{ - width: 60%; +.moving-fox { + position: relative; + top : 0; + z-index: -1; + opacity: 0; } -.Histoire,.ConsigneRun,.ConsigneSubmit{ - margin-top: 0; - background: rgba(0,0,0,0.8); - box-sizing: border-box; - box-shadow: 0 15px 25px rgba(0,0,0,); - border-radius: 10px; - padding: 10px; - margin-left: 10%; - margin-right: 10%; + +/* Section Histoire */ + +section{ + min-height: 60vh; + margin-bottom: 10px; } -.titre_pre{ - display: flex; - font-size: 14px; - height: 15%; +.hidden { + opacity: 0; + filter: blur(10px); + transform: translateX(-100px); + transition: all 1.2s; } -.sign{ - margin-top: 3%; - margin-left:12% +.show { + opacity: 1; + filter: blur(0px); + transform: translateX(0px); } -.retour{ - margin-top: 1%; - margin-left: 10%; +@media (prefers-reduced-motion) { + .hidden { + transition: none; + } } + +p { + font-family: "Fauna", sans-serif; + font-size: 20px; +} \ No newline at end of file diff --git a/WEB/View/src/JS/Presentation.js b/WEB/View/src/JS/Presentation.js index e623b11b..c5cb9b1b 100644 --- a/WEB/View/src/JS/Presentation.js +++ b/WEB/View/src/JS/Presentation.js @@ -1,14 +1,23 @@ const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - console.log(entry); - if (entry.isIntersecting) { - entry.target.classList.add('show'); - } else { - entry.target.classList.remove('show'); - } - }); + entries.forEach((entry) => { + console.log(entry); + if (entry.isIntersecting) { + entry.target.classList.add("show"); + } else { + entry.target.classList.remove("show"); + } + }); }); +const hiddenElements = document.querySelectorAll(".hidden"); +hiddenElements.forEach((element) => observer.observe(element)); -const hiddenElements = document.querySelectorAll('.hidden'); -hiddenElements.forEach(element => observer.observe(element)); \ No newline at end of file +// Increase the top position of the element when scrolling down + +const fox = document.querySelector(".moving-fox"); + +window.addEventListener("scroll", () => { + const scrollValue = window.scrollY - 500; + fox.style.top = `${scrollValue / 1.2}px`; + fox.style.opacity = `${window.scrollY / 500}`; +}); diff --git a/WEB/View/src/pages/Pres.html b/WEB/View/src/pages/Pres.html deleted file mode 100644 index aecf14a0..00000000 --- a/WEB/View/src/pages/Pres.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - Présentation - - - - - - - - - - - -
-
-
- Logo -
-
- - - - - - -
-
-
- - diff --git a/WEB/View/src/pages/Presentation.html b/WEB/View/src/pages/Presentation.html index 731546e4..ec9970dd 100644 --- a/WEB/View/src/pages/Presentation.html +++ b/WEB/View/src/pages/Presentation.html @@ -1,69 +1,92 @@ - - - - - - - - - - - Presentation + + + + + + Présentation + + + + + - -
-
-
- home -
-
-

- P - resen - t - ation -

-
-
-
-
- Foxy -
-

Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un eminent chercheur, - malhereusement celui-ci est mort. J'ai besoin de votre aide pour protéger mon code source d'une organisation - malveillante qui veut le voler. Pour cela, je vais vous demander de résoudre des énigmes. Mais tout d'abord, - vous devez passer un test de qualification. Si vous réussissez, vous pourrez accéder aux énigmes. - Bonne chance utilisateur ! -

-
-
-
-
-
-

Le Bouton Run te permet de tester ton code, n'oublie pas de faire print(nomFonction(x)) pour afficher sur la console !

-
-
- - Run - -
-
-
-
-
- - Submit - -
-
-

Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour faire valider ton code et passer à la prochaine enigme

-
-
-
- - Next - -
+ + + + + +
+
+
+
+ + + + + +
+ +
+ Logo +
diff --git a/WEB/index.php b/WEB/index.php index 4101079d..ff27a6bc 100644 --- a/WEB/index.php +++ b/WEB/index.php @@ -2,11 +2,8 @@ require_once('./Config/Config.php'); require_once('./Config/Autoload.php'); Autoload::charger(); -echo "post"; $con = new Connection($dsn, $user, $password); -echo "con"; $control = new Controller($con); -echo "after"; session_regenerate_id(true); // session_unset();