feat: Building the app in it's first version
This commit is contained in:
gauvainboiche
@@ -0,0 +1,96 @@
|
||||
<!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" 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="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#/">
|
||||
<span class="brand-mark">an</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>
|
||||
<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">
|
||||
<h1 class="today-heading">
|
||||
<span data-i18n="home.todayHeading">Nous sommes aujourd'hui le</span>
|
||||
</h1>
|
||||
|
||||
<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="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="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>
|
||||
</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-about" class="view about-view" hidden>
|
||||
<h1 id="about-title">—</h1>
|
||||
<div id="about-content" class="about-content"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<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>
|
||||
Reference in New Issue
Block a user