this is big and i don't want to it to stay big and make the small size whenever i want and only if i touch it..it will open those note button (fix this) and pause resume and again button will pop up otherwise only timer will show...and if i type note in note button then then it will show note

index.html

@@ -10,8 +10,31 @@
     <style>
         #timer-widget {
             user-select: none;
+            transition: all 0.3s ease;
         }
-        #live-clock {
+        #timer-widget.minimized {
+            width: 150px !important;
+            height: 70px !important;
+        }
+        #timer-widget.minimized #controls-container,
+        #timer-widget.minimized #note-container {
+            display: none;
+        }
+        #timer-widget.minimized #live-clock {
+            font-size: 1.5rem;
+            letter-spacing: normal;
+        }
+        #note-text {
+            display: none;
+            font-size: 0.8rem;
+            margin-top: 4px;
+            color: #ccc;
+            word-break: break-word;
+        }
+        #timer-widget.has-note #note-text {
+            display: block;
+        }
+#live-clock {
 font-family: 'Arial', sans-serif;
             color: #ffffff;
             font-weight: 800;
@@ -38,11 +61,12 @@ font-family: 'Arial', sans-serif;
     <!-- Draggable Time Widget -->
     <div id="timer-widget" class="fixed bottom-4 right-4 z-50 cursor-move" style="width: 300px;">
 <div class="bg-black bg-opacity-80 rounded-xl shadow-xl p-6 text-white">
-            <div class="flex flex-col items-center">
-                <div id="live-clock">00:00:00</div>
+            <div class="flex flex-col items-center" id="timer-content">
+                <div id="live-clock" class="cursor-pointer">00:00:00</div>
                 <div class="text-sm opacity-80 mt-1" id="live-date">Loading...</div>
-                <div class="flex space-x-4 mt-4">
-                    <button id="start-btn" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full">
+                <div id="note-text"></div>
+                <div class="flex space-x-4 mt-4" id="controls-container">
+<button id="start-btn" class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-full">
                         <i class="fas fa-play"></i>
                     </button>
                     <button id="stop-btn" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-full">
@@ -53,11 +77,11 @@ font-family: 'Arial', sans-serif;
                     </button>
                 </div>
             </div>
-            <div class="mt-4">
+            <div class="mt-4" id="note-container">
                 <input type="text" id="time-note" class="bg-gray-700 bg-opacity-50 text-white text-sm rounded px-3 py-2 w-full" 
                        placeholder="Add note...">
             </div>
-        </div>
+</div>
     </div>
 <script>
         let timerInterval;
@@ -146,12 +170,33 @@ font-family: 'Arial', sans-serif;
             widget.style.left = `${left}px`;
             widget.style.top = `${top}px`;
         }
-// Button event listeners
+        // Toggle minimized state
+        const timerContent = document.getElementById('timer-content');
+        const liveClock = document.getElementById('live-clock');
+        const widget = document.getElementById('timer-widget');
+        
+        let isMinimized = false;
+        
+        liveClock.addEventListener('click', () => {
+            isMinimized = !isMinimized;
+            widget.classList.toggle('minimized', isMinimized);
+            
+            // Save minimized state
+            localStorage.setItem('timerMinimized', isMinimized);
+        });
+        
+        // Button event listeners
         document.getElementById('start-btn').addEventListener('click', startTimer);
         document.getElementById('stop-btn').addEventListener('click', stopTimer);
         document.getElementById('reset-btn').addEventListener('click', resetTimer);
-
-        // Initialize with current time
+        
+        // Load minimized state
+        const savedMinimized = localStorage.getItem('timerMinimized') === 'true';
+        if (savedMinimized) {
+            isMinimized = true;
+            widget.classList.add('minimized');
+        }
+// Initialize with current time
         const now = new Date();
         const dateStr = now.toLocaleDateString('en-US', { 
             weekday: 'short', 
@@ -162,23 +207,47 @@ font-family: 'Arial', sans-serif;
         // Save notes to localStorage
         const noteInput = document.getElementById('time-note');
         noteInput.addEventListener('change', () => {
-            localStorage.setItem('timeNote', noteInput.value);
+            const note = noteInput.value.trim();
+            localStorage.setItem('timeNote', note);
+            
+            if (note) {
+                document.getElementById('note-text').textContent = note;
+                widget.classList.add('has-note');
+            } else {
+                widget.classList.remove('has-note');
+            }
         });
         
-        // Load saved note
+        // Load and show note if exists
         const savedNote = localStorage.getItem('timeNote');
         if (savedNote) {
             noteInput.value = savedNote;
+            document.getElementById('note-text').textContent = savedNote;
+            widget.classList.add('has-note');
         }
         // Initialize with stopped state
         resetTimer();
-
+        
+        // Make sure widget stays visible when minimized
+        widget.style.minWidth = '150px';
+        widget.style.minHeight = '70px';
         // Prevent text selection while dragging
         document.addEventListener('selectstart', (e) => {
             if (isDragging) {
                 e.preventDefault();
             }
         });
+        
+        // Make whole widget draggable when minimized
+        widget.addEventListener('mousedown', (e) => {
+            if (isMinimized || e.target === widget || e.target.closest('.cursor-move')) {
+                isDragging = true;
+                offsetX = e.clientX - widget.getBoundingClientRect().left;
+                offsetY = e.clientY - widget.getBoundingClientRect().top;
+                widget.style.transition = 'none';
+                e.preventDefault();
+            }
+        });
 </script>
 </body>
 </html>