Skip to content

Commit 6ca2313

Browse files
SomeshdiwanSomeshdiwan
committed
Final Date time added.
Time: 5:00 AM Date: 7-04-2025 Signed-off-by: Someshdiwan <[email protected]>
1 parent 0868890 commit 6ca2313

File tree

2 files changed

+77
-113
lines changed

2 files changed

+77
-113
lines changed

‎site/_layouts/default.html‎

Lines changed: 59 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,86 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>{{ page.title }}</title>
7-
<link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
6+
<title>Dynamic Sidebar Page</title>
7+
<link rel="stylesheet" href="/assets/style.css" />
88
<script>
99
// Sidebar Toggle Function
1010
function toggleSidebar() {
1111
const sidebar = document.getElementById("sidebar");
1212
sidebar.classList.toggle("hidden");
1313
}
1414

15-
// Dark Mode Toggle
15+
// Dark Mode Toggle Function
1616
const toggleDarkMode = () => {
17-
document.body.classList.toggle('dark-mode');
18-
localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
17+
document.body.classList.toggle("dark-mode");
18+
localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode"));
1919
};
2020

21+
// Handle Sidebar Visibility Based on Screen Size
22+
function handleSidebarVisibility() {
23+
const sidebar = document.getElementById("sidebar");
24+
if (window.matchMedia("(max-width: 768px)").matches) {
25+
sidebar.classList.add("hidden");
26+
} else {
27+
sidebar.classList.remove("hidden");
28+
}
29+
}
30+
31+
// Update Time Display
32+
function updateTime() {
33+
const now = new Date();
34+
let hours = now.getHours();
35+
const minutes = now.getMinutes().toString().padStart(2, "0");
36+
const seconds = now.getSeconds().toString().padStart(2, "0");
37+
const ampm = hours >= 12 ? "PM" : "AM";
38+
hours = hours % 12 || 12; // Convert to 12-hour format
39+
const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
40+
41+
const offset = now.getTimezoneOffset();
42+
const offsetHours = Math.floor(Math.abs(offset) / 60);
43+
const offsetMinutes = Math.abs(offset) % 60;
44+
const offsetSign = offset > 0 ? "-" : "+";
45+
const offsetString = `GMT${offsetSign}${offsetHours.toString().padStart(2, "0")}:${offsetMinutes.toString().padStart(2, "0")}`;
46+
47+
const fullTimeString = `⏰ Time: ${timeString} ${offsetString}`;
48+
document.getElementById("time-display").textContent = fullTimeString;
49+
}
50+
51+
// Initialize on Load
2152
window.onload = () => {
22-
if (localStorage.getItem('dark-mode') === 'true') {
23-
document.body.classList.add('dark-mode');
53+
handleSidebarVisibility();
54+
if (localStorage.getItem("dark-mode") === "true") {
55+
document.body.classList.add("dark-mode");
2456
}
57+
updateTime();
58+
setInterval(updateTime, 1000);
59+
setTimeout(() => {
60+
const sidebar = document.getElementById("sidebar");
61+
if (!sidebar.classList.contains("hidden")) {
62+
sidebar.classList.add("hidden");
63+
}
64+
}, 10000); // 10 seconds
2565
};
66+
67+
// Update on Resize
68+
window.addEventListener("resize", handleSidebarVisibility);
2669
</script>
2770
</head>
2871
<body>
29-
<!-- Dark Mode Toggle Button -->
30-
<button onclick="toggleDarkMode()" class="dark-toggle">🌓</button>
31-
3272
<div class="wrapper">
33-
<!-- Sidebar Navigation -->
3473
<div id="sidebar" class="sidebar">
35-
{% include nav.html %}
74+
<a href="#">Home</a>
75+
<a href="#">About</a>
76+
<a href="#">Services</a>
77+
<a href="#">Contact</a>
3678
</div>
37-
38-
<!-- Content Area -->
3979
<div class="content">
40-
<!-- Sidebar Toggle Button -->
80+
<div id="time-display"></div>
4181
<button class="toggle-btn" onclick="toggleSidebar()">☰</button>
42-
<div class="fade-in">
43-
{{ content }}
44-
</div>
82+
<button class="toggle-btn" id="dark-mode-toggle" onclick="toggleDarkMode()">Toggle Dark Mode</button>
83+
<h1>Welcome</h1>
84+
<p>This is a sample page with a dynamic sidebar and time display.</p>
4585
</div>
4686
</div>
4787
</body>
48-
</html>
88+
</html>

‎site/assets/style.css‎

Lines changed: 18 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,23 @@
1-
/*
2-
body {
3-
margin: 0;
4-
font-family: 'Segoe UI', sans-serif;
5-
}
6-
7-
.wrapper {
8-
display: flex;
9-
height: 100vh;
10-
}
11-
12-
.sidebar {
13-
width: 220px;
14-
background-color: #1e1e2f;
15-
color: white;
16-
padding: 20px;
17-
transition: transform 0.3s ease;
18-
overflow-y: auto;
19-
}
20-
21-
.sidebar.hidden {
22-
transform: translateX(-220px);
23-
}
24-
25-
.content {
26-
flex-grow: 1;
27-
padding: 20px;
28-
background-color: #f8f9fa;
29-
overflow-y: auto;
30-
}
31-
32-
.img {
33-
max-width: 90%;
34-
height: auto;
35-
display: block;
36-
margin: 1rem auto;
37-
border-radius: 8px;
38-
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
39-
}
40-
41-
.responsive-img {
42-
max-width: 70%;
43-
display: block;
44-
margin: 1rem auto;
45-
height: auto;
46-
}
47-
48-
.toggle-btn {
49-
position: fixed;
50-
top: 10px;
51-
left: 10px;
52-
background-color: #1e1e2f;
53-
color: white;
54-
border: none;
55-
padding: 10px 15px;
56-
cursor: pointer;
57-
z-index: 1000;
58-
border-radius: 5px;
59-
}
60-
61-
62-
*/
631
:root {
642
--bg-color: #ffffff;
653
--text-color: #000000;
664
--sidebar-bg: #f8f9fa;
675
--link-color: #0366d6;
6+
--button-bg: #eee;
7+
--button-text: #000;
8+
--hover-bg: rgba(0, 0, 0, 0.05);
9+
--border-color: #ccc;
6810
}
6911

7012
.dark-mode {
7113
--bg-color: #121212;
7214
--text-color: #e0e0e0;
7315
--sidebar-bg: #1f1f1f;
7416
--link-color: #90caf9;
17+
--button-bg: #333;
18+
--button-text: #fff;
19+
--hover-bg: rgba(255, 255, 255, 0.1);
20+
--border-color: #444;
7521
}
7622

7723
body {
@@ -81,15 +27,14 @@ body {
8127
font-family: sans-serif;
8228
}
8329

84-
/* Sidebar Styles */
8530
.sidebar {
8631
background-color: var(--sidebar-bg);
8732
width: 260px;
8833
padding: 1rem;
8934
position: fixed;
9035
height: 100vh;
9136
overflow-y: auto;
92-
border-right: 1px solid #ccc;
37+
border-right: 1px solid var(--border-color);
9338
transition: transform 0.3s ease;
9439
z-index: 999;
9540
}
@@ -98,7 +43,6 @@ body {
9843
transform: translateX(-100%);
9944
}
10045

101-
/* Sidebar Links */
10246
.sidebar a {
10347
display: block;
10448
padding: 0.5rem;
@@ -109,10 +53,9 @@ body {
10953
}
11054

11155
.sidebar a:hover {
112-
background-color: rgba(0, 0, 0, 0.05);
56+
background-color: var(--hover-bg);
11357
}
11458

115-
/* Content Area */
11659
.content {
11760
margin-left: 260px;
11861
padding: 1rem;
@@ -123,55 +66,36 @@ body {
12366
margin-left: 0;
12467
}
12568

126-
/* Toggle Button */
12769
.toggle-btn {
12870
position: fixed;
12971
top: 1rem;
13072
left: 1rem;
13173
z-index: 1001;
132-
background: #eee;
74+
background-color: var(--button-bg);
75+
color: var(--button-text);
13376
border: none;
13477
padding: 0.5rem 1rem;
13578
border-radius: 5px;
13679
cursor: pointer;
13780
}
13881

139-
/* Dark Mode Toggle Button */
140-
.dark-toggle {
82+
#dark-mode-toggle {
14183
position: fixed;
14284
top: 1rem;
14385
right: 1rem;
144-
z-index: 1001;
145-
background: #eee;
146-
border: none;
147-
padding: 0.5rem 1rem;
148-
border-radius: 5px;
149-
cursor: pointer;
150-
}
151-
152-
/* Animation */
153-
.fade-in {
154-
animation: fadeIn 0.4s ease-in;
15586
}
15687

157-
@keyframes fadeIn {
158-
from { opacity: 0; transform: translateY(10px); }
159-
to { opacity: 1; transform: translateY(0); }
88+
#time-display {
89+
font-size: 1.2em;
90+
margin-bottom: 10px;
91+
color: var(--text-color);
16092
}
16193

162-
/* Responsive Fix for Small Screens */
16394
@media (max-width: 768px) {
16495
.sidebar {
16596
transform: translateX(-100%);
166-
position: fixed;
167-
left: 0;
168-
}
169-
170-
.sidebar:not(.hidden) {
171-
transform: translateX(0);
17297
}
173-
17498
.content {
17599
margin-left: 0;
176100
}
177-
}
101+
}

0 commit comments

Comments
 (0)