New UI And Version 11th.

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

Author: Someshdiwan

site/_layouts/default.html

@@ -4,28 +4,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <!-- Favicon and related assets -->
+    <!-- Favicon and App Icons -->
     <link rel="icon" type="image/png" href="{{ '/assets/favicon-96x96.png' | relative_url }}" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.svg' | relative_url }}" />
     <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}" />
     <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
     <meta name="apple-mobile-web-app-title" content="Java" />
 
-    <!-- Use the correct manifest for GitHub Pages project path -->
+    <!-- Manifest: Use only one link, adjust for GitHub Pages project path -->
     <link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest">
     <meta name="theme-color" content="#ffffff">
 
     <title>{{ page.title }}</title>
     <link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
 
     <script>
-        // --- Sidebar Toggle Function ---
+        // Sidebar Toggle Function
         function toggleSidebar() {
           const sidebar = document.getElementById("sidebar");
           sidebar.classList.toggle("hidden");
         }
 
-        // --- Auto-hide Sidebar if Clicked Outside ---
+        // Function to hide sidebar if clicked outside
         function hideSidebarIfClickedOutside(event) {
           const sidebar = document.getElementById("sidebar");
           const toggleBtn = document.querySelector(".toggle-btn");
@@ -36,23 +36,23 @@
           }
         }
 
-        // --- Dark Mode Toggle ---
+        // Dark Mode Toggle Function
         const toggleDarkMode = () => {
           document.body.classList.toggle('dark-mode');
           localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
         };
 
-        // --- Live Time Update Function ---
+        // Live Time Update Function (includes GMT offset)
         function updateLiveTime() {
           const now = new Date();
           let hours = now.getHours();
           const minutes = now.getMinutes().toString().padStart(2, '0');
           const seconds = now.getSeconds().toString().padStart(2, '0');
           const ampm = hours >= 12 ? 'PM' : 'AM';
-          hours = hours % 12 || 12;  // convert to 12-hour format
+          hours = hours % 12 || 12;
           const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
 
-          // Calculate GMT offset (JavaScript returns offset in minutes; negative means ahead of UTC)
+          // Compute offset (JS returns minutes behind UTC; here we negate to get GMT+ for IST)
           const offset = -now.getTimezoneOffset();
           const offsetHours = Math.floor(Math.abs(offset) / 60);
           const offsetMinutes = Math.abs(offset) % 60;
@@ -62,33 +62,37 @@
           document.getElementById('live-time').textContent = `Time: ${timeString} ${offsetString}`;
         }
 
-        // --- Service Worker Registration ---
+        // Service Worker Registration (ensure sw.js is at the correct path)
         if ("serviceWorker" in navigator) {
           navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
             .then(() => console.log("✅ Service Worker Registered"))
             .catch(err => console.error("SW registration failed", err));
         }
 
-        // --- Initialize on DOMContentLoaded ---
+        // Initialization on DOMContentLoaded
         window.addEventListener('DOMContentLoaded', () => {
-          // Initialize dark mode from localStorage
+          // Dark mode initialization
           if (localStorage.getItem('dark-mode') === 'true') {
             document.body.classList.add('dark-mode');
           }
+          // Attach click listener for sidebar auto-hide
+          document.addEventListener('click', hideSidebarIfClickedOutside);
 
           // Start live time updates
           updateLiveTime();
           setInterval(updateLiveTime, 1000);
-
-          // Auto-hide sidebar on click outside
-          document.addEventListener('click', hideSidebarIfClickedOutside);
         });
     </script>
 </head>
 <body>
-<!-- Dark Mode Toggle Button (top-right) -->
+<!-- Dark Mode Toggle Button -->
 <button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
 
+<!-- Place the Time Container under the dark mode toggle -->
+<div id="time-location-container">
+    <div id="live-time">Time: Loading...</div>
+</div>
+
 <div class="wrapper">
     <!-- Sidebar Navigation -->
     <div id="sidebar" class="sidebar">
@@ -97,19 +101,12 @@
 
     <!-- Content Area -->
     <div class="content">
-        <!-- (Optional: Sidebar Toggle Button, if needed) -->
+        <!-- Sidebar Toggle Button (keep if you want manual control) -->
         <button class="toggle-btn" onclick="toggleSidebar()">☰</button>
-
-        <!-- Live Time Container (placed below the dark mode toggle) -->
-        <div id="live-time" class="fade-in" style="text-align: center; margin: 1rem 0;">
-            Time: Loading...
-        </div>
-
-        <!-- Main Content -->
         <div class="fade-in">
             {{ content }}
         </div>
     </div>
 </div>
 </body>
-</html>
+</html>

site/assets/style.css

@@ -1,25 +1,34 @@
+/* Base Colors and Typography */
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
   --sidebar-bg: #f8f9fa;
   --link-color: #0366d6;
+  --button-bg: #eee;
+  --button-text: #000;
+  --hover-bg: rgba(0, 0, 0, 0.05);
+  --border-color: #ccc;
 }
 
 .dark-mode {
   --bg-color: #121212;
   --text-color: #e0e0e0;
   --sidebar-bg: #1f1f1f;
   --link-color: #90caf9;
+  --button-bg: #333;
+  --button-text: #fff;
+  --hover-bg: rgba(255, 255, 255, 0.1);
+  --border-color: #444;
 }
 
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
   margin: 0;
   font-family: sans-serif;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-
 /* Sidebar Styles */
 .sidebar {
   background-color: var(--sidebar-bg);
@@ -28,7 +37,7 @@ body {
   position: fixed;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid var(--border-color);
   transition: transform 0.3s ease;
   z-index: 999;
 }
@@ -37,7 +46,6 @@ body {
   transform: translateX(-100%);
 }
 
-/* Sidebar Links */
 .sidebar a {
   display: block;
   padding: 0.5rem;
@@ -48,7 +56,7 @@ body {
 }
 
 .sidebar a:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--hover-bg);
 }
 
 /* Content Area */
@@ -62,34 +70,34 @@ body {
   margin-left: 0;
 }
 
-
-/* Toggle Button */
+/* Toggle Buttons */
 .toggle-btn {
   position: fixed;
   top: 1rem;
   left: 1rem;
   z-index: 1001;
-  background: #eee;
+  background-color: var(--button-bg);
+  color: var(--button-text);
   border: none;
   padding: 0.5rem 1rem;
   border-radius: 5px;
   cursor: pointer;
 }
 
-/* Dark Mode Toggle Button */
 .dark-toggle {
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 1001;
-  background: #eee;
+  background-color: var(--button-bg);
+  color: var(--button-text);
   border: none;
   padding: 0.5rem 1rem;
   border-radius: 5px;
   cursor: pointer;
 }
 
-/* Animation */
+/* Fade-in Animation */
 .fade-in {
   animation: fadeIn 0.4s ease-in;
 }
@@ -106,15 +114,15 @@ body {
     position: fixed;
     left: 0;
   }
-
   .sidebar:not(.hidden) {
     transform: translateX(0);
   }
-
   .content {
     margin-left: 0;
   }
 }
+
+/* Image Row and Responsive Image Styles */
 .image-row {
   display: flex;
   flex-wrap: wrap;
@@ -143,7 +151,7 @@ body {
 
 .responsive-img {
   width: 100%;
-  max-width: 600px; /* Or 500px or whatever looks good */
+  max-width: 600px; /* Adjust this value as preferred */
   height: auto;
   margin: 0 auto;
   display: block;
@@ -156,15 +164,12 @@ body {
   transform: scale(1.02);
 }
 
-
-/* Optional: Add a dark-mode outline for visibility */
 .dark-mode .responsive-img {
   box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
 }
 
-/* for the Location and Time Container */
-<style>
-  #time-location-container {
+/* Time Container Styling */
+#time-location-container {
   background: rgba(0, 0, 0, 0.6);
   color: #00ffff;
   border: 1px solid #00ffff;
@@ -174,17 +179,18 @@ body {
   text-align: center;
   font-weight: 600;
   font-size: 1.05rem;
-  }
+  margin: 1rem auto;
+  max-width: 300px;
+}
 
-  body.dark-mode #time-location-container {
-    background-color: #333;
-    color: #eee;
-  }
+body.dark-mode #time-location-container {
+  background-color: #333;
+  color: #eee;
+}
 
-  @media (max-width: 600px) {
-    #time-location-container {
-      font-size: 0.95rem;
-      margin: 1rem 1rem;
-    }
+@media (max-width: 600px) {
+  #time-location-container {
+    font-size: 0.95rem;
+    margin: 1rem;
   }
-</style>
+}