improve readability and add logos

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