vibe coded frontend

2026-05-12 10:34:42 +01:00
parent 0fdec18a15
commit 675285e99d
99 changed files with 57409 additions and 29 deletions
--- a/Frontend/src/components/dashboard/dashboard-activity.module.scss
+++ b/Frontend/src/components/dashboard/dashboard-activity.module.scss
@@ -0,0 +1,170 @@
+.section {
+	display: grid;
+	gap: 1.05rem;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	flex-wrap: wrap;
+
+	h2 {
+		font-size: 1.25rem;
+		line-height: 1.1;
+		letter-spacing: -0.03em;
+	}
+
+	a {
+		color: var(--primary);
+		font-weight: 500;
+		font-size: 0.9rem;
+	}
+}
+
+@media (max-width: 519px) {
+	.header a {
+		font-size: 0.85rem;
+	}
+}
+
+.progressCard,
+.highlightCard {
+	border-radius: 1.35rem;
+	border: 1px solid var(--border-soft);
+	box-shadow: var(--shadow-soft);
+}
+
+.progressCard {
+	display: grid;
+	gap: 1rem;
+	padding: 1rem;
+	background: var(--surface-panel);
+
+	@media (min-width: 640px) {
+		padding: 1.15rem;
+	}
+
+	@media (min-width: 960px) {
+		padding: 1.35rem;
+	}
+}
+
+.progressHeader {
+	display: flex;
+	align-items: start;
+	justify-content: space-between;
+	gap: 1rem;
+	flex-wrap: wrap;
+
+	p {
+		color: var(--text-muted);
+		font-size: 0.92rem;
+	}
+
+	> div:first-child {
+		min-width: 0;
+		flex: 1 1 13rem;
+	}
+}
+
+.progressHeader h3 {
+	font-size: 1.15rem;
+	line-height: 1.1;
+}
+
+.progressBadge {
+	padding: 0.45rem 0.7rem;
+	border-radius: 9999px;
+	background: var(--surface-info);
+	color: var(--info);
+	font-size: 0.85rem;
+	font-weight: 600;
+	white-space: nowrap;
+	align-self: start;
+}
+
+.chart {
+	width: 100%;
+	height: auto;
+}
+
+.axis {
+	stroke: var(--border-divider);
+	stroke-width: 1;
+}
+
+.area {
+	fill: url(#progress-fill);
+	stroke: none;
+}
+
+.line {
+	fill: none;
+	stroke: var(--blue-400);
+	stroke-width: 4;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.monthRow {
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+	gap: 0.4rem;
+	color: var(--text-muted);
+	font-size: 0.85rem;
+	text-align: center;
+}
+
+@media (max-width: 519px) {
+	.monthRow {
+		font-size: 0.72rem;
+		gap: 0.25rem;
+	}
+}
+
+.highlightGrid {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 0.85rem;
+
+	@media (min-width: 560px) {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+.highlightCard {
+	display: grid;
+	gap: 0.35rem;
+	padding: 1rem;
+	color: var(--text);
+
+	strong {
+		font-size: 2rem;
+		font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
+		line-height: 1;
+		font-weight: 700;
+	}
+
+	h3 {
+		font-size: 1rem;
+		font-weight: 600;
+	}
+
+	p {
+		font-size: 0.9rem;
+		color: inherit;
+		opacity: 0.84;
+	}
+}
+
+.yellow {
+	background: var(--surface-warning-emphasis);
+	color: var(--text-warning-strong);
+}
+
+.pink {
+	background: var(--surface-danger-emphasis);
+	color: var(--text-danger-strong);
+}