Skip to content

Commit 83aae6d

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 2.1
Signed-off-by: Someshdiwan <[email protected]>
1 parent 64ce397 commit 83aae6d

File tree

2 files changed

+466
-25
lines changed

2 files changed

+466
-25
lines changed

‎site/_layouts/default.html‎

Lines changed: 194 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1+
<!--
12
<!DOCTYPE html>
23
<html lang="en">
34
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
7-
<!-- Font Awesome -->
8+
&lt;!&ndash; Font Awesome &ndash;&gt;
89
<link
910
rel="stylesheet"
1011
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
1112
/>
1213
13-
<!-- Favicons -->
14+
&lt;!&ndash; Favicons &ndash;&gt;
1415
<link
1516
rel="icon" type="image/png"
1617
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
@@ -117,7 +118,7 @@
117118
</head>
118119
119120
<body>
120-
<!-- Dark Mode & Timezone Controls -->
121+
&lt;!&ndash; Dark Mode & Timezone Controls &ndash;&gt;
121122
<div id="theme-time-container">
122123
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
123124
<div id="time-zone-wrapper">
@@ -126,7 +127,7 @@
126127
</div>
127128
</div>
128129
129-
<!-- Collapsible Sidebar -->
130+
&lt;!&ndash; Collapsible Sidebar &ndash;&gt;
130131
<div id="sidebar" class="sidebar">
131132
<a href="{{ site.baseurl }}/" class="sidebar-link active">
132133
<i class="fas fa-home"></i> Home
@@ -145,12 +146,12 @@
145146
</a>
146147
</div>
147148
148-
<!-- Toggle Button for Mobile -->
149+
&lt;!&ndash; Toggle Button for Mobile &ndash;&gt;
149150
<button class="toggle-btn" onclick="toggleSidebar()">
150151
<i class="fas fa-bars"></i>
151152
</button>
152153
153-
<!-- Main Content -->
154+
&lt;!&ndash; Main Content &ndash;&gt;
154155
<div class="wrapper">
155156
<div class="content">
156157
<div class="fade-in">
@@ -160,3 +161,190 @@
160161
</div>
161162
</body>
162163
</html>
164+
-->
165+
166+
167+
<!DOCTYPE html>
168+
<html lang="en">
169+
<head>
170+
<meta charset="UTF-8" />
171+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
172+
173+
<!-- Font Awesome -->
174+
<link
175+
rel="stylesheet"
176+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
177+
/>
178+
179+
<!-- Favicons -->
180+
<link
181+
rel="icon" type="image/png"
182+
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
183+
sizes="96x96"
184+
/>
185+
<link
186+
rel="icon" type="image/svg+xml"
187+
href="{{ '/assets/favicon.svg' | relative_url }}"
188+
/>
189+
<link
190+
rel="shortcut icon"
191+
href="{{ '/assets/favicon.ico' | relative_url }}"
192+
/>
193+
<link
194+
rel="apple-touch-icon"
195+
sizes="180x180"
196+
href="{{ '/assets/apple-touch-icon.png' | relative_url }}"
197+
/>
198+
<meta name="apple-mobile-web-app-title" content="Java" />
199+
<link
200+
rel="manifest"
201+
href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest"
202+
/>
203+
<meta name="theme-color" content="#ffffff" />
204+
205+
<title>{{ page.title }}</title>
206+
<link
207+
rel="stylesheet"
208+
href="{{ '/assets/style.css' | relative_url }}"
209+
/>
210+
211+
<script>
212+
// Current timezone tracker
213+
let currentZone = 'IST';
214+
215+
// Sidebar toggle
216+
function toggleSidebar() {
217+
const sidebar = document.getElementById('sidebar');
218+
sidebar.classList.toggle('hidden');
219+
localStorage.setItem('sidebar-hidden', sidebar.classList.contains('hidden'));
220+
}
221+
222+
// Hide sidebar on outside click (mobile only)
223+
function hideSidebarIfClickedOutside(e) {
224+
const sidebar = document.getElementById('sidebar');
225+
const toggleBtn = document.querySelector('.toggle-btn');
226+
if (
227+
!sidebar.classList.contains('hidden') &&
228+
!sidebar.contains(e.target) &&
229+
!toggleBtn.contains(e.target) &&
230+
window.innerWidth <= 768
231+
) {
232+
sidebar.classList.add('hidden');
233+
localStorage.setItem('sidebar-hidden', true);
234+
}
235+
}
236+
237+
// Dark mode toggle
238+
function toggleDarkMode() {
239+
const body = document.body;
240+
body.classList.toggle('dark-mode');
241+
const isDark = body.classList.contains('dark-mode');
242+
localStorage.setItem('dark-mode', isDark);
243+
const icon = document.querySelector('.dark-toggle i');
244+
icon.classList.remove('fa-moon', 'fa-sun');
245+
icon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
246+
}
247+
248+
// Timezone toggle
249+
function toggleTimezone() {
250+
currentZone = currentZone === 'IST' ? 'GMT' : 'IST';
251+
document.getElementById('tz-toggle-btn').textContent = currentZone;
252+
updateLiveTime();
253+
}
254+
255+
// Update live time
256+
function updateLiveTime() {
257+
const now = new Date();
258+
let date;
259+
if (currentZone === 'GMT') {
260+
date = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
261+
} else {
262+
const utc = now.getTime() + now.getTimezoneOffset() * 60000;
263+
date = new Date(utc + 5.5 * 3600000);
264+
}
265+
let h = date.getHours();
266+
const m = date.getMinutes().toString().padStart(2, '0');
267+
const s = date.getSeconds().toString().padStart(2, '0');
268+
const ampm = h >= 12 ? 'PM' : 'AM';
269+
h = h % 12 || 12;
270+
document.getElementById('live-time').textContent =
271+
`Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
272+
}
273+
274+
// On load: init dark mode, sidebar state, listeners, time, SW
275+
window.onload = () => {
276+
// Initialize dark mode
277+
const isDark = localStorage.getItem('dark-mode') === 'true';
278+
const body = document.body;
279+
if (isDark) {
280+
body.classList.add('dark-mode');
281+
document.querySelector('.dark-toggle i').classList.replace('fa-moon', 'fa-sun');
282+
}
283+
284+
// Initialize sidebar state
285+
const sidebar = document.getElementById('sidebar');
286+
if (localStorage.getItem('sidebar-hidden') === 'true') {
287+
sidebar.classList.add('hidden');
288+
} else {
289+
sidebar.classList.remove('hidden');
290+
}
291+
292+
document.addEventListener('click', hideSidebarIfClickedOutside);
293+
updateLiveTime();
294+
setInterval(updateLiveTime, 1000);
295+
296+
if ('serviceWorker' in navigator) {
297+
navigator.serviceWorker
298+
.register('/JavaEvolution-Learning-Growing-Mastering/assets/sw.js')
299+
.then(() => console.log('Service Worker Registered'))
300+
.catch(err => console.error('SW registration failed', err));
301+
}
302+
};
303+
</script>
304+
</head>
305+
306+
<body>
307+
<!-- Dark Mode & Timezone Controls -->
308+
<div id="theme-time-container">
309+
<button class="dark-toggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
310+
<i class="fas fa-moon"></i>
311+
</button>
312+
<div id="time-zone-wrapper">
313+
<button id="tz-toggle-btn" class="time-toggle" onclick="toggleTimezone()" aria-label="Toggle Timezone">IST</button>
314+
<span id="live-time">Time: Loading...</span>
315+
</div>
316+
</div>
317+
318+
<!-- Collapsible Sidebar -->
319+
<div id="sidebar" class="sidebar">
320+
<button class="close-btn" onclick="toggleSidebar()" aria-label="Close Sidebar">×</button>
321+
<a href="{{ site.baseurl }}/" class="sidebar-link active">
322+
<i class="fas fa-home"></i> Home
323+
</a>
324+
<a href="{{ site.baseurl }}/content" class="sidebar-link">
325+
<i class="fas fa-book"></i> All Contents
326+
</a>
327+
<a
328+
href="https://github.com/Someshdiwan/JavaEvolution-Learning-Growing-Mastering"
329+
target="_blank"
330+
class="sidebar-link"
331+
>
332+
<i class="fab fa-github"></i> GitHub Repo
333+
</a>
334+
</div>
335+
336+
<!-- Toggle Button for Mobile -->
337+
<button class="toggle-btn" onclick="toggleSidebar()" aria-label="Toggle Sidebar">
338+
<i class="fas fa-bars"></i>
339+
</button>
340+
341+
<!-- Main Content -->
342+
<div class="wrapper">
343+
<div class="content">
344+
<div class="fade-in">
345+
{{ content }}
346+
</div>
347+
</div>
348+
</div>
349+
</body>
350+
</html>

0 commit comments

Comments
 (0)