From 9d068f641149ecf4468cee54c42139545dbbeed5 Mon Sep 17 00:00:00 2001
From: Bobuxstation <91587018+Bobuxstation@users.noreply.github.com>
Date: Mon, 27 Nov 2023 20:52:14 +0700
Subject: [PATCH] update

---
 package.json            |  2 +-
 pages/index.html        | 38 +++++++++++++++++++++++++++++++++++---
 scripts/index.js        |  7 +++++++
 scripts/tabs.js         | 41 +++++++++++++++++++++++++++++++++++++++++
 scripts/vmmanagement.js |  2 +-
 style/style.css         | 35 +++++++++++++++++++++++++----------
 6 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 17f1e10..454f984 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "venom86",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "x86 Emulation by Qrodex",
   "main": "index.js",
   "scripts": {
diff --git a/pages/index.html b/pages/index.html
index 50b9644..a4713cc 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -23,6 +23,9 @@
         <button title="About" class="tablinks" onclick="openTab(event, 'about')">
             <i class="fa-solid fa-circle-question" aria-hidden="true"></i>
         </button>
+        <button title="Toggle Sidebar" id="togglesidebarbtn" class="active" onclick="togglesidebar()">
+            <i class="fa-regular fa-square-caret-left" aria-hidden="true"></i>
+        </button>
     </div>
 
     <div id="home" class="tabcontent">
@@ -50,7 +53,7 @@
             <div class="vmtabcontent" id="serial" style="display: none;">
                 <textarea readonly rows=25 cols=60 id="terminal"></textarea>
             </div>
-            <div class="vmtabcontent centered">
+            <div class="vmtabcontent centered" id="novm">
                 <div class="vmitem">
                     <h1>No virtual machines running!</h1>
                     <br>
@@ -62,9 +65,10 @@ <h1>No virtual machines running!</h1>
 
     <div id="about" class="tabcontent">
         <div class="sidebar">
-            <button class="qroui-button">About</button>
+            <button class="qroui-button active attrtablinks" onclick="openattr(event, 'versiontab')">About</button>
+            <button class="qroui-button attrtablinks" onclick="openattr(event, 'v86attr')">v86-module license</button>
         </div>
-        <section class="centered">
+        <section class="centered attrtabcontent" id="versiontab">
             <div class="vmitem">
                 <img src="../style/icon.png" class="logo">
                 <br><br>
@@ -76,6 +80,34 @@ <h1>venom86</h1>
                 Version <span id="version"></span>
             </div>
         </section>
+        <section class="centered attrtabcontent" id="v86attr" style="display: none;">
+            <div class="vmitem">
+                <pre>
+Copyright (c) 2012, The v86 contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+    list of conditions and the following disclaimer.
+2. Redistributions in binary form must reproduce the above copyright notice,
+    this list of conditions and the following disclaimer in the documentation
+    and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+                </pre>
+            </div>
+        </section>
     </div>
 </body>
 
diff --git a/scripts/index.js b/scripts/index.js
index 3f2b802..17b443d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -114,6 +114,13 @@ async function init(name, fda, fdb, cdrom, hda, hdb, ram, vram) {
             clearInterval(vmloop)
             vmbtn.remove()
             preview.remove()
+
+            if (document.getElementsByClassName("vmtablinks").length == 1) {
+                document.getElementById('novm').style.display = 'grid'
+            } else {
+                document.getElementsByClassName("vmtablinks")[1].click()
+            }
+
             await vm.destroy()
         } else {
             if (document.getElementById('myvmsbtn').classList.contains('active')) {
diff --git a/scripts/tabs.js b/scripts/tabs.js
index 8fc4721..d0cf9c9 100644
--- a/scripts/tabs.js
+++ b/scripts/tabs.js
@@ -24,4 +24,45 @@ function openvm(evt, tabname) {
     }
     document.getElementById(tabname).style.display = "grid";
     evt.currentTarget.className += " active";
+}
+
+function openattr(evt, tabname) {
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("attrtabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
+    tablinks = document.getElementsByClassName("attrtablinks");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+    document.getElementById(tabname).style.display = "grid";
+    evt.currentTarget.className += " active";
+}
+
+function togglesidebar() {
+    var r = document.querySelector(':root');
+    var rs = getComputedStyle(r);
+    x = rs.getPropertyValue('--sidebar-width');
+
+    if (x == '20vw') {
+        document.getElementById('togglesidebarbtn').innerHTML = `
+            <i class="fa-regular fa-square-caret-right" aria-hidden="true"></i>
+        `
+        r.style.setProperty('--sidebar-transition', 'all 0.5s ease');
+        r.style.setProperty('--sidebar-width', '0px');
+        setTimeout(() => {
+            r.style.setProperty('--sidebar-transition', 'none');
+        }, 500);
+    } else {
+        document.getElementById('togglesidebarbtn').innerHTML = `
+            <i class="fa-regular fa-square-caret-left" aria-hidden="true"></i>
+        `
+
+        r.style.setProperty('--sidebar-transition', 'all 0.5s ease');
+        r.style.setProperty('--sidebar-width', '20vw');
+        setTimeout(() => {
+            r.style.setProperty('--sidebar-transition', 'none');
+        }, 500);
+    }
 }
\ No newline at end of file
diff --git a/scripts/vmmanagement.js b/scripts/vmmanagement.js
index d0f159f..0aa1161 100644
--- a/scripts/vmmanagement.js
+++ b/scripts/vmmanagement.js
@@ -100,7 +100,7 @@ function loadvms() {
         let mystorages = {}
 
         let vmbtn = document.createElement('button')
-        vmbtn.className = 'qroui-button vmtablinks'
+        vmbtn.className = 'qroui-button'
         vmbtn.innerHTML = thiselem.name
 
         vmbtn.onclick = async function (event) {
diff --git a/style/style.css b/style/style.css
index d26ede7..2306acd 100644
--- a/style/style.css
+++ b/style/style.css
@@ -2,7 +2,7 @@
     margin: 0;
     padding: 0;
     font-family: Inter;
-    box-sizing: border-box;
+    box-sizing: border-box !important;
     color: white;
     transition: all 0.5s ease;
     outline: none;
@@ -13,6 +13,11 @@
     src: url('inter.ttf');
 }
 
+:root {
+    --sidebar-width: 20vw;
+    --sidebar-transition: none;
+}
+
 body,
 html {
     overflow: hidden;
@@ -21,13 +26,13 @@ html {
 
 section {
     background: #1d1d1ddd;
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(100px);
+    -webkit-backdrop-filter: blur(100px);
     float: right;
-    width: calc(100vw - 20vw - 50px);
+    width: calc(100vw - var(--sidebar-width) - 50px);
     height: 100vh;
     overflow: auto;
-    transition: none;
+    transition: var(--sidebar-transition);
 }
 
 #manageVM {
@@ -40,7 +45,6 @@ section {
     padding: 5px;
     background: #3d3d3d;
     height: 100vh;
-    box-sizing: border-box;
     width: 50px;
     float: left;
     transition: none;
@@ -49,12 +53,11 @@ section {
 .sidebar {
     height: 100vh;
     background: #2d2d2d;
-    width: 20vw;
+    width: var(--sidebar-width);
     float: left;
-    box-sizing: border-box;
     overflow: auto;
-    border: #3d3d3d solid 1px;
-    transition: none;
+    transition: var(--sidebar-transition);
+    overflow-x: hidden;
 }
 
 /* ---------------------------------------------- */
@@ -92,6 +95,10 @@ details,
     width: calc(100% - 40px);
     margin: 20px;
     margin-bottom: 0;
+    height: 46px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #manageVM hr {
@@ -178,4 +185,12 @@ fieldset:hover, .vmitem button:hover {
 
 canvas {
     margin: auto;
+}
+
+#togglesidebarbtn {
+    bottom: 0;
+    position: absolute;
+    width: 40px !important;
+    left: 0;
+    margin: 5px;
 }
\ No newline at end of file