From 0703c969fc9a3b5f3a0f6937b3b550e0f14c393c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ond=C5=99ej=20Mekina?= Date: Tue, 6 May 2025 23:35:13 +0200 Subject: [PATCH] improve readability and add logos --- assets/fm_logo.svg | 21 ++++++++++++++++++++- assets/tul_logo.svg | 1 + assets/zmp_logo.svg | 1 + client/make.mk | 2 +- client/presentationmgr.ts | 7 +++++-- client/settings.ts | 2 ++ client/style.scss | 35 +++++++++++++++++++++++++++++------ 7 files changed, 59 insertions(+), 10 deletions(-) create mode 100644 assets/tul_logo.svg create mode 100644 assets/zmp_logo.svg diff --git a/assets/fm_logo.svg b/assets/fm_logo.svg index c1cc3b1..c083ecf 100644 --- a/assets/fm_logo.svg +++ b/assets/fm_logo.svg @@ -1 +1,20 @@ - + + + + + diff --git a/assets/tul_logo.svg b/assets/tul_logo.svg new file mode 100644 index 0000000..2dc3a9e --- /dev/null +++ b/assets/tul_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/zmp_logo.svg b/assets/zmp_logo.svg new file mode 100644 index 0000000..297e394 --- /dev/null +++ b/assets/zmp_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/make.mk b/client/make.mk index 6f5213b..c4156a4 100644 --- a/client/make.mk +++ b/client/make.mk @@ -1,7 +1,7 @@ CLIENT_PAGES := index.html CLIENT_STYLES := style.css CLIENT_SCRIPTS := script.js -CLIENT_ASSETS := fm_logo.svg qr_ask.svg +CLIENT_ASSETS := fm_logo.svg zmp_logo.svg tul_logo.svg qr_ask.svg CLIENT_TARGETS := $(CLIENT_PAGES:%=static/%) \ $(CLIENT_STYLES:%=static/%) \ $(CLIENT_SCRIPTS:%=static/%) \ diff --git a/client/presentationmgr.ts b/client/presentationmgr.ts index c905832..7e37008 100644 --- a/client/presentationmgr.ts +++ b/client/presentationmgr.ts @@ -87,6 +87,9 @@ class MainScreen implements PresentationScreen { el.div([subs_en.dom], ["lang"]), el.div([subs_cz.dom], ["lang"]), ], ["subtitles"]), + el.div([ + el.p("Jedná se o automaticky generovaný přepis. Omluvte, prosíme, případné chyby.", ["disclaimer"]), + ]), ], ["main"]); } @@ -223,7 +226,7 @@ class IdleScreen implements PresentationScreen { private dom_root: HTMLDivElement; private dom_title: HTMLHeadingElement; private dom_subtitle: HTMLHeadingElement; - private dom_logos: HTMLImageElement[]; + private dom_logos: HTMLDivElement[]; public constructor() { this.dom_title = el.h1(dict.IDLE_TITLE) @@ -234,7 +237,7 @@ class IdleScreen implements PresentationScreen { public async prepare(): Promise { for (const logo of IDLE_LOGOS) { - this.dom_logos.push(await el.img(logo, ["logo"])); + this.dom_logos.push(el.div([await el.img(logo)], ["logo"])); } const logos = el.div([...this.dom_logos], ["logos"]); this.dom_root.appendChild(logos); diff --git a/client/settings.ts b/client/settings.ts index e68f08f..bc34109 100644 --- a/client/settings.ts +++ b/client/settings.ts @@ -4,7 +4,9 @@ export namespace dict { } export const IDLE_LOGOS: string[] = [ + "files/tul_logo.svg", "files/fm_logo.svg", + "files/zmp_logo.svg", ]; export const QUESTION_QR: string = "files/qr_ask.svg"; diff --git a/client/style.scss b/client/style.scss index d7d7133..a540cc8 100644 --- a/client/style.scss +++ b/client/style.scss @@ -1,5 +1,12 @@ @use "sass:color"; +#run { + width: 100%; + height: 100vh; + background-color: transparent; + border: none; +} + body { font-family: Arial; background-color: black; @@ -19,14 +26,14 @@ body { h1 { transition: .5s ease transform, .5s ease opacity; + font-size: 3em; opacity: 0; transform: translateY(-100%); } h2 { transition: .5s ease opacity; - color: grey; - font-size: 1em; + color: color.scale(white, $lightness: -25%); margin: 0; opacity: 0; font-weight: normal; @@ -34,16 +41,23 @@ body { .logos { display: flex; - margin-top: 10em; - width: 40rem; + margin-top: 15em; justify-content: center; + align-items: center; .logo { + display: flex; + align-items: center; transition: .5s ease-out transform, .5s ease-out opacity; - width: 15em; + height: 7em; transform: translateY(100%); opacity: 0; - margin: 0 1em; + margin: 0 2em; + + img { + max-height: 100%; + max-width: 25em; + } } } } @@ -63,6 +77,15 @@ body { .main { transition: .5s ease opacity; opacity: 0; + + .disclaimer { + color: color.adjust(white, $lightness: -40%); + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + font-size: 1.5em; + } } .question {