Embedded Files
The html for the clocks, if you run it through an AI you can have just a nice neat world clock on your page.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.6em;
text-align: center;
font-weight: 25;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.4em;
text-align: center;
font-weight: 25;
}
.clock {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px; /* Add some space between clocks */
}
.city {
font-size: 20px;
cursor: help; /* Change cursor to indicate hover interaction */
border-bottom: 1px dotted black; /* Add a dotted underline */
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
font-family: Arial, sans-serif; /* Arial font for time */
font-size: 1em; /* Slightly smaller font for time */
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h3>⏳</h3>
<div id="clocks">
</div>
<script>
const cityTimes = {
"Sydney": "Australia/Sydney",
"Melbourne": "Australia/Melbourne",
"Canberra": "Australia/Canberra",
"Perth": "Australia/Perth",
"Adelaide": "Australia/Adelaide",
"Hobart": "Australia/Hobart",
"Darwin": "Australia/Darwin",
"Brisbane": "Australia/Brisbane",
"Christmas Island": "Indian/Christmas",
"Port Moresby (PNG)": "Pacific/Port_Moresby",
"Nouméa (New Caledonia)": "Pacific/Noumea",
"Suva (Fiji)": "Pacific/Fiji",
"Nauru": "Pacific/Nauru",
"Rarotonga (Cook Islands)": "Pacific/Rarotonga",
"Apia (Samoa)": "Pacific/Apia",
"Nuku'alofa (Tonga)": "Pacific/Tongatapu"
};
const clocksDiv = document.getElementById("clocks");
for (const city in cityTimes) {
const clockDiv = document.createElement("div");
clockDiv.className = "clock tooltip";
const citySpan = document.createElement("span");
citySpan.className = "city";
citySpan.textContent = city;
const tooltipSpan = document.createElement("span");
tooltipSpan.className = "tooltiptext";
tooltipSpan.id = city.replace(/\s+/g, '').toLowerCase(); // Convert city name to lowercase and remove spaces for ID
clockDiv.appendChild(citySpan);
clockDiv.appendChild(tooltipSpan);
clocksDiv.appendChild(clockDiv);
}
function updateClocks() {
const now = new Date();
for (const city in cityTimes) {
const timeElement = document.getElementById(city.replace(/\s+/g, '').toLowerCase()); // Ensure correct ID for elements
if (timeElement) {
const timeString = now.toLocaleTimeString('en-AU', { timeZone: cityTimes[city] });
timeElement.textContent = timeString;
}
}
}
setInterval(updateClocks, 1000); // Update every second
updateClocks(); // Initial call
</script>
</body>
</html>
Page updated
Google Sites
Report abuse