From f5376d4eeeff57c3840ad067bca68d9f896fc9d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valentin=20Mogu=C3=A9rou?= <valentin@kaz.bzh>
Date: Sat, 15 Jul 2023 22:46:41 +0200
Subject: [PATCH] Accueil et chemins relatifs

---
 BCG/index.html |  4 ++--
 BFI/index.html |  6 +++---
 index.html     | 20 ++++++++++++++------
 res/style.css  | 40 +++++++++++++++++++++++++++++++++++-----
 4 files changed, 54 insertions(+), 16 deletions(-)
diff --git a/BCG/index.html b/BCG/index.html
index b5f8638..cf8438b 100755
--- a/BCG/index.html
+++ b/BCG/index.html
@@ -11,12 +11,12 @@
     <meta name="og:title" property="Simulateur du bac général">
     <meta name="og:description" property="Calculez votre mention au Bac général en fonction de vos notes, ou déterminez le nombre de points qu'il vous manque pour en obtenir une en utilisant le simulateur du BCG de WikiBac.">
     <meta property="og:image" content="https://simulation.wikibac.fr/res/logo.png">
-    <link href="/res/style.css" rel="stylesheet" type="text/css">
+    <link href="../res/style.css" rel="stylesheet" type="text/css">
     <script src="calcul.js"></script>
 </head>
 <body onload="update()">
     <header>
-        <a href="/">&larr; Retour vers le portail des simulations</a>
+        <a href="..">&larr; Retour vers le portail des simulations</a>
         <div id="logo">
             <a href="https://www.wikibac.fr">
                 <img src="../res/logo.png" alt="Logo de Wikibac : une pièce de puzzle avec des feuilles de laurier"><span>WikiBac</span>
diff --git a/BFI/index.html b/BFI/index.html
index 812f2e5..ef1459b 100755
--- a/BFI/index.html
+++ b/BFI/index.html
@@ -11,15 +11,15 @@
     <meta name="og:title" property="Simulateur du BFI">
     <meta name="og:description" property="Calculez votre mention au Bac Français International (BFI) en fonction de vos notes, ou déterminez le nombre de points qu'il vous manque pour en obtenir une en utilisant le simulateur du BFI de WikiBac.">
     <meta property="og:image" content="https://simulation.wikibac.fr/res/logo.png">
-    <link href="/res/style.css" rel="stylesheet" type="text/css">
+    <link href="../res/style.css" rel="stylesheet" type="text/css">
     <script src="calcul.js"></script>
 </head>
 <body onload="update()">
     <header>
-        <a href="/">&larr; Retour vers le portail des simulations</a>
+        <a href="..">&larr; Retour vers le portail des simulations</a>
         <div id="logo">
             <a href="https://www.wikibac.fr">
-                <img src="/res/logo.png" alt="Logo de Wikibac : une pièce de puzzle avec des feuilles de laurier"><span>WikiBac</span>
+                <img src="../res/logo.png" alt="Logo de Wikibac : une pièce de puzzle avec des feuilles de laurier"><span>WikiBac</span>
             </a>
         </div>
         <h1>Simulateur du Bac Français International</h1>
diff --git a/index.html b/index.html
index 5a3955b..46cffad 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link href="/res/style.css" rel="stylesheet" type="text/css">
+    <link href="res/style.css" rel="stylesheet" type="text/css">
     <title>Simulateurs des Bacs</title>
     <meta name="description" content="Calculez votre mention au Bac en fonction de vos notes, ou déterminez le nombre de points qu'il vous manque pour en obtenir une en utilisant le simulateur du bac de WikiBac.">
     <meta name="og:title" property="Simulateurs du bac">
@@ -16,15 +16,23 @@
 
 <div id="logo">
     <a href="https://www.wikibac.fr">
-        <img src="/res/logo.png" alt="Logo de Wikibac : une pièce de puzzle avec des feuilles de laurier"><span>WikiBac</span>
+        <img src="res/logo.png" alt="Logo de Wikibac : une pièce de puzzle avec des feuilles de laurier"><span>WikiBac</span>
     </a>
 </div>
 <h1>Simulateurs des Bacs</h1>
 
-<ul>
-    <li><a href="/BCG/">Simuler le Bac Général</a></li>
-    <li><a href="/BFI/">Simuler le Bac Français International</a></li>
-</ul>
+<p class="invite">Sélectionner la voie&nbsp;:</p>
+
+<div class="choix-appli-wrapper">
+    <a href="BCG/"><div>
+        <span>BCG</span>
+        <p>Baccalauréat général</p>
+    </div></a>
+    <a href="BFI/"><div>
+        <span>BFI</span>
+        <p>Baccalauréat français international</p>
+    </div></a>
+</div>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/res/style.css b/res/style.css
index e9ad8d9..1922dc3 100755
--- a/res/style.css
+++ b/res/style.css
@@ -44,6 +44,24 @@ header {
     font-size: 2em;
 }
 
+.invite {
+    margin: 50px 0;
+    text-align: center;
+}
+
+.choix-appli-wrapper {
+    margin: 20px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.choix-appli-wrapper a:link, .choix-appli-wrapper a:visited {
+    text-decoration: none;
+    color: black;
+}
+
 main {
     width: clamp(400px, 70%, 1200px);
     margin: 30px auto;
@@ -60,18 +78,30 @@ main {
     gap: 15px;
 }
 
-.resultat div {
+.resultat div, .choix-appli-wrapper div {
     padding: 15px;
     border: 1px solid #ddd;
     text-align: center;
     max-width: 500px;
 }
 
-.resultat div span {
+.choix-appli-wrapper div {
+    transition: background-color 200ms;
+}
+
+.choix-appli-wrapper div:hover {
+    background-color: #fafafa;
+}
+
+.choix-appli-wrapper div:active {
+    background-color: #eeeeee;
+}
+
+.resultat div span, .choix-appli-wrapper span {
     font-size: 2em;
 }
 
-.resultat div p {
+.resultat div p, .choix-appli-wrapper p {
     margin-top: 15px;
 }
 
@@ -84,13 +114,13 @@ main {
         width: 100vw;
     }
 
-    .resultat {
+    .resultat, .choix-appli-wrapper {
         position: static;
         flex-direction: column;
         align-items: center;
     }
 
-    .resultat div {
+    .resultat div, .choix-appli-wrapper a {
         width: clamp(300px, 60%, 700px);
     }
 
