test push button enigme

2 years ago · b92a68bf36
parent a6ac130e8e
commit b92a68bf36
14 changed files with 63 additions and 46 deletions
--- a/WEB/View/assets/img/CyperpunkGirl.png
+++ b/WEB/View/assets/img/CyperpunkGirl.png
--- a/WEB/View/src/CSS/Main2.css
+++ b/WEB/View/src/CSS/Main2.css
@ -18,8 +18,6 @@
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
-  display: block;
-  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
@ -67,15 +65,9 @@ button:focus {
  opacity: 0;
  height: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  transition: all 0.6s;
-  -webkit-transition: all 0.6s;
-  -moz-transition: all 0.6s;
-  -ms-transition: all 0.6s;
-  -o-transition: all 0.6s;
 }

 #profil.open {
-  left: 0;
  opacity: 1;
  display: flex;
  transition: all 0.6s;
--- a/WEB/View/src/pages/Enigme/CesarDecrypt.html
+++ b/WEB/View/src/pages/Enigme/CesarDecrypt.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/CesarEncrypt.html
+++ b/WEB/View/src/pages/Enigme/CesarEncrypt.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/Chouette.html
+++ b/WEB/View/src/pages/Enigme/Chouette.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/ChuckNorris.html
+++ b/WEB/View/src/pages/Enigme/ChuckNorris.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/DoubleElement.html
+++ b/WEB/View/src/pages/Enigme/DoubleElement.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/EnigmePage.php
+++ b/WEB/View/src/pages/Enigme/EnigmePage.php
@ -25,7 +25,7 @@
        <a class="material-icons pl-0" id="home" href="index.php?action=goToHome"
          style="font-size: 40px; color: white">home</a>
      </div>
-      <button style="background-color: transparent; border: none" onclick="displayHelp()"
+      <button style="background-color: transparent; border: none; outline: none;" onclick="displayHelp()"
        class="col-3 d-flex align-items-center">
        <div class="col-10 text-right px-3">
          <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
--- a/WEB/View/src/pages/Enigme/Hanoi.html
+++ b/WEB/View/src/pages/Enigme/Hanoi.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/Palindrome.html
+++ b/WEB/View/src/pages/Enigme/Palindrome.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Enigme/TrianglePascal.html
+++ b/WEB/View/src/pages/Enigme/TrianglePascal.html
@ -40,7 +40,7 @@
          >
        </div>
        <button
-          style="background-color: transparent; border: none"
+          style="background-color: transparent; border: none; outline: none;"
          onclick="displayHelp()"
          class="col-3 d-flex align-items-center"
        >
--- a/WEB/View/src/pages/Main2.html
+++ b/WEB/View/src/pages/Main2.html
@ -24,6 +24,10 @@
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
    <link rel="stylesheet" href="../CSS/Main2.css" />
  </head>
  <body>
@ -35,23 +39,22 @@
      }
    </script>

-    <div id="imgMain">
-      <div class="col-3 d-flex" id="profilContainer">
+    <div id="imgMain" class="container p-0 d-flex">
+      <!-- Profile page -->
+
+      <div class="col-4 d-flex" id="profilContainer">
        <button
          class="d-flex p-0"
          id="btnProfil"
-          style="background: transparent; border: none; z-index: 10;"
+          style="background: transparent; border: none; z-index: 10"
          onclick="displayProfil()"
        >
-          <span
-            class="material-symbols-outlined p-1 neonBg"
-            id="profilIcon"
-          >
+          <span class="material-symbols-outlined p-1 neonBg" id="profilIcon">
            clear_all
          </span>
        </button>
        <div
-          class="col-3"
+          class="col-4"
          id="profil"
          style="
            background-color: #222831;
@ -72,12 +75,9 @@
                height: 125px;
                padding: 0;
                border: 2px solid #44fff6;
-                background-image: url('View/assets/img/BackgroundMain.jpg');
-                background-size: cover;
-                background-position: center;
              "
            />
-            <p class="d-flex justify-content-center">Pseudo</p>
+            <p class="d-flex justify-content-center m-0 p-0">Pseudo</p>

            <div
              class="d-flex justify-content-center align-self-end p-0 m-0"
@ -93,6 +93,7 @@
            <!-- End if -->

            <!-- If not connected this -->
+
            <!-- <div class="d-flex justify-content-center align-self-center p-0 m-0" id="container">
              <button class="logButton">
                <span class="circle" aria-hidden="true">
@ -101,10 +102,25 @@
                <span class="button-text">Login</span>
              </button>
            </div> -->
+
            <!-- End if -->
          </div>
        </div>
      </div>
+      <!-- End Profile page -->
+
+      <!-- Main page -->
+      <div class="d-flex align-items-center">
+        <div class="row neonBg m-0">
+          <div class="row m-0">
+            <h1>Scripted</h1>
+          </div>
+          <div class="row m-0 d-inline">
+            <a>TEST</a>
+            <a>TEST</a>
+          </div>
+        </div>
+      </div>
    </div>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -5,9 +5,10 @@
  "packages": {
    "": {
      "dependencies": {
+        "animate.css": "^4.1.1",
+        "animejs": "^3.2.1",
        "bootstrap": "^5.2.2",
-        "bootstrap-icons": "^1.10.2",
-        "events": "^3.3.0"
+        "bootstrap-icons": "^1.10.2"
      }
    },
    "node_modules/@popperjs/core": {
@ -20,6 +21,16 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
+    "node_modules/animejs": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
+      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
+    },
    "node_modules/bootstrap": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
@ -42,14 +53,6 @@
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
      "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "engines": {
-        "node": ">=0.8.x"
-      }
    }
  },
  "dependencies": {
@ -59,6 +62,16 @@
      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
      "peer": true
    },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
+    "animejs": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
+      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
+    },
    "bootstrap": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
@ -69,11 +82,6 @@
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.2.tgz",
      "integrity": "sha512-PTPYadRn1AMGr+QTSxe4ZCc+Wzv9DGZxbi3lNse/dajqV31n2/wl/7NX78ZpkvFgRNmH4ogdIQPQmxAfhEV6nA=="
-    },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -1,7 +1,8 @@
 {
  "dependencies": {
+    "animate.css": "^4.1.1",
+    "animejs": "^3.2.1",
    "bootstrap": "^5.2.2",
-    "bootstrap-icons": "^1.10.2",
-    "events": "^3.3.0"
+    "bootstrap-icons": "^1.10.2"
  }
 }