templates/math.html

{% extends "base.html" %}
{% block title %}Math Tools | USSU Algorithm Analyzer v4.0{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h1>🔢 MATH TOOLS</h1>
    <p>Number theory, matrix operations, combinatorics, and complexity utilities.</p>
    <div class="header-line"></div>
</div>

<div class="grid grid-2">
    <div class="glass-card animate-in delay-1">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 16px;">Select Tool</h3>
        <form method="POST" id="mathForm">
            <div class="form-group">
                <label class="form-label">Tool</label>
                <select name="algo" class="form-select" id="mathAlgo" onchange="updateMathFields()">
                    <option value="factorial" selected>Factorial</option>
                    <option value="fibonacci">Fibonacci</option>
                    <option value="gcd">GCD</option>
                    <option value="extended_gcd">Extended GCD</option>
                    <option value="fast_power">Fast Power</option>
                    <option value="modular_power">Modular Exponentiation</option>
                    <option value="is_prime">Primality Test</option>
                    <option value="sieve">Sieve of Eratosthenes</option>
                    <option value="matrix_multiply">Matrix Multiplication</option>
                    <option value="tower_hanoi">Tower of Hanoi</option>
                    <option value="permutations">Permutations</option>
                </select>
            </div>
            <div id="mathFields">
                <div class="form-group">
                    <label class="form-label">n</label>
                    <input type="number" name="n" value="5" min="0" max="1000" class="form-input">
                </div>
            </div>
            <button type="submit" class="btn-liquid btn-liquid-glow">Calculate</button>
        </form>
    </div>

    <div class="glass-card animate-in delay-2">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 16px;">Tool Info</h3>
        <div class="algo-card">
            <h3>Euclidean GCD</h3>
            <span class="badge badge-cyan">O(log min(a,b))</span>
            <span class="badge badge-violet">O(1) Space</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Ancient algorithm for greatest common divisor. Foundation of modular arithmetic.</p>
        </div>
        <div class="algo-card">
            <h3>Sieve of Eratosthenes</h3>
            <span class="badge badge-cyan">O(n log log n)</span>
            <span class="badge badge-violet">O(n) Space</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Find all primes up to n. Most efficient prime generation algorithm.</p>
        </div>
        <div class="algo-card">
            <h3>Fast Exponentiation</h3>
            <span class="badge badge-cyan">O(log n)</span>
            <span class="badge badge-violet">O(1) Space</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Binary exponentiation. Critical for cryptography and modular arithmetic.</p>
        </div>
    </div>
</div>

{% if result %}
<div class="glass-card animate-in" style="margin-top: 24px;">
    <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">Result</h3>
    <div class="grid grid-4">
        <div class="metric-card">
            <div class="metric-label">Algorithm</div>
            <div class="metric-value" style="font-size: 14px;">{{ result.algorithm }}</div>
        </div>
        <div class="metric-card">
            <div class="metric-label">Time (ms)</div>
            <div class="metric-value">{{ "%.4f"|format(result.execution_time_ms) }}</div>
        </div>
        <div class="metric-card">
            <div class="metric-label">Memory</div>
            <div class="metric-value">{{ "%.2f"|format(result.memory_used_kb) }} <span style="font-size:10px;color:#64748b">KB</span></div>
        </div>
        <div class="metric-card">
            <div class="metric-label">Iterations</div>
            <div class="metric-value">{{ result.iterations }}</div>
        </div>
    </div>
    <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
        <div class="result-detail-card">
            <div class="result-detail-label">Recursions</div>
            <div class="result-detail-value">{{ result.recursions }}</div>
        </div>
        <div class="result-detail-card">
            <div class="result-detail-label">Complexity</div>
            <div class="result-detail-value" style="font-size: 14px;">{{ result.time_complexity }}</div>
        </div>
    </div>
        <div class="metric-card">
            <div class="metric-label">Time (ms)</div>
            <div class="metric-value">{{ "%.4f"|format(result.execution_time_ms) }}</div>
        </div>
        <div class="metric-card">
            <div class="metric-label">Iterations</div>
            <div class="metric-value">{{ result.iterations }}</div>
        </div>
        <div class="metric-card">
            <div class="metric-label">Recursions</div>
            <div class="metric-value">{{ result.recursions }}</div>
        </div>
    </div>
    <div class="code-block" style="margin-top: 16px;">
        {% if result.result is defined %}Result: {{ result.result }}<br>{% endif %}
        {% if result.sequence is defined %}Sequence: {{ result.sequence }}<br>{% endif %}
        {% if result.gcd is defined %}GCD: {{ result.gcd }}<br>{% endif %}
        {% if result.x is defined %}x: {{ result.x }} | y: {{ result.y }}<br>{% endif %}
        {% if result.is_prime is defined %}{{ result.n if result.n is defined else '' }} is {{ "prime" if result.is_prime else "not prime" }}<br>{% endif %}
        {% if result.primes is defined %}Primes: {{ result.primes }}<br>Count: {{ result.count }}<br>{% endif %}
        {% if result.result is defined and result.result is iterable and result.result is not string %}Matrix Result: {{ result.result }}<br>{% endif %}
        {% if result.moves is defined %}Total Moves: {{ result.total_moves }}<br>Moves: {{ result.moves }}<br>{% endif %}
        {% if result.permutations is defined %}Count: {{ result.count }}<br>Permutations: {{ result.permutations }}<br>{% endif %}
    </div>
</div>
{% endif %}
{% endblock %}
{% block extra_scripts %}
<script>
    const mathFieldsMap = {
        factorial: `<div class="form-group"><label class="form-label">n</label><input type="number" name="n" value="5" min="0" max="1000" class="form-input"></div>`,
        fibonacci: `
            <div class="form-group"><label class="form-label">n</label><input type="number" name="n" value="10" min="0" max="100" class="form-input"></div>
            <div class="form-group"><label class="form-label">Method</label><select name="method" class="form-select"><option value="iterative">Iterative</option><option value="memoization">Memoization</option><option value="recursive">Recursive</option></select></div>`,
        gcd: `
            <div class="form-group"><label class="form-label">a</label><input type="number" name="a" value="48" class="form-input"></div>
            <div class="form-group"><label class="form-label">b</label><input type="number" name="b" value="18" class="form-input"></div>`,
        extended_gcd: `
            <div class="form-group"><label class="form-label">a</label><input type="number" name="a" value="48" class="form-input"></div>
            <div class="form-group"><label class="form-label">b</label><input type="number" name="b" value="18" class="form-input"></div>`,
        fast_power: `
            <div class="form-group"><label class="form-label">Base</label><input type="number" name="base" value="2" step="0.1" class="form-input"></div>
            <div class="form-group"><label class="form-label">Exponent</label><input type="number" name="exp" value="10" class="form-input"></div>`,
        modular_power: `
            <div class="form-group"><label class="form-label">Base</label><input type="number" name="base" value="2" class="form-input"></div>
            <div class="form-group"><label class="form-label">Exponent</label><input type="number" name="exp" value="10" class="form-input"></div>
            <div class="form-group"><label class="form-label">Modulus</label><input type="number" name="mod" value="1000" class="form-input"></div>`,
        is_prime: `<div class="form-group"><label class="form-label">n</label><input type="number" name="n" value="97" class="form-input"></div>`,
        sieve: `<div class="form-group"><label class="form-label">Up to</label><input type="number" name="n" value="50" class="form-input"></div>`,
        matrix_multiply: `
            <div class="form-group"><label class="form-label">Matrix A (2x2, row by row)</label>
            <input type="text" name="a_0_0" value="1" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="a_0_1" value="2" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="a_1_0" value="3" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="a_1_1" value="4" class="form-input" style="width: 22%; display: inline-block;">
            </div>
            <div class="form-group"><label class="form-label">Matrix B (2x2, row by row)</label>
            <input type="text" name="b_0_0" value="5" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="b_0_1" value="6" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="b_1_0" value="7" class="form-input" style="width: 22%; display: inline-block;">
            <input type="text" name="b_1_1" value="8" class="form-input" style="width: 22%; display: inline-block;">
            </div>`,
        tower_hanoi: `<div class="form-group"><label class="form-label">Disks</label><input type="number" name="n" value="3" min="1" max="10" class="form-input"></div>`,
        permutations: `<div class="form-group"><label class="form-label">Array (space separated)</label><input type="text" name="arr" value="1 2 3" class="form-input"></div>`
    };
    function updateMathFields() {
        const algo = document.getElementById('mathAlgo').value;
        document.getElementById('mathFields').innerHTML = mathFieldsMap[algo] || '';
    }
</script>
{% endblock %}