Hugging Face's logo

Spaces:
docto41
/
deepsite
Running

App Files Community
deepsite / index.html
docto41's picture
docto41
Add 3 files
d939002 verified
Raw
History Blame Contribute Delete
30.5 kB
<!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); }
 }
/* Effets 3D */
 .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); }
 }
/* Effet de scan */
 .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; }
 }
/* Overlay de profondeur */
 .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;
 }
/* Effet de connexion neuronale */
 .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">
 <!-- Effets de fond -->
 <div class="deep-overlay"></div>
 <div class="scan-line"></div>
 <div id="neuralNetwork" class="neural-network"></div>
<!-- Terminal flottant -->
 <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>
<!-- Contenu principal -->
 <div class="container mx-auto px-4 py-12">
 <!-- En-tête -->
 <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 héroïque -->
 <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 des stats -->
 <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 des fonctionnalités -->
 <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 d'activation -->
 <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>
<!-- Overlay de plongée profonde -->
 <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() {
 // Créer le réseau neuronal
 createNeuralNetwork();
// Simuler le terminal
 simulateTerminal();
// Boutons de plongée profonde
 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() {
 // Afficher l'overlay
 deepDiveOverlay.classList.remove('hidden');
// Démarrer la progression
 let progress = 0;
 const progressInterval = setInterval(() => {
 progress += Math.random() * 5;
 if (progress > 100) progress = 100;
 progressBar.style.width = `${progress}%`;
// Ajouter des messages aléatoires
 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;
 }
// Terminer la progression
 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 = [];
// Créer des nœuds
 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);
// Ajouter une animation de pulsation aléatoire
 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`;
 }
// Créer des connexions
 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);
 }
 }
// Animer les connexions
 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) {
 // Afficher la commande
 terminalInput.textContent = `> ${commands[commandIndex]}`;
// Simuler le traitement
 setTimeout(() => {
 addTerminalLine(`> Executing: ${commands[commandIndex]}`);
// Résultat aléatoire
 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]);
// Nouvelle ligne d'entrée
 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);
 }
 }
// Démarrer la simulation après un délai
 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>