elisabetta/cryptoseals
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy su server Java
All checks were successful
Deploy / trigger (push) Successful in 19s
Details

Browse Source
This commit is contained in:
Francesco Mancuso
2026-03-27 22:08:12 +01:00
parent 56214f1b57
commit 19d360b4d6
13 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
backend/src/main/resources/get/cesare.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>

157
backend/src/main/resources/get/index.html Normal file
View File

@@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoSeals - Motore RSA</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<a href="index.html" class="nav-brand">
<img src="seal1.png" height="50" alt="🦭" onerror="this.src='https://cdn-icons-png.flaticon.com/512/3063/3063126.png';">
CryptoSeals
</a>
<div class="menu-toggle" onclick="toggleMenu()">
<i class="fa-solid fa-bars"></i>
</div>
<ul class="nav-links" id="nav-links">
<li><a href="rsa.html" class="active"><i class="fa-solid fa-key"></i> RSA</a></li>
<li><a href="cesare.html"><i class="fa-solid fa-arrow-right-arrow-left"></i> Cesare</a></li>
<li><a href="vigenere.html"><i class="fa-solid fa-table"></i> Vigenère</a></li>
<li><a href="team.html"><i class="fa-solid fa-users"></i> Il Team</a></li>
</ul>
</nav>
<div class="container">
<h1>Motore RSA</h1>
<p class="descrizione">Cifra e decifra i tuoi messaggi con lo standard di sicurezza a chiave pubblica. Scegli la dimensione delle chiavi, scrivi e lascia fare alle foche.</p>
<div class="crypto-box">
<label><i class="fa-solid fa-ruler-horizontal"></i> Dimensione Chiave RSA</label>
<select id="keysize" style="margin-top: 5px; margin-bottom: 20px;">
<option value="512">512 bit (Solo didattico - Veloce)</option>
<option value="1024" selected>1024 bit (Test - Bilanciato)</option>
<option value="2048">2048 bit (Standard - Lenta da generare ⏳)</option>
<option value="4096">4096 bit (Alta sicurezza - Molto lenta ⏳⏳)</option>
</select>
<div class="crypto-columns">
<div class="crypto-col">
<label><i class="fa-solid fa-pen"></i> Testo in chiaro</label>
<textarea id="plaintext" placeholder="Scrivi il messaggio segreto che vuoi proteggere..."></textarea>
<button id="btn-encrypt" onclick="encrypt()"><i class="fa-solid fa-lock"></i> Cifra il messaggio</button>
</div>
<div class="crypto-col">
<label><i class="fa-solid fa-barcode"></i> Testo Cifrato (Base64)</label>
<textarea id="ciphertext" placeholder="Il testo protetto apparirà qui..."></textarea>
<button id="btn-decrypt" class="btn-green" onclick="decrypt()"><i class="fa-solid fa-unlock-keyhole"></i> Decifra il messaggio</button>
</div>
</div>
<div style="margin-top: 35px;">
<label><i class="fa-solid fa-check-double"></i> Risultato finale decifrato</label>
<textarea id="decodedtext" readonly placeholder="Il messaggio originale apparirà qui dopo la decifratura..." style="height: 100px; background-color: rgba(16, 185, 129, 0.1); border-color: var(--accent-green); color: var(--accent-green);"></textarea>
</div>
</div>
</div>
<script>
function toggleMenu() {
document.getElementById("nav-links").classList.toggle("active");
}
// Configurazione globale per SweetAlert2 in tema dark
const Toast = Swal.mixin({
background: '#1f2937',
color: '#f3f4f6',
confirmButtonColor: '#10b981'
});
async function encrypt() {
const plaintext = document.getElementById("plaintext").value;
const size = document.getElementById("keysize").value;
const btn = document.getElementById("btn-encrypt");
if(!plaintext) {
return Toast.fire({ icon: "warning", title: "Attenzione", text: "Per favore, inserisci del testo da cifrare." });
}
// Stato di caricamento UI
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Cifratura in corso...';
btn.disabled = true;
try {
const res = await fetch("http://localhost:8080/seal/rsa/encrypt", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: plaintext, keysize: parseInt(size) })
});
if(!res.ok) throw new Error("Errore Server");
document.getElementById("ciphertext").value = await res.text();
Toast.fire({
icon: 'success',
title: 'Completato!',
text: 'Il messaggio è stato cifrato con successo.',
timer: 2000,
showConfirmButton: false
});
} catch (e) {
Toast.fire({ icon: "error", title: "Errore di connessione", text: "Impossibile connettersi al server Javalin. Controlla che sia avviato!" });
} finally {
// Ripristino bottone
btn.innerHTML = '<i class="fa-solid fa-lock"></i> Cifra il messaggio';
btn.disabled = false;
}
}
async function decrypt() {
const input = document.getElementById("ciphertext").value;
const btn = document.getElementById("btn-decrypt");
if(!input) {
return Toast.fire({ icon: "warning", title: "Attenzione", text: "Non c'è nessun testo cifrato da decodificare." });
}
// Stato di caricamento UI
btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Decifratura in corso...';
btn.disabled = true;
try {
const res = await fetch("http://localhost:8080/seal/rsa/decrypt", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: input })
});
if(!res.ok) throw new Error("Errore Server");
document.getElementById("decodedtext").value = await res.text();
Toast.fire({
icon: 'success',
title: 'Decifrato!',
text: 'Messaggio originale recuperato.',
timer: 2000,
showConfirmButton: false
});
} catch (e) {
Toast.fire({ icon: "error", title: "Errore", text: "Impossibile decifrare. Il testo potrebbe essere corrotto o il server offline." });
} finally {
// Ripristino bottone
btn.innerHTML = '<i class="fa-solid fa-unlock-keyhole"></i> Decifra il messaggio';
btn.disabled = false;
}
}
</script>
</body>
</html>

95
backend/src/main/resources/get/rsa.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>CryptoSeals - RSA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<a href="index.html" class="nav-brand">
<span><img src="seal1.png" height="80"onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';"></span> CryptoSeals
</a>
<ul class="nav-links">
<li><a href="rsa.html" class="active">Algoritmo RSA</a></li>
<li><a href="cesare.html">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>Motore RSA</h1>
<p class="descrizione">Cifra e decifra i tuoi messaggi con lo standard di sicurezza a chiave pubblica. Scegli la dimensione delle chiavi, scrivi e lascia fare alle foche.</p>
<div class="crypto-box">
<label>Dimensione Chiave RSA</label>
<select id="keysize">
<option value="512">512 bit (Solo didattico - Veloce)</option>
<option value="1024" selected>1024 bit (Test - Bilanciato)</option>
<option value="2048">2048 bit (Standard - Lenta da generare ⏳)</option>
<option value="4096">4096 bit (Alta sicurezza - Molto lenta ⏳⏳)</option>
</select>
<div class="crypto-columns">
<div class="crypto-col">
<label>Testo in chiaro</label>
<textarea id="plaintext" class="pulse-textarea" placeholder="Scrivi il messaggio segreto che vuoi proteggere..."></textarea>
<button onclick="encrypt()">🔒 Cifra il messaggio</button>
</div>
<div class="crypto-col">
<label>Testo Cifrato (Base64)</label>
<textarea id="ciphertext" placeholder="Il testo protetto apparirà qui..."></textarea>
<button class="btn-green" onclick="decrypt()">🔓 Decifra il messaggio</button>
</div>
</div>
<div style="margin-top: 35px;">
<label>Risultato finale decifrato</label>
<textarea id="decodedtext" readonly placeholder="Il messaggio originale apparirà qui dopo la decifratura..." style="height: 100px; background-color: #0b0f19; border-color: rgba(16, 185, 129, 0.3); color: #10b981;"></textarea>
</div>
</div>
</div>
<script>
async function encrypt() {
const plaintext = document.getElementById("plaintext").value;
const size = document.getElementById("keysize").value;
if(!plaintext) return alert("Per favore, inserisci del testo da cifrare.");
document.getElementById("ciphertext").value = "Le foche stanno cifrando... Attendere prego.";
try {
// NOTA: Controlla che la rotta nel tuo Java sia corretta (/seal/rsa/encrypt o /api/rsa/cifra)
const res = await fetch("http://localhost:8080/seal/rsa/encrypt", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: plaintext, keysize: parseInt(size) })
});
document.getElementById("ciphertext").value = await res.text();
} catch (e) { alert("Impossibile connettersi al server Javalin."); }
}
async function decrypt() {
const input = document.getElementById("ciphertext").value;
if(!input) return alert("Non c'è nessun testo da decifrare.");
document.getElementById("decodedtext").value = "Decifratura in corso...";
try {
// NOTA: Controlla che la rotta nel tuo Java sia corretta (/seal/rsa/decrypt o /api/rsa/decifra)
const res = await fetch("http://localhost:8080/seal/rsa/decrypt", {
method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: input })
});
document.getElementById("decodedtext").value = await res.text();
} catch (e) { alert("Impossibile connettersi al server."); }
}
</script>
</body>
</html>

BIN
backend/src/main/resources/get/seal1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

238
backend/src/main/resources/get/style.css Normal file
View File

@@ -0,0 +1,238 @@
/* --- IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Poppins:wght@300;400;600&display=swap');
/* --- VARIABILI GLOBALI --- */
:root {
--bg-dark: #0b0f19;
--accent-green: #10b981;
--accent-hover: #059669;
--text-main: #f3f4f6;
--glass-bg: rgba(17, 24, 39, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
}
/* --- BASE --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background: radial-gradient(circle at top right, #1f2937, var(--bg-dark));
color: var(--text-main);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* --- NAVBAR (Glassmorphism) --- */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--glass-border);
position: sticky;
top: 0;
z-index: 1000;
}
.nav-brand {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-main);
text-decoration: none;
}
.nav-brand img {
border-radius: 50%;
}
.nav-links {
list-style: none;
display: flex;
gap: 20px;
}
.nav-links a {
color: var(--text-main);
text-decoration: none;
font-weight: 400;
transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent-green);
}
/* Menu Mobile */
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* --- CONTENITORI --- */
.container {
flex: 1;
max-width: 1000px;
margin: 40px auto;
padding: 0 20px;
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 15px;
color: var(--accent-green);
}
.descrizione {
font-size: 1.1rem;
margin-bottom: 30px;
color: #9ca3af;
}
/* --- CRYPTO BOX (Glassmorphism) --- */
.crypto-box {
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 15px;
padding: 30px;
text-align: left;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.crypto-columns {
display: flex;
gap: 20px;
margin-top: 20px;
}
.crypto-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
/* --- FORMS & INPUTS --- */
label {
font-weight: 600;
font-size: 0.9rem;
color: var(--accent-green);
}
select, textarea {
width: 100%;
padding: 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--glass-border);
color: var(--text-main);
font-family: 'Poppins', sans-serif;
outline: none;
transition: border-color 0.3s;
}
select:focus, textarea:focus {
border-color: var(--accent-green);
}
/* Font Monospazio per il testo cifrato */
#ciphertext, #decodedtext {
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
}
textarea {
resize: vertical;
min-height: 120px;
}
/* --- BOTTONI --- */
button {
padding: 12px;
border: none;
border-radius: 8px;
background-color: var(--accent-green);
color: white;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
button:hover {
background-color: var(--accent-hover);
}
button:active {
transform: scale(0.98);
}
button:disabled {
background-color: #374151;
cursor: not-allowed;
}
.btn-green {
background-color: #3b82f6; /* Usiamo un blu per distinguere la decifratura */
}
.btn-green:hover {
background-color: #2563eb;
}
/* --- FOOTER --- */
footer {
text-align: center;
padding: 20px;
background: var(--bg-dark);
border-top: 1px solid var(--glass-border);
font-size: 0.9rem;
color: #6b7280;
}
footer a {
color: var(--accent-green);
text-decoration: none;
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.crypto-columns {
flex-direction: column;
}
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background: var(--bg-dark);
padding: 20px 0;
text-align: center;
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: block;
}
}