From c84cd0f9f29c537fe36cfb7e4805f15827e72f2c Mon Sep 17 00:00:00 2001
From: Turtle <104490184+CodingTurtle2@users.noreply.github.com>
Date: Fri, 19 Dec 2025 12:06:38 +0100
Subject: [PATCH] g2

---
 auth.js                           |   4 +
 basic.js                          |  59 --------
 Example.html => help/Example.html |  33 ++++-
 help/documentation.md             |  51 +++++++
 basic.css => lib/basic.css        |  28 +++-
 lib/basic.js                      | 230 ++++++++++++++++++++++++++++++
 6 files changed, 338 insertions(+), 67 deletions(-)
 create mode 100644 auth.js
 delete mode 100644 basic.js
 rename Example.html => help/Example.html (80%)
 create mode 100644 help/documentation.md
 rename basic.css => lib/basic.css (87%)
 create mode 100644 lib/basic.js

diff --git a/auth.js b/auth.js
new file mode 100644
index 0000000..5c1b74e
--- /dev/null
+++ b/auth.js
@@ -0,0 +1,4 @@
+const couchdb_username = "admin";
+const couchdb_password = "admin";
+
+const couchdb_name = "sassy";
diff --git a/basic.js b/basic.js
deleted file mode 100644
index 721864d..0000000
--- a/basic.js
+++ /dev/null
@@ -1,59 +0,0 @@
-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
diff --git a/Example.html b/help/Example.html
similarity index 80%
rename from Example.html
rename to help/Example.html
index 6c398e1..9a19bcf 100644
--- a/Example.html
+++ b/help/Example.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-<link rel="stylesheet" href="./basic.css">
+<link rel="stylesheet" href="../lib/basic.css">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
@@ -9,11 +9,19 @@
 <overlay onclose="alert('hello');" id="overlay1">test</overlay>
 
 <div class="header_bar_1">
-<div>test1</div><div>test2</div><div>test3</div>
+	<div>
+		test1
+	</div>
+	<div>
+		test2
+	</div>
+	<div>
+		<button class="profile"></button>
+	</div>
 </div>
 <div class="header_bar_1_placeholder"></div>
 
-<span>
+<content>
 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
@@ -22,16 +30,29 @@ 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>
+</content>
 
-
-<script src="./basic.js"></script>
+<script src="../auth.js"></script>
+<script src="../lib/basic.js"></script>
 <script>
 
 showOverlay("overlay1");
 
 //setTimeout(() => hideOverlay("overlay1"), 3000);
 
+async function main() {
+	const couchDB = new CouchDB();
+	await couchDB.set("login", {
+		"username": "bla",
+		"password": "bla"
+	});
+
+	const data = await couchDB.get("login");
+	console.log(JSON.stringify(data));
+	//Gibt { "username": "bla", "password": "bla" } wieder
+}
+main();
+
 </script>
 
 </body>
diff --git a/help/documentation.md b/help/documentation.md
new file mode 100644
index 0000000..d22d6b7
--- /dev/null
+++ b/help/documentation.md
@@ -0,0 +1,51 @@
+##How to import
+
+<link rel="stylesheet" href="./lib/basic.css">
+<script src="./auth.js"></script>
+<script src="./lib/basic.js"></script>
+
+##Overlays
+
+[Erstelle ein element mit <overlay></overla> in html und vergebe eine id. Um das overlay anzuzeigen, rufe showOverlay mit der id auf]
+function showOverlay(string id);
+
+[Schließe das overlay mit der id]
+function hideOverlay(string id);
+
+##CouchDB
+
+//Klasse zum Interagieren mit CouchDB
+//Erstelle eine neue CouchDB-Klasse mit new CouchDB();
+class CouchDB {
+	[Überprüfe, ob CouchDB online ist. (Wird sowieso automatisch gemacht, wenn get, set oder createDB verwendet wird)]
+	async checkOnlineStatus();
+	
+	[Erstellt die Datenbank. (Wird auch automatisch gemacht, wenn man get oder set verwendet)]
+	async createDB();
+	
+	[Bekomme das Objekt, was in der Datenbank unter der id gespeichert wurde]
+	async get(string id);
+	[Setze ein Objekt, was in der Datenbank gespeichert wird (Bedenke: Du musst ein Objekt angeben, alles andere (string, array) wird nicht genommen)]
+	async set(string id, object content, boolean replace = true);
+}
+
+Hinweise:
+- Du brauchst eigentlich nur get oder set (weil alles andere automatisch gemacht wird)
+- Wenn CouchDB offline oder online geht, während das html file läuft, musst du manuell checkOnlineStatus() aufrufen, um den Status zu aktualisieren
+	-> Oder einfach die Seite neuladen :/
+- Vergiss nicht auth.js einzubinden!!! sonst 💥
+
+**Beispiel:**
+async function main() {
+	const couchDB = new CouchDB();
+	await couchDB.set("login", {
+		"username": "bla",
+		"password": "bla"
+	});
+
+	const data = await couchDB.get("login");
+	console.log(JSON.stringify(data));
+	//Gibt { "username": "bla", "password": "bla" } wieder
+}
+main();
+
diff --git a/basic.css b/lib/basic.css
similarity index 87%
rename from basic.css
rename to lib/basic.css
index 7e06254..29ed1ad 100644
--- a/basic.css
+++ b/lib/basic.css
@@ -27,6 +27,22 @@ body, html {
 	background-color: var(--accent_color_fg);
 	color: black;
 }
+selectable {
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+/* ----------- elements ----------- */
+
+.profile {
+	width: 58px;
+	height: 58px;
+	border-radius: 50%;
+	background: var(--accent_color_bg);
+	border: none;
+}
 
 /* ----------- overlay ----------- */
 
@@ -75,6 +91,8 @@ overlay {
 	background: var(--accent_color_bg);
 	border-radius: var(--border-radius);
 	border: none;
+	font-size: 20px;
+	font-weight: 600;
 }
 
 /* ----------- headerbar ----------- */
@@ -89,7 +107,7 @@ overlay {
 	backdrop-filter: blur(10px);
 	padding: 15px;
 	box-shadow: var(--def-shadow);
-	height: 70px;
+	height: 75px;
 	align-items: center;
 	display: flex;
 	flex-direction: row;
@@ -109,7 +127,7 @@ overlay {
 }
 
 .header_bar_1_placeholder {
-	height: 70px;
+	height: 75px;
 }
 .header_bar_1_undocked {
 	width: 96%;
@@ -121,6 +139,12 @@ overlay {
 	width: 100%;
 	animation: header_bar_1_docked_ani 0.5s ease-in-out;
 }
+
+content {
+	display: block;
+	padding: 15px;
+}
+
 @keyframes header_bar_1_undocked_ani {
 	from {
 		width: 100%;
diff --git a/lib/basic.js b/lib/basic.js
new file mode 100644
index 0000000..eadb51f
--- /dev/null
+++ b/lib/basic.js
@@ -0,0 +1,230 @@
+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();
+
+
+
+/* ----------- couch db ----------- */
+
+//http://127.0.0.1:5984/_utils/#_config/couchdb@127.0.0.1
+class CouchDB {
+	static _default_url = "http://127.0.0.1:5984/";
+	
+	constructor() {
+		this._does_auth_exists_err();
+		this.request = new XMLHttpRequest();
+		this.db_name = couchdb_name;
+		this.is_online = 2;
+	}
+	
+	//private methods
+	
+	_does_auth_exists() {
+		return (
+			typeof(couchdb_username) == "string" &&
+			typeof(couchdb_password) == "string" &&
+			typeof(couchdb_name) == "string"
+		);
+	}
+	_does_auth_exists_err() {
+		if (!this._does_auth_exists()) throw 'Keine Auth vorhanden. Digga, mach mal <script src="./auth.js"></script>';
+	}
+	_is_error_missing_database(errReason) {
+		return errReason === "no_db_file" || errReason === "Database does not exist.";
+	}
+	_is_error_missing_data(errReason) {
+		return errReason === "missing";
+	}
+	async _ping() {
+		try {
+			const response = await fetch(CouchDB._default_url, {
+				method: "GET"
+			});
+			
+			return response.ok;
+		} catch(err) {
+			return false;
+		}
+	}
+	
+	_send_db_request(method, url, body = null, errorHandling = true) {
+		return new Promise(async (resolve, reject) => {
+			if (this.is_online == 2) {
+				await this.checkOnlineStatus();
+			}
+			if (this.is_online != 1) {
+				reject("CouchDB is not online!");
+				return;
+			}
+			
+			const dburl = CouchDB._default_url + this.db_name + "/" + url;
+			const request = this.request;
+			
+			this.request.onreadystatechange = () => {
+				if (request.readyState != 4) return;
+								
+				try {
+					if (request.status == 200 || request.status == 201) {
+						var response = JSON.parse(request.responseText);
+						resolve(response);
+					}
+					//errors
+					else if (request.status == 404) {
+						var json = JSON.parse(request.responseText);
+						if (this._is_error_missing_data(json.reason)) {
+							resolve(null);
+						} else if (errorHandling && this._is_error_missing_database(json.reason)) {
+							this.createDB().then((value) => {
+								this._send_db_request(method, url, body, false).then((value) => {
+									resolve(value);
+								}).catch((err) => {
+									reject(err);
+								});
+							}).catch((err) => {
+								reject(err);
+							});
+						} else {
+							reject(`Database not found: ${request.status} (Reason: ${reason.json})`);
+						}
+					} else {
+						reject(`Unexpected status: ${request.status} (Response: ${
+							request.responseText
+						})`);
+					}
+				} catch(err) {
+					reject("Unexpected error: " + err);
+				}
+			};
+			
+			this.request.open(method, dburl, true);
+			
+			this.request.setRequestHeader("Authorization", "Basic " + btoa(
+				couchdb_username + ":" + couchdb_password
+			));
+			this.request.setRequestHeader("Content-type", "application/json");
+			
+			this.request.send(body);
+		});
+	}
+	async _get_db_data(id) {
+		return await this._send_db_request("GET", id);
+	}
+	
+	//public methods
+	
+	async checkOnlineStatus() {
+		const res = await this._ping();
+		
+		if (res === true) {
+			this.is_online = 1;
+		} else {
+			this.is_online = 0;
+		}
+		
+		return res;
+	}
+	async createDB() {
+		await this._send_db_request("PUT", "", null, false);
+	}
+	async get(id) {
+		const res = await this._get_db_data(id);
+		delete res["_id"];
+		delete res["_rev"];
+		return res;
+	}
+	async set(id, content, replace = true) {
+		try {
+			if (typeof (content) != "object") throw "basic.js - CouchDB->set: content is not from type object (type = " + typeof(content) + ")";
+			
+			let existingDoc;
+			try {
+				existingDoc = await this._get_db_data(id);
+			} catch (err) {
+				existingDoc = null;
+			}
+			
+			if (existingDoc) {
+				if (replace) {
+					content = {
+						...content,
+						_id: existingDoc._id,
+						_rev: existingDoc._rev
+					};	
+				} else {
+					content = {
+						...existingDoc,
+						...content,
+						_rev: existingDoc._rev
+					};
+				}
+			}
+			const res = await this._send_db_request("PUT", id, JSON.stringify(content));
+			return {
+				"type": "success",
+				"message": res
+			};
+		} catch(err) {
+			console.error(err);
+			return {
+				"type": "error",
+				"message": err
+			};
+		}
+	}
+}
\ No newline at end of file