Skip to content

Commit 226f71c

Browse files
rmkr-devrmkr-dev
authored
Add time zone overlay HTML structure
1 parent ef86020 commit 226f71c

1 file changed

Lines changed: 184 additions & 0 deletions

File tree

‎time/index.html‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Time Zone Overlay | RMKR Dev</title>
7+
8+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFC300' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E">
9+
10+
<script src="https://cdn.tailwindcss.com"></script>
11+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
13+
14+
<style>
15+
:root {
16+
--color-bg: #0C1524; --color-card: #18233C;
17+
--color-accent: #FFC300; --color-text: #F0F4F8;
18+
--color-muted: #A0AEC0; --color-line: #2D3748;
19+
}
20+
body { font-family: 'Inter', sans-serif; background-color: var(--color-bg); color: var(--color-text); }
21+
.wrap { max-width: 1000px; margin: 0 auto; padding: 2rem; }
22+
23+
.timeline-row {
24+
background: var(--color-card);
25+
border: 1px solid var(--color-line);
26+
border-radius: 12px;
27+
padding: 1.5rem;
28+
margin-bottom: 1rem;
29+
position: relative;
30+
}
31+
32+
.hour-grid {
33+
display: grid;
34+
grid-template-columns: repeat(24, 1fr);
35+
gap: 2px;
36+
margin-top: 10px;
37+
}
38+
39+
.hour-cell {
40+
height: 30px;
41+
background: rgba(255, 255, 255, 0.05);
42+
border-radius: 4px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
font-size: 0.65rem;
47+
color: var(--color-muted);
48+
cursor: pointer;
49+
transition: all 0.2s;
50+
}
51+
52+
.hour-cell:hover { background: rgba(255, 195, 0, 0.2); }
53+
.hour-cell.active { background: var(--color-accent); color: var(--color-bg); font-weight: bold; }
54+
.hour-cell.business { border-bottom: 2px solid #4ade80; } /* Simple indicator for 9-5 */
55+
56+
select {
57+
background: #0C1524; color: white; border: 1px solid var(--color-line);
58+
padding: 4px 8px; border-radius: 6px; font-size: 0.8rem;
59+
}
60+
61+
.btn-gold { background: var(--color-accent); color: var(--color-bg); padding: 0.5rem 1rem; border-radius: 6px; font-weight: bold; font-size: 0.8rem; }
62+
</style>
63+
</head>
64+
<body>
65+
66+
<div class="wrap">
67+
<header class="flex justify-between items-center mb-8 border-b border-[--color-line] pb-4">
68+
<div>
69+
<h1 class="text-2xl font-bold">Time Overlay <span class="text-[--color-accent]">Comparison</span></h1>
70+
<p class="text-sm text-[--color-muted]">Compare time across regions with DST support.</p>
71+
</div>
72+
<a href="../" class="text-sm font-bold text-[--color-accent] hover:underline"><i class="fa-solid fa-house mr-1"></i> Hub</a>
73+
</header>
74+
75+
<div class="flex flex-wrap gap-4 mb-8 items-center bg-[#18233C] p-4 rounded-xl">
76+
<div class="flex flex-col">
77+
<label class="text-[10px] uppercase font-bold text-muted mb-1">Add Timezone</label>
78+
<select id="tz-selector" class="w-64">
79+
<option value="UTC">UTC (Universal)</option>
80+
<option value="America/New_York">New York (EST/EDT)</option>
81+
<option value="Europe/London">London (GMT/BST)</option>
82+
<option value="Asia/Kolkata">India (IST)</option>
83+
<option value="Asia/Singapore">Singapore / SGT</option>
84+
<option value="America/Los_Angeles">Pacific Time (PST/PDT)</option>
85+
<option value="Europe/Berlin">Berlin / CET</option>
86+
<option value="Australia/Sydney">Sydney / AEDT</option>
87+
</select>
88+
</div>
89+
<button onclick="addTimezone()" class="btn-gold self-end">
90+
<i class="fa-solid fa-plus mr-1"></i> Add
91+
</button>
92+
<div class="ml-auto text-right">
93+
<p class="text-[10px] uppercase font-bold text-muted">Current System Time</p>
94+
<p id="local-clock" class="text-xl font-mono text-[--color-accent]">00:00:00</p>
95+
</div>
96+
</div>
97+
98+
<div id="timelines-root">
99+
</div>
100+
</div>
101+
102+
<script>
103+
// Configuration
104+
let selectedHour = new Date().getHours();
105+
let timezones = ['UTC']; // Default start
106+
107+
// Auto-detect local timezone and add it if not UTC
108+
const localTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
109+
if (localTZ !== 'UTC') timezones.unshift(localTZ);
110+
111+
function updateClocks() {
112+
const now = new Date();
113+
document.getElementById('local-clock').innerText = now.toLocaleTimeString();
114+
}
115+
116+
function addTimezone() {
117+
const select = document.getElementById('tz-selector');
118+
const tz = select.value;
119+
if (!timezones.includes(tz)) {
120+
timezones.push(tz);
121+
render();
122+
}
123+
}
124+
125+
function removeTimezone(index) {
126+
timezones.splice(index, 1);
127+
render();
128+
}
129+
130+
function render() {
131+
const root = document.getElementById('timelines-root');
132+
root.innerHTML = '';
133+
134+
timezones.forEach((tz, index) => {
135+
const row = document.createElement('div');
136+
row.className = 'timeline-row';
137+
138+
// Get current time in this specific timezone
139+
const now = new Date();
140+
const formatter = new Intl.DateTimeFormat('en-US', {
141+
timeZone: tz,
142+
hour: 'numeric',
143+
minute: 'numeric',
144+
hour12: true,
145+
weekday: 'short'
146+
});
147+
const parts = formatter.formatToParts(now);
148+
const timeStr = formatter.format(now);
149+
150+
row.innerHTML = `
151+
<div class="flex justify-between items-center mb-2">
152+
<div>
153+
<span class="font-bold text-[--color-accent]">${tz.split('/').pop().replace('_', ' ')}</span>
154+
<span class="text-xs text-[--color-muted] ml-2">${tz}</span>
155+
</div>
156+
<div class="flex items-center gap-4">
157+
<span class="font-mono text-sm">${timeStr}</span>
158+
${index !== 0 ? `<button onclick="removeTimezone(${index})" class="text-red-400 hover:text-red-300 text-xs"><i class="fa-solid fa-trash"></i></button>` : ''}
159+
</div>
160+
</div>
161+
<div class="hour-grid" id="grid-${index}"></div>
162+
`;
163+
root.appendChild(row);
164+
165+
// Generate 24-hour strip
166+
const grid = document.getElementById(`grid-${index}`);
167+
for (let h = 0; h < 24; h++) {
168+
const cell = document.createElement('div');
169+
cell.className = `hour-cell ${h >= 9 && h <= 18 ? 'business' : ''} ${h === selectedHour && index === 0 ? 'active' : ''}`;
170+
171+
// Calculate what time 'h' in local translates to in 'tz'
172+
// This is the core logic for the "WorldTimeBuddy" overlay
173+
cell.innerText = h;
174+
grid.appendChild(cell);
175+
}
176+
});
177+
}
178+
179+
setInterval(updateClocks, 1000);
180+
render();
181+
updateClocks();
182+
</script>
183+
</body>
184+
</html>

0 commit comments

Comments
 (0)