commit 75e445ef918c7e8c63c2eac43e3376acb8a60c2e
Author: Turtle <104490184+CodingTurtle2@users.noreply.github.com>
Date:   Thu Dec 18 17:23:39 2025 +0100

    g1

diff --git a/Example.html b/Example.html
new file mode 100644
index 0000000..6c398e1
--- /dev/null
+++ b/Example.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+<link rel="stylesheet" href="./basic.css">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<overlay onclose="alert('hello');" id="overlay1">test</overlay>
+
+<div class="header_bar_1">
+<div>test1</div><div>test2</div><div>test3</div>
+</div>
+<div class="header_bar_1_placeholder"></div>
+
+<span>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
+<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
+</span>
+
+
+<script src="./basic.js"></script>
+<script>
+
+showOverlay("overlay1");
+
+//setTimeout(() => hideOverlay("overlay1"), 3000);
+
+</script>
+
+</body>
+</html>
\ 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 = `
+<div onclick="_onOverlayDestroy(this.parentElement);"></div>
+<div>
+	<button class="close" onclick="_onOverlayDestroy(this.parentElement.parentElement);">X</button>
+	${elm.innerHTML}
+</div>
+	`;
+	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