Completed lab 7

Lofranlof · Dec 11, 2023 · dbcfb4a · dbcfb4a
1 parent 07742d3
commit dbcfb4a
Show file tree

Hide file tree

Showing 22 changed files with 147 additions and 50 deletions.
diff --git a/AUDIO/audio1.mp3 b/AUDIO/audio1.mp3
diff --git a/AUDIO/audio2.mp3 b/AUDIO/audio2.mp3
diff --git a/AUDIO/audio3.mp3 b/AUDIO/audio3.mp3
diff --git a/AUDIO/audio4.mp3 b/AUDIO/audio4.mp3
diff --git a/AUDIO/audio5.mp3 b/AUDIO/audio5.mp3
diff --git a/AUDIO/audio6.mp3 b/AUDIO/audio6.mp3
diff --git a/AUDIO/audio7.mp3 b/AUDIO/audio7.mp3
diff --git a/AUDIO/audio8.mp3 b/AUDIO/audio8.mp3
diff --git a/AUDIO/audio9.mp3 b/AUDIO/audio9.mp3
diff --git a/IMG/Levels/Amateur.png b/IMG/Levels/Amateur.png
diff --git a/IMG/Levels/Epic1.png b/IMG/Levels/Epic1.png
diff --git a/IMG/Levels/Legendary1.png b/IMG/Levels/Legendary1.png
diff --git a/IMG/Levels/Legendary2.png b/IMG/Levels/Legendary2.png
diff --git a/IMG/Levels/Legendary3.png b/IMG/Levels/Legendary3.png
diff --git a/IMG/Levels/Noob.png b/IMG/Levels/Noob.png
diff --git a/IMG/Levels/Pro.png b/IMG/Levels/Pro.png
diff --git a/IMG/Levels/Rare1.png b/IMG/Levels/Rare1.png
diff --git a/IMG/Levels/Rare2.png b/IMG/Levels/Rare2.png
diff --git a/IMG/Levels/extra.png b/IMG/Levels/extra.png
diff --git a/IMG/Levels/heheheha.png b/IMG/Levels/heheheha.png
diff --git a/achievements.html b/achievements.html
@@ -1,16 +1,157 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8"/>
     <title>Achievements</title>
     <link rel="stylesheet" href="CSS/style.css">
     <script src="JS/timeToLoad.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
+    <style>
+      html,
+      body {
+        position: relative;
+        height: 100%;
+      }
+
+      body {
+        background: #eee;
+        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        color: #000;
+        margin: 0;
+        padding: 0;
+      }
+
+      .swiper {
+        width: 250px;
+        height: 300px;
+        padding: 50px;
+      }
+
+      .swiper-slide {
+        background-position: center;
+        background-size: cover;
+        width: 250px;
+        height: 300px;
+      }
+
+      .swiper-slide img {
+        display: block;
+        width: 100%;
+      }
+      p {
+        font-size: 1vh, 1vw;
+        margin: 10px;
+      }
+    </style>
   </head>
   <body>
     <header class="header">
-        <h1 class="header__title">Achievements</h1>
-        <nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html" class="active">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
-    </header>
+      <h1 class="header__title">Achievements</h1>
+      <nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html">PRScoreboard</a> <a href="achievements.html" class="active">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
+  </header>
     <main class="body">
+      <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Noob.png" />
+            <p>Noob</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Amateur.png" />
+            <p>Amateur</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Pro.png" />
+            <p>Pro</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Rare1.png" />
+            <p>Swole lvl 1</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Rare2.png" />
+            <p>Swole lvl 2</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Epic1.png" />
+            <p>Cut lvl 1</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Legendary1.png" />
+            <p>Ripped</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Legendary2.png" />
+            <p>Yoked</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/Legendary3.png" />
+            <p>Jacked</p>
+          </div>
+          <div class="swiper-slide">
+            <img src="/IMG/Levels/extra.png" />
+            <p>Shredded</p>
+          </div>
+          <div class="swiper-slide" id="lastSlide">
+            <img src="/IMG/Levels/heheheha.png" />
+            <p><strong>ABSOLUTE UNIT</strong></p>
+          </div>
+        </div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-pagination"></div>
+      </div>
+
+      <audio id="randomAudio" controls style="display: none;">
+        <source src="" type="audio/mp3">
+        Your browser does not support the audio element.
+      </audio>
+
+
+      <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+      <script>
+        var swiper = new Swiper(".mySwiper", {
+          effect: "flip",
+          grabCursor: true,
+          pagination: {
+            el: ".swiper-pagination",
+          },
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+          },
+        });
+        var lastSlide = document.getElementById("lastSlide");
+        var audioElement = document.getElementById("randomAudio");
+        var audioSources = [
+          "/AUDIO/audio1.mp3",
+          "/AUDIO/audio2.mp3",
+          "/AUDIO/audio3.mp3",
+          "/AUDIO/audio4.mp3",
+          "/AUDIO/audio5.mp3",
+          "/AUDIO/audio6.mp3",
+          "/AUDIO/audio7.mp3",
+          "/AUDIO/audio8.mp3",
+          "/AUDIO/audio9.mp3",
+          // Add more audio sources as needed
+        ];
+
+        lastSlide.addEventListener("click", function () {
+          // Get a random audio source
+          var randomIndex = Math.floor(Math.random() * audioSources.length);
+          var randomAudioSource = audioSources[randomIndex];
+
+          // Set the source of the audio element
+          audioElement.src = randomAudioSource;
+
+          // Play the audio
+          audioElement.play();
+        });
+      </script>
     </main>
     <footer>
     </footer>

diff --git a/index.html b/index.html
@@ -57,54 +57,10 @@ <h3 class="body__section__title">How to supplement your training for optimal gai
                     <p class="body__section__paragraph">You can take multivitamins and omega 3's, but they are not
                         necessary, because can be derived from nutrition</p>
                 </li>
-
             </ol>
         </aside>
-        <section class="block_menu_news">
-            <div>
-                <h2> to be deleted </h2>
-            </div>
-            <table class="table_container">
-
-                <thead>
-                    <tr>
-                        <th> col1 </th>
-                        <th> col2 </th>
-                        <th> col3 </th>
-                        <th> col1 </th>
-                        <th> col2 </th>
-                        <th> col3 </th>
-
-                    </tr>
-                </thead>
-
-                <tbody>
-                    <tr>
-                        <td>el1</td>
-                        <td>el2</td>
-                        <td>el3</td>
-                        <td>el1</td>
-                        <td>el2</td>
-                        <td>el3</td>
-                    </tr>
-                    <tr>
-                        <td>el4</td>
-                        <td>el5</td>
-                        <td>el6</td>
-                        <td>el1</td>
-                        <td>el2</td>
-                        <td>el3</td>
-                    </tr>
-                    <tr>
-                        <td>el1</td>
-                        <td>el2</td>
-                        <td>el3</td>
-                        <td>el1</td>
-                        <td>el2</td>
-                        <td>el3</td>
-                    </tr>
-                </tbody>
-            </table>
+        <section class="achievementsCards">
+
         </section>
     </main>
     <footer class="footer">