From e97c2815bef1b96f145657070118a61cee4eb30f Mon Sep 17 00:00:00 2001
From: Innovation <katieofgeeks@gmail.com>
Date: Tue, 11 Jun 2024 11:20:17 +0100
Subject: [PATCH] Starting to play around with some panel stuff

---
 src/templates/index.html | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/templates/index.html b/src/templates/index.html
index b95c420..2086331 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -153,7 +153,7 @@
 			}
 
 			/* ------------------------------------- */
-			/* Below are all center elements - Comms, Popup, and Info */
+			/* Below are all center elements - Interactions (music, messages, etc), Popup, and Info */
 
 			#centerElements {
 				flex-grow: 2;
@@ -162,13 +162,29 @@
 				/*border: 1px solid #0FF; TODO: Remove this later */
 			}
 
-			#commsPanel {
+			/* Interactions panel (music, messages, etc) */
+
+			#interactionPanel {
 				width: 20%;
 				/*flex-grow: 1;*/
 				margin-left: 2px;
 				/*border: 1px solid #F00; TODO: Remove this later */
 			}
 
+			#commsPanel {
+				width: 100%;
+				height: 100%;
+				display: none;
+				border: 1px solid #00F; /* TODO: Remove this later */
+			}
+
+			#musicPanel {
+				width: 100%;
+				height: 100%;
+				display: none;
+				border: 1px solid #0F0; /* TODO: Remove this later */
+			}
+
 			#popupPanel {
 				flex-grow: 2;
 				margin-left: 2px;
@@ -226,8 +242,14 @@
 				</div>
 			</div>
 			<div id="centerElements">
-				<div id="commsPanel">
-					<!--<p>Comms</p>-->
+				<div id="interactionPanel">
+					<div id="commsPanel">
+						<p>Comms</p>
+					</div>
+					<div id="musicPanel">
+						<p>Music</p>
+					</div>
+					<!--<p>Interactions</p>-->
 				</div>
 				<div id="popupPanel">
 					<!--<p>Popup</p>-->