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="/trlstats/static/img/TRL_Logo_Custom.jpg">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>DPM/DPS Calculator</title>
</head>
<header>
    <nav>
        <button class="hamburger" aria-label="Toggle menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </button>
        <div class="nav-menu">
            <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>
            <a href="https://discord.gg/2jDevH8aTd">OUR DISCORD</a>
        </div>
    </nav>
</header>
<body>
<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>
    </select>
    <button id="weapon-create">Create New Weapon</button>
    <div id="weapon-form">
        <div>
            <h2>New Weapon</h2>
            <form id="weaponForm">
                <label>
                    Name:<br>
                    <input type="text" name="name" required>
                </label><br><br>

                <label>
                    Damage:<br>
                    <input type="number" name="damage" min="0" required>
                </label><br><br>

                <label>
                    Rounds Per Minute:<br>
                    <input type="number" name="rpm" min="0" required>
                </label><br><br>

                <label>
                    Magazine Size:<br>
                    <input type="number" name="magazin" min="1" required>
                </label><br><br>

                <label>
                    Reload Time:<br>
                    <input type="number" name="reload-time" min="0" required>
                </label><br><br>

                <label>
                    Damage Multiplier:<br>
                    <input type="number" name="multiplier" min="0" required>
                </label><br><br>

                <label>
                    Weapon Type:<br>
                    <select name="gun-type" multiple>
                        <option value="PISTOL">Pistol</option>
                        <option value="SECONDARY">Secondary</option>
                        <option value="WW2">WW2</option>
                        <option value="RIFLE">Rifle</option>
                        <option value="SOVIET">Soviet</option>
                    </select>
                </label><br><br>

                <button type="submit">Create</button>
                <button type="button" id="weapon-cancel">Cancel</button>
            </form>
        </div>
    </div>
    <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>
    </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>
    </select><br>
    <div id="weapon-stats"></div>
    <div id="calculated-stats"></div>
    <h3>Operative Specific Modifiers</h3>
    <div id="operative-modifiers"></div>
    <div id="modifiers-container">
        <div id="modifiers"></div>
        <div id="abilities"></div>
    </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');
            })
        );
        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>
</html>