Skip to content

Commit d74bfa0

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 1.3
Signed-off-by: Someshdiwan <[email protected]>
1 parent cc114bd commit d74bfa0

File tree

3 files changed

+119
-130
lines changed

3 files changed

+119
-130
lines changed

‎site/_layouts/default.html‎

Lines changed: 47 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,130 +3,98 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<!--<link rel="icon" href="{{ '/assets/favicon.ico' | relative_url }}" type="image/x-icon" />-->
76

8-
<!-- Added Favicon -->
9-
<link rel="icon" type="image/png" href="{{ '/assets/favicon-96x96.png' | relative_url }}" sizes="96x96" />
10-
<link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.svg' | relative_url }}" />
11-
<link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}" />
7+
<!-- Favicons -->
8+
<link rel="icon" type="image/png" href="{{ '/assets/favicon-96x96.png' | relative_url }}" sizes="96x96" />
9+
<link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.svg' | relative_url }}" />
10+
<link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}" />
1211
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
1312
<meta name="apple-mobile-web-app-title" content="Java" />
14-
15-
<!--<link rel="manifest" href="{{ '/assets/site.webmanifest' | relative_url }}" />-->
16-
<link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest">
17-
13+
<link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest" />
1814
<meta name="theme-color" content="#ffffff">
1915

2016
<title>{{ page.title }}</title>
21-
<link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
17+
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}">
2218

2319
<script>
24-
// Sidebar Toggle Function
20+
// Sidebar Toggle
2521
function toggleSidebar() {
26-
const sidebar = document.getElementById("sidebar");
27-
sidebar.classList.toggle("hidden");
22+
document.getElementById('sidebar').classList.toggle('hidden');
2823
}
2924

30-
// Function to hide sidebar if clicked outside
25+
// Hide Sidebar When Clicking Outside
3126
function hideSidebarIfClickedOutside(event) {
32-
const sidebar = document.getElementById("sidebar");
33-
const toggleBtn = document.querySelector(".toggle-btn");
34-
// Hide sidebar if it's visible and click is outside sidebar and not on toggle button
35-
if (!sidebar.classList.contains("hidden") &&
36-
!sidebar.contains(event.target) &&
37-
!toggleBtn.contains(event.target)) {
38-
sidebar.classList.add("hidden");
27+
const sidebar = document.getElementById('sidebar');
28+
const toggleBtn = document.querySelector('.toggle-btn');
29+
if (!sidebar.classList.contains('hidden')
30+
&& !sidebar.contains(event.target)
31+
&& !toggleBtn.contains(event.target)) {
32+
sidebar.classList.add('hidden');
3933
}
4034
}
4135

4236
// Dark Mode Toggle
43-
const toggleDarkMode = () => {
37+
function toggleDarkMode() {
4438
document.body.classList.toggle('dark-mode');
4539
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
46-
};
47-
48-
// Window onload setup
49-
window.onload = () => {
50-
// Dark mode initialization
51-
if (localStorage.getItem('dark-mode') === 'true') {
52-
document.body.classList.add('dark-mode');
53-
}
54-
// Add click listener for hiding sidebar
55-
document.addEventListener('click', hideSidebarIfClickedOutside);
56-
};
57-
58-
// Service Worker Registration
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));
6340
}
6441

6542
// Live Time Update
6643
function updateLiveTime() {
6744
const now = new Date();
68-
let hours = now.getHours();
69-
const minutes = now.getMinutes().toString().padStart(2, '0');
70-
const seconds = now.getSeconds().toString().padStart(2, '0');
71-
const ampm = hours >= 12 ? 'PM' : 'AM';
45+
let hours = now.getHours();
46+
const mins = now.getMinutes().toString().padStart(2, '0');
47+
const secs = now.getSeconds().toString().padStart(2, '0');
48+
const ampm = hours >= 12 ? 'PM' : 'AM';
7249
hours = hours % 12 || 12;
73-
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
74-
document.getElementById('live-time').textContent = `Time: ${timeString}`;
50+
document.getElementById('live-time').textContent =
51+
`Time: ${hours}:${mins}:${secs} ${ampm}`;
7552
}
7653

77-
// Fetch User Location
78-
function fetchUserLocation() {
79-
if (!navigator.geolocation) {
80-
document.getElementById('user-location').textContent = 'Location: Not supported';
81-
return;
54+
// On window load: initialize Dark Mode, Sidebar listener, Live Time & Service Worker
55+
window.onload = () => {
56+
// Dark mode init
57+
if (localStorage.getItem('dark-mode') === 'true') {
58+
document.body.classList.add('dark-mode');
8259
}
8360

84-
navigator.geolocation.getCurrentPosition(position => {
85-
const { latitude, longitude } = position.coords;
86-
fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`)
87-
.then(res => res.json())
88-
.then(data => {
89-
const city = data.address.city || data.address.town || data.address.village || "Unknown";
90-
const country = data.address.country || "Unknown";
91-
document.getElementById('user-location').textContent = `Location: ${city}, ${country}`;
92-
})
93-
.catch(() => {
94-
document.getElementById('user-location').textContent = 'Location: Unavailable';
95-
});
96-
}, () => {
97-
document.getElementById('user-location').textContent = 'Location: Permission denied';
98-
});
99-
}
61+
// Sidebar outside-click hide
62+
document.addEventListener('click', hideSidebarIfClickedOutside);
10063

101-
// DOM Content Loaded setup
102-
window.addEventListener('DOMContentLoaded', () => {
64+
// Start live time updates
10365
updateLiveTime();
10466
setInterval(updateLiveTime, 1000);
105-
fetchUserLocation();
106-
});
107-
</script>
10867

68+
// Service Worker registration
69+
if ('serviceWorker' in navigator) {
70+
navigator.serviceWorker
71+
.register('/JavaEvolution-Learning-Growing-Mastering/assets/sw.js')
72+
.then(() => console.log('✅ Service Worker Registered'))
73+
.catch(err => console.error('SW registration failed', err));
74+
}
75+
};
76+
</script>
10977
</head>
11078
<body>
111-
<!-- Dark Mode Toggle Button -->
112-
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
79+
<!-- Dark Mode & Live Time Container -->
80+
<div id="theme-time-container">
81+
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
82+
<div id="live-time">Time: Loading...</div>
83+
</div>
11384

11485
<div class="wrapper">
115-
<!-- Sidebar Navigation -->
86+
<!-- Sidebar -->
11687
<div id="sidebar" class="sidebar">
11788
{% include nav.html %}
11889
</div>
11990

120-
<!-- Content Area -->
91+
<!-- Main Content -->
12192
<div class="content">
122-
<!-- Sidebar Toggle Button -->
12393
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
12494
<div class="fade-in">
12595
{{ content }}
12696
</div>
12797
</div>
12898
</div>
129-
130-
</div>
13199
</body>
132-
</html>
100+
</html>

0 commit comments

Comments
 (0)