Skip to content

Commit ab5d703

Browse files
SomeshdiwanSomeshdiwan
committed
Updating UI 1.1
Signed-off-by: Someshdiwan <[email protected]>
1 parent bdc653d commit ab5d703

File tree

1 file changed

+48
-75
lines changed

1 file changed

+48
-75
lines changed

‎site/_layouts/default.html‎

Lines changed: 48 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -18,85 +18,58 @@
1818
<title>{{ page.title }}</title>
1919
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}">
2020

21-
<script>
22-
// Sidebar Toggle Function
23-
function toggleSidebar() {
24-
const sidebar = document.getElementById("sidebar");
25-
sidebar.classList.toggle("visible");
26-
}
27-
28-
// Hide Sidebar When Clicking Outside
29-
function hideSidebarIfClickedOutside(event) {
30-
const sidebar = document.getElementById("sidebar");
31-
const toggleBtn = document.querySelector(".toggle-btn");
32-
if (sidebar.classList.contains("visible") &&
33-
!sidebar.contains(event.target) &&
34-
!toggleBtn.contains(event.target)) {
35-
sidebar.classList.remove("visible");
36-
}
37-
}
21+
<!-- Script Section -->
3822

39-
// Dark Mode Toggle Function
40-
const toggleDarkMode = () => {
41-
document.body.classList.toggle("dark-mode");
42-
localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode"));
43-
};
23+
<script>
24+
function toggleSidebar() {
25+
const sidebar = document.getElementById("sidebar");
26+
sidebar.classList.toggle("hidden");
27+
}
4428

45-
// Live Time Update Function with GMT Offset
46-
function updateLiveTime() {
47-
const now = new Date();
48-
let hours = now.getHours();
49-
const minutes = now.getMinutes().toString().padStart(2, "0");
50-
const seconds = now.getSeconds().toString().padStart(2, "0");
51-
const ampm = hours >= 12 ? "PM" : "AM";
52-
hours = hours % 12 || 12;
53-
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
54-
const offset = -now.getTimezoneOffset();
55-
const offsetHours = Math.floor(Math.abs(offset) / 60);
56-
const offsetMinutes = Math.abs(offset) % 60;
57-
const offsetSign = offset >= 0 ? "+" : "-";
58-
const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, "0")}:${offsetMinutes.toString().padStart(2, "0")}`;
59-
document.getElementById("live-time").textContent = `${timeString} ${offsetString}`;
60-
}
29+
function hideSidebarIfClickedOutside(event) {
30+
const sidebar = document.getElementById("sidebar");
31+
const toggleBtn = document.querySelector(".toggle-btn");
32+
if (!sidebar.classList.contains("hidden") &&
33+
!sidebar.contains(event.target) &&
34+
!toggleBtn.contains(event.target)) {
35+
sidebar.classList.add("hidden");
36+
}
37+
}
6138

62-
// Service Worker Registration
63-
if ("serviceWorker" in navigator) {
64-
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
65-
.then(() => console.log("✅ Service Worker Registered"))
66-
.catch(err => console.error("SW registration failed", err));
67-
}
39+
const toggleDarkMode = () => {
40+
document.body.classList.toggle('dark-mode');
41+
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
42+
};
6843

69-
// Initialization
70-
window.addEventListener("DOMContentLoaded", () => {
71-
if (localStorage.getItem("dark-mode") === "true") {
72-
document.body.classList.add("dark-mode");
73-
}
74-
document.addEventListener("click", hideSidebarIfClickedOutside);
75-
updateLiveTime();
76-
setInterval(updateLiveTime, 1000);
77-
});
78-
</script>
79-
</head>
80-
<body>
81-
<!-- Time Container with Dark Mode Toggle -->
82-
<div id="time-container">
83-
<div id="live-time">Time: Loading...</div>
84-
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
85-
</div>
44+
function updateLiveTime() {
45+
const now = new Date();
46+
let hours = now.getHours();
47+
const minutes = now.getMinutes().toString().padStart(2, '0');
48+
const seconds = now.getSeconds().toString().padStart(2, '0');
49+
const ampm = hours >= 12 ? 'PM' : 'AM';
50+
hours = hours % 12 || 12;
51+
const offset = -now.getTimezoneOffset();
52+
const offsetHours = Math.floor(Math.abs(offset) / 60);
53+
const offsetMinutes = Math.abs(offset) % 60;
54+
const offsetSign = offset >= 0 ? '+' : '-';
55+
const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
56+
document.getElementById('live-time').textContent = `Time: ${hours}:${minutes}:${seconds} ${ampm} ${offsetString}`;
57+
}
8658

87-
<div class="wrapper">
88-
<!-- Sidebar Navigation -->
89-
<div id="sidebar" class="sidebar">
90-
{% include nav.html %}
91-
</div>
59+
if ("serviceWorker" in navigator) {
60+
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
61+
.then(() => console.log("✅ Service Worker Registered"))
62+
.catch(err => console.error("SW registration failed", err));
63+
}
9264

93-
<!-- Content Area -->
94-
<div class="content">
95-
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
96-
<div class="fade-in">
97-
{{ content }}
98-
</div>
99-
</div>
100-
</div>
65+
window.addEventListener('DOMContentLoaded', () => {
66+
if (localStorage.getItem('dark-mode') === 'true') {
67+
document.body.classList.add('dark-mode');
68+
}
69+
document.addEventListener('click', hideSidebarIfClickedOutside);
70+
updateLiveTime();
71+
setInterval(updateLiveTime, 1000);
72+
});
73+
</script>
10174
</body>
102-
</html>
75+
</html>

0 commit comments

Comments
 (0)