Create index.html

Mateo-Johnson · May 11, 2024 · 77ed238 · 77ed238
1 parent 0f7302c
commit 77ed238
Showing 1 changed file with 335 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Metrobots 3324</title>
+  <style>
+    body {
+      display: grid;
+      place-items: center;
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
+      position: relative;
+    }
+
+    h1 {
+      font-family: 'Space Mono', monospace;
+      font-size: clamp(3rem, 10vw, 10rem);
+      color: white;
+      padding: 0rem clamp(1rem, 2vw, 3rem);
+      border-radius: clamp(0.4rem, 0.75vw, 1rem);
+      z-index: 1;
+    }
+
+    h1:hover {
+      background-color: darkRed;
+      color: white;
+    }
+
+    .background-video-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      pointer-events: none;
+      overflow: hidden;
+      opacity: 0;
+      animation: fadeIn 3s forwards;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    .background-video {
+      position: absolute;
+      top: 47%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(1.25);
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      z-index: 0;
+    }
+
+    .video-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(139, 0, 0, 0.7);
+      z-index: 1;
+    }
+
+    .meta-link {
+      align-items: center;
+      backdrop-filter: blur(3px);
+      background-color: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      bottom: 10px;
+      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+      display: inline-flex;
+      gap: 5px;
+      left: 10px;
+      padding: 10px 20px;
+      position: fixed;
+      text-decoration: none;
+      transition: background-color 400ms, border-color 400ms;
+      z-index: 10000;
+    }
+
+    .meta-link:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .meta-link>i,
+    .meta-link>span {
+      height: 20px;
+      line-height: 20px;
+    }
+
+    .meta-link>span {
+      color: white;
+      font-family: "Rubik", sans-serif;
+      font-weight: 500;
+    }
+
+    .button-container {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: center;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .button-container.show {
+      pointer-events: auto;
+    }
+
+
+    .always-buttons {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .always-buttons .button {
+      background-color: transparent;
+      color: white;
+      padding: 10px 20px;
+      margin: 5px;
+      border: 2px solid white;
+      border-radius: 5px;
+      font-family: 'Space Mono', monospace;
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .always-buttons .button:nth-child(1) {
+      animation: slideFadeIn 0.9s ease forwards 0.6s;
+    }
+
+    .always-buttons .button:nth-child(2) {
+      animation: slideFadeIn 0.9s ease forwards 0.7s;
+    }
+
+    .always-buttons .button:nth-child(3) {
+      animation: slideFadeIn 0.9s ease forwards 0.8s;
+    }
+
+    .always-buttons .button:nth-child(4) {
+      animation: slideFadeIn 0.9s ease forwards 0.9s;
+    }
+
+    @keyframes slideFadeIn {
+      0% {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .always-buttons .button:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: white;
+      transform: translateY(-3px) !important;
+      transition: transform 0.3s ease, background-color 0.3s ease;
+    }
+
+    .always-buttons .button:focus {
+      outline: none;
+      box-shadow: 0 0 10px darkRed;
+    }
+
+.silly {
+  position: absolute;
+  top: 81%;
+  left: 0;
+  display: block;
+  opacity: 0;
+}
+
+.silly .button {
+  background-color: transparent !important;
+  color: white !important;
+  padding: 10px 20px !important;
+  margin: 5px !important;
+  border: 2px solid white;
+  border-radius: 5px !important;
+  font-family: 'Space Mono', monospace !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease-in-out !important;
+}
+
+.silly .button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  transform: translateY(-3px) !important;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.silly .button:focus {
+  outline: none;
+  box-shadow: 0 0 10px darkRed;
+}
+
+    .slide-out {
+      animation: slideOut 0.5s forwards;
+    }
+
+    .slide-in {
+      animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideOut {
+      0% {
+        transform: translateX(0);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateX(-100%);
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideIn {
+      0% {
+        transform: translateX(-100%);
+        opacity: 0;
+      }
+
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="background-video-container">
+    <iframe class="background-video" id="youtubeVideo" frameborder="0" allowfullscreen loop></iframe>
+    <div class="video-overlay"></div>
+  </div>
+  <h1 data-value="METROBOTS">METROBOTS</h1>
+
+  <div class="always-buttons">
+    <div class="button"><b><center>About Us</center></b></div>
+    <div class="button"><b>Links</b></div>
+    <div class="button"><b><center>Our Community</center></b></div>
+    <div class="button"><b><center>Resources </center></b></div>
+    <button class="silly" id="left-button">Left Button</button>
+    <button class="silly" id="right-button">Right Button</button>
+  </div>
+
+  <script>
+    document.querySelector('.always-buttons .button:nth-child(1)').addEventListener('click', function() {
+      window.location.href = "about.html";
+    });
+
+    document.querySelector('.always-buttons .button:nth-child(2)').addEventListener('click', function() {
+      window.location.href = "links.html";
+    });
+
+    document.querySelector('.always-buttons .button:nth-child(3)').addEventListener('click', function() {
+      window.location.href = "mission.html";
+    });
+
+    document.querySelector('.always-buttons .button:nth-child(4)').addEventListener('click', function() {
+      window.location.href = "resources.html";
+    });
+
+    const letters = "∑∫√∆∞≠≈≤≥±×÷∝∴∵∇∂≡∼≅∩∪⊂⊃⊆⊇∅∈∉∋←→↑↓↔↖↗↘↙⇐⇒⇑⇓⇔↤↥↦↧⇄⇅⇆⇇⇈⇉⇊⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿∝ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$€£¥₹¢.,?!:;-/\@#$%&*+=<>ɑɒæɐaɑɒbʙβɓcçɕdðɖɗʤʣdzdʑɱeɘəɚɛɜɝɞɟɠɡɢʛɦɧhɥɨɪɪjɟʄɨʝɟkʞlɭʎʟɬɮʟɺɫɬɭmɱɯɰŋɳɲɴɶɷɵɸʘɹɺɻɼɽɾɸʁɹɻɽʀʁɾɸsʃʂtθʈʧʦʨtʃtʂtɕʈtɕʈʋuʊʌʍwɯɰʷxɣχʁɥʎʟʒʑʐʝʎʟβɵʉɪɪʏʊʊ";
+    const youtubeLinks = [
+      "https://www.youtube.com/embed/3KtxX7LDcuQ?autoplay=1&loop=1000&mute=1&playlist=3KtxX7LDcuQ&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_2?autoplay=1&loop=1000&mute=1&playlist=NpmZqjq6XOk&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=UAJ4ri4wFbs&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=WeH5BYzY87Q&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=CGivBFyF8Ug&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=5Y8rrHjDAV4&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=VPQ9QdmkgdM&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=XljNNMhltS8&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=3B1TMGdccOY&start=5",
+      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=PC3MpMCt7yk&start=5"
+    ];
+
+    const randomIndex = Math.floor(Math.random() * youtubeLinks.length);
+    const randomYouTubeLink = youtubeLinks[randomIndex];
+    document.getElementById("youtubeVideo").src = randomYouTubeLink;
+
+    let interval = null;
+    document.querySelector("h1").onmouseover = event => {
+      let iteration = 0;
+      clearInterval(interval);
+      interval = setInterval(() => {
+        event.target.innerText = event.target.innerText
+          .split("")
+          .map((letter, index) => {
+            if (index < iteration) {
+              return event.target.dataset.value[index];
+            }
+            return letters[Math.floor(Math.random() * 26)]
+          })
+          .join("");
+        if (iteration >= event.target.dataset.value.length) {
+          clearInterval(interval);
+          document.querySelector('.button-container').classList.add('show');
+        }
+        iteration += 1 / 3;
+      }, 30);
+    }
+  </script>
+</body>
+
+</html>