Add export all notes functionality and style updates for export modal

index.html

@@ -47,7 +47,10 @@ <h2 class="header-h2">Notes</h2>
     <div id="exportModal" class="modal">
         <div class="modal-content">
             <span class="close" onclick="closeExportModal()">&times;</span>
-            <h2 class="modal-h2">Click on an item to export</h2>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <h2 class="modal-h2">Click on an item to export</h2>
+                <button title="Export all notes as JSON" class="button" onclick="exportAllNotesAsJson()">Export All as JSON</button>
+            </div>
             <ul class="export-note-list"></ul>
         </div>
     </div>

src/globals.css

@@ -427,7 +427,21 @@ body {
     max-height: 80vh;
     overflow: hidden;
 }
+.modal .button {
+    background-color: var(--button-bg-color);
+    color: var(--button-color);
+    border: 1px solid var(--button-border-color);
+    border-radius: var(--button-border-radius);
+    padding: var(--button-padding);
+    cursor: pointer;
+    transition: var(--hover-transition);
+    margin-right: 150px;
+    margin-bottom: 10px;
+}
 
+.button:hover {
+    background-color: var(--button-bg-color-hover);
+}
 .modal-h2{
     margin: 0px 0px 10px 0px;
 }

src/script.js

@@ -233,6 +233,18 @@ function exportSelectedNoteById(id) {
     closeExportModal();
 }
 
+function exportAllNotesAsJson() {
+    const notes = getNotesFromLocalStorage();
+    const json = JSON.stringify(notes, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'notes.json';
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
 function importNotes(event) {
     const files = event.target.files;
     const notes = getNotesFromLocalStorage();