aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--html/display.html363
-rw-r--r--src/display.css359
-rw-r--r--src/window-utils.js11
3 files changed, 369 insertions, 364 deletions
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)
@@ -174,6 +174,11 @@ let util = {
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")
let px = ev.clientX
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-28 09:37:20 +0000