anomaly-front-stats/templates/calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <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>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");
            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>
        <p class="divider">_</p>
        <div class="topnav" id="myTopnav">
            <div class="dropdown">
                <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">
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content" style="display: none;">
                    <a href="{{ url_for('index') }}">GUN STATS</a><br>
                    <a href="{{ url_for('about_us') }}">ABOUT US</a><br>
                    <a href="{{ url_for('suggestion') }}">SUGGESTIONS & FEEDBACK</a><br>
                    <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()">
    <br>
    <label for="weapon-select"></label>
    <select id="weapon-select" name="weapons">
        <option value="">Select a Weapon</option> <!-- This is the placeholder option -->
    </select>
    <br>
    <div id="guntype-filters">
        <label><input type="checkbox" id="primary" value="PRIMARY"> Primary</label>
        <label><input type="checkbox" id="secondary" value="SECONDARY"> Secondary</label>
        <label><input type="checkbox" id="ww2" value="WW2"> WW2</label>
        <label><input type="checkbox" id="soviet" value="SOVIET"> Soviet</label>
        <label><input type="checkbox" id="rifle" value="RIFLE"> Rifle</label>
        <label><input type="checkbox" id="smg" value="SMG"> SMG</label>
        <label><input type="checkbox" id="shotgun" value="SHOTGUN"> Shotgun</label>
        <label><input type="checkbox" id="lmg" value="LMG"> LMG</label>
        <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>
    <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
    <br>
    <label for="operative-select"></label>
    <select id="operative-select">
        <option value="">Select an operative</option> <!-- This is the placeholder 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="abilities"></div> <!-- Abilities go here -->
    </div>


    <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
</main>
</body>
</html>