Remove mobile clock and date display

- Removed mobile clock widget from mobile navigation menu
- Cleaned up JavaScript methods for mobile clock updates
- Removed mobile clock CSS styles and animations
- Removed mobile clock tracking variables from constructor
- Streamlined Roman clock to only show on desktop
- Mobile users now have cleaner navigation menu without clock

Author: eaglepython

index.html

@@ -91,27 +91,6 @@ <h1 class="text-xl font-bold text-gray-900 dark:text-white">BookVault</h1>
                         <i class="fas fa-plus mr-3"></i>
                         <span>Add Book</span>
                     </button>
-                    
-                    <!-- Mobile Live Clock -->
-                    <div class="live-clock-container mobile-clock-container">
-                        <div class="live-clock mobile-clock">
-                            <div class="clock-item">
-                                <span class="clock-value" id="mobile-hours">--</span>
-                                <span class="clock-label">HOURS</span>
-                            </div>
-                            <div class="clock-separator">:</div>
-                            <div class="clock-item">
-                                <span class="clock-value" id="mobile-minutes">--</span>
-                                <span class="clock-label">MINS</span>
-                            </div>
-                            <div class="clock-separator">:</div>
-                            <div class="clock-item">
-                                <span class="clock-value" id="mobile-seconds">--</span>
-                                <span class="clock-label">SECS</span>
-                            </div>
-                        </div>
-                        <div class="clock-date mobile-date" id="mobile-live-date">--</div>
-                    </div>
                 </div>
             </div>
         </div>

index.js

@@ -25,12 +25,6 @@ class BookStore {
         ];
         this.currentTypewriterIndex = 0;
 
-        // Mobile clock tracking
-        this.previousMobileHours = '';
-        this.previousMobileMinutes = '';
-        this.previousMobileSeconds = '';
-        this.previousMobileDate = '';
-        
         this.init();
     }
 
@@ -1833,14 +1827,6 @@ class BookStore {
             if (dateElement) {
                 dateElement.textContent = currentDate;
             }
-            
-            // Update mobile clock if it exists
-            this.updateMobileClockWithAnimation(
-                String(now.getHours()).padStart(2, '0'),
-                String(minutes).padStart(2, '0'),
-                String(seconds).padStart(2, '0'),
-                currentDate
-            );
         };
 
         // Initial update
@@ -1868,46 +1854,6 @@ class BookStore {
         }
     }
 
-    updateMobileClockWithAnimation(hours, minutes, seconds, date) {
-        // Update mobile clock elements with animation
-        this.updateClockElement('mobile-hours', hours, this.previousMobileHours);
-        this.updateClockElement('mobile-minutes', minutes, this.previousMobileMinutes);
-        this.updateClockElement('mobile-seconds', seconds, this.previousMobileSeconds);
-        
-        // Update mobile date
-        const mobileDateElement = document.getElementById('mobile-live-date');
-        if (mobileDateElement && date !== this.previousMobileDate) {
-            mobileDateElement.textContent = date;
-        }
-        
-        // Store previous values
-        this.previousMobileHours = hours;
-        this.previousMobileMinutes = minutes;
-        this.previousMobileSeconds = seconds;
-        this.previousMobileDate = date;
-    }
-
-    updateClockElement(elementId, newValue, previousValue) {
-        const element = document.getElementById(elementId);
-        if (!element) return;
-        
-        if (newValue !== previousValue) {
-            // Add rolling animation class
-            element.classList.add('flip');
-            
-            // Update the value
-            element.textContent = newValue;
-            
-            // Remove animation class after animation completes
-            setTimeout(() => {
-                element.classList.remove('flip');
-            }, 600);
-        } else if (!element.textContent || element.textContent === '--') {
-            // Initial load
-            element.textContent = newValue;
-        }
-    }
-
     // Infinite Horizontal Carousel functionality
     initializeCarousel() {
         if (this.books.length > 0) {

style.css

@@ -965,79 +965,6 @@
     }
 }
 
-/* Mobile Clock Styles */
-.mobile-clock-container {
-    position: relative;
-    top: auto;
-    right: auto;
-    margin: 16px 0;
-    min-width: auto;
-    width: 100%;
-    backdrop-filter: blur(8px);
-    background: rgba(255, 255, 255, 0.08);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 12px;
-    padding: 16px;
-}
-
-.mobile-clock {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    margin-bottom: 12px;
-}
-
-.mobile-clock .clock-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-}
-
-.mobile-clock .clock-value {
-    font-size: 20px;
-    font-weight: 700;
-    color: transparent;
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
-    background-clip: text;
-    -webkit-background-clip: text;
-    min-width: 28px;
-    text-align: center;
-    font-family: 'Courier New', monospace;
-    transition: all 0.3s ease;
-}
-
-.mobile-clock .clock-value.flip {
-    animation: digitFlip 0.6s ease-in-out;
-}
-
-.mobile-clock .clock-label {
-    font-size: 9px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.7);
-    letter-spacing: 1px;
-    text-transform: uppercase;
-}
-
-.mobile-clock .clock-separator {
-    font-size: 20px;
-    font-weight: 700;
-    color: rgba(255, 255, 255, 0.8);
-    margin: 0 2px;
-    animation: timePulse 2s ease-in-out infinite;
-}
-
-.mobile-date {
-    text-align: center;
-    font-size: 13px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.8);
-    padding-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, 0.15);
-    letter-spacing: 0.5px;
-}
-
 .mobile-clock {
     display: flex;
     align-items: center;