3D_Neon_Maps_Component
Сложный компонент карт, вдохновленный 3D, с неоново-электрической цветовой схемой, подходящий для портфолио с демонстрацией локаций или проектов. Он отличается светящимися элементами, богатым интерактивным пользовательским интерфейсом и полной отзывчивостью с поддержкой темного режима.
HTML-код
<div class="relative bg-gradient-to-br from-gray-900 to-black p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center font-sans dark:from-zinc-950 dark:to-black">
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGZpbHRlciBpZD0icGVyc2lzdGVudC1ub2lzZSI+CiAgICAgIDxmZXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjgiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjAiIHN0aXRjaFRpbGVzPSJub2lzdVBhZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjE1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIxIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjA1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIzIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgIDwvZmlsdGVyPgogICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icHVycGxlIiBmaWx0ZXI9InVybCgjcGVyc2lzdGVudC1ub2lzZSkiLz4KPC9zdmc+'); background-size: cover; background-repeat: no-repeat; mask-image: radial-gradient(circle at center, black 0%, transparent 70%);"></div>
<div class="relative z-10 w-full max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Controls Panel (3D Effect) -->
<div class="col-span-1 rounded-2xl p-6 lg:p-8 shadow-2xl flex flex-col gap-6
bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-b-2 border-l-2 border-[#8A2BE2] transform perspective-1000 rotate-x-6 rotate-y-2 translate-z-10
hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
dark:from-[#08081a] dark:to-[#02020a] dark:border-[#FF1493]">
<!-- Header -->
<div class="flex items-center justify-between pb-4 border-b-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
<h2 class="text-2xl sm:text-3xl font-extrabold text-[#7FFFD4] dark:text-[#00FFFF] drop-shadow-lg [text-shadow:0_0_8px_#00FFFF]">GRID LOCATIONS</h2>
<button class="p-2 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
</button>
</div>
<!-- Search Bar -->
<div class="relative">
<input type="text" placeholder="Search locations..." class="w-full p-3 pl-10 rounded-xl bg-[#0f0f1d] border border-[#39FF14] text-[#7FFFD4] placeholder-[#00FFFF] text-lg outline-none focus:ring-2 focus:ring-[#39FF14] transition-all duration-300 shadow-inner glow-sm-input
dark:bg-[#02020a] dark:border-[#FF69B4] dark:text-[#FF1493] dark:placeholder-[#FF1493]">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</div>
<!-- Location List -->
<div class="overflow-y-auto flex-grow scrollbar-hide space-y-4 pr-1">
<!-- Location Item -->
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#00FFFF] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Cyber City Outpost</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">42 Neo-Tokyo St., Sector 7G</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#39FF14] dark:text-[#FF69B4] glow-text">ONLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#8A2BE2] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#00FFFF]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Arcade Nebula Zone</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Level 99, Metaverse Plaza</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#FF1493] glow-text">OFFLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#39FF14] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF69B4]">
<h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Quantum Data Hub</h3>
<p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Cloud Layer Alpha-7</p>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-[#7FFFD4] dark:text-[#FF1493] glow-text">ONLINE</span>
<div class="flex -space-x-1 overflow-hidden pointer-events-none">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/27.jpg" alt="Avatar">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
</div>
</div>
<!-- Filters/Actions -->
<div class="pt-4 border-t-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
<div class="flex justify-around items-center text-sm font-semibold text-[#7FFFD4] dark:text-[#00FFFF]">
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></svg>
Filters
</button>
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#00FFFF] dark:text-[#FF1493]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg>
Status
</button>
<button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
<svg class="w-6 h-6 mb-1 text-[#8A2BE2] dark:text-[#00FFFF]" fill="currentColor" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
Export
</button>
</div>
</div>
</div>
<!-- Main Map (3D Effect) -->
<div class="col-span-1 lg:col-span-2 rounded-2xl p-4 lg:p-6 shadow-2xl relative overflow-hidden flex items-center justify-center
bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-t-2 border-r-2 border-[#39FF14] transform perspective-1000 rotate-x-3 rotate-y-[-2deg] translate-z-10
hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
dark:from-[#08081a] dark:to-[#02020a] dark:border-[#00FFFF]">
<div class="absolute inset-0 bg-black opacity-30 dark:opacity-50 blur-lg pointer-events-none"></div>
<div class="w-full h-full relative z-10 flex items-center justify-center p-2">
<img src="https://picsum.photos/1200/800?random=1" alt="Placeholder Map" class="object-cover w-full h-full rounded-xl opacity-70 transform scale-10 hover:scale-105 transition-all duration-500 ease-out shadow-neon-map dark:shadow-neon-map-dark">
<!-- Interactive Map Markers (Example) -->
<div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#00FFFF] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">A</span>
</div>
<div class="absolute top-3/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#39FF14] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">B</span>
</div>
<div class="absolute top-1/2 right-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#FF1493] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
<span class="text-xs font-bold text-gray-900">C</span>
</div>
<!-- Overlay grid for 3D effect -->
<div class="absolute inset-0 pointer-events-none opacity-20" style="background-image: linear-gradient(0deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent); background-size: 50px 50px;"></div>
</div>
<!-- Map Controls -->
<div class="absolute bottom-4 right-4 flex flex-col gap-2 p-2 rounded-xl bg-gradient-to-t from-[#0f0f1d] to-[#1a1a2e] border border-[#00FFFF] shadow-xl glow-md
dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#FF1493] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M5 13h14v-2H5v2z"></path></svg>
</button>
</div>
<!-- Animated Pulse effect (CSS only) -->
<div class="absolute inset-0 pointer-events-none rounded-2xl" style="box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; animation: pulse-glow-border 3s infinite alternate;"></div>
</div>
</div>
</div>
<!-- Custom Styles for 3D and Neon Effects (embed in <style> or a CSS file) -->
<style>
/* Scrolbar hide */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide { /* For IE, Edge and Firefox */
-ms-overflow-style: none;
scrollbar-width: none;
}
/* 3D Perspective + Rotation for Panels */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-6 {
transform: rotateX(6deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.rotate-y-\[-2deg\] {
transform: rotateY(-2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
/* Neon Glow Effects */
.glow-md {
box-shadow: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.5);
}
.dark .glow-md {
box-shadow: 0 0 10px rgba(255, 20, 147, 0.7), 0 0 20px rgba(255, 20, 147, 0.5);
}
.glow-sm {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(138, 43, 226, 0.6);
}
.dark .glow-sm {
box-shadow: 0 0 5px rgba(255, 20, 147, 0.8), 0 0 10px rgba(0, 255, 255, 0.6);
}
.glow-sm-input {
box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
}
.dark .glow-sm-input {
box-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
}
.glow-sm-btn {
box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}
.dark .glow-sm-btn {
box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
}
.glow-sm-avatar {
box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
}
.dark .glow-sm-avatar {
box-shadow: 0 0 8px rgba(255, 20, 147, 0.8);
}
.glow-text {
text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.6);
}
.dark .glow-text {
text-shadow: 0 0 5px rgba(255, 105, 180, 0.8), 0 0 10px rgba(255, 105, 180, 0.6);
}
/* Map specific glow */
.shadow-neon-map {
filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.5));
}
.dark .shadow-neon-map-dark {
filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.5));
}
.glow-marker {
box-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 0.8);
}
.glow-marker:nth-child(2) { /* Example different marker color */
box-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.8);
}
.glow-marker:nth-child(3) { /* Example different marker color */
box-shadow: 0 0 10px rgba(255, 20, 147, 1), 0 0 20px rgba(255, 20, 147, 0.8);
}
/* Pulse animation for the map border glow */
@keyframes pulse-glow-border {
0% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
50% { box-shadow: 0 0 120px 40px rgba(0,255,255,0.5) inset; opacity: 0.2; }
100% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
}
.dark @keyframes pulse-glow-border {
0% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
50% { box-shadow: 0 0 120px 40px rgba(255,20,147,0.5) inset; opacity: 0.2; }
100% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
}
/* For responsiveness, adjust 3D transforms on smaller screens if needed */
@media (max-width: 1023px) {
.lg\:rotate-x-0 {
transform: rotateX(0) !important;
}
.lg\:rotate-y-0 {
transform: rotateY(0) !important;
}
.lg\:translate-z-0 {
transform: translateZ(0) !important;
}
.lg\:col-span-2 {
grid-column: span 1 / span 1 !important;
}
}
</style>Связанные компоненты
Компонент «Карты»
Адаптивный компонент карт, выполненный в скевоморфном стиле с монохроматической цветовой гаммой дашборда, поддерживающий темный режим.
Luxury_Autumn_Maps_Component
Отзывчивый и элегантный компонент карты, разработанный для роскошных сайтов путешествий и туризма, с поддержкой осенних цветов и темного режима.
Neon_Glow_Maps_Component
Простой, отзывчивый компонент карты с неоново-светящимся эффектом, предназначенный для портфолио фотографий. Имеет холодные нейтральные цвета, поддержку темного режима и изображение карты-заполнителя.