BASIC CODE:-
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legion Ultimate Overkill Setup</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&family=Rajdhani:wght@300;600&display=swap');
:root {
--neon-cyan: #00f3ff;
--neon-pink: #ff00c1;
--neon-purple: #9d00ff;
--deep-black: #050505;
--glass: rgba(255, 255, 255, 0.05);
}
body {
background: #000;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Rajdhani', sans-serif;
overflow: hidden;
perspective: 2000px;
}
/* Ambient Background with Moving Mist */
.universe {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, #0a0a1a 0%, #000 100%);
z-index: -1;
}
.setup-wrapper {
position: relative;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- Realistic 3D Monitor --- */
.monitor-container {
position: relative;
transform-style: preserve-3d;
filter: drop-shadow(0 0 30px rgba(0, 243, 255, 0.1));
}
.monitor-frame {
width: 750px;
height: 420px;
background: #111;
border: 4px solid #222;
border-radius: 15px;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}
.on .monitor-frame {
border-color: #333;
box-shadow: 0 0 80px rgba(0, 243, 255, 0.15);
}
/* Screen Glow & Content */
.screen-content {
width: 100%;
height: 100%;
background: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1200') center/cover;
display: none;
flex-direction: column;
opacity: 0;
}
.on .screen-content {
display: flex;
animation: bootUp 2s forwards;
}
/* --- CPU: Legion Beast Edition --- */
.cpu-beast {
position: absolute;
right: 2px;
bottom:42px;
width: 200px;
height: 450px;
background: linear-gradient(135deg, #111 0%, #050505 100%);
border-radius: 10px;
transform: rotateY(-25deg);
box-shadow: -20px 20px 50px rgba(0,0,0,0.5);
border-right: 2px solid var(--glass);
}
.rgb-strip {
width: 4px;
height: 80%;
position: absolute;
left: 10px;
top: 10%;
background: var(--neon-cyan);
box-shadow: 0 0 20px var(--neon-cyan);
border-radius: 10px;
}
.on .rgb-strip {
animation: auraShift 5s infinite linear;
}
/* --- Floating UI Taskbar --- */
.taskbar {
margin-top: auto;
height: 45px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
padding: 0 20px;
gap: 20px;
border-top: 1px solid var(--glass);
}
/* --- Desk & RGB Peripherals --- */
.desk-pro {
width: 1300px;
height: 40px;
background: #0a0a0a;
margin-top: 20px;
border-radius: 10px;
border-top: 2px solid #222;
position: relative;
transform: rotateX(20deg);
}
.keyboard-ultra {
width: 450px;
height: 150px;
background: #111;
margin: -60px auto 0;
border-radius: 8px;
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 5px;
padding: 10px;
transform: rotateX(45deg);
box-shadow: 0 10px 0 #000;
}
.on .key {
background: #1a1a1a;
border-radius: 2px;
animation: keyWave 3s infinite alternate;
}
/* --- Animations --- */
@keyframes bootUp {
0% { opacity: 0; filter: brightness(5) blur(10px); }
100% { opacity: 1; filter: brightness(1) blur(0); }
}
@keyframes auraShift {
0% { background: var(--neon-cyan); box-shadow: 0 0 20px var(--neon-cyan); }
33% { background: var(--neon-pink); box-shadow: 0 0 20px var(--neon-pink); }
66% { background: var(--neon-purple); box-shadow: 0 0 20px var(--neon-purple); }
100% { background: var(--neon-cyan); box-shadow: 0 0 20px var(--neon-cyan); }
}
@keyframes keyWave {
0% { box-shadow: 0 0 5px var(--neon-cyan); }
100% { box-shadow: 0 0 5px var(--neon-pink); }
}
.power-btn-pro {
width: 60px;
height: 60px;
background: radial-gradient(#222, #111);
border-radius: 50%;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 2px solid #333;
transition: 0.3s;
}
.on .power-btn-pro {
border-color: var(--neon-cyan);
box-shadow: 0 0 30px var(--neon-cyan);
}
.status-text {
color: white;
font-family: 'Orbitron';
font-size: 10px;
text-align: center;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="universe"></div>
<div class="setup-wrapper" id="parallaxBox">
<div class="monitor-container">
<div class="monitor-frame">
<div class="screen-content" id="screen">
<div style="padding: 40px;">
<h1 style="color: white; font-family: 'Orbitron'; letter-spacing: 5px;">LEGION OS</h1>
<div style="display: flex; gap: 20px;">
<div style="width: 80px; height: 80px; background: var(--glass); border: 1px solid var(--neon-cyan); border-radius: 15px; display:flex; align-items:center; justify-content:center; color:white;">CYBERPUNK</div>
<div style="width: 80px; height: 80px; background: var(--glass); border: 1px solid var(--neon-pink); border-radius: 15px; display:flex; align-items:center; justify-content:center; color:white;">VALORANT</div>
</div>
</div>
<div class="taskbar">
<div style="color: var(--neon-cyan); font-weight: bold;">START</div>
<div style="width: 200px; height: 5px; background: var(--glass); border-radius: 5px;"></div>
<div style="margin-left: auto; color: white;" id="clock">00:00:00</div>
</div>
</div>
</div>
</div>
<div class="cpu-beast">
<div class="rgb-strip"></div>
<div style="padding: 20px; color: #444; font-family: 'Orbitron';">ULTRA PRO MAX</div>
<div class="power-btn-pro" onclick="initSystem()">
<div id="led" style="width: 15px; height: 15px; background: #333; border-radius: 50%;"></div>
</div>
<div class="status-text" id="status">SYSTEM OFFLINE</div>
</div>
<div class="desk-pro">
<div class="keyboard-ultra">
</div>
</div>
</div>
<script>
// Create Keyboard Keys
const kb = document.querySelector('.keyboard-ultra');
for(let i=0; i<60; i++) {
const key = document.createElement('div');
key.className = 'key';
kb.appendChild(key);
}
let isOn = false;
function initSystem() {
const wrapper = document.body;
const led = document.getElementById('led');
const status = document.getElementById('status');
isOn = !isOn;
if(isOn) {
wrapper.classList.add('on');
led.style.background = '#00f3ff';
led.style.boxShadow = '0 0 20px #00f3ff';
status.innerText = "OVERCLOCK MODE ACTIVE";
status.style.color = "#00f3ff";
speak("Welcome Commander. Legion Ultra Pro Max is ready for total domination.");
} else {
wrapper.classList.remove('on');
led.style.background = '#333';
led.style.boxShadow = 'none';
status.innerText = "SYSTEM OFFLINE";
status.style.color = "#444";
}
}
function updateClock() {
document.getElementById('clock').innerText = new Date().toLocaleTimeString();
}
setInterval(updateClock, 1000);
function speak(t) {
const m = new SpeechSynthesisUtterance(t);
m.pitch = 0.5; m.rate = 0.9;
window.speechSynthesis.speak(m);
}
</script>
</body>
</html>