✨ Début migration vers bootstrap 5.3 + refacto js

.gitea/workflows/roulette.yml

@@ -1,5 +1,8 @@
 name: roulette
-on: [push]
+on:
+  push:
+    branches:
+      - master
 
 jobs:
   deploy:

css/bootstrap.min.css

@@ -77,7 +77,7 @@
     --bs-body-font-size: 1rem;
     --bs-body-font-weight: 400;
     --bs-body-line-height: 1.5;
-    --bs-body-color: #212529;
+    --bs-body-color: #212529;.
     --bs-body-color-rgb: 33, 37, 41;
     --bs-body-bg: #c7bcad;
     --bs-body-bg-rgb: 199, 188, 173;
@@ -4668,7 +4668,7 @@ textarea.form-control-lg {
     --bs-navbar-color: rgba(230, 217, 200, 1);
     --bs-navbar-hover-color: rgba(192, 181, 167, 1);
     --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
-    --bs-navbar-active-color: rgba(230, 217, 200, 1);
+    --bs-navbar-active-color: rgba(192, 181, 167, 1);
     --bs-navbar-brand-color: rgba(230, 217, 200, 1);
     --bs-navbar-brand-hover-color: rgba(192, 181, 167);
     --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);

css/style.css

@@ -1,12 +1,8 @@
 body{
 	font-family: 'Roboto', sans-serif;
-}
 
-.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper,.ui-page, .ui-content {
-	background: #c7bcad !important;
 }
 
-
 a {
 	color: #045;
 }
@@ -39,8 +35,8 @@ div#slider {
 }
 
 @keyframes slidy {
-  0% { left: 0; }
+  0% { left: 0%; }
-  20% { left: 0; }
+  20% { left: 0%; }
   25% { left: -100%; }
   45% { left: -100%; }
   50% { left: -200%; }

faq.html

@@ -31,7 +31,7 @@
                     <a class="nav-link" href="infos.html">Informations</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" target="_blank">Contribuer &#8599;</a>
+                    <a class="nav-link" href="https://git.crystalyx.net/camelia-studio/Roulette-a-donjons" target="_blank">Contribuer &#8599;</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="soutenir.html">Soutenir</a>
@@ -81,7 +81,7 @@
     </ul>
     <p>Oui ! Nous avons fait le choix de ne pas intégrer les donjons qui ne sont pas accessible tout au long de l'année
         à notre base de données (par exemple ; les donjons de Nowel ou de Vulkania).</p>
-    <center><img src="img/eca.png"></center>
+    <div><img src="img/eca.png" alt="Logo écaflip"></div>
     <p>Ton problème n'est toujours pas résolu ? Viens nous voir <a href="https://discord.gg/nBuZ9vJ" target="_blank">sur
         Discord</a> ou ouvrir un ticket <a href="https://git.crystalyx.net/camelia-studio/Roulette-a-donjons/issues"
                                            target="_blank">sur Gitea</a> (pense à bien vérifier qu'un sujet similaire ne

index.html

@@ -29,7 +29,7 @@
           <a class="nav-link" href="infos.html">Informations</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#" target="_blank">Contribuer &#8599;</a>
+          <a class="nav-link" href="https://git.crystalyx.net/camelia-studio/Roulette-a-donjons" target="_blank">Contribuer &#8599;</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="soutenir.html">Soutenir</a>
@@ -48,11 +48,10 @@
       <section class="jumbotron text-center">
         <div class="container">
           <h1 class="jumbotron-heading">Roulette à donjons</h1>
-          <p><img  width="300px" alt="des" src="logo_écaflip.png"></p>
+          <p><img alt="Logo Ecaflip" style="max-width: 300px;" src="logo_écaflip.png"></p>
           <h2 class="lead text-muted">Ce site vous permet de consulter Écaflip, afin de savoir quel donjon aller faire avec votre guilde !</h2>
-
       			<p>
-      				<a href="roulette.html" target="_blank"><button id="quoteButton" class="btn btn-light">Tourner la roulette</button></a>
+      				<a href="roulette.html" target="_blank"><button class="btn btn-light" id="quoteButton">Tourner la roulette</button></a>
             </p>
       		<p>Cet outil a été réalisé pour <a href="https://www.dofus.com/fr/forum/1599-guildes/2246631-guilde-compagnie-sufokia-10-ans" target="_blank">La Compagnie de Sufokia</a> (guilde sur le serveur Orukam). Vous pouvez retrouver plus de renseignements sur <a href="./infos.html">la page infos</a>.</p>
           <p>Sauf mention contraire, toutes les illustrations présentes sur ce site sont la propriété d'<img src="img/logo_ankama.png" alt="Logo Ankama"> <b>Ankama Games ©</b>, tous droits réservés.</p>

infos.html

@@ -11,7 +11,6 @@
     <link rel="icon" href="favicon.ico"/>
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="quote.css">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
 </head>
 
@@ -31,7 +30,7 @@
                     <a class="nav-link active" href="infos.html">Informations</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" target="_blank">Contribuer &#8599;</a>
+                    <a class="nav-link" href="https://git.crystalyx.net/camelia-studio/Roulette-a-donjons" target="_blank">Contribuer &#8599;</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="soutenir.html">Soutenir</a>
@@ -68,13 +67,13 @@
     <h2>Remerciements</h2>
     <p>
         <a href="http://camelia-studio.org" target="_blank">
-            <img src="img/logo_camelia.png">
+            <img src="img/logo_camelia.png" alt="Logo Camelia Studio">
         </a>
         <a href="http://cila.camelia-studio.org" target="_blank">
-            <img src="img/logo_cila.png">
+            <img src="img/logo_cila.png" alt="Logo CILA">
         </a>
         <a href="http://zaap.camelia-studio.org" target="_blank">
-            <img src="img/logo_zaap.png">
+            <img src="img/logo_zaap.png" alt="Logo Alt+Tab">
         </a>
     </p>
 

roulette.html

@@ -12,13 +12,14 @@
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
     <script src="js/bootstrap.min.js"></script>
+
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 
 <body>
-    <div class="container">
+<div class="container">
     <br/>
     <h1>Vous ne savez pas quel donjon faire en guilde ?</h1>
     <h2>Laissez Écaflip vous guider dans votre choix.</h2>
@@ -26,6 +27,7 @@
     <p><i>* Merci de choisir une fourchette de 10 niveaux minimum</i></p>
     <div class="row">
         <form method="post">
+            <!-- TODO: Refaire les sliders -->
             <div data-role="rangeslider">
                 <input type="range" name="min" id="min" value="1" min="1" max="189">
                 <input type="range" name="max" id="max" value="200" min="11" max="200">
@@ -41,14 +43,16 @@
             <p></p>
             <p id="quoteGenius"></p>
         </div>
+        <!--fin de quoteContainer-->
     </div>
     <div>
         <div id="buttonContainer">
 
         </div>
+        <!--fin de buttonContainer-->
     </div>
 
-    </div>
+</div>
 <script src="js/liste.js"></script>
 </body>
 </html>

soutenir.html

@@ -31,7 +31,7 @@
                     <a class="nav-link" href="infos.html">Informations</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" target="_blank">Contribuer &#8599;</a>
+                    <a class="nav-link" href="https://git.crystalyx.net/camelia-studio/Roulette-a-donjons" target="_blank">Contribuer &#8599;</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link active" href="soutenir.html">Soutenir</a>
@@ -55,7 +55,7 @@
                 href="https://paypal.me/camelia" target="_blank">Paypal</a>. Cela lui fera chaud au cœur. N'oubliez pas
         que l'association ne vend rien et ne met aucune publicité sur aucun de ses sites ou services. Elle vie
         uniquement grâce aux dons.</p>
-    <center><img src="img/lingot.png"></center>
+    <div><img alt="lingot" src="img/lingot.png"></div>
     <p>Merci à toutes & tous pour votre bienveillance et votre générosité.</p>
 </div>
 </body>