<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Analizzatore Equazioni - Leonardo Pasini</title>

    <style>

        /* --- STILI INTERFACCIA GRAFICA --- */

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: #f4f7f6;

            margin: 0;

            min-height: 100vh;

            display: flex;

            flex-direction: column;

            color: #2c3e50;

        }

        #main-app { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; }

        .container {

            background: white; padding: 2.5rem; border-radius: 15px;

            box-shadow: 0 10px 25px rgba(0,0,0,0.05); max-width: 400px; width: 90%; text-align: center;

        }

        h2 { margin-top: 0; color: #34495e; }

        .input-group { margin: 30px 0; display: flex; justify-content: center; align-items: center; gap: 12px; }

        input { width: 80px; padding: 12px; border: 2px solid #ecf0f1; border-radius: 8px; text-align: center; font-size: 1.1rem; outline: none; }

        .btn-solve {

            background-color: #3498db; color: white; border: none; padding: 14px;

            border-radius: 8px; cursor: pointer; font-size: 1rem; width: 100%; font-weight: bold; transition: 0.3s;

        }

        .btn-solve:hover { background-color: #2980b9; }

        #result { margin-top: 25px; padding: 15px; border-radius: 10px; display: none; font-weight: 600; line-height: 1.6; }

        .determinata { background-color: #d4edda; color: #155724; }

        .indeterminata { background-color: #fff3cd; color: #856404; }

        .impossibile { background-color: #f8d7da; color: #721c24; }

        .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #f1f1f1; font-size: 0.8rem; color: #95a5a6; }

        .btn-show-code {

            position: fixed; bottom: 30px; right: 30px; background-color: #00bcd4;

            color: white; border: none; padding: 12px 24px; border-radius: 50px;

            cursor: pointer; box-shadow: 0 4px 12px rgba(0,188,212,0.3); font-size: 0.9rem; font-weight: bold; z-index: 100;

        }

        /* --- STILI PAGINA CODICE --- */

        #code-view { display: none; background-color: #f4f7f6; width: 100%; min-height: 100vh; padding: 40px; box-sizing: border-box; }

        .code-container {

            max-width: 950px; margin: 0 auto 30px auto; background: white; padding: 30px; border-radius: 12px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.05); overflow-x: auto; white-space: pre;

            font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9rem; line-height: 1.5;

        }

        /* BOX WEBSERVER */

        .static-notes-box {

            max-width: 950px; margin: 0 auto 50px auto; background: #ffffff; padding: 25px; border-radius: 12px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-left: 5px solid #00bcd4;

        }

        .static-notes-box h3 { margin-top: 0; color: #00bcd4; font-size: 1.2rem; }

        .static-notes-box p { line-height: 1.6; color: #444; }

        .back-arrow { color: #3498db; cursor: pointer; font-weight: bold; margin-bottom: 20px; display: block; max-width: 950px; margin-left: auto; margin-right: auto; }

        /* Syntax Highlighting */

        .hl-tag { color: #d73a49; } .hl-str { color: #032f62; } .hl-comm { color: #6a737d; font-style: italic; }

        .hl-key { color: #d73a49; font-weight: bold; }

        .math-focus { background-color: #fff9c4; border-left: 4px solid #fbc02d; display: block; width: 100%; }

    </style>

</head>

<body>

<div id="main-app">

    <div class="container">

        <h2>Analisi Equazione</h2>

        <p style="color: #7f8c8d; font-size: 0.9rem;">Risolvi la forma normale <b>ax = b</b></p>

        <div class="input-group">

            <input type="number" id="valA" placeholder="a">

            <span style="font-size: 1.2rem; font-weight: bold; color: #bdc3c7;">x =</span>

            <input type="number" id="valB" placeholder="b">

        </div>

        <button class="btn-solve" onclick="analizza()">Verifica Tipo</button>

        <div id="result"></div>

        <footer class="footer">

            <p>2026 - Leonardo Pasini</p>

            <p><i>Studio delle Equazioni di Primo Grado Numeriche Intere</i></p>

        </footer>

    </div>

    <button class="btn-show-code" onclick="toggleCode(true)">Mostra HTML</button>

</div>

<div id="code-view">

    <div class="back-arrow" onclick="toggleCode(false)">← Torna all'Analizzatore</div>

    <div class="code-container" id="code-display"></div>

    <div class="static-notes-box">

        <h3>WebServer</h3>

        <p>

            Nginx: <b>Online</b>

        </p>

        <p>

            CDN:  <b>Cloudflare</b>

        </p>

        <p>

            Server ID:  <b>mshp</b>

        </p>

    </div>

</div>

<script id="math-logic">

    /* --- LOGICA MATEMATICA --- */

    function analizza() {

        const a = parseFloat(document.getElementById('valA').value);

        const b = parseFloat(document.getElementById('valB').value);

        const resDiv = document.getElementById('result');

        if (isNaN(a) || isNaN(b)) {

            alert("Inserisci entrambi i valori");

            return;

        }

        resDiv.style.display = "block";

        resDiv.className = "";

        if (a !== 0) {

            let x = b / a;

            resDiv.classList.add('determinata');

            if (x === 0) {

                resDiv.innerHTML = `DETERMINATA<br>x = 0<br><small>(Attenzione! L’equazione è verificata per valore nullo)</small>`;

            } else {

                resDiv.innerHTML = `DETERMINATA<br>x = ${x}`;

            }

        } else if (b === 0) {

            resDiv.classList.add('indeterminata');

            resDiv.innerHTML = `INDETERMINATA<br>0x = 0 (Sempre vera)`;

        } else {

            resDiv.classList.add('impossibile');

            resDiv.innerHTML = `IMPOSSIBILE<br>0x = ${b} (Mai vera)`;

        }

    }

</script>

<script>

    /* --- GESTIONE INTERFACCIA --- */

    function toggleCode(show) {

        const app = document.getElementById('main-app');

        const codeView = document.getElementById('code-view');

        if (show) {

            let code = document.documentElement.outerHTML;

            // Sanificazione per visualizzazione testo

            code = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

            // Syntax Highlighting

            code = code.replace(/(&lt;!--.*?--&gt;)/g, '<span class="hl-comm">$1</span>');

            code = code.replace(/("[^"]*")/g, '<span class="hl-str">$1</span>');

            code = code.replace(/(&lt;\/?[a-z1-6]+)/gi, '<span class="hl-tag">$1</span>');

            const keywords = ["function", "const", "let", "if", "else", "return"];

            keywords.forEach(key => {

                const reg = new RegExp(`\\b${key}\\b`, 'g');

                code = code.replace(reg, `<span class="hl-key">${key}</span>`);

            });

            // Focus sulla matematica

            const startKey = "function analizza()";

            const endKey = "resDiv.innerHTML = `IMPOSSIBILE&lt;br&gt;0x = ${b} (Mai vera)`;\n        }\n    }";

            code = code.replace(startKey, `<span class="math-focus">${startKey}`);

            code = code.replace(endKey, `${endKey}</span>`);

            document.getElementById('code-display').innerHTML = code;

            app.style.display = 'none';

            codeView.style.display = 'block';

            window.scrollTo(0,0);

        } else {

            app.style.display = 'flex';

            codeView.style.display = 'none';

        }

    }

</script>

</body>

</html>