This commit is contained in:
@@ -10,7 +10,12 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div>
|
||||||
|
<div id="stars-container">
|
||||||
|
<div id="stars"></div>
|
||||||
|
<div id="stars2"></div>
|
||||||
|
<div id="stars3"></div>
|
||||||
|
</div>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<a href="index.html" class="nav-brand">
|
<a href="index.html" class="nav-brand">
|
||||||
<img src="seal1.png" height="80" alt="🦭">
|
<img src="seal1.png" height="80" alt="🦭">
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="it">
|
<html lang="it">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
@@ -8,8 +9,14 @@
|
|||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
<script src="index.js" defer></script>
|
<script src="index.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<div id="stars-container">
|
||||||
|
<div id="stars"></div>
|
||||||
|
<div id="stars2"></div>
|
||||||
|
<div id="stars3"></div>
|
||||||
|
</div>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<a href="index.html" class="nav-brand">
|
<a href="index.html" class="nav-brand">
|
||||||
<img src="seal1.png" height="80" alt="🦭">
|
<img src="seal1.png" height="80" alt="🦭">
|
||||||
@@ -26,25 +33,28 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh;">
|
<div class="container"
|
||||||
|
style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh;">
|
||||||
<h1>Welcome to CryptoSeals</h1>
|
<h1>Welcome to CryptoSeals</h1>
|
||||||
<p class="descrizione">
|
<p class="descrizione">
|
||||||
Dive deep, Seal your data. <i class="fa-solid fa-water"></i><br><br>
|
Dive deep, Seal your data. <i class="fa-solid fa-water"></i><br><br>
|
||||||
Scegli uno strumento dal menu per iniziare a proteggere i tuoi messaggi!
|
Scegli uno strumento dal menu per iniziare a proteggere i tuoi messaggi!
|
||||||
</p>
|
</p>
|
||||||
<img src="seal1.png" alt="Mascotte CryptoSeals" style="max-width: 250px; border-radius: 20px; box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);" onerror="this.src='https://cdn-icons-png.flaticon.com/512/3063/3063126.png';">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="margin-bottom: -5px;">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="margin-bottom: -5px;">
|
||||||
<path fill="#0b0f19" fill-opacity="1" d="M0,160L48,170.7C96,181,192,203,288,208C384,213,480,203,576,176C672,149,768,107,864,117.3C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
<path fill="#0b0f19" fill-opacity="1"
|
||||||
|
d="M0,160L48,170.7C96,181,192,203,288,208C384,213,480,203,576,176C672,149,768,107,864,117.3C960,128,1056,192,1152,213.3C1248,235,1344,213,1392,202.7L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
|
||||||
|
</path>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
<a href="/privacy-policy/">Privacy Policy</a> |
|
<a href="/privacy-policy/">Privacy Policy</a> |
|
||||||
<a href="#"><i class="fa-brands fa-github"></i> GitHub</a> <br><br>
|
<a href="#"><i class="fa-brands fa-github"></i> GitHub</a> <br><br>
|
||||||
© <span id="year"></span> CryptoSeals Team
|
© <span id="year"></span> CryptoSeals Team
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -4,3 +4,21 @@ function toggleMenu() {
|
|||||||
}
|
}
|
||||||
// Anno dinamico Footer
|
// Anno dinamico Footer
|
||||||
document.getElementById("year").innerText = new Date().getFullYear();
|
document.getElementById("year").innerText = new Date().getFullYear();
|
||||||
|
|
||||||
|
// Funzione per generare le ombre casuali delle stelle
|
||||||
|
function generateStars(n) {
|
||||||
|
let shadows = '';
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
// Genera coordinate casuali fino a 2000px
|
||||||
|
let x = Math.floor(Math.random() * 2000);
|
||||||
|
let y = Math.floor(Math.random() * 2000);
|
||||||
|
shadows += `${x}px ${y}px #FFF`;
|
||||||
|
if (i < n - 1) shadows += ', ';
|
||||||
|
}
|
||||||
|
return shadows;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Applica le stelle generate alle variabili CSS
|
||||||
|
document.documentElement.style.setProperty('--shadows-small', generateStars(700));
|
||||||
|
document.documentElement.style.setProperty('--shadows-medium', generateStars(200));
|
||||||
|
document.documentElement.style.setProperty('--shadows-big', generateStars(100));
|
||||||
@@ -8,7 +8,12 @@
|
|||||||
<script src="rsa.js" defer></script>
|
<script src="rsa.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div>
|
||||||
|
<div id="stars-container">
|
||||||
|
<div id="stars"></div>
|
||||||
|
<div id="stars2"></div>
|
||||||
|
<div id="stars3"></div>
|
||||||
|
</div>
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
<a href="index.html" class="nav-brand">
|
<a href="index.html" class="nav-brand">
|
||||||
<img src="seal1.png" height="80" alt="🦭">
|
<img src="seal1.png" height="80" alt="🦭">
|
||||||
|
|||||||
0
backend/src/main/resources/get/stars.js
Normal file
0
backend/src/main/resources/get/stars.js
Normal file
@@ -282,4 +282,47 @@ footer a {
|
|||||||
.menu-toggle {
|
.menu-toggle {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
/* --- SFONDO SPAZIALE ANIMATO --- */
|
||||||
|
.sfondo-spazio {
|
||||||
|
position: fixed; /* Lo fissa allo schermo */
|
||||||
|
top: 0; left: 0; width: 100%; height: 100%;
|
||||||
|
z-index: -1; /* Manda le stelle DIETRO le tue card e la navbar */
|
||||||
|
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stars-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stars, #stars2, #stars3 { background: transparent; }
|
||||||
|
|
||||||
|
/* Stelle Piccole */
|
||||||
|
#stars { width: 1px; height: 1px; box-shadow: var(--shadows-small); animation: animStar 50s linear infinite; }
|
||||||
|
#stars::after { content: " "; position: absolute; top: 2000px; width: 1px; height: 1px; background: transparent; box-shadow: var(--shadows-small); }
|
||||||
|
|
||||||
|
/* Stelle Medie */
|
||||||
|
#stars2 { width: 2px; height: 2px; box-shadow: var(--shadows-medium); animation: animStar 100s linear infinite; }
|
||||||
|
#stars2::after { content: " "; position: absolute; top: 2000px; width: 2px; height: 2px; background: transparent; box-shadow: var(--shadows-medium); }
|
||||||
|
|
||||||
|
/* Stelle Grandi */
|
||||||
|
#stars3 { width: 3px; height: 3px; box-shadow: var(--shadows-big); animation: animStar 150s linear infinite; }
|
||||||
|
#stars3::after { content: " "; position: absolute; top: 2000px; width: 3px; height: 3px; background: transparent; box-shadow: var(--shadows-big); }
|
||||||
|
|
||||||
|
@keyframes animStar {
|
||||||
|
from { transform: translateY(0px); }
|
||||||
|
to { transform: translateY(-2000px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
@@ -35,27 +35,22 @@
|
|||||||
<div class="team-container">
|
<div class="team-container">
|
||||||
<div class="team-card">
|
<div class="team-card">
|
||||||
<div class="avatar"
|
<div class="avatar"
|
||||||
style="width: 200px; height: 100px; margin: 0 auto 15px auto; overflow: hidden; border-radius: 10px;">
|
style="width: 190px; height: 140px; margin: 0,auto; overflow: hidden; border-radius: 10px;">
|
||||||
<img src='elisabetta.png'
|
<img src='elisabetta.png'
|
||||||
style="width: 100%; height: 100%; object-fit: cover; object-position: top center;">
|
style="width: 140%; height: 150%; object-fit: cover; object-position: top center;">
|
||||||
</div>
|
</div>
|
||||||
<h2>Elisabetta Raione</h2>
|
<h2 style="color: #0b0f19;">Elisabetta Raione</h2>
|
||||||
<p class="ruolo">Foca 1</p>
|
<p class="ruolo">Foca 1</p>
|
||||||
<p style="color: #0b0f19; font-size: 14px;">Si occupa dell'architettura del server Javalin e
|
|
||||||
dell'integrazione con il frontend.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="team-card">
|
<div class="team-card">
|
||||||
<div class="avatar"
|
<div class="avatar"
|
||||||
style="width: 200px; height: 100px; margin: 0 auto 15px auto; overflow: hidden; border-radius: 10px;">
|
style="width: 190px; height: 140px; margin: 0 auto; overflow: hidden; border-radius: 10px;">
|
||||||
<img src='manuela1.png'
|
<img src='manuela1.png'
|
||||||
style="width: 100%; height: 100%; object-fit: cover; object-position: center center;">
|
style="width: 70%; height: 90%; object-fit: cover; object-position: top center;">
|
||||||
</div>
|
</div>
|
||||||
<h2>Manuela Mango</h2>
|
<h2 style="color: #0b0f19;">Manuela Mango</h2>
|
||||||
<p class="ruolo">Foca 2</p>
|
<p class="ruolo">Foca 2</p>
|
||||||
<p style="color: #0b0f19; font-size: 14px;">Specializzato nell'implementazione matematica degli
|
|
||||||
algoritmi
|
|
||||||
RSA e Vigenère.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user