anomaly-front-stats/templates/about_us.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>About | Anomaly Front Toolkit</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
</head>
<body class="af-body af-about-page">
<header class="af-header">
    <div class="af-brand">
        <div>
            <p class="af-title">Anomaly Front</p>
            <p class="af-subtitle">The Founders</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('calculator') }}">Calculator</a>
        <a class="af-nav-link" href="{{ url_for('suggestion') }}">Feedback</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-card">
        <div class="af-card-header">
            <h1>Hey there! You found the Anomaly Front Stats Page by Fretux and Losernoob124</h1>
        </div>

        <div class="af-about-hero">
            <div>
                <h2>Our Mission</h2>
                <p>
                    We created this platform to help the Anomaly Front community quickly and easily calculate gun DPS
                    and DPM.
                    No spreadsheets, no hassle. Whether you're theorycrafting a Deathwish loadout or comparing your
                    sidearms,
                    our tool’s built to support your grind.
                </p>
                <p>
                    Got ideas or stat suggestions? Hit us up on Discord or submit feedback via our Suggestions Page.
                </p>
            </div>
        </div>

        <h2>Our Story</h2>
        <p>
            It started with a spreadsheet... and frustration. Calculating DPS manually was tedious and we knew we could
            do better. What began as a side hobby by Losernoob124 was reignited by Fretux and evolved into a full web
            app
            through plenty of bug fixing, community help, and caffeine.
        </p>

        <div class="af-callout">
            <h3>Roadmap for the future</h3>
            <ul>
                <li>Add Weapon Stats</li>
                <li>Add Operative perks &amp; other modifiers</li>
            </ul>
        </div>

        <h2>The Team</h2>
        <ul class="af-list">
            <li>Fretux – Frontend Developer &amp; Data Specialist. Designs the UI and ensures stat accuracy.</li>
            <li>Losernoob124 – Backend Developer. Handles everything under the hood and makes sure the calculators
                work.
            </li>
        </ul>

        <h2>Frequently Asked Questions</h2>
        <h3>How do you calculate DPS and DPM?</h3>
        <p>
            We use data from Lanz1021's Stat Sheet, convert it into a JSON structure, and use it with formulas similar
            to what’s on the sheet.
        </p>
        <h3>How often are stats updated?</h3>
        <p>
            We update our database every time Anomaly Front releases a gameplay patch or changes weapon stats.
        </p>

        <h2>Special Thanks</h2>
        <div class="af-about-grid">
            <div class="af-about-card">
                <h3>gameknight90999 (holdenn)</h3>
                <p>Helped with various stat and weapon data and ideas</p>
            </div>
            <div class="af-about-card">
                <h3>Kris_HD1337:</h3>
                <p>Motivation + bug hunting</p>
            </div>
            <div class="af-about-card">
                <h3>Lanz1021</h3>
                <p>Feedback &amp; review</p>
            </div>
            <div class="af-about-card">
                <h3>YOU</h3>
                <p>For visiting — thank you!</p>
            </div>
        </div>
        <p>Thanks for using Anomaly Front Stats</p>
    </section>
</main>

<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>