Update index.html

index.html

@@ -61,7 +61,6 @@
     }
 
     .btn {
-      background-color: #4CAF50;
       border: none;
       color: white;
       padding: 10px 20px;
@@ -72,6 +71,39 @@
       margin: 4px 2px;
       cursor: pointer;
       border-radius: 5px;
+      transition: background-color 0.3s;
+    }
+
+    #fullscreen-btn {
+      background-color: #4CAF50;
+    }
+
+    #fullscreen-btn:hover {
+      background-color: #45a049;
+    }
+
+    #save-settings {
+      background-color: #008CBA;
+    }
+
+    #save-settings:hover {
+      background-color: #007B9A;
+    }
+
+    #test-image {
+      background-color: #f44336;
+    }
+
+    #test-image:hover {
+      background-color: #da190b;
+    }
+
+    #reset-prompt {
+      background-color: #ff9800;
+    }
+
+    #reset-prompt:hover {
+      background-color: #e68a00;
     }
 
     #background-image {
@@ -131,6 +163,7 @@
     <button id="fullscreen-btn" class="btn">Toggle Fullscreen</button>
     <button id="save-settings" class="btn">Save</button>
     <button id="test-image" class="btn">Test Image Generation</button>
+    <button id="reset-prompt" class="btn">Reset Prompt</button>
   </div>
 
   <script>
@@ -143,6 +176,8 @@
     let imageGenerationInterval;
     let wakeLock = null;
 
+    const DEFAULT_PROMPT = 'beautiful abstract landscape that suits the time {time}';
+
     function updateClock() {
       const now = new Date();
       let hours = now.getHours();
@@ -320,6 +355,13 @@
         updateBackgroundImage();
       });
 
+    document.getElementById('reset-prompt')
+      .addEventListener('click', () => {
+        customPrompt = DEFAULT_PROMPT;
+        document.getElementById('prompt-input')
+          .value = customPrompt;
+      });
+
     document.getElementById('clock-size-input')
       .addEventListener('input', (e) => {
         const value = e.target.value;