Skip to content

Commit 7ee0aa7

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 2.4
Signed-off-by: Someshdiwan <[email protected]>
1 parent 998c98b commit 7ee0aa7

File tree

2 files changed

+557
-22
lines changed

2 files changed

+557
-22
lines changed

‎site/_layouts/default.html‎

Lines changed: 288 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -163,19 +163,19 @@
163163
</html>
164164
-->
165165

166-
<!DOCTYPE html>
166+
<!--<!DOCTYPE html>
167167
<html lang="en">
168168
<head>
169169
<meta charset="UTF-8" />
170170
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
171171
172-
<!-- Font Awesome -->
172+
&lt;!&ndash; Font Awesome &ndash;&gt;
173173
<link
174174
rel="stylesheet"
175175
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
176176
/>
177177
178-
<!-- Favicons -->
178+
&lt;!&ndash; Favicons &ndash;&gt;
179179
<link
180180
rel="icon" type="image/png"
181181
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
@@ -357,7 +357,7 @@
357357
</head>
358358
359359
<body>
360-
<!-- Dark Mode & Timezone Controls -->
360+
&lt;!&ndash; Dark Mode & Timezone Controls &ndash;&gt;
361361
<div id="theme-time-container">
362362
<button class="dark-toggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
363363
<i class="fas fa-moon"></i>
@@ -368,11 +368,294 @@
368368
</div>
369369
</div>
370370
371-
<!-- Onboarding Tooltip -->
371+
&lt;!&ndash; Onboarding Tooltip &ndash;&gt;
372372
<div id="tooltip" class="tooltip">
373373
Single tap to hide sidebar, double tap to show
374374
</div>
375375
376+
&lt;!&ndash; Collapsible Sidebar &ndash;&gt;
377+
<div id="sidebar" class="sidebar">
378+
<a href="{{ site.baseurl }}/" class="sidebar-link active">
379+
<i class="fas fa-home"></i> Home
380+
</a>
381+
<a href="{{ site.baseurl }}/content" class="sidebar-link">
382+
<i class="fas fa-book"></i> All Contents
383+
</a>
384+
<a
385+
href="https://github.com/Someshdiwan/JavaEvolution-Learning-Growing-Mastering"
386+
target="_blank"
387+
class="sidebar-link"
388+
>
389+
<i class="fab fa-github"></i> GitHub Repo
390+
</a>
391+
</div>
392+
393+
&lt;!&ndash; Toggle Button (Fallback) &ndash;&gt;
394+
<button class="toggle-btn" onclick="toggleSidebar(!document.getElementById('sidebar').classList.contains('hidden'))" aria-label="Toggle Sidebar">
395+
<i class="fas fa-bars"></i>
396+
</button>
397+
398+
&lt;!&ndash; Main Content &ndash;&gt;
399+
<div class="wrapper">
400+
<div class="content">
401+
<div class="fade-in">
402+
{{ content }}
403+
</div>
404+
</div>
405+
</div>
406+
</body>
407+
</html>-->
408+
409+
410+
411+
<!DOCTYPE html>
412+
<html lang="en">
413+
<head>
414+
<meta charset="UTF-8" />
415+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
416+
417+
<!-- Font Awesome -->
418+
<link
419+
rel="stylesheet"
420+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
421+
/>
422+
423+
<!-- Favicons -->
424+
<link
425+
rel="icon" type="image/png"
426+
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
427+
sizes="96x96"
428+
/>
429+
<link
430+
rel="icon" type="image/svg+xml"
431+
href="{{ '/assets/favicon.svg' | relative_url }}"
432+
/>
433+
<link
434+
rel="shortcut icon"
435+
href="{{ '/assets/favicon.ico' | relative_url }}"
436+
/>
437+
<link
438+
rel="apple-touch-icon"
439+
sizes="180x180"
440+
href="{{ '/assets/apple-touch-icon.png' | relative_url }}"
441+
/>
442+
<meta name="apple-mobile-web-app-title" content="Java" />
443+
<link
444+
rel="manifest"
445+
href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest"
446+
/>
447+
<meta name="theme-color" content="#ffffff" />
448+
449+
<title>{{ page.title }}</title>
450+
<link
451+
rel="stylesheet"
452+
href="{{ '/assets/style.css' | relative_url }}"
453+
/>
454+
455+
<script>
456+
// Current timezone tracker
457+
let currentZone = 'IST';
458+
let tapCount = 0;
459+
let tapTimer = null;
460+
let touchStartX = 0;
461+
const TAP_TIMEOUT = 300; // ms for double-tap detection
462+
const SCROLL_THRESHOLD = 100; // px to hide theme/time container
463+
const SWIPE_THRESHOLD = 50; // px for swipe detection
464+
465+
// Throttle function to limit scroll event frequency
466+
function throttle(fn, wait) {
467+
let lastCall = 0;
468+
return function (...args) {
469+
const now = performance.now();
470+
if (now - lastCall >= wait) {
471+
lastCall = now;
472+
fn(...args);
473+
}
474+
};
475+
}
476+
477+
// Sidebar toggle
478+
function toggleSidebar(isHidden) {
479+
const sidebar = document.getElementById('sidebar');
480+
const toggleBtn = document.querySelector('.toggle-btn');
481+
sidebar.classList.toggle('hidden', isHidden);
482+
localStorage.setItem('sidebar-hidden', isHidden);
483+
if (window.innerWidth > 768) {
484+
toggleBtn.style.display = isHidden ? 'block' : 'none';
485+
}
486+
}
487+
488+
// Handle tap/click events
489+
function handleTap(event) {
490+
const sidebar = document.getElementById('sidebar');
491+
const target = event.target;
492+
493+
if (
494+
target.closest('a') ||
495+
target.closest('button') ||
496+
target.closest('#sidebar') ||
497+
target.closest('#theme-time-container') ||
498+
target.closest('.tooltip')
499+
) {
500+
return;
501+
}
502+
503+
tapCount++;
504+
if (tapCount === 1) {
505+
tapTimer = setTimeout(() => {
506+
if (!sidebar.classList.contains('hidden')) {
507+
toggleSidebar(true);
508+
}
509+
tapCount = 0;
510+
}, TAP_TIMEOUT);
511+
} else if (tapCount === 2) {
512+
clearTimeout(tapTimer);
513+
if (sidebar.classList.contains('hidden')) {
514+
toggleSidebar(false);
515+
}
516+
tapCount = 0;
517+
}
518+
}
519+
520+
// Handle swipe gestures
521+
function handleSwipeStart(e) {
522+
touchStartX = e.touches[0].clientX;
523+
}
524+
525+
function handleSwipeEnd(e) {
526+
const touchEndX = e.changedTouches[0].clientX;
527+
const deltaX = touchEndX - touchStartX;
528+
const sidebar = document.getElementById('sidebar');
529+
if (deltaX > SWIPE_THRESHOLD && sidebar.classList.contains('hidden')) {
530+
toggleSidebar(false); // Swipe right to show
531+
} else if (deltaX < -SWIPE_THRESHOLD && !sidebar.classList.contains('hidden')) {
532+
toggleSidebar(true); // Swipe left to hide
533+
}
534+
}
535+
536+
// Dark mode toggle
537+
function toggleDarkMode() {
538+
const body = document.body;
539+
body.classList.toggle('dark-mode');
540+
const isDark = body.classList.contains('dark-mode');
541+
localStorage.setItem('dark-mode', isDark);
542+
const icon = document.querySelector('.dark-toggle i');
543+
icon.classList.remove('fa-moon', 'fa-sun');
544+
icon.classList.add(isDark ? 'fa-sun' : 'fa-moon');
545+
}
546+
547+
// Timezone toggle
548+
function toggleTimezone() {
549+
currentZone = currentZone === 'IST' ? 'GMT' : 'IST';
550+
document.getElementById('tz-toggle-btn').textContent = currentZone;
551+
updateLiveTime();
552+
}
553+
554+
// Update live time
555+
function updateLiveTime() {
556+
const now = new Date();
557+
let date;
558+
if (currentZone === 'GMT') {
559+
date = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
560+
} else {
561+
const utc = now.getTime() + now.getTimezoneOffset() * 60000;
562+
date = new Date(utc + 5.5 * 3600000);
563+
}
564+
let h = date.getHours();
565+
const m = date.getMinutes().toString().padStart(2, '0');
566+
const s = date.getSeconds().toString().padStart(2, '0');
567+
const ampm = h >= 12 ? 'PM' : 'AM';
568+
h = h % 12 || 12;
569+
document.getElementById('live-time').textContent =
570+
`Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
571+
}
572+
573+
// Handle scroll for theme/time container
574+
function handleScroll() {
575+
const themeTimeContainer = document.getElementById('theme-time-container');
576+
themeTimeContainer.classList.toggle('hidden', window.scrollY > SCROLL_THRESHOLD);
577+
}
578+
579+
// Close tooltip
580+
function closeTooltip() {
581+
const tooltip = document.getElementById('tooltip');
582+
tooltip.classList.remove('visible');
583+
localStorage.setItem('tooltip-shown', 'true');
584+
}
585+
586+
// On load: init dark mode, sidebar state, listeners, time, SW
587+
window.onload = () => {
588+
// Initialize dark mode
589+
const isDark = localStorage.getItem('dark-mode') === 'true';
590+
const body = document.body;
591+
if (isDark) {
592+
body.classList.add('dark-mode');
593+
document.querySelector('.dark-toggle i').classList.replace('fa-moon', 'fa-sun');
594+
}
595+
596+
// Initialize sidebar state
597+
const sidebar = document.getElementById('sidebar');
598+
const toggleBtn = document.querySelector('.toggle-btn');
599+
const isSidebarHidden = localStorage.getItem('sidebar-hidden') === 'true';
600+
sidebar.classList.toggle('hidden', isSidebarHidden);
601+
if (window.innerWidth > 768) {
602+
toggleBtn.style.display = isSidebarHidden ? 'block' : 'none';
603+
} else {
604+
toggleBtn.style.display = 'block';
605+
}
606+
607+
// Add listeners
608+
document.addEventListener('click', handleTap);
609+
document.addEventListener('touchstart', handleTap, { passive: true });
610+
document.addEventListener('touchstart', handleSwipeStart, { passive: true });
611+
document.addEventListener('touchend', handleSwipeEnd, { passive: true });
612+
window.addEventListener('scroll', throttle(handleScroll, 100), { passive: true });
613+
614+
// Show tooltip on first visit
615+
if (!localStorage.getItem('tooltip-shown')) {
616+
setTimeout(() => {
617+
const tooltip = document.getElementById('tooltip');
618+
tooltip.classList.add('visible');
619+
setTimeout(() => {
620+
if (tooltip.classList.contains('visible')) {
621+
tooltip.classList.remove('visible');
622+
localStorage.setItem('tooltip-shown', 'true');
623+
}
624+
}, 5000);
625+
}, 1000);
626+
}
627+
628+
updateLiveTime();
629+
setInterval(updateLiveTime, 1000);
630+
631+
if ('serviceWorker' in navigator) {
632+
navigator.serviceWorker
633+
.register('/JavaEvolution-Learning-Growing-Mastering/assets/sw.js')
634+
.then(() => console.log('Service Worker Registered'))
635+
.catch(err => console.error('SW registration failed', err));
636+
}
637+
};
638+
</script>
639+
</head>
640+
641+
<body>
642+
<!-- Dark Mode & Timezone Controls -->
643+
<div id="theme-time-container">
644+
<button class="dark-toggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
645+
<i class="fas fa-moon"></i>
646+
</button>
647+
<div id="time-zone-wrapper">
648+
<button id="tz-toggle-btn" class="time-toggle" onclick="toggleTimezone()" aria-label="Toggle Timezone">IST</button>
649+
<span id="live-time">Time: Loading...</span>
650+
</div>
651+
</div>
652+
653+
<!-- Onboarding Tooltip -->
654+
<div id="tooltip" class="tooltip" aria-hidden="true">
655+
Single tap to hide sidebar, double tap or swipe right to show
656+
<button class="tooltip-close" onclick="closeTooltip()" aria-label="Close Tooltip">×</button>
657+
</div>
658+
376659
<!-- Collapsible Sidebar -->
377660
<div id="sidebar" class="sidebar">
378661
<a href="{{ site.baseurl }}/" class="sidebar-link active">

0 commit comments

Comments
 (0)