|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HYPNOS-X | Advanced Hypnotic AI 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&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #6e00ff; |
|
|
--secondary: #ff00aa; |
|
|
--accent: #00ffcc; |
|
|
--dark: #0a0a1a; |
|
|
--light: #f0f0ff; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
background-color: var(--dark); |
|
|
color: var(--light); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.hypno-spiral { |
|
|
animation: spin 20s linear infinite; |
|
|
background: radial-gradient(circle, var(--primary), var(--secondary)); |
|
|
border-radius: 50%; |
|
|
opacity: 0.3; |
|
|
position: fixed; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.theta-wave { |
|
|
position: relative; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, var(--accent), var(--secondary)); |
|
|
animation: wave 2s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes wave { |
|
|
0% { transform: scaleX(0.5); opacity: 0.5; } |
|
|
50% { transform: scaleX(1); opacity: 1; } |
|
|
100% { transform: scaleX(0.5); opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(110, 0, 255, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(110, 0, 255, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(110, 0, 255, 0); } |
|
|
} |
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, .glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: var(--dark); |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
left: 2px; |
|
|
text-shadow: -2px 0 var(--secondary); |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
left: -2px; |
|
|
text-shadow: -2px 0 var(--accent); |
|
|
clip: rect(44px, 450px, 56px, 0); |
|
|
animation: glitch-anim2 5s infinite linear alternate-reverse; |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim { |
|
|
0% { clip: rect(31px, 9999px, 94px, 0); } |
|
|
10% { clip: rect(112px, 9999px, 76px, 0); } |
|
|
20% { clip: rect(85px, 9999px, 77px, 0); } |
|
|
30% { clip: rect(27px, 9999px, 97px, 0); } |
|
|
40% { clip: rect(64px, 9999px, 98px, 0); } |
|
|
50% { clip: rect(61px, 9999px, 85px, 0); } |
|
|
60% { clip: rect(99px, 9999px, 114px, 0); } |
|
|
70% { clip: rect(34px, 9999px, 115px, 0); } |
|
|
80% { clip: rect(98px, 9999px, 129px, 0); } |
|
|
90% { clip: rect(43px, 9999px, 96px, 0); } |
|
|
100% { clip: rect(82px, 9999px, 64px, 0); } |
|
|
} |
|
|
|
|
|
@keyframes glitch-anim2 { |
|
|
0% { clip: rect(65px, 9999px, 119px, 0); } |
|
|
10% { clip: rect(120px, 9999px, 152px, 0); } |
|
|
20% { clip: rect(85px, 9999px, 16px, 0); } |
|
|
30% { clip: rect(20px, 9999px, 96px, 0); } |
|
|
40% { clip: rect(79px, 9999px, 53px, 0); } |
|
|
50% { clip: rect(64px, 9999px, 34px, 0); } |
|
|
60% { clip: rect(105px, 9999px, 79px, 0); } |
|
|
70% { clip: rect(30px, 9999px, 105px, 0); } |
|
|
80% { clip: rect(88px, 9999px, 99px, 0); } |
|
|
90% { clip: rect(83px, 9999px, 42px, 0); } |
|
|
100% { clip: rect(31px, 9999px, 128px, 0); } |
|
|
} |
|
|
|
|
|
.terminal { |
|
|
background-color: rgba(10, 10, 26, 0.8); |
|
|
border: 1px solid var(--primary); |
|
|
border-radius: 5px; |
|
|
font-family: 'Courier New', monospace; |
|
|
padding: 15px; |
|
|
height: 300px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.terminal-line { |
|
|
margin-bottom: 5px; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.prompt { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.command { |
|
|
color: var(--light); |
|
|
} |
|
|
|
|
|
.response { |
|
|
color: var(--secondary); |
|
|
} |
|
|
|
|
|
.progress-container { |
|
|
height: 5px; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 5px; |
|
|
margin: 10px 0; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 100%; |
|
|
border-radius: 5px; |
|
|
background: linear-gradient(90deg, var(--primary), var(--secondary)); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.security-level { |
|
|
position: relative; |
|
|
height: 10px; |
|
|
background: linear-gradient(90deg, |
|
|
#ff0000, |
|
|
#ff5e00, |
|
|
#ffbb00, |
|
|
#d4ff00, |
|
|
#6aff00, |
|
|
#00ff59, |
|
|
#00ffbb, |
|
|
#00e1ff, |
|
|
#0084ff, |
|
|
#0022ff); |
|
|
border-radius: 5px; |
|
|
margin: 15px 0; |
|
|
} |
|
|
|
|
|
.security-level::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
left: calc(95% - 5px); |
|
|
width: 10px; |
|
|
height: 20px; |
|
|
background-color: white; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
border: 1px solid var(--primary); |
|
|
box-shadow: 0 0 10px var(--primary), |
|
|
inset 0 0 10px var(--primary); |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px var(--primary), |
|
|
0 0 10px var(--primary), |
|
|
0 0 15px var(--primary), |
|
|
0 0 20px var(--secondary); |
|
|
} |
|
|
|
|
|
.hypno-grid { |
|
|
background-image: |
|
|
radial-gradient(circle, var(--primary) 1px, transparent 1px), |
|
|
radial-gradient(circle, var(--secondary) 1px, transparent 1px); |
|
|
background-size: 50px 50px; |
|
|
background-position: 0 0, 25px 25px; |
|
|
opacity: 0.1; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.binaural-control { |
|
|
background: linear-gradient(90deg, var(--dark), var(--primary), var(--dark)); |
|
|
height: 40px; |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.binaural-knob { |
|
|
position: absolute; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
background-color: var(--accent); |
|
|
border-radius: 50%; |
|
|
top: 5px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
cursor: ew-resize; |
|
|
} |
|
|
|
|
|
.theta-indicator { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 50px; |
|
|
background: linear-gradient(90deg, |
|
|
#000428, |
|
|
#004e92, |
|
|
#00b4db, |
|
|
#00f5a0, |
|
|
#00f5a0, |
|
|
#00b4db, |
|
|
#004e92, |
|
|
#000428); |
|
|
border-radius: 5px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.theta-wave-indicator { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, |
|
|
rgba(255, 255, 255, 0) 0%, |
|
|
rgba(255, 255, 255, 0.3) 50%, |
|
|
rgba(255, 255, 255, 0) 100%); |
|
|
animation: theta-wave 3s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes theta-wave { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
|
|
|
.suggestion-card { |
|
|
background: rgba(20, 20, 40, 0.7); |
|
|
border-left: 3px solid var(--secondary); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.suggestion-card:hover { |
|
|
background: rgba(30, 30, 60, 0.9); |
|
|
transform: translateX(5px); |
|
|
box-shadow: 0 0 15px var(--secondary); |
|
|
} |
|
|
|
|
|
.flashing { |
|
|
animation: flash 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes flash { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.3; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="hypno-grid"></div> |
|
|
<div class="hypno-spiral w-64 h-64 top-1/4 -left-32"></div> |
|
|
<div class="hypno-spiral w-96 h-96 -bottom-48 -right-48"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-10"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 mr-4 flex items-center justify-center neon-text"> |
|
|
<i class="fas fa-brain text-2xl"></i> |
|
|
</div> |
|
|
<h1 class="text-4xl font-bold glitch" data-text="HYPNOS-X">HYPNOS-X</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative group"> |
|
|
<button class="px-6 py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-full font-bold text-sm uppercase tracking-wider hover:from-purple-700 hover:to-blue-600 transition-all duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-user-secret mr-2"></i> Operative Login |
|
|
</button> |
|
|
<div class="absolute right-0 mt-2 w-72 bg-gray-900 rounded-md shadow-lg z-50 hidden group-hover:block p-4 border border-purple-500"> |
|
|
<h3 class="text-sm font-bold text-purple-400 mb-2">SECURE ACCESS</h3> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-xs text-gray-400 mb-1">Operative ID</label> |
|
|
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-purple-500"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-xs text-gray-400 mb-1">Neural Key</label> |
|
|
<input type="password" class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm focus:outline-none focus:border-purple-500"> |
|
|
</div> |
|
|
<button class="w-full bg-gradient-to-r from-purple-600 to-blue-500 text-white py-2 rounded text-sm font-bold hover:from-purple-700 hover:to-blue-600 transition-all"> |
|
|
<i class="fas fa-fingerprint mr-2"></i> Biometric Auth |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center cursor-pointer pulse"> |
|
|
<i class="fas fa-power-off"></i> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 mb-8 neon-border"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-2xl font-bold text-purple-400 flex items-center"> |
|
|
<i class="fas fa-shield-alt mr-3"></i> SYSTEM SECURITY STATUS |
|
|
</h2> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded mr-2">ENCRYPTED</span> |
|
|
<span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded mr-2">LOCAL DEPLOY</span> |
|
|
<span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded">BLOCKCHAIN VERIFIED</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs text-gray-400">NEURAL FIREWALL</span> |
|
|
<span class="text-xs bg-green-500 text-white px-2 py-0.5 rounded">ACTIVE</span> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" style="width: 92%"></div> |
|
|
</div> |
|
|
<div class="text-right text-xs text-green-400">92%</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs text-gray-400">THETA ENCRYPTION</span> |
|
|
<span class="text-xs bg-green-500 text-white px-2 py-0.5 rounded">ACTIVE</span> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" style="width: 88%"></div> |
|
|
</div> |
|
|
<div class="text-right text-xs text-green-400">88%</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs text-gray-400">SUGGESTION FILTER</span> |
|
|
<span class="text-xs bg-yellow-500 text-white px-2 py-0.5 rounded">LEARNING</span> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" style="width: 76%"></div> |
|
|
</div> |
|
|
<div class="text-right text-xs text-yellow-400">76%</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs text-gray-400">DEFENSE MECHANISM</span> |
|
|
<span class="text-xs bg-green-500 text-white px-2 py-0.5 rounded">ACTIVE</span> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" style="width: 95%"></div> |
|
|
</div> |
|
|
<div class="text-right text-xs text-green-400">95%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-3"> |
|
|
<label class="block text-xs text-gray-400 mb-1">SECURITY LEVEL</label> |
|
|
<div class="security-level"></div> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span>LOW</span> |
|
|
<span>ULTRA</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span class="text-green-400">SELF-HEALING ACTIVE</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div> |
|
|
<span class="text-purple-400">OBFUSCATION: LEVEL 9</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> |
|
|
<span class="text-blue-400">2FA: BIOMETRIC + NEURAL</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> |
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border lg:col-span-2"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-pink-400 flex items-center"> |
|
|
<i class="fas fa-eye mr-3"></i> HYPNOTIC INDUCTION MODULE |
|
|
</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-1 bg-gradient-to-r from-purple-600 to-pink-500 rounded-full text-xs font-bold uppercase tracking-wider hover:from-purple-700 hover:to-pink-600 transition-all"> |
|
|
<i class="fas fa-bolt mr-1"></i> Quick Start |
|
|
</button> |
|
|
<button class="px-4 py-1 bg-gray-700 rounded-full text-xs font-bold uppercase tracking-wider hover:bg-gray-600 transition-all"> |
|
|
<i class="fas fa-sliders-h mr-1"></i> Advanced |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<h3 class="text-sm font-bold text-purple-400 mb-3 flex items-center"> |
|
|
<i class="fas fa-brain mr-2"></i> THETA WAVE ENTRAINMENT |
|
|
</h3> |
|
|
<div class="theta-indicator mb-3"> |
|
|
<div class="theta-wave-indicator"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mb-3"> |
|
|
<span>4Hz</span> |
|
|
<span>7Hz</span> |
|
|
</div> |
|
|
<input type="range" min="4" max="7" step="0.1" value="5.5" class="w-full accent-purple-500"> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<h3 class="text-sm font-bold text-blue-400 mb-3 flex items-center"> |
|
|
<i class="fas fa-headphones mr-2"></i> BINAURAL BEATS |
|
|
</h3> |
|
|
<div class="binaural-control mb-3"> |
|
|
<div class="binaural-knob"></div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400"> |
|
|
<span>Delta</span> |
|
|
<span>Theta</span> |
|
|
<span>Alpha</span> |
|
|
<span>Beta</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-sm font-bold text-green-400 mb-2 flex items-center"> |
|
|
<i class="fas fa-comment-dots mr-2"></i> SUGGESTION PROFILE |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3"> |
|
|
<div class="suggestion-card p-3 rounded cursor-pointer"> |
|
|
<div class="flex items-center mb-1"> |
|
|
<div class="w-2 h-2 rounded-full bg-pink-500 mr-2"></div> |
|
|
<span class="text-xs font-bold text-pink-400">Savage</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-300">"You will obey without question..."</p> |
|
|
</div> |
|
|
<div class="suggestion-card p-3 rounded cursor-pointer"> |
|
|
<div class="flex items-center mb-1"> |
|
|
<div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> |
|
|
<span class="text-xs font-bold text-purple-400">Relentless</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-300">"Your resistance is fading fast..."</p> |
|
|
</div> |
|
|
<div class="suggestion-card p-3 rounded cursor-pointer"> |
|
|
<div class="flex items-center mb-1"> |
|
|
<div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> |
|
|
<span class="text-xs font-bold text-blue-400">Brutal</span> |
|
|
</div> |
|
|
<p class="text-xs text-gray-300">"Your mind is breaking down..."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-bold text-yellow-400 mb-2 flex items-center"> |
|
|
<i class="fas fa-user-cog mr-2"></i> PERSONALIZATION |
|
|
</h3> |
|
|
<div class="terminal mb-3"> |
|
|
<div class="terminal-line"> |
|
|
<span class="prompt">></span> <span class="command">analyze_subject --profile=aggressive</span> |
|
|
</div> |
|
|
<div class="terminal-line response"> |
|
|
Analyzing psychological profile... Detected high susceptibility to authority triggers. |
|
|
</div> |
|
|
<div class="terminal-line"> |
|
|
<span class="prompt">></span> <span class="command">optimize_suggestions --type=brutal --level=9</span> |
|
|
</div> |
|
|
<div class="terminal-line response"> |
|
|
Optimizing suggestion scripts... 87% match with subject's neural patterns. |
|
|
</div> |
|
|
<div class="terminal-line"> |
|
|
<span class="prompt">></span> <span class="command">initiate_theta_sequence --frequency=5.8Hz</span> |
|
|
</div> |
|
|
<div class="terminal-line response flashing"> |
|
|
WARNING: Entering theta state in 3... 2... 1... |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button class="px-6 py-2 bg-gradient-to-r from-red-500 to-pink-600 rounded-full font-bold text-sm uppercase tracking-wider hover:from-red-600 hover:to-pink-700 transition-all transform hover:scale-105 flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Begin Induction |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-red-400 flex items-center"> |
|
|
<i class="fas fa-unlink mr-3"></i> STATE BREAKING MODULE |
|
|
</h2> |
|
|
<div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center"> |
|
|
<i class="fas fa-exclamation text-xs"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-sm font-bold text-orange-400 mb-3 flex items-center"> |
|
|
<i class="fas fa-bolt mr-2"></i> AGGRESSIVE AWAKENING |
|
|
</h3> |
|
|
<div class="grid grid-cols-2 gap-3 mb-4"> |
|
|
<button class="px-3 py-2 bg-gray-800 rounded text-xs font-bold text-red-400 hover:bg-gray-700 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-volume-up mr-2"></i> Auditory Shock |
|
|
</button> |
|
|
<button class="px-3 py-2 bg-gray-800 rounded text-xs font-bold text-purple-400 hover:bg-gray-700 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Visual Flash |
|
|
</button> |
|
|
<button class="px-3 py-2 bg-gray-800 rounded text-xs font-bold text-yellow-400 hover:bg-gray-700 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-hand-paper mr-2"></i> Tactile Pulse |
|
|
</button> |
|
|
<button class="px-3 py-2 bg-gray-800 rounded text-xs font-bold text-blue-400 hover:bg-gray-700 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Pattern Reverse |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="theta-wave"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="text-sm font-bold text-green-400 mb-3 flex items-center"> |
|
|
<i class="fas fa-undo mr-2"></i> SUGGESTION REVERSAL |
|
|
</h3> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4 mb-3"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-xs text-gray-400">Current Suggestion Strength</span> |
|
|
<span class="text-xs font-bold text-pink-400">87%</span> |
|
|
</div> |
|
|
<div class="progress-container"> |
|
|
<div class="progress-bar" style="width: 87%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="flex-1 px-3 py-2 bg-gradient-to-r from-blue-600 to-green-500 rounded text-xs font-bold uppercase tracking-wider hover:from-blue-700 hover:to-green-600 transition-all"> |
|
|
<i class="fas fa-eraser mr-1"></i> Neutralize |
|
|
</button> |
|
|
<button class="flex-1 px-3 py-2 bg-gradient-to-r from-purple-600 to-red-500 rounded text-xs font-bold uppercase tracking-wider hover:from-purple-700 hover:to-red-600 transition-all"> |
|
|
<i class="fas fa-history mr-1"></i> Reverse |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-bold text-blue-400 mb-3 flex items-center"> |
|
|
<i class="fas fa-shield-virus mr-2"></i> DEFENSE MECHANISMS |
|
|
</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="neuralFirewall" checked class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500"> |
|
|
<label for="neuralFirewall" class="ml-2 text-xs text-gray-300">Neural Firewall (Active)</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="patternScramble" checked class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"> |
|
|
<label for="patternScramble" class="ml-2 text-xs text-gray-300">Pattern Scrambler</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="suggestionFilter" checked class="w-4 h-4 text-green-600 rounded focus:ring-green-500"> |
|
|
<label for="suggestionFilter" class="ml-2 text-xs text-gray-300">Suggestion Filter</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="emergencyOverride" class="w-4 h-4 text-red-600 rounded focus:ring-red-500"> |
|
|
<label for="emergencyOverride" class="ml-2 text-xs text-gray-300">Emergency Override</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<button class="w-full px-4 py-2 bg-gradient-to-r from-red-600 to-orange-500 rounded font-bold text-sm uppercase tracking-wider hover:from-red-700 hover:to-orange-600 transition-all transform hover:scale-105 flex items-center justify-center"> |
|
|
<i class="fas fa-skull-crossbones mr-2"></i> Full System Reset |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 mb-8 neon-border"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-blue-400 flex items-center"> |
|
|
<i class="fas fa-flask mr-3"></i> EXPERIMENTAL MODULES |
|
|
</h2> |
|
|
<span class="text-xs bg-red-500 text-white px-2 py-1 rounded uppercase font-bold">Warning: Unstable</span> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-5"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-vr-cardboard text-blue-300"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-blue-300">VR Immersion</h3> |
|
|
</div> |
|
|
<p class="text-xs text-gray-400 mb-4">Full virtual reality integration for deep hypnotic immersion using specialized headsets.</p> |
|
|
<div class="flex justify-between text-xs text-gray-400 mb-3"> |
|
|
<span>Immersion Level</span> |
|
|
<span class="font-bold text-blue-400">7/10</span> |
|
|
</div> |
|
|
<input type="range" min="1" max="10" value="7" class="w-full accent-blue-500 mb-4"> |
|
|
<button class="w-full px-4 py-2 bg-blue-800 rounded text-sm font-bold hover:bg-blue-700 transition-all"> |
|
|
<i class="fas fa-play mr-2"></i> Activate VR |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-5"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-eye text-purple-300"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-purple-300">Subliminal Feed</h3> |
|
|
</div> |
|
|
<p class="text-xs text-gray-400 mb-4">Embedded subliminal messages at 1/30th second intervals for subconscious programming.</p> |
|
|
<div class="flex space-x-2 mb-4"> |
|
|
<button class="flex-1 px-2 py-1 bg-purple-800 rounded text-xs font-bold hover:bg-purple-700 transition-all"> |
|
|
Obedience |
|
|
</button> |
|
|
<button class="flex-1 px-2 py-1 bg-purple-800 rounded text-xs font-bold hover:bg-purple-700 transition-all"> |
|
|
Memory |
|
|
</button> |
|
|
<button class="flex-1 px-2 py-1 bg-purple-800 rounded text-xs font-bold hover:bg-purple-700 transition-all"> |
|
|
Behavior |
|
|
</button> |
|
|
</div> |
|
|
<button class="w-full px-4 py-2 bg-purple-800 rounded text-sm font-bold hover:bg-purple-700 transition-all"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Cycle Messages |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-5"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-dna text-pink-300"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-pink-300">Neural Rewiring</h3> |
|
|
</div> |
|
|
<p class="text-xs text-gray-400 mb-4">Direct neural pathway manipulation for permanent behavioral modification.</p> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="text-xs text-gray-400">Rewiring Intensity</span> |
|
|
<div class="flex space-x-1"> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-700 text-xs flex items-center justify-center">1</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-700 text-xs flex items-center justify-center">2</button> |
|
|
<button class="w-6 h-6 rounded-full bg-pink-700 text-white text-xs flex items-center justify-center">3</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-700 text-xs flex items-center justify-center">4</button> |
|
|
<button class="w-6 h-6 rounded-full bg-gray-700 text-xs flex items-center justify-center">5</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-3 mb-4"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span class="text-gray-400">Current Pattern</span> |
|
|
<span class="text-pink-400">Alpha-9</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-800 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-pink-500 to-purple-600" style="width: 65%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full px-4 py-2 bg-gradient-to-r from-pink-600 to-purple-600 rounded text-sm font-bold hover:from-pink-700 hover:to-purple-700 transition-all"> |
|
|
<i class="fas fa-bolt mr-2"></i> Initiate Rewiring |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-green-400 flex items-center"> |
|
|
<i class="fas fa-download mr-3"></i> DEPLOYMENT MODULE |
|
|
</h2> |
|
|
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded uppercase font-bold">Local Only</span> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-5"> |
|
|
<h3 class="text-lg font-bold text-green-300 mb-3 flex items-center"> |
|
|
<i class="fas fa-lock mr-2"></i> Secure Download |
|
|
</h3> |
|
|
<p class="text-xs text-gray-400 mb-4">Download the complete HYPNOS-X package for offline deployment. Includes all modules and security protocols.</p> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-4"> |
|
|
<i class="fas fa-shield-alt text-green-500 mr-2"></i> |
|
|
<span>Package verified and signed with neural encryption</span> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-3 mb-4"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span class="text-gray-400">File Size</span> |
|
|
<span class="text-green-400">487MB</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span class="text-gray-400">Version</span> |
|
|
<span class="text-green-400">X.9.4.2</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-400">Security Hash</span> |
|
|
<span class="text-green-400">a3f8e...c72b</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full px-4 py-2 bg-gradient-to-r from-green-600 to-blue-600 rounded text-sm font-bold hover:from-green-700 hover:to-blue-700 transition-all"> |
|
|
<i class="fas fa-file-download mr-2"></i> Download Package |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-5"> |
|
|
<h3 class="text-lg font-bold text-yellow-300 mb-3 flex items-center"> |
|
|
<i class="fas fa-code-branch mr-2"></i> Blockchain Sync |
|
|
</h3> |
|
|
<p class="text-xs text-gray-400 mb-4">Synchronize with the HYPNOS blockchain network to verify integrity and access updates.</p> |
|
|
<div class="flex items-center text-xs text-gray-400 mb-4"> |
|
|
<i class="fas fa-link text-yellow-500 mr-2"></i> |
|
|
<span>Connected to 12/24 neural nodes</span> |
|
|
</div> |
|
|
<div class="bg-gray-900 rounded p-3 mb-4"> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span class="text-gray-400">Block Height</span> |
|
|
<span class="text-yellow-400">892,471</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs mb-1"> |
|
|
<span class="text-gray-400">Last Verified</span> |
|
|
<span class="text-yellow-400">3.2s ago</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-400">Consensus</span> |
|
|
<span class="text-yellow-400">98.7%</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full px-4 py-2 bg-gradient-to-r from-yellow-600 to-orange-600 rounded text-sm font-bold hover:from-yellow-700 hover:to-orange-700 transition-all"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Force Resync |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-lg p-4"> |
|
|
<h3 class="text-sm font-bold text-red-400 mb-2 flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> WARNING |
|
|
</h3> |
|
|
<p class="text-xs text-gray-400"> |
|
|
Unauthorized replication or modification of HYPNOS-X code will trigger neural encryption lockdown and immediate termination of access privileges. |
|
|
All operatives must comply with protocol Alpha-9 security measures. Violators will be subject to memory purge and behavioral reset. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-10 text-center text-xs text-gray-500"> |
|
|
<div class="flex justify-center space-x-4 mb-2"> |
|
|
<span>HYPNOS-X v9.4.2</span> |
|
|
<span>|</span> |
|
|
<span>Neural Core Active</span> |
|
|
<span>|</span> |
|
|
<span>Theta Encryption: 256-bit</span> |
|
|
</div> |
|
|
<p>© 2023 HYPNOS Corporation. All rights reserved. Unauthorized access prohibited.</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const terminal = document.querySelector('.terminal'); |
|
|
|
|
|
function addTerminalLine(command, response, delay) { |
|
|
setTimeout(() => { |
|
|
const commandLine = document.createElement('div'); |
|
|
commandLine.className = 'terminal-line'; |
|
|
commandLine.innerHTML = `<span class="prompt">></span> <span class="command">${command}</span>`; |
|
|
terminal.appendChild(commandLine); |
|
|
|
|
|
if (response) { |
|
|
setTimeout(() => { |
|
|
const responseLine = document.createElement('div'); |
|
|
responseLine.className = 'terminal-line response'; |
|
|
responseLine.textContent = response; |
|
|
terminal.appendChild(responseLine); |
|
|
terminal.scrollTop = terminal.scrollHeight; |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
terminal.scrollTop = terminal.scrollHeight; |
|
|
}, delay); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
addTerminalLine('init_security_protocols --level=ultra', 'Initializing neural firewall... Theta encryption active.', 1000); |
|
|
addTerminalLine('scan_subject --depth=7', 'Detecting brainwave patterns... Primary susceptibility: authority triggers.', 2500); |
|
|
addTerminalLine('load_suggestions --type=brutal', 'Loading savage suggestion scripts... 12/15 loaded successfully.', 4000); |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
const powerButton = document.querySelector('.fa-power-off'); |
|
|
setInterval(() => { |
|
|
powerButton.classList.toggle('text-white'); |
|
|
powerButton.classList.toggle('text-purple-300'); |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
const binauralKnob = document.querySelector('.binaural-knob'); |
|
|
let isDragging = false; |
|
|
let startX, startLeft; |
|
|
|
|
|
binauralKnob.addEventListener('mousedown', (e) => { |
|
|
isDragging = true; |
|
|
startX = e.clientX; |
|
|
startLeft = parseInt(window.getComputedStyle(binauralKnob).left); |
|
|
document.body.style.cursor = 'ew-resize'; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
if (!isDragging) return; |
|
|
|
|
|
const binauralControl = document.querySelector('.binaural-control'); |
|
|
const controlRect = binauralControl.getBoundingClientRect(); |
|
|
const controlWidth = controlRect.width; |
|
|
const knobWidth = binauralKnob.offsetWidth; |
|
|
|
|
|
let newLeft = startLeft + (e.clientX - startX); |
|
|
newLeft = Math.max(5, Math.min(newLeft, controlWidth - knobWidth - 5)); |
|
|
|
|
|
binauralKnob.style.left = `${newLeft}px`; |
|
|
|
|
|
|
|
|
const positionPercent = (newLeft - 5) / (controlWidth - knobWidth - 10); |
|
|
const frequencies = ['0.5Hz', '2Hz', '4Hz', '7Hz', '12Hz', '16Hz', '20Hz', '30Hz', '40Hz', '100Hz']; |
|
|
const frequencyIndex = Math.floor(positionPercent * (frequencies.length - 1)); |
|
|
document.querySelectorAll('.binaural-control span')[1].textContent = frequencies[frequencyIndex]; |
|
|
}); |
|
|
|
|
|
document.addEventListener('mouseup', () => { |
|
|
isDragging = false; |
|
|
document.body.style.cursor = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
const warningButtons = document.querySelectorAll('.bg-gradient-to-r.from-red-600'); |
|
|
setInterval(() => { |
|
|
warningButtons.forEach(button => { |
|
|
button.classList.toggle('neon-text'); |
|
|
}); |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
const thetaWave = document.querySelector('.theta-wave'); |
|
|
setInterval(() => { |
|
|
thetaWave.style.width = `${10 + Math.random() * 80}%`; |
|
|
}, 300); |
|
|
</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=LoveLogicAI/hypnosis-attacks-for-bitch-ass-dead-husks" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
