gauvain/calendrier_republicain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refacto: Remake the interface so it is more 'vintage' looking + Adding a full calendar page

Browse Source
This commit is contained in:
gauvainboiche
2026-10-25 12:01:00 +01:00
parent 2539b6c756
commit f6738972f1
45 changed files with 1433 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+71 -28
View File
@@ -4,16 +4,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="site.title">Calendrier républicain</title>
<link rel="icon" href="data:,">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="preload" href="assets/fonts/old-standard-tt-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/im-fell-english-sc.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<a class="brand" href="#/">
<span class="brand-mark">an</span>
<span class="cockade" aria-hidden="true"></span>
<span class="brand-title" data-i18n="site.title">Calendrier républicain</span>
</a>
<div class="header-actions">
@@ -29,6 +28,7 @@
<nav id="main-nav" class="main-nav" aria-hidden="true">
<a href="#/" class="nav-link" data-view="home" data-i18n="nav.home">Accueil</a>
<a href="#/calendar" class="nav-link" data-view="calendar" data-i18n="nav.calendar">Le calendrier complet</a>
<p class="nav-section-label" data-i18n="nav.about">À propos</p>
<a href="#/about/history" class="nav-link" data-view="history" data-i18n="nav.aboutHistory">Histoire du calendrier</a>
<a href="#/about/leap-years" class="nav-link" data-view="leap-years" data-i18n="nav.aboutLeapYears">Les années sextiles</a>
@@ -38,32 +38,45 @@
<main id="app">
<section id="view-home" class="view">
<h1 class="today-heading">
<span data-i18n="home.todayHeading">Nous sommes aujourd'hui le</span>
</h1>
<div class="tablet">
<header class="tablet-head">
<h1 class="today-heading" data-i18n="home.todayHeading">Nous sommes aujourd'hui le</h1>
<div class="ornament" aria-hidden="true"></div>
</header>
<div class="calendar-card">
<div class="month-illustration">
<img id="month-image" src="assets/months/vendemiaire.svg" alt="" width="140" height="140">
<p id="month-period" class="month-period"></p>
</div>
<div class="tablet-body">
<figure class="plate">
<div class="plate-frame">
<img id="month-image" src="assets/months/vendemiaire.jpg" alt="" width="527" height="713">
</div>
<figcaption>
<h2 id="month-name" class="month-name">—</h2>
<p id="month-period" class="month-period"></p>
</figcaption>
</figure>
<div class="date-display">
<p id="decade-day" class="decade-day">—</p>
<p id="republican-date" class="republican-date">—</p>
<p id="republican-year" class="republican-year">—</p>
<span id="sextile-badge" class="sextile-badge" hidden data-i18n="home.sextileBadge">Année sextile</span>
<p class="gregorian-equivalent">
<span data-i18n="home.gregorianEquivalent">Équivalent grégorien</span> :
<span id="gregorian-equivalent-value">—</span>
</p>
</div>
<img class="fasces" src="assets/fasces.svg" alt="" aria-hidden="true">
<div class="description-panel">
<h2 id="month-name" class="month-name">—</h2>
<p id="month-season-suffix" class="month-season-suffix"></p>
<p id="month-etymology" class="month-etymology"></p>
<p id="month-description" class="month-description"></p>
<div class="decree">
<div class="date-display">
<p id="decade-day" class="decade-day">—</p>
<p id="republican-date" class="republican-date">—</p>
<p id="republican-year" class="republican-year">—</p>
<span id="sextile-badge" class="sextile-badge" hidden data-i18n="home.sextileBadge">Année sextile</span>
<p class="gregorian-equivalent">
<span data-i18n="home.gregorianEquivalent">Équivalent grégorien</span> :
<span id="gregorian-equivalent-value">—</span>
</p>
</div>
<div class="ornament" aria-hidden="true"></div>
<div class="description-panel">
<p id="month-season-suffix" class="month-season-suffix"></p>
<p id="month-etymology" class="month-etymology"></p>
<p id="month-description" class="month-description"></p>
</div>
</div>
</div>
</div>
@@ -80,13 +93,43 @@
</form>
</section>
<section id="view-calendar" class="view" hidden>
<div class="poster">
<header class="poster-head">
<h1 data-i18n="calendar.title">Calendrier de la République française</h1>
<p class="poster-subtitle" data-i18n="calendar.subtitle">Les douze mois, les trois décades et les jours de l'année</p>
<div class="ornament" aria-hidden="true"></div>
</header>
<div id="poster-grid" class="poster-grid"></div>
<div id="poster-feasts" class="poster-feasts"></div>
</div>
</section>
<section id="view-about" class="view about-view" hidden>
<h1 id="about-title">—</h1>
<div id="about-content" class="about-content"></div>
</section>
</main>
<dialog id="month-dialog" class="month-dialog">
<form method="dialog">
<button class="dialog-close" aria-label="Fermer" data-i18n-aria-label="calendar.close">×</button>
</form>
<figure class="plate">
<div class="plate-frame"><img id="dialog-image" src="" alt="" width="527" height="713"></div>
<figcaption>
<h2 id="dialog-name" class="month-name"></h2>
<p id="dialog-period" class="month-period"></p>
</figcaption>
</figure>
<div class="dialog-text">
<p id="dialog-etymology" class="month-etymology"></p>
<p id="dialog-description" class="month-description"></p>
</div>
</dialog>
<footer class="site-footer">
<div class="ornament" aria-hidden="true"></div>
<p data-i18n="footer.text">Dates calculées selon la règle arithmétique perpétuelle proposée par Gilbert Romme (19 floréal an III / 8 mai 1795).</p>
</footer>