Updated UI 2.3

Signed-off-by: Someshdiwan <[email protected]>

Author: Someshdiwan

site/_layouts/default.html

@@ -213,14 +213,14 @@
         let tapCount = 0;
         let tapTimer = null;
         const TAP_TIMEOUT = 300; // ms for double-tap detection
+        const SCROLL_THRESHOLD = 100; // px to hide theme/time container
 
         // Sidebar toggle
         function toggleSidebar(isHidden) {
             const sidebar = document.getElementById('sidebar');
             const toggleBtn = document.querySelector('.toggle-btn');
             sidebar.classList.toggle('hidden', isHidden);
             localStorage.setItem('sidebar-hidden', isHidden);
-            // Show/hide toggle button based on sidebar state (desktop)
             if (window.innerWidth > 768) {
                 toggleBtn.style.display = isHidden ? 'block' : 'none';
             }
@@ -229,31 +229,28 @@
         // Handle tap/click events
         function handleTap(event) {
             const sidebar = document.getElementById('sidebar');
-            const toggleBtn = document.querySelector('.toggle-btn');
             const target = event.target;
 
-            // Ignore taps on interactive elements
             if (
                 target.closest('a') ||
                 target.closest('button') ||
                 target.closest('#sidebar') ||
-                target.closest('#theme-time-container')
+                target.closest('#theme-time-container') ||
+                target.closest('.tooltip')
             ) {
                 return;
             }
 
             tapCount++;
             if (tapCount === 1) {
                 tapTimer = setTimeout(() => {
-                    // Single tap: hide sidebar if visible
                     if (!sidebar.classList.contains('hidden')) {
                         toggleSidebar(true);
                     }
                     tapCount = 0;
                 }, TAP_TIMEOUT);
             } else if (tapCount === 2) {
                 clearTimeout(tapTimer);
-                // Double tap: show sidebar if hidden
                 if (sidebar.classList.contains('hidden')) {
                     toggleSidebar(false);
                 }
@@ -298,6 +295,16 @@
                 `Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
         }
 
+        // Handle scroll for theme/time container
+        function handleScroll() {
+            const themeTimeContainer = document.getElementById('theme-time-container');
+            if (window.scrollY > SCROLL_THRESHOLD) {
+                themeTimeContainer.classList.add('hidden');
+            } else {
+                themeTimeContainer.classList.remove('hidden');
+            }
+        }
+
         // On load: init dark mode, sidebar state, listeners, time, SW
         window.onload = () => {
             // Initialize dark mode
@@ -316,12 +323,25 @@
             if (window.innerWidth > 768) {
                 toggleBtn.style.display = isSidebarHidden ? 'block' : 'none';
             } else {
-                toggleBtn.style.display = 'block'; // Always show on mobile
+                toggleBtn.style.display = 'block';
             }
 
-            // Add tap/click listeners
+            // Add tap/click and scroll listeners
             document.addEventListener('click', handleTap);
             document.addEventListener('touchstart', handleTap, { passive: true });
+            window.addEventListener('scroll', handleScroll, { passive: true });
+
+            // Show tooltip on first visit
+            if (!localStorage.getItem('tooltip-shown')) {
+                setTimeout(() => {
+                    const tooltip = document.getElementById('tooltip');
+                    tooltip.classList.add('visible');
+                    setTimeout(() => {
+                        tooltip.classList.remove('visible');
+                        localStorage.setItem('tooltip-shown', 'true');
+                    }, 5000);
+                }, 1000);
+            }
 
             updateLiveTime();
             setInterval(updateLiveTime, 1000);
@@ -348,6 +368,11 @@
     </div>
 </div>
 
+<!-- Onboarding Tooltip -->
+<div id="tooltip" class="tooltip">
+    Single tap to hide sidebar, double tap to show
+</div>
+
 <!-- Collapsible Sidebar -->
 <div id="sidebar" class="sidebar">
     <a href="{{ site.baseurl }}/" class="sidebar-link active">

site/assets/style.css

@@ -259,6 +259,18 @@ body {
     --button-text: #ffffff;
 }
 
+/* Dark mode override */
+.dark-mode {
+    --bg-color: #121212;
+    --text-color: #e0e0e0;
+    --sidebar-bg: #1f1f1f;
+    --button-text: #ffffff;
+    --card-bg: #2b2b2b;
+    --card-shadow: rgba(0, 0, 0, 0.5);
+    --primary-color: #4da8ff; /* Lighter blue for better contrast */
+    --active-color: #a1d6ff; /* Lighter active color */
+}
+
 /* 2. Global Styles */
 body {
     margin: 0;
@@ -281,17 +293,12 @@ body {
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     z-index: 1002;
-    transition: background-color 0.3s, color 0.3s;
+    transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-/* Dark mode override */
-.dark-mode {
-    --bg-color: #121212;
-    --text-color: #e0e0e0;
-    --sidebar-bg: #1f1f1f;
-    --button-text: #ffffff;
-    --card-bg: #2b2b2b;
-    --card-shadow: rgba(0, 0, 0, 0.5);
+#theme-time-container.hidden {
+    opacity: 0;
+    transform: translateY(-20px);
 }
 
 /* 4. Dark Mode and Timezone Toggle */
@@ -318,7 +325,29 @@ body {
     font-size: 0.9rem;
 }
 
-/* 6. Sidebar */
+/* 6. Tooltip */
+.tooltip {
+    position: fixed;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--primary-color);
+    color: var(--button-text);
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    z-index: 1003;
+}
+
+.tooltip.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* 7. Sidebar */
 .sidebar {
     width: 200px;
     height: 100vh;
@@ -337,7 +366,7 @@ body {
     transform: translateX(-100%);
 }
 
-/* 7. Sidebar Links */
+/* 8. Sidebar Links */
 .sidebar-link {
     display: flex;
     align-items: center;
@@ -364,30 +393,30 @@ body {
     text-decoration: underline;
 }
 
-/* 8. Toggle Button (Fallback) */
+/* 9. Toggle Button (Fallback) */
 .toggle-btn {
     position: fixed;
     top: 1rem;
     left: 1rem;
     background-color: var(--primary-color);
     color: var(--button-text);
     border: none;
-    padding: 0.4rem 0.8rem; /* Smaller padding */
-    font-size: 0.9rem; /* Smaller icon */
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
     border-radius: 4px;
     cursor: pointer;
     z-index: 1001;
     display: none;
     transition: background-color 0.3s;
-    opacity: 0.7; /* Less prominent */
+    opacity: 0.7;
 }
 
 .toggle-btn:hover {
     background-color: var(--active-color);
     opacity: 1;
 }
 
-/* 9. Content Area */
+/* 10. Content Area */
 .wrapper {
     display: flex;
 }
@@ -403,15 +432,15 @@ body {
     margin-left: 0;
 }
 
-/* 10. Card-style Container inside Content */
+/* 11. Card-style Container inside Content */
 .fade-in {
     background-color: var(--card-bg);
     padding: 1.5rem;
     border-radius: 10px;
     box-shadow: 0 4px 20px var(--card-shadow);
 }
 
-/* 11. Fade-in Keyframes */
+/* 12. Fade-in Keyframes */
 @keyframes fadeIn {
     from {
         opacity: 0;
@@ -423,7 +452,19 @@ body {
     }
 }
 
-/* 12. Responsive Behavior */
+/* 13. Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .sidebar,
+    #theme-time-container,
+    .tooltip {
+        transition: none;
+    }
+    .fade-in {
+        animation: none;
+    }
+}
+
+/* 14. Responsive Behavior */
 @media (max-width: 768px) {
     .sidebar {
         width: 100%;