From cd1e8787eb4290c02720498e9d60096c999603bf Mon Sep 17 00:00:00 2001 From: cato447 Date: Thu, 12 Nov 2020 20:43:06 +0100 Subject: [PATCH] =?UTF-8?q?Basic=20sytling=20f=C3=BCr=20die=20Startseite?= =?UTF-8?q?=20erstellt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Startseite arbeitet nun mit einem Flow-Design - Weiterleitende Links angepasst --- src/main/resources/static/scripts/test.js | 6 - src/main/resources/static/styles/start.css | 160 ++++++++++++++++-- .../templates/errors/alreadyVoted.html | 5 +- .../templates/errors/notRegistered.html | 9 +- src/main/resources/templates/start.html | 18 +- 5 files changed, 165 insertions(+), 33 deletions(-) delete mode 100644 src/main/resources/static/scripts/test.js diff --git a/src/main/resources/static/scripts/test.js b/src/main/resources/static/scripts/test.js deleted file mode 100644 index accb025..0000000 --- a/src/main/resources/static/scripts/test.js +++ /dev/null @@ -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"; - } \ No newline at end of file diff --git a/src/main/resources/static/styles/start.css b/src/main/resources/static/styles/start.css index 8527639..f94c76f 100644 --- a/src/main/resources/static/styles/start.css +++ b/src/main/resources/static/styles/start.css @@ -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; } \ No newline at end of file diff --git a/src/main/resources/templates/errors/alreadyVoted.html b/src/main/resources/templates/errors/alreadyVoted.html index 635232a..bcad6ee 100644 --- a/src/main/resources/templates/errors/alreadyVoted.html +++ b/src/main/resources/templates/errors/alreadyVoted.html @@ -1,11 +1,14 @@ + Abizeitung 2020/2021 Voting +

Jeder darf nur einmal abstimmen!

- Return to Login-Site + Return to Login-Site + \ No newline at end of file diff --git a/src/main/resources/templates/errors/notRegistered.html b/src/main/resources/templates/errors/notRegistered.html index 0c3143f..beec180 100644 --- a/src/main/resources/templates/errors/notRegistered.html +++ b/src/main/resources/templates/errors/notRegistered.html @@ -1,13 +1,14 @@ + Abizeitung 2020/2021 Voting + -

Ü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

- Try again +

Ü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

+ Try again + \ No newline at end of file diff --git a/src/main/resources/templates/start.html b/src/main/resources/templates/start.html index 4a4e765..010c105 100644 --- a/src/main/resources/templates/start.html +++ b/src/main/resources/templates/start.html @@ -5,20 +5,18 @@ Abizeitung 2020/2021 Voting + -

Gebe deine Adolfinum E-Mail Adresse ein

- - -
- -

Admin-Console Passwort

-
- - - + + +

Press Enter

+