Brutalist_Sepia_Timeline_Documentation
Un composant de chronologie complexe, de style brutaliste, pour la documentation ou les sites wiki, avec des tons sépia/brun et une réactivité totale avec prise en charge du mode sombre. Conçu avec un contraste élevé et une esthétique brute.
HTML Code
<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>Composants associés
Composant de chronologie rétro/vintage
Un composant de chronologie réactif avec un design rétro/vintage, des couleurs vives et une prise en charge du mode sombre. Convient pour la présentation d’un portfolio.
Composant de chronologie
Un composant de chronologie simple et réactif avec une palette de couleurs monochromatiques et des effets 3D subtils, adapté aux sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.
Composant de chronologie
Un composant de chronologie réactif simple conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Il dispose d’un support de thème sombre et utilise Tailwind CSS pour le style.