Fixed structure
This commit is contained in:
@@ -1,47 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="it">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>CryptoSeals - Home</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<nav class="navbar">
|
|
||||||
<a href="index.html" class="nav-brand">
|
|
||||||
<img src="seal1.png" height="80" alt="🦭" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
|
|
||||||
<span style="display:none;"><img src="seal1.png"></span> CryptoSeals
|
|
||||||
</a>
|
|
||||||
<ul class="nav-links">
|
|
||||||
<li><a href="rsa.html">Algoritmo RSA</a></li>
|
|
||||||
<li><a href="cesare.html">Cesare</a></li>
|
|
||||||
<li><a href="vigenere.html">Vigenère</a></li>
|
|
||||||
<li><a href="team.html">Il Team</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<h1>Welcome to CryptoSeals</h1>
|
|
||||||
<p class="descrizione">
|
|
||||||
Dive deep, Seal your data.<br>
|
|
||||||
<br><br>
|
|
||||||
<i>Click any tool in the bar on the right to start!</i>
|
|
||||||
</p>
|
|
||||||
<img src="/target/classes/seal1.png" alt="Mascotte CryptoSeals" style="max-width: 300px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.1);" onerror="this.style.display='none';">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<div class="copyright">
|
|
||||||
<span>
|
|
||||||
<a href="/privacy-policy/">Privacy Policy</a>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
© <span class="" data-timestamp="2026-03-26T11:39:53Z" data-function="format" data-format="YYYY" data-refresh="0">2026</span> CryptoSeals
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
168
get/style.css
168
get/style.css
@@ -1,168 +0,0 @@
|
|||||||
/* Importiamo Inter per la massima leggibilità */
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
|
|
||||||
|
|
||||||
/* --- STILI BASE (DARK) --- */
|
|
||||||
body, h1, h2, p, ul, li { margin: 0; padding: 0; }
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
||||||
background-color: #0c1221; /* Fondo quasi nero, molto profondo */
|
|
||||||
color: #f1f5f9; /* Testo chiaro ghiaccio */
|
|
||||||
padding-top: 100px;
|
|
||||||
-webkit-font-smoothing: antialiased; /* Rende il font più nitido su Mac */
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.85em;
|
|
||||||
position: absolute;
|
|
||||||
padding-top: 1rem;
|
|
||||||
z-index: 1050;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 3rem;
|
|
||||||
background: var(--color-bg-footer);
|
|
||||||
box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.16),
|
|
||||||
inset 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 0.85em;
|
|
||||||
position: absolute;
|
|
||||||
padding-top: 1rem;
|
|
||||||
z-index: 1050;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 3rem;
|
|
||||||
background: var(--color-bg-footer);
|
|
||||||
box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.16),
|
|
||||||
inset 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
||||||
}
|
|
||||||
footer .copyright {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 1.5rem 2em;
|
|
||||||
text-align: right;
|
|
||||||
border-top: 1px solid #ffffff10;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- NAVBAR (EFFETTO VETRO SCURO) --- */
|
|
||||||
.navbar {
|
|
||||||
background-color: rgba(17, 24, 39, 0.8);
|
|
||||||
backdrop-filter: blur(12px); /* Effetto vetro sfocato */
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 75px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 40px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: 1000;
|
|
||||||
border-bottom: 1px solid #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-brand { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; color: #f1f5f9; text-decoration: none; letter-spacing: -0.5px;}
|
|
||||||
.nav-brand span { font-size: 28px; color: #0688d4; /* Accento Ciano Ghiaccio */ }
|
|
||||||
|
|
||||||
.nav-links { list-style: none; display: flex; gap: 30px; }
|
|
||||||
.nav-links a { color: #94a3b8; text-decoration: none; font-weight: 500; font-size: 15px; transition: 0.2s;}
|
|
||||||
.nav-links a:hover, .nav-links a.active { color: #06b6d4; font-weight: 600; }
|
|
||||||
|
|
||||||
/* --- CONTENITORE CENTRALE --- */
|
|
||||||
.container { max-width: 1100px; margin: 0 auto 60px auto; padding: 20px; text-align: center; }
|
|
||||||
h1 { font-size: 48px; color: #f1f5f9; margin-bottom: 15px; font-weight: 900; letter-spacing: -1.5px; }
|
|
||||||
p.descrizione { font-size: 18px; color: #94a3b8; line-height: 1.6; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto;}
|
|
||||||
|
|
||||||
/* --- SCATOLA PRINCIPALE (MODERN DARK) --- */
|
|
||||||
.crypto-box {
|
|
||||||
background-color: #111827; /* Slate dark */
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 50px;
|
|
||||||
border-radius: 28px;
|
|
||||||
border: 1px solid #1e293b;
|
|
||||||
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
label { font-weight: 600; color: #94a3b8; font-size: 14px; margin-bottom: 10px; display: block; text-transform: uppercase; letter-spacing: 1px; }
|
|
||||||
|
|
||||||
/* Input, Select, Textarea (Modern Dark) */
|
|
||||||
textarea, select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 18px;
|
|
||||||
border-radius: 14px;
|
|
||||||
border: 1px solid #1e293b;
|
|
||||||
background-color: #1f2937; /* Input leggermente più chiaro */
|
|
||||||
color: #f1f5f9;
|
|
||||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
textarea:focus, select:focus { outline: none; border-color: #06b6d4; background-color: #111827; box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15); }
|
|
||||||
textarea { height: 180px; resize: none; }
|
|
||||||
textarea::placeholder { color: #4b5563; }
|
|
||||||
|
|
||||||
/* --- DEFINIZIONE ANIMAZIONE PULSANTE --- */
|
|
||||||
@keyframes glitchPulse {
|
|
||||||
0% { border-color: #1e293b; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
|
|
||||||
50% { border-color: #06b6d4; box-shadow: 0 0 15px 2px rgba(6, 182, 212, 0.3); }
|
|
||||||
100% { border-color: #1e293b; box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Applichiamo l'animazione alla casella di input principale */
|
|
||||||
.pulse-textarea {
|
|
||||||
animation: glitchPulse 2.5s infinite ease-in-out; /* Pulsazione lenta e continua */
|
|
||||||
}
|
|
||||||
.pulse-textarea:focus {
|
|
||||||
animation: none; /* Smette di pulsare quando ci scrivi dentro */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- LAYOUT A COLONNE --- */
|
|
||||||
.crypto-columns {
|
|
||||||
display: flex;
|
|
||||||
gap: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crypto-col {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- BOTTONI--- */
|
|
||||||
button {
|
|
||||||
background: linear-gradient(135deg, #0891b2, #06b6d4); /* Ciano Gradient */
|
|
||||||
color: #0b0f19;
|
|
||||||
border: none;
|
|
||||||
padding: 18px 25px;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
font-weight: 700;
|
|
||||||
width: 100%;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
button:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(6, 182, 212, 0.3); }
|
|
||||||
button:active { transform: translateY(-1px); }
|
|
||||||
|
|
||||||
/* Bottone Decifra (Verde Neon) */
|
|
||||||
.btn-green { background: linear-gradient(135deg, #059669, #10b981); color: #0b0f19;}
|
|
||||||
.btn-green:hover { box-shadow: 0 12px 25px rgba(16, 185, 129, 0.3); }
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.crypto-columns { flex-direction: column; gap: 0; }
|
|
||||||
}
|
|
||||||
36
src/pom.xml
Normal file
36
src/pom.xml
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project xmlns="http://maven.apache.org/POM/4.0.0"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
|
||||||
|
<modelVersion>4.0.0</modelVersion>
|
||||||
|
|
||||||
|
<groupId>com.crypto</groupId>
|
||||||
|
<artifactId>cryptoseals</artifactId>
|
||||||
|
<version>1.0-SNAPSHOT</version>
|
||||||
|
|
||||||
|
<properties>
|
||||||
|
<maven.compiler.source>17</maven.compiler.source>
|
||||||
|
<maven.compiler.target>17</maven.compiler.target>
|
||||||
|
</properties>
|
||||||
|
|
||||||
|
<dependencies>
|
||||||
|
<dependency>
|
||||||
|
<groupId>io.javalin</groupId>
|
||||||
|
<artifactId>javalin</artifactId>
|
||||||
|
<version>6.1.3</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>org.slf4j</groupId>
|
||||||
|
<artifactId>slf4j-simple</artifactId>
|
||||||
|
<version>2.0.16</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>com.fasterxml.jackson.core</groupId>
|
||||||
|
<artifactId>jackson-databind</artifactId>
|
||||||
|
<version>2.16.1</version>
|
||||||
|
</dependency>
|
||||||
|
</dependencies>
|
||||||
|
|
||||||
|
</project>
|
||||||
157
src/resources/get/index.html
Normal file
157
src/resources/get/index.html
Normal 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>
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
238
src/resources/get/style.css
Normal file
238
src/resources/get/style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user