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 | Combat Calculator</title>
</head>
<body class="af-body">
<header class="af-header">
    <div class="af-brand">
        <div class="af-logo" aria-hidden="true">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div>
            <p class="af-title">Anomaly Front</p>
            <p class="af-subtitle">Combat Calculator</p>
        </div>
    </div>
    <button class="af-nav-toggle" type="button" aria-expanded="false" aria-controls="af-nav">
        Menu
    </button>
    <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>
</header>
<main class="af-shell">
    <section class="af-hero">
        <div>
            <h1>Build a baseline weapon profile</h1>
            <p>
                Anomaly Front is still unreleased, so this calculator starts from scratch. Add your own
                placeholder values to explore pacing, time-to-eliminate, and reload cadence.
            </p>
        </div>
        <div class="af-status">
            <div>
                <p class="af-status-label">Stats library</p>
                <p class="af-status-value">No official stats yet</p>
            </div>
            <div>
                <p class="af-status-label">Modifier stack</p>
                <p class="af-status-value">Coming soon</p>
            </div>
            <div>
                <p class="af-status-label">Version</p>
                <p class="af-status-value">Foundation v0.1</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 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 class="af-callout">
                <h3>Placeholder roadmap</h3>
                <ul>
                    <li>Attachment tuning stacks</li>
                    <li>Operative perks &amp; passive bonuses</li>
                    <li>Armor breakpoints + elemental statuses</li>
                </ul>
            </div>
        </div>
    </section>

    <section class="af-grid">
        <div class="af-card">
            <div class="af-card-header">
                <h2>Modifier library</h2>
                <p>No live modifiers yet. Use this space to jot down prototype buffs.</p>
            </div>
            <div class="af-empty">
                <p>Modifier slots are empty.</p>
                <button type="button" class="af-muted-button">Add placeholder</button>
            </div>
        </div>
        <div class="af-card">
            <div class="af-card-header">
                <h2>Loadout notes</h2>
                <p>Capture ideas for upgrades, attachments, or role identity.</p>
            </div>
            <textarea class="af-notes" placeholder="Example: Assault rifle tuned for mid-range suppression."></textarea>
        </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');

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