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

Merge pull request #12 from ThomasRubini/client_legal-pages-and-main-page-improvements

Browse Source 
[Client] Add legal pages and improve main page
This commit is contained in:
AudricV 2023-01-03 15:01:42 +01:00 committed by GitHub
commit 62ebdedfe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 194 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
truthseeker/routes/routes_ui.py
View File

@ -9,6 +9,18 @@ routes_ui = flask.Blueprint("ui", __name__)
def index():
return flask.render_template("index.html")
@routes_ui.route("/privacy")
def privacy():
return flask.render_template("privacy.html")
@routes_ui.route("/licenses")
def licenses():
return flask.render_template("licenses.html")
@routes_ui.route("/legal")
def legal():
return flask.render_template("legal.html")
@routes_ui.route("/lobby/<game_id>")
def lobby(game_id):
# rendered by the javascript client-side

37
truthseeker/static/css/game_ui.css
View File

@ -1,6 +1,6 @@
/* Custom fonts */
@font-face {
font-family: 'Spicy Rice';
font-family: "Spicy Rice";
font-style: normal;
font-weight: 400;
font-display: swap;
@ -9,13 +9,23 @@
}
@font-face {
font-family: 'Titan One';
font-family: "Titan One";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/titan_one_v13/titan_one_v13.woff2") format('woff2'), url("../fonts/titan_one_v13/titan_one_v13.woff") format('woff'), url("../fonts/titan_one_v13/titan_one_v13.ttf") format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/roboto_mono_v22/roboto_mono_v22.woff2") format('woff2'), url("../fonts/roboto_mono_v22/roboto_mono_v22.woff") format('woff'), url("../fonts/roboto_mono_v22/roboto_mono_v22.ttf") format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Base elements */
:root {
color-scheme: dark;
@ -46,6 +56,15 @@ body {
display: none;
}
/* Links */
.link {
text-decoration: none;
}
.link:visited {
color: unset;
}
/* Footer */
.footer_link {
color: white;
@ -53,11 +72,11 @@ body {
font-size: 1em;
font-weight: bold;
margin: 0.5em;
text-decoration: none;
transition: color 0.25s;
}
.footer_link:visited {
color: unset;
.footer_link:hover {
color: #939393;
}
.footer_links {
@ -122,3 +141,11 @@ body {
width: 100vw;
z-index: 1;
}
.theme_switcher_btn {
transition: fill 0.5s;
}
.theme_switcher_btn:hover {
fill: #939393;
}

45
truthseeker/static/css/game_ui_legal.css Normal file
View File

@ -0,0 +1,45 @@
html {
background-color: black;
}
body {
font-family: "Roboto Mono", "sans-serif";
}
.legal_link {
color: #0096FF;
}
.legal_text_title {
font-family: "Spicy Rice", sans-serif;
font-size: 2.5em;
text-align: center;
margin-block-start: 0;
margin-block-end: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.legal_text_last_update {
font-family: "Titan One", serif;
font-size: 1.5em;
margin-block-start: 0;
margin-block-end: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.legal_text_description {
font-size: 1.25em;
margin-block-start: 0;
margin-block-end: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.legal_text_unordered_list {
font-size: 1em;
/* Disable list item padding */
list-style-position: inside;
padding-inline-start: 0;
}

9
truthseeker/static/css/game_ui_start.css
View File

@ -35,8 +35,6 @@
margin-top: 0.5em;
margin-bottom: 0.5em;
text-align: center;
-webkit-text-stroke: 1px black;
text-shadow: 1px 0 0 red, 0 1px 0 red, -1px 0 0 red, 0 -1px 0 red;
}
.top_button {
@ -69,4 +67,11 @@
padding-left: 1em;
padding-right: 1em;
text-transform: uppercase;
overflow: hidden;
transition: box-shadow 0.5s, transform 0.5s;
}
.action_button:hover {
transform: translate(0.1em, 0.1em);
box-shadow: 10px -10px 25px 0px black, -10px 10px 25px 0px black;
}

BIN
truthseeker/static/fonts/roboto_mono_v22/roboto_mono_v22.ttf Normal file
View File

Binary file not shown.

BIN
truthseeker/static/fonts/roboto_mono_v22/roboto_mono_v22.woff Normal file
View File

Binary file not shown.

BIN
truthseeker/static/fonts/roboto_mono_v22/roboto_mono_v22.woff2 Normal file
View File

Binary file not shown.

16
truthseeker/templates/index.html
View File

@ -2,8 +2,8 @@
<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_start.css">
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_start.css">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
@ -13,13 +13,13 @@
<div class="game_start">
<div class="header_actions">
<button class="top_button theme_switcher" aria-label="Changer de thème">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="48" fill="white">
<svg class="theme_switcher_btn" xmlns="http://www.w3.org/2000/svg" height="48" width="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>
<div class="game_begin">
<h1 class="game_title">Thruth Inquiry</h1>
<h1 class="game_title">Truth Inquiry</h1>
<button class="action_button" id="play_button">Jouer</button>
</div>
</div>
@ -40,11 +40,11 @@
</noscript>
<footer>
<div class="footer_links">
<a href="privacy" class="footer_link" target="_blank" title="Consulter la politique de confidentialité de Thruth Inquiry (ouverture dans un nouvel onglet)">Politique de confidentialité</a>
<a href="licenses" class="footer_link" target="_blank" title="Consulter les licenses des éléments non-originaux de Thruth Inquiry (ouverture dans un nouvel onglet)">Licenses</a>
<a href="legal" class="footer_link" target="_blank" title="Consulter les mentions légales de Thruth Inquiry (ouverture dans un nouvel onglet)">Mentions légales</a>
<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>
</footer>
<script src="static/js/game_common.js"></script>
<script src="/static/js/game_common.js"></script>
</body>
</html>

22
truthseeker/templates/legal.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Truth Inquiry - Mentions légales</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Mentions légales</h1>
<div class="legal_text_block">{{ html_legal_mentions }}</div>
<footer>
<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>
</footer>
</body>
</html>

42
truthseeker/templates/licenses.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Truth Inquiry - Licenses</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Licenses et crédits de Truth Inquiry</h1>
<p class="legal_text_description">Truth Inquiry n'aurait pas pu être réalisé sans ces personnes ou ces entreprises et leur travail, merci à elles&nbsp;! Voici les éléments que nous avons réutilisés&nbsp;:</p>
<ul class="legal_text_unordered_list" id="licenses">
<li class="license_item">
Spicy Rice, police créée par Astigmatic sous license <a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL" title="Voir la license Open Font License dans un nouvel onglet" target="_blank" class="legal_link">Open Font License</a>
</li>
<li class="license_item">
Titan One, police créée par Rodrigo Fuenzalida sous license <a href="https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL" title="Voir la license Open Font License dans un nouvel onglet" target="_blank" class="legal_link">Open Font License</a>
</li>
<li class="license_item">
Roboto Mono, police créée par Christian Robertson sous license <a href="https://www.apache.org/licenses/LICENSE-2.0.html" title="Voir la license Apache 2.0 dans un nouvel onglet" target="_blank" class="legal_link">Apache 2.0</a>
</li>
<li class="license_item">
Material Icons, créés par Google sous license <a href="https://www.apache.org/licenses/LICENSE-2.0.html" title="Voir la license Apache 2.0 dans un nouvel onglet" target="_blank" class="legal_link">Apache 2.0</a>
</li>
<li class="license_item">
Certains icônes d'illustrations peuvent provenir de Icons8, sous license <a href="https://icons8.com/license" title="Voir la license gratuite Icons8 dans un nouvel onglet" target="_blank" class="legal_link">gratuite Icons8</a>
</li>
<li class="license_item">
Flask, framework Python créé par Pallets, sous license <a href="https://github.com/pallets/flask/blob/main/LICENSE.rst" title="Voir la license BSD-3 Clause de Flask dans un nouvel onglet" target="_blank" class="legal_link">BSD-3 Clause</a>
</li>
</ul>
<footer>
<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>
</footer>
</body>
</html>

24
truthseeker/templates/privacy.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Truth Inquiry - Politique de confidentialité</title>
<link rel="stylesheet" href="/static/css/game_ui.css">
<link rel="stylesheet" href="/static/css/game_ui_legal.css">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1 class="legal_text_title">Politique de confidentialité de Truth Inquiry</h1>
<p class="legal_text_last_update">Dernière mise à jour&nbsp;: {{ privacy_policy_last_updated_date }}</p>
<p class="legal_text_description">Merci d'utiliser Truth Inquiry&nbsp;! Cette politique de confidentialité décrit quelles données nous collectons, à quelles fins et comment exercer vos droits dessus.</p>
<div class="legal_text_block" id="policy">{{ html_privacy_policy }}</div>
<footer>
<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>
</footer>
</body>
</html>