diff --git a/index.html b/index.html index 48347e8..4be2616 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,14 @@ + MNotes - - -
-
-

MNotes

- - dark_mode - -
- -
- -
- - - add - -
- - - -
Add/Edit Note
-
-
- - - -
-
-
- Cancel - Save -
- - - - -
Confirm Delete
-
- Are you sure you want to delete this note? -
-
- Cancel - Delete -
- - - -======= .theme-dark { /* Material 3 (You/Expressive) Colors - Dark Theme */ --primary-color: #4CDADA; @@ -668,19 +104,42 @@ --surface-tint-color: #8B5000; } + /* Base Styles */ body { font-family: 'Google Sans', 'Roboto', sans-serif; margin: 0; padding: 0; background-color: var(--background-color); color: var(--on-background-color); - transition: all 0.3s ease; + transition: background-color 0.3s ease, color 0.3s ease; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } + /* Accessibility - Focus States */ + button:focus, + a:focus, + input:focus, + textarea:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; + } + + .visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } + + /* Layout Components */ .header { background-color: var(--primary-color); color: var(--on-primary-color); @@ -690,6 +149,13 @@ align-items: center; box-shadow: var(--elevation-level-2); z-index: 10; + transition: background-color 0.3s ease, color 0.3s ease; + } + + .left-section { + display: flex; + align-items: center; + gap: 16px; } .app-title { @@ -713,6 +179,7 @@ flex-direction: column; overflow-y: auto; box-shadow: var(--elevation-level-1); + transition: background-color 0.3s ease, color 0.3s ease, left 0.3s ease; } .sidebar-header { @@ -723,6 +190,7 @@ border-bottom: 1px solid var(--outline-color); background-color: var(--surface-variant-color); color: var(--on-surface-variant-color); + transition: background-color 0.3s ease, color 0.3s ease; } .note-list { @@ -747,6 +215,11 @@ transform: translateY(-2px); } + .note-item:focus { + outline: 2px solid var(--primary-color); + outline-offset: -2px; + } + .note-item.active { background-color: var(--primary-container-color); color: var(--on-primary-container-color); @@ -769,22 +242,49 @@ text-overflow: ellipsis; } + .note-date { + font-size: 0.75rem; + opacity: 0.6; + margin-top: 4px; + } + .editor-container { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; + background-color: var(--background-color); + transition: background-color 0.3s ease; } .toolbar { background-color: var(--surface-color); - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: 1px solid var(--outline-color); padding: 8px 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; + transition: background-color 0.3s ease; + } + + .toolbar-group { + display: flex; + gap: 4px; + border-right: 1px solid var(--outline-color); + padding-right: 8px; + margin-right: 8px; + } + + .toolbar-group:last-child { + border-right: none; + } + + .editor-wrapper { + flex: 1; + display: flex; + overflow: hidden; } .editor { @@ -798,8 +298,25 @@ background-color: var(--surface-color); color: var(--on-surface-color); resize: none; + font-family: 'Roboto Mono', monospace, 'Google Sans', sans-serif; + transition: background-color 0.3s ease, color 0.3s ease; } + .markdown-preview { + flex: 1; + padding: 16px; + overflow-y: auto; + background-color: var(--surface-color); + color: var(--on-surface-color); + border-left: 1px solid var(--outline-color); + transition: background-color 0.3s ease, color 0.3s ease; + } + + .markdown-preview.hidden { + display: none; + } + + /* UI Components */ .button { background-color: var(--primary-container-color); color: var(--on-primary-container-color); @@ -815,6 +332,7 @@ gap: 8px; transition: all 0.2s ease; box-shadow: var(--elevation-level-1); + position: relative; } .button:hover { @@ -823,10 +341,42 @@ box-shadow: var(--elevation-level-2); } + .button:active { + transform: translateY(1px); + } + + .button:disabled { + opacity: 0.5; + cursor: not-allowed; + } + .button-icon { font-size: 1.25rem; } + .icon-button { + background-color: transparent; + color: var(--on-surface-color); + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.2s; + } + + .icon-button:hover { + background-color: var(--surface-variant-color); + } + + .icon-button.active { + color: var(--primary-color); + background-color: var(--primary-container-color); + } + .theme-selector { margin-left: auto; display: flex; @@ -835,6 +385,7 @@ padding: 8px; background-color: var(--surface-variant-color); border-radius: 24px; + transition: background-color 0.3s ease; } .theme-button { @@ -846,6 +397,10 @@ transition: transform 0.2s, border-color 0.2s; } + .theme-button:focus { + outline: 2px solid var(--primary-color); + } + .theme-button.active { border-color: var(--primary-color); transform: scale(1.2); @@ -867,11 +422,46 @@ padding: 8px 16px; font-size: 0.75rem; background-color: var(--surface-color); - border-top: 1px solid rgba(0, 0, 0, 0.12); + border-top: 1px solid var(--outline-color); display: flex; justify-content: space-between; + transition: background-color 0.3s ease, color 0.3s ease; } + .toast { + position: fixed; + bottom: 16px; + right: 16px; + padding: 12px 16px; + background-color: var(--surface-color); + color: var(--on-surface-color); + border-radius: 8px; + box-shadow: var(--elevation-level-2); + z-index: 1000; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s, transform 0.3s; + max-width: 300px; + } + + .toast.visible { + opacity: 1; + transform: translateY(0); + } + + .toast-success { + border-left: 4px solid #4CAF50; + } + + .toast-error { + border-left: 4px solid var(--error-color); + } + + .toast-info { + border-left: 4px solid var(--primary-color); + } + + /* Modal Styles */ .modal { display: none; position: fixed; @@ -883,6 +473,13 @@ justify-content: center; align-items: center; z-index: 1000; + backdrop-filter: blur(4px); + opacity: 0; + transition: opacity 0.3s; + } + + .modal.visible { + opacity: 1; } .modal-content { @@ -892,6 +489,13 @@ width: 100%; max-width: 400px; box-shadow: var(--elevation-level-3); + transform: scale(0.9); + transition: transform 0.3s; + color: var(--on-surface-color); + } + + .modal.visible .modal-content { + transform: scale(1); } .modal-title { @@ -907,6 +511,13 @@ margin-bottom: 24px; } + .form-field-label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: var(--on-surface-color); + } + .input-field { width: 100%; padding: 16px; @@ -916,12 +527,14 @@ border-radius: 16px; background-color: var(--surface-color); color: var(--on-surface-color); - transition: border-color 0.2s; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; } .input-field:focus { border-color: var(--primary-color); outline: none; + box-shadow: 0 0 0 2px rgba(0, 106, 106, 0.2); } .modal-actions { @@ -931,18 +544,190 @@ } .info-message { - background-color: var(--container-color); - color: var(--on-container-color); - padding: 8px 16px; + background-color: var(--surface-variant-color); + color: var(--on-surface-variant-color); + padding: 12px 16px; margin: 8px 0; - border-radius: 4px; + border-radius: 12px; + display: none; + font-size: 0.875rem; + border-left: 4px solid var(--tertiary-color); + } + + .search-container { + position: relative; + margin-bottom: 8px; + padding: 0 16px; + } + + .search-input { + width: 100%; + padding: 10px 16px 10px 40px; + border-radius: 20px; + border: 1px solid var(--outline-color); + background-color: var(--surface-color); + color: var(--on-surface-color); + font-family: 'Google Sans', sans-serif; + font-size: 0.875rem; + transition: all 0.2s; + box-sizing: border-box; + } + + .search-input:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 2px rgba(0, 106, 106, 0.2); + } + + .search-icon { + position: absolute; + left: 26px; + top: 50%; + transform: translateY(-50%); + font-size: 20px; + color: var(--on-surface-variant-color); + pointer-events: none; + } + + .search-clear { + position: absolute; + right: 26px; + top: 50%; + transform: translateY(-50%); + font-size: 20px; + color: var(--on-surface-variant-color); + background: none; + border: none; + cursor: pointer; display: none; } + .search-clear.visible { + display: block; + } + + /* Utility Classes */ + .hidden { + display: none !important; + } + + .material-symbols-rounded { + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24; + } + + /* Markdown Preview Styling */ + .markdown-content h1, + .markdown-content h2, + .markdown-content h3, + .markdown-content h4, + .markdown-content h5, + .markdown-content h6 { + color: var(--on-surface-color); + margin-top: 1.5em; + margin-bottom: 0.5em; + font-family: 'Google Sans', sans-serif; + } + + .markdown-content h1 { + font-size: 2em; + border-bottom: 1px solid var(--outline-color); + padding-bottom: 0.3em; + } + + .markdown-content h2 { + font-size: 1.5em; + border-bottom: 1px solid var(--outline-color); + padding-bottom: 0.3em; + } + + .markdown-content a { + color: var(--primary-color); + text-decoration: none; + } + + .markdown-content a:hover { + text-decoration: underline; + } + + .markdown-content code { + background-color: var(--surface-variant-color); + padding: 0.2em 0.4em; + border-radius: 4px; + font-family: 'Roboto Mono', monospace; + font-size: 0.9em; + } + + .markdown-content pre { + background-color: var(--surface-variant-color); + padding: 16px; + border-radius: 8px; + overflow-x: auto; + } + + .markdown-content pre code { + background-color: transparent; + padding: 0; + } + + .markdown-content blockquote { + border-left: 4px solid var(--primary-color); + margin-left: 0; + padding-left: 16px; + color: var(--on-surface-variant-color); + } + + .markdown-content img { + max-width: 100%; + border-radius: 8px; + } + + .markdown-content table { + border-collapse: collapse; + width: 100%; + margin: 16px 0; + } + + .markdown-content th, + .markdown-content td { + border: 1px solid var(--outline-color); + padding: 8px 12px; + text-align: left; + } + + .markdown-content th { + background-color: var(--surface-variant-color); + } + + .markdown-content input[type="checkbox"] { + margin-right: 8px; + } + + /* Auto-save Indicator */ + .auto-save-indicator { + display: inline-flex; + align-items: center; + gap: 4px; + opacity: 0; + transition: opacity 0.3s; + } + + .auto-save-indicator.visible { + opacity: 1; + } + + .auto-save-indicator .material-symbols-rounded { + font-size: 14px; + } + + /* Mobile Styles */ @media (max-width: 768px) { .sidebar { position: absolute; - left: -250px; + left: -280px; height: 100%; transition: left 0.3s ease; z-index: 100; @@ -955,29 +740,56 @@ .toggle-sidebar { display: block; } - } - .hidden { - display: none; - } + .theme-selector { + margin-left: 8px; + } - .material-symbols-outlined { - font-size: 24px; + .toolbar { + overflow-x: auto; + justify-content: flex-start; + padding: 8px; + } + + .button { + padding: 8px 12px; + font-size: 0.8rem; + } + + .editor-wrapper { + flex-direction: column; + } + + .markdown-preview:not(.hidden) { + border-left: none; + border-top: 1px solid var(--outline-color); + max-height: 50%; + } }
- -

MNotes

+
+ +
-
- - - +
+ +
+ + + + +
@@ -985,37 +797,87 @@
- - - - +
+ + +
+ +
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
- + +
+ + +
+
- 0 words +
+ 0 words + + sync + Auto-saving... + +
Not saved yet
@@ -1026,18 +888,29 @@

GitHub Authentication

- + +
- + + +
+ Security Note: Tokens are stored in your browser's localStorage. + For better security, use a token with minimal permissions. +
- + +
- - + + +
@@ -1047,39 +920,180 @@

Create New Note

- + +
- - + +
+ + + + + + + + + + + + + + + + +
+ ->>>>>>> c32bf888e7b226dce8ed1e85ec205b9386d99cf6 \ No newline at end of file