Retro_Industrial_Skip_Content
Un componente di collegamento "salta al contenuto" in stile retrò/vintage per siti Web industriali e manifatturieri, con un'estetica anni '80/'90, una combinazione di colori complementari (arancione/verde acqua) e supporto per la modalità scura. Questo componente complesso include elementi interattivi per un'esperienza utente ricca.
Codice HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skip to Content Link</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'selector',
theme: {
extend: {
colors: {
'retro-orange': '#FF8C00',
'retro-teal': '#008080',
'retro-dark-bg': '#2C3E50',
'retro-light-bg': '#ECF0F1',
'retro-dark-text': '#BDC3C7',
'retro-light-text': '#2C3E50'
},
fontFamily: {
'mono-retro': ['"Roboto Mono"', 'monospace'],
'sans-retro': ['"Press Start 2P"', 'cursive'] // For a more arcade look if needed, but mono for industrial feel
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* Custom styles for the skip link to ensure it's hidden until focused */
.skip-link {
position: absolute;
left: -9999px;
z-index: 100;
}
.skip-link:focus {
left: 50%;
transform: translateX(-50%);
top: 1rem;
padding: 0.75rem 1.5rem;
background-color: theme('colors.retro-teal');
color: theme('colors.retro-light-bg');
text-decoration: none;
border-radius: 0.5rem;
outline: 2px solid theme('colors.retro-orange');
outline-offset: 2px;
transition: all 0.2s ease-in-out;
font-family: theme('fontFamily.mono-retro');
font-size: 0.875rem; /* sm */
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Dark mode specific focus styles */
html.dark .skip-link:focus {
background-color: theme('colors.retro-orange');
color: theme('colors.retro-dark-bg');
outline-color: theme('colors.retro-teal');
box-shadow: 0 4px 6px -1px rgba(255, 140, 0, 0.3), 0 2px 4px -1px rgba(255, 140, 0, 0.15);
}
/* Retro button hover effect */
.retro-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06);
filter: brightness(1.2);
}
html.dark .retro-button:hover {
filter: brightness(0.8);
}
/* Retro glow for sections */
.retro-glow {
box-shadow: 0 0 15px rgba(0, 128, 128, 0.7);
}
html.dark .retro-glow {
box-shadow: 0 0 15px rgba(255, 140, 0, 0.7);
}
</style>
</head>
<body class="bg-retro-light-bg text-retro-light-text font-mono-retro dark:bg-retro-dark-bg dark:text-retro-dark-text min-h-screen flex flex-col">
<!-- Dark mode toggle for demonstration -->
<button onclick="document.documentElement.classList.toggle('dark')" class="fixed top-4 right-4 z-50 p-3 rounded-full bg-retro-teal text-retro-light-bg dark:bg-retro-orange dark:text-retro-dark-bg focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal transition-colors duration-300 shadow-md retro-button">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path class="dark:hidden" d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
<path class="hidden dark:block" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 2.828a1 1 0 01.707 1.707l-1 1a1 1 0 11-1.414-1.414l1-1A1 1 0 0114 4.828zM17 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zm8.293 4.293a1 1 0 01-1.414 0l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM10 15a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zm-4.293-1.293a1 1 0 010-1.414l-1-1a1 1 0 011.414-1.414l1 1a1 1 0 010 1.414zM16 10c0 3.313-2.687 6-6 6s-6-2.687-6-6 2.687-6 6-6 6 2.687 6 6z"></path>
</svg>
</button>
<!-- Main Navigation/Header -->
<header class="bg-gray-800 dark:bg-gray-900 text-retro-light-bg py-4 px-6 md:px-10 shadow-lg relative z-20 retro-glow">
<a href="#main-content" class="skip-link z-50">Skip to Main Content</a>
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center space-x-4 mb-4 md:mb-0">
<img src="https://picsum.photos/id/237/50/50" alt="Industrial Logo" class="rounded-full border-2 border-retro-orange dark:border-retro-teal">
<h1 class="text-2xl md:text-3xl font-sans-retro text-retro-orange dark:text-retro-teal tracking-wide">
<a href="#" class="hover:text-retro-light-bg transition-colors duration-200">TECHNO-WORKS INC.</a>
</h1>
</div>
<nav aria-label="Primary Navigation">
<ul class="flex flex-wrap justify-center md:space-x-8 space-x-4 text-sm md:text-base font-mono-retro">
<li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Products</a></li>
<li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Services</a></li>
<li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">About Us</a></li>
<li class="mb-2 md:mb-0"><a href="#" class="p-2 hover:text-retro-teal dark:hover:text-retro-orange border-b-2 border-transparent hover:border-retro-teal dark:hover:border-retro-orange transition-all duration-200">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Main Content Area -->
<main id="main-content" tabIndex="-1" class="flex-grow container mx-auto px-4 py-8 md:py-16 focus:outline-none focus:ring-4 focus:ring-retro-orange dark:focus:ring-retro-teal focus:ring-offset-8 focus:rounded-lg transition-all duration-300">
<h2 class="text-3xl md:text-4xl font-sans-retro text-center mb-8 text-retro-teal dark:text-retro-orange">Operational Overview: Data Stream</h2>
<section class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
<!-- System Status Card -->
<div class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
<h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">System Status: <span class="text-green-300 dark:text-green-700 font-bold">ONLINE</span></h3>
<p class="mb-3">Unit 001-A: <span class="font-bold">Active</span></p>
<p class="mb-3">Unit 001-B: <span class="font-bold">Active</span></p>
<p class="mb-3">Sensor Array: <span class="font-bold text-yellow-300 dark:text-yellow-700">Minor Anomaly Detected</span></p>
<button class="mt-4 w-full bg-retro-orange dark:bg-retro-dark-bg text-retro-light-bg dark:text-retro-orange py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-light-bg focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
View Diagnostics
</button>
</div>
<!-- Recent Activity Log (List) -->
<div class="lg:col-span-2 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
<h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Recent Activity Log</h3>
<ul class="space-y-4">
<li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/8.jpg" alt="Operator John Doe" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
<p><strong>[14:32:01]</strong> Operator John D. initiated <span class="text-retro-teal dark:text-retro-orange font-bold">System Cal. 3</span>.</p>
</li>
<li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Tech Jane Smith" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
<p><strong>[14:28:45]</strong> Tech Jane S. performed <span class="text-retro-teal dark:text-retro-orange font-bold">Data Backup R-7</span>.</p>
</li>
<li class="flex items-center bg-gray-200 dark:bg-gray-700 p-3 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Supervisor Mark Johnson" class="w-10 h-10 rounded-full mr-4 border-2 border-retro-orange dark:border-retro-teal">
<p><strong>[14:15:20]</strong> Supervisor Mark J. approved <span class="text-retro-teal dark:text-retro-orange font-bold">Phase II Deployment</span>.</p>
</li>
</ul>
</div>
</section>
<!-- Operational Data Section -->
<section class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg p-6 rounded-lg shadow-xl border-4 border-retro-orange dark:border-retro-teal transition-all duration-300 retro-glow">
<h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-light-bg dark:border-retro-dark-bg pb-2">Real-time Sensor Readings</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
<p class="text-lg font-bold">Temperature:</p>
<p class="text-xl">28.5 °C</p>
</div>
<div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
<p class="text-lg font-bold">Pressure:</p>
<p class="text-xl">1012 hPa</p>
</div>
<div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
<p class="text-lg font-bold">Humidity:</p>
<p class="text-xl">65%</p>
</div>
<div class="p-4 bg-retro-orange dark:bg-gray-900 rounded-md border-2 border-retro-light-bg dark:border-retro-teal shadow-md">
<p class="text-lg font-bold">Vibration:</p>
<p class="text-xl text-red-400 dark:text-red-700">HIGH</p>
</div>
</div>
<button class="mt-6 w-full md:w-auto bg-retro-light-bg dark:bg-gray-700 text-retro-teal dark:text-retro-orange py-2 px-6 rounded transition-all duration-300 retro-button border-2 border-retro-orange dark:border-retro-teal focus:outline-none focus:ring-2 focus:ring-retro-light-bg dark:focus:ring-retro-orange">
Request Full Data Log
</button>
</section>
<!-- Placeholder Content to Demonstrate Scrolling -->
<section class="mt-16 bg-retro-light-bg dark:bg-gray-800 text-retro-light-text dark:text-retro-dark-text p-6 rounded-lg shadow-xl border-4 border-retro-teal dark:border-retro-orange transition-all duration-300 retro-glow">
<h3 class="text-xl md:text-2xl font-mono-retro mb-4 border-b-2 border-retro-teal dark:border-retro-orange pb-2">Production Metrics Analytics</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<img src="https://picsum.photos/600/400?random=1" alt="Production Chart" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
<p class="mb-4">Detailed analysis of Unit 003's output efficiency over the last 24 hours, showing a 5% increase in throughput after last night's maintenance cycle.</p>
<button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
Generate Report
</button>
</div>
<div>
<img src="https://picsum.photos/600/400?random=2" alt="Maintenance Schedule" class="w-full h-auto rounded-lg mb-4 border-2 border-retro-orange mx-auto">
<p class="mb-4">Upcoming routine maintenance schedule for Q3, including major system upgrades for network infrastructure and power distribution units. Contingency plans are in place.</p>
<button class="bg-retro-teal dark:bg-retro-orange text-retro-light-bg dark:text-retro-dark-bg py-2 px-4 rounded transition-all duration-300 retro-button border-2 border-retro-light-bg dark:border-retro-dark-bg focus:outline-none focus:ring-2 focus:ring-retro-orange dark:focus:ring-retro-teal">
Update Schedule
</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="mt-auto bg-gray-800 dark:bg-gray-900 text-retro-dark-text py-6 px-4 md:px-10 text-center text-sm font-mono-retro shadow-inner retro-glow">
<div class="container mx-auto">
<p>© 2023 TECHNO-WORKS INC. All Rights Reserved. // Industrial Solutions Since '86</p>
<nav class="mt-4">
<ul class="flex flex-wrap justify-center space-x-4 md:space-x-8">
<li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Terms of Service</a></li>
<li><a href="#" class="hover:text-retro-orange dark:hover:text-retro-teal transition-colors duration-200">Sitemap</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>Componenti correlati
Salta al link al contenuto - Monocromatico retrò
Passa al componente Collegamento contenuto con design retrò/vintage, combinazione di colori monocromatica e complessità semplice.
Vai al collegamento al contenuto
Un collegamento minimalista per l'accessibilità nelle applicazioni Web, progettato per i dashboard.
Vai al componente Collegamento contenuto
Un componente di collegamento "Salta al contenuto" visivamente accattivante progettato per dashboard con particolare attenzione alle microinterazioni, utilizzando una combinazione di colori complementare e il supporto della modalità oscura tramite Tailwind CSS.