feat: add navbar

VincentHardouin · Mar 10, 2024 · ef00d79 · ef00d79
1 parent 0aa95a9
commit ef00d79
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -18,6 +18,59 @@
     <script defer data-domain="metro-travel.vincenthardouin.dev" src="https://analytics.vincenthardouin.dev/js/script.js"></script>
 </head>
 <body>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">Métro Travel</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <button class="nav-link" data-bs-toggle="modal" data-bs-target="#rules-modal">Règles</button>
+                </li>
+                <li class="nav-item">
+                    <button class="nav-link" data-bs-toggle="modal" data-bs-target="#about-modal">À propos</button>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div id="rules-modal" class="modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Règles du jeu</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>L'objectif est de trouver toutes les stations pour relier la station de départ à la station d'arrivée. Bon courage !</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="about-modal" class="modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">À propos</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Métro Travel est un jeu quotidien, dont l'objectif est de trouver les différentes stations entre celle de départ et d'arrivée.</p>
+                <p>Elle est développée par <a href="https://vincentHardouin.dev/">Vincent Hardouin</a>, le code source est disponible <a href="https://github.com/VincentHardouin/metro-travel/">sur GitHub</a>.</p>
+                <p>N'hésitez pas à me faire des retours, des suggestions d'améliorations et à contribuer.</p>
+                <p>Uniquement les statistiques de visite sont récupérées.</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
+            </div>
+        </div>
+    </div>
+</div>
 <div id="finish-modal" class="modal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">