diff --git a/idb-notes.html b/idb-notes.html
index 61bc3d2..dd6268b 100644
--- a/idb-notes.html
+++ b/idb-notes.html
@@ -6,181 +6,181 @@
<title>IndexedDB Notes</title>
<style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- font-family: Arial, sans-serif;
- background: #f4f4f4;
- min-height: 100vh;
- }
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #fff1e5;
+ min-height: 100vh;
+ }
+ .app-wrapper {
+ display: flex;
+ min-height: 100vh;
+ }
+ textarea {
+ width: 100%;
+ height: 600px;
+ padding: 12px;
+ font-size: 16px;
+ resize: vertical;
+ box-sizing: border-box;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-family: Arial, sans-serif;
+ background-color: #fff1e5;
+ }
- .app-wrapper {
- display: flex;
- min-height: 100vh;
- }
+ .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;
+ }
- .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;
- }
+ .saved-column.collapsed {
+ width: 50px;
+ }
- .saved-column.collapsed {
- width: 50px;
- }
+ .saved-column.collapsed .docs-content {
+ display: none;
+ }
- .saved-column.collapsed .docs-content {
- display: none;
- }
+ .column-header {
+ padding: 15px;
+ border-bottom: 1px solid #ddd;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: white;
+ }
- .column-header {
- padding: 15px;
- border-bottom: 1px solid #ddd;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: white;
- }
+ .saved-column.collapsed .column-header {
+ justify-content: center;
+ padding: 15px 5px;
+ }
- .saved-column.collapsed .column-header {
- justify-content: center;
- padding: 15px 5px;
- }
+ .column-header h2 {
+ font-size: 18px;
+ margin: 0;
+ }
- .column-header h2 {
- font-size: 18px;
- margin: 0;
- }
+ .saved-column.collapsed .column-header h2 {
+ display: none;
+ }
- .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;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s;
+ }
- .toggle-btn {
- background: #007bff;
- color: white;
- border: none;
- width: 30px;
- height: 30px;
- border-radius: 4px;
- cursor: pointer;
- font-size: 18px;
- font-weight: bold;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background 0.2s;
- }
+ .toggle-btn:hover {
+ background: #0056b3;
+ }
- .toggle-btn:hover {
- background: #0056b3;
- }
+ .docs-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 15px;
+ }
- .docs-content {
- flex: 1;
- overflow-y: auto;
- padding: 15px;
- }
+ .doc-single-line {
+ margin-bottom: 12px;
+ padding: 8px;
+ background: #f9f9f9;
+ border-radius: 4px;
+ border: 1px solid #eee;
+ }
- .doc-single-line {
- margin-bottom: 12px;
- padding: 8px;
- background: #f9f9f9;
- border-radius: 4px;
- border: 1px solid #eee;
- }
+ .doc-single-line.active-doc {
+ background: #e8f0fe;
+ border-color: #007bff;
+ }
- .doc-single-line.active-doc {
- background: #e8f0fe;
- border-color: #007bff;
- }
+ .doc-line1 {
+ font-size: 11px;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 6px;
+ }
- .doc-line1 {
- font-size: 11px;
- color: #333;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 6px;
- }
+ .doc-line2 {
+ display: flex;
+ gap: 10px;
+ }
- .doc-line2 {
- display: flex;
- gap: 10px;
- }
+ .small-link-btn {
+ background: none;
+ border: none;
+ padding: 0;
+ font-size: 11px;
+ color: blue;
+ text-decoration: underline;
+ cursor: pointer;
+ font-family: inherit;
+ }
- .small-link-btn {
- background: none;
- border: none;
- padding: 0;
- font-size: 11px;
- color: blue;
- text-decoration: underline;
- cursor: pointer;
- font-family: inherit;
- }
+ .small-link-btn:hover {
+ color: darkblue;
+ }
- .small-link-btn:hover {
- color: darkblue;
- }
+ .content-column {
+ flex: 1;
+ padding: 40px;
+ max-width: 900px;
+ margin: 0 auto;
+ }
- .content-column {
- flex: 1;
- padding: 40px;
- max-width: 900px;
- margin: 0 auto;
- }
+ h1 {
+ margin-bottom: 20px;
+ font-size: 28px;
+ }
- h1 {
- margin-bottom: 20px;
- font-size: 28px;
- }
+ #docStatus {
+ font-size: 13px;
+ color: #555;
+ margin-bottom: 8px;
+ min-height: 18px;
+ font-style: italic;
+ }
- #docStatus {
- font-size: 13px;
- color: #555;
- margin-bottom: 8px;
- min-height: 18px;
- font-style: italic;
- }
- 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;
- }
- .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 {
+ 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;
- }
+ .link-btn:hover {
+ color: darkblue;
+ }
</style>
</head>
<body>