<div class=”tz-tool-container”>
<style>
.tz-tool-container {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
color: #333;
}
.tz-tool-container h2 {
margin-top: 0;
color: #1a1a1a;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.tz-selectors {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 25px;
}
@media(max-width: 600px) {
.tz-selectors { grid-template-columns: 1fr; }
}
.tz-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: 14px;
color: #555;
}
.tz-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
background: #f9f9f9;
}
.tz-results-card {
background: #f4f6f8;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.tz-live-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
text-align: center;
}
.tz-clock-box {
flex: 1;
background: #fff;
padding: 15px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}
.tz-clock-box h3 {
margin: 0 0 5px 0;
font-size: 14px;
color: #777;
}
.tz-clock-box .time {
font-size: 22px;
font-weight: bold;
color: #0066cc;
}
.tz-clock-box .date {
font-size: 12px;
color: #666;
margin-top: 4px;
}
.tz-legend {
display: flex;
gap: 15px;
justify-content: center;
font-size: 12px;
margin-top: 15px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 5px;
}
.legend-color {
width: 14px;
height: 14px;
border-radius: 3px;
}
.grid-work { background: #d4edda; border: 1px solid #c3e6cb; }
.grid-off { background: #f8d7da; border: 1px solid #f5c6cb; }
.tz-timeline-container {
margin-top: 20px;
}
.tz-timeline-container h4 {
margin-bottom: 10px;
font-size: 15px;
}
.tz-hours-grid {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 2px;
background: #ddd;
padding: 2px;
border-radius: 6px;
overflow-x: auto;
}
.hour-block {
background: #fff;
text-align: center;
padding: 6px 0;
font-size: 10px;
cursor: pointer;
position: relative;
}
.hour-block:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #222;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
z-index: 10;
font-size: 11px;
}
</style>
<h2>Global Time & Meeting Overlap Planner</h2>
<div class=”tz-selectors”>
<div class=”tz-group”>
<label for=”city1″>Your Location / City:</label>
<select id=”city1″>
<option value=”America/New_York”>New York (EST/EDT)</option>
<option value=”America/Los_Angeles”>Los Angeles (PST/PDT)</option>
<option value=”Europe/London” selected>London (GMT/BST)</option>
<option value=”Europe/Paris”>Paris / Central Europe</option>
<option value=”Asia/Dubai”>Dubai (GST)</option>
<option value=”Asia/Karachi”>Karachi / Islamabad</option>
<option value=”Asia/Kolkata”>New Delhi / Mumbai</option>
<option value=”Asia/Singapore”>Singapore / Hong Kong</option>
<option value=”Asia/Tokyo”>Tokyo (JST)</option>
<option value=”Australia/Sydney”>Sydney (AEST/AEDT)</option>
</select>
</div>
<div class=”tz-group”>
<label for=”city2″>Target Country / City:</label>
<select id=”city2″>
<option value=”America/New_York”>New York (EST/EDT)</option>
<option value=”America/Los_Angeles”>Los Angeles (PST/PDT)</option>
<option value=”Europe/London”>London (GMT/BST)</option>
<option value=”Europe/Paris”>Paris / Central Europe</option>
<option value=”Asia/Dubai”>Dubai (GST)</option>
<option value=”Asia/Karachi” selected>Karachi / Islamabad</option>
<option value=”Asia/Kolkata”>New Delhi / Mumbai</option>
<option value=”Asia/Singapore”>Singapore / Hong Kong</option>
<option value=”Asia/Tokyo”>Tokyo (JST)</option>
<option value=”Australia/Sydney”>Sydney (AEST/AEDT)</option>
</select>
</div>
</div>
<div class=”tz-results-card”>
<div class=”tz-live-row”>
<div class=”tz-clock-box”>
<h3 id=”label-city1″>Local Time</h3>
<div class=”time” id=”time1″>–:–:–</div>
<div class=”date” id=”date1″>—</div>
</div>
<div style=”font-size: 20px; font-weight: bold; color: #888;”>âš¡</div>
<div class=”tz-clock-box”>
<h3 id=”label-city2″>Target Time</h3>
<div class=”time” id=”time2″>–:–:–</div>
<div class=”date” id=”date2″>—</div>
</div>
</div>
</div>
<div class=”tz-timeline-container”>
<h4>24-Hour Overlap Visualizer (Target City’s Local Hours)</h4>
<div style=”font-size: 12px; color: #666; margin-bottom: 6px;”>Green = Working Hours (9 AM – 6 PM), Red = Off Hours. Hover over blocks for details.</div>
<div class=”tz-hours-grid” id=”hoursGrid”>
<!– Populated via JavaScript –>
</div>
<div class=”tz-legend”>
<div class=”legend-item”><div class=”legend-color grid-work”></div> Working Hours (9am-6pm)</div>
<div class=”legend-item”><div class=”legend-color grid-off”></div> Off Hours / Night</div>
</div>
</div>
</div>
<script>
(function() {
const sel1 = document.getElementById(‘city1’);
const sel2 = document.getElementById(‘city2’);
const time1El = document.getElementById(‘time1’);
const time2El = document.getElementById(‘time2’);
const date1El = document.getElementById(‘date1’);
const date2El = document.getElementById(‘date2’);
const label1El = document.getElementById(‘label-city1’);
const label2El = document.getElementById(‘label-city2’);
const gridEl = document.getElementById(‘hoursGrid’);
function updateClocks() {
const now = new Date();
const tz1 = sel1.value;
const tz2 = sel2.value;
label1El.innerText = sel1.options[sel1.selectedIndex].text.split(‘(‘)[0];
label2El.innerText = sel2.options[sel2.selectedIndex].text.split(‘(‘)[0];
// Format times
time1El.innerText = now.toLocaleTimeString(‘en-US’, { timeZone: tz1, hour12: true, hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’ });
date1El.innerText = now.toLocaleDateString(‘en-US’, { timeZone: tz1, weekday: ‘short’, month: ‘short’, day: ‘numeric’ });
time2El.innerText = now.toLocaleTimeString(‘en-US’, { timeZone: tz2, hour12: true, hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’ });
date2El.innerText = now.toLocaleDateString(‘en-US’, { timeZone: tz2, weekday: ‘short’, month: ‘short’, day: ‘numeric’ });
buildGrid(tz1, tz2, now);
}
function buildGrid(tz1, tz2, baseDate) {
gridEl.innerHTML = ”;
// Loop through 24 hours of the day for target timezone
for (let i = 0; i < 24; i++) {
const block = document.createElement(‘div’);
block.className = ‘hour-block’;
// Format hour label
let hourFormatted = i === 0 ? ’12 AM’ : i < 12 ? i + ‘ AM’ : i === 12 ? ’12 PM’ : (i – 12) + ‘ PM’;
block.innerText = i;
// Check if target hour is standard working hours (9 AM to 6 PM)
if (i >= 9 && i < 18) {
block.classList.add(‘grid-work’);
} else {
block.classList.add(‘grid-off’);
}
block.setAttribute(‘data-tooltip’, `${hourFormatted} in Target City`);
gridEl.appendChild(block);
}
}
sel1.addEventListener(‘change’, updateClocks);
sel2.addEventListener(‘change’, updateClocks);
// Update every second
updateClocks();
setInterval(updateClocks, 1000);
})();
</script>