Paper_Print_Sepia_Sports_Map_Component
Il s’agit d’un composant réactif de type carte pour les applications de sport/fitness avec un design inspiré du papier/de l’impression et une palette de couleurs sépia/marron. Il comprend une zone de carte simulée, des épingles de localisation et une légende, avec une prise en charge complète du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 min-h-screen">
<div class="max-w-6xl mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden
border border-stone-200 dark:border-stone-700
transform transition-all duration-300 hover:shadow-2xl">
<!-- Header Section -->
<div class="bg-stone-100 dark:bg-stone-700 p-4 sm:p-5 flex items-center justify-between
border-b border-stone-200 dark:border-stone-600
relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
<h2 class="text-xl sm:text-2xl font-serif text-stone-800 dark:text-stone-200
relative z-10 font-bold tracking-wide">Training Ground Map</h2>
<button aria-label="View Settings" class="relative z-10 p-2 rounded-full bg-stone-200 dark:bg-stone-600
hover:bg-stone-300 dark:hover:bg-stone-500 transition-colors duration-200
shadow-sm dark:shadow-md">
<svg class="w-5 h-5 text-stone-600 dark:text-stone-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.49 3.17c-.389-.111-.796-.16-1.21-.16s-.822.049-1.21.16zM9.54 2.1c.427-.122.875-.18 1.35-.18s.923.058 1.35.18l.8-.8a.75.75 0 011.06 0l1.25 1.25a.75.75 0 010 1.06l-.775.775a.75.75 0 00-.012.012c.11.23.2.47.27.708l.775.776a.75.75 0 010 1.06l-1.25 1.25a.75.75 0 01-1.06 0l-.775-.775a.75.75 0 00-.01-.01c-.24.11-.49.2-.748.27l-.776.775a.75.75 0 01-1.06 0l-1.25-1.25a.75.75 0 010-1.06l.775-.775a.75.75 0 00.01-.012c-.11-.23-.2-.47-.27-.708l-.775-.776a.75.75 0 010-1.06l1.25-1.25a.75.75 0 011.06 0l.775.775a.75.75 0 00.012.01z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M7.22 8.35s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 13.65s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 18.95s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0">
<!-- Left Sidebar: Map Controls & Legend -->
<div class="md:col-span-1 p-4 sm:p-5 bg-stone-50 dark:bg-stone-700
border-r-0 md:border-r border-b md:border-b-0 border-stone-200 dark:border-stone-600
relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-40 dark:opacity-5"></div>
<div class="relative z-10 space-y-6">
<!-- Map Controls -->
<div>
<h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Map Controls</h3>
<div class="space-y-3">
<button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
shadow-sm hover:shadow-md transition-all duration-200
border border-amber-200 dark:border-stone-500
hover:bg-amber-200 dark:hover:bg-stone-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
Zoom In
</button>
<button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
shadow-sm hover:shadow-md transition-all duration-200
border border-amber-200 dark:border-stone-500
hover:bg-amber-200 dark:hover:bg-stone-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.5 10.5a.5.5 0 01-.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H7z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
Zoom Out
</button>
<button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
shadow-sm hover:shadow-md transition-all duration-200
border border-amber-200 dark:border-stone-500
hover:bg-amber-200 dark:hover:bg-stone-500">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm-5 8a.8.8 0 01.8-.8h8.4a.8.8 0 010 1.6H5.8A.8.8 0 015 10z"></path></svg>
Recenter
</button>
</div>
</div>
<!-- Legend -->
<div>
<h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Legend</h3>
<ul class="space-y-2 text-sm text-stone-700 dark:text-stone-300">
<li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-red-500 dark:bg-red-600 shadow-sm"></span> Training Field</li>
<li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-blue-500 dark:bg-blue-600 shadow-sm"></span> Water Station</li>
<li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-emerald-500 dark:bg-emerald-600 shadow-sm"></span> First Aid</li>
<li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-purple-500 dark:bg-purple-600 shadow-sm"></span> Rest Area</li>
</ul>
</div>
<!-- Quick Stats (Example) -->
<div>
<h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Workout Overview</h3>
<div class="space-y-2 text-stone-700 dark:text-stone-300">
<p class="flex justify-between"><span>Total Distance:</span> <span class="font-semibold">5.2 km</span></p>
<p class="flex justify-between"><span>Elevation Gain:</span> <span class="font-semibold">120 m</span></p>
<p class="flex justify-between"><span>Avg Pace:</span> <span class="font-semibold">5:15 /km</span></p>
</div>
</div>
</div>
</div>
<!-- Main Map Area -->
<div class="md:col-span-2 lg:col-span-3 bg-amber-100 dark:bg-stone-900 min-h-[400px] md:min-h-[600px] lg:min-h-[700px]
flex items-center justify-center relative shadow-inner p-4 sm:p-6
border-l-0 md:border-l border-stone-200 dark:border-stone-700">
<img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of training grounds"
class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-screen
transform scale-105 filter sepia dark:invert dark:sepia-0 dark:contrast-125 dark:brightness-75">
<div class="relative z-10 w-full h-full flex flex-col justify-center items-center p-4">
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif text-stone-800 dark:text-stone-200 font-bold mb-6 text-center
drop-shadow-lg text-shadow-sm filter backdrop-blur-sm bg-white/20 dark:bg-stone-900/20 p-3 rounded-xl
border border-stone-300 dark:border-stone-600
"><span class="hidden sm:inline">Interactive </span>Training Map</h2>
<!-- Simulated Map Pins -->
<div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
<div class="w-6 h-6 rounded-full bg-red-500 dark:bg-red-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
<div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-red-500 dark:border-t-red-600"></div>
<span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Field A (Football)</span>
</div>
<div class="absolute top-2/3 right-1/4 transform translate-x-1/2 translate-y-1/2 flex flex-col items-center group cursor-pointer">
<div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
<div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-blue-500 dark:border-t-blue-600"></div>
<span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Water Station 1</span>
</div>
<div class="absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
<div class="w-6 h-6 rounded-full bg-emerald-500 dark:bg-emerald-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
<div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-emerald-500 dark:border-t-emerald-600"></div>
<span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Medical Tent</span>
</div>
<!-- Call to Action / Info Box -->
<div class="absolute bottom-8 right-8 bg-white dark:bg-stone-700 rounded-lg p-3 sm:p-4 shadow-lg
border border-stone-200 dark:border-stone-600 max-w-xs text-sm
transform translate-y-0 hover:-translate-y-1 transition-transform duration-300
hidden sm:block">
<div class="dark:text-stone-300 text-stone-700">
<p class="font-bold font-serif mb-2 text-base text-stone-800 dark:text-stone-200">Ready to Explore?</p>
<p>Click on the pins for more details about different areas. Track your progress here!</p>
<button class="mt-3 w-full bg-amber-700 dark:bg-amber-600 text-white py-2 rounded-md
hover:bg-amber-800 dark:hover:bg-amber-500 transition-colors duration-200
shadow-md dark:shadow-lg">Start Tracking</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer (simple for this component) -->
<div class="bg-stone-100 dark:bg-stone-700 p-3 sm:p-4 text-center
border-t border-stone-200 dark:border-stone-600
relative overflow-hidden">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
<p class="text-xs text-stone-600 dark:text-stone-400 relative z-10">Data provided by GeoFit Innovations © 2023</p>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap');
.font-sans { font-family: 'Open Sans', sans-serif; }
.font-serif { font-family: 'Merriweather', serif; }
/* Custom keyframes for ping animation */
@keyframes bounce-short {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-bounce-short {
animation: bounce-short 1.5s infinite;
}
</style>Composants associés
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.
Brutalism_Photography_Maps_Component
Un composant de carte simple, de style brutaliste, pour les portfolios de photographie, avec une palette de couleurs violettes audacieuses avec un contraste élevé et une prise en charge du mode sombre.
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.