admin/e-cosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(translations/about): Ajoute une chronologie des événements clés en français et anglais

Browse Source 
Ajoute une chronologie stylisée à la page "À propos" avec des traductions pour les événements.
This commit is contained in:
Serreau Jovann
2025-11-20 12:14:05 +01:00
parent 5698e20b5f
commit 222805a91f
3 changed files with 194 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
templates/about.twig
View File

@@ -170,6 +170,78 @@
.social-icons a:hover {
color: #4299e1; /* Bleu clair au survol */
}
/* Custom style for the timeline line */
.timeline-container {
position: relative;
}
.timeline-container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%; /* Center the line */
width: 4px;
background: #cbd5e1; /* Gray-300 */
margin-left: -2px;
z-index: 0;
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
}
.timeline-item:nth-child(even) .timeline-date-card {
order: 2;
}
.timeline-item:nth-child(even) .timeline-content {
text-align: right;
order: 1;
}
.timeline-dot {
position: absolute;
top: 0.5rem;
left: 50%;
width: 14px;
height: 14px;
background: #06b6d4; /* Teal-500 */
border-radius: 50%;
border: 3px solid #f0f9ff; /* Blue-50 */
margin-left: -7px;
z-index: 10;
}
@media (max-width: 767px) {
.timeline-container:before {
left: 1.5rem; /* Move line to the left on mobile */
margin-left: 0;
}
.timeline-item {
display: block;
padding-left: 3.5rem; /* Space for the line and dot */
}
.timeline-item:nth-child(even) .timeline-date-card,
.timeline-item:nth-child(odd) .timeline-date-card {
order: 0; /* Reset order */
text-align: left;
}
.timeline-item:nth-child(even) .timeline-content,
.timeline-item:nth-child(odd) .timeline-content {
order: 0; /* Reset order */
text-align: left;
}
.timeline-dot {
left: 1.5rem;
margin-left: -7px;
}
.timeline-date-card {
width: 100% !important;
margin-bottom: 0.5rem;
}
}
</style>
<main class="w-full px-4 py-12">
@@ -250,6 +322,7 @@
</div>
</div>
</div>
<section class="mb-12 max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_goals_title'|trans}}</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -284,6 +357,86 @@
</div>
</section>
{# --- NEW TIMELINE SECTION --- #}
<section class="mb-12 max-w-4xl mx-auto p-6 bg-white rounded-xl shadow-xl">
<h2 class="text-3xl font-bold text-blue-700 mb-10 text-center">{{'timeline_title'|trans}}</h2>
<div class="timeline-container">
{# Event 1: Creation #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_creation_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_creation_text_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_creation_text'|trans}}
</p>
</div>
</div>
{# Event 2: Partnership #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_partnership_text_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_partnership_text'|trans}}
</p>
</div>
<div class="timeline-dot"></div>
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_partnership_date'|trans}}
</div>
</div>
{# Event 3: First Event #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_first_show_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_first_show_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_first_show_text'|trans}}
</p>
</div>
</div>
{# Event 4: Miss Tergnier 2025 #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_miss_tergnier_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_miss_tergnier_text'|trans}}
</p>
</div>
<div class="timeline-dot"></div>
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_miss_tergnier_date'|trans}}
</div>
</div>
{# Event 5: Website Launch #}
<div class="timeline-item flex items-start md:items-center justify-between flex-wrap">
<div class="timeline-date-card md:w-5/12 p-4 bg-teal-50 text-center rounded-lg shadow-sm font-bold text-teal-700">
{{'event_website_launch_date'|trans}}
</div>
<div class="timeline-dot"></div>
<div class="timeline-content md:w-5/12 p-4 bg-gray-50 rounded-lg shadow-md">
<h3 class="font-semibold text-lg text-blue-800 mb-1">{{'event_website_launch_title'|trans}}</h3>
<p class="text-gray-600 text-sm">
{{'event_website_launch_text'|trans}}
</p>
</div>
</div>
</div>
</section>
{# --- END NEW TIMELINE SECTION --- #}
<section class="mb-12 p-8 bg-blue-100 rounded-xl shadow-inner max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-blue-700 mb-6 text-center">{{'about_activities_title'|trans}}</h2>