Skip to content

Commit ffd0208

Browse files
SomeshdiwanSomeshdiwan
committed
Next Target Create new Branch and Add upcoming features and then Merge it.
Signed-off-by: Someshdiwan <[email protected]>
1 parent e49a8fc commit ffd0208

File tree

2 files changed

+121
-137
lines changed

2 files changed

+121
-137
lines changed

‎site/_layouts/default.html‎

Lines changed: 118 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,132 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
7-
<!-- Favicon & PWA Icons -->
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 }}" />
11-
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
12-
<meta name="apple-mobile-web-app-title" content="Java" />
13-
<meta name="theme-color" content="#ffffff" />
14-
<link rel="manifest" href="/Java-Mastery/assets/site.webmanifest">
15-
16-
<title>{{ page.title }}</title>
17-
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}">
18-
19-
<script>
20-
// Dark Mode Toggle Function
21-
const toggleDarkMode = () => {
22-
document.body.classList.toggle('dark-mode');
23-
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
24-
};
25-
26-
// Sidebar Toggle Function
27-
function toggleSidebar() {
28-
const sidebar = document.getElementById("sidebar");
29-
sidebar.classList.toggle("hidden");
30-
}
31-
32-
// Hide Sidebar on Outside Click
33-
function hideSidebarIfClickedOutside(event) {
34-
const sidebar = document.getElementById("sidebar");
35-
if (!sidebar.classList.contains("hidden") && !sidebar.contains(event.target)) {
36-
sidebar.classList.add("hidden");
37-
}
38-
}
39-
40-
// Update Live Time Function
41-
function updateLiveTime() {
42-
const now = new Date();
43-
let hours = now.getHours();
44-
const minutes = now.getMinutes().toString().padStart(2, '0');
45-
const seconds = now.getSeconds().toString().padStart(2, '0');
46-
const ampm = hours >= 12 ? 'PM' : 'AM';
47-
hours = hours % 12 || 12;
48-
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
49-
document.getElementById('live-time').textContent = `Time: ${timeString}`;
50-
}
51-
52-
// Fetch User Location using OpenStreetMap Nominatim API
53-
function fetchUserLocation() {
54-
if (!navigator.geolocation) {
55-
document.getElementById('user-location').textContent = 'Location: Not supported';
56-
return;
57-
}
58-
navigator.geolocation.getCurrentPosition(position => {
59-
const { latitude, longitude } = position.coords;
60-
fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`)
61-
.then(res => res.json())
62-
.then(data => {
63-
const city = data.address.city || data.address.town || data.address.village || "Unknown";
64-
const country = data.address.country || "Unknown";
65-
document.getElementById('user-location').textContent = `Location: ${city}, ${country}`;
66-
})
67-
.catch(() => {
68-
document.getElementById('user-location').textContent = 'Location: Unavailable';
4+
<meta charset="UTF-8" />
5+
<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" />-->
7+
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 }}" />
12+
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
13+
<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+
18+
<meta name="theme-color" content="#ffffff">
19+
20+
<title>{{ page.title }}</title>
21+
<link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
22+
23+
<script>
24+
// Sidebar Toggle Function
25+
function toggleSidebar() {
26+
const sidebar = document.getElementById("sidebar");
27+
sidebar.classList.toggle("hidden");
28+
}
29+
30+
// Function to hide sidebar if clicked outside
31+
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");
39+
}
40+
}
41+
42+
// Dark Mode Toggle
43+
const toggleDarkMode = () => {
44+
document.body.classList.toggle('dark-mode');
45+
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));
63+
}
64+
65+
// Live Time Update
66+
function updateLiveTime() {
67+
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';
72+
hours = hours % 12 || 12;
73+
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
74+
document.getElementById('live-time').textContent = `Time: ${timeString}`;
75+
}
76+
77+
// Fetch User Location
78+
function fetchUserLocation() {
79+
if (!navigator.geolocation) {
80+
document.getElementById('user-location').textContent = 'Location: Not supported';
81+
return;
82+
}
83+
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';
6998
});
70-
}, () => {
71-
document.getElementById('user-location').textContent = 'Location: Permission denied';
72-
});
73-
}
74-
75-
// Service Worker Registration
76-
function registerServiceWorker() {
77-
if ("serviceWorker" in navigator) {
78-
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
79-
.then(() => console.log("✅ Service Worker Registered"))
80-
.catch(err => console.error("SW registration failed", err));
81-
}
82-
}
83-
84-
// Initialization
85-
window.addEventListener('DOMContentLoaded', () => {
86-
// Apply stored dark mode setting
87-
if (localStorage.getItem('dark-mode') === 'true') {
88-
document.body.classList.add('dark-mode');
89-
}
90-
91-
// Initialize live time and location updates
92-
updateLiveTime();
93-
setInterval(updateLiveTime, 1000);
94-
fetchUserLocation();
95-
96-
// Attach click event to hide sidebar when clicking outside
97-
document.addEventListener('click', hideSidebarIfClickedOutside);
98-
99-
// Register the service worker
100-
registerServiceWorker();
101-
});
102-
</script>
99+
}
100+
101+
// DOM Content Loaded setup
102+
window.addEventListener('DOMContentLoaded', () => {
103+
updateLiveTime();
104+
setInterval(updateLiveTime, 1000);
105+
fetchUserLocation();
106+
});
107+
</script>
108+
103109
</head>
104110
<body>
105-
<!-- Dark Mode Toggle Button (stays top-right) -->
111+
<!-- Dark Mode Toggle Button -->
106112
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
107113

108114
<div class="wrapper">
109-
<!-- Sidebar Navigation -->
110-
<div id="sidebar" class="sidebar">
111-
{% include nav.html %}
112-
</div>
113-
114-
<!-- Content Area -->
115-
<div class="content">
116-
<!-- Manual Sidebar Toggle Button (optional) -->
117-
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
118-
119-
<!-- Main Content -->
120-
<div class="fade-in">
121-
{{ content }}
115+
<!-- Sidebar Navigation -->
116+
<div id="sidebar" class="sidebar">
117+
{% include nav.html %}
122118
</div>
123119

124-
<!-- Time & Location Container -->
125-
<div id="time-location-container">
126-
<div id="live-time">Time: Loading...</div>
127-
<div id="user-location">Location: Detecting...</div>
120+
<!-- Content Area -->
121+
<div class="content">
122+
<!-- Sidebar Toggle Button -->
123+
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
124+
<div class="fade-in">
125+
{{ content }}
126+
</div>
128127
</div>
129-
</div>
128+
</div>
129+
130130
</div>
131131
</body>
132-
</html>
132+
</html>

‎site/assets/style.css‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ body {
1919
font-family: sans-serif;
2020
}
2121

22+
2223
/* Sidebar Styles */
2324
.sidebar {
2425
background-color: var(--sidebar-bg);
@@ -61,7 +62,8 @@ body {
6162
margin-left: 0;
6263
}
6364

64-
/* Toggle Button *//*
65+
66+
/* Toggle Button */
6567
.toggle-btn {
6668
position: fixed;
6769
top: 1rem;
@@ -72,24 +74,6 @@ body {
7274
padding: 0.5rem 1rem;
7375
border-radius: 5px;
7476
cursor: pointer;
75-
}*/
76-
77-
.toggle-btn {
78-
position: fixed;
79-
top: 1rem;
80-
left: 1rem;
81-
z-index: 1001; /* Ensure it's above other elements */
82-
background-color: var(--button-bg);
83-
color: var(--button-text);
84-
border: none;
85-
padding: 0.5rem 1rem;
86-
border-radius: 5px;
87-
cursor: pointer;
88-
transition: background-color 0.3s ease;
89-
}
90-
91-
.toggle-btn:hover {
92-
background-color: var(--hover-bg);
9377
}
9478

9579
/* Dark Mode Toggle Button */

0 commit comments

Comments
 (0)