Initial

Visualisation/css/main.css

@@ -0,0 +1,40 @@
+:root {
+    --bg-color: #303030;
+    --text-color: #EEEEEE;
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	margin: 0;
+	background-color: var(--bg-color);
+
+	height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+	font-family: "Roboto", sans-serif;
+	font-weight: 100;
+	color: var(--text-color);
+}
+
+h1 {
+	font-size: 5em;
+	text-align: center;
+	margin-top: 0;
+	padding-top: 1em;
+}
+
+.flexContainer {
+	display: flex;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+
+@media (max-width: 800px) {
+
+}

Visualisation/css/visualiser.css

@@ -0,0 +1,66 @@
+:root {
+    --bg-color: #303030;        /*Ez a pulse háttérszíne, a canvasét jsben kell megváltoztatni */
+    --pulse-color: #AAAAAA;
+}
+
+.simulationContainer {
+    transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+    -ms-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+    -webkit-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
+
+    margin: 2em calc((50% - 350px) / 2);
+}
+
+.simulationContainer > .passedCarCount {
+    font-size: 2.5em;
+
+	width: 90%;
+    margin-top: 0.33em;
+	text-align: right;
+
+	text-shadow: -10px 10px 5px rgba(0, 0, 0, 0.35);
+}
+
+.simulationContainer > canvas {
+	background: linear-gradient(270deg, var(--bg-color) 0%, var(--bg-color) 40%, var(--pulse-color) 50%, var(--bg-color) 60%, var(--bg-color) 100%);
+	background-size: 600% 600%;
+	-webkit-animation: pulsing 10s ease infinite;
+	-moz-animation: pulsing 10s ease infinite;
+	animation: pulsing 10s ease infinite;
+
+	box-shadow: -15px 10px 5px rgba(0, 0, 0, 0.1);
+}
+
+@-webkit-keyframes pulsing {
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}
+@-moz-keyframes pulsing {
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}
+@keyframes pulsing { 
+    0% {
+    	background-position: 0% 51%;
+    }
+    50% {
+    	background-position: 100% 50%;
+    }
+    100% {
+    	background-position: 0% 51%;
+    }
+}