cato447/AbizeitungVotingSystem
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Basic sytling für die Startseite erstellt

Browse Source 
- Startseite arbeitet nun mit einem Flow-Design
- Weiterleitende Links angepasst
This commit is contained in:
cato447
2020-11-12 20:43:06 +01:00
parent d7185572fc
commit cd1e8787eb
5 changed files with 165 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/resources/static/scripts/test.js
View File

@@ -1,6 +0,0 @@
function Quadrat() {
var Eingabe = document.getElementsByName("name");
var Ergebnis = Eingabe.value;
alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
Eingabe.value = "Aaron";
}

160
src/main/resources/static/styles/start.css
View File

@@ -1,18 +1,154 @@
body {
background-color: rgb(44, 49, 54);
font-family: Arial, Helvetica, sans-serif;
input {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -300%);
display: block;
width: 70vw;
opacity: 0;
pointer-events: none;
transition: all .5s cubic-bezier(.4, .25, .8, .3);
}
h2 {
color: whitesmoke;
font-size: 2em;
font-family: Georgia, 'Times New Roman', Times, serif;
border-bottom: 5px dotted #e3e7ec;
border-top: 5px dotted white;
width: 50%;
input {
padding: .25rem 0;
border: 0;
border-bottom: 1px solid #bb1515;
outline: 0;
background: transparent;
color: #fff;
font-size: 3rem;
line-height: 4rem;
letter-spacing: .125rem;
transition: all .5s cubic-bezier(.4, .25, .8, .3);
}
input::selection {
background: rgba(#bb1515, 0.25);
}
.signup-button {
padding: .25em 0;
border: 0;
outline: 0;
background: #bb1515;
color: #fff;
font-size: 2rem;
line-height: 3.6rem;
letter-spacing: .0625rem;
box-shadow: 0 3px 5px 1px rgba(#000, 0.25);
text-shadow: 0 -2px 0 rgba(#000, 0.25), 0 1px 0 rgba(#fff, 0.2);
}
input:focus,
button:focus {
opacity: 1;
transform: translate(-50%, -100%);
pointer-events: auto;
transition: all .4s cubic-bezier(.1, .45, .1, .85) .5s;
z-index: 10;
}
input:focus~input,
input:focus~button {
transform: translate(-50%, 500%);
transition: all .5s ease-in;
}
input:focus~label .label-text {
transform: translate(-50%, 300%);
transition: all .5s ease-in;
}
input:focus~.tip {
opacity: 1;
}
input:focus~.signup-button,
button:focus~.signup-button {
opacity: 0;
}
input:focus+label .label-text {
opacity: 1;
transform: translate(-50%, -100%);
transition: all .3s cubic-bezier(.1, .45, .1, .85) .4s;
}
input:focus+label .nav-dot:before {
background: darken(#bb1515, 5%);
box-shadow: 0 0 0 .15rem #111, 0 0 .05rem .26rem #bb1515;
}
.tip {
position: fixed;
top: 57%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
opacity: 0;
color: #fff;
font-size: .875rem;
font-weight: 300;
letter-spacing: .125rem;
text-transform: uppercase;
text-align: right;
transition: opacity .25s .5s;
}
.signup-button,
.signup-button-trigger {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
width: 70vw;
padding: .25rem 0;
line-height: 3.6rem;
text-align: center;
pointer-events: none;
cursor: pointer;
transition: opacity .4s .3s;
}
.signup-button-trigger {
opacity: 0;
pointer-events: auto;
}
.label-text {
position: fixed;
top: calc(50% - 4rem);
left: 50%;
transform: translate(-50%, -300%);
width: 70vw;
padding: 3.125rem 0 1.5rem;
text-transform: uppercase;
color: #fff;
opacity: 0;
font-size: 1.125rem;
font-weight: 300;
letter-spacing: .125rem;
pointer-events: none;
transition: all .4s cubic-bezier(.4, .25, .8, .3) .05s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #111E25 0%, #111 100%);
font-family: 'Lato', sans-serif;
}
form {
color: #3cff00;
font-weight: bold;
width: 100%;
height: 100%;
overflow: hidden;
}

5
src/main/resources/templates/errors/alreadyVoted.html
View File

@@ -1,11 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Abizeitung 2020/2021 Voting</title>
</head>
<body>
<h1 style="color: red;"> Jeder darf nur einmal abstimmen! </h1>
<a href="http://localhost:8080">Return to Login-Site</a>
<a href="http://abizeitung-voting.ddns.net">Return to Login-Site</a>
</body>
</html>

9
src/main/resources/templates/errors/notRegistered.html
View File

@@ -1,13 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Abizeitung 2020/2021 Voting</title>
</head>
<body>
<h1> Überprüfe noch einmal die eingegebene E-Mail Adresse
Sollte der Fall eintreten, dass du deine E-Mail Adresse richtig eingegeben hast und du Schüler der Q2 bist,
schreibe eine Mail an simon.bussmann@adolfinum.de mit dem Betreff LoginFehler</h1>
<a href="http://localhost:8080">Try again</a>
<h1> Überprüfe noch einmal die eingegebene E-Mail Adresse Sollte der Fall eintreten, dass du deine E-Mail Adresse richtig eingegeben hast und du Schüler der Q2 bist, schreibe eine Mail an simon.bussmann@adolfinum.de mit dem Betreff LoginFehler</h1>
<a href="http://abizeitung-voting.ddns.net">Try again</a>
</body>
</html>

18
src/main/resources/templates/start.html
View File

@@ -5,20 +5,18 @@
<meta charset="UTF-8">
<title>Abizeitung 2020/2021 Voting</title>
<link th:href="@{/styles/start.css}" rel="stylesheet" />
</head>
<body>
<h2>Gebe deine Adolfinum E-Mail Adresse ein</h2>
<form action="#" th:action="@{/vote}" method="post">
<input type="text" name="name" />
<input type="submit" value="submit" />
</form>
<h2>Admin-Console Passwort</h2>
<form action="#" th:action="@{/dashboard}" method="post">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" value="login" />
<input id="input-1" type="text" placeholder="name.nachname@adolfinum.de" name="name" required autofocus />
<label for="input-1">
<span class="label-text">Adolfinum E-Mail</span>
<div class="signup-button-trigger">Sign Up</div>
</label>
<p class="tip">Press Enter</p>
<div class="signup-button">Abstimmen</div>
</form>
</body>