SAE-A2-TruthInquiry/truthinquiry/templates/game.html
AudricV e83591c9ef
[Client] Add button to go back to the home page on game results view
This button has been placed at the top right of the page.

Also merge some common properties into a single one.
2023-03-20 13:43:46 +01:00

131 lines
8.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Truth Inquiry</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_game.css">
<link rel="icon" href="/static/images/favicon/favicon_32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/static/images/favicon/favicon_64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/static/images/favicon/favicon_96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/static/images/favicon/favicon_128.png" type="image/png" sizes="128x128">
<link rel="icon" href="/static/images/favicon/favicon_192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="256x256">
<link rel="icon" href="/static/images/favicon/favicon_256.png" type="image/png" sizes="512x512">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="game_app">
<div class="current_background"></div>
<div class="introduction hidden">
<h1 class="introduction_title">Truth Inquiry</h1>
<p class="introduction_text">Bienvenue dans Truth Inquiry, vous allez intégrer la peau dun enquêteur.<br><br>Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable dun vol.<br><br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
<button id="introduction_next_btn" class="next_btn" aria-label="Commencer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 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>
</button>
</div>
<div class="interrogation hidden">
<h1 class="interrogation_title">Suspects</h1>
<button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 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>
</button>
<div class="suspects" id="interrogation_suspects">
</div>
</div>
<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">
<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>
</button>
<div class="suspects" id="culprits_choices">
</div>
</div>
<div class="interrogation_suspect hidden">
<h1 class="interrogation_title">Poser une question au suspect</h1>
<div class="questions_and_image">
<button id="interrogation_suspect_previous_btn" class="next_btn" aria-label="Revenir à la sélection du suspect">
<svg class="next_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 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>
</button>
<img class="image_interrogation suspect_picture" id="currentNpcPicure" src="">
<div class="questions_list">
<button class="action_button question_button" id="QA_0" >Où étiez vous hier soir&nbsp;?</button>
<button class="action_button question_button" id="QA_1" >Avec qui étiez vous&nbsp;?</button>
</div>
</div>
<div class="question_answer hidden">
<h1 class="anwser_title">Réponse du suspect à la question</h1>
<p class="suspect_answer"></p>
</div>
</div>
<div class="results_game hidden">
<h1 class="results_title">Résultats</h1>
<a href="/" title="Cliquez ici pour revenir à la page d'accueil du jeu">
<button id="return_to_home_btn" class="home_button" aria-label="Revenir à la page d'accueil du jeu">
<svg class="home_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M6.9 43.1V17.4L24 4.55 41.15 17.4v25.7h-12.9V27.7h-8.5v15.4Z"/>
</svg>
</button>
</a>
<div class="reveal_and_scores">
<div class="scores">
<div class="player_score">
<h1 class="score_title">Votre score est de&nbsp;:</h1>
<h2 class="reveal_score">4/5</h2>
</div>
<div class="results_game_multiplayer">
<div class="players_list">
</div>
</div>
</div>
<div class="reveal_culprit">
<h2 class="reveal_culprit_title">Le coupable était ...</h2>
<img class="suspect_picture" id="culprit" draggable="false">
</div>
</div>
<div class="summary">
<h1 class="summary_title">Débrief</h1>
<div class="suspects_list">
</div>
</div>
</div>
<div class="alert_dialog_background"></div>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
<p class="alert_dialog_msg unsupported_browser_msg"></p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
<noscript>
<div class="alert_dialog_background" style="display: block;"></div>
<div class="js_requirement">
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
<div class="footer_links">
<a href="/privacy" class="footer_link link" target="_blank" title="Consulter la politique de confidentialité de Truth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="/licenses" class="footer_link link" target="_blank" title="Consulter les licenses des éléments non-originaux de Truth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="/legal" class="footer_link link" target="_blank" title="Consulter les mentions légales de Truth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
</div>
</div>
</div>
</noscript>
<script src="/static/js/socket.io_v4.4.1/socket.io.min.js"></script>
<script src="/static/js/api.js"></script>
<script src="/static/js/game_common.js"></script>
<script src="/static/js/game.js"></script>
</body>
</html>