Cyberpunk_Gaming_Maps_Component
Un composant de cartes simple et réactif sur le thème du cyberpunk pour les interfaces de jeu, avec des arrière-plans sombres, des accents néon et une palette de couleurs analogue. Inclut la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de cartes d’affaires monochromatiques minimalistes
Un composant cartographique réactif et interactif conçu pour les sites Web d’entreprise et d’entreprise, avec un design plat minimaliste, une palette de couleurs monochromatiques et la prise en charge du mode sombre. Comprend une image de carte de repère fictif et des repères de contact pour les coordonnées.
Composant Cartes
Un composant de carte simple et réactif avec une esthétique Material Design et une palette de couleurs de terre, avec prise en charge du mode sombre. Convient aux plates-formes de divertissement/médias pour afficher de manière ludique du contenu basé sur la localisation.
Composant Cartes
Un composant de cartes réactives conçu avec un style skeuomorphe, avec des couleurs pastel douces et une interface riche adaptée aux réseaux sociaux. Le composant prend en charge les modes clair et sombre et comprend plusieurs éléments interactifs.