From 5ab20576f6921bf8dde7905daea65e78ce220fd8 Mon Sep 17 00:00:00 2001
From: Noah Metz <noah@metznet.ca>
Date: Tue, 2 Jan 2024 17:19:43 -0700
Subject: [PATCH] Added basic style + html for panel

---
 src/routes/+page.svelte | 125 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 85ead14..ed2517c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,4 +22,127 @@ client.on("message", (topic, message) => {
 
 </script>
 
-<h1>MQTT Test Page</h1>
+<div class="side-display container" style="border: 1px solid black;">
+  <div class="score-grid">
+    <p id="event-name">Mecha Mayhem 2024</p>
+    <p id="timer">10:00</p>
+    <p id="match">Qualifications 1</p>
+
+    <p id="score-red">40</p>
+    <p id="score-blue">120</p>
+
+    <div class="teams" id="teams-red"><p>6659A</p><p>6659B</p></div>
+    <div class="teams" id="teams-blue"><p>210Y</p><p>210Z</p></div>
+  </div>
+</div>
+
+<div class="center-display container" style="border: 1px solid black;">
+  <div class="score-grid">
+    <p id="event-name">Mecha Mayhem 2024</p>
+    <p id="timer">10:00</p>
+    <p id="match">Qualifications 1</p>
+
+    <p id="score-red">40</p>
+    <p id="score-blue">120</p>
+
+    <div class="teams" id="teams-red"><p>6659A</p><p>6659B</p></div>
+    <div class="teams" id="teams-blue"><p>210Y</p><p>210Z</p></div>
+  </div>
+</div>
+
+<style>
+:global(html){
+  background-color: transparent;
+}
+
+:global(body){
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+p {
+  margin: 0px;
+  color: gray;
+}
+
+.teams {
+  width: 100%;
+  height: 100%;
+  font-size: 1.5cqw;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+#teams-red {
+  flex-direction: row;
+  grid-area: red-bot;
+}
+
+#teams-blue {
+  flex-direction: row-reverse;
+  grid-area: blue-bot;
+}
+
+#score-red {
+  grid-area: red-mid;
+
+  font-size: 5cqw;
+  justify-self: left;
+}
+
+#score-blue {
+  grid-area: blue-mid;
+
+  font-size: 5cqw;
+  justify-self: right;
+}
+
+#match {
+  grid-area: bot;
+  font-size: 2cqw;
+}
+
+#event-name {
+  grid-area: top;
+  font-size: 2cqw;
+}
+
+#timer {
+  grid-area: mid;
+  font-size: 5cqw;
+}
+
+.container {
+  container-type: size;
+}
+
+div.score-grid {
+  width: 100%;
+  height: 100%;
+  display: grid;
+
+  justify-items: center;
+  align-items: center;
+
+  grid-template: 30% 40% 30% / 35% 30% 35%;
+
+  grid-template-areas:
+  "red-top top blue-top"
+  "red-mid mid blue-mid"
+  "red-bot bot blue-bot";
+}
+
+.side-display {
+  background-color: transparent;
+  width: 896px;
+  height: 128px;
+}
+
+.center-display {
+  background-color: transparent;
+  width: 1176px;
+  height: 168px;
+}
+</style>