Unauthorized Access Warning - Copy this Html, Tailwind Component to your project
Mi correggi il seguente codice e me lo trasformi in tailwind?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Unauthorized Access!</title> <style> /* Impostazioni di base per il corpo della pagina */ body { margin: 0; background: black; color: green; font family: "Courier New", Courier, monospace; /* Font tipico dei terminali */ font size: 18px; /* Impostazione dimensione font */ display: flex; flex direction: column; justify content: center; align items: center; height: 100vh; overflow: hidden; /* Disabilita lo scrolling */ cursor: none; /* Disabilita il cursore del mouse */ } /* Box per l'overlay iniziale che appare appena l'utente entra nella pagina */ #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); /* Sfondo scuro con trasparenza */ color: white; display: flex; flex direction: column; justify content: center; align items: center; z index: 10; /* Posiziona l'overlay sopra gli altri elementi */ } /* Box per la console simulata, in cui vengono mostrati i messaggi */ #console { background: black; border: 2px solid green; padding: 10px; width: 90%; max height: 50%; /* Limita l'altezza della console */ overflow: hidden; /* Disabilita lo scrolling nel box della console */ box shadow: 0 0 20px green; } /* P styling per i paragrafi all'interno della console */ #console p { margin: 5px 0; } /* Messaggio centrale che appare all'utente */ #message { text align: center; margin top: 20px; } /* Box in alto a destra per visualizzare le informazioni dell'utente (IP, Browser, OS) */ #userInfoBox { position: absolute; top: 10px; right: 10px; background color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border radius: 10px; box shadow: 0 0 10px green; font family: "Courier New", Courier, monospace; font size: 14px; max width: 300px; width: 300px; border: 2px solid green; } /* Box in alto a sinistra per visualizzare la simulazione della cancellazione dei file */ #deleteBox { position: absolute; top: 10px; left: 10px; width: 250px; /* Ristretto per evitare sovrapposizioni */ height: 180px; /* Ridotto rispetto alla versione precedente */ background color: rgba(0, 0, 0, 0.8); color: white; padding: 15px; border radius: 10px; box shadow: 0 0 10px green; font family: "Courier New", Courier, monospace; font size: 14px; overflow: hidden; border: 2px solid green; } /* Impostazione dello stile per i titoli di tutti i box */ #userInfoBox h2, #deleteBox h2 { font size: 18px; margin bottom: 10px; color: green; /* Colore del titolo verde per tutti i box */ } /* Impostazione dei paragrafi all'interno dei box (info dell'utente e cancellazione file) */ #userInfoBox p, #deleteBox p { margin: 5px 0; } /* Media query per dispositivi mobili (schermi piccoli) */ @media (max width: 600px) { body { font size: 16px; } #console { width: 95%; max height: 40%; } #message h1 { font size: 24px; } #userInfoBox, #deleteBox { font size: 12px; max width: 80%; width: 80%; } } /* Titolo globale (colore e dimensioni) */ h2 { color: green; font size: 20px; margin bottom: 10px; } </style> </head> <body> <! Overlay che si mostra all'inizio dell'interazione con l'utente > <div id="overlay"> <h1>⚠️ WARNING ⚠️</h1> <p>Click anywhere to start the process.</p> </div> <! Messaggio centrale che l'utente vedrà dopo aver cliccato > <div id="message"> <h1>⚠️ UNAUTHORIZED ACCESS DETECTED ⚠️</h1> <p>Control of this system has been transferred. Do not turn off your computer!</p> </div> <! Box principale della console dove vengono visualizzati i messaggi > <div id="console"> <p>Connecting to the remote server...</p> </div> <! Box in alto a destra che mostra le informazioni dell'utente (IP, browser, sistema operativo) > <div id="userInfoBox"> <h2>User Info:</h2> <p>IP: <span id="userIp">Loading...</span></p> <p>Browser: <span id="userBrowser">Loading...</span></p> <p>OS: <span id="userOS">Loading...</span></p> </div> <! Box in alto a sinistra che simula la cancellazione dei file > <div id="deleteBox"> <h2>Deleting Files...</h2> </div> <script> // Variabili per la gestione dei box const consoleDiv = document.getElementById('console'); const overlay = document.getElementById('overlay'); const userInfoBox = document.getElementById('userInfoBox'); const deleteBox = document.getElementById('deleteBox'); const ipSpan = document.getElementById('userIp'); const browserSpan = document.getElementById('userBrowser'); const osSpan = document.getElementById('userOS'); // Messaggi che vengono mostrati nella console const messages = [ "Scanning local files...", "Collecting sensitive data...", "Uploading information to remote server...", "Disabling peripherals...", "Unable to stop the process.", "Preparing to disconnect the user.", "System is under remote control." ]; // File fittizi da cancellare (esempio di nomi di file) const fileNames = [ "/home/user/Documents/file1.txt", "/home/user/Downloads/important_data.zip", "/home/user/Desktop/sensitive_info.pdf", "/etc/important_data/config.xml", "/usr/local/bin/malicious_script.sh", "/tmp/logs/system.log", "/var/lib/config/backup.bak", "/dev/system_data/metadata.db" ]; let fileIndex = 0; // Funzione per recuperare l'indirizzo IP dell'utente utilizzando l'API ipify function fetchIp() { fetch('https://api.ipify.org?format=json') // API per ottenere l'IP pubblico .then(response => response.json()) .then(data => { ipSpan.textContent = data.ip; // Visualizza l'IP dell'utente }) .catch(error => { ipSpan.textContent = 'Unable to retrieve IP'; // Gestisce l'errore se l'IP non può essere recuperato console.error('Error fetching IP:', error); }); } // Funzione per determinare il browser dell'utente function getBrowser() { const userAgent = navigator.userAgent; // Recupera l'user agent del browser if (userAgent.indexOf("Chrome") > 1) { return "Chrome"; } else if (userAgent.indexOf("Firefox") > 1) { return "Firefox"; } else if (userAgent.indexOf("Safari") > 1) { return "Safari"; } else if (userAgent.indexOf("Edge") > 1) { return "Edge"; } else { return "Unknown"; } } // Funzione per determinare il sistema operativo dell'utente function getOS() { const userAgent = navigator.userAgent; // Recupera l'user agent if (userAgent.indexOf("Windows") > 1) { return "Windows"; } else if (userAgent.indexOf("Mac") > 1) { return "MacOS"; } else if (userAgent.indexOf("Linux") > 1) { return "Linux"; } else { return "Unknown"; } } // Funzione per avviare il "prank" dopo che l'utente ha cliccato function startPrank() { overlay.style.display = 'none'; // Nasconde l'overlay consoleDiv.innerHTML = "<p>Initializing... Please wait.</p>"; // Mostra messaggio di inizializzazione simulateFileDeletion(); // Inizia a simulare la cancellazione dei file fetchIp(); // Recupera l'IP dell'utente browserSpan.textContent = getBrowser(); // Recupera il browser dell'utente osSpan.textContent = getOS(); // Recupera il sistema operativo dell'utente } // Funzione per simulare la cancellazione dei file con un ciclo infinito function simulateFileDeletion() { const deleteBoxDiv = deleteBox; let fileIndex = 0; // Indice del file da cancellare // Crea un intervallo che simula la cancellazione veloce dei file setInterval(() => { const fileName = fileNames[fileIndex % fileNames.length]; // Cicla tra i file const p = document.createElement('p'); p.textContent = `Deleting ${fileName}...`; // Mostra il file che si sta eliminando deleteBoxDiv.appendChild(p); deleteBoxDiv.scrollTop = deleteBoxDiv.scrollHeight; // Scorre il contenuto per visualizzare i nuovi messaggi fileIndex++; // Passa al prossimo file }, 100); // Velocizza l'animazione di cancellazione a 100ms } // Aspetta che l'utente clicchi per avviare il prank overlay.addEventListener('click', startPrank); </script> </body> </html>
