commit 90ed3dd1e57d98cb06c7f9663e427cae3f1e6536 Author: Luca Conte Date: Mon Feb 17 00:24:38 2025 +0100 initial commit diff --git a/Box.js b/Box.js new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..786a730 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + DataTools + + + + + + +
+
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/menu.css b/menu.css new file mode 100644 index 0000000..41773e0 --- /dev/null +++ b/menu.css @@ -0,0 +1,126 @@ +#menu { + z-index: 100; + width: 100%; + background-color: #2227; + backdrop-filter: blur(4px); + box-shadow: 0px 0px 20px 0px black; +} + +#menuBar { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +.menuBarItem { + display: inline-block; + padding-left: 20px; + padding-right: 20px; + padding-top: 5px; + padding-bottom: 5px; + cursor: pointer; +} + +.menuBarItem:hover:not(.selected) { + background-color: rgba(255,255,255,0.1); + box-shadow: inset 0px 0px 10px -5px rgba(255,255,255,0.3); +} + +.menuBarItem.selected { + filter: brightness(1.2); + box-shadow: inset 0px 0px 5px 0px black; +} + +.menuContentBox { + display: none; + padding: 10px; +} + +#elementsWrapper { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + gap: 20px; +} + +.elementsGroup { + display: flex; + flex-direction: column; + gap: 10px; + justify-content: flex-start; + align-items: center; +} + +.elementsGroup span { + font-size: 1.2em; +} + +.bigIconButton { + display: inline-flex; + flex-direction: column; + align-items: center; + padding: 10px; + gap: 10px; +} + +.bigIcon { + width: 50px; + height: 50px; + background-size: contain; + background-position: 50% 50%; + background-repeat: no-repeat; +} + +#saveIcon { + background-image: url("./img/save-icon.svg"); +} + +#downloadIcon { + background-image: url("./img/download-icon.svg"); +} + +#openIcon { + background-image: url("./img/open-icon.svg"); +} + +#uploadIcon { + background-image: url("./img/download-icon.svg"); + rotate: 180deg; +} + +#loadWrapper { + position: fixed; + top: 0px; + bottom: 0px; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + z-index: 200; + display: none; +} + +#loadDialogue { + background-color: #222; + min-width: 300px; + min-height: 300px; + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: space-between; + gap: 20px; +} + +#loadList { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + max-height: 700px; + overflow-y: auto; + gap: 10px; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..cea006b --- /dev/null +++ b/style.css @@ -0,0 +1,93 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); +@import url("./menu.css"); + +* { + font-family: "Montserrat", sans-serif; + font-weight: 500; + margin: 0; + padding: 0; + color: #eee; + outline: none; +} + +body, html { + height: 100%; + overflow: hidden; +} + +body { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: flex-start; +} + +#canvas { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: #111; + background-image: repeating-linear-gradient(45deg, #222 25%, transparent 25%, transparent 75%, #222 75%, #222), repeating-linear-gradient(45deg, #222 25%, #111 25%, #111 75%, #222 75%, #222); + background-position: 0 0, 40px 40px; + background-size: 80px 80px; + z-index: 0; +} + +#playground { + z-index: 1; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} + + +.box { + position: absolute; + display: inline-flex; + flex-direction: column; + gap: 20px; + padding: 10px; + border: solid 1px #111; + border-top: solid 20px #111; + box-shadow: 0px 0px 20px 0px black; + + background-color: #2227; + backdrop-filter: blur(4px); + + top: 200px; + left: 200px; +} + +.box.dragging { + box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.3); +} + +.boxTitle { + font-size: 1.3em; + font-weight: bold; +} + +input, textarea, select, button { + background-color: #25252577; + padding: 5px; + border: 1px solid #111; +} + +button:hover, select:hover { + filter: brightness(1.1); +} + +button:active { + filter: brightness(1.3); +} + +textarea { + width: 300px; + height: 150px; + font-family: Monospace; + min-width: 200px; +} \ No newline at end of file