Revamp navigation UI with modern hamburger menu

static/style.css

@@ -381,8 +381,92 @@ textarea {
     color: black;
 }
 
-/* Horizontal styling specifically for the table */
 .horizontal-table tr:first-child th {
     text-align: center;
     font-weight: bold;
 }
+
+.hamburger {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  cursor: pointer;
+  z-index: 2000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+.hamburger .bar {
+  width: 100%;
+  height: 0.4rem;
+  background-color: #fff;
+  border-radius: 2px;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.hamburger .bar {
+  transform-origin: left center;
+}
+
+.hamburger .bar {
+  width: 100%;
+  height: 0.4rem;
+  background-color: #fff;
+  margin: 0.15rem 0;
+  transition: transform 0.3s ease, width 0.3s ease, opacity 0.3s ease;
+}
+
+.hamburger.active .bar:nth-child(1) {
+  transform: translate(8px, 8px) rotate(45deg);
+  width: 60%;
+}
+
+.hamburger.active .bar:nth-child(2) {
+  transform: translateX(10px);
+  width: 80%;
+}
+
+.hamburger.active .bar:nth-child(3) {
+  transform: translate(8px, -8px) rotate(-45deg);
+  width: 60%;
+}
+
+.nav-menu {
+  position: fixed;
+  top:     0;
+  right:  -100%;
+  width:   250px;
+  height:  100vh;
+  background-color: rgba(255, 255, 255, 0.95);
+  display: flex;
+  flex-direction: column;
+  padding: 4rem 1.5rem;
+  gap:     1.5rem;
+  box-shadow: -4px 0 8px rgba(0,0,0,0.1);
+  transition: right 0.3s ease;
+  z-index: 1500;
+}
+.nav-menu a {
+  color: #333;
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+.nav-menu a:hover {
+  color: #4CAF50;
+}
+
+.nav-menu.active {
+  right: 0;
+}
+
+body.menu-open {
+  overflow: hidden;
+}

templates/about_us.html

@@ -7,57 +7,35 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <title>About Us</title>
     <script>
-        function myFunction() {
-            var x = document.getElementById("myTopnav");
-            if (x.className === "topnav") {
-                x.className += " responsive";
-            } else {
-                x.className = "topnav";
-            }
-        }
-
-        function toggleDropdown() {
-            var dropdownContent = document.querySelector(".dropdown-content");
-            // Toggle the display property between 'block' and 'none'
-            if (dropdownContent.style.display === "block") {
-                dropdownContent.style.display = "none";
-            } else {
-                dropdownContent.style.display = "block";
-            }
-        }
     </script>
 </head>
 <header>
     <nav>
-        <p class="divider">_</p>
+        <button class="hamburger" aria-label="Toggle menu">
-        <div class="topnav" id="myTopnav">
+            <span class="bar"></span>
-            <div class="dropdown">
+            <span class="bar"></span>
-                <button class="dropbtn" onclick="toggleDropdown()"><img
+            <span class="bar"></span>
-                        src="/static/img/menu-list-icon-app-navigation-option-page-interface-dropdown-three-lines-button-dots-sign-symbol-black-artwork-graphic-illustration-clipart-eps-vector.jpg"
-                        height="50" width="50">
-                    <i class="fa fa-caret-down"></i>
         </button>
-                <div class="dropdown-content" style="display: none;">
+        <div class="nav-menu">
-                    <a href="{{ url_for('index') }}">GUN STATS</a><br>
+            <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
-                    <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a><br>
+            <a href="{{ url_for('about_us') }}">ABOUT US</a>
-                    <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a><br>
+            <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
             <a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
         </div>
-            </div>
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
-        </div>
     </nav>
 </header>
 <body class="background-image">
 <main>
     <h1>About Us</h1>
-    <h3><b>Hey there!</b> You seem to have stumbled upon the TRL Stat Page created by <b>Fretux</b> and <b>Losernoob124!</b></h3><br>
+    <h3><b>Hey there!</b> You seem to have stumbled upon the TRL Stat Page created by <b>Fretux</b> and
+        <b>Losernoob124!</b></h3><br>
     <h2>Our Mission</h2>
     <p class="about_us_text">This website exists because we want to provide the
         TRL Community with an easy go-to way to calculate DPS and DPM values to help players make informed decisions
         about their gameplay. Whether you're fine-tuning your new Deathwish Strategy or simply curious about firearm
         performance, we’ve got you covered. If you have suggestions, feedback, or want to contribute new stats or
-    features, we’d love to hear from you, just contact us on Discord or on the <a href="{{ url_for('suggestion') }}">Suggestion Page!</a>
+        features, we’d love to hear from you, just contact us on Discord or on the <a
+                href="{{ url_for('suggestion') }}">Suggestion Page!</a>
     </p>
     <h2>Our Story</h2>
     <p class="about_us_text">
@@ -81,22 +59,44 @@
     <p class="about_us_text"><b>How do you calculate DPS and DPM?</b></p>
     <p class="about_us_text">We put the data given by
         <a href="https://docs.google.com/spreadsheets/d/1hGGLMOKB5Tj3FSo38HX7WbIvOmMbgfE5ZApTSOZgnS8/edit?gid=0#gid=0">Lanz1021's
-            Stat Sheet</a> into a <a href="https://www.w3schools.com/whatis/whatis_json.asp">.JSON (Javascript Object Notation)</a> file, which we use to calculate the DPS
+            Stat Sheet</a> into a <a href="https://www.w3schools.com/whatis/whatis_json.asp">.JSON (Javascript Object
-        (damage per second) and DPM (damage per minute) of each weapon via a formula that is also mentioned on Lanz1021' Spreadsheet.</p>
+            Notation)</a> file, which we use to calculate the DPS
+        (damage per second) and DPM (damage per minute) of each weapon via a formula that is also mentioned on Lanz1021'
+        Spreadsheet.</p>
 
     <p class="about_us_text"><b>How often are stats updated?</b></p>
     <p class="about_us_text">We update the weapon stats every time a new update is released for TRL.</p>
     <h2>Special Thanks</h2>
     <p class="about_us_text">
-        <b>gameknight90999(holdenn/holdenisch)</b>: For telling me what Sandevistan does. (The wiki doesn't tell what it does, lol)<br>
+        <b>gameknight90999(holdenn/holdenisch)</b>: For telling me what Sandevistan does. (The wiki doesn't tell what it
-        <b>delete(real_delete)</b>: For the info about the 'Weapon Expert' perk (I don't know where else I would've found that).<br>
+        does, lol)<br>
-        <b>Epicdragon99999999(epicdog999)</b>: For helping me categorize WW2 and Soviet weapons (I don't think I would've thought about the PKM)<br>
+        <b>delete(real_delete)</b>: For the info about the 'Weapon Expert' perk (I don't know where else I would've
-        <b>NocturnalAndrea(nocturnalandrea)</b>: For helping me categorize Semi-auto weapons (again, why isn't this listed on the wiki?)<br>
+        found that).<br>
+        <b>Epicdragon99999999(epicdog999)</b>: For helping me categorize WW2 and Soviet weapons (I don't think I
+        would've thought about the PKM)<br>
+        <b>NocturnalAndrea(nocturnalandrea)</b>: For helping me categorize Semi-auto weapons (again, why isn't this
+        listed on the wiki?)<br>
         <b>Kris HD(krishd1337)</b>: For the motivation and help with finding bugs.<br>
         <b>Lanz1021</b>: For reviewing and giving feedback.<br>
         <b>AND YOU!</b>: We are thankful for every visitor we get on this website, and we hope you're enjoying it!
     </p>
     <h3 class="about_us_text">Thank you for visiting <b>TRL Stats</b>.</h3>
+    <script>
+        const hamburger = document.querySelector('.hamburger');
+        const navMenu = document.querySelector('.nav-menu');
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            navMenu.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+        });
+        navMenu.querySelectorAll('a').forEach(link =>
+            link.addEventListener('click', () => {
+                hamburger.classList.remove('active');
+                navMenu.classList.remove('active');
+                document.body.classList.remove('menu-open');
+            })
+        );
+    </script>
 </main>
 </body>
 </html>

templates/calculator.html

@@ -7,25 +7,6 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <title>DPM/DPS Calculator</title>
     <script>
-        function myFunction() {
-            var x = document.getElementById("myTopnav");
-            if (x.className === "topnav") {
-                x.className += " responsive";
-            } else {
-                x.className = "topnav";
-            }
-        }
-
-        function toggleDropdown() {
-            var dropdownContent = document.querySelector(".dropdown-content");
-            // Toggle the display property between 'block' and 'none'
-            if (dropdownContent.style.display === "block") {
-                dropdownContent.style.display = "none";
-            } else {
-                dropdownContent.style.display = "block";
-            }
-        }
-
         // Collapsible functionality for perks, buffs, etc.
         document.addEventListener('DOMContentLoaded', function () {
             var coll = document.getElementsByClassName("collapsible-header");
@@ -45,29 +26,20 @@
 </head>
 <header>
     <nav>
-        <p class="divider">_</p>
+        <button class="hamburger" aria-label="Toggle menu">
-        <div class="topnav" id="myTopnav">
+            <span class="bar"></span>
-            <div class="dropdown">
+            <span class="bar"></span>
-                <button class="dropbtn" onclick="toggleDropdown()"><img
+            <span class="bar"></span>
-                        src="/static/img/menu-list-icon-app-navigation-option-page-interface-dropdown-three-lines-button-dots-sign-symbol-black-artwork-graphic-illustration-clipart-eps-vector.jpg"
-                        height="50" width="50">
-                    <i class="fa fa-caret-down"></i>
         </button>
-                <div class="dropdown-content" style="display: none;">
+        <div class="nav-menu">
-                    <a href="{{ url_for('index') }}">GUN STATS</a><br>
+            <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
-                    <a href="{{ url_for('about_us') }}">ABOUT US</a><br>
+            <a href="{{ url_for('about_us') }}">ABOUT US</a>
-                    <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a><br>
+            <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
             <a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
         </div>
-            </div>
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
-        </div>
     </nav>
 </header>
 <body>
-<header>
-
-</header>
 <main>
     <label for="weapon-search"></label>
     <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
@@ -112,9 +84,23 @@
         <div id="modifiers"></div> <!-- Items and Perks go here -->
         <div id="abilities"></div> <!-- Abilities go here -->
     </div>
-
-
     <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
+    <script>
+        const hamburger = document.querySelector('.hamburger');
+        const navMenu = document.querySelector('.nav-menu');
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            navMenu.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+        });
+        navMenu.querySelectorAll('a').forEach(link =>
+            link.addEventListener('click', () => {
+                hamburger.classList.remove('active');
+                navMenu.classList.remove('active');
+                document.body.classList.remove('menu-open');
+            })
+        );
+    </script>
 </main>
 </body>
 </html>

templates/index.html

@@ -6,44 +6,20 @@
     <link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
     <title>Gun Stats</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-    <script>
-        function myFunction() {
-            var x = document.getElementById("myTopnav");
-            if (x.className === "topnav") {
-                x.className += " responsive";
-            } else {
-                x.className = "topnav";
-            }
-        }
-
-        function toggleDropdown() {
-            var dropdownContent = document.querySelector(".dropdown-content");
-            // Toggle the display property between 'block' and 'none'
-            if (dropdownContent.style.display === "block") {
-                dropdownContent.style.display = "none";
-            } else {
-                dropdownContent.style.display = "block";
-            }
-        }
-    </script>
 </head>
 <header>
     <nav>
-        <p class="divider">_</p>
+        <button class="hamburger" aria-label="Toggle menu">
-        <div class="topnav" id="myTopnav">
+            <span class="bar"></span>
-            <div class="dropdown">
+            <span class="bar"></span>
-                <button class="dropbtn" onclick="toggleDropdown()"><img src="/static/img/menu-list-icon-app-navigation-option-page-interface-dropdown-three-lines-button-dots-sign-symbol-black-artwork-graphic-illustration-clipart-eps-vector.jpg" height="50" width="50">
+            <span class="bar"></span>
-                    <i class="fa fa-caret-down"></i>
         </button>
-                <div class="dropdown-content" style="display: none;">
+        <div class="nav-menu">
-                    <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a><br>
+            <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
-                    <a href="{{ url_for('about_us') }}">ABOUT US</a><br>
+            <a href="{{ url_for('about_us') }}">ABOUT US</a>
-                    <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a><br>
+            <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
             <a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
         </div>
-            </div>
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
-        </div>
     </nav>
 </header>
 <body class="background-image">
@@ -72,6 +48,22 @@
     </table>
     <script src="{{ url_for('static', filename='populateTable.js') }}"></script>
     <script src="{{ url_for('static', filename='filterTable.js') }}"></script>
+    <script>
+        const hamburger = document.querySelector('.hamburger');
+        const navMenu = document.querySelector('.nav-menu');
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            navMenu.classList.toggle('active');
+            document.body.classList.toggle('menu-open');
+        });
+        navMenu.querySelectorAll('a').forEach(link =>
+            link.addEventListener('click', () => {
+                hamburger.classList.remove('active');
+                navMenu.classList.remove('active');
+                document.body.classList.remove('menu-open');
+            })
+        );
+    </script>
 </main>
 </body>
 </html>

templates/suggestion.html

@@ -1,57 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8">
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <title>Suggestion</title>
-    <script>
-        function myFunction() {
-            var x = document.getElementById("myTopnav");
-            if (x.className === "topnav") {
-                x.className += " responsive";
-            } else {
-                x.className = "topnav";
-            }
-        }
-
-        function toggleDropdown() {
-            var dropdownContent = document.querySelector(".dropdown-content");
-            // Toggle the display property between 'block' and 'none'
-            if (dropdownContent.style.display === "block") {
-                dropdownContent.style.display = "none";
-            } else {
-                dropdownContent.style.display = "block";
-            }
-        }
-    </script>
 </head>
 <header>
     <nav>
-        <p class="divider">_</p>
+        <button class="hamburger" aria-label="Toggle menu">
-        <div class="topnav" id="myTopnav">
+            <span class="bar"></span>
-            <div class="dropdown">
+            <span class="bar"></span>
-                <button class="dropbtn" onclick="toggleDropdown()"><img
+            <span class="bar"></span>
-                        src="/static/img/menu-list-icon-app-navigation-option-page-interface-dropdown-three-lines-button-dots-sign-symbol-black-artwork-graphic-illustration-clipart-eps-vector.jpg"
-                        height="50" width="50">
-                    <i class="fa fa-caret-down"></i>
         </button>
-                <div class="dropdown-content" style="display: none;">
+        <div class="nav-menu">
-                    <a href="{{ url_for('index') }}">GUN STATS</a><br>
+            <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
-                    <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a><br>
+            <a href="{{ url_for('about_us') }}">ABOUT US</a>
-                    <a href="{{ url_for('about_us') }}">ABOUT US</a><br>
+            <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
             <a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
         </div>
-            </div>
-            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
-        </div>
     </nav>
 </header>
 <body>
-    <main class="background-image">
+<main class="background-image">
     <h1>Suggestion</h1>
-        <h3 class="suggestion-title"><b>Welcome to Suggestions!</b><br> We encourage you to share your ideas, improvments, or even fun comments with us, so we can develop this website further.</h3>
+    <h3 class="suggestion-title"><b>Welcome to Suggestions!</b><br> We encourage you to share your ideas, improvments,
+        or even fun comments with us, so we can develop this website further.</h3>
     <article>
         <label for="name">Pseudoname:</label>
         <input type="text" id="name" name="name" placeholder="not required"><br><br>
@@ -60,14 +35,30 @@
         <input type="number" id="rate" name="rating" min="1" max="10" required><br><br>
 
         <label for="text">Text:</label>
-            <textarea id="text" name="text" rows="4" cols="50" placeholder="Enter your comments here..." minlength="5" maxlength="500" required></textarea><br><br>
+        <textarea id="text" name="text" rows="4" cols="50" placeholder="Enter your comments here..." minlength="5"
+                  maxlength="500" required></textarea><br><br>
     </article>
     <button class="button1" type="button" onclick="sendMessage()">Send</button>
 
     <!-- Success message (initially hidden) -->
     <p id="successMessage" style="display: none; color: green;"></p>
-    </main>
+</main>
-    <script src="{{ url_for('static', filename='suggestion.js') }}"></script>
+<script src="{{ url_for('static', filename='suggestion.js') }}"></script>
-
+<script>
+    const hamburger = document.querySelector('.hamburger');
+    const navMenu = document.querySelector('.nav-menu');
+    hamburger.addEventListener('click', () => {
+        hamburger.classList.toggle('active');
+        navMenu.classList.toggle('active');
+        document.body.classList.toggle('menu-open');
+    });
+    navMenu.querySelectorAll('a').forEach(link =>
+        link.addEventListener('click', () => {
+            hamburger.classList.remove('active');
+            navMenu.classList.remove('active');
+            document.body.classList.remove('menu-open');
+        })
+    );
+</script>
 </body>
 </html>