From 618765be31066b7d47bb602fac4cb32f1ff64cc5 Mon Sep 17 00:00:00 2001
From: amy <ameliasquires@disroot.org>
Date: Wed, 22 Feb 2023 19:05:55 +0000
Subject: quick fix and split html

---
 html/display.html   | 363 +---------------------------------------------------
 src/display.css     | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++
 src/window-utils.js |  11 +-
 3 files changed, 369 insertions(+), 364 deletions(-)
 create mode 100644 src/display.css

diff --git a/html/display.html b/html/display.html
index c9e360c..d971404 100644
--- a/html/display.html
+++ b/html/display.html
@@ -8,367 +8,8 @@
     <script rel="preconnect" src="./src/window-utils.js" crossorigin></script>
     <link href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
-    <style>
-        @font-face {
-            font-family: f98;
-            src: url(src/98.ttf);
-        }
-
-        * {
-            margin: 0;
-            font-family: f98;
-            font-size: 15px;
-            scrollbar-width: none;
-        }
-
-        .window {
-            width: 56%;
-            max-width: inherit;
-            height: 30%;
-            max-height: inherit;
-            background-color: #c3c3c3;
-            position: absolute;
-        }
-
-        .head-border {
-            width: calc(100%);
-            background: linear-gradient(90deg, rgba(1, 0, 129, 1) 0%, rgba(0, 128, 128, 1) 100%);
-            height: 25px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            cursor: grab;
-        }
-
-        .close-button {
-            width: calc(25px - 7px);
-            background-color: #c3c3c3;
-            height: calc(100% - 7px);
-            position: absolute;
-            top: 3.5px;
-            right: 3.5px;
-            cursor: initial;
-
-        }
-
-        #root {
-            position: relative;
-            background-color: cornsilk;
-            background-image: url("src/img/wallpaper.jpg");
-            background-repeat: no-repeat;
-            background-origin: content-box;
-            background-attachment: fixed;
-            background-position: center center;
-            -webkit-background-size: cover;
-            -moz-background-size: cover;
-            -o-background-size: cover;
-            background-size: cover;
-            width: 90%;
-            height: 90%;
-            margin-left: 5%;
-            margin-top: 2.5%;
-            margin-bottom: 2.5%;
-            overflow: hidden;
-
-        }
-
-        .resize-n {
-            position: absolute;
-            top: -1px;
-            width: 100%;
-            height: 7px;
-            background-color: rgba(0, 0, 0, 0);
-            cursor: ns-resize;
-        }
-
-        .resize-s {
-            position: absolute;
-            bottom: -1px;
-            width: 100%;
-            height: 7px;
-            background-color: rgba(0, 0, 0, 0);
-            cursor: ns-resize;
-        }
-
-        table {
-            display: table;
-        }
-
-        table tr {
-            display: table-cell;
-        }
-
-        table tr td {
-            display: block;
-        }
-
-        .resize-e {
-            position: absolute;
-            right: -3px;
-            width: 7px;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0);
-            cursor: ew-resize;
-        }
-
-        .resize-w {
-            position: absolute;
-            left: -3px;
-            width: 7px;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0);
-            cursor: ew-resize;
-
-        }
-
-        .resize-ne {
-            position: absolute;
-            right: -3px;
-            top: -3px;
-            width: 15px;
-            height: 15px;
-            background-color: rgba(255, 0, 0, 0);
-            cursor: ne-resize;
-
-        }
-
-        .resize-es {
-            position: absolute;
-            right: -3px;
-            bottom: -3px;
-            width: 15px;
-            height: 15px;
-            background-color: rgba(255, 0, 0, 0);
-            cursor: se-resize;
-
-        }
-
-        .resize-sw {
-            position: absolute;
-            left: -3px;
-            bottom: -3px;
-            width: 15px;
-            height: 15px;
-            background-color: rgba(255, 0, 0, 0);
-            cursor: sw-resize;
-
-        }
-
-        .resize-nw {
-            position: absolute;
-            left: -3px;
-            top: -3px;
-            width: 15px;
-            height: 15px;
-            background-color: rgba(255, 0, 0, 0);
-            cursor: nw-resize;
-
-        }
-
-
-        ::-webkit-scrollbar {
-            display: none;
-        }
-
-        .scrollbar {
-            width: 10px;
-            height: calc(100% - 25px);
-            background-color: #aaaaaa;
-            position: absolute;
-            bottom: 0;
-            right: 0;
-        }
-
-        .scrollbar-point {
-            width: 100%;
-            max-height: 100%;
-            background-color: #999999;
-            position: absolute;
-            top: 0;
-            outline: 2px outset;
-            outline-offset: -2px;
-            cursor: grab;
-        }
-
-        #bar {
-            width: 100%;
-            height: 30px;
-            background-color: #c3c3c3;
-            position: absolute;
-            bottom: 0;
-            display: inline-block;
-            left: 0;
-        }
-
-        .bar-item {
-            height: 80%;
-            background-color: #c3c3c3;
-            width: fit-content;
-            padding-left: 20px;
-            padding-right: 20px;
-            border-style: outset;
-            cursor: grab;
-            user-select: none;
-            display: block;
-            position: absolute;
-            top: 0;
-        }
-
-        #bar-items {
-            height: 100%;
-            width: 100%;
-            position: relative;
-            display: block;
-        }
-
-        #bar-children {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            display: flex;
-
-        }
-
-        #bar-menu {
-            display: flex;
-            position: relative;
-            height: calc(100% - 5px);
-            font-size: large;
-            padding: 3px;
-            user-select: none;
-            padding-left: 10px;
-            padding-right: 10px;
-            outline: 2px outset;
-            outline-offset: -2px;
-            cursor: pointer;
-
-
-        }
-
-        #bar-menu-root {
-            padding-top: 2px;
-            height: 280px;
-            width: 180px;
-            background-color: #c7c7c7;
-            position: absolute;
-            border-style: outset;
-            bottom: 30px;
-            display: none;
-        }
-
-        .bar-menu-item {
-            padding-left: 5px;
-            width: 100%;
-            height: 25px;
-            display: flex;
-            font-size: 14px;
-            font-weight: bold;
-            padding-top: 1px;
-            user-select: none;
-        }
-
-        .bar-menu-image {
-            height: 18px;
-            padding-left: 5px;
-            padding-right: 5px;
-        }
-
-        .bar-menu-text {
-            position: absolute;
-            left: 35px;
-            padding-top: 2px;
-        }
-
-        .bar-menu-separator {
-            width: calc(100% - 20px);
-            height: 3px;
-            margin-bottom: 5px;
-            background-color: #a1a1a1;
-            border-style: none none solid none;
-            border-color: #dddddd;
-            border-width: 2px;
-            left: 10px;
-            position: relative;
-        }
-
-        .bar-menu-more {
-            width: 0;
-            height: 0;
-            border-top: 5px solid transparent;
-            border-left: 7px solid #000000;
-            border-bottom: 5px solid transparent;
-            position: absolute;
-            right: 5px;
-            margin-top: 6px;
-
-        }
-
-        .bar-menu-more-root {
-            display: none;
-            width: 120px;
-            height: fit-content;
-            border-style: outset outset outset none;
-            right: -123px;
-            position: absolute;
-            padding-top: 3px;
-            background-color: #c7c7c7;
-            overflow: hidden;
-        }
-
-        .fd-bottom {
-            width: 100%;
-            height: 56px;
-            background-color: #b1b1b1;
-            position: absolute;
-            bottom: 0;
-            overflow: hidden;
-            white-space: nowrap;
-          align-self: flex-end;
-        }
-
-        textarea {
-            resize: none;
-            background-color: rgba(0, 0, 0, 0);
-            border: none;
-            outline: none;
-            overflow: scroll;
-            -webkit-box-shadow: none;
-            -moz-box-shadow: none;
-            box-shadow: none;
-        }
-
-        input {
-            background-color: rgba(0, 0, 0, 0);
-            text-shadow: 0 0 10px white;
-            border: none;
-            color: inherit;
-        }
-
-        input {
-            border: 0;
-            outline: 0;
-        }
-
-        input:focus {
-            outline: none !important;
-        }
-
-        input:hover {
-            cursor: text;
-        }
-
-        button {
-            border-radius: 0px;
-            background-color: #c1c1c1;
-        }
-
-        select,
-        option {
-            background-color: rgba(0, 0, 0, 0);
-            border: none;
-            border-radius: 0;
-        }
-    </style>
+    <title>~nya</title>
+    <link rel="stylesheet" href="src/display.css">
     <script>
         function compare(a, b) {
             if (a.left < b.left) {
diff --git a/src/display.css b/src/display.css
new file mode 100644
index 0000000..ff70443
--- /dev/null
+++ b/src/display.css
@@ -0,0 +1,359 @@
+@font-face {
+            font-family: f98;
+            src: url(98.ttf);
+        }
+
+        * {
+            margin: 0;
+            font-family: f98;
+            font-size: 15px;
+            scrollbar-width: none;
+        }
+
+        .window {
+            width: 56%;
+            max-width: inherit;
+            height: 30%;
+            max-height: inherit;
+            background-color: #c3c3c3;
+            position: absolute;
+        }
+
+        .head-border {
+            width: calc(100%);
+            background: linear-gradient(90deg, rgba(1, 0, 129, 1) 0%, rgba(0, 128, 128, 1) 100%);
+            height: 25px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            cursor: grab;
+        }
+
+        .close-button {
+            width: calc(25px - 7px);
+            background-color: #c3c3c3;
+            height: calc(100% - 7px);
+            position: absolute;
+            top: 3.5px;
+            right: 3.5px;
+            cursor: initial;
+
+        }
+
+        #root {
+            position: relative;
+            background-color: cornsilk;
+            background-image: url("img/wallpaper.jpg");
+            background-repeat: no-repeat;
+            background-origin: content-box;
+            background-attachment: fixed;
+            background-position: center center;
+            -webkit-background-size: cover;
+            -moz-background-size: cover;
+            -o-background-size: cover;
+            background-size: cover;
+            width: 90%;
+            height: 90%;
+            margin-left: 5%;
+            margin-top: 2.5%;
+            margin-bottom: 2.5%;
+            overflow: hidden;
+
+        }
+
+        .resize-n {
+            position: absolute;
+            top: -1px;
+            width: 100%;
+            height: 7px;
+            background-color: rgba(0, 0, 0, 0);
+            cursor: ns-resize;
+        }
+
+        .resize-s {
+            position: absolute;
+            bottom: -1px;
+            width: 100%;
+            height: 7px;
+            background-color: rgba(0, 0, 0, 0);
+            cursor: ns-resize;
+        }
+
+        table {
+            display: table;
+        }
+
+        table tr {
+            display: table-cell;
+        }
+
+        table tr td {
+            display: block;
+        }
+
+        .resize-e {
+            position: absolute;
+            right: -3px;
+            width: 7px;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0);
+            cursor: ew-resize;
+        }
+
+        .resize-w {
+            position: absolute;
+            left: -3px;
+            width: 7px;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0);
+            cursor: ew-resize;
+
+        }
+
+        .resize-ne {
+            position: absolute;
+            right: -3px;
+            top: -3px;
+            width: 15px;
+            height: 15px;
+            background-color: rgba(255, 0, 0, 0);
+            cursor: ne-resize;
+
+        }
+
+        .resize-es {
+            position: absolute;
+            right: -3px;
+            bottom: -3px;
+            width: 15px;
+            height: 15px;
+            background-color: rgba(255, 0, 0, 0);
+            cursor: se-resize;
+
+        }
+
+        .resize-sw {
+            position: absolute;
+            left: -3px;
+            bottom: -3px;
+            width: 15px;
+            height: 15px;
+            background-color: rgba(255, 0, 0, 0);
+            cursor: sw-resize;
+
+        }
+
+        .resize-nw {
+            position: absolute;
+            left: -3px;
+            top: -3px;
+            width: 15px;
+            height: 15px;
+            background-color: rgba(255, 0, 0, 0);
+            cursor: nw-resize;
+
+        }
+
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+
+        .scrollbar {
+            width: 10px;
+            height: calc(100% - 25px);
+            background-color: #aaaaaa;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+        }
+
+        .scrollbar-point {
+            width: 100%;
+            max-height: 100%;
+            background-color: #999999;
+            position: absolute;
+            top: 0;
+            outline: 2px outset;
+            outline-offset: -2px;
+            cursor: grab;
+        }
+
+        #bar {
+            width: 100%;
+            height: 30px;
+            background-color: #c3c3c3;
+            position: absolute;
+            bottom: 0;
+            display: inline-block;
+            left: 0;
+        }
+
+        .bar-item {
+            height: 80%;
+            background-color: #c3c3c3;
+            width: fit-content;
+            padding-left: 20px;
+            padding-right: 20px;
+            border-style: outset;
+            cursor: grab;
+            user-select: none;
+            display: block;
+            position: absolute;
+            top: 0;
+        }
+
+        #bar-items {
+            height: 100%;
+            width: 100%;
+            position: relative;
+            display: block;
+        }
+
+        #bar-children {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+
+        }
+
+        #bar-menu {
+            display: flex;
+            position: relative;
+            height: calc(100% - 5px);
+            font-size: large;
+            padding: 3px;
+            user-select: none;
+            padding-left: 10px;
+            padding-right: 10px;
+            outline: 2px outset;
+            outline-offset: -2px;
+            cursor: pointer;
+
+
+        }
+
+        #bar-menu-root {
+            padding-top: 2px;
+            height: 280px;
+            width: 180px;
+            background-color: #c7c7c7;
+            position: absolute;
+            border-style: outset;
+            bottom: 30px;
+            display: none;
+        }
+
+        .bar-menu-item {
+            padding-left: 5px;
+            width: 100%;
+            height: 25px;
+            display: flex;
+            font-size: 14px;
+            font-weight: bold;
+            padding-top: 1px;
+            user-select: none;
+        }
+
+        .bar-menu-image {
+            height: 18px;
+            padding-left: 5px;
+            padding-right: 5px;
+        }
+
+        .bar-menu-text {
+            position: absolute;
+            left: 35px;
+            padding-top: 2px;
+        }
+
+        .bar-menu-separator {
+            width: calc(100% - 20px);
+            height: 3px;
+            margin-bottom: 5px;
+            background-color: #a1a1a1;
+            border-style: none none solid none;
+            border-color: #dddddd;
+            border-width: 2px;
+            left: 10px;
+            position: relative;
+        }
+
+        .bar-menu-more {
+            width: 0;
+            height: 0;
+            border-top: 5px solid transparent;
+            border-left: 7px solid #000000;
+            border-bottom: 5px solid transparent;
+            position: absolute;
+            right: 5px;
+            margin-top: 6px;
+
+        }
+
+        .bar-menu-more-root {
+            display: none;
+            width: 120px;
+            height: fit-content;
+            border-style: outset outset outset none;
+            right: -123px;
+            position: absolute;
+            padding-top: 3px;
+            background-color: #c7c7c7;
+            overflow: hidden;
+        }
+
+        .fd-bottom {
+            width: 100%;
+            height: 56px;
+            background-color: #b1b1b1;
+            position: absolute;
+            bottom: 0;
+            overflow: hidden;
+            white-space: nowrap;
+          align-self: flex-end;
+        }
+
+        textarea {
+            resize: none;
+            background-color: rgba(0, 0, 0, 0);
+            border: none;
+            outline: none;
+            overflow: scroll;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            box-shadow: none;
+        }
+
+        input {
+            background-color: rgba(0, 0, 0, 0);
+            text-shadow: 0 0 10px white;
+            border: none;
+            color: inherit;
+        }
+
+        input {
+            border: 0;
+            outline: 0;
+        }
+
+        input:focus {
+            outline: none !important;
+        }
+
+        input:hover {
+            cursor: text;
+        }
+
+        button {
+            border-radius: 0px;
+            background-color: #c1c1c1;
+        }
+
+        select,
+        option {
+            background-color: rgba(0, 0, 0, 0);
+            border: none;
+            border-radius: 0;
+        }
\ No newline at end of file
diff --git a/src/window-utils.js b/src/window-utils.js
index 79868f9..aad96fe 100644
--- a/src/window-utils.js
+++ b/src/window-utils.js
@@ -75,7 +75,7 @@ let util = {
                 ttu = true
                 t_ret += rec_bar_fun(f.content,target_full,target_ind+1,padding+5,patt+"/"+f.name)
               }
-              ret += "<div id='"+patt + "/"+ f.name + "' style='white-space:nowrap;width:100%;user-select:none;"+(ttu&&target_ind==target_full.length - 1?"background-color:rgba(0,0,0,.25);":"")+";height:20px;margin-left:"+padding+"'>"+(ttu?"v ":"> ")+f.name+"</div>" + t_ret
+              ret += "<div id='"+patt + "/"+ f.name + "/' style='white-space:nowrap;width:100%;user-select:none;"+(ttu&&target_ind==target_full.length - 1?"background-color:rgba(0,0,0,.25);":"")+";height:20px;margin-left:"+padding+"'>"+(ttu?"v ":"> ")+f.name+"</div>" + t_ret
                 //console.log(false,f.name)
                 
             }
@@ -100,7 +100,7 @@ let util = {
             }
           }
         }*/
-        
+        console.log(inp.path)
         files+= "<div id='"+i+"-fs-left-bar' onscroll='return false;' style='overflow:hidden;height:100%;width:"+l_b_width+"'>"+bar_opt+"</div>"
         files += "<div id='"+i+"-left-pane-resize-e' class='resize-e' style='position:relative;right:1;background-color:#aaaaaa;height:100%;'></div>"
         files += "<div id='"+i+"-fs-inner-cont' style='flex:1;align-content: flex-start;display:flex;flex-direction:row;flex-wrap:wrap'>"
@@ -161,7 +161,7 @@ let util = {
           "'</select>" +
           "<button id='" +
           i +
-          "-content-button-sub' style='width:70px;margin-left:22px;padding-left:15px;padding-right:15px;top:0;text-align: center;display:inline-block;'>cancel</button></div>" +
+          "-content-button2-sub' style='width:70px;margin-left:22px;padding-left:15px;padding-right:15px;top:0;text-align: center;display:inline-block;'>cancel</button></div>" +
           "";
         document.getElementById(i + "-content-content").innerHTML = files;
         //console.log(tfs)
@@ -173,6 +173,11 @@ let util = {
           res(inp.path+document.getElementById(i +"-fd-bottom-sel").value)
           document.getElementById(i+"-root").remove()
             
+          }
+        document.getElementById(i +"-content-button2-sub").onclick = () => {
+          rej("canceled by user")
+          document.getElementById(i+"-root").remove()
+            
           }
         document.getElementById(i+"-left-pane-resize-e").onmousedown = (ev) => {
           let elep = document.getElementById(i+"-fs-left-bar")
-- 
cgit v1.2.3