lgc
/
DataTools3
mirror of https://github.com/lgc-4/DataTools3.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

some menu changes

This commit is contained in:
Luca Conte 2025-02-17 00:41:17 +01:00
parent 90ed3dd1e5
commit fd99e9424f
4 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -4,6 +4,7 @@
<title>DataTools</title> <title>DataTools</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script src="Box.js"></script> <script src="Box.js"></script>
<script src="menu.js"></script>
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>

10
menu.css
View File

@ -1,8 +1,7 @@
#menu { #menu {
z-index: 100; z-index: 100;
width: 100%; width: 100%;
background-color: #2227; background-color: #222;
backdrop-filter: blur(4px);
box-shadow: 0px 0px 20px 0px black; box-shadow: 0px 0px 20px 0px black;
} }
@ -10,6 +9,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
background-color: var(--blue);
} }
.menuBarItem { .menuBarItem {
@ -19,6 +19,7 @@
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
cursor: pointer; cursor: pointer;
user-select: none;
} }
.menuBarItem:hover:not(.selected) { .menuBarItem:hover:not(.selected) {
@ -27,13 +28,14 @@
} }
.menuBarItem.selected { .menuBarItem.selected {
filter: brightness(1.2); background-color: var(--bg);
box-shadow: inset 0px 0px 5px 0px black;
} }
.menuContentBox { .menuContentBox {
display: none; display: none;
padding: 10px; padding: 10px;
box-sizing: border-box;
width: 100%;
} }
#elementsWrapper { #elementsWrapper {

23
menu.js Normal file
View File

@ -0,0 +1,23 @@
window.addEventListener("DOMContentLoaded", () => {
let tabs = document.getElementsByClassName("menuBarItem");
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", () => {
let contents = document.getElementsByClassName("menuContentBox");
let wasSelected = tabs[i].classList.contains("selected");
for (let j = 0; j < contents.length; j++) {
contents[j].style.display = "none";
}
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove("selected");
}
if (!wasSelected) {
tabs[i].classList.add("selected");
contents[i].style.display = "block";
}
});
}
});

6
style.css
View File

@ -8,6 +8,12 @@
padding: 0; padding: 0;
color: #eee; color: #eee;
outline: none; outline: none;
--bg: #222;
--blue: #177e89;
--red: #db3a34;
--yellow: #ffc857;
--green: #35ce8d;
} }
body, html { body, html {