From 68881f008dcb8815877c8cbf434ec1151ea87326 Mon Sep 17 00:00:00 2001
From: fred <support@qo-op.com>
Date: Tue, 5 Dec 2023 15:13:52 +0100
Subject: [PATCH] button to close / open / enlarge console

---
 templates/UPlanetSector/index.html | 51 ++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)
diff --git a/templates/UPlanetSector/index.html b/templates/UPlanetSector/index.html
index b1fda8b2..49a84066 100644
--- a/templates/UPlanetSector/index.html
+++ b/templates/UPlanetSector/index.html
@@ -121,7 +121,7 @@
 
 #console {
     visibility: hidden;
-    background: rgba(0, 0, 0, 0.9); /* Adjust the background color and opacity as needed */
+    background: rgba(0, 0, 0, 0.9);
     color: white;
     width: 570px;
     height: 480px;
@@ -130,12 +130,33 @@
     left: 0;
     padding: 5px;
     box-sizing: border-box;
+    z-index: 1000; /* Ensure the console appears above other elements */
 }
 
+#toggleConsoleButton {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    cursor: pointer;
+}
+
+#fullscreenButton {
+    position: fixed;
+    top: 10px;
+    left: 70px;
+    cursor: pointer;
+}
+
+iframe {
+    display: block;
+}
   </style>
   </head>
 
  <body>
+
+<button id="toggleConsoleButton" onclick="toggleConsole()">(-/+)</button>
+
     <button style="position: fixed; top: 10px; left: 10px;" onclick="document.getElementById('console').style.visibility = (document.getElementById('console').style.visibility === 'visible' ? 'hidden' : 'visible');">(-/+)</button>
     <div id="demo">
         <div id="description">
@@ -164,9 +185,35 @@
     </div>
     <div id="console">
         <a href="_index.p4n.html" target="aframe">O</a> __ <a href="/ipns/_ZONENS_/TW" target="aframe">TW _ZONE_ </a> __ <a href="/ipns/_UPZONENS_/TW" target="aframe">TW _UPZONE_ </a>
-        <button onclick="document.getElementById('console').style.visibility = 'hidden';"> X </button>
+        <button onclick="hideConsole()"> X </button><button id="fullscreenButton" onclick="toggleConsoleFullScreen()">^^</button>
+
         <iframe name="aframe" id="aframe" src="_index.p4n.html" width="100%" height="100%"></iframe>
     </div>
+
+<script>
+    function toggleConsole() {
+        const console = document.getElementById('console');
+        console.style.visibility = (console.style.visibility === 'visible' ? 'hidden' : 'visible');
+    }
+
+    function hideConsole() {
+        document.getElementById('console').style.visibility = 'hidden';
+    }
+
+    function toggleConsoleFullScreen() {
+        const console = document.getElementById('console');
+
+        if (console.style.width === '100%' && console.style.height === '100%') {
+            console.style.width = '570px';
+            console.style.height = '480px';
+        } else {
+            console.style.width = '100%';
+            console.style.height = '100%';
+        }
+    }
+</script>
+
+
 </body>
 </html>
 
