Brutalist_Sepia_Timeline_Documentation
Un componente complesso della timeline in stile brutalista per la documentazione o i siti wiki, con toni seppia/marrone e piena reattività con supporto per la modalità scura. Progettato con un contrasto elevato e un'estetica grezza.
Codice HTML
<div class="p-4 sm:p-8 md:p-12 min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-mono">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 sm:mb-12 text-stone-900 dark:text-stone-100 uppercase tracking-tighter border-b-4 border-stone-900 dark:border-stone-100 pb-2">
Project Chronology <span class="text-stone-600 dark:text-stone-400">// V-0.1</span>
</h1>
<div class="max-w-6xl mx-auto relative">
<!-- Vertical Line -->
<div class="absolute left-4 sm:left-1/2 -ml-0.5 w-1 h-full bg-stone-500 dark:bg-stone-600 border border-stone-900 dark:border-stone-100 transform -translate-x-1/2"></div>
<!-- Timeline Item 1 -->
<div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
<div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
<div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">System Architecture Draft</h3>
<p class="mb-3 text-stone-700 dark:text-stone-300">Initial conceptualization of modular components and data flow. Focus on redundancy and fault tolerance.</p>
<div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
<span>Version 1.0.0 Alpha</span>
<span class="font-bold text-stone-900 dark:text-stone-100">12, JAN 2023</span>
</div>
<div class="flex items-center space-x-2 mt-4 -ml-2">
<img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author">
<span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Dr. A. Smith</a></span>
</div>
</div>
</div>
<div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
</div>
<!-- Timeline Item 2 -->
<div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
<div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
<div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Core Module Prototyping</h3>
<p class="mb-3 text-stone-700 dark:text-stone-300">Development begins on critical path components, including secure data handling and authentication layers.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Prototyping" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 mb-3 grayscale mix-blend-multiply dark:mix-blend-normal">
<div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
<span>Hotfix Branch 3.1</span>
<span class="font-bold text-stone-900 dark:text-stone-100">05, APR 2023</span>
</div>
<div class="flex items-center space-x-2 mt-4 -ml-2">
<img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author">
<span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">J. Rodriguez</a></span>
</div>
</div>
</div>
<div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
</div>
<!-- Timeline Item 3 -->
<div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
<div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
<div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Security Audit & Remediation</h3>
<p class="mb-3 text-stone-700 dark:text-stone-300">Comprehensive third-party security assessment. Identified and patched critical vulnerabilities.</p>
<ul class="list-disc list-inside text-sm mb-3 text-stone-700 dark:text-stone-300">
<li>CVE-2023-1234 patched.</li>
<li>Cross-site scripting mitigation implemented.</li>
<li>Access control list hardening applied.</li>
</ul>
<div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
<span>Audit Report v2.1</span>
<span class="font-bold text-stone-900 dark:text-stone-100">20, JUN 2023</span>
</div>
<div class="flex items-center space-x-2 mt-4 -ml-2">
<img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author">
<span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Cyb. Sec. Team</a></span>
</div>
</div>
</div>
<div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
</div>
<!-- Timeline Item 4 -->
<div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
<div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
<div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Beta Launch & Feedback</h3>
<p class="mb-3 text-stone-700 dark:text-stone-300">Limited release to internal testers and key partners. Initial user feedback gathered and analyzed.</p>
<div class="grid grid-cols-2 gap-2 mb-3">
<img src="https://picsum.photos/200/150?random=2" alt="Beta Testing 1" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
<img src="https://picsum.photos/200/150?random=3" alt="Beta Testing 2" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
</div>
<div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
<span>Build 2023.Q3.BETA</span>
<span class="font-bold text-stone-900 dark:text-stone-100">01, SEP 2023</span>
</div>
<div class="flex items-center space-x-2 mt-4 -ml-2">
<img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author">
<span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Team Lead</a></span>
</div>
</div>
</div>
<div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
</div>
<!-- Timeline Item 5 (Future Milestone - visual distinction) -->
<div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item opacity-70 cursor-not-allowed">
<div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
<div class="w-full sm:w-10/12 md:w-8/12 bg-stone-300 dark:bg-stone-700 p-4 sm:p-6 border-4 border-stone-600 dark:border-stone-400 border-dashed shadow-[4px_4px_0_0_rgba(0,0,0,0.5)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]">
<h3 class="text-2xl font-bold mb-2 text-stone-700 dark:text-stone-300 uppercase pb-1 border-b-2 border-stone-400 dark:border-stone-500">Public Release Candidate</h3>
<p class="mb-3 text-stone-600 dark:text-stone-400">Preparation for wider audience release. Final checks and documentation updates.</p>
<div class="text-sm text-stone-500 dark:text-stone-500 flex items-center justify-between">
<span>ETA: Full Launch</span>
<span class="font-bold text-stone-700 dark:text-stone-300">Q4, 2023+</span>
</div>
</div>
</div>
<div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-600 dark:bg-stone-400 border-4 border-stone-300 dark:border-stone-700 z-10 hidden sm:block"></div>
</div>
</div>
</div>Componenti correlati
Componente Timeline
Un componente della timeline reattivo con design Glassmorphism, combinazione di colori complementari e supporto per temi scuri, adatto per siti Web aziendali. È dotato di elementi traslucidi simili al vetro smerigliato con effetti di sfocatura.
Componente Timeline
Un componente Timeline reattivo progettato in stile Brutalismo con CSS Tailwind, che supporta il tema scuro e presenta immagini segnaposto e avatar.
Componente Timeline
Un componente della timeline complesso e reattivo progettato per le piattaforme didattiche, caratterizzato da un design pulito e minimalista incentrato sulla tipografia con toni della terra e supporto completo della modalità scura.