|
|
|
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Forex Market Hours (Centered + Vietnam)</title> |
|
|
<style> |
|
|
body { |
|
|
background-color: #0f0f0f; |
|
|
color: white; |
|
|
font-family: sans-serif; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
padding: 20px; |
|
|
} |
|
|
h2 { |
|
|
color: #00ccff; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
.controls { |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
select { |
|
|
padding: 5px 10px; |
|
|
font-size: 14px; |
|
|
border-radius: 5px; |
|
|
} |
|
|
table { |
|
|
width: 100%; |
|
|
max-width: 415px; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
th, td { |
|
|
border: 1px solid #333; |
|
|
padding: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
th { |
|
|
background-color: #222; |
|
|
} |
|
|
tr:nth-child(even) { |
|
|
background-color: #1a1a1a; |
|
|
} |
|
|
#localtime { |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="controls"> |
|
|
<label for="tz">Select Timezone:</label> |
|
|
<select id="tz"> |
|
|
<option value="America/Los_Angeles">Los Angeles</option> |
|
|
<option value="America/New_York">New York</option> |
|
|
<option value="Europe/London">London</option> |
|
|
<option value="Asia/Tokyo">Tokyo</option> |
|
|
<option value="Australia/Sydney">Sydney</option> |
|
|
<option value="Asia/Ho_Chi_Minh">Vietnam</option> |
|
|
</select> |
|
|
</div> |
|
|
<p id="localtime"></p> |
|
|
<table> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Center</th> |
|
|
<th>Status</th> |
|
|
<th>Time Left</th> |
|
|
<th>Opens In</th> |
|
|
<th>Open</th> |
|
|
<th>Close</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="session-table"></tbody> |
|
|
</table> |
|
|
|
|
|
<script> |
|
|
const sessions = [ |
|
|
{ center: "Sydney", tz: "Australia/Sydney", open: "08:00", close: "16:00" }, |
|
|
{ center: "Tokyo", tz: "Asia/Tokyo", open: "09:00", close: "17:00" }, |
|
|
{ center: "London", tz: "Europe/London", open: "08:00", close: "16:00" }, |
|
|
{ center: "New York", tz: "America/New_York", open: "09:30", close: "16:00" } |
|
|
]; |
|
|
|
|
|
function updateSessions() { |
|
|
const userTZ = document.getElementById("tz").value; |
|
|
const now = new Date(); |
|
|
document.getElementById("localtime").innerHTML = "Time in <b>" + userTZ + "</b>: <b>" + |
|
|
now.toLocaleTimeString("en-US", { timeZone: userTZ }) + "</b>"; |
|
|
|
|
|
const tbody = document.getElementById("session-table"); |
|
|
tbody.innerHTML = ""; |
|
|
|
|
|
sessions.forEach(s => { |
|
|
const nowInTZ = new Date(new Date().toLocaleString("en-US", { timeZone: s.tz })); |
|
|
const parseTime = (timeStr) => { |
|
|
let [time, modifier] = timeStr.split(' '); |
|
|
let [hours, minutes] = time.split(':').map(Number); |
|
|
if (modifier === 'PM' && hours < 12) { |
|
|
hours += 12; |
|
|
} |
|
|
if (modifier === 'AM' && hours === 12) { |
|
|
hours = 0; |
|
|
} |
|
|
return { hours, minutes }; |
|
|
}; |
|
|
|
|
|
const openTime = parseTime(s.open); |
|
|
const closeTime = parseTime(s.close); |
|
|
|
|
|
const open = new Date(nowInTZ); |
|
|
open.setHours(openTime.hours, openTime.minutes, 0, 0); |
|
|
|
|
|
const close = new Date(nowInTZ); |
|
|
close.setHours(closeTime.hours, closeTime.minutes, 0, 0); |
|
|
|
|
|
const today = nowInTZ.getDay(); |
|
|
const isWeekend = today === 0 || today === 6; |
|
|
|
|
|
const isOpen = !isWeekend && nowInTZ >= open && nowInTZ < close; |
|
|
const timeLeft = (isOpen && !isWeekend) ? new Date(close - nowInTZ).toISOString().substr(11, 8) : "-"; |
|
|
|
|
|
let opensIn = "-"; |
|
|
if (!isOpen && !isWeekend) { |
|
|
if (nowInTZ > close) open.setDate(open.getDate() + 1); |
|
|
opensIn = new Date(open - nowInTZ).toISOString().substr(11, 8); |
|
|
} |
|
|
|
|
|
const statusColor = isOpen ? "#00cc66" : "#999"; |
|
|
|
|
|
tbody.innerHTML += ` |
|
|
<tr> |
|
|
<td>${s.center}</td> |
|
|
<td style="color:${statusColor}; font-weight:bold;">${isOpen ? "Open" : "Closed"}</td> |
|
|
<td>${timeLeft}</td> |
|
|
<td>${opensIn}</td> |
|
|
<td>${s.open}</td> |
|
|
<td>${s.close}</td> |
|
|
</tr> |
|
|
`; |
|
|
}); |
|
|
} |
|
|
|
|
|
setInterval(updateSessions, 1000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
