Skip to content

Commit b7ded1c

Browse files
SomeshdiwanSomeshdiwan
committed
Adjusting CSS AND Style for the Slide Bar.
Signed-off-by: Someshdiwan <[email protected]>
1 parent f4b76f7 commit b7ded1c

File tree

2 files changed

+76
-58
lines changed

2 files changed

+76
-58
lines changed

‎site/_layouts/default.html‎

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,69 +3,41 @@
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 -->
7+
<!-- Favicon & PWA Icons -->
98
<link rel="icon" type="image/png" href="{{ '/assets/favicon-96x96.png' | relative_url }}" sizes="96x96" />
109
<link rel="icon" type="image/svg+xml" href="{{ '/assets/favicon.svg' | relative_url }}" />
1110
<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-
18-
<meta name="theme-color" content="#ffffff">
13+
<meta name="theme-color" content="#ffffff" />
14+
<link rel="manifest" href="/Java-Mastery/assets/site.webmanifest">
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 }}">
18+
2219
<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+
2326
// Sidebar Toggle Function
2427
function toggleSidebar() {
2528
const sidebar = document.getElementById("sidebar");
2629
sidebar.classList.toggle("hidden");
2730
}
2831

29-
// Dark Mode Toggle
30-
const toggleDarkMode = () => {
31-
document.body.classList.toggle('dark-mode');
32-
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
33-
};
34-
35-
window.onload = () => {
36-
if (localStorage.getItem('dark-mode') === 'true') {
37-
document.body.classList.add('dark-mode');
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");
3837
}
39-
};
40-
</script>
41-
</head>
42-
<body>
43-
<!-- Dark Mode Toggle Button -->
44-
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
45-
46-
<div class="wrapper">
47-
<!-- Sidebar Navigation -->
48-
<div id="sidebar" class="sidebar">
49-
{% include nav.html %}
50-
</div>
51-
52-
<!-- Content Area -->
53-
<div class="content">
54-
<!-- Sidebar Toggle Button -->
55-
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
56-
<div class="fade-in">
57-
{{ content }}
58-
</div>
59-
</div>
60-
<script>
61-
if ("serviceWorker" in navigator) {
62-
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
63-
.then(() => console.log("✅ Service Worker Registered"))
64-
.catch(err => console.error("SW registration failed", err));
6538
}
66-
</script>
6739

68-
<script>
40+
// Update Live Time Function
6941
function updateLiveTime() {
7042
const now = new Date();
7143
let hours = now.getHours();
@@ -77,12 +49,12 @@
7749
document.getElementById('live-time').textContent = `Time: ${timeString}`;
7850
}
7951

52+
// Fetch User Location using OpenStreetMap Nominatim API
8053
function fetchUserLocation() {
8154
if (!navigator.geolocation) {
8255
document.getElementById('user-location').textContent = 'Location: Not supported';
8356
return;
8457
}
85-
8658
navigator.geolocation.getCurrentPosition(position => {
8759
const { latitude, longitude } = position.coords;
8860
fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`)
@@ -100,13 +72,61 @@
10072
});
10173
}
10274

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
10385
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
10492
updateLiveTime();
10593
setInterval(updateLiveTime, 1000);
10694
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();
107101
});
108102
</script>
103+
</head>
104+
<body>
105+
<!-- Dark Mode Toggle Button (stays top-right) -->
106+
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
109107

108+
<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 }}
122+
</div>
123+
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>
128+
</div>
129+
</div>
110130
</div>
111131
</body>
112-
</html>
132+
</html>

‎site/assets/style.css‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -163,17 +163,15 @@ body {
163163
/* for the Location and Time Container */
164164
<style>
165165
#time-location-container {
166-
max-width: 300px;
167-
margin: 1rem auto;
168-
padding: 1rem;
169-
border-radius: 12px;
170-
background-color: #f0f0f0;
171-
color: #222;
172-
font-size: 1rem;
173-
font-weight: 500;
174-
text-align: center;
175-
box-shadow: 0 0 10px rgba(0,0,0,0.05);
176-
transition: background-color 0.3s, color 0.3s;
166+
background: rgba(0, 0, 0, 0.6);
167+
color: #00ffff;
168+
border: 1px solid #00ffff;
169+
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
170+
border-radius: 16px;
171+
padding: 1.2rem;
172+
text-align: center;
173+
font-weight: 600;
174+
font-size: 1.05rem;
177175
}
178176

179177
body.dark-mode #time-location-container {

0 commit comments

Comments
 (0)