From 75e445ef918c7e8c63c2eac43e3376acb8a60c2e Mon Sep 17 00:00:00 2001 From: Turtle <104490184+CodingTurtle2@users.noreply.github.com> Date: Thu, 18 Dec 2025 17:23:39 +0100 Subject: [PATCH] g1 --- Example.html | 38 +++++++++++++ basic.css | 147 +++++++++++++++++++++++++++++++++++++++++++++++++++ basic.js | 59 +++++++++++++++++++++ 3 files changed, 244 insertions(+) create mode 100644 Example.html create mode 100644 basic.css create mode 100644 basic.js diff --git a/Example.html b/Example.html new file mode 100644 index 0000000..6c398e1 --- /dev/null +++ b/Example.html @@ -0,0 +1,38 @@ + + + + + + + + +test + +
+
test1
test2
test3
+
+
+ + +test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test +
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
+ + + + + + + + \ No newline at end of file diff --git a/basic.css b/basic.css new file mode 100644 index 0000000..7e06254 --- /dev/null +++ b/basic.css @@ -0,0 +1,147 @@ +:root { + --accent_color_fg: #007bff; + --accent_color_bg: rgba(137, 197, 221, 1); + --accent_color_bg_o: rgba(137, 197, 221, 0.5); + --main_color_fg: white; + --main_color_bg: black; + --border-radius: 10px; + --def-shadow: 10px 20px 20px rgb(128, 128, 128, 0.5); +} +* { + box-sizing: border-box; + outline-style: none; +} +body, html { + height: 100%; + margin: 0; + font-family: Arial, Helvetica, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overscroll-behavior: none; + touch-action: pan-x pan-y; + font-size: 20px; +} +::selection { + background-color: var(--accent_color_fg); + color: black; +} + +/* ----------- overlay ----------- */ + +overlay { + display: none; +} +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} +.overlay > div:first-child { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.2); + backdrop-filter: blur(1px); +} +.overlay > div:last-child { + position: fixed; + top: 50%; + left: 50%; + min-width: 250px; + min-height: 150px; + transform: translate(-50%, -50%); + background: var(--accent_color_bg_o); + backdrop-filter: blur(10px); + border-radius: var(--border-radius); + padding: 15px; + text-align: center; + overflow-x: hidden; + overflow-y: auto; + box-shadow: var(--def-shadow); +} +.overlay > div:last-child > .close { + position: absolute; + top: 8px; + right: 8px; + width: 40px; + height: 40px; + background: var(--accent_color_bg); + border-radius: var(--border-radius); + border: none; +} + +/* ----------- headerbar ----------- */ + +.header_bar_1 { + position: fixed; + top: 0%; + left: 50%; + transform: translateX(-50%); + width: 100%; + background: var(--accent_color_bg_o); + backdrop-filter: blur(10px); + padding: 15px; + box-shadow: var(--def-shadow); + height: 70px; + align-items: center; + display: flex; + flex-direction: row; +} +.header_bar_1 > div { + display: table-cell; +} +.header_bar_1 > div:nth-child(1) { + text-align: left; +} +.header_bar_1 > div:nth-child(2) { + text-align: center; + width: 100%; +} +.header_bar_1 > div:nth-child(3) { + text-align: right; +} + +.header_bar_1_placeholder { + height: 70px; +} +.header_bar_1_undocked { + width: 96%; + top: 2%; + border-radius: var(--border-radius); + animation: header_bar_1_undocked_ani 0.5s ease-in-out; +} +.header_bar_1_docked { + width: 100%; + animation: header_bar_1_docked_ani 0.5s ease-in-out; +} +@keyframes header_bar_1_undocked_ani { + from { + width: 100%; + top: 0; + border-radius: 0; + } + to { + width: 96%; + top: 2%; + border-radius: var(--border-radius); + } +} +@keyframes header_bar_1_docked_ani { + from { + width: 96%; + top: 2%; + border-radius: var(--border-radius); + } + to { + width: 100%; + top: 0; + border-radius: 0; + } +} \ No newline at end of file diff --git a/basic.js b/basic.js new file mode 100644 index 0000000..721864d --- /dev/null +++ b/basic.js @@ -0,0 +1,59 @@ +const getId = (id) => document.getElementById(id); + +function showOverlay(id) { + const elm = getId(id); + const overlay = document.createElement("div"); + overlay.classList.add("overlay"); + overlay.setAttribute("name", id); + overlay.innerHTML = ` +
+
+ + ${elm.innerHTML} +
+ `; + document.body.appendChild(overlay); +} +function _onOverlayDestroy(elm) { + const ori_elm = getId(elm.getAttribute("name")); + if (ori_elm) { + const cb = ori_elm.getAttribute("onclose"); + if (typeof(cb) == "string") { + try { eval(cb); } catch(err) { console.error(err); } + } + } + elm.remove(); +} +function hideOverlay(id) { + const elms = document.getElementsByName(id); + for (var i of elms) _onOverlayDestroy(i); +} + + +function _main_events() { + const header_bar_1 = document.querySelector(".header_bar_1"); + if (header_bar_1 != null) { + let isFloating = false; + window.addEventListener("load", function () { + if (window.pageYOffset > 0) { + header_bar_1.style.animationDuration = "0s"; + header_bar_1.classList.add("header_bar_1_undocked"); + isFloating = true; + } + }); + window.addEventListener("scroll", function() { + if (window.pageYOffset > 0 && !isFloating) { + header_bar_1.style.animationDuration = "0.5s"; + header_bar_1.classList.remove("header_bar_1_docked"); + header_bar_1.classList.add("header_bar_1_undocked"); + isFloating = true; + } else if (window.pageYOffset === 0 && isFloating) { + header_bar_1.style.animationDuration = "0.5s"; + header_bar_1.classList.remove("header_bar_1_undocked"); + header_bar_1.classList.add("header_bar_1_docked"); + isFloating = false; + } + }); + } +} +_main_events(); \ No newline at end of file