commit eb6060609174b7ac5d9178082775d2b197bc8a09c375bf634d93edf9098f72d8
Author: cybrkyd <git@cybrkyd.com>
Date: Thu May 7 13:17:09 2026 +0100
Initial commit - idb-notes.html
diff --git a/idb-notes.html b/idb-notes.html
new file mode 100644
index 0000000..136bcd8
--- /dev/null
+++ b/idb-notes.html
@@ -0,0 +1,260 @@
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>IndexedDB Notes</title>
+
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ max-width: 900px;
+ margin: 40px auto;
+ padding: 20px;
+ background: #f4f4f4;
+ }
+
+ h1 {
+ margin-bottom: 20px;
+ }
+
+ textarea {
+ width: 100%;
+ height: 220px;
+ padding: 12px;
+ font-size: 16px;
+ resize: vertical;
+ box-sizing: border-box;
+ }
+
+ button {
+ margin-top: 10px;
+ margin-right: 10px;
+ padding: 10px 16px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+ .docs {
+ margin-top: 40px;
+ }
+
+ .doc {
+ background: white;
+ border: 1px solid #ccc;
+ padding: 12px;
+ margin-bottom: 12px;
+ }
+
+ .doc-title {
+ font-weight: bold;
+ margin-bottom: 6px;
+ }
+
+ .doc-preview {
+ margin-top: 8px;
+ color: #444;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .doc-buttons {
+ margin-top: 10px;
+ }
+
+ .small-btn {
+ padding: 6px 10px;
+ font-size: 14px;
+ }
+ </style>
+ </head>
+ <body>
+
+ <h1>IndexedDB Notes</h1>
+
+ <textarea id="editor" placeholder="Write something..."></textarea>
+ <br>
+
+ <button id="saveBtn">Save Document</button>
+ <button id="newBtn">New Document</button>
+ <button id="exportBtn">Export as TXT</button>
+
+ <div class="docs">
+ <h2>Saved Documents</h2>
+ <div id="docList"></div>
+ </div>
+
+ <script>
+ let db;
+
+ const request = indexedDB.open("NotesDB", 1);
+
+ request.onupgradeneeded = function(event) {
+ db = event.target.result;
+
+ if (!db.objectStoreNames.contains("documents")) {
+ db.createObjectStore("documents", {
+ keyPath: "id",
+ autoIncrement: true
+ });
+ }
+ };
+
+ request.onsuccess = function(event) {
+ db = event.target.result;
+ loadDocuments();
+ };
+
+ request.onerror = function() {
+ alert("Failed to open IndexedDB");
+ };
+
+ function saveDocument(text) {
+ const tx = db.transaction("documents", "readwrite");
+ const store = tx.objectStore("documents");
+
+ const doc = {
+ content: text,
+ created: new Date().toLocaleString()
+ };
+
+ store.add(doc);
+
+ tx.oncomplete = function() {
+ document.getElementById("editor").value = "";
+ loadDocuments();
+ };
+ }
+
+ function loadDocuments() {
+ const tx = db.transaction("documents", "readonly");
+ const store = tx.objectStore("documents");
+
+ const request = store.getAll();
+
+ request.onsuccess = function() {
+ const docs = request.result;
+
+ const list = document.getElementById("docList");
+ list.innerHTML = "";
+
+ docs.reverse();
+
+ docs.forEach(doc => {
+ const div = document.createElement("div");
+ div.className = "doc";
+
+ div.innerHTML = `
+ <div class="doc-title">
+ Document #${doc.id}
+ </div>
+
+ <div>
+ ${doc.created}
+ </div>
+
+ <div class="doc-preview">
+ ${escapeHtml(doc.content.substring(0, 120))}
+ </div>
+
+ <div class="doc-buttons">
+ <button class="small-btn load-btn">
+ Load
+ </button>
+
+ <button class="small-btn delete-btn">
+ Delete
+ </button>
+ </div>
+ `;
+
+ const loadBtn = div.querySelector(".load-btn");
+ const deleteBtn = div.querySelector(".delete-btn");
+
+ loadBtn.onclick = function() {
+ document.getElementById("editor").value = doc.content;
+ };
+
+ deleteBtn.onclick = function() {
+ deleteDocument(doc.id);
+ };
+
+ list.appendChild(div);
+ });
+ };
+ }
+
+ function deleteDocument(id) {
+ if (!confirm("Delete this document?")) {
+ return;
+ }
+
+ const tx = db.transaction("documents", "readwrite");
+ const store = tx.objectStore("documents");
+
+ store.delete(id);
+
+ tx.oncomplete = function() {
+ loadDocuments();
+ };
+ }
+
+ function exportDocument() {
+ const text = document.getElementById("editor").value;
+
+ if (!text.trim()) {
+ alert("Nothing to export");
+ return;
+ }
+
+ const blob = new Blob([text], {
+ type: "text/plain"
+ });
+
+ const url = URL.createObjectURL(blob);
+
+ const a = document.createElement("a");
+ a.href = url;
+
+ const timestamp = new Date()
+ .toISOString()
+ .replace(/[:.]/g, "-");
+
+ a.download = `document-${timestamp}.txt`;
+
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+
+ URL.revokeObjectURL(url);
+ }
+
+ function escapeHtml(text) {
+ const div = document.createElement("div");
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
+ document.getElementById("saveBtn").onclick = function() {
+ const text = document.getElementById("editor").value.trim();
+
+ if (!text) {
+ alert("Enter some text first");
+ return;
+ }
+
+ saveDocument(text);
+ };
+
+ document.getElementById("newBtn").onclick = function() {
+ document.getElementById("editor").value = "";
+ };
+
+ document.getElementById("exportBtn").onclick = function() {
+ exportDocument();
+ };
+ </script>
+
+ </body>
+ </html>