1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CORE PROCESSOR // DATA INTERFACE</title>7 8 <style>9 /* 🌌 Variables y Estilos Generales */10 :root {11 --color-bg: #050a17; /* Azul muy oscuro casi negro */12 --color-neon-blue: #00ffff; /* Cyan brillante */13 --color-neon-red: #ff3366; /* Rosa/Rojo neón */14 --color-glow: rgba(0, 255, 255, 0.4);15 }16 17 body {18 font-family: 'Consolas', monospace; /* Tipografía tecnológica */19 background-color: var(--color-bg);20 color: #c0ffff; /* Color base del texto neón claro */21 display: flex;22 flex-direction: column;23 align-items: center;24 justify-content: center;25 height: 100vh;26 margin: 0;27 padding: 20px;28 /* Efecto de fondo sutil (simula un filtro analógico o glitch) */29 background-image: linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),30 linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);31 background-size: 4px 4px;32 }33 34 h1 {35 font-size: 1.8em;36 letter-spacing: 5px;37 margin-bottom: 30px;38 text-shadow: 0 0 10px var(--color-neon-blue); /* Efecto de brillo en el título */39 }40 41 /* === Contenedor del Contador (El Display Principal) === */42 #contadorDisplay {43 font-size: 6em;44 padding: 30px 50px;45 border: 2px solid var(--color-neon-blue);46 background-color: rgba(10, 25, 40, 0.8); /* Fondo semitransparente */47 box-shadow: 48 0 0 20px var(--color-glow), /* Glow general */49 inset 0 0 10px var(--color-neon-blue); /* Brillo interno */50 margin-bottom: 50px;51 letter-spacing: 8px;52 }53 54 /* === Contenedor de Botones y Panel === */55 #botones {56 display: flex;57 gap: 40px;58 padding: 20px;59 background-color: rgba(5, 10, 23, 0.7); /* Panel oscuro detrás de los botones */60 border: 1px solid #00ffff80;61 box-shadow: 0 0 15px var(--color-neon-blue);62 }63 64 /* Estilo general del botón (Panel Input) */65 button {66 padding: 20px 40px;67 font-size: 1.3em;68 cursor: pointer;69 border: 2px solid;70 border-radius: 5px;71 transition: all 0.2s ease-in-out;72 text-transform: uppercase;73 letter-spacing: 3px;74 }75 76 /* Botón Verde (Sumar) */77 #btnSumar {78 border-color: #4CAF50; /* Borde verde sólido */79 background-color: rgba(76, 175, 80, 0.2);80 color: #9effb3; /* Texto verde neón claro */81 box-shadow: 0 0 15px rgba(76, 175, 80, 0.5), inset 0 0 5px #4CAF50;82 }83 84 /* Botón Rojo (Restar) */85 #btnRestar {86 border-color: var(--color-neon-red); /* Borde rojo neón */87 background-color: rgba(255, 51, 102, 0.2);88 color: #ffb3cc; /* Texto rojo neón claro */89 box-shadow: 0 0 15px var(--color-neon-red), inset 0 0 5px var(--color-neon-red);90 }91 92 /* Efecto Hover (Simulación de activación) */93 button:hover {94 transform: scale(1.05);95 box-shadow: 96 0 0 25px currentColor, /* El brillo sigue el color del botón */97 inset 0 0 10px rgba(255, 255, 255, 0.3);98 }99 100 /* Efecto al hacer clic (Simulación de procesamiento) */101 button:active {102 transform: scale(0.98);103 filter: brightness(1.2); /* Un pequeño flash de brillo */104 }105 106 </style>107 </head>108 <body class="data-interface">109 110 <h1>// PROCESSOR CORE ACTIVATED //</h1>111 112 <!-- Display Principal -->113 <div id="contadorDisplay">0</div>114 115 <!-- Panel de Control -->116 <div id="botones">117 <button id="btnSumar">+ 2 PUNTOS [INPUT]</button>118 <button id="btnRestar">- 3 PUNTOS [DECREMENT]</button>119 </div>120 121 <script>122 // --- LÓGICA JAVASCRIPT (El Procesamiento de Datos) ---123 124 let contador = 0;125 126 const display = document.getElementById('contadorDisplay');127 const btnSumar = document.getElementById('btnSumar');128 const btnRestar = document.getElementById('btnRestar');129 130 /**131 * Función que actualiza el contador y la pantalla con un efecto visual132 */133 function actualizarContador() {134 // 1. Efecto Glitch (Opcional, pero muy "sci-fi")135 display.style.transition = 'none'; // Desactiva transiciones para el glitch136 display.classList.add('glitch');137 138 // 2. Actualizar texto139 display.textContent = Math.abs(contador).toString().padStart(6, '0'); // Formatea a 6 dígitos con ceros iniciales140 141 // 3. Remover efecto y aplicar transición suave142 setTimeout(() => {143 display.classList.remove('glitch');144 }, 10); 145 }146 147 // Event Listener para Sumar 2 (Input Positivo)148 btnSumar.addEventListener('click', () => {149 contador += 2; 150 actualizarContador();151 });152 153 154 // Event Listener para Restar 3 (Decremento Negativo)155 btnRestar.addEventListener('click', () => {156 contador -= 3; 157 actualizarContador();158 });159 160 // Inicialización al cargar la página161 actualizarContador(); 162 163 </script>164 </body>165 </html>166 Enlace
El enlace para compartir es: