Package Bootstrap + premiere page avec

.gitignore

@@ -12,3 +12,4 @@
 # Built Visual Studio Code Extensions
 *.vsix
 
+/node_modules/

WEB/src/CSS/Main.css

@@ -0,0 +1,287 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
+
+/*Default CSS*/
+body {
+  min-height: 100vh;
+  font-family: "Orbitron", sans-serif;
+  color: white;
+  background-image: url(../../assets/img/BackgroundMain.jpg);
+  scroll-behavior: smooth;
+  height: 100vh;
+  background-position: center center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #464646;
+}
+
+p,
+a,
+li,
+button,
+ul {
+  margin: 0;
+  padding: 0;
+  line-height: normal;
+  text-decoration: none !important;
+}
+
+/* Animation CSS */
+
+@keyframes blink {
+  0%,
+  22%,
+  36%,
+  75% {
+    color: #ffe6ff;
+    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf,
+      -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf,
+      0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174;
+  }
+  28%,
+  33% {
+    color: #dd07bf;
+    text-shadow: none;
+  }
+  82%,
+  97% {
+    color: #991888;
+    text-shadow: none;
+  }
+}
+
+@keyframes flicker {
+  from {
+    opacity: 1;
+  }
+
+  4% {
+    opacity: 0.9;
+  }
+
+  6% {
+    opacity: 0.85;
+  }
+
+  8% {
+    opacity: 0.95;
+  }
+
+  10% {
+    opacity: 0.9;
+  }
+
+  11% {
+    opacity: 0.922;
+  }
+
+  12% {
+    opacity: 0.9;
+  }
+
+  14% {
+    opacity: 0.95;
+  }
+
+  16% {
+    opacity: 0.98;
+  }
+
+  17% {
+    opacity: 0.9;
+  }
+
+  19% {
+    opacity: 0.93;
+  }
+
+  20% {
+    opacity: 0.99;
+  }
+
+  24% {
+    opacity: 1;
+  }
+
+  26% {
+    opacity: 0.94;
+  }
+
+  28% {
+    opacity: 0.98;
+  }
+
+  37% {
+    opacity: 0.93;
+  }
+
+  38% {
+    opacity: 0.5;
+  }
+
+  39% {
+    opacity: 0.96;
+  }
+
+  42% {
+    opacity: 1;
+  }
+
+  44% {
+    opacity: 0.97;
+  }
+
+  46% {
+    opacity: 0.94;
+  }
+
+  56% {
+    opacity: 0.9;
+  }
+
+  58% {
+    opacity: 0.9;
+  }
+
+  60% {
+    opacity: 0.99;
+  }
+
+  68% {
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 0.9;
+  }
+
+  72% {
+    opacity: 0.95;
+  }
+
+  93% {
+    opacity: 0.93;
+  }
+
+  95% {
+    opacity: 0.95;
+  }
+
+  97% {
+    opacity: 0.93;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes animate1 {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes animate2 {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes animate3 {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes animate4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+
+.flicker {
+  animation: shine 2s forwards, blink 3s 2s infinite;
+}
+
+.fast-flicker {
+  animation: shine 2s forwards, blink 10s 1s infinite;
+}
+
+/* COntainer CSS */
+
+h1 {
+  letter-spacing: 0.5rem;
+  color: #ffe6ff;
+  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf,
+    -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf,
+    0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174;
+  animation: shine 2s forwards, flicker 3s infinite;
+}
+
+a {
+  letter-spacing: 0.2rem;
+  font-weight: 400;
+  border-radius: 10px;
+  font-size: 22px;
+  cursor: pointer;
+  transition: 0.5s;
+}
+
+a span {
+  position: absolute;
+  display: block;
+}
+
+#enigme {
+  color: #ff86ff;
+}
+
+#enigme:hover {
+  background: #ff86ff;
+  color: #000000;
+  box-shadow: 0 0 5px #ff86ff, 0 0 25px #ff86ff, 0 0 50px #ff86ff,
+    0 0 100px #ff86ff;
+  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
+}
+
+/* #enigme span:nth-child(1) {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #ff86ff);
+  animation: animate1 1s linear infinite;
+} */
+
+
+
+
+#multi {
+  color: #56fcfc;
+}
+
+#multi:hover {
+  background: #56fcfc;
+  color: #000000 !important;
+  box-shadow: 0 0 5px #56fcfc, 0 0 25px #56fcfc, 0 0 50px #56fcfc,
+    0 0 100px #56fcfc;
+  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
+}
+

WEB/src/pages/Main.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Scripted</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <!-- CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="../CSS/Main.css" />
+
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="col-auto">
+        <div class="row g-5 py-5">
+          <h1
+            class="display-1 fw-bold mb-5 text-uppercase d-flex justify-content-center"
+          >
+            <span class="fast-flicker">s</span>
+            <span>crip</span>
+            <span class="flicker">t</span>
+            <span>ed</span>
+          </h1>
+        </div>
+        <div class="row d-flex justify-content-center g-5 py-5">
+          <a
+            id="enigme"
+            class="mb-3 text-uppercase d-flex justify-content-center align-items-center"
+            href="./Presentation.html"
+            style="width: 260px; height: 50px"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Énigmes
+          </a>
+        </div>
+        <div class="row d-flex justify-content-center g-5 py-4">
+          <a
+            id="multi"
+            class="mb-3 text-uppercase d-flex justify-content-center align-items-center"
+            href="./Duel/Duel.html"
+            style="width: 260px; height: 50px"
+          >
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Multijoueur
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>

package-lock.json

@@ -0,0 +1,54 @@
+{
+  "name": "Scripted",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "bootstrap": "^5.2.2"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    }
+  },
+  "dependencies": {
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "peer": true
+    },
+    "bootstrap": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ==",
+      "requires": {}
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.2.2"
+  }
+}