Skip to content

Commit 9d44aae

Browse files
SomeshdiwanSomeshdiwan
committed
Updated UI 1.5 Added Done Final
Signed-off-by: Someshdiwan <[email protected]>
1 parent d02a865 commit 9d44aae

File tree

2 files changed

+72
-38
lines changed

2 files changed

+72
-38
lines changed

‎site/_layouts/default.html‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
<link rel="stylesheet" href="{{ '/assets/style.css' | relative_url }}">
1818

1919
<script>
20+
// Track current zone: 'IST' or 'GMT'
21+
let currentZone = 'IST';
22+
2023
// Sidebar Toggle
2124
function toggleSidebar() {
2225
document.getElementById('sidebar').classList.toggle('hidden');
@@ -39,16 +42,32 @@
3942
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
4043
}
4144

42-
// Live Time Update
45+
// Toggle between IST and GMT
46+
function toggleTimezone() {
47+
currentZone = (currentZone === 'IST') ? 'GMT' : 'IST';
48+
document.getElementById('tz-toggle-btn').textContent = currentZone;
49+
updateLiveTime(); // immediately refresh display
50+
}
51+
52+
// Live Time Update with timezone support
4353
function updateLiveTime() {
4454
const now = new Date();
45-
let hours = now.getHours();
46-
const mins = now.getMinutes().toString().padStart(2, '0');
47-
const secs = now.getSeconds().toString().padStart(2, '0');
55+
let date;
56+
if (currentZone === 'GMT') {
57+
// UTC time
58+
date = new Date(now.getTime() + now.getTimezoneOffset() * 60000);
59+
} else {
60+
// IST = UTC + 5.5h
61+
const utc = now.getTime() + now.getTimezoneOffset() * 60000;
62+
date = new Date(utc + 5.5 * 3600000);
63+
}
64+
let hours = date.getHours();
65+
const mins = date.getMinutes().toString().padStart(2,'0');
66+
const secs = date.getSeconds().toString().padStart(2,'0');
4867
const ampm = hours >= 12 ? 'PM' : 'AM';
4968
hours = hours % 12 || 12;
5069
document.getElementById('live-time').textContent =
51-
`Time: ${hours}:${mins}:${secs} ${ampm}`;
70+
`Time (${currentZone}): ${hours}:${mins}:${secs} ${ampm}`;
5271
}
5372

5473
// On window load: initialize Dark Mode, Sidebar listener, Live Time & Service Worker
@@ -76,13 +95,16 @@
7695
</script>
7796
</head>
7897
<body>
79-
<!-- Dark Mode & Live Time Container -->
98+
99+
<!-- Dark‑Mode + Time Zone Toggle Container -->
80100
<div id="theme-time-container">
81-
<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
101+
<button id="dark-mode-btn" class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
102+
<button id="tz-toggle-btn" class="time-toggle" onclick="toggleTimezone()">IST</button>
82103
<div id="live-time">Time: Loading...</div>
83-
<div class="wrapper">
84104
</div>
85105

106+
<div class="wrapper">
107+
86108
<!-- Sidebar -->
87109
<div id="sidebar" class="sidebar">
88110
{% include nav.html %}
@@ -98,5 +120,3 @@
98120
</div>
99121
</body>
100122
</html>
101-
102-

‎site/assets/style.css‎

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
/*=============================================
2-
1. Color Variables & Dark‑Mode Overrides
3-
=============================================*/
1+
/* 1. Color Variables & Dark‑Mode Overrides*/
42
:root {
53
--bg-color: #ffffff;
64
--text-color: #000000;
@@ -31,9 +29,7 @@ body {
3129
transition: background-color 0.3s ease, color 0.3s ease;
3230
}
3331

34-
/*=============================================
35-
2. Sidebar Styles
36-
=============================================*/
32+
/* 2. Sidebar Styles*/
3733
.sidebar {
3834
background-color: var(--sidebar-bg);
3935
width: 260px;
@@ -64,9 +60,7 @@ body {
6460
background-color: var(--hover-bg);
6561
}
6662

67-
/*=============================================
68-
3. Main Content Area
69-
=============================================*/
63+
/* 3. Main Content Area*/
7064
.content {
7165
margin-left: 260px;
7266
padding: 1rem;
@@ -77,9 +71,9 @@ body {
7771
margin-left: 0;
7872
}
7973

80-
/*=============================================
74+
/*
8175
4. Toggle Buttons
82-
=============================================*/
76+
*/
8377
.toggle-btn {
8478
position: fixed;
8579
top: 1rem;
@@ -116,9 +110,8 @@ body {
116110
background-color: var(--hover-bg);
117111
}
118112

119-
/*=============================================
120-
5. Fade‑In Animation
121-
=============================================*/
113+
/* 5. Fade‑In Animation*/
114+
122115
.fade-in {
123116
animation: fadeIn 0.4s ease-in;
124117
}
@@ -128,9 +121,8 @@ body {
128121
to { opacity: 1; transform: translateY(0); }
129122
}
130123

131-
/*=============================================
132-
6. Responsive Sidebar (Mobile)
133-
=============================================*/
124+
125+
/* 6. Responsive Sidebar (Mobile)*/
134126
@media (max-width: 768px) {
135127
.sidebar {
136128
transform: translateX(-100%);
@@ -145,9 +137,7 @@ body {
145137
}
146138
}
147139

148-
/*=============================================
149-
7. Image Layout Helpers
150-
=============================================*/
140+
/*7. Image Layout Helpers*/
151141
.image-row {
152142
display: flex;
153143
flex-wrap: wrap;
@@ -193,22 +183,46 @@ body {
193183
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
194184
}
195185

196-
/* Dark‑Mode Toggle & Live‑Time Container */
197186
#theme-time-container {
198-
max-width: 320px;
199-
margin: 1rem auto;
200-
padding: 0.5rem 1rem;
187+
position: fixed;
188+
top: 1rem;
189+
left: 1rem;
190+
display: flex;
191+
align-items: center;
192+
gap: 0.5rem;
201193
background-color: var(--sidebar-bg);
202194
color: var(--text-color);
195+
padding: 0.5rem 1rem;
203196
border-radius: 8px;
204-
display: flex;
205-
justify-content: space-between;
206-
align-items: center;
207197
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
198+
font-size: 0.9rem;
199+
z-index: 1002;
208200
transition: background-color 0.3s, color 0.3s;
209-
font-size: 0.95rem;
210201
}
211202

203+
#theme-time-container .dark-toggle,
204+
#theme-time-container .time-toggle {
205+
background: var(--button-bg);
206+
color: var(--button-text);
207+
border: none;
208+
padding: 0.3rem 0.6rem;
209+
border-radius: 5px;
210+
cursor: pointer;
211+
font-size: 1rem;
212+
transition: background-color 0.2s;
213+
}
214+
215+
#theme-time-container .dark-toggle:hover,
216+
#theme-time-container .time-toggle:hover {
217+
background-color: var(--hover-bg);
218+
}
219+
220+
#theme-time-container #live-time {
221+
font-weight: 500;
222+
white-space: nowrap;
223+
}
224+
225+
/* Dark‑mode override */
212226
body.dark-mode #theme-time-container {
213227
background-color: var(--sidebar-bg);
214228
color: var(--text-color);

0 commit comments

Comments
 (0)