CCHub Logo CCHub Tailwind Collection
구성 요소 지도 Cyberpunk_Gaming_Maps_Component

Cyberpunk_Gaming_Maps_Component

게임 인터페이스를 위한 단순하고 반응이 빠른 사이버펑크 테마 맵 구성 요소로, 어두운 배경, 네온 액센트 및 유사한 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

미리 보기

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">&gt;</span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</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">&gt;</span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</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>

관련 구성 요소

3D_Neon_Maps_Component

네온/일렉트릭 색상 구성표가 있는 복잡한 3D 스타일 지도 구성 요소로, 위치 또는 프로젝트를 보여주는 포트폴리오에 적합합니다. 빛나는 요소, 풍부한 인터랙티브와 같은 UI, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다

Brutalism_Photography_Maps_Component

사진 포트폴리오를 위한 단순하고 브루탈리즘 스타일의 지도 구성 요소로, 높은 대비와 어두운 모드를 지원하는 대담한 보라색 색 구성표가 특징입니다.

열다

미니멀리스트 단색 비즈니스 지도 구성 요소

비즈니스 및 기업 웹사이트를 위해 설계된 반응형 대화형 지도 구성 요소로, 미니멀한 플랫 디자인, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다. 자리 표시자, 맵 이미지 및 연락처 세부 정보 자리 표시자를 포함합니다.

열다