Mise à jour affichage

quiz_atomes/templates/quiz_atomes/home.html

@@ -8,10 +8,13 @@
     </div>
   </nav>
   <div class="d-flex align-items-center">
-      <div class="py-3 d-flex flex-column align-items-center">
-      	      <p class="display-4 w-50"><b>LE QUIZ DES ATOMES</b>&nbsp;<i class="fa fa-vial"></i></p>
-      	      <p class="w-50">Ta mission pour ce jeu ?<br/>
-      	      Connaître les symboles chimiques des atomes qui constituent l'univers. Chaque bonne réponse te rapporte 20 points. Une mauvaise t'en enlève 10 et une absence de réponse t'en enlève 5. Attention au temps ! Chaque seconde passée sur la partie t'enlèvera un point au moment de calculer ton score.<br/>Pour t'entraîner, aide toi de <a href="{% static 'quiz_atomes/tableau_periodique-couleur.png' %}">ce tableau</a>.<br/>Bon courage !</p>
+      <div class="py-2 d-flex flex-column align-items-center">
+      	      <p class="display-4 w-75 text-center"><b>LE QUIZ DES ATOMES</b>&nbsp;<i class="fa fa-vial"></i></p>
+      	      <p class="w-75">Ta mission pour ce jeu ?</p>
+      	      <p class="w-75">Connaître les symboles chimiques des atomes qui constituent l'univers. Chaque bonne réponse te rapporte 20 points. Une mauvaise t'en enlève 10 et une absence de réponse t'en enlève 5.</p>
+      	      <p class="w-75">Attention au temps ! Chaque seconde passée sur la partie t'enlèvera un point au moment de calculer ton score.</p>
+      	      <p class="w-75">Pour t'entraîner, aide toi de <a href="{% static 'quiz_atomes/tableau_periodique-couleur.png' %}">ce tableau&nbsp;<i class="fa-solid fa-file-image fa-sm"></i></a>.</p>
+      	      <p class="w-75">Bon courage !</p>
 	      <div class="d-inline">
 		      <a href="{% url "quiz_atomes" %}">
 			<input type="button" value="JOUER" href=>

quiz_atomes/templates/quiz_atomes/resultats.html

@@ -8,8 +8,21 @@
   </nav>
   <div id="scoring" class="d-flex justify-content-center align-items-center">
       <div class="py-2 d-flex flex-column align-items-center">
-        <h4 id="points"><b>POINTS : {{points}}</b>&nbsp;<i id="correc" class="fa-solid fa-angles-down fa-xs"></i></i></h4>
-        <div id="correc_div" class="d-none">
+      	<h1 id="score"><b>SCORE : {{score}}</b></h1>{% if best_score %}
+        <h4><i class="fa-solid fa-star"></i><b>&nbsp;Nouveau&nbsp;<i class="fa-solid fa-star"></i><br/>meilleur score !</b>&nbsp;</h4>{% else %}
+        <h4><b>Essaie encore !</b></h4>
+        {% endif %}
+        <h4 id="dt"><b>TEMPS  : {{dt}}</b></h4>
+        <h4 id="points"><b>POINTS : {{points}}</b></h4>
+        <div class="d-inline py-2">
+        	<a href="{% url "scores" %}">
+        		<input type="button" value="Scores">
+        	</a>
+        	<a href="{% url "quiz_atomes" %}">
+        		<input type="button" value="Rejouer">
+        	</a>
+        </div>
+        <div class="d-flex">
 		<table class="table table-striped w-auto table-responsive-lg">
 		  <thead>
 		    <tr>
@@ -27,24 +40,5 @@
 		  </tbody>
 		</table>
 	</div>
-        <h4 id="dt"><b>TEMPS  : {{dt}}</b></h4>
-        <h1 id="score"><b>SCORE : {{score}}</b></h1>{% if best_score %}
-        <h4><i class="fa-solid fa-star"></i><b>&nbsp;Nouveau&nbsp;<i class="fa-solid fa-star"></i><br/>meilleur score !</b>&nbsp;</h4>{% else %}
-        <h4><b>Essaie encore !</b></h4>
-        {% endif %}
-        <div class="d-inline">
-        	<a href="{% url "scores" %}">
-        		<input type="button" value="Scores">
-        	</a>
-        	<a href="{% url "quiz_atomes" %}">
-        		<input type="button" value="Rejouer">
-        	</a>
-        </div>
       </div>
-  </div>{% endblock %}{% block 'extra_scripts' %}
-  <script>
-	$( "#correc" ).click(function() {
-	  $( "#correc_div" ).toggleClass(["d-flex","d-none"]);
-	});
-  </script>
-{% endblock %}
+  </div>{% endblock %}

quiz_atomes/templates/quiz_atomes/scores.html

@@ -6,8 +6,8 @@
       </a> 
     </div>
   </nav>
-  <div class="d-flex flex-column justify-content-center align-items-center">
-	<h3><b>Tableau des meilleurs scores</b></h3>
+  <div class="py-2 d-flex flex-column justify-content-center align-items-center">
+	<h3 class="text-center"><b>Tableau des meilleurs scores</b></h3>
 	<table class="table table-striped w-auto table-responsive-lg">
 	  <thead>
 	    <tr>

quiz_atomes/templates/quiz_atomes/settings.html

@@ -5,8 +5,8 @@
       </a>
     </div>
   </nav>
-  <div class="d-flex flex-column justify-content-center align-items-center">
-	<h3><b>Paramètres du quiz</b></h3>
+  <div class="py-2 d-flex flex-column justify-content-center align-items-center">
+	<h3 class="text-center"><b>Paramètres du quiz</b></h3>
 	<form action="{% url "settings" %}" method="POST" name="settings">{% csrf_token %}
 	<table class="table w-auto table-responsive-lg">
 		<tr>