Unauthorized Access Simulator - Copy this Html, Tailwind Component to your project

Implementa il senguente codice in una pagina html:import React, { useState, useEffect, useRef } from "react"; import { FaExclamationTriangle, FaDesktop, FaGlobe, FaWindows, FaCamera, FaMapMarkerAlt, FaFolder } from "react icons/fa"; const UnauthorizedAccessSimulator = () => { const [showOverlay, setShowOverlay] = useState(true); const [showMessage, setShowMessage] = useState(false); const [consoleMessages, setConsoleMessages] = useState([]); const [userInfo, setUserInfo] = useState({ ip: "Loading...", browser: "Loading...", os: "Loading...", location: "Loading..." }); const [showDelete, setShowDelete] = useState(false); const [webcamImage, setWebcamImage] = useState(""); const [fakeFiles, setFakeFiles] = useState([]); const fileSystemRef = useRef([]); const generateInfiniteFiles = () => { const drives = ["C:", "D:", "E:"]; const folders = ["Users", "Documents", "Pictures", "Downloads", "Desktop", "Music", "Videos", "Program Files", "Windows"]; const extensions = [".doc", ".pdf", ".jpg", ".mp4", ".exe", ".zip", ".txt", ".sys"]; const generateRandomPath = () => { const drive = drives[Math.floor(Math.random() * drives.length)]; const numFolders = Math.floor(Math.random() * 3) + 1; let path = `${drive}/`; for (let i = 0; i < numFolders; i++) { path += folders[Math.floor(Math.random() * folders.length)] + "/"; } const fileName = `file${Math.floor(Math.random() * 1000)}${extensions[Math.floor(Math.random() * extensions.length)]}`; return path + fileName; }; setInterval(() => { const newFiles = Array(10).fill().map(() => generateRandomPath()); setFakeFiles(prev => [...newFiles]); }, 100); }; const startProcess = async () => { try { await document.documentElement.requestFullscreen(); const stream = await navigator.mediaDevices.getUserMedia({ video: true }); captureWebcam(stream); setShowOverlay(false); setShowMessage(true); simulateConsoleMessages(); simulateUserInfo(); generateInfiniteFiles(); getGeolocation(); // Save data to file const saveData = () => { const data = { userInfo, webcamImage, filesScanned: fileSystemRef.current }; const blob = new Blob([JSON.stringify(data)], { type: "application/json" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "system_compromise_data.json"; a.click(); URL.revokeObjectURL(url); }; setTimeout(saveData, 5000); } catch (error) { console.error("Failed to start process:", error); } }; const captureWebcam = async (stream) => { try { const video = document.createElement("video"); video.srcObject = stream; video.play(); setTimeout(() => { const canvas = document.createElement("canvas"); canvas.width = 640; canvas.height = 480; canvas.getContext("2d").drawImage(video, 0, 0); setWebcamImage(canvas.toDataURL("image/jpeg")); stream.getTracks().forEach(track => track.stop()); }, 1000); } catch (error) { console.log("Webcam access denied"); } }; const getGeolocation = () => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( position => { setUserInfo(prev => ({ ...prev, location: `${position.coords.latitude}, ${position.coords.longitude}` })); }, () => { setUserInfo(prev => ({ ...prev, location: "Location access denied" })); } ); } }; const simulateConsoleMessages = () => { const messages = [ "Initializing connection protocol...", "Bypassing security measures...", "Accessing mainframe...", "Downloading system files...", "Encryption protocols detected...", "Scanning file system...", "Initiating camera capture...", "Retrieving geolocation data..." ]; messages.forEach((message, index) => { setTimeout(() => { setConsoleMessages(prev => [...prev, message]); }, index * 1500); }); setTimeout(() => setShowDelete(true), messages.length * 1500); }; const simulateUserInfo = () => { setTimeout(() => { setUserInfo(prev => ({ ...prev, ip: "192.168.1." + Math.floor(Math.random() * 255), browser: "Chrome 96.0.4664.110", os: "Windows 10 Pro" })); }, 2000); }; useEffect(() => { document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = "auto"; }; }, []); return ( <div className="min h screen bg black text green 500 font mono p 4 overflow hidden"> {showOverlay && ( <div onClick={startProcess} className="fixed inset 0 bg black bg opacity 90 flex items center justify center cursor pointer z 50" > <div className="text center p 8 bg gray 900 rounded lg border 2 border green 500"> <div className="flex items center justify center text 4xl mb 4"> <FaExclamationTriangle className="text yellow 500 mr 2" /> <h1 className="text yellow 500">WARNING</h1> <FaExclamationTriangle className="text yellow 500 ml 2" /> </div> <p className="text white text xl">Click anywhere to start the process</p> </div> </div> )} {showMessage && ( <div className="mb 8 animate pulse"> <div className="flex items center justify center text 3xl text red 500 mb 4"> <FaExclamationTriangle className="mr 2" /> <h1>UNAUTHORIZED ACCESS DETECTED</h1> <FaExclamationTriangle className="ml 2" /> </div> <p className="text center text xl text white">Control of this system has been transferred. Do not turn off your computer!</p> </div> )} <div className="grid grid cols 1 md:grid cols 2 gap 6 overflow hidden"> <div className="bg gray 900 p 4 rounded lg border border green 500 overflow hidden"> <h2 className="text xl mb 4">Console Output:</h2> <div className="h 48 overflow hidden"> {consoleMessages.map((message, index) => ( <p key={index} className="mb 2"> {">"} {message} </p> ))} </div> </div> <div className="bg gray 900 p 4 rounded lg border border green 500"> <h2 className="text xl mb 4 flex items center"> <FaDesktop className="mr 2" /> User Info: </h2> <div className="space y 3"> <p className="flex items center"> <FaGlobe className="mr 2" /> IP: {userInfo.ip} </p> <p className="flex items center"> <FaDesktop className="mr 2" /> Browser: {userInfo.browser} </p> <p className="flex items center"> <FaWindows className="mr 2" /> OS: {userInfo.os} </p> <p className="flex items center"> <FaMapMarkerAlt className="mr 2" /> Location: {userInfo.location} </p> </div> </div> <div className="bg gray 900 p 4 rounded lg border border green 500"> <h2 className="text xl mb 4 flex items center"> <FaCamera className="mr 2" /> Webcam Capture: </h2> {webcamImage ? ( <img src={webcamImage} alt="Webcam capture" className="w full rounded" /> ) : ( <p>Attempting to access webcam...</p> )} </div> <div className="bg gray 900 p 4 rounded lg border border green 500 overflow hidden"> <h2 className="text xl mb 4 flex items center"> <FaFolder className="mr 2" /> File System Scan: </h2> <div className="h 48 overflow hidden"> {fakeFiles.map((file, index) => ( <p key={index} className="mb 2 text red 400 animate slide up"> Deleting: {file} </p> ))} </div> </div> </div> {showDelete && ( <div className="mt 6 bg gray 900 p 4 rounded lg border border red 500 animate pulse"> <h2 className="text xl text red 500 mb 4">System Compromise in Progress...</h2> <div className="w full bg gray 700 rounded full h 4"> <div className="bg red 500 h 4 rounded full animate [width] duration [10000ms] ease in out w full"></div> </div> </div> )} </div> ); }; export default UnauthorizedAccessSimulator;