From e8d4768149ad299f6ff11b9ab70d453c04d300d8 Mon Sep 17 00:00:00 2001
From: Florian Fischer <florian.fischer@muhq.space>
Date: Thu, 3 Sep 2026 19:42:40 +0200
Subject: cockpit: use colored spans instead of unicode circles

---
 cockpit.css  | 23 +++++++++++++++++++++++
 cockpit.html | 10 +++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/cockpit.css b/cockpit.css
index 4ea6b76..49a3b45 100644
--- a/cockpit.css
+++ b/cockpit.css
@@ -157,6 +157,29 @@
 	flex: 1;
 }
 
+#student-info-dot-green,
+#student-info-dot-orange,
+#student-info-dot-red {
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 2px;
+	height: 1.25rem;
+	width: 1.25rem;
+	transform: translateY(0.125rem);
+}
+
+#student-info-dot-green {
+	background: green;
+}
+
+#student-info-dot-orange {
+	background: orange;
+}
+
+#student-info-dot-red {
+	background: red;
+}
+
 .student-info-points {
 	display: block;
 	font-size: 2rem;
diff --git a/cockpit.html b/cockpit.html
index bda0322..b138e7c 100644
--- a/cockpit.html
+++ b/cockpit.html
@@ -47,14 +47,18 @@
 
 				<div id="student-info-mid" class="student-info-banner">
 					<div id="student-info-green" class="student-info-mid-element">
-						⚫Grüne Punkte <span class="student-info-points" id="student-info-points-green">0</span>
+						<span id="student-info-dot-green"></span>
+						Grüne Punkte
+						<span class="student-info-points" id="student-info-points-green">0</span>
 					</div>
 					<div id="student-info-orange" class="student-info-mid-element">
-						⚫Orangene Punkte
+						<span id="student-info-dot-orange"></span>
+						Orangene Punkte
 						<span class="student-info-points" id="student-info-points-orange">0</span>
 					</div>
 					<div id="student-info-red" class="student-info-mid-element">
-						⚫Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span>
+						<span id="student-info-dot-red"></span>
+						Rote Punkte <span class="student-info-points" id="student-info-points-red">0</span>
 					</div>
 					<div id="student-info-points-sum-container" class="student-info-mid-element">
 						&sum; <span class="student-info-points" id="student-info-points-sum"></span>
-- 
cgit v1.2.3