updated ui

WebServers/SignallingWebServer/Public/player.css

@@ -1,8 +1,11 @@
 /*Copyright Epic Games, Inc. All Rights Reserved.*/
+@import url(./fonts/fonts.css);
+
 :root {
 	/*Using colour scheme https://color.adobe.com/TD-Colors---Option-3-color-theme-10394433/*/
-  --colour1: #000000;
-  --colour2: #ffffff;
+	--colour1: #151619;
+	;
+	--colour2: #FFFFFF;
 	--colour3: #0585fe;
 	--colour4: #35b350;
 	--colour5: #ffab00;
@@ -10,10 +13,56 @@
 	--colour7: #3c3b40;
 }
 
+#loader {
+	width: 106px;
+	height: 106px;
+	border-radius: 50%;
+	display: inline-block;
+	position: relative;
+	background: conic-gradient(from 135deg at 50% 50%,
+			rgba(255, 255, 255, 0) -6.26deg,
+			#ffffff 314.83deg,
+			rgba(255, 255, 255, 0) 353.74deg,
+			#ffffff 674.83deg);
+	box-sizing: border-box;
+	animation: rotation 1s linear infinite;
+}
+
+
+@keyframes rotation {
+	0% {
+		transform: rotate(0deg);
+
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+
+}
+
+#loader::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	background: #151619;
+}
+
 body {
 	margin: 0px;
-  background-color: black;
-  font-family: "Montserrat", sans-serif;
+	background-color: #151619;
+
+	font-family: 'Montserrat', sans-serif;
+}
+
+h2 {
+	font-family: "GilroyWebRegular";
 }
 
 #playerUI {
@@ -36,7 +85,6 @@ video {
 	width: 100%;
 	height: 100%;
 	position: absolute;
-  background-color: #000;
 }
 
 #videoPlayOverlay {
@@ -44,7 +92,7 @@ video {
 	font-size: 1.8em;
 	width: 100%;
 	height: 100%;
-  color: var(--colour2);
+	color: var(--colour2)
 }
 
 /* State for element to be clickable */
@@ -52,7 +100,6 @@ video {
 	align-items: center;
 	justify-content: center;
 	display: flex;
-  cursor: pointer;
 }
 
 /* State for element to show text, this is for informational use*/
@@ -69,64 +116,102 @@ video {
 }
 
 #playButton {
-  font-family: "Inter", sans-serif;
+	display: block;
+	width: 88px;
+	height: 88px;
+	z-index: 30;
+	backdrop-filter: blur(10px);
+	border-radius: 112px;
+	cursor: pointer;
+}
+
+
+
+#container {
+	width: 400px;
+	height: 100%;
+	justify-content: center;
+	/* Background */
+	background: transparent;
+	/* Button_1 */
+	border-width: 0px 2px;
+	border-style: solid;
+	border-color: #23242A;
 	display: flex;
 	flex-direction: column;
-  gap: 8px;
-  z-index: 30;
-  background: #262626;
-  width: 494px;
-  height: 282px;
-  border: 1px solid #404040;
-  border-radius: 32px;
+	align-items: center;
+	gap: 40px;
+	padding: 40px 56px;
+	box-sizing: border-box;
+}
+
+@media screen and (max-width: 500px) {
+	#container {
+		width: 100%;
+		border: none;
+	}
+
+}
+
+
+
+
+
+#playButton:hover {
+	background: linear-gradient(180deg, #BC75FF 0%, #798FFF 100%);
+	backdrop-filter: blur(10px)
+}
+
+#title {
+	font-style: normal;
+	font-weight: 400;
+	font-size: 38px;
+	line-height: 100%;
+	/* or 38px */
+	/* White */
+	color: #F2F2F2;
+	margin: 0 0 16px 0;
+}
+
+#caption {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-size: 16px;
+	line-height: 140%;
+	/* or 22px */
+	text-align: center;
+	/* Inactive */
+	color: #C5C7CE;
+	margin: 0;
+	text-align: left;
+
+}
+
+#link {
+	font-family: 'Inter';
+	cursor: pointer;
+	background: #1C1D21;
+	border-radius: 4px;
+	width: 100%;
+	display: flex;
 	align-items: center;
 	justify-content: center;
-}
-
-.caption {
-  font-style: normal;
+	text-decoration: none;
+	padding: 8px 16px;
+	box-sizing: border-box;
 	font-weight: 400;
-  font-size: 22px;
+	font-size: 12px;
 	line-height: 130%;
-  /* identical to box height, or 29px */
-
-  text-align: center;
-
-  /* Landing/White */
-  margin: 0;
-  color: #ebebeb;
+	/* identical to box height, or 16px */
+	/* Inactive */
+	color: #C5C7CE;
 }
 
-.caption1 {
-  margin: 0;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 130%;
-  /* or 18px */
-
-  text-align: center;
-
-  /* Landing/LightGray */
-
-  color: #888888;
+#link:hover {
+	background: #23242A;
 }
 
-.play-btn {
-  margin-top: 17px;
-  background: #454545;
-  border-radius: 50%;
-  outline: none;
-  border: none;
-  cursor: pointer;
-  width: 106px;
-  height: 106px;
-}
-
-img#playButton {
-  max-width: 241px;
-  width: 10%;
-}
 
 #freezeFrameOverlay {
 	background-color: transparent;
@@ -188,7 +273,7 @@ img#playButton {
 	text-align: center;
 	border-radius: 15px;
 	padding: 0px 10px;
-  font-family: "Montserrat", sans-serif;
+	font-family: 'Montserrat', sans-serif;
 	font-size: 0.75rem;
 	letter-spacing: 0.75px;
 	/* Position the tooltip */
@@ -227,13 +312,12 @@ img#playButton {
 	position: absolute;
 	top: 2%;
 	left: 1%;
-  font-family: "Michroma", sans-serif;
+	font-family: 'Michroma', sans-serif;
 	pointer-events: all;
-  display: block;
-  visibility: hidden;
+	display: none;
 }
 
-#controls > * {
+#controls>* {
 	margin-bottom: 0.5rem;
 	border-radius: 50%;
 	display: block;
@@ -244,16 +328,16 @@ img#playButton {
 
 #controls #additionalinfo {
 	text-align: center;
-  font-family: "Montserrat", sans-serif;
+	font-family: 'Montserrat', sans-serif;
 }
 
 #unrealengine {
-  visibility: hidden;
 	position: absolute;
 	bottom: 5%;
 	right: 10%;
-  font-family: "Michroma", sans-serif;
+	font-family: 'Michroma', sans-serif;
 	pointer-events: all;
+	visibility: hidden;
 	width: min-content;
 }
 
@@ -263,14 +347,14 @@ img#playButton {
 }
 
 #connection {
-  visibility: hidden;
 	position: absolute;
 	bottom: 5%;
 	left: 10%;
-  font-family: "Michroma", sans-serif;
+	font-family: 'Michroma', sans-serif;
 	height: 3rem;
 	width: 3rem;
-  pointer-events: all;
+	pointer-events: none;
+	visibility: hidden;
 }
 
 .noselect {
@@ -297,13 +381,13 @@ img#playButton {
 	height: 100%;
 	min-width: 20vw;
 	transform: translateX(100%);
-  transition: 0.3s ease-out;
+	transition: .3s ease-out;
 	pointer-events: all;
 	backdrop-filter: blur(10px);
 	-webkit-backdrop-filter: blur(10px);
 	overflow-y: auto;
 	overflow-x: hidden;
-  background-color: rgba(30, 29, 34, 0.5);
+	background-color: rgba(30, 29, 34, 0.5)
 }
 
 .panel-wrap-visible {
@@ -381,7 +465,7 @@ img#playButton {
 .tgl *,
 .tgl *:after,
 .tgl *:before,
-.tgl + .tgl-slider {
+.tgl+.tgl-slider {
 	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
 }
@@ -392,7 +476,7 @@ img#playButton {
 .tgl *::-moz-selection,
 .tgl *:after::-moz-selection,
 .tgl *:before::-moz-selection,
-.tgl + .tgl-slider::-moz-selection {
+.tgl+.tgl-slider::-moz-selection {
 	background: none;
 }
 
@@ -402,11 +486,11 @@ img#playButton {
 .tgl *::selection,
 .tgl *:after::selection,
 .tgl *:before::selection,
-.tgl + .tgl-slider::selection {
+.tgl+.tgl-slider::selection {
 	background: none;
 }
 
-.tgl + .tgl-slider {
+.tgl+.tgl-slider {
 	outline: 0;
 	display: block;
 	width: 40px;
@@ -419,8 +503,8 @@ img#playButton {
 	user-select: none;
 }
 
-.tgl + .tgl-slider:after,
-.tgl + .tgl-slider:before {
+.tgl+.tgl-slider:after,
+.tgl+.tgl-slider:before {
 	position: relative;
 	display: block;
 	content: "";
@@ -428,36 +512,36 @@ img#playButton {
 	height: 100%;
 }
 
-.tgl + .tgl-slider:after {
+.tgl+.tgl-slider:after {
 	left: 0;
 }
 
-.tgl + .tgl-slider:before {
+.tgl+.tgl-slider:before {
 	display: none;
 }
 
-.tgl-flat + .tgl-slider {
+.tgl-flat+.tgl-slider {
 	padding: 2px;
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+	-webkit-transition: all .2s ease;
+	transition: all .2s ease;
 	background: var(--colour6);
 	border: 3px solid var(--colour7);
 	border-radius: 2em;
 }
 
-.tgl-flat + .tgl-slider:after {
-  -webkit-transition: all 0.2s ease;
-  transition: all 0.2s ease;
+.tgl-flat+.tgl-slider:after {
+	-webkit-transition: all .2s ease;
+	transition: all .2s ease;
 	background: var(--colour7);
 	content: "";
 	border-radius: 1em;
 }
 
-.tgl-flat:checked + .tgl-slider {
+.tgl-flat:checked+.tgl-slider {
 	border: 3px solid var(--colour3);
 }
 
-.tgl-flat:checked + .tgl-slider:after {
+.tgl-flat:checked+.tgl-slider:after {
 	left: 50%;
 	background: var(--colour3);
 }
@@ -534,24 +618,24 @@ input {
 	border-radius: 3px;
 	width: 2px;
 	background: currentColor;
-  left: 7px;
+	left: 7px
 }
 
 .warning::after {
 	top: 2px;
-  height: 8px;
+	height: 8px
 }
 
 .warning::before {
 	height: 2px;
-  bottom: 2px;
+	bottom: 2px
 }
 
 /* Flat buttons */
 input[type="button"] {
 	background-color: transparent;
 	color: var(--colour2);
-  font-family: "Montserrat";
+	font-family: 'Montserrat';
 	border: 3px solid var(--colour3);
 	border-radius: 1rem;
 	font-size: 0.75rem;
@@ -579,11 +663,11 @@ input[type="number"] {
 	color: var(--colour2);
 	border: 1px solid var(--colour6);
 	padding: 0.25rem;
-  font-family: "Montserrat";
+	font-family: 'Montserrat';
 	border-radius: 0.25rem;
 }
 
-input[type="number"]::-webkit-inner-spin-button {
+input[type=number]::-webkit-inner-spin-button {
 	margin-left: 0.5rem;
 }
 
@@ -592,8 +676,9 @@ input[type="number"]:disabled {
 	-moz-appearance: textfield;
 }
 
-input[type="number"]:disabled::-webkit-inner-spin-button {
+input[type=number]:disabled::-webkit-inner-spin-button {
 	display: none;
+
 }
 
 #settingsBtn,

WebServers/SignallingWebServer/fonts/fonts.css

@@ -0,0 +1,54 @@
+@font-face {
+	font-family: 'Inter';
+	src:
+		url('./inter-v12-latin_cyrillic-regular.woff2') format('woff2'),
+		url('./inter-v12-latin_cyrillic-regular.woff') format('woff');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Inter';
+	src:
+		url('./inter-v12-latin_cyrillic-300.woff2') format('woff2'),
+		url('./inter-v12-latin_cyrillic-300.woff') format('woff');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Inter';
+	src:
+		url('./inter-v12-latin_cyrillic-500.woff2') format('woff2'),
+		url('./inter-v12-latin_cyrillic-500.woff') format('woff');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Inter';
+	src:
+		url('./inter-v12-latin_cyrillic-600.woff2') format('woff2'),
+		url('./inter-v12-latin_cyrillic-600.woff') format('woff');
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Inter';
+	src:
+		url('./inter-v12-latin_cyrillic-700.woff2') format('woff2'),
+		url('./inter-v12-latin_cyrillic-700.woff') format('woff');
+	font-weight: 700;
+	font-style: normal;
+}
+
+
+@font-face {
+	font-family: 'GilroyWebRegular';
+	src: url('./Gilroy_Regular.woff'),
+		url('./Gilroy_Regular.woff2');
+	font-weight: 400;
+	font-style: normal;
+
+}