Add backgrounds and interrogration views

truthseeker/static/css/game_ui_game.css

@@ -74,6 +74,13 @@ html {
     font-family: "Spicy Rice", serif;
     font-size: 5em;
     font-weight: bold;
+}
+
+.introduction_title {
+    color: #BD1E1E;
+    font-family: "Spicy Rice", serif;
+    font-weight: bold;
+    font-size: 5em;
     margin: 0;
     text-align: left;
 }
@@ -98,6 +105,7 @@ html {
     color: var(--button-color);
     font-family: "Spicy Rice", sans-serif;
     font-size: 3em;
+    font-weight: bold;
     margin: 1em;
     text-transform: uppercase;
 }
@@ -187,3 +195,52 @@ html {
     font-family: "Spicy Rice", sans-serif;
     color: var(--button-color);
 }
+
+.question_button {
+    text-transform: none;
+    border-radius: 2em;
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-right: 1em;
+    background-color: rgb(90, 86, 86);
+}
+
+.questions_list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin-right: 2em;
+    margin-top: 3em;
+}
+
+.questions_answer {
+    position: absolute;
+    bottom: 10%;
+    right: 60%;
+    /* Aligner le texte pour la version mobile */
+    transform: translateX(-50%);
+}
+
+#next_button {
+    background-color: transparent;
+    border: transparent;
+    bottom: 0;
+    position: absolute;
+    right: 50;
+}
+
+.results_title {
+    color: #BD1E1E;
+    font-family: "Spicy Rice", serif;
+    font-weight: bold;
+    font-size: 4.5em;
+    margin: 0;
+    text-align: left;
+}
+
+.reveal_killer_title {
+    color: white;
+    font-family: "Spicy Rice", serif;
+    font-weight: bold;
+    font-size: 3em;
+}

truthseeker/templates/game.html

@@ -34,7 +34,7 @@
                 </div>
             </div>
         </div>
-        <div class="emotion_and_culprit_choices">
+        <div class="emotion_and_culprit_choices hidden">
             <h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
             <button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
@@ -63,6 +63,29 @@
                 </div>
             </div>
         </div>
+        <div class="interrogation_suspect hidden">
+            <h1 class="interrogation_title">Poser une question au suspect</h1>
+            <div class="questions_list">
+                <button class="action_button question_button">Où étiez vous hier soir&nbsp;?</button>
+                <button class="action_button question_button">Avec qui étiez vous&nbsp;?</button>
+                <button id="next_button" aria-label="Retourner à la selection du suspect">
+                <svg class="next_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
+                    <path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z"/>
+                </svg>
+            </div>
+            <div class="question_answer">
+                <h1 class="anwser_title">Réponse du suspect à la question</h1>
+                <p class="suspect_answer"></p>
+            </div>
+        </div>
+        <div class="final_choice hidden">
+            <h1 class="interrogation_title">Quelles sont vos déductions&nbsp;?</h1>
+        </div>
+        <div class="results_game hidden">
+            <h1 class="results_title">Résultats</h1>
+            <h2 class="reveal_killer_title">Le tueur était&nbsp;...</h2>
+            </div>
+        </div> 
         <div class="alert_dialog_background"></div>
         <div class="unsupported_browser">
             <div id="unsupported_browser_dialog" class="alert_dialog">