le ccs jolie et correction du html pour conformité au norme.

web/css/game.css

@@ -1,4 +1,22 @@
-section#navbar li.current:last-child #score {
+@keyframes timebar
+{
+	0%{width: 100%;background-color: #57cc6b;}
+	30%{background-color: #57cc6b;}
+	40%{background-color: #e3a55c;}
+	60%{background-color: #e3a55c;}
+	70%{background-color: #cc5757;}
+	100%{width: 0;background-color: #cc5757;}
+}
+
+div
+{
+	height: 20px;
+	display: block;
+	margin: auto;
+	animation: timebar 5s infinite linear;
+}
+
+#navbar li.current:last-child #score {
   display:inline;
   padding-top:17px;
   padding-left:30px;
@@ -7,7 +25,7 @@ section#navbar li.current:last-child #score {
   background: #ffab19;
 }
 
-section#game input[type="submit"]#play {
+#game input[type="submit"]#play {
   border:none;
   background-color:#09b22b;
   color:white;
@@ -16,7 +34,7 @@ section#game input[type="submit"]#play {
   cursor:pointer;
 }
 
-section#game {
+#game {
   text-align:center;
 }
 

web/css/main.css

@@ -19,7 +19,7 @@ a:active{
   background:transparent
 }
 
-section#navbar a:hover {
+#navbar a:hover {
   text-decoration:none;
 }
 
@@ -33,7 +33,7 @@ header {
   padding-bottom: 10px;
 }
 
-section#responsive-navbar {
+#responsive-navbar {
   display: none;
   margin-top:0px;
   color: white;
@@ -41,7 +41,7 @@ section#responsive-navbar {
   font-size: 25px;
 }
 
-section#responsive-navbar ul {
+#responsive-navbar ul {
   margin-top:0px;
   list-style-type:none;
   padding-left:0px;
@@ -49,7 +49,7 @@ section#responsive-navbar ul {
   margin-bottom:0px;
 }
 
-section#responsive-navbar ul li {
+#responsive-navbar ul li {
   height: 2em;
   line-height: 2em;
   vertical-align: middle;
@@ -57,28 +57,28 @@ section#responsive-navbar ul li {
   width:100%;
 }
 
-section#responsive-navbar ul li a {
+#responsive-navbar ul li a {
   display:block;
   width:100%;
 }
 
-section#responsive-navbar ul li:last-child {
+#responsive-navbar ul li:last-child {
   background: #ff9619;
 }
 
-section#responsive-navbar ul li:last-child.current {
+#responsive-navbar ul li:last-child.current {
   background: #ffab19;
 }
 
-section#responsive-navbar ul li:last-child:hover {
+#responsive-navbar ul li:last-child:hover {
   background: #ffab19;
 }
 
-section#responsive-navbar ul li:hover, section#responsive-navbar ul li.current {
+#responsive-navbar ul li:hover, #responsive-navbar ul li.current {
   background: #9556f9;
 }
 
-section#responsive-navbar ul li:first-child, section#responsive-navbar ul li:first-child:hover, section#responsive-navbar ul li:first-child:active {
+#responsive-navbar ul li:first-child, #responsive-navbar ul li:first-child:hover, #responsive-navbar ul li:first-child:active {
   background-color: #7e19ff;
   background-image: url('../assets/burger-menu.png');
   background-size: 25px;
@@ -86,24 +86,24 @@ section#responsive-navbar ul li:first-child, section#responsive-navbar ul li:fir
   background-position: 10px, 50%;
 }
 
-section#navbar {
+#navbar {
   color: white;
   background-color: #7e19ff;
   height: 70px;
   font-size: 25px;
 }
 
-section#navbar ul {
+#navbar ul {
   padding-top: 35px;
   display: inline;
   vertical-align: middle;
 }
 
-section#navbar li:first-child a {
+#navbar li:first-child a {
   margin-left:20px;
 }
 
-section#navbar a {
+#navbar a {
   padding-top:17px;
   padding-left:30px;
   padding-right:30px;
@@ -111,35 +111,35 @@ section#navbar a {
   margin-right: 10px;
 }
 
-section#navbar li {
+#navbar li {
   display: block;
   float:left;
   padding-top:17px;
   height: 53px;
 }
 
-section#navbar li:hover a, section#navbar li.current a {
+#navbar li:hover a, #navbar li.current a {
   background: #9556f9;
 }
 
-section#navbar li:last-child a {
+#navbar li:last-child a {
   margin-right:0px;
   padding-right:70px;
   padding-left:70px;
 }
 
-section#navbar li:last-child {
+#navbar li:last-child {
   display: block;
   float: right;
   text-align:right;
   background: #ff9619;
 }
 
-section#navbar li:last-child:hover a, section#navbar li.current:last-child a {
+#navbar li:last-child:hover a, #navbar li.current:last-child a {
   background: #ffab19;
 }
 
-section#page {
+#page {
   width: 60%;
   margin: auto;
 }
@@ -154,10 +154,20 @@ h2 {
   font-size: 200%;
 }
 
-section#page p {
+#page p {
   text-indent: 30px;
 }
 
+#button_container
+{
+	text-align: center;
+}
+
+.button
+{
+	display: inline-block;
+}
+
 .button a {
   display:block;
   background: #09b22b;
@@ -180,7 +190,7 @@ article#jouer {
   margin:auto;
 }
 
-section#page ol {
+#page ol {
   text-align:center;
   font-size: 120%;
 }
@@ -189,19 +199,19 @@ section#page ol {
   header {
     background-size: 68%;
   }
-  section#responsive-navbar {
+  #responsive-navbar {
     display: block;
   }
-  section#navbar {
+  #navbar {
     display: none;
   }
 }
 
 @media all and (min-width: 800px) {
-  section#responsive-navbar {
+  #responsive-navbar {
     display: none;
   }
-  section#navbar {
+  #navbar {
     display: block;
   }
 }

web/index.htm

@@ -4,23 +4,23 @@
     <meta charset="utf-8">
     <title>Burger Quizz - Accueil</title>
     <link rel="stylesheet" href="css/main.css">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
-    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
-    <section id="navbar">
+    <div id="navbar">
       <ul>
         <li class="current"><a href="index.htm">Accueil</a></li>
         <li><a href="rules.htm">Règles</a></li>
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="responsive-navbar">
+    </div>
+    <div id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
         <li class="current"><a href="index.htm">Accueil</a></li>
@@ -28,8 +28,8 @@
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="page">
+    </div>
+    <div id="page">
       <article>
         <h2>Accueil</h2>
         <p>Créé dans le cadre du projet de fin d'année de la promo 2018 de CIR2 de l'ISEN Brest/Rennes, le Burger Quizz est une adaptation numérique du jeu télévisé éponyme, plus précisément d'une épreuve spécifique de ce jeu : le "Sel ou Poivre".</p>
@@ -37,23 +37,25 @@
       </article>
       <article id="jouer">
         <h2>Jouer</h2>
-        <div class="button">
-          <a href="solo.htm">
-            <div class="firstword">
-              Solo
-            </div>
-            1 joueur
-          </a>
-        </div>
-        <div class="button">
-          <a href="multi.php">
-            <div class="firstword">
-              Multi
-            </div>
-            2 joueurs
-          </a>
-        </div>
+        <div id="button_container">
+			<div class="button">
+			  <a href="solo.htm">
+				<div class="firstword">
+				  Solo
+				</div>
+				1 joueur
+			  </a>
+			</div>
+			<div class="button">
+			  <a href="multi.php">
+				<div class="firstword">
+				  Multi
+				</div>
+				2 joueurs
+			  </a>
+			</div>
+     	</div>
       </article>
-    </section>
+    </div>
   </body>
 </html>

web/palmares.htm

@@ -4,23 +4,23 @@
     <meta charset="utf-8">
     <title>Burger Quizz - Palmares</title>
     <link rel="stylesheet" href="css/main.css">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
-    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
-    <section id="navbar">
+    <div id="navbar">
       <ul>
         <li><a href="index.htm">Accueil</a></li>
         <li><a href="rules.htm">Règles</a></li>
         <li class="current"><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="responsive-navbar">
+    </div>
+    <div id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
         <li><a href="index.htm">Accueil</a></li>
@@ -28,13 +28,13 @@
         <li class="current"><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="page">
+    </div>
+    <div id="page">
       <article>
         <h2>Meilleurs scores</h2>
         <ol></ol>
       </article>
-    </section>
+    </div>
 
     <script type="text/javascript">
       $.get("./api/?page=palmares", function(data) {

web/play.htm

@@ -4,23 +4,23 @@
     <meta charset="utf-8">
     <title>Burger Quizz - Accueil</title>
     <link rel="stylesheet" href="css/main.css">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
-    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
-    <section id="navbar">
+    <div id="navbar">
       <ul>
         <li><a href="index.htm">Accueil</a></li>
         <li><a href="rules.htm">Règles</a></li>
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li class="current"><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="responsive-navbar">
+    </div>
+    <div id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
         <li><a href="index.htm">Accueil</a></li>
@@ -28,27 +28,29 @@
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li class="current"><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="page">
+    </div>
+    <div id="page">
       <article id="jouer">
         <h1>Jouer</h1>
-        <div class="button">
-          <a href="solo.htm">
-            <div class="firstword">
-              Solo
-            </div>
-            1 joueur
-          </a>
-        </div>
-        <div class="button">
-          <a href="multi.php">
-            <div class="firstword">
-              Multi
-            </div>
-            2 joueurs
-          </a>
+        <div id="button_container">
+			<div class="button">
+			  <a href="solo.htm">
+				<div class="firstword">
+				  Solo
+				</div>
+				1 joueur
+			  </a>
+			</div>
+			<div class="button">
+			  <a href="multi.php">
+				<div class="firstword">
+				  Multi
+				</div>
+				2 joueurs
+			  </a>
+			</div>
         </div>
       </article>
-    </section>
+    </div>
   </body>
 </html>

web/rules.htm

@@ -4,23 +4,23 @@
     <meta charset="utf-8">
     <title>Burger Quizz - Règles</title>
     <link rel="stylesheet" href="css/main.css">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
-    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
-    <section id="navbar">
+    <div id="navbar">
       <ul>
         <li><a href="index.htm">Accueil</a></li>
         <li class="current"><a href="rules.htm">Règles</a></li>
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="responsive-navbar">
+    </div>
+    <div id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
         <li><a href="index.htm">Accueil</a></li>
@@ -28,14 +28,14 @@
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="page">
+    </div>
+    <div id="page">
       <article>
         <h2>Règles</h2>
         <p>Skevent dleout danvez biz-yod rumm goz gar tabut bazh mil skrijañ, Menez Du dec'h ehan kreisteiz neud tad eil huanadiñ bed lizherenn. Lies gwinegr c'hoar-gaer. Houlenn Menez Mikael anv koumoul, broust brumenn daoust ha. Ret ki lazhañ dianav gwenn hor beg-douar arabat skubañ ken truez tre kar hon leue droug-mor, chom hennezh hag Bro-saoz. Ma fazi geot kein gwechall, rak mil c'hwezhañ e fri hor kae diwar-benn mousc'hoarzhin mat bloaz plijadur hol kant eost noz dre mae nerzh kaeraat, kenwerzh nec'h hir diriaou c'hoar-gaer, a-benn diwar ar maez derc'hel digor pesketaer dir pri start karrezek. Pegement kontañ giz kluchañ n'eus forzh.</p>
         <p>Hep patatez nav kroc'hen. Hon tre karrez talvoudus. Ruz aozañ e-lec'h mel va Doue mat mall kelenner. Mat eil doñjer chaseour rak koumanant a-hed kloued rev pignat yod bras gwrierez tal prizius, e-mesk kemener c'hoarvezout. Gwerenn saout pleg-mor aet poan dor merc'hed giz sukr mat he gervel poultrenn kontadenn, chaseal ti-hent-houarn aer soudard kêr giz gwelloc'h dreist-holl kig tremen gouelañ rev huchal nemet war aes re tro-c'houzoug he goulenn jod beuziñ siminal. Aotrou ar muiañ spi gourc'hemenn, beuziñ fiziañs rev tamm-ha-tamm, mignonez ni distreiñ, kasoni adaozañ degouezhout. Stlakañ loa anzav da gentañ, per kegin kontadenn gwiskamant me ki a-us da noz e-lec'h mat a-hed seizhvet spi kerkoulz ha ker kann distreiñ eus distreiñ te enebour kein gouelañ, a-wechoù c'hoar-gaer eñ huanadiñ aes gwerenn liv gwer. Merc'hed pevar-ugent niz kempenn aon sell kluchañ kemener he prizius moereb abardaez, ober goap eured Krouer respont skouer Sun tre du laezh merc'her kêr goz regiñ kae neuze, da ken na penn-araok kalonek bod dienn Mor Breizh den ar re gouel.</p>
         <p>Leziregezh diskar park dra Krouer, tal pomper miz bale, kibell ler kennebeut mab kaout tog digor tud plijout Baz taol. Kotoñs mab-bihan ober war-dro. Fuzuilh koulz-amzer ki beajour pe ali reiñ kreskiñ eil kardeur ti fresk, logod kav kar leskiñ keniterv. Gwazh hi gar poull patatez. Giz sachañ tachenn-c'hoari, pegen kêr Nedeleg den dale, anv treuziñ ober e venoz kêr echuiñ klevout enebour. Met doñv gavr ruz ober goap. Eus ezhomm sevel eor butuniñ sul hep dre kelc'h talvoudus. Chase mor gwelloc'h e kezeg, pevarzek bleud homañ kempenn azezañ.</p>
       </article>
-    </section>
+    </div>
   </body>
 </html>

web/solo.htm

@@ -5,25 +5,25 @@
     <title>Burger Quizz - Jeu solo</title>
     <link rel="stylesheet" href="css/game.css">
     <link rel="stylesheet" href="css/main.css">
-    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Lato:100,400,300,700' rel='stylesheet' type='text/css'>
+    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Lato:100,400,300,700" rel="stylesheet" type="text/css">
     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/responsive.js"></script>
     <script src="js/game.js"></script>
-    <meta name=viewport content="width=device-width, initial-scale=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
   </head>
   <body>
     <header>
     </header>
-    <section id="navbar">
+    <div id="navbar">
       <ul>
         <li><a href="index.htm">Accueil</a></li>
         <li><a href="rules.htm">Règles</a></li>
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li class="current"><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="responsive-navbar">
+    </div>
+    <div id="responsive-navbar">
       <ul>
         <li class="name"><a href="#">Menu</a></li>
         <li><a href="index.htm">Accueil</a></li>
@@ -31,11 +31,11 @@
         <li><a href="palmares.htm">Meilleurs scores</a></li>
         <li class="current"><a href="play.htm">Jouer</a></li>
       </ul>
-    </section>
-    <section id="game">
+    </div>
+    <div id="game">
       <h2>Jeu solo</h2>
       <input type="submit" id="play" value="Lancer la partie !" />
-    </section>
+    </div>
 
     <script type="text/javascript">
       $("#play").on("click", play);