Added basic panel logic.

www/css/channel.css

@@ -77,6 +77,7 @@ div#chat-panel-div{
 
 div#chat-panel-main-div{
     display: flex;
+    position: relative;
     flex: 1;
     height: 1%;
 }
@@ -88,6 +89,7 @@ div#chat-panel-main-div{
     bottom: 0;
     left: 0;
     width: 0.4em; 
+    z-index: 8;
 }
 
 #chat-panel-multipanel-div{
@@ -210,4 +212,37 @@ input#chat-panel-prompt{
 
 #chat-panel-show-video-icon{
     display: none;
+}
+
+#cpanel-active-div{
+    display: none;
+    position: absolute;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 3;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 30%;
+}
+
+#cpanel-active-header-div{
+    display: flex;
+    margin: 0 auto;
+    width: 96%;
+    height: 1.2em;
+}
+
+#cpanel-active-title{
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#cpanel-active-title-spacer{
+    flex: 1;
+}
+
+#cpanel-active-close-icon{
+    cursor: pointer;
 }

www/css/theme/movie-night.css

@@ -242,4 +242,13 @@ div#chat-panel-control-div{
 select.panel-head-element{
     height: 1.2em;
     margin: auto;
+}
+
+#cpanel-active-div{
+    background-color: var(--bg0);
+}
+
+
+#cpanel-active-header-div{
+    border-bottom: solid 1px var(--accent0);
 }

www/js/channel/channel.js

@@ -30,6 +30,8 @@ class channel{
         this.chatBox = new chatBox(this);
         //Create the User List Object
         this.userList = new userList(this);
+        //Create the Canopy Panel Object
+        this.cPanel = new cPanel(this);
     }
 
     connect(){

www/js/channel/cpanel.js

@@ -0,0 +1,59 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+
+class cPanel{
+    constructor(client){
+        //Client Object
+        this.client = client;
+
+        //Element Nodes
+        this.activePanel = document.querySelector("#cpanel-active-div");
+        this.activePanelTitle = document.querySelector("#cpanel-active-title");
+        this.activePanelDoc = document.querySelector("#cpanel-active-doc");
+        this.activePanelCloseIcon = document.querySelector("#cpanel-active-close-icon");
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.activePanelCloseIcon.addEventListener("click", this.hidePanel.bind(this));
+    }
+
+    async setPanel(panel){
+        this.activePanel.style.display = "flex";
+        this.activePanelTitle.textContent = panel.name;
+        this.activePanelDoc.innerHTML = await panel.getPage();
+    }
+
+    hidePanel(){
+        this.activePanel.style.display = "none";
+    }
+}
+
+class panelObj{
+    constructor(name = "Placeholder Panel", pageURL = "/panel/placeholder"){
+        this.name = name;
+        this.pageURL = pageURL;
+    }
+
+    async getPage(){
+        var response = await fetch(this.pageURL,{
+            method: "GET",
+        });
+
+        return await response.text();
+    }
+}