diff --git a/idb-notes.html b/idb-notes.html
index 42edb37..6ddd881 100644
--- a/idb-notes.html
+++ b/idb-notes.html
@@ -6,99 +6,197 @@
<title>IndexedDB Notes</title>
<style>
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
body {
font-family: Arial, sans-serif;
- max-width: 900px;
- margin: 40px auto;
- padding: 20px;
background: #f4f4f4;
+ min-height: 100vh;
}
- h1 {
- margin-bottom: 20px;
+ .app-wrapper {
+ display: flex;
+ min-height: 100vh;
}
- textarea {
- width: 100%;
- height: 500px;
- padding: 12px;
- font-size: 16px;
- resize: vertical;
- box-sizing: border-box;
+ .saved-column {
+ background: white;
+ width: 300px;
+ flex-shrink: 0;
+ box-shadow: 2px 0 8px rgba(0,0,0,0.1);
+ transition: width 0.3s ease;
+ position: relative;
+ display: flex;
+ flex-direction: column;
}
- .link-btn {
- background: none;
- border: none;
- padding: 0;
- margin-top: 10px;
- margin-right: 14px;
- font-size: 14px;
- color: blue;
- text-decoration: underline;
- cursor: pointer;
- font-family: inherit;
+ .saved-column.collapsed {
+ width: 50px;
}
- .docs {
- margin-top: 40px;
+ .saved-column.collapsed .docs-content {
+ display: none;
}
- .doc {
+ .column-header {
+ padding: 15px;
+ border-bottom: 1px solid #ddd;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
background: white;
- border: 1px solid #ccc;
- padding: 12px;
- margin-bottom: 12px;
}
- .doc-title {
+ .saved-column.collapsed .column-header {
+ justify-content: center;
+ padding: 15px 5px;
+ }
+
+ .column-header h2 {
+ font-size: 18px;
+ margin: 0;
+ }
+
+ .saved-column.collapsed .column-header h2 {
+ display: none;
+ }
+
+ .toggle-btn {
+ background: #007bff;
+ color: white;
+ border: none;
+ width: 30px;
+ height: 30px;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 18px;
font-weight: bold;
- margin-bottom: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s;
+ }
+
+ .toggle-btn:hover {
+ background: #0056b3;
+ }
+
+ .docs-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 15px;
}
- .doc-preview {
- margin-top: 8px;
- color: #444;
+ .doc-single-line {
+ margin-bottom: 12px;
+ padding: 8px;
+ background: #f9f9f9;
+ border-radius: 4px;
+ border: 1px solid #eee;
+ }
+
+ .doc-line1 {
+ font-size: 11px;
+ color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ margin-bottom: 6px;
}
- .doc-buttons {
- margin-top: 10px;
+ .doc-line2 {
+ display: flex;
+ gap: 10px;
}
.small-link-btn {
background: none;
border: none;
padding: 0;
- margin-right: 12px;
- font-size: 14px;
+ font-size: 11px;
color: blue;
text-decoration: underline;
cursor: pointer;
font-family: inherit;
}
- </style>
- </head>
- <body>
- <h1>IndexedDB Notes</h1>
+ .small-link-btn:hover {
+ color: darkblue;
+ }
- <textarea id="editor" placeholder="Write something..."></textarea>
- <br>
+ .content-column {
+ flex: 1;
+ padding: 40px;
+ max-width: 900px;
+ margin: 0 auto;
+ }
- <button class="link-btn" id="saveBtn">Save Doc</button>
- <button class="link-btn" id="newBtn">New Doc</button>
- <button class="link-btn" id="exportBtn">Export as TXT</button>
- <button class="link-btn" id="exportDbBtn">Export NotesDB</button>
- <button class="link-btn" id="importDbBtn">Import NotesDB</button>
+ h1 {
+ margin-bottom: 20px;
+ font-size: 28px;
+ }
- <input type="file" id="importFile" accept=".json" style="display:none;">
+ textarea {
+ width: 100%;
+ height: 500px;
+ padding: 12px;
+ font-size: 16px;
+ resize: vertical;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-family: Arial, sans-serif;
+ }
- <div class="docs">
- <h2>Saved Documents</h2>
- <div id="docList"></div>
+ .link-btn {
+ background: none;
+ border: none;
+ padding: 0;
+ margin-top: 10px;
+ margin-right: 14px;
+ font-size: 14px;
+ color: blue;
+ text-decoration: underline;
+ cursor: pointer;
+ font-family: inherit;
+ }
+
+ .link-btn:hover {
+ color: darkblue;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div class="app-wrapper">
+ <div class="saved-column" id="savedColumn">
+ <div class="column-header">
+ <h2>Saved Documents</h2>
+ <button class="toggle-btn" id="toggleBtn">−</button>
+ </div>
+ <div class="docs-content">
+ <div id="docList"></div>
+ </div>
+ </div>
+
+ <div class="content-column">
+ <h1>IndexedDB Notes</h1>
+
+ <textarea id="editor" placeholder="Write something..."></textarea>
+ <br>
+
+ <button class="link-btn" id="saveBtn">Save Doc</button>
+ <button class="link-btn" id="newBtn">New Doc</button>
+ <button class="link-btn" id="exportBtn">Export as TXT</button>
+ <button class="link-btn" id="exportDbBtn">Export NotesDB</button>
+ <button class="link-btn" id="importDbBtn">Import NotesDB</button>
+
+ <input type="file" id="importFile" accept=".json" style="display:none;">
+ </div>
</div>
<script>
@@ -159,34 +257,22 @@ function loadDocuments() {
docs.forEach(doc => {
const div = document.createElement("div");
- div.className = "doc";
-
- div.innerHTML = `
- <div class="doc-title">
- Document #${doc.id}
- </div>
+ div.className = "doc-single-line";
- <div>
- ${doc.created}
- </div>
+ const line1 = document.createElement("div");
+ line1.className = "doc-line1";
+ line1.textContent = `Document #${doc.id} - ${doc.created}`;
- <div class="doc-preview">
- ${escapeHtml(doc.content.substring(0, 120))}
- </div>
+ const line2 = document.createElement("div");
+ line2.className = "doc-line2";
- <div class="doc-buttons">
- <button class="small-link-btn load-btn">
- Load
- </button>
+ const loadBtn = document.createElement("button");
+ loadBtn.textContent = "Load";
+ loadBtn.className = "small-link-btn";
- <button class="small-link-btn delete-btn">
- Delete
- </button>
- </div>
- `;
-
- const loadBtn = div.querySelector(".load-btn");
- const deleteBtn = div.querySelector(".delete-btn");
+ const deleteBtn = document.createElement("button");
+ deleteBtn.textContent = "Delete";
+ deleteBtn.className = "small-link-btn";
loadBtn.onclick = function() {
document.getElementById("editor").value = doc.content;
@@ -196,6 +282,12 @@ function loadDocuments() {
deleteDocument(doc.id);
};
+ line2.appendChild(loadBtn);
+ line2.appendChild(deleteBtn);
+
+ div.appendChild(line1);
+ div.appendChild(line2);
+
list.appendChild(div);
});
};
@@ -323,12 +415,6 @@ function importDatabase(file) {
reader.readAsText(file);
}
- 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();
@@ -363,6 +449,19 @@ document.getElementById("importFile").onchange = function(event) {
importDatabase(file);
}
};
+
+ // Toggle +/- button
+ const savedColumn = document.getElementById('savedColumn');
+ const toggleBtn = document.getElementById('toggleBtn');
+
+ toggleBtn.addEventListener('click', function() {
+ savedColumn.classList.toggle('collapsed');
+ if (savedColumn.classList.contains('collapsed')) {
+ toggleBtn.textContent = '+';
+ } else {
+ toggleBtn.textContent = '−';
+ }
+ });
</script>
</body>