Update CSS (#2)

Redesigned the start page and fixed some bugs

Co-authored-by: tpart <10518520-tpart@users.noreply.gitlab.com>
Reviewed-on: https://codeberg.org/metamuffin/keks-meet/pulls/2
Co-authored-by: tpart <tpart@noreply.codeberg.org>
Co-committed-by: tpart <tpart@noreply.codeberg.org>

3 files changed, 183 insertions, 7 deletions

diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
index 7a59d78..f30b085 100644
--- a/client-web/public/assets/style/master.css
+++ b/client-web/public/assets/style/master.css
@@ -12,7 +12,6 @@
 
 * {
     font-family: "Ubuntu", sans-serif;
-    font-weight: 300;
     color: white;
     margin: 0px;
     padding: 0px;
@@ -22,11 +21,19 @@
     --bg: #151315;
     --bg-dark: #070707;
     --ac: #5e3f84;
-    --ac-light: #7c43bd;
     --ac-dark: #2d0d52;
+    --ac-light: #7c43bd;
+    --ac-dark-transparent: #2d0d52c9;
+}
+
+body.start {
+    background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("./tile-backdrop.svg");
+    background-size: 40vw;
+    background-color: var(--ac-dark);
 }
 
 body {
+    font-weight: 300;
     background-color: var(--bg-dark);
     height: 100vh;
     width: 100vw;
@@ -34,10 +41,14 @@ body {
 }
 
 h1 {
+    text-shadow: 0px 0px 20px rgba(0,0,0,0.75);
+    font-size: 5em;
     font-weight: 700;
-    margin: 1em;
+    text-align: center;
+    margin-bottom: 0.1em;
 }
 
+
 input[type="button"],
 button {
     padding: 0.5em;
@@ -78,15 +89,28 @@ button:disabled {
 
 .start-box p {
     margin-bottom: 0.5em;
+    font-size: x-large;
 }
 
 .start-box input[type="text"] {
-    margin: 0.5em;
+    margin: 2em 0 1em 0;
     font-size: xx-large;
 }
 
 .start-box input[type="button"] {
-    margin: 0.5em;
+    margin: 1em 0 1em 0;
+    font-size: x-large;
+    width: 100%;
+}
+
+.start-box .description {
+    margin-bottom: 1.5em;
+    font-size: xx-large;
+    text-align: center;
+}
+
+#room-id-input {
+    padding: 0.5em;
     font-size: x-large;
     width: calc(100% - 1em);
 }
\ No newline at end of file
diff --git a/client-web/public/assets/style/tile-backdrop.svg b/client-web/public/assets/style/tile-backdrop.svg
new file mode 100644
index 0000000..15ea791
--- /dev/null
+++ b/client-web/public/assets/style/tile-backdrop.svg
@@ -0,0 +1,151 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1152.000000pt" height="1152.000000pt" viewBox="0 0 1152.000000 1152.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+</metadata>
+<g transform="translate(0.000000,1152.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1675 10557 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57
+-29 129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33
+-85 33 -46 0 -56 -4 -85 -33z"/>
+<path d="M5515 10557 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57
+-29 129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33
+-85 33 -46 0 -56 -4 -85 -33z"/>
+<path d="M9355 10557 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57
+-29 129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33
+-85 33 -46 0 -56 -4 -85 -33z"/>
+<path d="M1492 10298 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-75 0 -114 -50 -65 -84 18 -13 52
+-16 168 -16 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22
+c60 26 131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31
+-24 -108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59
+-34 139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M5332 10298 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M9172 10298 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M3556 8599 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M7396 8599 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M11236 8599 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 16 95 102 203 196 250 82 40 210 44 300 10 15 -6 17 0 17 53
+0 48 -4 61 -17 67 -28 12 -224 15 -267 4z"/>
+<path d="M0 8528 l1 -63 49 -33 c60 -41 118 -124 136 -193 8 -29 13 -53 11
+-54 -103 -44 -117 -67 -117 -198 0 -144 30 -197 112 -197 51 0 86 18 106 54
+22 41 28 236 12 352 -23 159 -112 290 -248 362 l-62 33 0 -63z"/>
+<path d="M1675 6717 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57 -29
+129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M5515 6717 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57 -29
+129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M9355 6717 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57 -29
+129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M1492 6458 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-75 0 -114 -50 -65 -84 18 -13 52
+-16 168 -16 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22
+c60 26 131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31
+-24 -108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59
+-34 139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M5332 6458 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M9172 6458 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M3556 4759 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M7396 4759 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M11236 4759 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 16 95 102 203 196 250 82 40 210 44 300 10 15 -6 17 0 17 53
+0 48 -4 61 -17 67 -28 12 -224 15 -267 4z"/>
+<path d="M0 4688 l1 -63 49 -33 c60 -41 118 -124 136 -193 8 -29 13 -53 11
+-54 -103 -44 -117 -67 -117 -198 0 -144 30 -197 112 -197 51 0 86 18 106 54
+22 41 28 236 12 352 -23 159 -112 290 -248 362 l-62 33 0 -63z"/>
+<path d="M1675 2877 c-42 -42 -48 -78 -43 -283 3 -174 11 -199 69 -230 57 -29
+129 -11 165 43 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M5515 2877 c-42 -42 -48 -78 -43 -283 3 -136 6 -163 22 -187 51 -75
+161 -75 212 0 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M9355 2877 c-42 -42 -48 -78 -43 -283 3 -136 6 -163 22 -187 51 -75
+161 -75 212 0 16 24 19 51 22 187 5 205 -1 241 -43 283 -29 29 -39 33 -85 33
+-46 0 -56 -4 -85 -33z"/>
+<path d="M1492 2618 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-75 0 -114 -50 -65 -84 18 -13 52
+-16 168 -16 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22
+c60 26 131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31
+-24 -108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59
+-34 139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M5332 2618 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M9172 2618 c-8 -8 -12 -48 -12 -112 0 -85 4 -109 24 -151 29 -62 86
+-117 149 -145 l47 -21 0 -64 0 -65 -43 0 c-48 0 -87 -22 -87 -50 0 -41 35 -50
+190 -50 116 0 150 3 168 16 49 34 10 84 -65 84 l-43 0 0 65 0 64 50 22 c60 26
+131 99 154 159 24 63 19 238 -6 254 -13 8 -23 8 -35 0 -14 -9 -19 -31 -24
+-108 -6 -83 -11 -104 -35 -143 -77 -124 -251 -124 -328 0 -24 40 -29 59 -34
+139 -2 51 -9 99 -15 106 -12 15 -39 16 -55 0z"/>
+<path d="M3556 919 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M7396 919 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 17 96 102 203 201 252 50 25 68 28 152 28 84 0 102 -3 152
+-28 99 -49 184 -156 201 -252 5 -27 2 -32 -33 -47 -63 -26 -80 -65 -80 -181 0
+-145 30 -197 113 -197 49 0 90 21 107 57 19 39 25 243 10 349 -24 167 -117
+297 -265 370 -72 35 -82 38 -183 40 -59 2 -124 -1 -146 -7z"/>
+<path d="M11236 919 c-64 -16 -157 -71 -212 -126 -108 -108 -150 -248 -142
+-481 5 -162 30 -202 126 -202 82 0 112 53 112 197 0 116 -17 155 -80 181 -35
+15 -38 20 -33 47 16 95 102 203 196 250 82 40 210 44 300 10 15 -6 17 0 17 53
+0 48 -4 61 -17 67 -28 12 -224 15 -267 4z"/>
+<path d="M0 848 l1 -63 49 -33 c60 -41 118 -124 136 -193 8 -29 13 -53 11 -54
+-103 -44 -117 -67 -117 -198 0 -144 30 -197 112 -197 51 0 86 18 106 54 22 41
+28 236 12 352 -23 159 -112 290 -248 362 l-62 33 0 -63z"/>
+</g>
+</svg>
diff --git a/client-web/public/start.html b/client-web/public/start.html
index 4766c77..27b45f5 100644
--- a/client-web/public/start.html
+++ b/client-web/public/start.html
@@ -6,10 +6,11 @@
         <link rel="stylesheet" href="/assets/style/master.css" />
         <title>keks-meet</title>
     </head>
-    <body>
+    <body class="start">
         <div class="start-box">
             <h1>keks-meet</h2>
-            <p>A web conferencing application using webrtc</p>
+            <p class="description">A web conferencing application using webrtc</p>
+            <br>
             <p>
                 keks-meet is free software! It is licenced under the terms of
                 the third version of the GNU Affero General Public Licence only.