DjalimSimaila/SAE-A2-TruthInquiry
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Client] Improve homepage code

Browse Source
This commit is contained in:
AudricV 2023-03-27 16:01:56 +02:00
parent 5966483e85
commit c6687748a2
No known key found for this signature in database
GPG Key ID: DA92EC7905614198
2 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
truthinquiry/static/css/game_ui_start.css
View File

@ -1,13 +1,18 @@
/* Common properties */
:root {
--game-begin-margin: 2em;
--header-actions-height: 3em;
--header-actions-side: 4em;
}
input, .action_button, .game_mode_item_title {
font-family: "Titan One", sans-serif;
}
.back_button, .theme_switcher_btn {
height: var(--header-actions-side);
width: var(--header-actions-side);
}
.game_begin, .game_mode_item, .game_mode_item_input_text_single_line, .game_mode_items, .game_mode_selection {
align-items: center;
display: flex;
@ -61,7 +66,7 @@ input::placeholder {
*/
height: calc(100vh - var(--body-margin) * 2
- var(--game-begin-margin) * 2
- var(--header-actions-height)
- var(--header-actions-side)
- var(--footer-links-height));
justify-content: center;
margin: var(--game-begin-margin);
@ -80,10 +85,16 @@ input::placeholder {
margin: 0;
}
.header_action {
list-style-type: none;
}
.header_actions {
display: flex;
height: var(--header-actions-height);
height: var(--header-actions-side);
justify-content: flex-end;
margin: 0;
padding: 0;
}
.action_button {

20
truthinquiry/templates/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Truth Inquiry</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_start.css">
@ -13,26 +14,27 @@
<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="alert_dialog_background"></div>
<div class="game_start">
<div class="header_actions">
<section class="game_start">
<menu class="header_actions">
<li class="header_action">
<button class="theme_switcher" aria-label="Changer de thème">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M24 34q-4.15 0-7.075-2.925T14 24q0-4.15 2.925-7.075T24 14q4.15 0 7.075 2.925T34 24q0 4.15-2.925 7.075T24 34ZM2 25.5v-3h8v3Zm36 0v-3h8v3ZM22.5 10V2h3v8Zm0 36v-8h3v8Zm-9.45-30.85L8.1 10.2l2.1-2.1 4.95 4.95ZM37.8 39.9l-4.95-4.95 2.1-2.1 4.95 4.95Zm-2.85-24.75-2.1-2.1L37.8 8.1l2.1 2.1ZM10.2 39.9l-2.1-2.1 4.95-4.95 2.1 2.1Z"/>
</svg>
</button>
</div>
</li>
</menu>
<div class="game_begin">
<h1 class="game_title">Truth Inquiry</h1>
<button class="action_button" id="play_button">Jouer</button>
</div>
</div>
<div class="game_mode_selection hidden">
</section>
<section class="game_mode_selection hidden">
<button id="back_button" aria-label="Retourner à la page précédente">
<svg class="back_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48">
<svg class="back_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>
@ -56,7 +58,7 @@
</div>
</div>
</div>
</div>
</section>
<div class="unsupported_browser">
<div id="unsupported_browser_dialog" class="alert_dialog">
<h3 class="alert_dialog_title">Navigateur non supporté</h3>