diff --git a/get/cesare.html b/get/cesare.html new file mode 100644 index 0000000..a7ad60f --- /dev/null +++ b/get/cesare.html @@ -0,0 +1,77 @@ + + + + + CryptoSeals - Cesare + + + + + + +
+

Cifrario di Cesare

+

Sposta le lettere dell'alfabeto di un numero fisso di posizioni. Semplice, storico, ma efficace per messaggi veloci.

+ +
+ + + + + + + + + + + + + + +
+
+ + + + \ No newline at end of file diff --git a/get/index.html b/get/index.html new file mode 100644 index 0000000..4adc662 --- /dev/null +++ b/get/index.html @@ -0,0 +1,47 @@ + + + + + CryptoSeals - Home + + + + + + +
+ +
+

Welcome to CryptoSeals

+

+ Dive deep, Seal your data.
+

+ Click any tool in the bar on the right to start! +

+ Mascotte CryptoSeals +
+ + + + + \ No newline at end of file diff --git a/get/rsa.html b/get/rsa.html new file mode 100644 index 0000000..8781332 --- /dev/null +++ b/get/rsa.html @@ -0,0 +1,95 @@ + + + + + CryptoSeals - RSA + + + + + + +
+

Motore RSA

+

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.

+ +
+ + + + +
+ +
+ + + +
+ +
+ + + +
+ +
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/get/seal1.png b/get/seal1.png new file mode 100644 index 0000000..44d67d8 Binary files /dev/null and b/get/seal1.png differ diff --git a/get/style.css b/get/style.css new file mode 100644 index 0000000..8e17f3d --- /dev/null +++ b/get/style.css @@ -0,0 +1,168 @@ +/* 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; } +} \ No newline at end of file