Paper_Print_Sepia_Sports_Map_Component
A responsive map-like component for sports/fitness applications with a paper/print-inspired design and sepia/brown color scheme. It includes a simulated map area, location pins, and a legend, with full dark mode support.
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>Related Components
Maps Component
A responsive Maps Component designed with Glassmorphism style, featuring a dark theme and Tailwind CSS classes. Suitable for dashboards with data visualization and control panels.
Maps Component
A simple, responsive map component with a Material Design aesthetic and earth tone color scheme, featuring dark mode support. Suitable for entertainment/media platforms to show location-based content playfully.
MemphisMapsComponent_CryptoBlockchain
A complex, responsive 'Memphis Design' inspired maps component for cryptocurrency/blockchain applications, featuring bold colors, geometric shapes, and a warm sunset color scheme. Includes dark mode support and interactive elements.