Skip to content

Commit 4154379

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 2.0
Signed-off-by: Someshdiwan <[email protected]>
1 parent c4656f1 commit 4154379

File tree

3 files changed

+212
-548
lines changed

3 files changed

+212
-548
lines changed

‎site/_includes/nav.html‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<!--
2-
<nav>
3-
<ul>
4-
<li><a href="{{ site.baseurl }}/">Home</a></li>
5-
<li><a href="{{ site.baseurl }}/content">All Contents</a></li>
6-
<li><a href="https://github.com/Someshdiwan/JavaEvolution-Learning-Growing-Mastering">GitHub Repo</a></li>
7-
</ul>
8-
</nav>
9-
-->
10-
111
<div class="sidebar" id="sidebar">
122
<a href="{{ site.baseurl }}/" class="sidebar-link active">
133
<i class="fas fa-home"></i> Home
@@ -20,4 +10,4 @@
2010
<a href="https://github.com/Someshdiwan/JavaEvolution-Learning-Growing-Mastering" class="sidebar-link" target="_blank">
2111
<i class="fab fa-github"></i> GitHub Repo
2212
</a>
23-
</div>
13+
</div>

‎site/_layouts/default.html‎

Lines changed: 86 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -3,200 +3,155 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
6+
7+
<!-- Font Awesome -->
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
11+
/>
712

813
<!-- Favicons -->
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 }}" />
14+
<link
15+
rel="icon" type="image/png"
16+
href="{{ '/assets/favicon-96x96.png' | relative_url }}"
17+
sizes="96x96"
18+
/>
19+
<link
20+
rel="icon" type="image/svg+xml"
21+
href="{{ '/assets/favicon.svg' | relative_url }}"
22+
/>
23+
<link
24+
rel="shortcut icon"
25+
href="{{ '/assets/favicon.ico' | relative_url }}"
26+
/>
27+
<link
28+
rel="apple-touch-icon"
29+
sizes="180x180"
30+
href="{{ '/assets/apple-touch-icon.png' | relative_url }}"
31+
/>
1332
<meta name="apple-mobile-web-app-title" content="Java" />
14-
<link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest" />
15-
<meta name="theme-color" content="#ffffff">
33+
<link
34+
rel="manifest"
35+
href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest"
36+
/>
37+
<meta name="theme-color" content="#ffffff" />
1638

1739
<title>{{ page.title }}</title>
18-
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}">
19-
40+
<link
41+
rel="stylesheet"
42+
href="{{ '/assets/style.css' | relative_url }}"
43+
/>
2044

21-
<!-- <script>
22-
// Track current zone: 'IST' or 'GMT'
45+
<script>
46+
// Current timezone tracker
2347
let currentZone = 'IST';
2448

25-
// Sidebar Toggle
49+
// Sidebar toggle
2650
function toggleSidebar() {
2751
document.getElementById('sidebar').classList.toggle('hidden');
2852
}
2953

30-
// Hide Sidebar When Clicking Outside
31-
function hideSidebarIfClickedOutside(event) {
32-
const sidebar = document.getElementById('sidebar');
54+
// Hide sidebar on outside click
55+
function hideSidebarIfClickedOutside(e) {
56+
const sidebar = document.getElementById('sidebar');
3357
const toggleBtn = document.querySelector('.toggle-btn');
34-
if (!sidebar.classList.contains('hidden')
35-
&& !sidebar.contains(event.target)
36-
&& !toggleBtn.contains(event.target)) {
58+
if (
59+
!sidebar.classList.contains('hidden') &&
60+
!sidebar.contains(e.target) &&
61+
!toggleBtn.contains(e.target)
62+
) {
3763
sidebar.classList.add('hidden');
3864
}
3965
}
4066

41-
// Dark Mode Toggle
67+
// Dark mode toggle
4268
function toggleDarkMode() {
4369
document.body.classList.toggle('dark-mode');
4470
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
4571
}
4672

47-
// Toggle between IST and GMT
73+
// Timezone toggle
4874
function toggleTimezone() {
49-
currentZone = (currentZone === 'IST') ? 'GMT' : 'IST';
75+
currentZone = currentZone === 'IST' ? 'GMT' : 'IST';
5076
document.getElementById('tz-toggle-btn').textContent = currentZone;
51-
updateLiveTime(); // immediately refresh display
77+
updateLiveTime();
5278
}
5379

54-
// Live Time Update with timezone support
80+
// Update live time
5581
function updateLiveTime() {
5682
const now = new Date();
5783
let date;
5884
if (currentZone === 'GMT') {
59-
// UTC time
6085
date = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
6186
} else {
62-
// IST = UTC + 5.5h
6387
const utc = now.getTime() + now.getTimezoneOffset() * 60000;
6488
date = new Date(utc + 5.5 * 3600000);
6589
}
66-
let hours = date.getHours();
67-
const mins = date.getMinutes().toString().padStart(2,'0');
68-
const secs = date.getSeconds().toString().padStart(2,'0');
69-
const ampm = hours >= 12 ? 'PM' : 'AM';
70-
hours = hours % 12 || 12;
90+
let h = date.getHours();
91+
const m = date.getMinutes().toString().padStart(2,'0');
92+
const s = date.getSeconds().toString().padStart(2,'0');
93+
const ampm = h >= 12 ? 'PM' : 'AM';
94+
h = h % 12 || 12;
7195
document.getElementById('live-time').textContent =
72-
`Time (${currentZone}): ${hours}:${mins}:${secs} ${ampm}`;
96+
`Time (${currentZone}): ${h}:${m}:${s} ${ampm}`;
7397
}
7498

75-
// On window load: initialize Dark Mode, Sidebar listener, Live Time & Service Worker
99+
// On load: init dark mode, listeners, time, SW
76100
window.onload = () => {
77-
// Dark mode init
78101
if (localStorage.getItem('dark-mode') === 'true') {
79102
document.body.classList.add('dark-mode');
80103
}
81-
82-
// Sidebar outside-click hide
83104
document.addEventListener('click', hideSidebarIfClickedOutside);
84-
85-
// Start live time updates
86105
updateLiveTime();
87106
setInterval(updateLiveTime, 1000);
88107

89-
// Service Worker registration
90108
if ('serviceWorker' in navigator) {
91109
navigator.serviceWorker
92110
.register('/JavaEvolution-Learning-Growing-Mastering/assets/sw.js')
93111
.then(() => console.log('✅ Service Worker Registered'))
94112
.catch(err => console.error('SW registration failed', err));
95113
}
96114
};
97-
</script>-->
98-
99-
<script>
100-
// Track current zone: 'IST' or 'GMT'
101-
let currentZone = 'IST';
102-
103-
// Sidebar Toggle
104-
function toggleSidebar() {
105-
document.getElementById('sidebar').classList.toggle('hidden');
106-
}
107-
108-
// Hide Sidebar When Clicking Outside
109-
function hideSidebarIfClickedOutside(event) {
110-
const sidebar = document.getElementById('sidebar');
111-
const toggleBtn = document.querySelector('.toggle-btn');
112-
if (!sidebar.classList.contains('hidden')
113-
&& !sidebar.contains(event.target)
114-
&& !toggleBtn.contains(event.target)) {
115-
sidebar.classList.add('hidden');
116-
}
117-
}
118-
119-
// Dark Mode Toggle
120-
function toggleDarkMode() {
121-
document.body.classList.toggle('dark-mode');
122-
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
123-
}
124-
125-
// Toggle between IST and GMT
126-
function toggleTimezone() {
127-
currentZone = (currentZone === 'IST') ? 'GMT' : 'IST';
128-
document.getElementById('tz-toggle-btn').textContent = currentZone;
129-
updateLiveTime(); // immediately refresh display
130-
}
131-
132-
// Live Time Update with timezone support
133-
function updateLiveTime() {
134-
const now = new Date();
135-
let date;
136-
if (currentZone === 'GMT') {
137-
// UTC time
138-
date = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
139-
} else {
140-
// IST = UTC + 5.5h
141-
const utc = now.getTime() + now.getTimezoneOffset() * 60000;
142-
date = new Date(utc + 5.5 * 3600000);
143-
}
144-
let hours = date.getHours();
145-
const mins = date.getMinutes().toString().padStart(2,'0');
146-
const secs = date.getSeconds().toString().padStart(2,'0');
147-
const ampm = hours >= 12 ? 'PM' : 'AM';
148-
hours = hours % 12 || 12;
149-
document.getElementById('live-time').textContent =
150-
`Time (${currentZone}): ${hours}:${mins}:${secs} ${ampm}`;
151-
}
152-
153-
// On window load: initialize Dark Mode, Sidebar listener, Live Time & Service Worker
154-
window.onload = () => {
155-
// Dark mode init
156-
if (localStorage.getItem('dark-mode') === 'true') {
157-
document.body.classList.add('dark-mode');
158-
}
159-
160-
// Sidebar outside-click hide
161-
document.addEventListener('click', hideSidebarIfClickedOutside);
162-
163-
// Start live time updates
164-
updateLiveTime();
165-
setInterval(updateLiveTime, 1000);
166-
167-
// Service Worker registration
168-
if ('serviceWorker' in navigator) {
169-
navigator.serviceWorker
170-
.register('/JavaEvolution-Learning-Growing-Mastering/assets/sw.js')
171-
.then(() => console.log('✅ Service Worker Registered'))
172-
.catch(err => console.error('SW registration failed', err));
173-
}
174-
};
175-
176115
</script>
177116
</head>
178-
<body>
179-
180-
<!--Dark Mode and Time-->
181117

118+
<body>
119+
<!-- Dark Mode & Timezone Controls -->
182120
<div id="theme-time-container">
183-
<button id="dark-mode-btn" class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
184-
<div id="time-zone-wrapper" style="display:flex; align-items:center; gap:0.5rem;">
185-
<button id="tz-toggle-btn" class="time-toggle" onclick="toggleTimezone()">IST</button>
186-
<div id="live-time">Time: Loading...</div>
121+
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
122+
<div id="time-zone-wrapper">
123+
<button id="tz-toggle-btn" onclick="toggleTimezone()">IST</button>
124+
<span id="live-time">Time: Loading...</span>
187125
</div>
188126
</div>
189127

190-
<div class="wrapper">
128+
<!-- Collapsible Sidebar -->
129+
<div id="sidebar" class="sidebar">
130+
<a href="{{ site.baseurl }}/" class="sidebar-link active">
131+
<i class="fas fa-home"></i> Home
132+
</a>
133+
134+
<a href="{{ site.baseurl }}/content" class="sidebar-link">
135+
<i class="fas fa-book"></i> All Contents
136+
</a>
137+
138+
<a
139+
href="https://github.com/Someshdiwan/JavaEvolution-Learning-Growing-Mastering"
140+
target="_blank"
141+
class="sidebar-link"
142+
>
143+
<i class="fab fa-github"></i> GitHub Repo
144+
</a>
145+
</div>
191146

192-
<!-- Sidebar -->
193-
<div id="sidebar" class="sidebar">
194-
{% include nav.html %}
195-
</div>
147+
<!-- Toggle Button for Mobile -->
148+
<button class="toggle-btn" onclick="toggleSidebar()">
149+
<i class="fas fa-bars"></i>
150+
</button>
196151

197-
<!-- Main Content -->
152+
<!-- Main Content -->
153+
<div class="wrapper">
198154
<div class="content">
199-
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
200155
<div class="fade-in">
201156
{{ content }}
202157
</div>

0 commit comments

Comments
 (0)