From 597884f5dd184ec68c43d72d58a92cc16ca4205f Mon Sep 17 00:00:00 2001
From: clerie <git@clerie.de>
Date: Wed, 18 Jun 2025 18:30:43 +0200
Subject: [PATCH] Prototype drafting board

---
 web/index.html | 11 +++++++++-
 web/style.css  | 54 +++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/web/index.html b/web/index.html
index 0ba0d82..7805225 100644
--- a/web/index.html
+++ b/web/index.html
@@ -13,7 +13,16 @@
 		</div>
 
 		<div id="drafting-board">
-			<div id="drafting-board-content"></div>
+			<div id="drafting-board-content">
+				<div class="station-name" style="grid-column: 1 / 4; grid-row: 1;">Göttingen</div>
+				<div class="station-column" style="grid-column: 2 / 3; grid-row: 2 / 5;"></div>
+				<div class="station-name" style="grid-column: 4 / 7; grid-row: 1;">Fulda</div>
+				<div class="station-column" style="grid-column: 5 / 6; grid-row: 2 / 5;"></div>
+				<div class="trip-left" style="grid-column: 1 / 2; grid-row: 2;">16:45 Uhr<br/>Gleis 7</div>
+				<div class="trip" style="grid-column: 3 / 5; grid-row: 2;">ICE 1337</div>
+				<div class="trip-right" style="grid-column: 6 / 7; grid-row: 2;">18:05 Uhr</br>Gleis 3</div>
+
+			</div>
 		</div>
 
 		<div id="journeys-search" class="popup">
diff --git a/web/style.css b/web/style.css
index a5135fa..1b5fdc7 100644
--- a/web/style.css
+++ b/web/style.css
@@ -74,9 +74,57 @@ input.form-control {
 }
 
 #drafting-board-content {
-	border-color: red;
-	border-width: 1px;
-	border-style: solid;
+	display: grid;
+
 	min-width: 1000px;
 	min-height: 300px;
+
+	grid-template-columns: repeat(auto-fit, minmax(30px, auto) 2px minmax(30px, auto));
+}
+
+#drafting-board div {
+	min-height: 0px;
+}
+
+#drafting-board .station-name {
+	margin-left: 20px;
+	margin-right: 20px;
+
+	border-bottom-style: solid;
+	border-bottom-color: black;
+	border-bottom-width: 2px;
+
+	text-align: center;
+}
+
+#drafting-board .station-column {
+	width: 2px;
+	background-color: black;
+}
+
+#drafting-board .trip-left {
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-right: 10px;
+	text-align: right;
+}
+
+#drafting-board .trip {
+	margin: 10px;
+
+	border-style: solid;
+	border-color: black;
+	border-width: 1px;
+	border-radius: 10px;
+
+	padding: 5px;
+
+	background-color: #ff4bb0;
+}
+
+#drafting-board .trip-right {
+	margin-top: auto;
+	margin-bottom: auto;
+	margin-left: 10px;
+	text-align: left;
 }