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="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>Anomaly Front | Weapon Factory</title>
</head>
<body class="af-body af-calculator-page">
<header class="af-header">
    <div class="af-brand">
        <div>
            <p class="af-title">Anomaly Front</p>
            <p class="af-subtitle">Weapon Factory</p>
        </div>
    </div>
    <nav class="af-nav" id="af-nav" aria-label="Primary">
        <a class="af-nav-link" href="{{ url_for('index') }}">Home</a>
        <a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</a>
        <a class="af-nav-link" href="{{ url_for('about_us') }}">About</a>
    </nav>
    <div class="af-header-actions">
        <button class="af-theme-toggle" type="button" aria-pressed="false">
            <span class="af-theme-toggle-label">Dark mode</span>
        </button>
        <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
            Menu
        </button>
    </div>
</header>
<main class="af-shell">
    <section class="af-hero">
        <div>
            <h1>The Weapon Factory</h1>
            <p>
                Anomaly Front is still unreleased. Start from a library weapon or add your own values to explore pacing,
                time-to-eliminate, and
                reload cadence.
            </p>
        </div>
        <div class="af-status">
            <div>
                <p class="af-status-label">Last Weapon Update</p>
                <p class="af-status-value">14.01.2026</p>
            </div>
            <div>
                <p class="af-status-label">Last Modifier Update</p>
                <p class="af-status-value">14.01.2026</p>
            </div>
            <div>
                <p class="af-status-label">Version</p>
                <p class="af-status-value">Foundation v0.2</p>
            </div>
        </div>
    </section>

    <section class="af-grid">
        <div class="af-card">
            <div class="af-card-header">
                <h2>Base inputs</h2>
                <p>Enter a prototype loadout and tweak values to see combat pacing.</p>
            </div>
            <form class="af-form" id="af-calculator">
                <label>
                    Weapon library
                    <select name="weaponSelect" id="af-weapon-select"
                            data-source="{{ url_for('static', filename='json/data.json') }}">
                        <option value="">Custom entry</option>
                    </select>
                    <span class="af-field-hint">Select a weapon to prefill values. You can still edit every field.</span>
                </label>
                <label>
                    Weapon name
                    <input type="text" name="weaponName" placeholder="Prototype AR" autocomplete="off">
                </label>
                <label>
                    Base damage
                    <input type="number" name="baseDamage" step="0.01" min="0" placeholder="32">
                </label>
                <label>
                    Projectiles per shot
                    <input type="number" name="projectiles" step="1" min="1" value="1">
                </label>
                <label>
                    Rate of fire (RPM)
                    <input type="number" name="rpm" step="0.1" min="0" placeholder="720">
                </label>
                <label>
                    Magazine size
                    <input type="number" name="magazine" step="1" min="0" placeholder="30">
                </label>
                <label>
                    Reload time (seconds)
                    <input type="number" name="reload" step="0.1" min="0" placeholder="2.4">
                </label>
                <label>
                    Target health (optional)
                    <input type="number" name="targetHealth" step="1" min="0" placeholder="200">
                </label>
                <div class="af-form-actions">
                    <button type="button" id="af-reset">Reset</button>
                    <button type="button" id="af-copy">Copy summary</button>
                </div>
            </form>
        </div>

        <div class="af-card">
            <div class="af-card-header">
                <h2>Calculated outputs</h2>
                <p>Instantly generated from the values you enter.</p>
            </div>
            <div class="af-metrics" id="af-metrics">
                <div class="af-metric">
                    <p class="af-metric-label">Damage per shot</p>
                    <p class="af-metric-value" data-output="shotDamage">--</p>
                </div>
                <div class="af-metric">
                    <p class="af-metric-label">Burst DPS</p>
                    <p class="af-metric-value" data-output="burstDps">--</p>
                </div>
                <div class="af-metric">
                    <p class="af-metric-label">Sustained DPS</p>
                    <p class="af-metric-value" data-output="sustainedDps">--</p>
                </div>
                <div class="af-metric">
                    <p class="af-metric-label">Time to empty</p>
                    <p class="af-metric-value" data-output="timeToEmpty">--</p>
                </div>
                <div class="af-metric">
                    <p class="af-metric-label">Magazine damage</p>
                    <p class="af-metric-value" data-output="magDamage">--</p>
                </div>
                <div class="af-metric">
                    <p class="af-metric-label">Time to eliminate</p>
                    <p class="af-metric-value" data-output="ttk">--</p>
                </div>
            </div>
        </div>
        <div class="af-card">
            <div class="af-card-header">
                <h2>Modifiers &amp; operatives</h2>
                <p>Stack items, perks, and abilities with operative-specific bonuses.</p>
            </div>
            <div class="af-modifier-stack" data-source="{{ url_for('static', filename='json/modifiers.json') }}">
                <label>
                    Operative
                    <select id="af-operative-select" name="operativeSelect"
                            data-source="{{ url_for('static', filename='json/operative.json') }}">
                        <option value="">No operative selected</option>
                    </select>
                    <span class="af-field-hint">Pick an operative to load their unique modifiers.</span>
                </label>

                <p class="af-field-hint">Expand each section to keep the page compact while you tweak modifiers.</p>

                <details class="af-details">
                    <summary>Operative modifiers</summary>
                    <div class="af-modifier-subset">
                        <div class="af-checkbox-grid" id="af-operative-modifiers">
                            <p class="af-empty-hint">Select an operative to see perk modifiers.</p>
                        </div>
                    </div>
                </details>

                <details class="af-details">
                    <summary>Item buffs</summary>
                    <div class="af-modifier-subset">
                        <div class="af-checkbox-grid" id="af-item-modifiers"></div>
                    </div>
                </details>

                <details class="af-details">
                    <summary>Operative perks</summary>
                    <div class="af-modifier-subset">
                        <div class="af-checkbox-grid" id="af-perk-modifiers"></div>
                    </div>
                </details>

                <details class="af-details">
                    <summary>Ability perks</summary>
                    <div class="af-modifier-subset">
                        <div class="af-checkbox-grid" id="af-ability-modifiers"></div>
                    </div>
                </details>
            </div>

            <div class="af-active-modifiers">
                <p class="af-modifier-title">Active stack</p>
                <div class="af-tag-list" id="af-active-modifiers">
                    <span class="af-tag">No modifiers selected</span>
                </div>
            </div>
        </div>
    </section>
</main>
<script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
<script>
    const navToggle = document.querySelector('.af-nav-toggle');
    const nav = document.getElementById('af-nav');
    const themeToggle = document.querySelector('.af-theme-toggle');
    const themeLabel = document.querySelector('.af-theme-toggle-label');
    const THEME_KEY = 'af-theme';

    const setTheme = (theme) => {
        document.body.classList.toggle('theme-dark', theme === 'dark');
        document.body.classList.toggle('theme-light', theme === 'light');
        themeToggle.setAttribute('aria-pressed', theme === 'dark');
        themeLabel.textContent = theme === 'dark' ? 'Light mode' : 'Dark mode';
        localStorage.setItem(THEME_KEY, theme);
    };

    const storedTheme = localStorage.getItem(THEME_KEY);
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));

    themeToggle.addEventListener('click', () => {
        const isDark = document.body.classList.contains('theme-dark');
        setTheme(isDark ? 'light' : 'dark');
    });

    navToggle.addEventListener('click', () => {
        const isOpen = nav.classList.toggle('is-open');
        navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
    });
</script>
</body>
</html>