diff options
Diffstat (limited to 'auth/public')
| -rw-r--r-- | auth/public/index.html | 27 | ||||
| -rw-r--r-- | auth/public/style.css | 31 |
2 files changed, 56 insertions, 2 deletions
diff --git a/auth/public/index.html b/auth/public/index.html index c290ab0..b016ac6 100644 --- a/auth/public/index.html +++ b/auth/public/index.html @@ -2,8 +2,31 @@ <html> <head> <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link + rel="stylesheet" + href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" + integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" + crossorigin="anonymous" + /> + <link rel="stylesheet" href="style.css" type="text/css" media="all" /> + <title>Auth</title> </head> - <body></body> + <body> + <form class="pure-form pure-form-stacked" action="api/login" method="post"> + <fieldset> + <legend>Login</legend> + <label for="username">Username</label> + <input name="email" type="email" id="username" placeholder="Username" /> + <label for="password">Passwort</label> + <input name="password" type="password" id="password" placeholder="Passwort" /> + <label for="remember" class="pure-checkbox"> + <input name="remember" type="checkbox" id="remember" /> + Angemeldet bleiben + </label> + <button type="submit" class="pure-button pure-button-primary">Anmelden</button> + </fieldset> + </form> + </body> </html> diff --git a/auth/public/style.css b/auth/public/style.css new file mode 100644 index 0000000..f7e5f23 --- /dev/null +++ b/auth/public/style.css @@ -0,0 +1,31 @@ +html, +body { + padding: 0; + margin: 0; + height: 100%; + width: 100%; + background: url(https://images.unsplash.com/photo-1544829728-e5cb9eedc20e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80); + background-size: cover; +} + +form { + position: absolute; + width: 30%; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + padding: 20px; + border-radius: 10px; + background: white; +} + +input:not([type="checkbox"]) { + width: 100%; +} + +@media only screen and (max-width: 600px) { + form { + width: calc(100% - 50px); + } +} |