Retro_Industrial_Skip_Content
Un componente de enlace de estilo retro/vintage para sitios web industriales y de fabricación, con estética de los años 80/90, una combinación de colores complementaria (naranja/verde azulado) y compatibilidad con el modo oscuro. Este componente complejo incluye elementos interactivos para una experiencia de usuario enriquecida.
Código 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>Componentes relacionados
Saltar al componente de enlace de contenido
Glassmorphism Saltar al contenido Enlace con un efecto de vidrio esmerilado, desenfoque, capacidad de respuesta y compatibilidad con modo oscuro mediante Tailwind CSS, sin JavaScript.
Saltar al componente de enlace de contenido
Un componente de enlace simple, monocromático e inspirado en la naturaleza 'Saltar al contenido' para CRM/Business Tools, que garantiza la accesibilidad y la capacidad de respuesta con soporte de modo oscuro.
Saltar al enlace de contenido
Un componente de enlace receptivo "Saltar al contenido" con estilo Glassmorphism, que implementa un esquema de color complementario, complejidad moderada y soporte de modo oscuro adecuado para sitios web comerciales / corporativos. Este componente se implementa puramente en HTML con clases CSS de Tailwind, que no requieren JavaScript.