added amoled, catpuccin-frappe, everforest-light theme, save as to export

Author: ronynn

app/src/main/assets/index.html

@@ -55,6 +55,7 @@
       --border-bottom: 2px solid var(--border);
       padding: 0.5rem 1rem;
       margin-bottom: 1rem;
+      font-size:2.2em;
     }
 
     .top-bar span {
@@ -71,7 +72,7 @@
     }
 
     .inactive-tab {
-      color: gray;
+      color: #555444;
     }
 
     /* Horizontal scrollable tab bar for note categories in Box 2 */
@@ -145,17 +146,17 @@
       <div>
         <!-- Box 1: Input and Stats -->
         <div class="box" x-cloak>
-          <label>Box 1:Notes Input</label>
+          <label>Box 1: Notes Input</label>
           <input type="text" placeholder="Type note or command" x-model="inputText" @keydown.enter="handleInput" />
           <div style="margin-top: 1rem">
-            <span>Remaining: <span x-text="remainingCount"></span></span>
-            <span style="margin-left: 1rem">Completed: <span x-text="completedCount"></span></span>
+            <span style="margin-right: 1rem">️Remaining: <span x-text="remainingCount"></span></span>
+            <span>Completed: <span x-text="completedCount"></span></span>
           </div>
         </div>
 
         <!-- Box 2: Draggable Notes & Category Tabs -->
         <div class="box" x-cloak>
-          <label>Box 2:Notes List</label>
+          <label>Box 2: Notes List</label>
           <!-- Category tabs -->
           <div class="category-tabs">
             <template x-for="category in noteCategories" :key="category">
@@ -237,7 +238,7 @@ <h2>Recycle Bin</h2>
                                             float: right;
                                             cursor: pointer;
                                             margin-left: 1rem;
-                                        " @click="restoreNote(index)">√r</span>
+                                        " @click="restoreNote(index)">♻️</span>
               </li>
             </template>
           </ul>
@@ -247,10 +248,10 @@ <h2>Recycle Bin</h2>
           <label>Box 6: Import/Export</label>
           <div style="margin-bottom: 1rem">
             <button @click="exportNotes('json')">
-              Save as JSON
+              Export JSON
             </button>
             <button @click="exportNotes('txt')">
-              Save as TXT
+              Export TXT
             </button>
           </div>
           <div style="margin-bottom: 1rem">

app/src/main/assets/main.js

@@ -3,7 +3,7 @@ function app() {
     // Screen management
     activeTab: "Home",
     tabs: ["Home", "Settings"],
-    slideDirection: "left",
+    slideDirection: "right",
     slideClass: "",
 
     // Note category management (persisted in local storage)
@@ -24,10 +24,13 @@ function app() {
       "monokai",
       "dracula",
       "nord",
+      "amoled",
       "solarized",
       "catppuccin",
+      "catpuccin-frappe",
       "tokyo-night",
-      "everforest"
+      "everforest",
+      "everforest-light"
     ],
 
     fonts: [
@@ -89,7 +92,7 @@ function app() {
     fontSize: 18,
 
     increaseFontSize() {
-      this.fontSize = Math.min(this.fontSize + 2, 26);
+      this.fontSize = Math.min(this.fontSize + 2, 20);
       document.body.style.fontSize = this.fontSize + "px";
       localStorage.setItem("fontSize", this.fontSize);
     },

app/src/main/assets/milligram.css

@@ -123,6 +123,59 @@ body {
   --input-text: #d3c6aa;
 }
 
+
+
+
+
+
+[data-theme="amoled"] {
+  --bg: #000000;
+  --text: #ffffff;
+  --border: #444444;
+  --button: #888888;
+  --button-hover: #333333;
+  --input-bg: #111111;
+  --input-border: #666666;
+  --input-text: #ffffff;
+}
+
+[data-theme="catpuccin-frappe"] {
+  --bg: #303446;
+  --text: #c6d0f5;
+  --border: #414559;
+  --button: #f2d5cf;
+  --button-hover: #eebebe;
+  --input-bg: #292c3c;
+  --input-border: #626880;
+  --input-text: #c6d0f5;
+}
+
+[data-theme="everforest-light"] {
+  --bg: #fdf6e3;
+  --text: #5c6a72;
+  --border: #d3c6aa;
+  --button: #a7c080;
+  --button-hover: #8da572;
+  --input-bg: #e4e1cd;
+  --input-border: #d3c6aa;
+  --input-text: #5c6a72;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 .box {
   width: 100%;
   --max-width: 400px;