dominik/DHBW_WE_Aufgaben
1
0
Fork 0
mirror of https://github.com/DI0IK/Aufgaben_WE_DHBW.git synced 2025-07-05 16:48:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

state: 11.02.2025

Browse source
This commit is contained in:
Dominik 2025-02-11 16:22:48 +01:00
commit 1d79e03c1a
11 changed files with 481 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
PlantX/assets/fonts/Orbitron-Regular.ttf Normal file
View file

Binary file not shown.

BIN
PlantX/assets/fonts/Oxanium-Regular.ttf Normal file
View file

Binary file not shown.

BIN
PlantX/assets/images/bg-login-landscape.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 504 KiB

BIN
PlantX/assets/images/bg-login-portrait.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 188 KiB

44
PlantX/register/index.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PlantX</title>
<link rel="stylesheet" href="../styles/reset.css" />
<link rel="stylesheet" href="../styles/colors.css" />
<link rel="stylesheet" href="../styles/fonts.css" />
<link rel="stylesheet" href="../styles/buttons.css" />
<link rel="stylesheet" href="../styles/input-groups.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="background-gradient"></div>
<div class="content">
<h1 class="font-title-m">Willkommen bei PlantX!</h1>
<p class="font-body-m">
Registriere dich, teile deine Freude an Pflanzen und lerne von einer
großartigen Community!
</p>
<form action="/register" method="post" class="font-body-s">
<div class="input-group">
<label for="username"> Dein Name </label>
<input name="name" id="username" type="text" />
</div>
<div class="input-group">
<label for="mail"> E-Mail </label>
<input name="email" id="mail" type="email" />
</div>
<div class="input-group">
<label for="password"> Passwort </label>
<input name="password" id="password" type="password" />
</div>
<div class="button-group">
<button type="submit" class="primary">Ich bin dabei!</button>
<button type="button" class="secondary">Zurück zur Startseite</button>
</div>
</form>
</div>
</body>
</html>

98
PlantX/register/style.css Normal file
View file

@ -0,0 +1,98 @@
/* Load Font from /assets/fonts/Orbitron-Regular.ttf and /assets/fonts/Oxanium-Regular.ttf */
@font-face {
font-family: "Orbitron";
src: url("../assets/fonts/Orbitron-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Oxanium";
src: url("../assets/fonts/Oxanium-Regular.ttf") format("truetype");
}
html,
body {
width: 100svw;
height: 100svh;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
color: var(--fg);
}
h1 {
margin: 0;
}
body {
background-image: url("../assets/images/bg-login-landscape.jpg");
background-size: cover;
background-position: center;
}
@media (max-width: 712px) {
body {
background-image: url("../assets/images/bg-login-portrait.jpg");
}
}
body .background-gradient {
position: absolute;
top: 0;
left: 0;
width: 100svw;
height: 100svh;
/* Bottom left to top right */
/* from --bg to to transparent */
background: linear-gradient(67.29deg, var(--bg) 43.58%, transparent 100%);
}
@media (max-width: 712px) {
body .background-gradient {
background: #14172fcc;
}
}
.content {
position: absolute;
top: 25%;
left: 130px;
width: 800px;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (max-width: 712px) {
.content {
left: 0;
width: 100%;
}
}
.content form {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
}
.button-group {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: end;
width: 550px;
box-sizing: border-box;
}
@media (max-width: 712px) {
.button-group {
width: 100%;
flex-direction: row-reverse;
}
}

38
PlantX/styles/buttons.css Normal file
View file

@ -0,0 +1,38 @@
button {
border-radius: 8px;
padding: 12px;
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
button.primary {
background-color: var(--primary-50);
border: 1px var(--primary-40) solid;
color: #000126;
}
button.primary:hover {
background-color: var(--primary-30);
border-color: var(--primary-20);
}
button.primary:active {
background-color: var(--primary-40);
border-color: var(--primary-20);
}
button.secondary {
background-color: transparent;
border: 1px var(--primary-50) solid;
color: var(--fg);
}
button.secondary:hover {
background-color: var(--primary-40);
border-color: var(--primary-20);
}
button.secondary:active {
background-color: transparent;
border-color: var(--primary-100);
}

30
PlantX/styles/colors.css Normal file
View file

@ -0,0 +1,30 @@
:root {
--bg: #14172f;
--fg: #f2f2f2;
--fg-inverted: #000126;
--primary-100: #fff;
--primary-95: #effff2;
--primary-90: #deffe5;
--primary-80: #beffcb;
--primary-70: #9dffb0;
--primary-60: #7dff96;
--primary-50: #5cff7c;
--primary-40: #4acc64;
--primary-30: #37994a;
--primary-20: #256632;
--primary-10: #123319;
--primary-05: #09190c;
--primary-00: #000;
--mono-100: #fff;
--mono-95: #f2f2f2;
--mono-90: #e6e6e6;
--mono-80: #ccc;
--mono-60: #b3b3b3;
--mono-50: #808080;
--mono-40: #666;
--mono-30: #4d4d4d;
--mono-20: #333;
--mono-10: #1a1a1a;
--mono-05: #0d0d0d;
--mono-00: #000;
}

60
PlantX/styles/fonts.css Normal file
View file

@ -0,0 +1,60 @@
/* Font classes */
.font-title-m,
.font-title-m * {
font-family: Orbitron;
font-weight: 400;
font-size: 64px;
line-height: 83.2px;
letter-spacing: calc(0.05 * 64px);
}
@media (max-width: 767px) {
.font-title-m,
.font-title-m * {
font-family: Orbitron;
font-weight: 400;
font-size: 40px;
line-height: 48px;
letter-spacing: calc(0.05 * 40px);
}
}
.font-body-m,
.font-body-m * {
font-family: Oxanium;
font-weight: 400;
font-size: 24px;
line-height: 26.4px;
letter-spacing: calc(0.05 * 24px);
}
@media (max-width: 767px) {
.font-body-m,
.font-body-m * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
}
.font-body-s,
.font-body-s * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 767px) {
.font-body-s,
.font-body-s * {
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
}

82
PlantX/styles/input-groups.css Normal file
View file

@ -0,0 +1,82 @@
.input-group {
display: flex;
height: 44px;
box-sizing: border-box;
}
@media (max-width: 712px) {
.input-group {
flex-direction: column;
height: auto;
}
}
.input-group label {
background-color: var(--mono-20);
border-top: 2px var(--mono-30) solid;
border-left: 2px var(--mono-30) solid;
border-bottom: 2px var(--mono-30) solid;
border-start-start-radius: 8px;
border-end-start-radius: 8px;
padding-left: 16px;
padding-right: 16px;
min-width: 250px;
box-sizing: border-box;
display: flex;
align-items: center;
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 712px) {
.input-group label {
border-top: 2px var(--mono-30) solid;
border-left: 2px var(--mono-30) solid;
border-right: 2px var(--mono-30) solid;
border-bottom: none;
border-start-start-radius: 8px;
border-start-end-radius: 8px;
border-end-start-radius: 0;
border-end-end-radius: 0;
padding: 8px;
width: 100%;
}
}
.input-group input {
background-color: transparent;
border: 2px var(--mono-30) solid;
padding: 4px 16px;
border-start-end-radius: 8px;
border-end-end-radius: 8px;
width: 300px;
box-sizing: border-box;
color: var(--fg);
font-family: Oxanium;
font-weight: 500;
font-size: 16px;
line-height: 16px;
letter-spacing: calc(0.05 * 16px);
}
@media (max-width: 712px) {
.input-group input {
border-start-end-radius: 0;
border-start-start-radius: 0;
border-end-end-radius: 8px;
border-end-start-radius: 8px;
padding: 8px;
width: 100%;
}
}
.input-group input:focus {
border-color: var(--primary-40);
outline: none;
}

129
PlantX/styles/reset.css Normal file
View file

@ -0,0 +1,129 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}