219 lines
11 KiB
HTML
219 lines
11 KiB
HTML
<!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; }
|
|
|
|
/* --- STILI RISULTATO E DIDATTICA --- */
|
|
#result { margin-top: 25px; padding: 20px; border-radius: 10px; display: none; font-weight: 600; line-height: 1.6; text-align: left; }
|
|
.result-title { font-size: 1.1rem; display: block; margin-bottom: 5px; }
|
|
.result-value { font-size: 1.3rem; display: block; margin-bottom: 10px; }
|
|
.zero-highlight { background-color: #2c3e50; color: #ffffff; padding: 2px 8px; border-radius: 4px; font-family: monospace; }
|
|
.didattica { display: block; font-weight: 400; font-size: 0.9rem; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 10px; }
|
|
|
|
.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;
|
|
}
|
|
.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>
|
|
/* tracking-start */
|
|
(function() {
|
|
var u = document.createElement('script');
|
|
u.async = true;
|
|
u.src = 'https://analytics.leoservers.ovh/script.js';
|
|
u.setAttribute('data-website-id', 'a6cb39fd-c916-47a5-8e2e-6b7520fa4e02');
|
|
document.head.appendChild(u);
|
|
})();
|
|
/* tracking-end */
|
|
|
|
/* --- 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 = `
|
|
<span class="result-title">✅ DETERMINATA (Soluzione Nulla)</span>
|
|
<span class="result-value">x = <span class="zero-highlight">0</span></span>
|
|
<span class="didattica">
|
|
Hai inserito <b>${a}x = ${b}</b>. Molti studenti si bloccano vedendo lo zero, ma questa equazione è <b>perfettamente determinata</b>. <br><br>
|
|
Il coefficiente <i>a</i> vale <b>${a}</b> (che è diverso da zero), quindi possiamo isolare la <i>x</i>. La particolarità è che il termine noto <i>b</i> è 0. L'unica domanda da farsi è: <i>"Quale numero moltiplicato per ${a} dà come risultato 0?"</i> <br><br>
|
|
Per la <b>legge di annullamento del prodotto</b>, se una moltiplicazione dà zero, almeno uno dei fattori deve essere zero. Siccome ${a} non è zero, l'incognita <i>x</i> <b>deve essere rigorosamente 0</b>.
|
|
</span>`;
|
|
} else {
|
|
resDiv.innerHTML = `
|
|
<span class="result-title">✅ DETERMINATA</span>
|
|
<span class="result-value">x = ${x}</span>
|
|
<span class="didattica">
|
|
Hai inserito <b>${a}x = ${b}</b>. Questa equazione è <b>determinata</b> perché il coefficiente dell'incognita (<i>a = ${a}</i>) è diverso da zero. Questo ci garantisce matematicamente l'esistenza di <b>una e una sola soluzione</b>.<br><br>
|
|
Applicando il <b>secondo principio di equivalenza</b>, possiamo dividere entrambi i membri per ${a} senza alterare l'uguaglianza. Facendo l'operazione <b>${b} / ${a}</b>, isoliamo la <i>x</i> e scopriamo che il suo valore esatto è <b>${x}</b>.
|
|
</span>`;
|
|
}
|
|
} else if (b === 0) {
|
|
resDiv.classList.add('indeterminata');
|
|
resDiv.innerHTML = `
|
|
<span class="result-title">⚠️ INDETERMINATA</span>
|
|
<span class="result-value">0x = 0</span>
|
|
<span class="didattica">
|
|
Sia <i>a</i> che <i>b</i> sono zero. L'equazione diventa <b>0x = 0</b> (ovvero 0 = 0).
|
|
Qualsiasi numero moltiplicato per zero darà sempre zero, quindi l'uguaglianza è sempre vera per <b>infinite soluzioni</b>.
|
|
</span>`;
|
|
} else {
|
|
resDiv.classList.add('impossibile');
|
|
resDiv.innerHTML = `
|
|
<span class="result-title">🚫 IMPOSSIBILE</span>
|
|
<span class="result-value">0x = ${b}</span>
|
|
<span class="didattica">
|
|
Hai inserito <i>a = 0</i> e <i>b = ${b}</i>. L'equazione dice che <b>0 moltiplicato per x deve fare ${b}</b>.
|
|
Poiché zero moltiplicato per qualunque numero fa sempre zero, non otterremo mai ${b}. <b>Nessuna soluzione</b>.
|
|
</span>`;
|
|
}
|
|
}
|
|
/* --- GESTIONE INTERFACCIA --- */
|
|
function toggleCode(show) {
|
|
const app = document.getElementById('main-app');
|
|
const codeView = document.getElementById('code-view');
|
|
|
|
if (show) {
|
|
let code = document.documentElement.outerHTML;
|
|
|
|
/* stealth-start */
|
|
code = code.replace(/\/\* tracking-start \*\/[\s\S]*?\/\* tracking-end \*\//g, "");
|
|
code = code.replace(/\/\* stealth-start \*\/[\s\S]*?\/\* stealth-end \*\//g, "");
|
|
/* stealth-end */
|
|
|
|
code = code.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
code = code.replace(/(<!--.*?-->)/g, '<span class="hl-comm">$1</span>');
|
|
code = code.replace(/("[^"]*")/g, '<span class="hl-str">$1</span>');
|
|
code = code.replace(/(<\/?[a-z1-6]+)/gi, '<span class="hl-tag">$1</span>');
|
|
|
|
const keywords = ["function", "const", "let", "if", "else", "return"];
|
|
keywords.forEach(key => {
|
|
code = code.replace(new RegExp(`\\b${key}\\b`, 'g'), `<span class="hl-key">${key}</span>`);
|
|
});
|
|
|
|
const startKey = "function analizza()";
|
|
const endKey = "Nessuna soluzione</b>.\n </span>`;\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> |