MemphisMapsComponent_CryptoBlockchain
Un composant de cartes complexe et réactif inspiré du « Memphis Design » pour les applications de crypto-monnaie/blockchain, avec des couleurs audacieuses, des formes géométriques et une palette de couleurs chaudes de coucher de soleil. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<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>Composants associés
Composant de carte skeuomorphe
Un composant de carte simple et réactif avec un design skeuomorphe, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un portfolio.
IndustrielVibrantMapsComposant
Un composant cartographique réactif et interactif avec une esthétique industrielle, brute et une palette de couleurs vives, adapté aux applications technologiques/SaaS. Inclut la prise en charge du mode sombre.
Luxury_Autumn_Maps_Component
Un composant de carte réactif et élégant conçu pour les sites Web de voyage et de tourisme de luxe, avec des couleurs d’automne et une prise en charge du mode sombre.