140 lines
6.3 KiB
HTML
140 lines
6.3 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<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" 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="cockade" aria-hidden="true"></span>
|
||
<span class="brand-title" data-i18n="site.title">Calendrier républicain</span>
|
||
</a>
|
||
<div class="header-actions">
|
||
<button id="lang-switch" class="lang-switch" type="button" aria-label="Switch language">FR</button>
|
||
<button id="menu-toggle" class="menu-toggle" type="button" aria-expanded="false" aria-controls="main-nav">
|
||
<span class="sr-only" data-i18n="nav.menuLabel">Menu</span>
|
||
<span class="burger-bar"></span>
|
||
<span class="burger-bar"></span>
|
||
<span class="burger-bar"></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<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>
|
||
<a href="#/about/complementary-days" class="nav-link" data-view="complementary-days" data-i18n="nav.aboutComplementaryDays">Les jours complémentaires</a>
|
||
</nav>
|
||
<div id="nav-backdrop" class="nav-backdrop" hidden></div>
|
||
|
||
<main id="app">
|
||
<section id="view-home" class="view">
|
||
<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="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>
|
||
|
||
<img class="fasces" src="assets/fasces.svg" alt="" aria-hidden="true">
|
||
|
||
<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>
|
||
|
||
<form id="convert-form" class="convert-form">
|
||
<h2 data-i18n="form.title">Convertir une autre date</h2>
|
||
<label for="date-input" data-i18n="form.dateLabel">Date grégorienne (JJ/MM/AAAA)</label>
|
||
<div class="convert-form-row">
|
||
<input type="date" id="date-input" name="date" min="1792-09-22" required>
|
||
<button type="submit" data-i18n="form.submit">Convertir</button>
|
||
<button type="button" id="today-button" class="secondary" data-i18n="form.todayButton">Revenir à aujourd'hui</button>
|
||
</div>
|
||
<p class="form-help" data-i18n="form.helpText">Sélectionnez un jour, un mois et une année : le formulaire vérifie automatiquement que la date existe.</p>
|
||
<p id="form-error" class="form-error" hidden></p>
|
||
</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>
|
||
|
||
<script src="js/i18n.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|