improve readability and add logos

assets/zmp_logo.svg

@@ -0,0 +1 @@
+<svg height="50mm" viewBox="0 0 50 50.000001" width="50mm" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" transform="matrix(-.63629813 0 0 -.63629813 66.59034128483 91.64520371211)"><path d="m-11.759578-96.806604v-3.098032q-2.223016-.189194-3.500067-1.418944-1.253402-1.2534-1.3007-3.28723h2.128418q0 1.15881.685824 1.89193.709473.73312 1.986525.89867v-6.19607l-.638526-.18919q-1.773682-.54393-2.743295-1.82098-.945964-1.27705-.945964-3.00344 0-1.89192 1.158805-3.12168 1.182455-1.22975 3.16898-1.41894v-3.12168h1.418946v3.09803q1.9628749.18919 3.1453299 1.41894 1.182455 1.22976 1.2061041 3.16898h-2.128419q0-1.1115-.5912275-1.79733-.5675783-.70947-1.6317875-.87501v5.86497l.9459637.30744q1.7263842.54393 2.6723482 1.84463.945964 1.3007.945964 3.05073 0 1.93923-1.2534023 3.21628-1.2297532 1.27705-3.3108736 1.489894v3.098032zm-2.199367-16.412476q0 1.06421.567579 1.84463.567578.78042 1.631788 1.11151v-5.41564q-1.040561.16554-1.631788.80406-.567579.63853-.567579 1.65544zm3.618313 11.39887q1.1588056-.1892 1.7973312-.89867.6385257-.70947.6385257-1.84463 0-1.04056-.5675784-1.79733-.5439293-.78042-1.5844895-1.11151l-.283789-.0946z" fill="#fff" transform="matrix(-1.0225486 0 0 -.97794862 24.554623 -1.612364)"/><path d="m-59.312695-104.31899q-.273111.60084-.710088 1.11065-.436977.4916-1.001405.87395-.546222.36415-1.219894.58264-.673673.20028-1.438383.20028-.782917 0-1.584041-.21849-.801125-.2367-1.547627-.54622-.910369-.36415-1.747908-.69188-.819332-.32774-1.602249-.32774-.910368 0-1.511212.45519-.600843.43698-1.074235 1.20169l-1.857152-1.32914q.273111-.60085.710088-1.09244.436977-.50981.983198-.87396.564429-.38235 1.238101-.58263.673673-.21849 1.438383-.21849.892161 0 1.80253.29131.910368.29132 1.747908.63726.782917.32774 1.529419.60085.746502.2549 1.401968.2549.892161 0 1.511212-.43698.61905-.45518 1.074235-1.21989z" fill="#9aff00" transform="scale(-1)"/><path d="m100.26473 100.06705v-3.596477l-7.441251 7.192957 7.441251 7.19295v-3.59647l-3.720626-3.59648z" fill="#fff"/></g></svg>

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/%) \

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<void> {
 		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);

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";

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;
+    color: color.scale(white, $lightness: -25%);
-    font-size: 1em;
     margin: 0;
     opacity: 0;
     font-weight: normal;
@@ -34,16 +41,23 @@ body {
 
   .logos {
     display: flex;
-    margin-top: 10em;
+    margin-top: 15em;
-    width: 40rem;
     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 {