Update UI, improve navigation, and refine About Us content

static/filterTable.js

@@ -3,7 +3,6 @@ function filterTable() {
     const filter = input.value.toLowerCase();
     const table = document.getElementById('gun-stats');
     const tr = table.getElementsByTagName('tr');
-
     for (let i = 1; i < tr.length; i++) {
         const td = tr[i].getElementsByTagName('td')[1];
         if (td) {

static/style.css

@@ -24,7 +24,7 @@ input[type="text"] {
 }
 
 body {
-    background-image: url("/static/img/trlbg1.jpg");
+    background-image: url("/trlstats/static/img/trlbg1.jpg");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
@@ -39,14 +39,14 @@ header nav {
 }
 
 header nav a {
-    color: #4CAF50;
+    color: red;
     text-decoration: none;
     font-weight: bold;
     padding: 10px 20px;
 }
 
 header nav a:hover {
-    color: gray;
+    color: red;
 }
 
 h1 {
@@ -85,14 +85,14 @@ th {
 
 button {
     padding: 5px 10px;
-    background-color: #4CAF50;
+    background-color: red;
     color: white;
     border: none;
     cursor: pointer;
 }
 
 button:hover {
-    background-color: #45a049;
+    background-color: red;
 }
 
 input {
@@ -318,7 +318,7 @@ textarea {
 
 /* Button hover effect */
 .button1:hover {
-    background-color: #45a049;
+    background-color: red;
     transform: scale(1.05);
 }
 
@@ -330,7 +330,6 @@ textarea {
     margin-top: 20px;
 }
 
-/* Adjustments for mobile responsiveness */
 @media screen and (max-width: 600px) {
     input[type="text"], input[type="number"], textarea {
         width: 80%;
@@ -342,14 +341,13 @@ textarea {
     }
 
     #modifiers {
-        width: 100%; /* Adjust this percentage to control the width */
+        width: 100%;
     }
 
     #abilities {
         width: 100%;
     }
 
-    /* Adjust spacing between different ability modifiers */
     #abilities label {
         display: block;
         margin-bottom: 10px;
@@ -357,13 +355,11 @@ textarea {
         white-space: nowrap;
     }
 
-    /* Optional: Adjust margin between checkbox and text */
     #abilities input[type="checkbox"] {
         margin-right: 5px;
     }
 }
 
-/* Styling for horizontal table */
 .weapon-stats-table {
     width: 100%;
     border-collapse: collapse;
@@ -373,7 +369,7 @@ textarea {
 .weapon-stats-table th, .weapon-stats-table td {
     border: 1px solid #ddd;
     padding: 8px;
-    text-align: center; /* Centers the text */
+    text-align: center;
 }
 
 .weapon-stats-table th {
@@ -459,9 +455,6 @@ textarea {
   font-size: 1.1rem;
   font-weight: 500;
 }
-.nav-menu a:hover {
-  color: #4CAF50;
-}
 
 .nav-menu.active {
   right: 0;

templates/about_us.html

@@ -1,14 +1,111 @@
 <!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">
+    <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">
+    <title>About Us - TRL Stats</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="icon" type="image/x-icon" href="/trlstats/static/img/TRL_Logo_Custom.jpg"/>
-    <title>About Us</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
-    <script>
+    <style>
-    </script>
+        main {
+            background-color: rgba(255, 255, 255, 0.92);
+            margin: 8vh auto;
+            padding: 40px;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 900px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            color: #111;
+        }
+
+        h2 {
+            margin-top: 2rem;
+            color: #222;
+            font-size: 1.8rem;
+            border-left: 5px solid red;
+            padding-left: 12px;
+        }
+
+        h3 {
+            font-size: 1.3rem;
+            margin-top: 1.5rem;
+            color: #333;
+        }
+
+        .about_us_text {
+            font-size: 1.05rem;
+            line-height: 1.7;
+            margin-top: 1rem;
+            color: #444;
+        }
+
+        .highlight {
+            font-weight: bold;
+            color: #d32f2f;
+        }
+
+        a {
+            color: red;
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        .team-section {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .team-member {
+            background-color: #f7f7f7;
+            padding: 15px 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+        }
+
+        .thanks-section {
+            background-color: #fff;
+            padding: 20px;
+            border-left: 4px solid red;
+            border-radius: 6px;
+            margin-top: 1.5rem;
+        }
+
+        .faq p {
+            margin-top: 0.5rem;
+        }
+
+        /* Responsive */
+        @media screen and (max-width: 600px) {
+            main {
+                padding: 25px;
+            }
+
+            h1 {
+                font-size: 2rem;
+            }
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            .about_us_text {
+                font-size: 0.95rem;
+            }
+        }
+    </style>
 </head>
+
+<body>
 <header>
     <nav>
         <button class="hamburger" aria-label="Toggle menu">
@@ -21,59 +118,74 @@
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <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>
+            <a href="https://discord.gg/2jDevH8aTd">OUR DISCORD</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 found the TRL Stats Page by <b>Fretux</b> and <b>Losernoob124</b> 🎯</h3>
+
     <h2>Our Mission</h2>
-    <p class="about_us_text">This website exists because we want to provide the
+    <p class="about_us_text">
-        TRL Community with an easy go-to way to calculate DPS and DPM values to help players make informed decisions
+        We created this platform to help the TRL community quickly and easily calculate gun DPS and DPM — no
-        about their gameplay. Whether you're fine-tuning your new Deathwish Strategy or simply curious about firearm
+        spreadsheets, no hassle. Whether you're theorycrafting a Deathwish loadout or comparing your sidearms, our
-        performance, we’ve got you covered. If you have suggestions, feedback, or want to contribute new stats or
+        tool’s built to support your grind.
-        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>
+    <p class="about_us_text">
+        Got ideas or stat suggestions? Hit us up on Discord or submit feedback via our <a
+            href="{{ url_for('suggestion') }}">Suggestions Page</a>.
+    </p>
+
     <h2>Our Story</h2>
     <p class="about_us_text">
-        In the beginning, the only way to calculate DPS/DPM stats for certain operatives was, by using the Spreadsheet
+        It started with a spreadsheet... and frustration. Calculating DPS manually was tedious — and we knew we could do
-        by Lanz1021 and a calculator, which quickly turned out to be (shockers) really annoying. TRL Stats started out
+        better. What began as a side hobby by Losernoob124 was reignited by Fretux and evolved into a full web app
-        as a side project, initially started by Losernoob124 to calculate gun stats more easily, but given up one after
+        through plenty of bug fixing, community help, and caffeine.
-        a couple of weeks. Eventually Fretux started working on it again and what initially was just a fun hobby grew
-        into something much bigger, and through the help of Stack Overflow and many hours of programming, we
-        turned it into a full-fledged website.
     </p>
-    <h2>The Team</h2>
-    <p class="about_us_text">
-        <b>Fretux</b> - Frontend Developer and Data Specialist. Responsible for the designing of the website and making
-        sure the gun stats are accurate and up to date.
-    </p>
-    <p class="about_us_text">
-        <b>Losernoob124</b> - Backend Developer. Responsible for all the scripts that make sure the website functions
-        correctly.
-    </p>
-    <h2>Frequently Asked Questions</h2>
-    <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
-        (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>
+    <h2>The Team</h2>
-    <p class="about_us_text">We update the weapon stats every time a new update is released for TRL.</p>
+    <div class="team-section">
-    <h2>Special Thanks</h2>
+        <div class="team-member">
+            <b>Fretux</b> – Frontend Developer & Data Specialist. Designs the UI and ensures stat accuracy.
+        </div>
+        <div class="team-member">
+            <b>Losernoob124</b> – Backend Developer. Handles everything under the hood and makes sure the calculators
+            work.
+        </div>
+    </div>
+
+    <h2>Frequently Asked Questions</h2>
+    <div class="faq">
+        <p><b>How do you calculate DPS and DPM?</b></p>
         <p class="about_us_text">
-        <b>gameknight90999(holdenn/holdenisch)</b>: For supporting us with various informations, helping us add some unmentioned Balance Changes and overall supporting us all the way through development.<br>
+            We use data from <a
-        <b>Kris HD(krishd1337)</b>: For the motivation and help with finding bugs.<br>
+                href="https://docs.google.com/spreadsheets/d/1hGGLMOKB5Tj3FSo38HX7WbIvOmMbgfE5ZApTSOZgnS8/edit?gid=0#gid=0"
-        <b>Lanz1021</b>: For reviewing and giving feedback.<br>
+                target="_blank">Lanz1021's Stat Sheet</a>, convert it into a JSON structure, and use it with formulas
-        <b>AND YOU!</b>: We are thankful for every visitor we get on this website, and we hope you're enjoying it!
+            similar to what’s on the sheet.
         </p>
-    <h3 class="about_us_text">Thank you for visiting <b>TRL Stats</b>.</h3>
+
+        <p><b>How often are stats updated?</b></p>
+        <p class="about_us_text">
+            We update our database every time TRL releases a gameplay patch or changes weapon stats.
+        </p>
+    </div>
+
+    <h2>Special Thanks 🙏</h2>
+    <div class="thanks-section">
+        <p><b>gameknight90999 (holdenn)</b>: Helped with various stat and weapon data and ideas</p>
+        <p><b>Kris HD</b>: Motivation + bug hunting</p>
+        <p><b>Lanz1021</b>: Feedback & review</p>
+        <p><b>YOU</b>: For visiting — thank you!</p>
+    </div>
+
+    <h3 class="about_us_text" style="text-align: center; margin-top: 2rem;">
+        Thanks for using <b>TRL Stats</b> 💚
+    </h3>
+</main>
+
 <script>
     const hamburger = document.querySelector('.hamburger');
     const navMenu = document.querySelector('.nav-menu');
@@ -90,6 +202,5 @@
         })
     );
 </script>
-</main>
 </body>
 </html>

templates/calculator.html

@@ -6,23 +6,6 @@
     <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>DPM/DPS Calculator</title>
-    <script>
-        // Collapsible functionality for perks, buffs, etc.
-        document.addEventListener('DOMContentLoaded', function () {
-            var coll = document.getElementsByClassName("collapsible-header");
-            for (var i = 0; i < coll.length; i++) {
-                coll[i].addEventListener("click", function () {
-                    this.classList.toggle("active");
-                    var content = this.nextElementSibling;
-                    if (content.style.display === "block") {
-                        content.style.display = "none";
-                    } else {
-                        content.style.display = "block";
-                    }
-                });
-            }
-        });
-    </script>
 </head>
 <header>
     <nav>
@@ -32,7 +15,7 @@
             <span class="bar"></span>
         </button>
         <div class="nav-menu">
-            <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
+            <a href="{{ url_for('index') }}">GUN STATS</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
             <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>
@@ -47,7 +30,7 @@
     <br>
     <label for="weapon-select"></label>
     <select id="weapon-select" name="weapons">
-        <option value="">Select a Weapon</option> <!-- This is the placeholder option -->
+        <option value="">Select a Weapon</option>
     </select>
     <br>
     <div id="guntype-filters">
@@ -62,7 +45,6 @@
         <label><input type="checkbox" id="pistol" value="PISTOL"> Pistol</label>
         <label><input type="checkbox" id="special" value="SPECIAL"> Special</label>
         <label><input type="checkbox" id="semi-auto" value="SEMI-AUTO"> Semi-Auto</label>
-        <!-- Add more gun types as needed -->
     </div>
 
     <label for="operative-search"></label>
@@ -70,20 +52,15 @@
     <br>
     <label for="operative-select"></label>
     <select id="operative-select">
-        <option value="">Select an operative</option> <!-- This is the placeholder option -->
+        <option value="">Select an operative</option>
     </select><br>
-
-    <!-- Weapon Stats Display -->
     <div id="weapon-stats"></div>
     <div id="calculated-stats"></div>
-
     <h3>Operative Specific Modifiers</h3>
     <div id="operative-modifiers"></div>
-
-    <!-- Modifiers Display -->
     <div id="modifiers-container">
-        <div id="modifiers"></div> <!-- Items and Perks go here -->
+        <div id="modifiers"></div>
-        <div id="abilities"></div> <!-- Abilities go here -->
+        <div id="abilities"></div>
     </div>
     <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
     <script>
@@ -101,6 +78,20 @@
                 document.body.classList.remove('menu-open');
             })
         );
+        document.addEventListener('DOMContentLoaded', function () {
+            var coll = document.getElementsByClassName("collapsible-header");
+            for (var i = 0; i < coll.length; i++) {
+                coll[i].addEventListener("click", function () {
+                    this.classList.toggle("active");
+                    var content = this.nextElementSibling;
+                    if (content.style.display === "block") {
+                        content.style.display = "none";
+                    } else {
+                        content.style.display = "block";
+                    }
+                });
+            }
+        });
     </script>
 </main>
 </body>

templates/suggestion.html

@@ -17,7 +17,7 @@
         <div class="nav-menu">
             <a href="{{ url_for('calculator') }}">DPS/DPM CALCULATOR</a>
             <a href="{{ url_for('about_us') }}">ABOUT US</a>
-            <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a>
+            <a href="{{ url_for('index') }}">GUN STATS</a>
             <a href="https://www.roblox.com/games/5766084948/SCP-The-Red-Lake-EVENT">PLAY THE RED LAKE</a>
             <a href="https://discord.gg/2jDevH8aTd">OUR DISCORD</a>
         </div>