Cyberpunk_Gaming_Maps_Component
Un componente de mapas simple y receptivo con temática cyberpunk para interfaces de juegos, con fondos oscuros, acentos de neón y una combinación de colores análoga. Incluye soporte para modo oscuro.
Código HTML
<div class="p-4 md:p-8 bg-gray-950 dark:bg-black text-gray-200 min-h-screen font-mono">
<div class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 border-2 border-fuchsia-600 dark:border-purple-700 shadow-2xl shadow-fuchsia-800/50 dark:shadow-purple-900/50 rounded-lg overflow-hidden relative">
<!-- Neon Glitch Overlay -->
<div class="absolute inset-0 z-0 opacity-10 blur-xl animate-pulse" style="background-image: linear-gradient(to right, #8A2BE2, #A020F0, #FF00FF);"></div>
<div class="relative z-10 p-4 sm:p-6 md:p-8">
<h2 class="text-2xl sm:text-3xl font-bold mb-4 text-fuchsia-400 dark:text-purple-400 uppercase tracking-widest leading-tight border-b-2 border-fuchsia-700 dark:border-purple-600 pb-2">
<span class="block text-xs text-fuchsia-600 dark:text-purple-500 mb-1">SYSTEM MAP</span>
NEO-TOKYO SECTOR 7
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Map Placeholder -->
<div class="order-2 md:order-1 bg-gray-800 dark:bg-gray-900 border border-fuchsia-700 dark:border-purple-700 rounded-md overflow-hidden relative group aspect-video sm:aspect-[4/3] md:aspect-square lg:aspect-video">
<img src="https://picsum.photos/id/237/600/400?grayscale&blur=2" alt="Cyberpunk Map Grid" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-900/30 via-purple-700/20 to-indigo-900/30 opacity-70 group-hover:opacity-90 transition-opacity duration-300"></div>
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
<span class="text-fuchsia-300 dark:text-purple-300 text-6xl md:text-8xl font-black opacity-10 select-none">MAP</span>
</div>
<div class="absolute top-2 left-2 text-fuchsia-400 dark:text-purple-400 text-sm md:text-base">[23:45:01] GRID: A-7</div>
<div class="absolute bottom-2 right-2 flex space-x-2">
<button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">+</button>
<button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">-</button>
</div>
</div>
<!-- Map Controls/Info -->
<div class="order-1 md:order-2 space-y-4">
<div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
<h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">NAVIGATION</h3>
<div class="flex flex-wrap gap-2">
<button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<span class="hidden sm:inline">TARGET</span> SECTOR A
</button>
<button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<span class="hidden sm:inline">PING</span> LOCATION
</button>
<button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<span class="hidden sm:inline">ROUTE</span> OPTIMIZE
</button>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
<h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">ACTIVE DATASTREAM</h3>
<p class="text-xs text-gray-400 leading-relaxed">
<span class="text-fuchsia-500 dark:text-purple-500">></span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
<span class="text-fuchsia-500 dark:text-purple-500">></span> LOCAL GRID STATUS: STABLE. TRAFFIC FLOW NORM <span class="text-green-400">[OPTIMAL]</span>.<br>
<span class="text-fuchsia-500 dark:text-purple-500">></span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
<span class="text-fuchsia-500 dark:text-purple-500">></span> SYSTEM HEALTH: <span class="text-fuchsia-400 dark:text-purple-400">98%</span>. DIAGNOSTICS COMPLETE.
</p>
<div class="mt-3 flex justify-end">
<button class="px-4 py-2 bg-fuchsia-900 dark:bg-purple-900 text-fuchsia-300 dark:text-purple-300 text-sm rounded-sm hover:bg-fuchsia-800 dark:hover:bg-purple-800 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
CLEAR LOG
</button>
</div>
</div>
</div>
</div>
<div class="mt-6 bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
<h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">WAYPOINTS</h3>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex items-center space-x-2 text-sm">
<span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
<span>HQ: 12.4km</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<span class="w-3 h-3 bg-blue-600 rounded-full"></span>
<span>DATANODE ALPHA: 3.1km</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<span class="w-3 h-3 bg-green-600 rounded-full"></span>
<span>SAFEZONE γ: 7.8km</span>
</div>
<div class="flex items-center space-x-2 text-sm">
<span class="w-3 h-3 bg-yellow-600 rounded-full animate-ping"></span>
<span class="text-yellow-400">UNKNOWN SIG: 0.5km</span>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Mapas
Un componente de mapas responsivo diseñado con el estilo Glassmorphism, con un tema oscuro y clases CSS de Tailwind. Adecuado para cuadros de mando con visualización de datos y paneles de control.
Componente Mapas
Un componente de mapas responsivo diseñado en un estilo skeuomórfico con un esquema de color monocromático para un tablero, compatible con el modo oscuro.
Componente Mapas
Un componente de mapas complejo diseñado en estilo Material Design, adecuado para cuadros de mando. Integra elementos responsivos, funciones interactivas y admite la estética del modo oscuro utilizando un esquema de color análogo.