Basic Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100000X Ultra Gaming Toggle</title>
<style>
:root {
/* Gaming Color Palette */
--neon-gold: #ffcc00;
--neon-blue: #00f2ff;
--neon-purple: #bc13fe;
--bg-day: radial-gradient(circle at center, #1e90ff, #001f3f);
--bg-night: radial-gradient(circle at center, #02050a, #000000);
--transition: 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--bg-day);
transition: background var(--transition);
overflow: hidden;
font-family: 'Orbitron', 'Segoe UI', sans-serif; /* Gaming Font Style */
}
/* Cyber Grid Background Effect */
.grid {
position: absolute;
width: 200%;
height: 200%;
background-image:
linear-gradient(rgba(0, 242, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 242, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
transform: perspective(500px) rotateX(60deg);
bottom: -50%;
animation: gridMove 10s linear infinite;
z-index: 0;
pointer-events: none;
}
@keyframes gridMove {
from { background-position: 0 0; }
to { background-position: 0 50px; }
}
/* Toggle Container */
.toggle-wrapper {
position: relative;
width: 280px;
height: 110px;
z-index: 10;
}
.toggle-input { display: none; }
.toggle-track {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 60px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 242, 255, 0.2), inset 0 0 15px rgba(0,0,0,0.5);
cursor: pointer;
transition: var(--transition);
}
/* The Sphere (Sun/Moon) */
.sphere {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
width: 90px;
height: 90px;
background: radial-gradient(circle at 30% 30%, #fff700, #ff8c00);
border-radius: 50%;
box-shadow: 0 0 50px rgba(255, 217, 0, 0.8);
transition: var(--transition);
z-index: 5;
overflow: hidden;
}
/* --- 100000X SMART REFLECTION --- */
.sphere::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 45%,
rgba(255, 255, 255, 0.8) 50%,
transparent 55%
);
animation: shine 3s infinite;
opacity: 1;
transition: var(--transition);
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%); }
100% { transform: translateX(100%) translateY(100%); }
}
/* Sun Rays (Gaming Look) */
.rays {
position: absolute;
width: 140px;
height: 140px;
background: repeating-conic-gradient(from 0deg, rgba(255, 204, 0, 0.2) 0deg 20deg, transparent 20deg 40deg);
border-radius: 50%;
top: 50%;
left: -15px;
transform: translateY(-50%);
animation: rotateRays 10s linear infinite;
opacity: 1;
transition: var(--transition);
}
@keyframes rotateRays {
to { transform: translateY(-50%) rotate(360deg); }
}
/* --- DARK MODE STYLES --- */
.toggle-input:checked + .toggle-track {
border-color: var(--neon-purple);
box-shadow: 0 0 30px rgba(188, 19, 254, 0.4);
background: rgba(0, 0, 0, 0.6);
}
.toggle-input:checked + .toggle-track .sphere {
left: calc(100% - 100px);
background: radial-gradient(circle at 30% 30%, #e0e0e0, #404040);
box-shadow: 0 0 40px rgba(188, 19, 254, 0.6), inset -5px -5px 10px rgba(0,0,0,0.5);
}
/* Hide Reflection and Rays in Dark Mode */
.toggle-input:checked + .toggle-track .sphere::before,
.toggle-input:checked + .toggle-track .rays {
opacity: 0;
}
/* Moon Craters */
.sphere::after {
content: '';
position: absolute;
width: 100%; height: 100%;
background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.2) 10%, transparent 10%),
radial-gradient(circle at 70% 60%, rgba(0,0,0,0.2) 15%, transparent 15%);
opacity: 0;
transition: var(--transition);
}
.toggle-input:checked + .toggle-track .sphere::after { opacity: 1; }
/* Status Text (Gaming Font) */
.status-text {
margin-top: 50px;
font-size: 2rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 5px;
text-shadow: 0 0 10px var(--neon-blue);
transition: var(--transition);
z-index: 10;
}
.dark-mode .status-text {
color: var(--neon-purple);
text-shadow: 0 0 20px var(--neon-purple);
}
body.dark-mode { background: var(--bg-night); }
.star {
position: absolute;
background: white;
border-radius: 50%;
opacity: 0;
transition: 0.5s;
}
.dark-mode .star { opacity: 0.8; animation: twinkle 2s infinite; }
@keyframes twinkle {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.5); opacity: 1; }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="grid"></div>
<div id="star-field"></div>
<div class="toggle-wrapper">
<input type="checkbox" id="cosmic-toggle" class="toggle-input" onchange="ultraToggle()">
<label for="cosmic-toggle" class="toggle-track">
<div class="rays" id="sun-rays"></div>
<div class="sphere"></div>
</label>
</div>
<div class="status-text" id="status">DAY MISSION</div>
<script>
// Star Generation
const starField = document.getElementById('star-field');
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = 'star';
const size = Math.random() * 2 + 1;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.top = `${Math.random() * 100}%`;
star.style.left = `${Math.random() * 100}%`;
star.style.animationDelay = `${Math.random() * 3}s`;
starField.appendChild(star);
}
function ultraToggle() {
const isDark = document.getElementById('cosmic-toggle').checked;
const body = document.getElementById('body');
const status = document.getElementById('status');
const rays = document.getElementById('sun-rays');
if (isDark) {
body.classList.add('dark-mode');
status.innerText = "NIGHT PROTOCOL";
rays.style.left = "calc(100% - 125px)"; // Move rays with sphere
} else {
body.classList.remove('dark-mode');
status.innerText = "DAY MISSION";
rays.style.left = "-15px";
}
// Gaming Haptic Feedback
if ('vibrate' in navigator) {
navigator.vibrate(isDark ? [30, 50, 30] : [10, 30]);
}
}
// Parallax Mouse Effect for "Smart" feel
document.addEventListener('mousemove', (e) => {
const x = (window.innerWidth / 2 - e.pageX) / 50;
const y = (window.innerHeight / 2 - e.pageY) / 50;
document.querySelector('.toggle-wrapper').style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
});
</script>
</body>
</html>