commit 1d79e03c1a587165acd8e9044b12b025f1b974c8 Author: Dominik Stahl Date: Tue Feb 11 16:22:48 2025 +0100 state: 11.02.2025 diff --git a/PlantX/assets/fonts/Orbitron-Regular.ttf b/PlantX/assets/fonts/Orbitron-Regular.ttf new file mode 100644 index 0000000..ebaece0 Binary files /dev/null and b/PlantX/assets/fonts/Orbitron-Regular.ttf differ diff --git a/PlantX/assets/fonts/Oxanium-Regular.ttf b/PlantX/assets/fonts/Oxanium-Regular.ttf new file mode 100644 index 0000000..f40f673 Binary files /dev/null and b/PlantX/assets/fonts/Oxanium-Regular.ttf differ diff --git a/PlantX/assets/images/bg-login-landscape.jpg b/PlantX/assets/images/bg-login-landscape.jpg new file mode 100644 index 0000000..2d1ccd1 Binary files /dev/null and b/PlantX/assets/images/bg-login-landscape.jpg differ diff --git a/PlantX/assets/images/bg-login-portrait.jpg b/PlantX/assets/images/bg-login-portrait.jpg new file mode 100644 index 0000000..37281c9 Binary files /dev/null and b/PlantX/assets/images/bg-login-portrait.jpg differ diff --git a/PlantX/register/index.html b/PlantX/register/index.html new file mode 100644 index 0000000..80f227d --- /dev/null +++ b/PlantX/register/index.html @@ -0,0 +1,44 @@ + + + + + + PlantX + + + + + + + + + +

Willkommen bei PlantX!

+ Registriere dich, teile deine Freude an Pflanzen und lerne von einer + großartigen Community! +

+ +

+ + diff --git a/PlantX/register/style.css b/PlantX/register/style.css new file mode 100644 index 0000000..88c2736 --- /dev/null +++ b/PlantX/register/style.css @@ -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; + } +} diff --git a/PlantX/styles/buttons.css b/PlantX/styles/buttons.css new file mode 100644 index 0000000..d315c92 --- /dev/null +++ b/PlantX/styles/buttons.css @@ -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); +} diff --git a/PlantX/styles/colors.css b/PlantX/styles/colors.css new file mode 100644 index 0000000..e2cb0cf --- /dev/null +++ b/PlantX/styles/colors.css @@ -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; +} diff --git a/PlantX/styles/fonts.css b/PlantX/styles/fonts.css new file mode 100644 index 0000000..414c09b --- /dev/null +++ b/PlantX/styles/fonts.css @@ -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); + } +} diff --git a/PlantX/styles/input-groups.css b/PlantX/styles/input-groups.css new file mode 100644 index 0000000..943dc88 --- /dev/null +++ b/PlantX/styles/input-groups.css @@ -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; +} diff --git a/PlantX/styles/reset.css b/PlantX/styles/reset.css new file mode 100644 index 0000000..45a05ec --- /dev/null +++ b/PlantX/styles/reset.css @@ -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; +}