From 655ec610fcce8dd7748f10772d520bdff4f7c78e Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Fri, 19 Dec 2025 20:03:03 +0100 Subject: Basic setup & login --- frontend/src/styles/button.css | 77 ++++++++++++++++++++++++++++++++++ frontend/src/styles/index.css | 94 ++++++++++++++++++++++++++++++++++++++++++ frontend/src/styles/login.css | 62 ++++++++++++++++++++++++++++ 3 files changed, 233 insertions(+) create mode 100644 frontend/src/styles/button.css create mode 100644 frontend/src/styles/index.css create mode 100644 frontend/src/styles/login.css (limited to 'frontend/src/styles') diff --git a/frontend/src/styles/button.css b/frontend/src/styles/button.css new file mode 100644 index 0000000..8942654 --- /dev/null +++ b/frontend/src/styles/button.css @@ -0,0 +1,77 @@ +.btn { + border: none; + border-radius: var(--border-radius-small); + color: #fff; + cursor: pointer; + font-size: 1rem; + font-weight: bold; + margin-top: 10px; + padding: 15px; + transition: background-color 0.3s, transform 0.1s; + width: 100%; + + &:active { + transform: translateY(2px); + } + + &:disabled { + background-color: #dcdfdf; + cursor: not-allowed; + } +} + +.btn-add-robot { + background-color: var(--color-robot); + margin-top: 0; + padding: var(--gap-small); + width: fit-content; + + &:hover { + background-color: var(--color-robot-dark); + } +} + +.btn-robot-history-toggle { + background-color: var(--color-robot); + font-size: var(--text-small); + margin-top: var(--gap-small); + padding: 6px 8px; + width: fit-content; + + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--gap-small); + + &:hover { + background-color: var(--color-robot-dark); + } +} + +.btn-start { + background-color: var(--color-start); + + &:hover { + background-color: var(--color-start-dark); + } +} + +.btn-stop { + background-color: var(--color-stop); + + &:hover { + background-color: var(--color-stop-dark); + } +} + +.btn-single-robot { + font-size: var(--text-small); + margin: 0; + padding: 6px 8px; + width: fit-content; +} + +.btn-logout { + margin-top: 0; + padding: var(--gap-normal); +} diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css new file mode 100644 index 0000000..23807a5 --- /dev/null +++ b/frontend/src/styles/index.css @@ -0,0 +1,94 @@ +:root { + /* Container vars */ + --border-radius: 12px; + --border-radius-small: 8px; + --box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15); + /* Color vars */ + --card-bg: rgba(255, 255, 255, 0.95); + --color-label: #555; + --color-subtitle: #777; + --color-robot: #9c27b0; + --color-robot-dark: #7b1fa2; + --color-start: #4caf50; + --color-start-dark: #2e7d32; + --color-stop: #ed6c02; + --color-stop-dark: #e65100; + /* Spacing vars */ + --gap-small: 8px; + --gap-normal: 12px; + /* Text vars */ + --text-small: 0.9rem; + + box-sizing: border-box; + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #fff; + } + } +} + +body { + margin: 0; + min-height: 100vh; + min-width: 100vw; +} + +h1 { + color: #333; + font-size: 1.8rem; + line-height: 1.1; +} + +input { + border: 1px solid #ddd; + border-radius: var(--border-radius-small); + box-sizing: border-box; + font-size: 1rem; + padding: var(--gap-normal); + transition: border-color 0.3s, box-shadow 0.3s; + width: 100%; + + &:focus { + border-color: var(--color-start); + box-shadow: 0 0 0 3px rgba(3, 106, 32, 0.243); + outline: none; + } + + &:disabled { + background-color: #f0f3f3; + cursor: not-allowed; + } +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.error-message { + background-color: #fcebeb; + border: 1px solid #cc0000; + border-radius: var(--border-radius-small); + color: #cc0000; + font-size: var(--text-small); + font-weight: 500; + margin-bottom: 20px; + padding: 10px; + text-align: center; +} diff --git a/frontend/src/styles/login.css b/frontend/src/styles/login.css new file mode 100644 index 0000000..4592016 --- /dev/null +++ b/frontend/src/styles/login.css @@ -0,0 +1,62 @@ +.login-page { + background-image: url("../src/assets/map-blurred.png"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + display: flex; + justify-content: center; + align-items: center; + + height: 100vh; + width: 100vw; +} + +/* Login Card */ +.login-card { + background-color: var(--card-bg); + backdrop-filter: blur(8px); + border-radius: var(--border-radius); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + padding: 40px; + text-align: center; + width: 360px; + + & .subtitle { + color: var(--color-subtitle); + font-size: var(--text-small); + font-weight: bold; + margin-bottom: 25px; + } + + @media screen and (max-width: 768px) { + .login-card { + margin: 0 1rem; + } + } +} + +/* Form */ +.login-form { + text-align: left; +} + +.form-group { + margin-bottom: 20px; + + & label { + color: var(--color-label); + display: block; + font-size: var(--text-small); + font-weight: bold; + margin-bottom: var(--gap-small); + } +} + +.loading-spinner-container { + display: flex; + align-items: center; + justify-content: center; + height: 20px; + transform: scale(0.5); +} -- cgit v1.2.3