|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DEEP CORE SYSTEM</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #00f0ff; |
|
|
--secondary: #7b2dff; |
|
|
--dark: #050510; |
|
|
--darker: #020208; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
background-color: var(--darker); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.cyber-font { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.deep-gradient { |
|
|
background: linear-gradient(135deg, var(--darker) 0%, var(--dark) 50%, #1a0a33 100%); |
|
|
} |
|
|
|
|
|
.cyber-grid { |
|
|
background-image: |
|
|
linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); |
|
|
background-size: 50px 50px; |
|
|
} |
|
|
|
|
|
.cyber-card { |
|
|
background: rgba(10, 10, 25, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(0, 240, 255, 0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.cyber-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 240, 255, 0.3); |
|
|
border-color: var(--primary); |
|
|
} |
|
|
|
|
|
.cyber-glow { |
|
|
text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary); |
|
|
} |
|
|
|
|
|
.cyber-btn { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.cyber-btn::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent); |
|
|
transition: all 0.6s; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.cyber-btn:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.cyber-pulse { |
|
|
animation: cyberPulse 3s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes cyberPulse { |
|
|
0% { box-shadow: 0 0 5px var(--primary); } |
|
|
100% { box-shadow: 0 0 20px var(--primary), 0 0 30px var(--secondary); } |
|
|
} |
|
|
|
|
|
.data-stream { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.data-stream::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(to bottom, transparent 0%, rgba(0, 240, 255, 0.1) 50%, transparent 100%); |
|
|
animation: dataStream 5s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes dataStream { |
|
|
0% { transform: translateY(-100%); } |
|
|
100% { transform: translateY(100%); } |
|
|
} |
|
|
|
|
|
.hacker-terminal { |
|
|
background: rgba(0, 5, 10, 0.8); |
|
|
border: 1px solid var(--primary); |
|
|
font-family: 'Courier New', monospace; |
|
|
text-shadow: 0 0 5px var(--primary); |
|
|
} |
|
|
|
|
|
.terminal-cursor { |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
.cyber-loader { |
|
|
position: relative; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
} |
|
|
|
|
|
.cyber-loader::before, |
|
|
.cyber-loader::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
border: 3px solid transparent; |
|
|
border-top-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
animation: spin 1.5s linear infinite; |
|
|
} |
|
|
|
|
|
.cyber-loader::after { |
|
|
border-top-color: var(--secondary); |
|
|
animation-delay: 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.cyber-cube { |
|
|
transform-style: preserve-3d; |
|
|
animation: rotateCube 20s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes rotateCube { |
|
|
0% { transform: rotateX(0) rotateY(0); } |
|
|
100% { transform: rotateX(360deg) rotateY(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.scan-line { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(to bottom, transparent, var(--primary), transparent); |
|
|
box-shadow: 0 0 10px var(--primary); |
|
|
z-index: 1000; |
|
|
animation: scan 8s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes scan { |
|
|
0% { top: -2px; opacity: 0; } |
|
|
5% { opacity: 1; } |
|
|
95% { opacity: 1; } |
|
|
100% { top: 100%; opacity: 0; } |
|
|
} |
|
|
|
|
|
|
|
|
.deep-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: radial-gradient(circle at center, transparent 0%, var(--darker) 70%); |
|
|
pointer-events: none; |
|
|
z-index: 900; |
|
|
} |
|
|
|
|
|
|
|
|
.neural-network { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
z-index: -1; |
|
|
opacity: 0.1; |
|
|
} |
|
|
|
|
|
.neural-node { |
|
|
position: absolute; |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
background-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
.neural-connection { |
|
|
position: absolute; |
|
|
background: linear-gradient(to right, var(--primary), var(--secondary)); |
|
|
height: 1px; |
|
|
transform-origin: left center; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="deep-gradient cyber-grid"> |
|
|
|
|
|
<div class="deep-overlay"></div> |
|
|
<div class="scan-line"></div> |
|
|
<div id="neuralNetwork" class="neural-network"></div> |
|
|
|
|
|
|
|
|
<div id="terminal" class="fixed bottom-0 left-0 right-0 hacker-terminal text-green-400 p-4 hidden md:block" style="height: 150px;"> |
|
|
<div id="terminalContent" class="overflow-y-auto h-full"> |
|
|
<div>> Initializing DEEP CORE SYSTEM v4.2.1</div> |
|
|
<div>> Loading quantum encryption modules...</div> |
|
|
<div>> Establishing neural network connections</div> |
|
|
<div>> Verifying user credentials</div> |
|
|
<div>> Access granted: Security clearance LEVEL 9</div> |
|
|
<div>> Welcome back, ADMIN</div> |
|
|
<div id="terminalInput">> <span class="terminal-cursor">█</span></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<header class="flex justify-between items-center py-6"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="cyber-loader"></div> |
|
|
<h1 class="cyber-font text-3xl cyber-glow">DEEP<span class="text-primary">CORE</span></h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all">NETWORK</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all">DATA STREAMS</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all">QUANTUM DB</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition-all">AI NODES</a> |
|
|
</nav> |
|
|
<button class="cyber-btn bg-gradient-to-r from-primary to-secondary text-black px-6 py-2 rounded-sm font-bold"> |
|
|
<i class="fas fa-terminal mr-2"></i> CONSOLE |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="my-20 py-12 relative"> |
|
|
<div class="absolute -top-20 -left-20 w-40 h-40 bg-primary rounded-full filter blur-3xl opacity-20"></div> |
|
|
<div class="absolute -bottom-20 -right-20 w-60 h-60 bg-secondary rounded-full filter blur-3xl opacity-20"></div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<div class="text-primary mb-4 cyber-font">SECURE ACCESS POINT</div> |
|
|
<h2 class="text-5xl md:text-7xl font-bold mb-6 cyber-font"> |
|
|
<span class="text-gray-300">DIVE INTO</span><br> |
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary cyber-glow">THE DEEP WEB</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 mb-8 max-w-lg"> |
|
|
Access the most secure and encrypted network layer ever created. Our quantum tunneling technology ensures complete anonymity and protection. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button id="deepDiveBtn" class="cyber-btn cyber-pulse bg-gradient-to-r from-primary to-secondary text-black px-8 py-4 rounded-sm font-bold text-lg"> |
|
|
<i class="fas fa-network-wired mr-2"></i> INITIATE DEEP DIVE |
|
|
</button> |
|
|
<button class="border border-primary text-primary hover:bg-primary hover:bg-opacity-10 px-8 py-4 rounded-sm font-bold text-lg transition-all"> |
|
|
<i class="fas fa-shield-alt mr-2"></i> SECURITY SPECS |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="cyber-cube"> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-0 bg-primary bg-opacity-10"></div> |
|
|
<div class="data-stream relative p-1"> |
|
|
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1085&q=80" |
|
|
alt="Deep Core Network" |
|
|
class="w-full h-auto border border-primary border-opacity-30"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-10 -right-10 bg-dark p-6 rounded-sm border border-primary border-opacity-30 backdrop-blur-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-primary p-3 rounded-sm mr-4"> |
|
|
<i class="fas fa-lock text-black"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-white font-bold">256-bit Quantum Encryption</div> |
|
|
<div class="text-primary text-sm">Unbreakable security layer</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="my-24"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
|
|
<div class="cyber-card p-6"> |
|
|
<div class="text-primary text-4xl font-bold mb-2 cyber-font">12.7M</div> |
|
|
<div class="text-gray-400">DATA NODES</div> |
|
|
<div class="h-1 bg-gradient-to-r from-primary to-secondary mt-3"></div> |
|
|
</div> |
|
|
<div class="cyber-card p-6"> |
|
|
<div class="text-primary text-4xl font-bold mb-2 cyber-font">9.3PB</div> |
|
|
<div class="text-gray-400">ENCRYPTED DATA</div> |
|
|
<div class="h-1 bg-gradient-to-r from-primary to-secondary mt-3"></div> |
|
|
</div> |
|
|
<div class="cyber-card p-6"> |
|
|
<div class="text-primary text-4xl font-bold mb-2 cyber-font">0</div> |
|
|
<div class="text-gray-400">SECURITY BREACHES</div> |
|
|
<div class="h-1 bg-gradient-to-r from-primary to-secondary mt-3"></div> |
|
|
</div> |
|
|
<div class="cyber-card p-6"> |
|
|
<div class="text-primary text-4xl font-bold mb-2 cyber-font">∞</div> |
|
|
<div class="text-gray-400">BANDWIDTH</div> |
|
|
<div class="h-1 bg-gradient-to-r from-primary to-secondary mt-3"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="my-24"> |
|
|
<div class="text-center mb-16"> |
|
|
<h3 class="text-4xl font-bold mb-4 cyber-font">DEEP CORE <span class="text-primary">TECHNOLOGIES</span></h3> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="cyber-card p-8"> |
|
|
<div class="text-primary text-4xl mb-4"> |
|
|
<i class="fas fa-atom"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3 cyber-font">QUANTUM ENCRYPTION</h4> |
|
|
<p class="text-gray-400"> |
|
|
Utilizing quantum entanglement to create unbreakable encryption keys that change 10,000 times per second. |
|
|
</p> |
|
|
</div> |
|
|
<div class="cyber-card p-8"> |
|
|
<div class="text-primary text-4xl mb-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3 cyber-font">NEURAL NETWORK</h4> |
|
|
<p class="text-gray-400"> |
|
|
Self-learning AI network that adapts to threats in real-time, predicting and neutralizing attacks before they happen. |
|
|
</p> |
|
|
</div> |
|
|
<div class="cyber-card p-8"> |
|
|
<div class="text-primary text-4xl mb-4"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-3 cyber-font">DISTRIBUTED NODES</h4> |
|
|
<p class="text-gray-400"> |
|
|
Global network of decentralized nodes ensures zero downtime and maximum redundancy across 197 countries. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="my-24 py-16 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-10"></div> |
|
|
<div class="absolute -right-20 -top-20 w-64 h-64 bg-primary rounded-full filter blur-3xl opacity-20"></div> |
|
|
<div class="absolute -left-20 -bottom-20 w-64 h-64 bg-secondary rounded-full filter blur-3xl opacity-20"></div> |
|
|
|
|
|
<div class="relative text-center max-w-3xl mx-auto"> |
|
|
<h3 class="text-4xl font-bold mb-6 cyber-font">READY TO <span class="text-primary">DIVE DEEP?</span></h3> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Activate your secure connection to the most advanced network infrastructure ever created. Complete anonymity guaranteed. |
|
|
</p> |
|
|
<button id="activateDeepDive" class="cyber-btn cyber-pulse bg-gradient-to-r from-primary to-secondary text-black px-12 py-5 rounded-sm font-bold text-xl"> |
|
|
<i class="fas fa-power-off mr-3"></i> ACTIVATE DEEP CORE |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deepDiveOverlay" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden"> |
|
|
<div class="text-center"> |
|
|
<div class="cyber-loader mx-auto mb-8"></div> |
|
|
<h3 class="text-4xl font-bold mb-4 cyber-font text-primary">INITIATING DEEP DIVE</h3> |
|
|
<p class="text-xl text-gray-300 mb-8">Establishing quantum connection...</p> |
|
|
<div id="connectionProgress" class="w-full bg-gray-800 h-2 mb-4"> |
|
|
<div id="progressBar" class="bg-gradient-to-r from-primary to-secondary h-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="statusMessages" class="text-gray-400 text-sm"> |
|
|
<div>> Verifying quantum signatures...</div> |
|
|
<div>> Routing through Tor network...</div> |
|
|
<div>> Establishing secure tunnel...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
createNeuralNetwork(); |
|
|
|
|
|
|
|
|
simulateTerminal(); |
|
|
|
|
|
|
|
|
const diveBtns = [ |
|
|
document.getElementById('deepDiveBtn'), |
|
|
document.getElementById('activateDeepDive') |
|
|
]; |
|
|
const deepDiveOverlay = document.getElementById('deepDiveOverlay'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const statusMessages = document.getElementById('statusMessages'); |
|
|
|
|
|
diveBtns.forEach(btn => { |
|
|
btn.addEventListener('click', initiateDeepDive); |
|
|
}); |
|
|
|
|
|
function initiateDeepDive() { |
|
|
|
|
|
deepDiveOverlay.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const progressInterval = setInterval(() => { |
|
|
progress += Math.random() * 5; |
|
|
if (progress > 100) progress = 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
if (progress % 20 < 5) { |
|
|
const messages = [ |
|
|
"> Bypassing firewalls...", |
|
|
"> Encrypting data streams...", |
|
|
"> Connecting to dark nodes...", |
|
|
"> Verifying blockchain signatures...", |
|
|
"> Activating neural firewall...", |
|
|
"> Routing through proxy chain..." |
|
|
]; |
|
|
const randomMsg = messages[Math.floor(Math.random() * messages.length)]; |
|
|
const msgElement = document.createElement('div'); |
|
|
msgElement.textContent = randomMsg; |
|
|
statusMessages.appendChild(msgElement); |
|
|
statusMessages.scrollTop = statusMessages.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
setTimeout(() => { |
|
|
deepDiveOverlay.innerHTML = ` |
|
|
<div class="text-center"> |
|
|
<div class="text-primary text-6xl mb-6"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
</div> |
|
|
<h3 class="text-4xl font-bold mb-4 cyber-font text-primary">DEEP DIVE COMPLETE</h3> |
|
|
<p class="text-xl text-gray-300 mb-8">Secure connection established</p> |
|
|
<div class="text-gray-400 mb-8"> |
|
|
<div>> Connection encrypted: 256-bit quantum</div> |
|
|
<div>> IP masked: 7-layer proxy</div> |
|
|
<div>> Data streams secured</div> |
|
|
</div> |
|
|
<button id="exitDive" class="cyber-btn bg-gradient-to-r from-primary to-secondary text-black px-8 py-3 rounded-sm font-bold"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> EXIT DEEP DIVE |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
document.getElementById('exitDive').addEventListener('click', () => { |
|
|
deepDiveOverlay.classList.add('hidden'); |
|
|
deepDiveOverlay.innerHTML = ` |
|
|
<div class="text-center"> |
|
|
<div class="cyber-loader mx-auto mb-8"></div> |
|
|
<h3 class="text-4xl font-bold mb-4 cyber-font text-primary">INITIATING DEEP DIVE</h3> |
|
|
<p class="text-xl text-gray-300 mb-8">Establishing quantum connection...</p> |
|
|
<div id="connectionProgress" class="w-full bg-gray-800 h-2 mb-4"> |
|
|
<div id="progressBar" class="bg-gradient-to-r from-primary to-secondary h-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<div id="statusMessages" class="text-gray-400 text-sm"> |
|
|
<div>> Verifying quantum signatures...</div> |
|
|
<div>> Routing through Tor network...</div> |
|
|
<div>> Establishing secure tunnel...</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
progressBar = document.getElementById('progressBar'); |
|
|
statusMessages = document.getElementById('statusMessages'); |
|
|
}); |
|
|
}, 1000); |
|
|
} |
|
|
}, 200); |
|
|
} |
|
|
|
|
|
function createNeuralNetwork() { |
|
|
const neuralNetwork = document.getElementById('neuralNetwork'); |
|
|
const nodes = []; |
|
|
const connections = []; |
|
|
|
|
|
|
|
|
for (let i = 0; i < 30; i++) { |
|
|
const node = document.createElement('div'); |
|
|
node.className = 'neural-node'; |
|
|
node.style.left = `${Math.random() * 100}%`; |
|
|
node.style.top = `${Math.random() * 100}%`; |
|
|
node.style.opacity = Math.random() * 0.5 + 0.1; |
|
|
node.style.animation = `pulse ${Math.random() * 3 + 2}s infinite alternate`; |
|
|
neuralNetwork.appendChild(node); |
|
|
nodes.push(node); |
|
|
|
|
|
|
|
|
const pulseKeyframes = ` |
|
|
@keyframes pulse-${i} { |
|
|
0% { transform: scale(1); opacity: ${Math.random() * 0.3 + 0.1}; } |
|
|
100% { transform: scale(${Math.random() * 2 + 1}); opacity: ${Math.random() * 0.5 + 0.3}; } |
|
|
} |
|
|
`; |
|
|
const style = document.createElement('style'); |
|
|
style.innerHTML = pulseKeyframes; |
|
|
document.head.appendChild(style); |
|
|
node.style.animation = `pulse-${i} ${Math.random() * 5 + 3}s infinite alternate`; |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i < 50; i++) { |
|
|
const node1 = nodes[Math.floor(Math.random() * nodes.length)]; |
|
|
const node2 = nodes[Math.floor(Math.random() * nodes.length)]; |
|
|
|
|
|
if (node1 !== node2) { |
|
|
const connection = document.createElement('div'); |
|
|
connection.className = 'neural-connection'; |
|
|
|
|
|
const rect1 = node1.getBoundingClientRect(); |
|
|
const rect2 = node2.getBoundingClientRect(); |
|
|
|
|
|
const x1 = rect1.left + rect1.width/2; |
|
|
const y1 = rect1.top + rect1.height/2; |
|
|
const x2 = rect2.left + rect2.width/2; |
|
|
const y2 = rect2.top + rect2.height/2; |
|
|
|
|
|
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
|
|
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; |
|
|
|
|
|
connection.style.width = `${length}px`; |
|
|
connection.style.left = `${x1}px`; |
|
|
connection.style.top = `${y1}px`; |
|
|
connection.style.transform = `rotate(${angle}deg)`; |
|
|
connection.style.opacity = Math.random() * 0.3; |
|
|
|
|
|
neuralNetwork.appendChild(connection); |
|
|
connections.push(connection); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function animateConnections() { |
|
|
connections.forEach(conn => { |
|
|
conn.style.opacity = Math.random() * 0.5; |
|
|
}); |
|
|
requestAnimationFrame(animateConnections); |
|
|
} |
|
|
animateConnections(); |
|
|
} |
|
|
|
|
|
function simulateTerminal() { |
|
|
const terminalContent = document.getElementById('terminalContent'); |
|
|
const terminalInput = document.getElementById('terminalInput'); |
|
|
const commands = [ |
|
|
"scan network --deep", |
|
|
"analyze security --level=9", |
|
|
"decrypt quantum_keys --algorithm=sha512", |
|
|
"access dark_nodes --tor", |
|
|
"bypass firewall --stealth", |
|
|
"initiate protocol --deepcore" |
|
|
]; |
|
|
|
|
|
let commandIndex = 0; |
|
|
|
|
|
function addTerminalLine(text) { |
|
|
const line = document.createElement('div'); |
|
|
line.textContent = text; |
|
|
terminalContent.appendChild(line); |
|
|
terminalContent.scrollTop = terminalContent.scrollHeight; |
|
|
} |
|
|
|
|
|
function simulateCommand() { |
|
|
if (commandIndex < commands.length) { |
|
|
|
|
|
terminalInput.textContent = `> ${commands[commandIndex]}`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
addTerminalLine(`> Executing: ${commands[commandIndex]}`); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const results = [ |
|
|
"Operation completed successfully", |
|
|
"Access granted - security level 9", |
|
|
"Quantum tunnel established", |
|
|
"256-bit encryption activated", |
|
|
"Neural network synchronized", |
|
|
"Dark nodes connected: 12,743" |
|
|
]; |
|
|
addTerminalLine(results[commandIndex % results.length]); |
|
|
|
|
|
|
|
|
terminalInput.textContent = "> "; |
|
|
const cursor = document.createElement('span'); |
|
|
cursor.className = 'terminal-cursor'; |
|
|
cursor.textContent = '█'; |
|
|
terminalInput.appendChild(cursor); |
|
|
|
|
|
commandIndex++; |
|
|
if (commandIndex < commands.length) { |
|
|
setTimeout(simulateCommand, 1000); |
|
|
} |
|
|
}, 1000); |
|
|
}, 1500); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(simulateCommand, 3000); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
