Skip to content

Commit ddf8aca

Browse files
SomeshdiwanSomeshdiwan
committed
Updating UI 1.1
Signed-off-by: Someshdiwan <[email protected]>
1 parent 14e586d commit ddf8aca

File tree

2 files changed

+189
-93
lines changed

2 files changed

+189
-93
lines changed

‎site/_layouts/default.html‎

Lines changed: 42 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}" />
1212
<meta name="apple-mobile-web-app-title" content="Java" />
1313

14-
<!-- Manifest (for GitHub Pages project path) -->
14+
<!-- Manifest -->
1515
<link rel="manifest" href="/JavaEvolution-Learning-Growing-Mastering/assets/site.webmanifest">
1616
<meta name="theme-color" content="#ffffff">
1717

@@ -21,108 +21,67 @@
2121
<script>
2222
// Sidebar Toggle Function
2323
function toggleSidebar() {
24-
const sidebar = document.getElementById("sidebar");
25-
sidebar.classList.toggle("hidden");
24+
const sidebar = document.getElementById("sidebar");
25+
sidebar.classList.toggle("visible");
2626
}
2727

28-
// Hide sidebar when clicking outside
28+
// Hide Sidebar When Clicking Outside
2929
function hideSidebarIfClickedOutside(event) {
30-
const sidebar = document.getElementById("sidebar");
31-
const toggleBtn = document.querySelector(".toggle-btn");
32-
if (!sidebar.classList.contains("hidden") &&
33-
!sidebar.contains(event.target) &&
34-
!toggleBtn.contains(event.target)) {
35-
sidebar.classList.add("hidden");
36-
}
30+
const sidebar = document.getElementById("sidebar");
31+
const toggleBtn = document.querySelector(".toggle-btn");
32+
if (sidebar.classList.contains("visible") &&
33+
!sidebar.contains(event.target) &&
34+
!toggleBtn.contains(event.target)) {
35+
sidebar.classList.remove("visible");
36+
}
3737
}
3838

3939
// Dark Mode Toggle Function
4040
const toggleDarkMode = () => {
41-
document.body.classList.toggle('dark-mode');
42-
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
41+
document.body.classList.toggle("dark-mode");
42+
localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode"));
4343
};
4444

45-
// Live Time Update Function (with GMT offset)
45+
// Live Time Update Function with GMT Offset
4646
function updateLiveTime() {
47-
const now = new Date();
48-
let hours = now.getHours();
49-
const minutes = now.getMinutes().toString().padStart(2, '0');
50-
const seconds = now.getSeconds().toString().padStart(2, '0');
51-
const ampm = hours >= 12 ? 'PM' : 'AM';
52-
hours = hours % 12 || 12;
53-
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
54-
55-
// Calculate GMT offset (negate offset from getTimezoneOffset)
56-
const offset = -now.getTimezoneOffset();
57-
const offsetHours = Math.floor(Math.abs(offset) / 60);
58-
const offsetMinutes = Math.abs(offset) % 60;
59-
const offsetSign = offset >= 0 ? '+' : '-';
60-
const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, '0')}:${offsetMinutes.toString().padStart(2, '0')}`;
61-
62-
document.getElementById('current-time').textContent = timeString + ' ' + offsetString;
47+
const now = new Date();
48+
let hours = now.getHours();
49+
const minutes = now.getMinutes().toString().padStart(2, "0");
50+
const seconds = now.getSeconds().toString().padStart(2, "0");
51+
const ampm = hours >= 12 ? "PM" : "AM";
52+
hours = hours % 12 || 12;
53+
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
54+
const offset = -now.getTimezoneOffset();
55+
const offsetHours = Math.floor(Math.abs(offset) / 60);
56+
const offsetMinutes = Math.abs(offset) % 60;
57+
const offsetSign = offset >= 0 ? "+" : "-";
58+
const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, "0")}:${offsetMinutes.toString().padStart(2, "0")}`;
59+
document.getElementById("live-time").textContent = `${timeString} ${offsetString}`;
6360
}
6461

6562
// Service Worker Registration
6663
if ("serviceWorker" in navigator) {
67-
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
68-
.then(() => console.log("✅ Service Worker Registered"))
69-
.catch(err => console.error("SW registration failed", err));
64+
navigator.serviceWorker.register("/JavaEvolution-Learning-Growing-Mastering/assets/sw.js")
65+
.then(() => console.log("✅ Service Worker Registered"))
66+
.catch(err => console.error("SW registration failed", err));
7067
}
7168

72-
// Initialization on DOMContentLoaded
73-
window.addEventListener('DOMContentLoaded', () => {
74-
// Restore dark mode preference
75-
if (localStorage.getItem('dark-mode') === 'true') {
76-
document.body.classList.add('dark-mode');
77-
}
78-
// Attach listener for sidebar auto-hide
79-
document.addEventListener('click', hideSidebarIfClickedOutside);
80-
// Start live time updates
81-
updateLiveTime();
82-
setInterval(updateLiveTime, 1000);
69+
// Initialization
70+
window.addEventListener("DOMContentLoaded", () => {
71+
if (localStorage.getItem("dark-mode") === "true") {
72+
document.body.classList.add("dark-mode");
73+
}
74+
document.addEventListener("click", hideSidebarIfClickedOutside);
75+
updateLiveTime();
76+
setInterval(updateLiveTime, 1000);
8377
});
8478
</script>
85-
86-
<!-- (Optional inline styles for the time container can also reside in your style.css) -->
87-
<style>
88-
/* Time Container (holds the live time and dark mode toggle) */
89-
#time-container {
90-
position: fixed;
91-
top: 1rem;
92-
right: 1rem;
93-
z-index: 1100;
94-
background: rgba(0, 0, 0, 0.6);
95-
color: #00ffff;
96-
border: 1px solid #00ffff;
97-
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
98-
border-radius: 16px;
99-
padding: 0.6rem 1rem;
100-
display: flex;
101-
align-items: center;
102-
gap: 0.5rem;
103-
font-weight: 600;
104-
font-size: 1.05rem;
105-
}
106-
/* Dark mode overrides for the time container */
107-
body.dark-mode #time-container {
108-
background-color: #333;
109-
color: #eee;
110-
}
111-
@media (max-width: 600px) {
112-
#time-container {
113-
flex-direction: column;
114-
font-size: 0.95rem;
115-
padding: 0.8rem;
116-
}
117-
}
118-
</style>
11979
</head>
12080
<body>
121-
122-
<!-- Time Container with Dark Mode Toggle Embedded -->
81+
<!-- Time Container with Dark Mode Toggle -->
12382
<div id="time-container">
124-
<span id="current-time">--:--</span>
125-
<button class="dark-toggle" onclick="toggleDarkMode()">🌙</button>
83+
<div id="live-time">Time: Loading...</div>
84+
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
12685
</div>
12786

12887
<div class="wrapper">
@@ -133,12 +92,11 @@
13392

13493
<!-- Content Area -->
13594
<div class="content">
136-
<!-- Optional: Manual Sidebar Toggle Button -->
13795
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
13896
<div class="fade-in">
13997
{{ content }}
14098
</div>
14199
</div>
142100
</div>
143101
</body>
144-
</html>
102+
</html>

‎site/assets/style.css‎

Lines changed: 147 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,125 @@
1-
/* Base Colors and Typography */
1+
/* Reset and Basic Styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #f4f4f4;
11+
color: #333;
12+
}
13+
14+
/* Sidebar Styles */
15+
.sidebar {
16+
position: fixed;
17+
top: 0;
18+
left: 0;
19+
width: 200px; /* Reduced size for 3 links */
20+
height: 100%;
21+
background-color: #333;
22+
color: #fff;
23+
padding: 1rem;
24+
transition: transform 0.3s ease;
25+
transform: translateX(-100%); /* Hidden by default */
26+
}
27+
28+
.sidebar.visible {
29+
transform: translateX(0); /* Visible state */
30+
}
31+
32+
.sidebar a {
33+
color: #fff;
34+
text-decoration: none;
35+
display: block;
36+
margin: 1rem 0;
37+
font-size: 1rem;
38+
}
39+
40+
/* Content Styles */
41+
.content {
42+
padding: 1rem;
43+
}
44+
45+
/* Toggle Button */
46+
.toggle-btn {
47+
position: fixed;
48+
top: 1rem;
49+
left: 1rem;
50+
z-index: 1000;
51+
background-color: #333;
52+
color: #fff;
53+
border: none;
54+
padding: 0.5rem;
55+
cursor: pointer;
56+
border-radius: 3px;
57+
}
58+
59+
/* Time Container */
60+
#time-container {
61+
position: fixed;
62+
top: 1rem;
63+
right: 1rem;
64+
display: flex;
65+
align-items: center;
66+
background-color: #fff;
67+
padding: 0.5rem;
68+
border-radius: 5px;
69+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
70+
}
71+
72+
#live-time {
73+
margin-right: 0.5rem;
74+
font-size: 0.9rem;
75+
}
76+
77+
/* Dark Mode Toggle */
78+
.dark-toggle {
79+
background: none;
80+
border: none;
81+
cursor: pointer;
82+
font-size: 1.2rem;
83+
}
84+
85+
/* Dark Mode Styles */
86+
body.dark-mode {
87+
background-color: #222;
88+
color: #fff;
89+
}
90+
91+
body.dark-mode .sidebar {
92+
background-color: #444;
93+
}
94+
95+
body.dark-mode .toggle-btn {
96+
background-color: #444;
97+
}
98+
99+
body.dark-mode #time-container {
100+
background-color: #333;
101+
color: #fff;
102+
}
103+
104+
/* Responsive Design */
105+
@media (max-width: 768px) {
106+
.sidebar {
107+
width: 150px; /* Smaller on mobile */
108+
}
109+
}
110+
111+
/* Fade-in Animation for Content */
112+
.fade-in {
113+
animation: fadeIn 0.5s ease-in;
114+
}
115+
116+
@keyframes fadeIn {
117+
from { opacity: 0; }
118+
to { opacity: 1; }
119+
}
120+
121+
/* Base Colors and Typography *//*
122+
2123
:root {
3124
--bg-color: #ffffff;
4125
--text-color: #000000;
@@ -29,7 +150,9 @@ body {
29150
transition: background-color 0.3s ease, color 0.3s ease;
30151
}
31152
32-
/* Sidebar */
153+
*/
154+
/* Sidebar *//*
155+
33156
.sidebar {
34157
background-color: var(--sidebar-bg);
35158
width: 260px;
@@ -59,7 +182,9 @@ body {
59182
background-color: var(--hover-bg);
60183
}
61184
62-
/* Content */
185+
*/
186+
/* Content *//*
187+
63188
.content {
64189
margin-left: 260px;
65190
padding: 1rem;
@@ -70,7 +195,9 @@ body {
70195
margin-left: 0;
71196
}
72197
73-
/* Toggle Buttons */
198+
*/
199+
/* Toggle Buttons *//*
200+
74201
.toggle-btn,
75202
.dark-toggle {
76203
position: fixed;
@@ -92,7 +219,9 @@ body {
92219
right: 1rem;
93220
}
94221
95-
/* Animation */
222+
*/
223+
/* Animation *//*
224+
96225
.fade-in {
97226
animation: fadeIn 0.4s ease-in;
98227
}
@@ -105,7 +234,9 @@ body {
105234
#time-container {
106235
position: fixed;
107236
top: 1rem;
108-
right: 1rem; /* Stick to top-right */
237+
right: 1rem; */
238+
/* Stick to top-right *//*
239+
109240
background: rgba(0, 0, 0, 0.6);
110241
color: #00ffff;
111242
border: 1px solid #00ffff;
@@ -135,7 +266,9 @@ body.dark-mode #time-container {
135266
}
136267
137268
138-
/* Image Row */
269+
*/
270+
/* Image Row *//*
271+
139272
.image-row {
140273
display: flex;
141274
flex-wrap: wrap;
@@ -162,7 +295,9 @@ body.dark-mode #time-container {
162295
}
163296
}
164297
165-
/* Responsive Image */
298+
*/
299+
/* Responsive Image *//*
300+
166301
.responsive-img {
167302
width: 100%;
168303
max-width: 600px;
@@ -182,7 +317,9 @@ body.dark-mode #time-container {
182317
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
183318
}
184319
185-
/* Mobile Responsive Fixes */
320+
*/
321+
/* Mobile Responsive Fixes *//*
322+
186323
@media (max-width: 768px) {
187324
.sidebar {
188325
transform: translateX(-100%);
@@ -214,3 +351,4 @@ body.dark-mode #time-container {
214351
margin: 1rem;
215352
}
216353
}
354+
*/

0 commit comments

Comments
 (0)