Sven/muh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial MUH app implementation

Browse Source
This commit is contained in:
Sven Carstensen
2026-03-12 11:43:27 +01:00
commit fb8e3c8ef6
69 changed files with 8387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

693
frontend/src/styles/global.css Normal file
View File

@@ -0,0 +1,693 @@
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&display=swap");
:root {
--bg: #f3ece2;
--bg-deep: #d8cab6;
--surface: rgba(255, 250, 245, 0.84);
--surface-strong: #fff8f0;
--surface-contrast: #25313a;
--line: rgba(37, 49, 58, 0.12);
--text: #1d2428;
--muted: #6e766f;
--accent: #116d63;
--accent-soft: rgba(17, 109, 99, 0.12);
--accent-strong: #0d5b53;
--danger: #9d3c30;
--warning: #8a6500;
--success: #2d6a4f;
--shadow: 0 30px 80px rgba(54, 44, 27, 0.14);
--radius-xl: 28px;
--radius-lg: 22px;
--radius-md: 16px;
--radius-sm: 12px;
}
* {
box-sizing: border-box;
}
html,
body,
#root {
min-height: 100%;
}
body {
margin: 0;
font-family: "Sora", "Avenir Next", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(17, 109, 99, 0.18), transparent 32%),
radial-gradient(circle at bottom right, rgba(201, 129, 47, 0.18), transparent 28%),
linear-gradient(135deg, var(--bg) 0%, #efe4d5 52%, var(--bg-deep) 100%);
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
}
.app-shell {
display: grid;
grid-template-columns: minmax(228px, 280px) minmax(0, 1fr);
min-height: 100vh;
}
.sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 28px 24px;
background: rgba(23, 34, 41, 0.92);
color: #f8f3ed;
backdrop-filter: blur(16px);
}
.sidebar__brand {
display: flex;
gap: 16px;
align-items: center;
width: 100%;
}
.sidebar__brand h1,
.topbar__headline h2,
.section-card h3,
.login-hero h1,
.login-hero h2 {
margin: 0;
}
.sidebar__logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 108px;
padding: 16px 24px;
border-radius: 28px;
background: linear-gradient(135deg, #1d9485, #0f5b53);
font-weight: 700;
letter-spacing: 0.08em;
}
.sidebar__nav {
display: grid;
gap: 10px;
margin: 32px 0 auto;
}
.nav-link {
padding: 14px 16px;
border-radius: 16px;
color: rgba(248, 243, 237, 0.78);
text-decoration: none;
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.nav-link:hover,
.nav-link.is-active {
background: rgba(255, 255, 255, 0.08);
color: #fff8f0;
transform: translateX(4px);
}
.sidebar__footer {
display: grid;
gap: 12px;
}
.user-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
width: fit-content;
}
.user-chip--stacked {
display: grid;
gap: 4px;
width: 100%;
border-radius: 18px;
}
.ghost-button,
.secondary-button,
.accent-button,
.menu-toggle,
.choice-chip,
.pathogen-button,
.matrix-button,
.eye-button,
.quarter-tile,
.user-card,
.table-link,
.tab-chip {
border: none;
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.ghost-button,
.menu-toggle,
.secondary-button {
padding: 12px 18px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.08);
color: inherit;
}
.ghost-button:hover,
.menu-toggle:hover,
.secondary-button:hover,
.choice-chip:hover,
.pathogen-button:hover,
.matrix-button:hover,
.eye-button:hover,
.quarter-tile:hover,
.user-card:hover {
transform: translateY(-1px);
}
.accent-button {
padding: 13px 20px;
border-radius: 16px;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
color: #fcf7f1;
box-shadow: 0 18px 30px rgba(17, 109, 99, 0.24);
}
.secondary-button {
background: var(--accent-soft);
color: var(--accent-strong);
}
.shell-main {
display: flex;
flex-direction: column;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 36px;
}
.content-area {
padding: 0 36px 36px;
}
.page-stack {
display: grid;
gap: 24px;
}
.hero-card,
.section-card,
.login-hero__panel {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
backdrop-filter: blur(18px);
}
.section-card,
.hero-card {
padding: 28px;
}
.section-card--hero {
display: grid;
gap: 16px;
}
.hero-card {
display: grid;
gap: 20px;
}
.hero-card__form {
display: flex;
gap: 16px;
align-items: end;
flex-wrap: wrap;
}
.metrics-grid,
.form-grid,
.portal-grid {
display: grid;
gap: 20px;
}
.metrics-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-grid,
.portal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.metric-card {
padding: 22px 24px;
border-radius: var(--radius-lg);
background: rgba(255, 248, 240, 0.68);
border: 1px solid rgba(255, 255, 255, 0.32);
box-shadow: var(--shadow);
}
.metric-card__label,
.eyebrow,
.muted-text,
.table-subtext {
display: block;
}
.metric-card strong {
font-size: 2rem;
}
.eyebrow {
margin: 0 0 8px;
color: var(--muted);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.78rem;
}
.muted-text,
.table-subtext {
color: var(--muted);
font-size: 0.92rem;
}
.field-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field {
display: grid;
gap: 8px;
}
.field span {
font-size: 0.9rem;
color: var(--muted);
}
.field input,
.field select,
.field textarea,
.data-table input,
.data-table select {
width: 100%;
padding: 13px 14px;
border-radius: 14px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.9);
color: var(--text);
}
.field textarea {
min-height: 120px;
resize: vertical;
}
.choice-row,
.tab-row,
.page-actions,
.table-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.choice-row--wrap {
align-items: flex-start;
}
.choice-chip,
.tab-chip,
.pathogen-button,
.quarter-tile,
.user-card {
padding: 13px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.74);
color: var(--text);
}
.choice-chip.is-selected,
.tab-chip.is-active,
.pathogen-button.is-selected,
.matrix-button.is-selected,
.quarter-tile.is-flagged,
.user-card {
background: linear-gradient(135deg, rgba(17, 109, 99, 0.16), rgba(17, 109, 99, 0.08));
box-shadow: inset 0 0 0 1px rgba(17, 109, 99, 0.32);
}
.section-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.section-card__spacer {
margin-top: 28px;
}
.quarter-grid,
.pathogen-grid,
.user-grid,
.check-list,
.auth-grid {
display: grid;
gap: 14px;
}
.quarter-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pathogen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.user-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 18px;
}
.auth-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 18px;
}
.login-panel__section {
display: grid;
gap: 14px;
padding: 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.56);
border: 1px solid rgba(37, 49, 58, 0.08);
}
.divider-label {
margin: 18px 0 6px;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.78rem;
}
.quarter-tile,
.user-card {
display: grid;
gap: 6px;
text-align: left;
}
.quarter-tile strong,
.user-card__code {
font-size: 1.1rem;
}
.check-list__item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.64);
}
.table-shell {
overflow: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th,
.data-table td {
padding: 14px 12px;
border-bottom: 1px solid rgba(37, 49, 58, 0.08);
text-align: left;
vertical-align: middle;
}
.data-table th {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.status-pill,
.info-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.82rem;
}
.status-pill {
background: rgba(17, 109, 99, 0.08);
color: var(--accent-strong);
}
.status-pill--anamnesis {
background: rgba(34, 113, 190, 0.12);
color: #1a5f9c;
}
.status-pill--antibiogram {
background: rgba(151, 88, 202, 0.12);
color: #6c3fa2;
}
.status-pill--therapy {
background: rgba(214, 138, 6, 0.12);
color: #8a6500;
}
.status-pill--completed {
background: rgba(45, 106, 79, 0.12);
color: var(--success);
}
.info-chip {
background: var(--accent-soft);
color: var(--accent-strong);
}
.matrix-button {
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.8);
}
.eye-button {
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
}
.eye-button.is-active {
color: var(--accent-strong);
box-shadow: inset 0 0 0 1px rgba(17, 109, 99, 0.24);
}
.eye-button.is-inactive {
color: var(--muted);
}
.table-link {
padding: 0;
background: none;
color: var(--accent-strong);
text-decoration: underline;
}
.table-link--danger {
color: var(--danger);
}
.info-panel,
.empty-state,
.alert {
padding: 16px 18px;
border-radius: 18px;
}
.info-panel,
.empty-state {
background: rgba(255, 255, 255, 0.58);
color: var(--muted);
}
.alert {
border: 1px solid transparent;
}
.alert--error {
background: rgba(157, 60, 48, 0.12);
border-color: rgba(157, 60, 48, 0.18);
color: var(--danger);
}
.alert--warning {
background: rgba(138, 101, 0, 0.12);
border-color: rgba(138, 101, 0, 0.16);
color: var(--warning);
}
.alert--success {
background: rgba(45, 106, 79, 0.12);
border-color: rgba(45, 106, 79, 0.16);
color: var(--success);
}
.login-page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px;
}
.login-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
align-items: stretch;
width: min(1240px, 100%);
}
.login-hero__copy {
position: relative;
padding: 56px;
border-radius: 34px;
overflow: hidden;
background:
linear-gradient(140deg, rgba(14, 33, 36, 0.92), rgba(13, 91, 83, 0.88)),
linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent);
color: #f8f3ed;
box-shadow: var(--shadow);
}
.login-hero__copy::after {
content: "";
position: absolute;
inset: auto -6% -18% auto;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.login-hero__panel {
padding: 34px;
}
.panel-glow {
position: absolute;
top: -80px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(17, 109, 99, 0.16);
filter: blur(8px);
}
.hero-text {
max-width: 520px;
font-size: 1.05rem;
line-height: 1.7;
color: rgba(248, 243, 237, 0.82);
}
.page-actions {
margin-top: 8px;
}
.page-actions--space-between {
justify-content: space-between;
}
.page-actions--align-end {
align-self: end;
justify-content: flex-end;
}
@media (max-width: 1200px) {
.app-shell {
grid-template-columns: 240px minmax(0, 1fr);
}
.login-hero {
grid-template-columns: 1fr;
}
.portal-grid,
.form-grid,
.field-grid,
.metrics-grid {
grid-template-columns: 1fr;
}
.quarter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
.sidebar.is-open {
display: flex;
}
.topbar,
.content-area {
padding-inline: 20px;
}
.user-grid,
.auth-grid,
.pathogen-grid,
.quarter-grid {
grid-template-columns: 1fr;
}
}