add files

src/public/stylesheets/style.css

@@ -0,0 +1,304 @@
+.h3
+{
+  color: white;
+}
+
+h3:link
+{
+  color: white;
+}
+
+h3:visited
+{
+  color: white;
+}
+
+h3:hover
+{
+  color: white;
+}
+
+h3:active
+{
+  color: white;
+}
+
+h3:link
+{
+  color: white;
+}
+
+body {
+  background-color: black;
+  padding: 0px;
+  font: 26px "Lucida Grande", Helvetica, Arial, sans-serif;
+  color: white;
+}
+
+a {
+  color: white;
+}
+
+.login-div{
+  position:relative; 
+  display:inline-block;
+  width:960px;
+}
+
+
+#login-hint{
+  position: absolute;
+  left: 220px;
+  top: 353px;
+  visibility: hidden;
+}
+
+#login-hint-map{
+  z-index: 1000;
+  position: absolute;
+  top: 370px;
+  left: 245px;
+  width: 90px;
+  height: 80px;
+}
+
+.login-image-div:hover{
+  float: left;
+  width: 240px;
+  height: 90px;
+  background: url("/pictures/userpass/background03_5x2.png")
+}
+
+.login-mask{
+  border:none;
+  margin: 0;
+  padding-inline: 5px;
+  background: #212121;
+  color: #36cb09;
+  width:311px;
+  height: 27px;
+}
+
+#login-button{
+  vertical-align: middle;
+  text-align: center;
+  border: 0;
+  padding-inline: 2px;
+  background: #36cb09;
+  color: #212121;
+  width:75px;
+  height: 33px;
+  font-weight: bold;
+  position: absolute; 
+  left: 566px; 
+  top: 301px;
+}
+
+.login-mask:focus{
+  border:none;
+  outline: none;
+}
+
+.visible{
+  visibility: visible;
+}
+
+.hidden{
+  visibility: hidden;
+}
+
+#user{
+  position: absolute; left: 320px; top: 154px;
+}
+
+
+#password{
+  position: absolute; left: 319px; top: 246px;
+}
+
+#credentials-error {
+  position: absolute; left: 315px; top: 300px;
+  color: #36cb09;
+}
+
+.math-div{
+  position:relative; 
+  display:inline-block;
+  width:960px;
+}
+.math-mask{
+  border:none;
+  margin: 0;
+  padding-inline: 5px;
+  background: #FFFFFF;
+  color: black;
+  width:144px;
+  height: 22px;
+}
+
+.math-mask:focus{
+  border:none;
+  outline: none;
+}
+
+#abgeben-button{
+  vertical-align: middle;
+  text-align: center;
+  padding-inline: 2px;
+  background: white;
+  color: #212121;
+  width:75px;
+  height: 33px;
+  font-weight: bold;
+  position: absolute; 
+  left: 529px; 
+  top: 405px;
+}
+
+#wrong-solution{
+  position: absolute; 
+  left: 613px; 
+  top: 343px;
+  color: red;
+  font-size: xx-large;
+}
+
+#nullstelle{
+  position: absolute; left: 446px; top: 346px;
+}
+
+.hidden_content
+{
+  color: black;
+}
+
+.hidden_link:link
+{
+  color: black;
+}
+
+.hidden_link:visited
+{
+  color: black;
+}
+
+.hidden_link:hover
+{
+  color: black;
+}
+
+.hidden_link:active
+{
+  color: black;
+}
+
+.hidden_link:link
+{
+  color: black;
+}
+
+.userdata-div{
+  position:relative; 
+  display:inline-block;
+  width:960px;
+}
+
+.userdata-mask
+{
+  margin: 0;
+  padding-inline: 5px;
+  background: #FFFFFF;
+  color: black;
+  width:300px;
+  height: 22px;
+}
+
+.userdata-submit-mask
+{
+  margin: 0;
+  padding-inline: 5px;
+  background: lightgrey;
+  color: black;
+  width:150px;
+  height: 24px;
+}
+
+.userdata-lable-mask
+{
+  color: black;
+  font-size: small;
+}
+
+#firstname_label
+{
+  position: absolute; left: 300px; top: 170px;
+}
+
+#firstname
+{
+  position: absolute; left: 300px; top: 200px;
+}
+
+#familyname_label
+{
+  position: absolute; left: 300px; top: 230px;
+}
+
+#familyname
+{
+  position: absolute; left: 300px; top: 260px;
+}
+
+#email_label
+{
+  position: absolute; left: 300px; top: 290px;
+}
+
+#email
+{
+  position: absolute; left: 300px; top: 320px;
+}
+
+#phonenumber_label
+{
+  position: absolute; left: 300px; top: 350px;
+}
+
+#phonenumber
+{
+  position: absolute; left: 300px; top: 380px;
+}
+
+#submit_data
+{
+  position: absolute; left: 300px; top: 440px;
+}
+
+#typewriter
+{
+  position: absolute; left: 275px; top: 50px;
+  width:410px;
+  text-align: left;
+}
+
+.type {
+  font-size: 17px;
+  color:#0000;
+  background:
+    linear-gradient(-90deg,black 5px,#0000 0) 10px 0,
+    linear-gradient(black 0 0) 0 0;
+  background-size:calc(var(--n)*1ch) 200%;
+  -webkit-background-clip:padding-box,text;
+  background-clip:padding-box,text;
+  background-repeat:no-repeat;
+  animation: 
+   b .2s infinite steps(1),   
+   t calc(var(--n)*.03s) steps(var(--n)) forwards;
+}
+
+@keyframes t{
+  from {background-size:0 200%}
+}
+@keyframes b{
+  50% {background-position:0 -100%,0 0}
+}