???

2026-04-04 23:26:36 +02:00
parent d271d7939c
commit 8a9dc99496
7 changed files with 94 additions and 18 deletions
--- a/backend/src/main/resources/get/cesare.html
+++ b/backend/src/main/resources/get/cesare.html
@@ -10,7 +10,12 @@
 </head>

 <body>
-
+    <div>
+        <div id="stars-container">
+        <div id="stars"></div>
+        <div id="stars2"></div>
+        <div id="stars3"></div>
+    </div>
    <nav class="navbar">
        <a href="index.html" class="nav-brand">
            <img src="seal1.png" height="80" alt="🦭">
--- a/backend/src/main/resources/get/index.html
+++ b/backend/src/main/resources/get/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="it">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,8 +9,14 @@
    <link rel="stylesheet" href="style.css">
    <script src="index.js" defer></script>
 </head>
-<body>

+<body>
+    <div>
+        <div id="stars-container">
+        <div id="stars"></div>
+        <div id="stars2"></div>
+        <div id="stars3"></div>
+    </div>
    <nav class="navbar">
        <a href="index.html" class="nav-brand">
            <img src="seal1.png" height="80" alt="🦭">
@@ -26,17 +33,19 @@
        </ul>
    </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>
        <p class="descrizione">
            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!
        </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>

    <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>

    <footer>
@@ -47,4 +56,5 @@
        </div>
    </footer>
 </body>
+
 </html>
--- a/backend/src/main/resources/get/index.js
+++ b/backend/src/main/resources/get/index.js
@@ -4,3 +4,21 @@ function toggleMenu() {
 }
 // Anno dinamico Footer
 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));
--- a/backend/src/main/resources/get/rsa.html
+++ b/backend/src/main/resources/get/rsa.html
@@ -8,7 +8,12 @@
    <script src="rsa.js" defer></script>
 </head>
 <body>
-
+    <div>
+        <div id="stars-container">
+        <div id="stars"></div>
+        <div id="stars2"></div>
+        <div id="stars3"></div>
+    </div>
    <nav class="navbar">
        <a href="index.html" class="nav-brand">
            <img src="seal1.png" height="80" alt="🦭">
--- a/backend/src/main/resources/get/stars.js
+++ b/backend/src/main/resources/get/stars.js
--- a/backend/src/main/resources/get/style.css
+++ b/backend/src/main/resources/get/style.css
@@ -283,3 +283,46 @@ footer a {
        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; 
+}
--- a/backend/src/main/resources/get/team.html
+++ b/backend/src/main/resources/get/team.html
@@ -35,27 +35,22 @@
        <div class="team-container">
            <div class="team-card">
                <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'
-                        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>
-                <h2>Elisabetta Raione</h2>
+                <h2 style="color: #0b0f19;">Elisabetta Raione</h2>
                <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 class="team-card">
                <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'
-                        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>
-                <h2>Manuela Mango</h2>
+                <h2 style="color: #0b0f19;">Manuela Mango</h2>
                <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>