Skip to content

Commit 6dfaff0

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 2.5
Signed-off-by: Someshdiwan <[email protected]>
1 parent 84a2eb2 commit 6dfaff0

File tree

3 files changed

+26
-806
lines changed

3 files changed

+26
-806
lines changed

‎site/_layouts/default.html‎

Lines changed: 6 additions & 289 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-
&lt;!&ndash; Font Awesome &ndash;&gt;
172+
<!-- Font Awesome -->
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-
&lt;!&ndash; Favicons &ndash;&gt;
178+
<!-- Favicons -->
179179
<link
180180
rel="icon" type="image/png"
181181
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
@@ -356,288 +356,6 @@
356356
</script>
357357
</head>
358358

359-
<body>
360-
&lt;!&ndash; Dark Mode & Timezone Controls &ndash;&gt;
361-
<div id="theme-time-container">
362-
<button class="dark-toggle" onclick="toggleDarkMode()" aria-label="Toggle Dark Mode">
363-
<i class="fas fa-moon"></i>
364-
</button>
365-
<div id="time-zone-wrapper">
366-
<button id="tz-toggle-btn" class="time-toggle" onclick="toggleTimezone()" aria-label="Toggle Timezone">IST</button>
367-
<span id="live-time">Time: Loading...</span>
368-
</div>
369-
</div>
370-
371-
&lt;!&ndash; Onboarding Tooltip &ndash;&gt;
372-
<div id="tooltip" class="tooltip">
373-
Single tap to hide sidebar, double tap to show
374-
</div>
375-
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-
641359
<body>
642360
<!-- Dark Mode & Timezone Controls -->
643361
<div id="theme-time-container">
@@ -651,9 +369,8 @@
651369
</div>
652370

653371
<!-- 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>
372+
<div id="tooltip" class="tooltip">
373+
Single tap to hide sidebar, double tap to show
657374
</div>
658375

659376
<!-- Collapsible Sidebar -->
@@ -687,4 +404,4 @@
687404
</div>
688405
</div>
689406
</body>
690-
</html>
407+
</html>

0 commit comments

Comments
 (0)