aboutsummaryrefslogtreecommitdiff
path: root/html/display.html
diff options
context:
space:
mode:
Diffstat (limited to 'html/display.html')
-rw-r--r--html/display.html809
1 files changed, 809 insertions, 0 deletions
diff --git a/html/display.html b/html/display.html
new file mode 100644
index 0000000..09ea35a
--- /dev/null
+++ b/html/display.html
@@ -0,0 +1,809 @@
+<html>
+
+<head>
+ <!--<script src="https://raw.githubusercontent.com/a-weeb-programmer/libcute/main/src/libcute.h"></script> lol-->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <script rel="preconnect" src="./src/jssh.js" crossorigin></script>
+ <link href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap" rel="stylesheet">
+ <style>
+ @font-face {
+ font-family: f98;
+ src: url(src/98.ttf);
+ }
+
+ * {
+ margin: 0;
+ font-family: f98;
+
+ 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;
+ 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;
+ }
+
+ .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%;
+ 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;
+
+ }
+ </style>
+ <script>
+ function compare(a, b) {
+ if (a.left < b.left) {
+ return -1;
+ }
+ if (a.left > b.left) {
+ return 1;
+ }
+ return 1;
+ }
+ let bar_items_left = []
+ function load_bar() {
+ let bar = document.getElementById("bar-items")
+ let windows = document.getElementsByClassName("window")
+ let put = ""
+ let last_left = 0;
+ let temp = []
+ bar.innerHTML = ""
+ for (let i = 0; i != windows.length; i++) {
+ bar.innerHTML += "<div style='left:" + last_left + ";' id='" + windows.item(i).id + "' class='bar-item'>" + windows.item(i).getAttribute("window-name") + "</div>"
+ temp.push({ left: last_left, id: windows.item(i).id, width: bar.children.item(bar.children.length - 1).clientWidth + 5 })
+ last_left += bar.children.item(bar.children.length - 1).clientWidth + 5
+
+
+ }
+ bar_items_left = temp;
+ //bar.innerHTML = put;
+ for (let i = 0; i != bar.children.length; i++) {
+ let elemy = bar.children.item(i)
+ for (let ii = 0; ii != windows.length; ii++) {
+ if (windows.item(ii).id == elemy.id) {
+ //let px = 0, py = 0;
+ elemy.onmousedown = ((ev) => {
+ for (let iii = 0; iii != windows.length; iii++) {
+ windows.item(iii).style.zIndex = 0;
+ bar.children.item(iii).style.zIndex = 0;
+ }
+ document.body.style.cursor = "grabbing"
+ windows.item(ii).style.zIndex = 1
+ bar.children.item(ii).style.zIndex = 1;
+ document.onmouseup = ((ev) => {
+ document.onmousemove = null
+ document.body.style.cursor = ''
+ temp = [];
+ for (let iii = 0; iii != bar.children.length; iii++) {
+ temp.push({ left: bar.children.item(iii).offsetLeft, id: bar.children.item(iii).id, width: bar.children.item(iii).clientWidth + 5 })
+ }
+ temp = temp.sort(compare)
+ bar_items_left = []
+ let len = 0
+ for (let item in temp) {
+ for (let iii = 0; iii != bar.children.length; iii++) {
+ if (bar.children.item(iii).id == temp[item].id) {
+ bar.children.item(iii).style.left = len
+ bar_items_left.push({ left: len, id: bar.children.item(iii).id, width: bar.children.item(iii).clientWidth + 5 })
+ len += temp[item].width
+
+ }
+ }
+
+ }
+
+ })
+ let px = 0;
+ document.onmousemove = ((evm) => {
+ if ((elemy.parentElement.clientWidth * (evm.clientX / elemy.parentElement.clientWidth) - (elemy.parentElement.offsetLeft + document.getElementById("root").offsetLeft + (elemy.clientWidth / 2))) > 0) {
+ if ((elemy.parentElement.clientWidth * (evm.clientX / elemy.parentElement.clientWidth) - (elemy.parentElement.offsetLeft + document.getElementById("root").offsetLeft - (elemy.clientWidth / 2))) < elemy.parentElement.clientWidth - 5) {
+ elemy.style.left = (elemy.parentElement.clientWidth * (evm.clientX / elemy.parentElement.clientWidth) - (elemy.parentElement.offsetLeft + document.getElementById("root").offsetLeft + (elemy.clientWidth / 2)))
+ } else {
+ elemy.style.left = elemy.parentElement.clientWidth - elemy.clientWidth - 5
+ }
+ } else {
+ elemy.style.left = 0;
+ }
+ //console.log((px - evm.clientX), px, evm.clientX, m)
+
+ })
+ })
+ }
+ }
+ }
+ }
+ function window_create(uid, name, content, options = {}) {
+ let lines = content.split("</br>").length
+ let a = ''
+ let minx = 150;
+ let miny = 150;
+ let size = (options.size != undefined) ? ("width:" + options.size.width + "px;height:" + options.size.height + "px;") : ("width:" + Math.max(document.body.clientWidth * .56, minx) + "px;height:" + Math.max(miny, document.body.clientHeight * .30) + "px;");
+
+ a += "<div id='" + uid + "-root' class='window' style=\"" + size + "top:0px;left:0px;position:absolute;\" window-name='" + name + "'>"
+ //console.log(document.getElementById(uid).attributes["window-name"].value)
+ a += "<div id='" + uid + "-head' class='head-border' window-name='" + name + "'> <div style='color:fdffff'>" + name + "</div>"
+ a += "<div id='" + uid + "-close' class='close-button' window-name='" + name + "'>" + `<svg draggable="false" xmlns="http://www.w3.org/2000/svg" style="position:absolute;left:-3px;top:0px;" xmlns:xlink="http://www.w3.org/1999/xlink" width="23px" height="20px" viewBox="0 0 23 20" version="1.1">
+<g id="surface1">
+<path style=" stroke:none;fill-rule:evenodd;fill:rgb(2.745098%,3.137255%,2.745098%);fill-opacity:1;" d="M 8.476562 6.042969 C 9.042969 6.042969 9.613281 6.042969 10.179688 6.042969 C 10.179688 6.332031 10.179688 6.625 10.179688 6.914062 C 10.464844 6.914062 10.746094 6.914062 11.03125 6.914062 C 11.03125 7.203125 11.03125 7.492188 11.03125 7.78125 C 11.597656 7.78125 12.167969 7.78125 12.734375 7.78125 C 12.734375 7.492188 12.734375 7.203125 12.734375 6.914062 C 13.019531 6.914062 13.304688 6.914062 13.585938 6.914062 C 13.585938 6.625 13.585938 6.332031 13.585938 6.042969 C 14.15625 6.042969 14.722656 6.042969 15.289062 6.042969 C 15.289062 6.332031 15.289062 6.625 15.289062 6.914062 C 15.007812 6.914062 14.722656 6.914062 14.4375 6.914062 C 14.4375 7.203125 14.4375 7.492188 14.4375 7.78125 C 14.15625 7.78125 13.871094 7.78125 13.585938 7.78125 C 13.585938 8.074219 13.585938 8.363281 13.585938 8.652344 C 13.304688 8.652344 13.019531 8.652344 12.734375 8.652344 C 12.734375 8.941406 12.734375 9.230469 12.734375 9.523438 C 13.019531 9.523438 13.304688 9.523438 13.585938 9.523438 C 13.585938 9.8125 13.585938 10.101562 13.585938 10.390625 C 13.871094 10.390625 14.15625 10.390625 14.4375 10.390625 C 14.4375 10.679688 14.4375 10.972656 14.4375 11.261719 C 14.722656 11.261719 15.007812 11.261719 15.289062 11.261719 C 15.289062 11.550781 15.289062 11.839844 15.289062 12.128906 C 14.722656 12.128906 14.15625 12.128906 13.585938 12.128906 C 13.585938 11.839844 13.585938 11.550781 13.585938 11.261719 C 13.304688 11.261719 13.019531 11.261719 12.734375 11.261719 C 12.734375 10.972656 12.734375 10.679688 12.734375 10.390625 C 12.167969 10.390625 11.597656 10.390625 11.03125 10.390625 C 11.03125 10.679688 11.03125 10.972656 11.03125 11.261719 C 10.746094 11.261719 10.464844 11.261719 10.179688 11.261719 C 10.179688 11.550781 10.179688 11.839844 10.179688 12.128906 C 9.613281 12.128906 9.042969 12.128906 8.476562 12.128906 C 8.476562 11.839844 8.476562 11.550781 8.476562 11.261719 C 8.761719 11.261719 9.042969 11.261719 9.328125 11.261719 C 9.328125 10.972656 9.328125 10.679688 9.328125 10.390625 C 9.613281 10.390625 9.894531 10.390625 10.179688 10.390625 C 10.179688 10.101562 10.179688 9.8125 10.179688 9.523438 C 10.464844 9.523438 10.746094 9.523438 11.03125 9.523438 C 11.03125 9.230469 11.03125 8.941406 11.03125 8.652344 C 10.746094 8.652344 10.464844 8.652344 10.179688 8.652344 C 10.179688 8.363281 10.179688 8.074219 10.179688 7.78125 C 9.894531 7.78125 9.613281 7.78125 9.328125 7.78125 C 9.328125 7.492188 9.328125 7.203125 9.328125 6.914062 C 9.042969 6.914062 8.761719 6.914062 8.476562 6.914062 C 8.476562 6.625 8.476562 6.332031 8.476562 6.042969 Z M 8.476562 6.042969 "/>
+</g>
+</svg></div></div>`
+ a += "<div id='" + uid + "-resize-n' class='resize-n'></div>"
+ a += "<div id='" + uid + "-resize-s' class='resize-s'></div>"
+ a += "<div id='" + uid + "-resize-e' class='resize-e'></div>"
+ a += "<div id='" + uid + "-resize-w' class='resize-w'></div>"
+ a += "<div style='height:25px;'></div>"
+ a += "<div id='" + uid + "-content-root' class='content-root' style='overflow:scroll;height:calc(100% - 26px);width:100%'>"
+ a += "<div id='" + uid + "-content-content' class='content-content'>" + content + "</div>"
+ a += "<div id='" + uid + "-content-scrollbar' class='scrollbar'><div id='" + uid + "-content-scrollbar-point' class='scrollbar-point'></div>"
+ a += "</div>"
+ a += "</div>"
+
+ a += "<div id='" + uid + "-resize-ne' class='resize-ne'></div>"
+ a += "<div id='" + uid + "-resize-nw' class='resize-nw'></div>"
+ a += "<div id='" + uid + "-resize-sw' class='resize-sw'></div>"
+ a += "<div id='" + uid + "-resize-es' class='resize-es'></div>"
+ document.getElementById("root").innerHTML += a
+ //console.log(document.getElementById(uid + "-content-root").clientHeight / (document.getElementById(uid + "-content-content").clientHeight / document.getElementById(uid + "-content-root").clientHeight))
+ document.getElementById(uid + "-content-scrollbar-point").style.height = (document.getElementById(uid + "-content-root").clientHeight / (document.getElementById(uid + "-content-content").clientHeight / document.getElementById(uid + "-content-root").clientHeight)) + "px"
+ if (document.getElementById(uid + "-content-scrollbar-point").clientHeight > document.getElementById(uid + "-content-root").clientHeight)
+ document.getElementById(uid + "-content-scrollbar").style.display = 'none'
+ //console.log(document.getElementById(uid + "-content-scrollbar-point"))
+ let elems = document.getElementsByClassName("window")
+ for (let i = 0; i != elems.length; i++) {
+ //let elem = elems.item(i).children[0]
+ let elec = elems.item(i).children
+ let elem
+ //console.log(elec)
+ for (let ii = 0; ii != elec.length; ii++) {
+ if (elec.item(ii).className == 'head-border') {
+ elem = elec.item(ii)
+ for (let iii = 0; iii != elem.children.length; iii++) {
+ if (elem.children.item(iii).className == "close-button") {
+ //console.log(elem.children.item(iii))
+ let ii = elems.item(i)
+ elem.children.item(iii).onmousedown = ((ev) => {
+ //console.log(elems.item(i))
+ ii.remove()
+ load_bar()
+ })
+ break
+ }
+ }
+ break
+ }
+ }
+ let elep = elems.item(i)
+ let px = 0, py = 0;
+
+ if (elem.className == 'head-border') {
+ elemhb = elem
+ elem.onmousedown = ((ev) => {
+
+ for (let i = 0; i != elems.length; i++) {
+ elems.item(i).style.zIndex = 0;
+ }
+ elep.style.zIndex = 1
+ document.body.style.cursor = 'grabbing'
+ elemhb.style.cursor = 'grabbing'
+ px = ev.clientX
+ py = ev.clientY
+ document.body.style.userSelect = "none"
+ document.onmouseup = ((evu) => {
+ document.body.style.userSelect = "unset"
+ document.onmousemove = null
+ document.onmouseup = null
+ document.body.style.cursor = ''
+ elemhb.style.cursor = 'grab'
+ })
+ document.onmousemove = ((evm) => {
+ //console.log(elem.id)
+ elep.style.left = (elep.offsetLeft - (px - evm.clientX)) + "px"
+ elep.style.top = (elep.offsetTop - (py - evm.clientY)) + "px"
+ px = (evm.clientX)
+ py = (evm.clientY)
+ })
+ })
+ }
+
+
+ ['resize-s', 'resize-n', 'resize-e', 'resize-w', 'resize-ne', 'resize-nw', 'resize-sw', 'resize-es'].forEach((sel) => {
+ for (let ii = 0; ii != elec.length; ii++) {
+ if (elec.item(ii).className == sel) {
+ elem = elec.item(ii)
+ break
+ }
+ }
+ if (elem.className == sel) {
+ elem.onmousedown = ((ev) => {
+ px = ev.clientX
+ py = ev.clientY
+ if (sel == 'resize-s' || sel == 'resize-n')
+ document.body.style.cursor = 'ns-resize'
+ else if (sel == 'resize-e' || sel == 'resize-w')
+ document.body.style.cursor = 'ew-resize'
+ else if (sel == 'resize-ne')
+ document.body.style.cursor = 'ne-resize'
+ else if (sel == 'resize-nw')
+ document.body.style.cursor = 'nw-resize'
+ else if (sel == 'resize-sw')
+ document.body.style.cursor = 'sw-resize'
+ else if (sel == 'resize-es')
+ document.body.style.cursor = 'se-resize'
+ document.body.style.userSelect = "none"
+ document.onmouseup = ((evu) => {
+ document.body.style.userSelect = "unset"
+ document.onmousemove = null
+ document.onmouseup = null
+ document.body.style.cursor = ''
+
+ })
+ document.onmousemove = ((evm) => {
+ if (sel == 'resize-s' || sel == 'resize-es' || sel == 'resize-sw')
+ if ((parseInt(elep.style.height.replace("px", "")) + (evm.clientY - py)) > miny) {
+ elep.style.height = (parseInt(elep.style.height.replace("px", "")) + (evm.clientY - py)) + "px"
+ } if (sel == 'resize-n' || sel == 'resize-nw' || sel == 'resize-ne') {
+ if ((parseInt(elep.style.height.replace("px", "")) - (evm.clientY - py)) > miny) {
+ elep.style.top = (elep.offsetTop - (py - evm.clientY)) + "px"
+ elep.style.height = (parseInt(elep.style.height.replace("px", "")) - (evm.clientY - py)) + "px"
+ //console.log(elem.parentElement.parentElement.parentElement)
+
+ //document.getElementById(uid + "-content-scrollbar-point").style.height = (document.getElementById(uid + "-content-root").clientHeight / (document.getElementById(uid + "-content-content").clientHeight / document.getElementById(uid + "-content-root").clientHeight)) + "px"
+ }
+ }
+ if (sel == 'resize-e' || sel == 'resize-es' || sel == 'resize-ne')
+ if ((parseInt(elep.style.width.replace("px", "")) + (evm.clientX - px)) > minx) {
+ elep.style.width = (parseInt(elep.style.width.replace("px", "")) + (evm.clientX - px)) + "px"
+ } if (sel == 'resize-w' || sel == 'resize-nw' || sel == 'resize-sw') {
+ //console.log((parseInt(elep.style.width.replace("px", "")) - (evm.clientX - px)))
+ if ((parseInt(elep.style.width.replace("px", "")) - (evm.clientX - px)) > minx) {
+ elep.style.left = (elep.offsetLeft - (px - evm.clientX)) + "px"
+ elep.style.width = (parseInt(elep.style.width.replace("px", "")) - (evm.clientX - px)) + "px"
+ }
+ }
+ //
+ //if (sel == 'resize-s' || sel == 'resize-n' || ) {
+ for (let iii = 0; iii != elem.parentElement.parentElement.parentElement.children.length; iii++) {
+ //console.log(elem.parentElement.parentElement.parentElement.children.item(iii).className)
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).className == "content-root") {
+
+ for (let iiii = 0; iiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiii++) {
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).className == "scrollbar") {
+ for (let iiiii = 0; iiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.length; iii++) {
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).className == "scrollbar-point") {
+ for (let iiiiii = 0; iiiiii != elem.parentElement.parentElement.parentElement.children.item(iii).children.length; iiiiii++) {
+
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).className == "content-content") {
+
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) < elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight) {
+ elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "block"
+ elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.height = (elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight / (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiiiii).clientHeight / elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight))
+ if (elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).offsetTop > elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight) {
+ elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).clientHeight - elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).clientHeight
+ }
+ //elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top = Math.min(elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).children.item(iiiii).style.top, elem.parentElement.parentElement.parentElement.children.item(iii).clientHeight)
+ } else {
+ elem.parentElement.parentElement.parentElement.children.item(iii).children.item(iiii).style.display = "none"
+ }
+ break
+ }
+ }
+
+ break
+ }
+ }
+ break
+ }
+ }
+ break
+ }
+ }
+ //}
+ py = (evm.clientY)
+ px = (evm.clientX)
+
+ })
+ })
+ }
+ })
+ let temp
+ let scrolling = false
+ for (let ii = 0; ii != elec.length; ii++) {
+
+ if (elec.item(ii).className == 'content-root') {
+ //console.log(elec.item(ii).className)
+ temp = elec.item(ii).children
+ for (let iii = 0; iii != temp.length; iii++) {
+ //console.log(temp.item(iii).className)
+ if (temp.item(iii).className == 'scrollbar') {
+ temp = temp.item(iii).children
+ for (let iiii = 0; iiii != temp.length; iiii++) {
+ //console.log(temp.item(iiii).className)
+ if (temp.item(iiii).className == 'scrollbar-point') {
+ elem = temp.item(iiii)
+
+ for (let iiiii = 0; iiiii != elec.item(ii).children.length; iiiii++) {
+
+ if (elec.item(ii).children.item(iiiii).className == 'content-content') {
+ //console.log(elec.item(ii).children.item(iiiii), "hi")
+ con = elec.item(ii).children.item(iiiii)
+ elec.item(ii).onscroll = ((ev) => {
+ if (!scrolling) {
+ let aaaa = (elec.item(ii).clientHeight - elem.clientHeight)
+ let scro = (elec.item(ii).scrollTop / (elec.item(ii).scrollHeight - elec.item(ii).clientHeight))
+ //console.log(aaaa, (elec.item(ii).scrollHeight - elec.item(ii).clientTop))
+ elem.style.top = scro * aaaa
+ }
+ })
+ elem.onmousedown = ((ev) => {
+ let thi = elec.item(ii).children.item(iiiii)
+ let eel = temp.item(iiii)
+ document.body.style.cursor = 'grabbing'
+ eel.style.cursor = 'grabbing'
+ py = ev.clientY
+ document.body.style.userSelect = "none"
+ document.onmouseup = ((evu) => {
+ document.body.style.userSelect = "unset"
+ document.onmousemove = null
+ document.onmouseup = null
+ document.body.style.cursor = ''
+ eel.style.cursor = 'grab'
+ scrolling = false
+ })
+ document.onmousemove = ((evm) => {
+ scrolling = true
+ let z = (eel.offsetTop - (py - evm.clientY))
+ //let b = (elem.clientHeight - elem.offsetTop - (py - evm.clientY))
+ //console.log(elem.clientHeight/2 - elem.offsetTop - (py - evm.clientY))
+ //console.log(z, elem.parentElement.clientHeight - elem.clientHeight)
+ if (z >= 0 && z < eel.parentElement.clientHeight - eel.clientHeight) {
+ eel.style.top = z
+ thi.parentElement.scrollTop = ((z / (eel.parentElement.clientHeight - eel.clientHeight)) * (thi.scrollHeight - eel.parentElement.clientHeight + 24))
+ } else {
+ if (z < elem.parentElement.clientHeight - elem.clientHeight) {
+ elem.style.top = 0
+ } else {
+ elem.style.top = elem.parentElement.clientHeight - elem.clientHeight
+ }
+ }
+ py = (evm.clientY)
+ })
+ })
+ break
+ }
+ }
+
+ break
+ }
+ }
+ break
+ }
+ }
+ break
+ }
+ }
+ px = 0, py = 0;
+
+ if (elem.className == 'scrollbar-point') {
+
+
+ }
+
+
+
+ }
+
+
+
+ }
+ let fs = [{ name: "apps", perms: { r: true }, dir: true, content: [{ name: "notepad", icon: "./src/img/notepad.png", perms: { r: true }, dir: false, content: "window Notepad <input>uwu" }, { name: "cmd", icon: "./src/img/cmd.png", perms: { r: true }, dir: false, content: "window" }] }]
+ function shortcut(i) {
+ let parsed = i.split("\n")
+ for (let line of parsed) {
+ let words = line.split(" ")
+ if (words[0] == "window") {
+ let t = line.split(" ")
+ t.splice(0, 2)
+ window_create(0, words[1], t.join(" "), { size: { width: 500, height: 500 } })
+ load_bar()
+ }
+ }
+ }
+ function close_menu() {
+ let items = document.getElementsByClassName("bar-menu-item")
+ for (let item = 0; item != items.length; item++) {
+ let i_c = items.item(item).children
+ for (let i = 0; i != i_c.length; i++) {
+ let id = i_c.item(i)
+ if (id.className == "bar-menu-more-root") {
+ id.style.display = "none"
+ }
+ }
+ }
+ document.getElementById("bar-menu-root").style.display = "none"
+ main()
+ }
+ function main() {
+ document.getElementById("bar-menu").onclick = ((ev) => {
+ if (document.getElementById("bar-menu-root").style.display == "block")
+ document.getElementById("bar-menu-root").style.display = "none"
+ else
+ document.getElementById("bar-menu-root").style.display = "block"
+ })
+ let items = document.getElementsByClassName("bar-menu-item")
+ for (let item = 0; item != items.length; item++) {
+ let i_c = items.item(item).children
+ for (let i = 0; i != i_c.length; i++) {
+ let id = i_c.item(i)
+ if (id.className == "bar-menu-more-root") {
+ let dd = (jssh.set_wd(items.item(item).getAttribute("dir")))
+ /*
+ <div class="bar-menu-item" id="bar-menu-favorites"><img class="bar-menu-image"
+ src="./src/img/notepad.png">
+ <div class="bar-menu-text">Notepad--</div>
+ </div>
+ */
+ id.innerHTML = ''
+ let ins = ""
+ for (let ite = 0; ite != dd.length; ite++) {
+
+ ins += `<div class="bar-menu-item" onclick="shortcut('${dd[ite].content}');close_menu();" id="bar-menu-${dd[ite].name}">`
+ if (dd[ite].icon)
+ ins += `<img class="bar-menu-image" src="${dd[ite].icon}">`
+ ins += `<div class="bar-menu-text">${dd[ite].name}</div></div>`
+
+
+ //console.log(id.children.item(ite))
+ }
+ id.innerHTML = ins;
+ items.item(item).onmouseover = ((ev) => {
+ id.style.display = "block"
+ items.item(item).onmouseout = ((ev) => {
+ id.style.display = "none"
+ })
+ })
+ break;
+ }
+ }
+ }
+ }
+
+ </script>
+</head>
+
+<body onload="main()">
+ <div id="root">
+ <div id="bar">
+ <div id="bar-children">
+ <div id="bar-menu"><img src="./src/img/windows.png">
+ <pre> </pre>Start
+
+ </div>
+ <div id="bar-items">
+ </div>
+
+
+ </div>
+ </div>
+ <div id="bar-menu-root">
+ <div class="bar-menu-item" id="bar-menu-windows-update"><img class="bar-menu-image"
+ src="./src/img/update.png">
+ <div class="bar-menu-text">Windows Update</div>
+
+ </div>
+ <div class="bar-menu-separator"></div>
+ <div class="bar-menu-item" id="bar-menu-programs" dir="/apps/"><img class="bar-menu-image"
+ src="./src/img/programs.png">
+ <div class="bar-menu-text">Programs</div>
+ <div class="bar-menu-more"></div>
+ <div class="bar-menu-more-root">
+ <!--
+ <div class="bar-menu-item" id="bar-menu-favorites" shortcut-path=""><img class="bar-menu-image"
+ src="./src/img/notepad.png">
+ <div class="bar-menu-text">Notepad</div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-favorites"><img class="bar-menu-image"
+ src="./src/img/notepad.png">
+ <div class="bar-menu-text">Notepad--</div>
+ </div>-->
+ </div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-favorites"><img class="bar-menu-image"
+ src="./src/img/favorites.png">
+ <div class="bar-menu-text">Favorites</div>
+ <div class="bar-menu-more"></div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-docs"><img class="bar-menu-image" src="./src/img/docs.png">
+ <div class="bar-menu-text">Documents</div>
+ <div class="bar-menu-more"></div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-settings"><img class="bar-menu-image"
+ style="height:27px;padding-left:2px" src="./src/img/settings.png">
+ <div class="bar-menu-text">Settings</div>
+ <div class="bar-menu-more"></div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-find"><img class="bar-menu-image"
+ style="height:27px;padding-left:2px" src="./src/img/find.png">
+ <div class="bar-menu-text">Find</div>
+ <div class="bar-menu-more"></div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-help"><img class="bar-menu-image" src="./src/img/help.png">
+ <div class="bar-menu-text">Help</div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-run"><img class="bar-menu-image" src="./src/img/run.png">
+ <div class="bar-menu-text">Run</div>
+ </div>
+ <div class="bar-menu-separator"></div>
+ <div class="bar-menu-item" id="bar-menu-help"><img class="bar-menu-image" style="height:24px"
+ src="./src/img/log-off.png">
+ <div class="bar-menu-text">Log Off...</div>
+ </div>
+ <div class="bar-menu-item" id="bar-menu-run"><img class="bar-menu-image" style="height:24px"
+ src="./src/img/shut-down.png">
+ <div class="bar-menu-text">Shut Down...</div>
+ </div>
+ </div>
+ </div>
+</body>
+
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-03 17:51:12 +0000