Improve styling

This commit is contained in:
Vojtěch Káně
2021-04-22 20:17:45 +02:00
parent e0c0348db2
commit fc8a18e5bb
8 changed files with 382 additions and 50 deletions

View File

@@ -3,14 +3,19 @@
<html lang='cs'> <html lang='cs'>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width=device-width">
<title>Tinyquiz</title> <title>Tinyquiz</title>
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<link rel="icon" type="image/svg+xml" href="/static/logo_tiny.svg">
{{ block "additional-css" . }}{{ end }} {{ block "additional-css" . }}{{ end }}
<script src="/static/script.js" defer type="text/javascript"></script> <script src="/static/script.js" defer type="text/javascript"></script>
{{ block "additional-js" . }}{{ end }} {{ block "additional-js" . }}{{ end }}
</head> </head>
<body> <body>
<header> <header id="logo">
<a href="/"><img src="/static/logo.svg" alt="Tinyquiz logo"></a>
</header>
<header id="title">
{{- block "header" . }}{{ end -}} {{- block "header" . }}{{ end -}}
</header> </header>
<main> <main>

View File

@@ -8,38 +8,40 @@
<script src="/static/home.js"></script> <script src="/static/home.js"></script>
{{ end -}} {{ end -}}
{{- define "main" }} {{- define "header" }}
<main> <h1>Open source online quiz platform</h1>
<section> {{ end -}}
<h1>Statistiky</h1>
<p> {{- define "main" }}
Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči. <section>
Celkem je k dispozici {{ .Stats.Games }} kvízů. <h1>Statistiky</h1>
</p> <p>
</section> Celkem odehráno {{ .Stats.Sessions }} her {{ .Stats.Players }} hráči.
<section> Celkem je k dispozici {{ .Stats.Games }} kvízů.
<h1>Připojit se ke hře</h1> </p>
<form id="join" method="post"> </section>
<label>Kód hry: <input type="text" name="code" placeholder="Kód hry"></label> <section>
<label>Jméno hráče: <input type="text" name="player" placeholder="Jméno"></label> <h1>Připojit se ke hře</h1>
<input type="submit" value="Připojit do hry"> <form id="join" method="post">
</form> <label>Kód hry: <input type="text" name="code" placeholder="Kód hry"></label>
</section> <label>Jméno hráče: <input type="text" name="player" placeholder="Jméno"></label>
<section> <input type="submit" value="Připojit do hry">
<h1>Začít hrát</h1> </form>
<form id="play" method="post" action="/session"> </section>
<label>Kód kvízu: <input type="text" name="code" placeholder="Kód kvizu"></label> <section>
<label>Jméno organizátora: <input type="text" name="organiser" placeholder="Jméno"></label> <h1>Začít hrát</h1>
<input type="submit" value="Začit hrát"> <form id="play" method="post" action="/session">
</form> <label>Kód kvízu: <input type="text" name="code" placeholder="Kód kvizu"></label>
</section> <label>Jméno organizátora: <input type="text" name="organiser" placeholder="Jméno"></label>
<section> <input type="submit" value="Začit hrát">
<h1>Vytvořit nový kvíz</h1> </form>
<form id="new" method="get" action="/new"> </section>
<label>Jméno kvízu: <input type="text" name="quiz" placeholder="Jméno kvízu"></label> <section>
<label>Jméno autora: <input type="text" name="author" placeholder="Jméno"></label> <h1>Vytvořit nový kvíz</h1>
<input type="submit" value="Vytvořit"> <form id="new" method="get" action="/new">
</form> <label>Jméno kvízu: <input type="text" name="quiz" placeholder="Jméno kvízu"></label>
</section> <label>Jméno autora: <input type="text" name="author" placeholder="Jméno"></label>
</main> <input type="submit" value="Vytvořit">
</form>
</section>
{{ end -}} {{ end -}}

View File

@@ -1,22 +1,30 @@
{{- template "base" . -}} {{- template "base" . -}}
{{- define "additional-css" -}} {{- define "additional-css" -}}
<link rel="stylesheet" href="/static/results.css">
{{ end -}} {{ end -}}
{{- define "additional-js" -}} {{- define "additional-js" -}}
{{ end -}} {{ end -}}
{{- define "header" }} {{- define "header" }}
<h1>{{ .Session.Edges.Game.Name }} hrána {{ .Session.Started.Format "2006.01.02 15:04:05 MST" }}</h1> <h1>{{ .Session.Edges.Game.Name }}</h1>
<h2>{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }} {{ .Player.Name }}</h2>
{{ end -}} {{ end -}}
{{- define "main" }} {{- define "main" }}
<table> <dl style="margin-bottom: 3rem;">
<tbody> <dt>Hrána</dt>
{{ range .Results }} <dd>{{ .Session.Started.Format "2006.01.02 15:04:05" }}</dd>
<tr><td>{{ .Place }}. místo</td><td>{{ .Player.Name }}</td><td>{{ .Points }}b</td></tr> <dt>{{ if .Player.Organiser }}Organizátor{{ else }}Hráč{{ end }}</dt>
{{ end }} <dd>{{ .Player.Name }}</dd>
</tbody> </dl>
</table> <div style="flex-grow: 1;">
<table>
<tbody>
{{ range .Results }}
<tr><td class="place{{ if eq .Place 1 }} first{{ else if eq .Place 2 }} second{{ else if eq .Place 3 }} third{{ end }}">{{ .Place }}</td><td>{{ .Player.Name }}</td><td>{{ .Points }}b</td></tr>
{{ end }}
</tbody>
</table>
</div>
{{ end -}} {{ end -}}

View File

@@ -40,6 +40,13 @@
#question > h1 { #question > h1 {
font-size: 3rem; font-size: 3rem;
text-align: center;
}
#question .answers {
display: flex;
flex-wrap: wrap;
justify-content: center;
} }
#question .answer { #question .answer {
@@ -62,7 +69,7 @@
body.organiser #controls { body.organiser #controls {
display: flex; display: flex;
padding-right: 20vw; padding-right: 20vw;
justify-content: flex-end; align-self: flex-end;
} }
#session-code { #session-code {

142
ui/static/logo.svg Normal file
View File

@@ -0,0 +1,142 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1386.9221"
height="221.37285"
viewBox="0 0 1386.9221 221.37285"
>
<g
transform="translate(-316.77882,-229.11419)">
<path
style="fill:#00ff00;stroke-width:0.227218"
d="m 585.43208,240.38224 -17.90709,17.89344 c -9.84883,9.8414 -18.00847,17.92781 -18.13242,17.96967 -0.124,0.0419 -4.14412,-3.8438 -8.93378,-8.63453 -4.78962,-4.79071 -8.92865,-8.8381 -9.19799,-8.99431 -0.26938,-0.15621 -0.92619,-0.28392 -1.45952,-0.28392 -1.25562,0 -1.71528,0.38608 -7.70989,6.47573 -2.94184,2.98851 -4.75556,5.00537 -4.85343,5.39766 -0.43082,1.72657 -0.83424,1.26686 14.85462,16.94351 8.08872,8.08249 15.04366,14.9766 15.45506,15.32027 0.6046,0.50511 0.97357,0.62474 1.92579,0.62474 h 1.17792 l 24.36652,-24.37383 24.36684,-24.37349 v -1.41557 -1.41557 l -4.05501,-4.03334 c -2.23033,-2.21822 -4.78861,-4.7232 -5.68491,-5.56674 -1.61761,-1.5225 -1.63914,-1.53372 -2.92132,-1.53372 z m 1.40855,7.27087 c 0.21771,0 5.2732,5.067 5.2732,5.28516 0,0.091 -9.61688,9.77747 -21.37064,21.52539 -11.75373,11.74792 -21.39112,21.35997 -21.41619,21.35997 -0.17936,0 -24.69701,-24.7044 -24.69701,-24.88507 0,-0.12659 1.17624,-1.40333 2.61411,-2.83713 l 2.61442,-2.6068 8.90914,8.85919 c 4.90012,4.87251 8.94706,8.93587 8.993,9.0296 0.0459,0.0937 0.72895,0.17042 1.51808,0.17042 h 1.43485 l 17.97932,-17.95037 c 9.88872,-9.87263 18.05528,-17.95036 18.14772,-17.95036 z" />
<g
aria-label="Tinyquiz"
style="font-size:233.333px;line-height:2;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none">
<path
d="m 895.20383,276.42062 -13.06664,-41.0666 H 746.80405 l -13.29998,41.0666 7.69999,2.8 c 13.76664,-24.26663 29.86662,-34.99995 51.33326,-34.99995 7.69999,0 10.26665,2.33333 10.26665,9.33332 v 107.09984 c 0,18.89998 -3.5,24.7333 -15.16665,25.66663 l -9.09998,0.7 v 7.23332 h 71.86656 v -7.23332 l -9.09999,-0.7 c -11.66665,-0.93333 -15.16664,-6.76665 -15.16664,-25.66663 V 254.48732 c 0,-8.16665 1.86666,-10.26665 9.56665,-10.26665 20.5333,0 38.26661,12.13332 51.33326,34.99995 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 954.00349,394.25378 v -6.99999 l -5.59999,-0.46666 c -10.49999,-1.16667 -14.46665,-6.53333 -14.46665,-19.36664 v -86.33321 h -7.93332 c -14.23331,2.56667 -21.9333,3.73333 -34.29995,4.66666 v 6.99999 l 4.66666,0.46667 c 12.13332,1.16666 15.39998,5.36666 15.39998,19.36664 v 54.83325 c 0,12.83331 -4.19999,18.19997 -14.46665,19.36664 l -5.83332,0.46666 v 6.99999 z M 936.03685,247.254 c 0,-7.46666 -6.29999,-13.76665 -13.53331,-13.76665 -7.69999,0 -13.99998,6.06666 -13.99998,13.76665 0,7.46665 6.29999,13.76665 13.76664,13.76665 7.46666,0 13.76665,-6.3 13.76665,-13.76665 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1108.2364,394.25378 v -6.99999 l -5.8333,-0.46666 c -10.2667,-1.16667 -14.4666,-6.53333 -14.4666,-19.36664 v -57.63325 c 0,-19.36664 -13.3,-30.79995 -35.2333,-30.79995 -17.7333,0 -31.5,5.83332 -48.0666,20.5333 v -18.43331 h -7.93334 c -14.46665,2.8 -22.16664,3.73333 -35.23329,4.66666 v 6.99999 l 5.6,0.46667 c 11.89998,0.93333 15.39997,5.36666 15.39997,19.36664 v 54.83325 c 0,12.83331 -4.19999,18.19997 -14.46664,19.36664 l -5.83333,0.46666 v 6.99999 h 62.76653 v -6.99999 l -5.8333,-0.46666 c -10.2666,-1.16667 -14.4666,-6.53333 -14.4666,-19.36664 v -57.63325 c 14.4666,-13.06665 28.2333,-19.59997 41.2999,-19.59997 12.8333,0 19.8333,8.16665 19.8333,23.3333 v 53.89992 c 0,12.83331 -4.2,18.19997 -14.4666,19.36664 l -5.8333,0.46666 v 6.99999 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1234.2361,288.32061 v -7.23333 h -51.3333 v 6.99999 c 14.7,2.8 21,5.36666 11.4334,29.16663 l -21.7,55.06658 -29.1666,-70.93323 c -2.8,-6.76665 0,-11.89998 11.6666,-13.29998 v -6.99999 h -54.3666 v 7.23333 c 11.4333,1.63333 14.2333,3.96666 18.6667,14.69997 l 41.7666,97.53319 -5.8333,13.53332 c -5.1334,12.59998 -13.3,21.2333 -19.6,21.2333 -2.3333,0 -4.6667,-1.4 -7.7,-4.43333 -5.8333,-6.29999 -8.1667,-7.69998 -12.8333,-7.69998 -6.7667,0 -12.3667,5.36665 -12.3667,11.43331 0,9.09999 9.3333,15.86665 21.9333,15.86665 27.0667,0 40.1333,-33.59996 45.2666,-46.19994 l 40.3666,-94.73319 c 5.6,-13.06665 11.2,-18.19998 23.8,-21.2333 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1369.569,447.45371 v -6.99999 l -5.8333,-0.46667 c -10.2667,-0.93333 -14.4667,-6.76666 -14.4667,-19.36664 V 281.08728 h -12.1333 l -6.0666,13.29998 c -11.9,-10.26665 -24.5,-15.39997 -37.5667,-15.39997 -23.7999,0 -52.7332,20.06663 -52.7332,60.43324 0,44.09994 33.8333,56.93325 50.8666,56.93325 11.9,0 21.4666,-3.73333 35.4666,-13.99998 v 38.26661 c 0,12.59998 -4.2,18.43331 -14.4667,19.36664 l -5.8333,0.46667 v 6.99999 z m -42.4666,-76.29989 c -11.6667,10.49998 -20.0666,14.69998 -29.1666,14.69998 -19.3667,0 -33.3666,-19.36664 -33.3666,-46.89994 0,-39.19994 21.4666,-49.46659 35.6999,-49.46659 10.7333,0 18.4333,3.96666 26.8333,14.23331 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1516.3351,394.25378 v -6.99999 l -5.8333,-0.46666 c -10.2666,-1.16667 -14.4666,-6.53333 -14.4666,-19.36664 v -86.33321 h -7.9334 c -12.1333,2.8 -16.7999,3.26666 -35.2332,4.66666 v 6.99999 l 5.6,0.46667 c 11.8999,0.93333 15.3999,5.36666 15.3999,19.36664 v 52.03325 c -15.6333,13.76665 -29.3999,20.53331 -40.8332,20.53331 -14.7,0 -21.2333,-7.93332 -21.2333,-25.66663 v -78.39989 h -7.9334 c -12.1333,2.8 -17.2666,3.5 -35.2333,4.66666 v 6.99999 l 5.6,0.46667 c 11.9,0.93333 15.4,5.36666 15.4,19.36664 v 48.76659 c 0,27.99996 17.9667,34.99995 34.7666,34.99995 16.8,0 29.6333,-5.59999 49.4666,-21.69997 v 19.59997 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1589.8347,394.25378 v -6.99999 l -5.6,-0.46666 c -10.5,-1.16667 -14.4667,-6.53333 -14.4667,-19.36664 v -86.33321 h -7.9333 c -14.2333,2.56667 -21.9333,3.73333 -34.2999,4.66666 v 6.99999 l 4.6666,0.46667 c 12.1333,1.16666 15.4,5.36666 15.4,19.36664 v 54.83325 c 0,12.83331 -4.2,18.19997 -14.4666,19.36664 l -5.8334,0.46666 v 6.99999 z M 1571.868,247.254 c 0,-7.46666 -6.3,-13.76665 -13.5333,-13.76665 -7.7,0 -14,6.06666 -14,13.76665 0,7.46665 6.3,13.76665 13.7667,13.76665 7.4666,0 13.7666,-6.3 13.7666,-13.76665 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
<path
d="m 1703.701,357.38717 -6.5334,-2.33333 c -14.9333,23.56663 -28.6999,32.19995 -52.2665,32.19995 -8.8667,0 -13.5334,-0.69999 -22.1667,-3.26666 l 78.1666,-97.06652 -2.5667,-5.83333 h -87.2665 l -13.0667,34.29995 7.2333,2.56667 c 5.6,-11.43332 9.5667,-16.33331 16.1,-20.76664 8.1667,-5.59999 21.2333,-9.09999 33.8333,-9.09999 5.1333,0 8.6333,0.46667 15.6333,1.86667 l -76.5332,97.53319 3.7333,6.76665 h 93.0999 z"
style="font-size:233.333px;font-family:'TeX Gyre Bonum';-inkscape-font-specification:'TeX Gyre Bonum'" />
</g>
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="320.31754"
y="232.65291" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="515.81812"
y="232.65291" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="320.31754"
y="331.06461" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="515.81812"
y="331.06461" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 384.25719,336.15447 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-10e-6 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.9048;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="76.095192"
height="6.09518"
x="421.06552"
y="243.44505" />
<rect
style="fill:none;stroke:#000000;stroke-width:17.53;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="22.470013"
height="2.4700217"
x="422.87811"
y="273.54633" />
<rect
style="fill:none;stroke:#000000;stroke-width:18.7297;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="31.270334"
height="1.2703203"
x="423.47797"
y="302.43484" />
<rect
style="fill:none;stroke:#000000;stroke-width:16.139;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="63.861069"
height="3.8610256"
x="422.22192"
y="342.97385" />
<rect
style="fill:none;stroke:#000000;stroke-width:14.3149;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="55.685112"
height="5.6851282"
x="421.27057"
y="370.35049" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.7588;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="46.241234"
height="6.2412367"
x="421.39319"
y="398.36111" />
<rect
style="fill:none;stroke:#000000;stroke-width:12.3237;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="77.676277"
height="7.6763172"
x="615.77557"
y="242.6545" />
<rect
style="fill:none;stroke:#000000;stroke-width:17.3642;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="42.635834"
height="2.6357944"
x="618.29584"
y="273.46344" />
<rect
style="fill:none;stroke:#000000;stroke-width:14.687;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="15.31296"
height="5.3129897"
x="616.95721"
y="300.41348" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.0346;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="16.965429"
height="6.9654536"
x="616.13104"
y="341.42166" />
<rect
style="fill:none;stroke:#000000;stroke-width:18.8067;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="41.193291"
height="1.193262"
x="619.01709"
y="372.59641" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 579.75777,336.15447 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-10e-6 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 384.25719,237.74276 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-1e-5 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

115
ui/static/logo_tiny.svg Normal file
View File

@@ -0,0 +1,115 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="382.8349"
height="189.746"
viewBox="0 0 382.83489 189.746"
>
<g
transform="translate(-316.77882,-229.11419)"
>
<path
style="fill:#00ff00;stroke-width:0.227218"
d="m 585.43208,240.38224 -17.90709,17.89344 c -9.84883,9.8414 -18.00847,17.92781 -18.13242,17.96967 -0.124,0.0419 -4.14412,-3.8438 -8.93378,-8.63453 -4.78962,-4.79071 -8.92865,-8.8381 -9.19799,-8.99431 -0.26938,-0.15621 -0.92619,-0.28392 -1.45952,-0.28392 -1.25562,0 -1.71528,0.38608 -7.70989,6.47573 -2.94184,2.98851 -4.75556,5.00537 -4.85343,5.39766 -0.43082,1.72657 -0.83424,1.26686 14.85462,16.94351 8.08872,8.08249 15.04366,14.9766 15.45506,15.32027 0.6046,0.50511 0.97357,0.62474 1.92579,0.62474 h 1.17792 l 24.36652,-24.37383 24.36684,-24.37349 v -1.41557 -1.41557 l -4.05501,-4.03334 c -2.23033,-2.21822 -4.78861,-4.7232 -5.68491,-5.56674 -1.61761,-1.5225 -1.63914,-1.53372 -2.92132,-1.53372 z m 1.40855,7.27087 c 0.21771,0 5.2732,5.067 5.2732,5.28516 0,0.091 -9.61688,9.77747 -21.37064,21.52539 -11.75373,11.74792 -21.39112,21.35997 -21.41619,21.35997 -0.17936,0 -24.69701,-24.7044 -24.69701,-24.88507 0,-0.12659 1.17624,-1.40333 2.61411,-2.83713 l 2.61442,-2.6068 8.90914,8.85919 c 4.90012,4.87251 8.94706,8.93587 8.993,9.0296 0.0459,0.0937 0.72895,0.17042 1.51808,0.17042 h 1.43485 l 17.97932,-17.95037 c 9.88872,-9.87263 18.05528,-17.95036 18.14772,-17.95036 z" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="320.31754"
y="232.65291" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="515.81812"
y="232.65291" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="320.31754"
y="331.06461" />
<rect
style="fill:none;stroke:#000000;stroke-width:7.07744;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="84.256859"
height="84.256859"
x="515.81812"
y="331.06461" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 384.25719,336.15447 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-10e-6 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.9048;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="76.095192"
height="6.09518"
x="421.06552"
y="243.44505" />
<rect
style="fill:none;stroke:#000000;stroke-width:17.53;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="22.470013"
height="2.4700217"
x="422.87811"
y="273.54633" />
<rect
style="fill:none;stroke:#000000;stroke-width:18.7297;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="31.270334"
height="1.2703203"
x="423.47797"
y="302.43484" />
<rect
style="fill:none;stroke:#000000;stroke-width:16.139;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="63.861069"
height="3.8610256"
x="422.22192"
y="342.97385" />
<rect
style="fill:none;stroke:#000000;stroke-width:14.3149;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="55.685112"
height="5.6851282"
x="421.27057"
y="370.35049" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.7588;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="46.241234"
height="6.2412367"
x="421.39319"
y="398.36111" />
<rect
style="fill:none;stroke:#000000;stroke-width:12.3237;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="77.676277"
height="7.6763172"
x="615.77557"
y="242.6545" />
<rect
style="fill:none;stroke:#000000;stroke-width:17.3642;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="42.635834"
height="2.6357944"
x="618.29584"
y="273.46344" />
<rect
style="fill:none;stroke:#000000;stroke-width:14.687;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="15.31296"
height="5.3129897"
x="616.95721"
y="300.41348" />
<rect
style="fill:none;stroke:#000000;stroke-width:13.0346;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="16.965429"
height="6.9654536"
x="616.13104"
y="341.42166" />
<rect
style="fill:none;stroke:#000000;stroke-width:18.8067;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:3.77953"
width="41.193291"
height="1.193262"
x="619.01709"
y="372.59641" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 579.75777,336.15447 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-10e-6 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
<path
style="fill:#ff0000;stroke-width:0.274409"
d="m 384.25719,237.74276 c -0.80855,0.016 -1.63842,0.20976 -2.15052,0.57441 -0.43478,0.3096 -4.98498,4.75502 -10.11148,9.87874 -5.12649,5.12372 -9.44805,9.31558 -9.60379,9.31558 -0.15575,0 -4.73119,-4.44543 -10.16775,-9.87874 l -9.88478,-9.87873 h -1.53631 c -1.07154,-1e-5 -1.75666,0.15778 -2.26469,0.52174 -0.79889,0.57235 -12.13105,11.90344 -12.78857,12.78738 -0.23757,0.31936 -0.41175,1.15738 -0.41684,2.0046 l -0.009,1.45593 10.01621,10.03953 c 5.50877,5.52177 10.0158,10.09518 10.0158,10.16293 0,0.0677 -4.1879,4.30519 -9.30673,9.41647 -5.11884,5.1113 -9.62628,9.71119 -10.01621,10.22242 -0.78985,1.03555 -0.98522,3.1484 -0.36579,3.95416 0.18865,0.2454 3.19309,3.31586 6.67667,6.82339 3.89899,3.92579 6.58889,6.42527 6.99744,6.50221 2.5706,0.48409 2.25128,0.7296 13.06634,-10.03591 8.85475,-8.81418 9.98219,-9.84628 10.38722,-9.51014 0.24989,0.20739 4.73243,4.65239 9.96155,9.87794 10.12712,10.12024 10.11787,10.11312 12.32069,9.69987 0.75298,-0.14127 2.19993,-1.44666 7.602,-6.85836 7.12863,-7.14135 7.24983,-7.31161 6.67908,-9.3787 -0.19006,-0.68832 -2.72737,-3.39361 -10.13922,-10.8113 l -9.88556,-9.89361 10.00134,-10.05199 c 7.79296,-7.83263 10.03734,-10.24226 10.16453,-10.91219 0.36456,-1.92021 -0.0682,-2.5148 -6.50342,-8.94096 -3.36793,-3.36318 -6.38989,-6.33095 -6.71566,-6.59506 -0.42683,-0.34605 -1.21415,-0.50762 -2.0227,-0.49161 z m -0.0668,9.20424 c 0.31719,0 6.44272,6.0747 6.44272,6.38926 0,0.11354 -4.50704,4.71666 -10.01581,10.22926 l -10.01621,10.02264 v 1.55039 1.55038 l 10.07007,10.09379 10.06968,10.0938 -0.67128,0.72434 c -1.96522,2.12053 -5.6401,5.5998 -5.91455,5.5998 -0.17374,0 -4.7654,-4.44543 -10.20393,-9.87874 l -9.88839,-9.87874 h -1.65851 -1.65891 l -9.88639,9.87874 c -5.43758,5.4333 -10.04454,9.87874 -10.23769,9.87874 -0.19314,0 -1.76797,-1.42057 -3.49952,-3.15704 l -3.1482,-3.15746 9.94425,-9.94707 c 6.745,-6.7469 10.0205,-10.21222 10.18102,-10.77191 0.60123,-2.09636 0.66679,-2.01312 -10.01782,-12.71261 -5.48678,-5.49441 -9.97601,-10.06756 -9.97601,-10.16253 0,-0.3402 6.32074,-6.38773 6.58341,-6.29881 0.1476,0.0499 4.71779,4.53436 10.1557,9.96515 l 9.88677,9.87392 h 1.64565 1.64526 l 9.94546,-9.94265 c 5.47007,-5.46852 10.0706,-9.94265 10.22323,-9.94265 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

30
ui/static/results.css Normal file
View File

@@ -0,0 +1,30 @@
td {
padding-left: 1rem;
}
.place {
border-radius: 50%;
border: 1px solid black;
width: 3rem;
height: 3rem;
text-align: center;
padding: 0;
}
.place.first {
background-color: gold;
box-shadow: 0 0 10px 5px gold;
border: none;
}
.place.second {
background-color: silver;
box-shadow: 0 0 6px 3px silver;
border: none;
}
.place.third {
background-color: chocolate;
box-shadow: 0 0 3px 1px chocolate;
border: none;
}

View File

@@ -10,21 +10,44 @@ body {
body { body {
display: grid; display: grid;
grid-template-rows: 10vh auto; grid-template-rows: 10vh auto;
grid-template-columns: auto; grid-template-columns: 25vw 50vw 25vw;
grid-template-areas: grid-template-areas:
"header" "empty1 header empty2"
"main"; "main main main";
} }
header { @media (orientation: portrait) {
body {
grid-template-rows: 10vh 10vh auto;
grid-template-columns: auto;
grid-template-areas:
"logo"
"header"
"main";
}
}
#logo {
grid-area: 1 / 1 / 1 / 1;
padding: 0.5rem;
}
#logo img {
max-width: 100%;
max-height: 100%;
}
#title {
grid-area: header; grid-area: header;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center;
} }
main { main {
grid-area: main; grid-area: main;
display: flex; display: flex;
justify-content: space-around; justify-content: center;
align-items: center;
flex-direction: column; flex-direction: column;
} }