MemphisMapsComponent_CryptoBlockchain
Un componente di mappe complesso e reattivo ispirato a "Memphis Design" per applicazioni di criptovaluta/blockchain, caratterizzato da colori audaci, forme geometriche e una calda combinazione di colori del tramonto. Include il supporto per la modalità oscura ed elementi interattivi.
Codice HTML
<div class="font-sans min-h-screen bg-gradient-to-br from-orange-50 to-amber-100 text-gray-900 dark:from-gray-900 dark:to-gray-950 dark:text-gray-100 p-4 sm:p-8 flex items-center justify-center">
<div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in border-4 border-yellow-400 dark:border-purple-600 relative">
<!-- Memphis Pattern Background -->
<div class="absolute inset-0 bg-gradient-to-br from-yellow-300/60 to-orange-400/60 dark:from-purple-600/60 dark:to-violet-800/60 opacity-30 dark:opacity-20 z-0">
<div class="absolute top-10 left-10 w-24 h-24 bg-red-400 dark:bg-pink-500 rounded-full animate-pulse-slow"></div>
<div class="absolute bottom-20 right-20 w-32 h-16 bg-blue-400 dark:bg-cyan-500 transform -rotate-45"></div>
<div class="absolute top-1/3 right-1/4 w-16 h-16 bg-green-300 dark:bg-lime-500 transform rotate-12"></div>
<div class="absolute bottom-5 left-1/4 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-lg transform rotate-6"></div>
</div>
<div class="relative z-10 p-6 sm:p-10 lg:grid lg:grid-cols-3 lg:gap-8">
<!-- Left Sidebar - Controls & Filters -->
<div class="lg:col-span-1 bg-amber-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-orange-200 dark:border-purple-700 animate-slide-in-left mb-6 lg:mb-0">
<h2 class="text-3xl font-extrabold mb-6 text-orange-700 dark:text-purple-400 border-b-4 border-orange-400 dark:border-purple-600 pb-2">Crypto Hub Explorer</h2>
<div class="mb-6">
<label for="search" class="block text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Search Locations</label>
<div class="relative">
<input type="text" id="search" placeholder="Find Exchanges, ATMs, Meetups..." class="w-full p-3 pl-10 rounded-xl bg-orange-100 dark:bg-gray-600 border border-orange-300 dark:border-purple-800 focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all pr-4 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Filter by Type</h3>
<div class="grid grid-cols-2 gap-3">
<label class="flex items-center space-x-2 cursor-pointer bg-yellow-200 dark:bg-lime-600 p-3 rounded-xl border-2 border-yellow-300 dark:border-lime-700 hover:bg-yellow-300 dark:hover:bg-lime-700 transition">
<input type="checkbox" class="form-checkbox text-orange-500 dark:text-cyan-400 rounded-lg focus:ring-orange-400 h-6 w-6 border-2 border-orange-400 dark:border-cyan-500">
<span class="text-sm font-medium text-gray-700 dark:text-gray-100">Exchanges</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-orange-200 dark:bg-purple-600 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-700 hover:bg-orange-300 dark:hover:bg-purple-700 transition">
<input type="checkbox" class="form-checkbox text-red-500 dark:text-pink-400 rounded-lg focus:ring-red-400 h-6 w-6 border-2 border-red-400 dark:border-pink-500">
<span class="text-sm font-medium text-gray-700 dark:text-gray-100">ATMs</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-red-200 dark:bg-red-600 p-3 rounded-xl border-2 border-red-300 dark:border-red-700 hover:bg-red-300 dark:hover:bg-red-700 transition">
<input type="checkbox" class="form-checkbox text-blue-500 dark:text-blue-400 rounded-lg focus:ring-blue-400 h-6 w-6 border-2 border-blue-400 dark:border-blue-500">
<span class="text-sm font-medium text-gray-700 dark:text-gray-100">Meetups</span>
</label>
<label class="flex items-center space-x-2 cursor-pointer bg-blue-200 dark:bg-blue-600 p-3 rounded-xl border-2 border-blue-300 dark:border-blue-700 hover:bg-blue-300 dark:hover:bg-blue-700 transition">
<input type="checkbox" class="form-checkbox text-green-500 dark:text-green-400 rounded-lg focus:ring-green-400 h-6 w-6 border-2 border-green-400 dark:border-green-500">
<span class="text-sm font-medium text-gray-700 dark:text-gray-100">Miners</span>
</label>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Top 5 Hotspots</h3>
<ul class="space-y-3">
<li class="flex items-center justify-between p-3 bg-red-100 dark:bg-pink-700 rounded-xl border-2 border-red-200 dark:border-pink-800 animate-slide-in-right-item">
<span class="text-gray-800 dark:text-gray-100 font-medium">New York, USA</span>
<span class="text-sm text-red-600 dark:text-pink-300 bg-red-200 dark:bg-pink-800 px-3 py-1 rounded-full">+120% Activity</span>
</li>
<li class="flex items-center justify-between p-3 bg-blue-100 dark:bg-cyan-700 rounded-xl border-2 border-blue-200 dark:border-cyan-800 animate-slide-in-right-item animate-delay-100">
<span class="text-gray-800 dark:text-gray-100 font-medium">London, UK</span>
<span class="text-sm text-blue-600 dark:text-cyan-300 bg-blue-200 dark:bg-cyan-800 px-3 py-1 rounded-full">+95% Activity</span>
</li>
<li class="flex items-center justify-between p-3 bg-green-100 dark:bg-lime-700 rounded-xl border-2 border-green-200 dark:border-lime-800 animate-slide-in-right-item animate-delay-200">
<span class="text-gray-800 dark:text-gray-100 font-medium">Dubai, UAE</span>
<span class="text-sm text-green-600 dark:text-lime-300 bg-green-200 dark:bg-lime-800 px-3 py-1 rounded-full">+88% Activity</span>
</li>
</ul>
</div>
<button class="w-full py-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-purple-700 dark:to-violet-900 text-white font-bold rounded-xl shadow-lg border-2 border-orange-600 dark:border-purple-800 hover:from-orange-600 hover:to-red-600 dark:hover:from-purple-800 dark:hover:to-violet-950 transition transform hover:scale-105 active:scale-95 animate-bounce-in">
<span class="flex items-center justify-center"><svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5-5m0 0l5-5m-5 5h12a2 2 0 002-2V7a2 2 0 00-2-2h-3L9 3V2a1 1 0 00-1-1H3a1 1 0 00-1 1v12a2 2 0 002 2h5v3z"></path></svg>Discover Hotspots</span>
</button>
</div>
<!-- Main Content - Map & Location Details -->
<div class="lg:col-span-2 space-y-8">
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-11 md:aspect-h-12 w-full border-4 border-orange-400 dark:border-purple-600 animate-zoom-in-map">
<!-- Placeholder for the Map -->
<img src="https://picsum.photos/seed/memphismap/1200/800" alt="Decentralized Crypto Map" class="w-full h-full object-cover rounded-2xl">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
<span class="text-white text-3xl font-bold flex flex-col items-center">
<svg class="w-10 h-10 text-yellow-300 dark:text-green-400 mb-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
<span class="text-white text-3xl font-bold">Decentralized Map View</span>
</span>
<!-- Example of dynamic markers -->
<div class="absolute top-1/4 left-1/4 animate-bounce-marker"><svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-red-500 rounded-md">EXCHANGE</span></div>
<div class="absolute top-2/3 right-1/3 animate-bounce-marker animate-delay-200"><svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-yellow-500 rounded-md">ATM</span></div>
</div>
</div>
<!-- Recent Discoveries / Hotspot Details -->
<div class="bg-orange-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-red-300 dark:border-pink-800 animate-slide-in-right">
<h3 class="text-2xl font-bold mb-4 text-red-700 dark:text-pink-400 border-b-4 border-red-400 dark:border-pink-600 pb-2">Featured Spot: BlockBuilders Inc.</h3>
<div class="md:flex items-center space-y-4 md:space-y-0 md:space-x-6">
<img src="https://picsum.photos/seed/cryptooffice/300/200" alt="BlockBuilders Inc." class="flex-shrink-0 w-full md:w-48 h-32 object-cover rounded-xl shadow-md border-2 border-orange-400 dark:border-purple-600">
<div>
<p class="text-gray-700 dark:text-gray-300 mb-2">Leading blockchain development hub and co-working space.</p>
<div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-red-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
<span>123 Chainlink Ave, Metropolis, CA</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Open Mon-Fri, 9 AM - 6 PM</p>
<div class="flex space-x-3">
<span class="px-3 py-1 bg-gradient-to-r from-yellow-300 to-orange-400 dark:from-purple-500 dark:to-pink-600 text-yellow-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Development Hub</span>
<span class="px-3 py-1 bg-gradient-to-r from-blue-300 to-cyan-400 dark:from-violet-500 dark:to-blue-600 text-blue-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Community Meetups</span>
</div>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">Recent Activity</h4>
<ul class="space-y-3">
<li class="flex items-center space-x-3 bg-red-50 dark:bg-pink-900 p-3 rounded-lg border border-red-200 dark:border-pink-800 animate-pop-in">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-400 dark:border-pink-500">
<p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-red-600 dark:text-pink-300">Alice Smith</span> checked in for 'ERC-20 Workshop'.</p>
<span class="ml-auto text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</li>
<li class="flex items-center space-x-3 bg-blue-50 dark:bg-cyan-900 p-3 rounded-lg border border-blue-200 dark:border-cyan-800 animate-pop-in animate-delay-100">
<img src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-cyan-500">
<p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-blue-600 dark:text-cyan-300">Bob Johnson</span> used the BTC ATM.</p>
<span class="ml-auto text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tailwind CSS Keyframes for Animations -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fade-in 0.8s ease-out forwards;
}
@keyframes slide-in-left {
from { opacity: 0; transform: translateX(-50px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-left {
animation: slide-in-left 0.7s ease-out forwards;
}
@keyframes slide-in-right {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right {
animation: slide-in-right 0.7s ease-out forwards;
}
@keyframes slide-in-right-item {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right-item {
animation: slide-in-right-item 0.4s ease-out forwards;
}
@keyframes zoom-in-map {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.animate-zoom-in-map {
animation: zoom-in-map 0.6s ease-out forwards;
}
@keyframes bounce-in {
0% { transform: scale(0.9); opacity: 0; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); }
}
.animate-bounce-in {
animation: bounce-in 0.5s ease-out forwards;
}
@keyframes pop-in {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
.animate-pop-in {
animation: pop-in 0.4s ease-out forwards;
}
@keyframes bounce-marker {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce-marker {
animation: bounce-marker 1.5s infinite ease-in-out;
}
@keyframes pulse-slow {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
}
.animate-pulse-slow {
animation: pulse-slow 3s infinite ease-in-out;
}
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
/* Aspect Ratio Utility (for map container) */
.aspect-w-16 {
position: relative;
width: 100%;
}
.aspect-w-16::before {
content: '';
display: block;
padding-bottom: calc(100% / (16 / 9));
}
.aspect-w-16 > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.aspect-h-9::before { padding-bottom: calc(100% / (16 / 9)); }
@media (min-width: 640px) {
.sm\:aspect-h-11::before { padding-bottom: calc(100% / (16 / 11)); }
}
@media (min-width: 768px) {
.md\:aspect-h-12::before { padding-bottom: calc(100% / (16 / 12)); }
}
/* Custom Form Checkbox Styles */
.form-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1.5rem;
width: 1.5rem;
border-radius: 0.5rem; /* rounded-lg */
border-width: 2px; /* border-2 */
background-color: transparent;
transition: background-color 0.2s, border-color 0.2s;
}
.form-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 00-1.414 0L7 8.586 4.207 5.793a1 1 0 00-1.414 1.414l3.5 3.5a1 1 0 001.414 0l5-5a1 1 0 000-1.414z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.form-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.5); /* example focus ring */
}
.form-checkbox.text-orange-500:checked {
background-color: #f97316; /* orange-500 */
border-color: #f97316;
}
.form-checkbox.text-red-500:checked {
background-color: #ef4444; /* red-500 */
border-color: #ef4444;
}
.form-checkbox.text-blue-500:checked {
background-color: #3b82f6; /* blue-500 */
border-color: #3b82f6;
}
.form-checkbox.text-green-500:checked {
background-color: #22c55e; /* green-500 */
border-color: #22c55e;
}
.dark .form-checkbox.text-cyan-400:checked {
background-color: #22d3ee; /* cyan-400 */
border-color: #22d3ee;
}
.dark .form-checkbox.text-pink-400:checked {
background-color: #f472b6; /* pink-400 */
border-color: #f472b6;
}
.dark .form-checkbox.text-blue-400:checked {
background-color: #60a5fa; /* blue-400 */
border-color: #60a5fa;
}
.dark .form-checkbox.text-green-400:checked {
background-color: #4ade80; /* green-400 */
border-color: #4ade80;
}
</style>Componenti correlati
Gradient_Forest_Maps_Component
Un componente di mappa semplice e reattivo per piattaforme educative, con una tavolozza sfumata verde foresta e transizioni fluide, con supporto per la modalità scura.
Componente Mappe
Un componente di mappe reattivo con neumorfismo, che supporta il tema scuro e presenta immagini segnaposto.
Brutalism_Photography_Maps_Component
Un semplice componente cartografico in stile brutalista per portfolio fotografici, caratterizzato da un'audace combinazione di colori viola con contrasto elevato e supporto per la modalità scura.