77 lines
3.7 KiB
HTML
77 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CryptoSeals - Cesare</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="navbar">
|
|
<a href="index.html" class="nav-brand">
|
|
<img src="logo.png" alt="🦭" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
|
|
<span style="display:none;">🦭</span> CryptoSeals
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="rsa.html">Algoritmo RSA</a></li>
|
|
<li><a href="cesare.html" style="color: #3498db;">Cesare</a></li> <li><a href="vigenere.html">Vigenère</a></li>
|
|
<li><a href="storia.html">La Storia</a></li>
|
|
<li><a href="team.html">Il Team</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<h1>Cifrario di Cesare</h1>
|
|
<p class="descrizione">Sposta le lettere dell'alfabeto di un numero fisso di posizioni. Semplice, storico, ma efficace per messaggi veloci.</p>
|
|
|
|
<div class="crypto-box">
|
|
|
|
<label>Chiave (Numero di spostamento):</label>
|
|
<input type="number" id="chiaveCesare" value="3" placeholder="Es. 3" style="width: 100%; padding: 12px; margin-top: 5px; margin-bottom: 15px; border-radius: 5px; border: 1px solid #ccc;">
|
|
|
|
<label>Testo in chiaro:</label>
|
|
<textarea id="testoInput" placeholder="Scrivi qui il messaggio da cifrare..."></textarea>
|
|
<button onclick="cifraCesare()">🔒 Cifra con Cesare</button>
|
|
|
|
<label style="display:block; margin-top: 25px;">Testo Cifrato:</label>
|
|
<textarea id="testoOutput" placeholder="Il risultato cifrato apparirà qui..."></textarea>
|
|
<button class="btn-green" onclick="decifraCesare()">🔓 Decifra in chiaro</button>
|
|
|
|
<label style="display:block; margin-top: 25px;">Risultato decifrato:</label>
|
|
<textarea id="testoDecifrato" readonly placeholder="Il messaggio originale tornerà qui..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function cifraCesare() {
|
|
const input = document.getElementById("testoInput").value;
|
|
const chiave = document.getElementById("chiaveCesare").value;
|
|
|
|
if(!input) return alert("Inserisci del testo!");
|
|
|
|
try {
|
|
const risposta = await fetch("http://localhost:8080/api/cesare/cifra", {
|
|
method: "POST", headers: { "Content-Type": "application/json" },
|
|
// Invia il testo e la CHIAVE (convertita in numero) al server
|
|
body: JSON.stringify({ testo: input, chiave: parseInt(chiave) })
|
|
});
|
|
document.getElementById("testoOutput").value = await risposta.text();
|
|
} catch (e) { alert("Errore di connessione con le API di Cesare!"); }
|
|
}
|
|
|
|
async function decifraCesare() {
|
|
const inputCifrato = document.getElementById("testoOutput").value;
|
|
const chiave = document.getElementById("chiaveCesare").value;
|
|
|
|
if(!inputCifrato) return alert("Nessun testo da decifrare!");
|
|
try {
|
|
const risposta = await fetch("http://localhost:8080/api/cesare/decifra", {
|
|
method: "POST", headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ testo: inputCifrato, chiave: parseInt(chiave) })
|
|
});
|
|
document.getElementById("testoDecifrato").value = await risposta.text();
|
|
} catch (e) { alert("Errore di connessione!"); }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |