localhorst/e-commerce
Archived
4
1
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

impl. register.html

Browse Source
This commit is contained in:
CodeSteak 2020-01-23 22:11:14 +01:00
parent f29b91b11a
commit 47c709efce
8 changed files with 189 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
prototype/src/main/resources/application.properties
View File

@ -16,5 +16,5 @@ spring.jpa.hibernate.ddl-auto=update
# ---------------------------------------- # ----------------------------------------
# EMBEDDED SERVER CONFIGURATION (ServerProperties) # EMBEDDED SERVER CONFIGURATION (ServerProperties)
server.address=127.0.0.1 server.address=::
server.port=8080 server.port=8080

101
prototype/src/main/resources/static/css/ecom.css
View File

@ -17,7 +17,7 @@
--root-c-base: #ecf0f1; --root-c-base: #ecf0f1;
--root-c-base-highlight: #bdc3c7; --root-c-base-highlight: #FFF;
--root-c-primary: #1abc9c; --root-c-primary: #1abc9c;
--root-c-primary-highlight: #16a085; --root-c-primary-highlight: #16a085;
@ -294,11 +294,13 @@ footer {
/* /*
* INPUTS * INPUTS
*/ */
textarea,
input[list],
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"] {
background-color: var(--c-base); background-color: var(--c-base);
font-size: var(--u0);
border: none; border: none;
@ -310,7 +312,12 @@ input[type="password"] {
font-size: var(--u0); font-size: var(--u0);
color: var(--c-black); color: var(--c-black);
/* box-shadow: var(--s-0-secondary); */ background-color: var(--c-base-highlight);
box-shadow: var(--s-0-secondary);
}
textarea {
font-family: "Fira Mono";
} }
/* /*
input[type="text"]:invalid, input[type="text"]:invalid,
@ -318,7 +325,8 @@ input[type="password"]:invalid {
background-color: var(--c-error); background-color: var(--c-error);
color: var(--c-base); color: var(--c-base);
}*/ }*/
textarea::placeholder,
input[list]::placeholder,
input[type="text"]::placeholder, input[type="text"]::placeholder,
input[type="password"]::placeholder { input[type="password"]::placeholder {
color: var(--c-primary-highlight); color: var(--c-primary-highlight);
@ -357,6 +365,7 @@ button:active, .button:active {
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[list],
button, button,
.button { .button {
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
@ -383,6 +392,9 @@ fieldset {
border: none; border: none;
} }
fieldset label {
display: inline-block;
}
/* /*
* HERO * HERO
@ -393,6 +405,11 @@ fieldset {
color: var(--c-base); color: var(--c-base);
} }
.hero > * {
--c-primary: var(--root-c-primary-highlight);
--c-primary-highlight: var(--root-c-primary);
}
.hero-black { .hero-black {
background-color: var(--c-black); background-color: var(--c-black);
color: var(--c-base); color: var(--c-base);
@ -423,8 +440,58 @@ fieldset {
width: 100%; width: 100%;
} }
.detailflex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
}
.detailflex.s {
max-width: calc(20rem + var(--u0) * 2);
margin-left: auto;
margin-right: auto;
}
.detailflex.m {
max-width: calc(40rem + var(--u0) * 3);
margin-left: auto;
margin-right: auto;
}
.detailflex.l {
max-width: calc(20rem + var(--u0) * 5);
margin-left: auto;
margin-right: auto;
}
.detailflex > * {
min-width: 100%;
padding: var(--u0);
flex: 1;
}
.detailflex > .col-2 {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-items: wrap;
padding: 0px;
}
.detailflex > .col-2 > * {
min-width: calc(15rem + var(--u0) * 3);
flex: 1;
padding: var(--u0);
}
.detailgrid { .detailgrid {
display: grid; display: grid;
grid-auto-flow: dense;
min-width: 20rem;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-template-rows: auto; grid-template-rows: auto;
grid-column-gap: var(--u0); grid-column-gap: var(--u0);
@ -437,6 +504,19 @@ fieldset {
margin-right: auto; margin-right: auto;
} }
.detailgrid.m {
max-width: calc(40rem + var(--u0) * 3);
margin-left: auto;
margin-right: auto;
}
.detailgrid.l {
max-width: calc(20rem + var(--u0) * 5);
margin-left: auto;
margin-right: auto;
}
.detailgrid > .s { .detailgrid > .s {
grid-column: span 1; grid-column: span 1;
} }
@ -454,6 +534,7 @@ fieldset {
height: 0px; height: 0px;
} }
.bar-flex { .bar-flex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -598,6 +679,18 @@ fieldset {
min-height: 40rem; min-height: 40rem;
} }
.modal {
display: flex;
align-items: center;
justify-content: center;
}
.modal > * {
border-radius: var(--u0);
padding: var(--u0);
flex: 1;
}
/* /*
* Impov * Impov
*/ */

0
prototype/src/main/resources/static/js/main.js vendored Normal file
View File

2
prototype/src/main/resources/templates/about.html
View File

@ -2,7 +2,7 @@
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Über uns</title> <title>Über uns</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" th:href="@{/css/ecom.css}"/>

10
prototype/src/main/resources/templates/login.html
View File

@ -2,22 +2,22 @@
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Einloggen</title> <title>Einloggen</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head> </head>
<body> <body>
<nav th:replace="/fragments/header :: header">Header</nav> <!-- <nav th:replace="/fragments/header :: header">Header</nav> -->
<main class="content-width grid vertical-center center"> <main class="content-width modal">
<form class="detailgrid s bg-base-highlight" th:action="@{/login}"> <form class="detailgrid s hero " th:action="@{/login}">
<div class="s"> <div class="s">
<label for="username">Email Adresse</label> <label for="username">Email Adresse</label>
<input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required> <input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
</div> </div>
<div class="s"> <div class="s">
<label for="username">Passwort</label> <label for="password">Passwort</label>
<input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required> <input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
</div> </div>

2
prototype/src/main/resources/templates/privacy.html
View File

@ -2,7 +2,7 @@
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Datenschutzerklärung</title> <title>Datenschutzerklärung</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" th:href="@{/css/ecom.css}"/>

82
prototype/src/main/resources/templates/register.html
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Neuen Account erstellen</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}" />
<script th:src="@{/js/scrollToContent.js}"></script>
</head>
<body>
<nav th:replace="/fragments/header :: header">Header</nav>
<main class="modal">
<form class="detailflex m" th:action="@{/register}">
<div>
<h1>Neuen Account erstellen</h1>
</div>
<div>
<h2> Login Daten </h2>
</div>
<div>
<label for="username">Email Adresse</label>
<input class="full-width" type="text" name="username" placeholder="Email Adresse" id="username" required>
</div>
<div>
<label for="password">Passwort</label>
<input class="full-width" type="text" name="password" placeholder="Passwort" id="password" required>
</div>
<div>
<label for="password2">Passwort wiederholen</label>
<input class="full-width" type="text" name="password2" placeholder="Passwort" id="password2" required>
</div>
<div>
<h2> Rechungs- und Lieferinformation </h2>
</div>
<div class="col-2">
<div>
<label for="salutation">Anrede</label>
<input class="full-width" list="salutationsOpt" name="salutation" placeholder="Anrede" required />
<datalist id="salutationsOpt">
<option value="Herr">
<option value="Frau">
<option value="Herr Dr.">
<option value="Frau Dr.">
</datalist>
</div>
<div>
<label for="name">Name</label>
<input class="full-width" type="text" name="name" placeholder="Nachname Vorname" required />
</div>
</div>
<div>
<label for="address">Anschrift</label>
<textarea rows="5" class="full-width" type="text" name="address" placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10Land"></textarea>
</div>
<fieldset>
<input type="radio" name="type" value="priv" id="type-priv" required>
<label for="type-priv">Ich bin Privatkunde.</label> <br />
<input type="radio" name="type" value="bus" id="type-bus" required>
<label for="type-bus">Ich bin Geschäftskunde.</label> <br />
</fieldset>
<div>
<button class="full-width" type="submit" name="action" value="login">Registeren</button>
<a th:href="@{/terms}">
Unsere AGBs finden sie hier.
</a>
</div>
</form>
</main>
<footer th:replace="/fragments/footer :: footer"></footer>
</body>
</html>

2
prototype/src/main/resources/templates/terms.html
View File

@ -2,7 +2,7 @@
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org"> <html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">
<title>Allgemeine Geschäftsbedingungen</title> <title>Allgemeine Geschäftsbedingungen</title>
<link rel="stylesheet" th:href="@{/css/ecom.css}"/> <link rel="stylesheet" th:href="@{/css/ecom.css}"/>