Initial commit — Seth Calendar & Decimal Time clock site

Pages: /, /simple, /decimal, /seth, /calendar, /astro, /convert, /timegov
Features: Seth Calendar (10×36 + holidays), decimal time, moon phases,
astronomy (sun/moon), bidirectional time converter, Seth date display,
leap day split cell in calendar grid.
This commit is contained in:
2026-03-08 22:32:38 +00:00
commit a6b3f039d8
48 changed files with 7324 additions and 0 deletions
+159
View File
@@ -0,0 +1,159 @@
/**
* @file
* Header and Footer styles
*
*/
/* Header Styles */
.nist-header {
background: #000;
font-family: Helvetica, Arial, sans-serif;
padding: 10px 16px 0;
font-size: 16px;
}
.nist-header__logo-link {
display: inline-block;
height: 35px;
}
.nist-header__logo-icon {
fill: #fff;
display: inline-block;
height: 16px;
position: relative;
top: -2px;
margin-right: 2px;
}
.nist-header__logo-image {
fill: #fff;
display: inline-block;
height: 24px;
width: 90px;
}
/* Limit main content area width */
.nist-main {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding: 0 16px;
box-sizing: border-box;
}
/* Make sure body has no margin or padding when using only this header component */
body {
padding: 0;
margin: 0;
}
/* Footer styles */
.nist-footer {
background: #333333;
position: relative;
z-index: 200;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
box-sizing: border-box;
}
.nist-footer__inner {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding: 0 16px;
}
.nist-footer__inner:after {
content: "";
display: table;
clear: both;
}
.nist-footer {
background: #333333;
color: white;
padding: 10px 0px;
position: relative;
}
.nist-footer a {
color: white;
text-decoration: none;
}
.nist-footer .nist-footer__logo img {
/* width: 30%; 300px;*/
height: 100px;
display: inline-block;
margin-left: 5%; /*margin-left: 10%;*/
margin-right: 5%; /*margin-right: 10%auto;*/
margin-top: 5px;
}
.nist-footer__menu {
clear: both;
margin-bottom: 1px;
}
.nist-footer__menu.first {
padding-top: 20px;
}
.nist-footer__menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.nist-footer__menu-item {
display: inline-block;
font-size: 14px;
padding: 0;
margin-left: 0;
}
.nist-footer__menu-item:after {
content: '|';
margin-right: 1.6px;
display: inherit;
position: static;
font: inherit;
line-height: inherit;
color: inherit;
}
.nist-footer__menu-item:last-child:after {
content: none;
}
.nist-footer__menu-item a {
font-weight: normal;
margin-right: 6px;
white-space: nowrap;
padding: 0.5em 0;
display: inline-block;
}
/**
* Stick footer to bottom of page
* Source: https://css-tricks.com/couple-takes-sticky-footer/
*/
html.nist-footer-bottom,
html.nist-footer-bottom body {
height: 100%;
}
html.nist-footer-bottom body {
display: flex;
flex-direction: column;
}
html.nist-footer-bottom #main {
flex: 1 0 auto;
}
html.nist-footer-bottom .nist-footer {
flex-shrink: 0;
}
+126
View File
@@ -0,0 +1,126 @@
///////////////////////////////////////////////////////////////////////////
////////////////////// ANALOG CLOCK FUNCTIONS ///////////////////////////
///////////////// Clock code used from W3Schools.com ////////////////////
//////// Refer to their site about applicable use of the code ///////////
///////////////////////////////////////////////////////////////////////////
var canvas = document.getElementById("analog-clock");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
// add 0 to single digit time min, sec
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var deviceClock = new Date();
var hour = deviceClock.getHours();
var minute = deviceClock.getMinutes();
var second = deviceClock.getSeconds();
var ampm = hour >= 12 ? 'P.M.' : 'A.M.';
hour = hour % 12;
hour = hour ? hour : 12; // the hour '0' should be '12'
//minute = minute < 10 ? '0'+minute : minute;
// CHECKTIME FUNC ADDS LEADING '0' if <10
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
//digital time display
var myDigTime = hour + ":" + minute +":" + second;
document.getElementById('myTime').innerHTML = myDigTime + ' ' + ampm;
var dd = deviceClock.getDate();
var mm = deviceClock.getMonth();
mm++; //Increment because Jan is month 0
dd = checkTime(dd);
mm = checkTime(mm);
var yyyy = deviceClock.getFullYear();
var todaysDate = mm + '/' + dd + '/' + yyyy;
document.getElementById("myDate").innerHTML = "Today: " + todaysDate;
// OFFSET
var utcOffset = deviceClock.getTimezoneOffset()/60;
if (utcOffset > 0) {
utcOffset = "(UTC-" + utcOffset + ")";
} else {
utcOffset = "(UTC+" + Math.abs(utcOffset) + ")";
};
document.getElementById("myTimeTitle").innerHTML = utcOffset;
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
+67
View File
@@ -0,0 +1,67 @@
// ONLOAD OPERATIONS FOR THE SITE
window.onload = function() {
/* PARSE THE URL FOR 12/24 VARIABLE*/
var getT = location.search;
var tArr = getT.split("=");
var t = tArr[1];
// CREATE A VAR FOR THE CHECKBOX
var twentyFour = document.getElementById("twenty-four");
// CHECK VALUE OF 12/24 URL VAR "t" AND SET CHECKBOX ACCORDINGLY
if (t === "24") {
twentyFour.checked = true;
} else {
// DEFAULT TO 12HR DISPLAY
twentyFour.checked = false;
}
var noMoreAlerts = false;
// NOTIFICATION BOX FOR BOOKMARKING 24-HOUR SETTINGS PAGE
var twentyFour = document.getElementById("twenty-four");
twentyFour.addEventListener("click", function(event) {
var hourLabelDiv = document.getElementsByClassName("am-pm")[0];
var url = window.location.toString();
if(timeDotGov.data.twentyFour()) {
window.history.replaceState(url, "", "/timegov/?t=24");
if (!noMoreAlerts) {
alert("Bookmarking this page will save your preference for 24-hour time display.");
}
noMoreAlerts = true;
} else {
window.history.replaceState(url, "", "/timegov/");
}
timeDotGov.clockController.handleonrefresh(new Date());
});
//? timeZoneChange = function(event) {
//? timeDotGov.clockController.getnewOffset(event.target.value);
//? }
// LOAD DST DATES AND LEAP DATE
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "/api/timegov/auxdata.xml", false); // false for synchronous request
xmlHttp.send(null);
timeDotGov.auxdata = xmlHttp.responseText;
timeDotGov.clockController.auxdata();
timeDotGov.clockController.checkservertime();
document.getElementById('responseTime').innerHTML = timeDotGov.data.zoneOffset;
// SET REFRESH RATE TO CHECK FOR TOP OF NEW SECOND, SO THE DISPLAY DOES NOT HAVE TO BE REFRESHED MORE THAN NECESSARY
setInterval(function() {
if(timeDotGov.data.currentTime) {
timeDotGov.clockController.runningclocks();
}
}, 20); // 20 milliseconds
// FUNCTION REFRESHES PAGE EVERY 10 MIN
setInterval(function() {
location.reload();
}, 600000);
};
+363
View File
@@ -0,0 +1,363 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="title" content="Atermiter-X79 Official Time" />
<meta property="og:site_name" content="Atermiter-X79" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clock.atermiter-x79.xyz/timegov/" />
<meta property="og:title" content="Official U.S. Time | Atermiter-X79" />
<meta property="og:description" content="Self-hosted official U.S. time style display with U.S. map and synchronized clocks." />
<meta property="og:image" content="/timegov/img/map-elements/united-states-map.svg" />
<meta name="dcterms.title" content="Atermiter-X79 Official Time" />
<meta name="description" content="Self-hosted official U.S. time display with synchronized clock data." />
<meta name="dcterms.subject" content="Working with industry and science to advance innovation and improve quality of life." />
<meta name="google-site-verification" content="" />
<meta name="dcterms.type" content="text" />
<meta name="dcterms.format" content="text/html" />
<meta name="dcterms.identifier" content="https://clock.atermiter-x79.xyz/timegov/" />
<meta name="twitter:title" content="Official U.S. Time | Atermiter-X79" />
<meta name="twitter:description" content="Self-hosted official U.S. time style display with synchronized clocks." />
<meta name="twitter:image" content="/img/map-elements/og_map.png" />
<title>Atermiter-X79 Official Time</title>
<link rel="shortcut icon" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/NIST-styles.css" />
<!-- FUNC FOR TOP BAR INFO BTN -->
<script type="text/javascript">
function info_exp(id, id2) {
var n = document.getElementById(id);
if (n.style.display != 'none') {
n.style.display = 'none';
document.getElementById(id2).setAttribute('aria-expanded', 'false');
} else {
n.style.display = 'block';
document.getElementById(id2).setAttribute('aria-expanded', 'true');
}
}
</script>
</head>
<body>
<header>
<!-- TOP GREY BAR -->
<div id="top-grey">
<div class="inner">
<img src="img/us_flag_small.png" class="left gap" alt="U.S. Flag"><span class="left gap">Official self-hosted time service</span> <div id="info-btn"><a href="index.html#" onclick="info_exp('top-grey-exp', 'arrow');">Service details <span id="arrow" aria-expanded="false"></span></a></div>
</div>
</div>
<!-- EXPANDED TOP GREY BAR -->
<div id="top-grey-exp" style="display:none;">
<div class="inner">
<div class="col-50">
<div class="pad-4">
<img src="img/icon-dot-gov.svg" alt="icon dot gov" class="img10"><br>
<strong>Self-hosted service notice.</strong>
<p class="no-marg">This is a privately hosted clock service designed to mirror the time.gov experience in a homelab environment.</p>
</div>
</div>
<div class="col-50">
<div class="pad-4">
<img src="img/icon-https.svg" alt="icon https" class="img10"><br>
<strong>Encrypted transport.</strong>
<p class="no-marg">The <strong>https://</strong> indicates encrypted traffic between your browser and this host.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- BLACK TITLE BAR AREA -->
<div id="title-area">
<div class="inner">
<center>
<span class="title"><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" id="logo" alt="Atermiter-X79"/>OFFICIAL U.S. TIME</span>
</center>
</div>
</div>
<!-- ANNOUNCEMENT GREY BAR -->
<div id="callout-bar"><p></p></div> <!-- Blank between <p> </p> unless there is an upcoming announcement -->
</header>
<!-- MAIN CONTENT AREA -->
<div id="content">
<!-- LEFT COLUMN -->
<div id="col-left">
<div class="pad-2">
<div id="noncontTitle">Non-Contiguous U.S. and Territories</div>
<div id="ak-col">
<!-- ALASKA TIME -->
<div class="clock-box blue dst-clock">
<div class="title">Alaska <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">AK<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">9</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=9></time></div>
</div>
</div>
<!-- ALASKA MAP GRAPHIC -->
<img src="img/map-elements/alaska.svg" class="side-img" alt="Alaska Map">
<!-- ALEUTIAN TIME -->
<div class="clock-box blue dst-clock">
<div class="title">Aleutian <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">HA<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">10</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=10></time></div>
</div>
<!-- <div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div> -->
</div>
</div>
<div id="hi-col">
<!-- HAWAIIAN TIME -->
<div class="clock-box purple">
<div class="title">Hawaii Standard Time</div>
<div class="sub-title">HST (UTC-10)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=10></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- HAWAII MAP GRAPHIC -->
<img src="img/map-elements/hawaii.svg" class="side-img" alt="Hawaii Map">
<!-- SAMOA TIME -->
<div class="clock-box dk-blue">
<div class="title">Samoa Standard Time</div>
<div class="sub-title">SST (UTC-11)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=11></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- CHAMORRO TIME -->
<div class="clock-box dk-blue">
<div class="title">Chamorro Standard Time</div>
<div class="sub-title">CHST (UTC+10)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=-10></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- PUERTO RICO LT COL-->
<div id="pr-lt" class="pad-2 margTop15">
<div class="clock-box dk-blue">
<div class="title">Atlantic Standard Time</div>
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
<div class="sub-title">AST (UTC-4)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=4></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div> </div>
</div>
</div>
</div>
<!-- MAIN COLUMN -->
<div id="col-main">
<div class="pad-2">
<div style="height: 0px;">&nbsp;</div>
<!-- ROW FOR MAINLAND US CLOCK AREA -->
<div class="main-top">
<!-- PACIFIC TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box orange dst-clock">
<div class="title">Pacific <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">P<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">8</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=8 />SYNCHRONIZING</time></div></div>
</div>
</div>
</div>
</div>
<!-- MOUNTAIN TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box green dst-clock">
<div class="title">Mountain <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">M<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">7</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=7>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<!-- CENTRAL TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box yellow dst-clock">
<div class="title">Central <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">C<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">6</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=6>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<!-- EASTERN TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box red dst-clock">
<div class="title">Eastern <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">E<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">5</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=5>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- END TOP ROW -->
<div id="mainland">
<!-- ARIZONA/MOUNTAIN STANDARD TIME -->
<div id="az-clock" class="col-25">
<div class="pad-2">
<div class="clock-box green">
<div class="title">Arizona Mountain<br>Standard Time</div>
<div class="sub-title">MST (UTC-7)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=7></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
</div>
</div>
<!-- BEGIN MAIN MAP AREA -->
<img src="img/map-elements/united-states-map.svg" class="full-img" alt="United States Time Zone Map">
</div>
</div>
<!-- RIGHT COLUMN -->
<div id="col-right">
<div class="pad-4">
<!-- 24HR CHECKBOX -->
<div class='hours-wrapper'>
<div class='am-pm'></div>
<input id='twenty-four' type='checkbox' class="css-checkbox">
<label class='css-label' for='twenty-four'>24-Hour Clock Display</label>
<div class="clear"></div>
</div>
<div id="clock-utc">
<p class="text-xs">Coordinated Universal Time (UTC)</p>
<div class="clock text-lg"><time id="timeUTC"></time></div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<p class="sub-title ital">UTC is always displayed as a 24-hour clock.</p>
<!-- MAIN CLOCK AREA -->
<div id="main-time-area">
<p>Your Device's Clock <span id="myTimeTitle">UTC-0</span> <br>
<div id='myDate'></div>
<canvas id="analog-clock" width=200 height=200></canvas>
<br>
<span id="myTime"></span><br><br>
Your clock is off by: <br><span id="realTimeDif"></span> s</p>
</div>
<!-- PUERTO RICO RT COL-->
<div id="pr-rt" class="pad-2 margTop15">
<div class="clock-box dk-blue">
<div class="title">Atlantic Standard Time</div>
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
<div class="sub-title">AST (UTC-4)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=4></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
</div>
<div id="rightColBot">
<a href="/simple/">Simple View</a>
<a href="/api/time">Time API</a>
<div class="imgSmText">
<img src="img/stripes.svg" class="striped-box" alt="Hashed image for Daylight Saving Time not observed"> = DAYLIGHT SAVING TIME NOT OBSERVED
<p>Clocks are corrected for network delay</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<footer class="nist-footer">
<div class="nist-footer__inner">
<div class="nist-footer__menu" role="navigation">
<ul>
<li class="nist-footer__menu-item"><a href="/timegov/">Map View</a></li>
<li class="nist-footer__menu-item"><a href="/simple/">Simple View</a></li>
<li class="nist-footer__menu-item"><a href="/api/time">JSON Time API</a></li>
</ul>
</div>
</div>
<div class="nist-footer__logo">
<center><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" alt="Atermiter-X79 logo" /><p>Atermiter-X79 Official Time</p></center>
</div>
</footer>
<div class='time-zone-container' style='display:none'>
<div class='dropdown-container'>
<select id='dst-time-zone'>
</select>
<select id='no-dst-time-zone'>
</select>
</div>
</div>
<div id="responseTime"></div>
<script src="scripts/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/analogClock.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
<script type="text/javascript" src="scripts/zzz__bd08fcbbc8bd600a5f9e994be2de69f7cb26b9f4.js"></script>
</body>
</html>
File diff suppressed because one or more lines are too long
+550
View File
@@ -0,0 +1,550 @@
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
font-size: 1em;
font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
}
.inner {
padding: 0 5%;
}
.left {
float: left;
}
.gap {
margin-right: 10px;
}
#top-grey {
padding-bottom: .25rem;
padding-top: .25rem;
min-height: 0;
background-color: #f0f0f0;
}
#arrow {
background-repeat: no-repeat;
background-size: cover;
width: 10px;
height: 10px;
display: inline-block;
}
#arrow[aria-expanded=false] {
background-image: url(../img/arrow-down.svg);
}
#arrow[aria-expanded=true] {
background-image: url(../img/arrow-up.svg);
}
#top-grey-exp {
background-color: #f0f0f0;
height: auto;
}
.col-50 {
width: 50%;
float: left;
line-height: 1.5em;
}
.no-marg {
margin: 0;
}
.pad-4 {
padding: 4%;
}
.pad-2 {
padding: 2%;
}
#col-main .pad-2 {
padding: 2% 2% 0px 2%;
}
.clear {
clear: both;
}
.img10 {
width: 10%;
height: auto;
}
#title-area {
background-color: #000;
color: #fff;
padding: 4px 0;
vertical-align: middle;
}
.title {
font-size: 1.55em;
font-weight: 700;
}
#logo {
width: 1.25em;
height: 1.25em;
margin-right: 12px;
vertical-align: -0.12em;
}
#logo2 { /* added for USNO logo and increased margins */
width: 44px;
height: auto;
margin-left: 12px;
vertical-align: middle;
}
#clock-utc {
border: solid 1px #000;
text-align: center;
margin-bottom: 5px;
}
.ital {
font-style: italic;
text-align: center;
margin-bottom: 15px !important;
}
#myDate {
margin-top: 15px;
}
#myTime {
font-size: 1.4em;
font-weight: bold;
}
.imgSmText {
font-size: 0.7em;
line-height: 1.5em;
text-transform: uppercase;
}
#rightColBot a {
display: block;
margin-bottom: 10px;
color: #000;
}
#rightColBot {
display: block;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #000;
}
.text-xs {
font-size: 0.8em;
margin: 5px 10px 0;
}
.text-lg {
font-size: 1.8em;
font-weight: bold;
margin: 0 10px;
}
#callout-bar {
color: #fff;
background-color: #999;
padding: .25rem 0;
text-align: center;
font-weight: bold;
}
#callout-bar p {
margin: 0;
}
#content{
display: table;
width: 100%;
}
#col-left {
width: 15%;
background-color: #d9e8f6;
display: table-cell;
}
#col-main {
width: 70%;
display: table-cell;
position: relative;
}
#col-right {
width: 15%;
background-color: #e2e2e2;
display: table-cell;
position: relative;
}
.col-25 {
width: 25%;
float: left;
}
#noncontTitle,
#contTitle {
display: none;
}
#pr-lt {
display: none;
}
/*
STYLES FOR CLOCK AREAS
*/
.clock-box {
margin-bottom: 15px;
}
#col-main .clock-box {
margin-bottom: 0;
}
.clock-box .title {
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
/*color: #000000 !important;*/
}
.sub-title {
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: 5px;
}
.time-display {
display: table;
width: 90%;
}
.color-area {
width: 5%;
display: table-cell;
}
.time-text {
background-color: #000;
font-weight: bold;
color: #fff;
font-size: 1.4em;
padding: 5px;
display: table-cell;
}
.side-img {
max-width: 90%;
display: block;
margin: 0 auto 15px;
}
.margTop15 {
margin-top: 15px;
}
#twenty-hour {
float: left;
}
#main-time-area {
background-color: #000;
width: 100%;
text-align: center;
color: #fff;
padding: 15px 0;
}
.full-img {
width: 94.5%;
display: block;
margin: 0 2.3%;
}
#mainland {
position: relative;
}
#az-clock {
position: absolute;
z-index: 100;
bottom: 0;
left: 5%;
}
.hours-wrapper {
padding: 5px;
background: #eee;
margin-bottom: 15px;
}
.striped-box {
max-height: .75rem;
max-width: .75rem;
}
#analog-clock {
max-width: 90%;
}
#responseTime {
display: none;
}
/* CUSTOM CHECKBOX STYLES */
input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
vertical-align:middle;
cursor:pointer;
font-size: .7em;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
label.css-label {
background-image:url(../img/csscheckbox.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.no-saving {
background-image: url(../img/diagonal-white.png);
}
.blue .color-area {
background-color: #0060a8;
}
.blue .title {
color: #0060a8;
}
.purple .color-area {
background-color: #aa378d;
}
.purple .title {
color: #aa378d;
}
.dk-blue .color-area {
background-color: #1b0459;
}
.dk-blue .title {
color: #1b0459;
}
.orange .color-area {
background-color: #d66733;
}
.orange .title {
color: #d66733;
}
.green .color-area {
background-color: #63a952;
}
.green .title {
color: #63a952;
}
.yellow .color-area {
background-color: #e6a730;
}
.yellow .title {
color: #e6a730;
}
.red .color-area {
background-color: #cc2131;
}
.red .title {
color: #cc2131;
}
/* ///////////////////////////////////////////////////////////
////////////////////// RESPONSIVE STYLES //////////////////
///////////////////////////////////////////////////////////
*/
@media only screen and (min-width : 300px) and (max-width : 1260px) {
.title {
font-size: 2.0em; /* was 1.8 */
}
#content {
display: flex;
flex-flow: wrap;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: wrap; /* Safari 6.1+ */
}
#col-main {
width: 100%;
display: block;
order: 1;
margin-bottom: 15px;
}
#col-left {
width: 70%;
display: block;
order: 2;
}
#noncontTitle, #contTitle {
display: block;
text-align: center;
font-size: 1.5em;
margin-bottom: 15px;
text-transform: uppercase;
}
#col-right {
width: 30%;
display: block;
order: 3;
}
#main-time-area {
display: block;
margin: 0 auto;
padding: 15px 0;
}
#ak-col, #hi-col {
width: 50%;
float: left;
}
#pr-lt {
display: block;
}
#pr-rt {
display: none;
}
#rightColBot {
border-top: 1px solid #000;
margin-top: 30px;
position: relative;
padding-top: 15px;
}
.clock-box .title {
font-size: 1em;
line-height: 1em;
}
.sub-title {
font-size: .7em;
}
.time-text {
font-size: 1.2em;
}
.text-xs {
font-size: 1em;
}
input[type=checkbox].css-checkbox + label.css-label {
font-size: 1em;
}
.imgSmText {
font-size: 1em;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 740px) {
.title {
font-size: 2.1em; /* was 2.3 */
}
#content {
display: flex;
flex-flow: wrap;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: wrap; /* Safari 6.1+ */
}
#col-main {
width: 100%;
display: block;
order: 1;
margin-bottom: 15px;
}
#col-left {
width: 70%;
display: block;
order: 2;
}
#noncontTitle, #contTitle {
display: block;
text-align: center;
font-size: 1.5em;
margin-bottom: 15px;
text-transform: uppercase;
}
#col-right {
width: 30%;
display: block;
order: 3;
}
#main-time-area {
display: block;
margin: 0 auto;
padding: 15px 0;
}
#ak-col, #hi-col {
width: 50%;
float: left;
}
#pr-lt {
display: block;
}
#pr-rt {
display: none;
}
#rightColBot {
border-top: 1px solid #000;
margin-top: 30px;
position: relative;
padding-top: 15px;
}
.clock-box .title {
font-size: 1.5em;
line-height: 1em;
}
.sub-title {
font-size: 1em;
}
.time-text {
font-size: 1.6em;
}
.text-xs {
font-size: 1.2em;
}
input[type=checkbox].css-checkbox + label.css-label {
font-size: 1.2em;
}
.imgSmText {
font-size: 1em;
}
}
/* ///////////////////////////////////////////////////////////
/////// STYLES AND DESIGN USED WITH PERMISSION /////////
///////////////// MORGANFEBREY.COM ////////////////////////
///////////////////////////////////////////////////////////
*/
+370
View File
@@ -0,0 +1,370 @@
timeDotGov = {};
timeDotGov.clock = {};
timeDotGov.clockController = {};
timeDotGov.clockController.dsClock = {}
timeDotGov.data = {
"then": null,
"serverTime": null,
"responseTime": null,
"RThalf": null,
"realTimeDif": null,
"requestTime": null,
"leapsecond": null,
"dststart": null,
"dstend": null,
"currYear": null,
"dstDates": null,
"leapDate": null,
"clockinstances": [],
"leapFlag": null,
"leapsec60": null,
"myhour0": "0",
"myhour1": "0",
"mysec0": "0",
"mysec1": "0",
"currentTime": null,
"twentyFour": function() {
twentyFour = document.getElementById("twenty-four");
return twentyFour.checked;
}
}
var offsetCheck = true;
var daylightTitles = false;
// CREATE ARRAY THAT WILL STORE WHICH CLOCK NUMS HAVE BEEN UPDATED
var dstClocksUpdated = [];
timeDotGov.clockController.getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
timeDotGov.clockController.getleapdate = function() {
var leap = new Date();
var temp1 = timeDotGov.data.leapdate.split(" ");
var leapdateYear = temp1[0];
var leapdateMonth = temp1[1];
leapdateMonth = leapdateMonth - 1; // month convention = 0-11 (Jan = 0)
var leapdateDay = temp1[2];
leap.setUTCFullYear(leapdateYear, leapdateMonth, leapdateDay);
leap.setUTCHours(0, 0, 0, 0);
timeDotGov.data.leapsecond = leap.getTime();
}
// GET TIME FROM SERVER
timeDotGov.clockController.dsClock.doRequest = function() {
d = new Date();
var xmlHttp = new XMLHttpRequest();
////////////////////////////////////////////////////////////////////////////////////
////// USE OF THIS .CGI BY OUTSIDE SITES OR APPLICATIONS IS STRICTLY PROHIBITED ////
// OR USING THE TIME FROM THIS SITE IN ANY WAY FOR OTHER SITES IS ALSO PROHIBITED //
///////////////////////////////////////////////////////////////////////////////////
xmlHttp.open("GET", "/zzz__2fbc6c3300df7e4483acd44c5044098a9fcc61d6.cgi?disablecache=" + d.getTime(), false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
// GET t1, t2, t3, t4 in doRequest AND CALCULATE DELAYS IN doData
timeDotGov.clockController.checkservertime = function() {
var o = new Object();
var d = new Date();
var currentTimeObj = new Date();
timeDotGov.data.requestTime = currentTimeObj.getTime();
timeDotGov.data.currentTime = timeDotGov.clockController.dsClock.doRequest(); // GET NIST TIME FROM SERVER
timeDotGov.clockController.doData();
}
// PARSE DATA FROM AUXDATA.XML
timeDotGov.clockController.doAuxData = function() {
parser = new DOMParser();
xmlDoc = parser.parseFromString(timeDotGov.auxdata, "text/xml");
timeDotGov.data.curryear = xmlDoc.getElementsByTagName("currYear")[0].childNodes[0].nodeValue;
timeDotGov.data.dstdates = xmlDoc.getElementsByTagName("DstDates")[0].childNodes[0].nodeValue;
timeDotGov.data.leapdate = xmlDoc.getElementsByTagName("LeapDate")[0].childNodes[0].nodeValue;
}
timeDotGov.clockController.getDSTdates = function() {
var dstStartDate = new Date();
var dstEndDate = new Date();
var temp=timeDotGov.data.dstdates.split(" "); // makes an array of the string elements
var startmonth = temp[0];
startmonth = startmonth - 1; // to follow js convention of month = 0-11 (Jan = 0)
var startday = temp[1];
var endmonth = temp[2];
endmonth = endmonth - 1;
var endday = temp[3];
dstStartDate.setUTCFullYear(timeDotGov.data.curryear, startmonth, startday);
dstStartDate.setUTCHours(2, 0, 0, 0);
dstEndDate.setUTCFullYear(timeDotGov.data.curryear, endmonth, endday);
dstEndDate.setUTCHours(1, 0, 0, 0);
timeDotGov.data.dstStart = dstStartDate.getTime();
timeDotGov.data.dstEnd = dstEndDate.getTime();
}
timeDotGov.clockController.auxdata = function() {
this.doAuxData();
this.getDSTdates();
this.getleapdate();
}
timeDotGov.clockController.doData = function() {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(timeDotGov.data.currentTime, "text/xml");
var t2 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time2");
var t3 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time3");
var serverDelay = Math.round((t3 - t2) / 1000); // server delay in milliseconds
timeDotGov.data.serverTime = Math.round(t3/1000); // Server time in milliseconds
var currentTimeObj2 = new Date();
timeDotGov.data.responseTime = currentTimeObj2.getTime(); // t4
timeDotGov.data.RThalf = ((timeDotGov.data.responseTime - timeDotGov.data.requestTime) - serverDelay) / 2; // (t4 - t1) - (t3 -t2) NTP EQ
timeDotGov.data.realTimeDif = timeDotGov.data.serverTime - timeDotGov.data.responseTime; // t3-t4 used for correction to local clock for official time
////////////////////////////////////////////////////////////
// USE OFFSET CHECK VAR TO ONLY CHECK CLIENT CLOCK ONCE ///
////////////////////////////////////////////////////////////
if (offsetCheck) {
// ROUND TO MILLISECONDS - USE (* -1) to invert timediff pos/neg display value
var diff = (timeDotGov.data.realTimeDif/1000) * -1;
var diffDisplay = diff.toFixed(3);
if (diffDisplay > 0 ) {
diffDisplay = "+" + diffDisplay;
}
document.getElementById("realTimeDif").innerHTML = diffDisplay;
offsetCheck = false;
}
timeDotGov.clockController.runningclocks();
timeDotGov.data.leapFlag = "false";
} // END OF doData FUNCTION
// REFRESHES CLOCKS AT THE TOP OF EACH *ACTUAL* SECOND
timeDotGov.clockController.runningclocks = function() {
var deviceClock = new Date();
var fractionalZone =(Math.abs((deviceClock.getTimezoneOffset()/60))) % 1; // IF CLIENT IS IN A ZONE WITH A FRACTIONAL HOUR, MAKE ADJUSTMENT (MODULO 1 TO GET THE FRACTIONAL HOUR)
if (fractionalZone != 0) {
fractionalZone = (1 - fractionalZone); // SUBTRACT FROM 1 TO GET VALID CORRECTION FOR 30 AND 45 MIN ZONES
}
var fractionalZoneMilli = fractionalZone * 3600000; // CONVERT PARTIAL HOUR TO MILLISECONDS, TO BE SUBTRACTED FROM ADJUSTED TIME
var s = new Date(); // convert PC time and delay back to seconds (this is UTC)
s.setTime(s.getTime() + timeDotGov.data.realTimeDif + timeDotGov.data.RThalf - fractionalZoneMilli); // CORRECT FOR PC CLOCK ERROR, HALF NETWORK DELAY AND CLIENT IN PARTIAL TIME ZONE
var sec = s.getSeconds();
if (sec != timeDotGov.data.previousSec) { // call handleonrefresh as soon as you see a new second
timeDotGov.data.previousSec = sec;
timeDotGov.clockController.handleonrefresh(s);
}
}
// CHECK IF USER CHANGED CLOCK or IF NEW DST STATE or LEAP SECOND, THEN REFRESH ALL CLOCKS
timeDotGov.clockController.handleonrefresh = function(s) {
//var mins = s.getMinutes();
var now = s.getTime(); // convert time to ms since epoch (UTC)
//if (0 <= mins < 30) {
// now = now + fractionalZoneMilli;
//} else {
// now = now - fractionalZoneMilli;
//}
if (timeDotGov.data.then == null) {
timeDotGov.data.then = now; // if it's the first round, don't let it fail
}
var DidUserChangeClock = Math.abs(now - timeDotGov.data.then);
if (DidUserChangeClock >= 2000) { // if pc clock changed then reset (|now-then| should only be 1 s)
location.reload();
timeDotGov.data.then = now;
} else {
timeDotGov.data.then = now;
}
if (timeDotGov.data.leapsecond / 1000 == Math.floor(now / 1000)) {
timeDotGov.data.leapFlag = "true"
}
var clocks = document.getElementsByClassName("clock");
var clockNum; // SET TO VALUE OF 'i' IN THE FOLLOWING LOOP TO REPRESENT EACH CLOCK INSTANCE
// SET ALL OF THE CLOCKS BY CALLING setCurrentTime FOR EACH CLOCK INSTANCE
for(var i =0; i < clocks.length; i++ ){
var clock = clocks[i].getElementsByTagName("time")[0];
var zoneOffset = clocks[i].getElementsByTagName("time")[0].getAttribute("zoneOffset") || 0;
// GIVE VAR CLOCKNUM VALUE OF i
clockNum = i;
clock.innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, timeDotGov.data.twentyFour(), timeDotGov.data.dstStart, timeDotGov.data.dstEnd, zoneOffset, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, clockNum);
document.getElementById('timeUTC').innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, true, timeDotGov.data.dstStart, timeDotGov.data.dstEnd, 0, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, 999); // LAST VAR IS CLOCKNUM, PASSING AS '999' TO AVOID DUPLICATE 'i' VARIABLE VALUE SEND TO SETCURRENTTIME FUNCTION
}
} // END OF handleonrefresh FUNCTION
// CREATES CLOCK DIGITS AND DST/ST LABELS FOR EACH CLOCK INSTANCE
timeDotGov.clock.setCurrentTime = function(clock, now, twentyFour, dstStart, dstEnd, zoneOffset, leapFlag, leapsec60, RThalf, clockNum) {
var displayTime = new Date();
now = (now - (zoneOffset * 3600000));
if (leapFlag == "true"){
now = now - 1000; // if leap has occurred, show (seconds - 1) until next sync
var leapsec60 = "true"; // var to show a 60 instead of 59
}
displayTime.setTime(now);
var year = displayTime.getUTCFullYear();
var hourNum = displayTime.getUTCHours();
var minNum = displayTime.getMinutes();
var secNum = displayTime.getSeconds();
// CREATE ARRAY OF THE CLOCK NUMS WHO FOLLOW DST
// ALSO CREATE ARRAY OF DST LABEL CLASSES ////////////////////////
var DSTclocksArray = [ 0, 1, 6, 7, 8, 9 ]; // THESE ARE THE clockNums FOR THE ZONES THAT FOLLOW DST
var dstLabels = document.getElementsByClassName("DSTterm"); // CREATE ARRAY FOR DST LABELS
var dstLetters = document.getElementsByClassName("DSTletter"); // CREATE ARRAY FOR DST ABBREVIATION
var dstNums = document.getElementsByClassName("DSTnum"); // CREATE ARRAY FOR DST OFFSET NUM
if ( now >= dstStart && now <= dstEnd ) { // CHECK IF THIS SECOND IS DST OR NOT
// CHECK IF CLOCK NUM IS IN DST ARRAY, IF SO, ADD THE DST HOUR AND LABELS
// if ( DSTclocksArray.includes(clockNum) ) {
if ( DSTclocksArray.indexOf(clockNum) > -1 ) { // indexOf fixes a chance in ie
hourNum = hourNum + 1;
// AT END OF FUNC ADD/PUSH CLOCKNUM TO dstClocksUpdated ARRAY, IF CLOCKNUM IS IN THERE, DONT UPDATE AGAIN
// if ( !dstClocksUpdated.includes( clockNum ) ) {
if ( dstClocksUpdated.indexOf( clockNum ) == -1 ) { // indexOf fixes a chance in ie
dstLabels[clockNum].innerHTML = "DAYLIGHT";
dstLetters[clockNum].innerHTML = "D";
var standardNum = Number(dstNums[clockNum].innerHTML);
dstNums[clockNum].innerHTML = standardNum - 1;
dstClocksUpdated.push(clockNum); // ADD CLOCK NUM TO ARRAY OF CLOCKS UPDATED
}
}
}
// IF DST OR INCREMENTED HOUR GOES INTO NEXT DAY, RESET TO HOUR ZERO AND ADD A DAY
if (hourNum > 23) {
hourNum = 0;
now = (now + 3600000) // advance now by one hour
displayTime.setTime(now); // reset displaytime so day/date/month are correct with new day
}
// CHECK FOR AND IMPLEMENT LEAP SECOND
if (leapFlag == "true") {
if (leapsec60 == "true") {
if (minNum == "59") {
if (secNum == "59") { // if leapsec, and 59:59 then show 60 and reset
secNum = "60";
leapsec60 = "false";
}
}
}
}
var hourLabel = "";
// 12-HOUR OR 24-HOUR DISPLAY
// BOX NOT CHECKED SO 12-HOUR DISPLAY
if (!(twentyFour)) {
if (hourNum > 11) {
hourNum -= 12;
am_pm = "P.M.";
} else {
am_pm = "A.M.";
}
} else {
am_pm = "";
}
var newVal;
// SET HOURS
if(hourNum > 9) {
newVal = Number(String(hourNum).charAt(0));
if(timeDotGov.data.myhour0 != newVal) {
timeDotGov.data.myhour0 = newVal;
}
}
else if(Number(timeDotGov.data.myhour0) != 0) {
timeDotGov.data.myhour0 = "0";
}
if(Number(hourNum) > 9){
newVal=Number(String(hourNum).charAt(1));
if(timeDotGov.data.myhour1 != newVal) {
timeDotGov.data.myhour1 = newVal;
}
} else if (Number(timeDotGov.data.myhour1) != Number(hourNum)) {
timeDotGov.data.myhour1 = Number(hourNum);
}
if ((hourNum < 1) && (!(twentyFour))) { // if not 24hour time force the 12 so it's not 00
timeDotGov.data.myhour0 = 1;
timeDotGov.data.myhour1 = 2;
}
// SET MINUTES
if(minNum > 9) {
newVal = Number(String(minNum).charAt(0));
if (timeDotGov.data.mymin0 != newVal) {
timeDotGov.data.mymin0 = newVal;
}
} else if(Number(timeDotGov.data.mymin0) != 0) {
timeDotGov.data.mymin0 = 0;
}
if(Number(minNum) > 9) {
newVal = Number(String(minNum).charAt(1));
if(timeDotGov.data.mymin1 != newVal) {
timeDotGov.data.mymin1 = newVal;
}
}
else if(Number(timeDotGov.data.mymin1) != Number(minNum)) {
timeDotGov.data.mymin1 = Number(minNum);
}
// SET SECONDS
if(secNum > 9) {
newVal = Number(String(secNum).charAt(0));
if(timeDotGov.data.mysec0 != newVal) {
timeDotGov.data.mysec0 = newVal;
}
}
else if(Number(timeDotGov.data.mysec0) != 0) {
timeDotGov.data.mysec0 = 0;
}
if(Number(secNum) > 9) {
newVal=Number(String(secNum).charAt(1));
if(timeDotGov.data.mysec1 != newVal) {
timeDotGov.data.mysec1 = newVal;
}
}
else if(Number(timeDotGov.data.mysec1) != Number(secNum)) {
timeDotGov.data.mysec1 = Number(secNum);
}
// CREATE CLOCK DIGITS STRING TO DISPLAY
var clockdigits = (timeDotGov.data.myhour0 + "" + timeDotGov.data.myhour1 + ":" + timeDotGov.data.mymin0 + timeDotGov.data.mymin1 + ":" + timeDotGov.data.mysec0 + timeDotGov.data.mysec1);
clock = clockdigits + " " + am_pm;
return clock;
} // END OF setCurrentTime FUNCTION
+159
View File
@@ -0,0 +1,159 @@
/**
* @file
* Header and Footer styles
*
*/
/* Header Styles */
.nist-header {
background: #000;
font-family: Helvetica, Arial, sans-serif;
padding: 10px 16px 0;
font-size: 16px;
}
.nist-header__logo-link {
display: inline-block;
height: 35px;
}
.nist-header__logo-icon {
fill: #fff;
display: inline-block;
height: 16px;
position: relative;
top: -2px;
margin-right: 2px;
}
.nist-header__logo-image {
fill: #fff;
display: inline-block;
height: 24px;
width: 90px;
}
/* Limit main content area width */
.nist-main {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding: 0 16px;
box-sizing: border-box;
}
/* Make sure body has no margin or padding when using only this header component */
body {
padding: 0;
margin: 0;
}
/* Footer styles */
.nist-footer {
background: #333333;
position: relative;
z-index: 200;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
box-sizing: border-box;
}
.nist-footer__inner {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding: 0 16px;
}
.nist-footer__inner:after {
content: "";
display: table;
clear: both;
}
.nist-footer {
background: #333333;
color: white;
padding: 10px 0px;
position: relative;
}
.nist-footer a {
color: white;
text-decoration: none;
}
.nist-footer .nist-footer__logo img {
/* width: 30%; 300px;*/
height: 100px;
display: inline-block;
margin-left: 5%; /*margin-left: 10%;*/
margin-right: 5%; /*margin-right: 10%auto;*/
margin-top: 5px;
}
.nist-footer__menu {
clear: both;
margin-bottom: 1px;
}
.nist-footer__menu.first {
padding-top: 20px;
}
.nist-footer__menu ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.nist-footer__menu-item {
display: inline-block;
font-size: 14px;
padding: 0;
margin-left: 0;
}
.nist-footer__menu-item:after {
content: '|';
margin-right: 1.6px;
display: inherit;
position: static;
font: inherit;
line-height: inherit;
color: inherit;
}
.nist-footer__menu-item:last-child:after {
content: none;
}
.nist-footer__menu-item a {
font-weight: normal;
margin-right: 6px;
white-space: nowrap;
padding: 0.5em 0;
display: inline-block;
}
/**
* Stick footer to bottom of page
* Source: https://css-tricks.com/couple-takes-sticky-footer/
*/
html.nist-footer-bottom,
html.nist-footer-bottom body {
height: 100%;
}
html.nist-footer-bottom body {
display: flex;
flex-direction: column;
}
html.nist-footer-bottom #main {
flex: 1 0 auto;
}
html.nist-footer-bottom .nist-footer {
flex-shrink: 0;
}
+550
View File
@@ -0,0 +1,550 @@
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
font-size: 1em;
font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
}
.inner {
padding: 0 5%;
}
.left {
float: left;
}
.gap {
margin-right: 10px;
}
#top-grey {
padding-bottom: .25rem;
padding-top: .25rem;
min-height: 0;
background-color: #f0f0f0;
}
#arrow {
background-repeat: no-repeat;
background-size: cover;
width: 10px;
height: 10px;
display: inline-block;
}
#arrow[aria-expanded=false] {
background-image: url(../img/arrow-down.svg);
}
#arrow[aria-expanded=true] {
background-image: url(../img/arrow-up.svg);
}
#top-grey-exp {
background-color: #f0f0f0;
height: auto;
}
.col-50 {
width: 50%;
float: left;
line-height: 1.5em;
}
.no-marg {
margin: 0;
}
.pad-4 {
padding: 4%;
}
.pad-2 {
padding: 2%;
}
#col-main .pad-2 {
padding: 2% 2% 0px 2%;
}
.clear {
clear: both;
}
.img10 {
width: 10%;
height: auto;
}
#title-area {
background-color: #000;
color: #fff;
padding: 4px 0;
vertical-align: middle;
}
.title {
font-size: 1.55em;
font-weight: 700;
}
#logo {
width: 1.25em;
height: 1.25em;
margin-right: 12px;
vertical-align: -0.12em;
}
#logo2 { /* added for USNO logo and increased margins */
width: 44px;
height: auto;
margin-left: 12px;
vertical-align: middle;
}
#clock-utc {
border: solid 1px #000;
text-align: center;
margin-bottom: 5px;
}
.ital {
font-style: italic;
text-align: center;
margin-bottom: 15px !important;
}
#myDate {
margin-top: 15px;
}
#myTime {
font-size: 1.4em;
font-weight: bold;
}
.imgSmText {
font-size: 0.7em;
line-height: 1.5em;
text-transform: uppercase;
}
#rightColBot a {
display: block;
margin-bottom: 10px;
color: #000;
}
#rightColBot {
display: block;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #000;
}
.text-xs {
font-size: 0.8em;
margin: 5px 10px 0;
}
.text-lg {
font-size: 1.8em;
font-weight: bold;
margin: 0 10px;
}
#callout-bar {
color: #fff;
background-color: #999;
padding: .25rem 0;
text-align: center;
font-weight: bold;
}
#callout-bar p {
margin: 0;
}
#content{
display: table;
width: 100%;
}
#col-left {
width: 15%;
background-color: #d9e8f6;
display: table-cell;
}
#col-main {
width: 70%;
display: table-cell;
position: relative;
}
#col-right {
width: 15%;
background-color: #e2e2e2;
display: table-cell;
position: relative;
}
.col-25 {
width: 25%;
float: left;
}
#noncontTitle,
#contTitle {
display: none;
}
#pr-lt {
display: none;
}
/*
STYLES FOR CLOCK AREAS
*/
.clock-box {
margin-bottom: 15px;
}
#col-main .clock-box {
margin-bottom: 0;
}
.clock-box .title {
text-transform: uppercase;
font-size: 0.9em;
font-weight: bold;
/*color: #000000 !important;*/
}
.sub-title {
text-transform: uppercase;
font-size: 0.7em;
margin-bottom: 5px;
}
.time-display {
display: table;
width: 90%;
}
.color-area {
width: 5%;
display: table-cell;
}
.time-text {
background-color: #000;
font-weight: bold;
color: #fff;
font-size: 1.4em;
padding: 5px;
display: table-cell;
}
.side-img {
max-width: 90%;
display: block;
margin: 0 auto 15px;
}
.margTop15 {
margin-top: 15px;
}
#twenty-hour {
float: left;
}
#main-time-area {
background-color: #000;
width: 100%;
text-align: center;
color: #fff;
padding: 15px 0;
}
.full-img {
width: 94.5%;
display: block;
margin: 0 2.3%;
}
#mainland {
position: relative;
}
#az-clock {
position: absolute;
z-index: 100;
bottom: 0;
left: 5%;
}
.hours-wrapper {
padding: 5px;
background: #eee;
margin-bottom: 15px;
}
.striped-box {
max-height: .75rem;
max-width: .75rem;
}
#analog-clock {
max-width: 90%;
}
#responseTime {
display: none;
}
/* CUSTOM CHECKBOX STYLES */
input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:20px;
height:15px;
display:inline-block;
line-height:15px;
background-repeat:no-repeat;
background-position: 0 0;
vertical-align:middle;
cursor:pointer;
font-size: .7em;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
label.css-label {
background-image:url(../img/csscheckbox.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.no-saving {
background-image: url(../img/diagonal-white.png);
}
.blue .color-area {
background-color: #0060a8;
}
.blue .title {
color: #0060a8;
}
.purple .color-area {
background-color: #aa378d;
}
.purple .title {
color: #aa378d;
}
.dk-blue .color-area {
background-color: #1b0459;
}
.dk-blue .title {
color: #1b0459;
}
.orange .color-area {
background-color: #d66733;
}
.orange .title {
color: #d66733;
}
.green .color-area {
background-color: #63a952;
}
.green .title {
color: #63a952;
}
.yellow .color-area {
background-color: #e6a730;
}
.yellow .title {
color: #e6a730;
}
.red .color-area {
background-color: #cc2131;
}
.red .title {
color: #cc2131;
}
/* ///////////////////////////////////////////////////////////
////////////////////// RESPONSIVE STYLES //////////////////
///////////////////////////////////////////////////////////
*/
@media only screen and (min-width : 300px) and (max-width : 1260px) {
.title {
font-size: 2.0em; /* was 1.8 */
}
#content {
display: flex;
flex-flow: wrap;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: wrap; /* Safari 6.1+ */
}
#col-main {
width: 100%;
display: block;
order: 1;
margin-bottom: 15px;
}
#col-left {
width: 70%;
display: block;
order: 2;
}
#noncontTitle, #contTitle {
display: block;
text-align: center;
font-size: 1.5em;
margin-bottom: 15px;
text-transform: uppercase;
}
#col-right {
width: 30%;
display: block;
order: 3;
}
#main-time-area {
display: block;
margin: 0 auto;
padding: 15px 0;
}
#ak-col, #hi-col {
width: 50%;
float: left;
}
#pr-lt {
display: block;
}
#pr-rt {
display: none;
}
#rightColBot {
border-top: 1px solid #000;
margin-top: 30px;
position: relative;
padding-top: 15px;
}
.clock-box .title {
font-size: 1em;
line-height: 1em;
}
.sub-title {
font-size: .7em;
}
.time-text {
font-size: 1.2em;
}
.text-xs {
font-size: 1em;
}
input[type=checkbox].css-checkbox + label.css-label {
font-size: 1em;
}
.imgSmText {
font-size: 1em;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 740px) {
.title {
font-size: 2.1em; /* was 2.3 */
}
#content {
display: flex;
flex-flow: wrap;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: wrap; /* Safari 6.1+ */
}
#col-main {
width: 100%;
display: block;
order: 1;
margin-bottom: 15px;
}
#col-left {
width: 70%;
display: block;
order: 2;
}
#noncontTitle, #contTitle {
display: block;
text-align: center;
font-size: 1.5em;
margin-bottom: 15px;
text-transform: uppercase;
}
#col-right {
width: 30%;
display: block;
order: 3;
}
#main-time-area {
display: block;
margin: 0 auto;
padding: 15px 0;
}
#ak-col, #hi-col {
width: 50%;
float: left;
}
#pr-lt {
display: block;
}
#pr-rt {
display: none;
}
#rightColBot {
border-top: 1px solid #000;
margin-top: 30px;
position: relative;
padding-top: 15px;
}
.clock-box .title {
font-size: 1.5em;
line-height: 1em;
}
.sub-title {
font-size: 1em;
}
.time-text {
font-size: 1.6em;
}
.text-xs {
font-size: 1.2em;
}
input[type=checkbox].css-checkbox + label.css-label {
font-size: 1.2em;
}
.imgSmText {
font-size: 1em;
}
}
/* ///////////////////////////////////////////////////////////
/////// STYLES AND DESIGN USED WITH PERMISSION /////////
///////////////// MORGANFEBREY.COM ////////////////////////
///////////////////////////////////////////////////////////
*/
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 284.929 284.929"><path d="M282.082 76.51L267.808 62.24c-1.902-1.906-4.093-2.856-6.57-2.856-2.47 0-4.66.95-6.563 2.856L142.465 174.44 30.263 62.24c-1.903-1.905-4.093-2.855-6.567-2.855-2.475 0-4.665.95-6.567 2.856L2.856 76.516C.95 78.417 0 80.607 0 83.082c0 2.473.953 4.663 2.856 6.565L135.9 222.693c1.9 1.903 4.092 2.854 6.566 2.854s4.66-.95 6.562-2.854L282.082 89.647c1.902-1.903 2.847-4.093 2.847-6.565 0-2.475-.946-4.665-2.848-6.57z" fill="#005ea2"/></svg>

After

Width:  |  Height:  |  Size: 536 B

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 284.929 284.929"><path d="M282.082 195.285L149.028 62.24c-1.9-1.903-4.088-2.856-6.562-2.856s-4.665.953-6.567 2.856L2.855 195.285C.95 197.19 0 199.378 0 201.853c0 2.474.953 4.664 2.856 6.566l14.272 14.27c1.903 1.903 4.093 2.854 6.567 2.854s4.664-.95 6.567-2.854l112.204-112.202 112.208 112.21c1.902 1.902 4.093 2.847 6.563 2.847 2.478 0 4.668-.95 6.57-2.848l14.274-14.277c1.903-1.902 2.848-4.093 2.848-6.566 0-2.476-.944-4.666-2.846-6.57z" fill="#1a4480"/></svg>

After

Width:  |  Height:  |  Size: 539 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><defs><style>.cls-1{fill:#2378c3;}.cls-2{fill:none;stroke:#005ea2;stroke-miterlimit:10;}</style></defs><title>dot gov icon</title><path class="cls-1" d="M36.5,20.91v1.36H35.15a0.71,0.71,0,0,1-.73.68H18.23a0.71,0.71,0,0,1-.73-0.68H16.14V20.91l10.18-4.07Zm0,13.57v1.36H16.14V34.48a0.71,0.71,0,0,1,.73-0.68h18.9A0.71,0.71,0,0,1,36.5,34.48ZM21.57,23.62v8.14h1.36V23.62h2.71v8.14H27V23.62h2.71v8.14h1.36V23.62h2.71v8.14h0.63a0.71,0.71,0,0,1,.73.68v0.68H17.5V32.45a0.71,0.71,0,0,1,.73-0.68h0.63V23.62h2.71Z"/><circle class="cls-2" cx="27" cy="27.12" r="26"/></svg>

After

Width:  |  Height:  |  Size: 651 B

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><defs><style>.cls-1{fill:#719f2a;}.cls-2{fill:none;stroke:#538200;stroke-miterlimit:10;}</style></defs><title>https icon</title><path class="cls-1" d="M34.72,34.84a1.29,1.29,0,0,1-1.29,1.29H20.57a1.29,1.29,0,0,1-1.29-1.29V27.12a1.29,1.29,0,0,1,1.29-1.29H21V23.26a6,6,0,0,1,12,0v2.57h0.43a1.29,1.29,0,0,1,1.29,1.29v7.72Zm-4.29-9V23.26a3.43,3.43,0,0,0-6.86,0v2.57h6.86Z"/><circle class="cls-2" cx="27" cy="27.12" r="26"/></svg>

After

Width:  |  Height:  |  Size: 518 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 36 KiB

@@ -0,0 +1,161 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 272 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:3.84999;" shape-rendering="geometricPrecision">
<g transform="matrix(1,0,0,1,0,-2129.92)">
<g id="Lines">
</g>
<g id="Hawaii---New-Colors" serif:id="Hawaii - New Colors" transform="matrix(1.86867,0,0,1.75,-964.299,2625.17)">
<rect x="516.034" y="-283" width="145.558" height="64" style="fill:none;"/>
<g transform="matrix(0.374018,0,0,0.399381,595.786,-396.165)">
<g transform="matrix(22.8926,0,0,22.8926,63.0186,371.75)">
<path d="M0.543,-0.311L0.543,-0L0.689,-0L0.689,-0.723L0.543,-0.723L0.543,-0.433L0.227,-0.433L0.227,-0.723L0.081,-0.723L0.081,-0L0.227,-0L0.227,-0.311L0.543,-0.311Z" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(22.8926,0,0,22.8926,80.6459,371.75)">
<rect x="0.081" y="-0.723" width="0.146" height="0.723" style="fill-rule:nonzero;"/>
</g>
</g>
<g transform="matrix(0.93185,0,0,1.12321,36.9225,37.8028)">
<g transform="matrix(0.10475,0,0,0.0927968,548.768,-284.626)">
<path d="M608.98,451.46L616.4,446.42L621.6,441.8L626,441.25L631.76,437.13L636.13,430.51L642.37,425.4L646.45,423.64L648.18,417.03L644.89,410.92L639.62,400.74L638.61,392.2L641.81,380.23L647.91,378.31L656.11,381.93L665.25,387.83L669.84,393.21L679.65,400.33L685.35,405.41L691.57,404.95L700.1,408.57L717.33,417.74L734.85,427.79L749.89,441.35L755.84,448.32L761.2,455.44L759.22,467.66L759.12,475.25L765.86,474.06L771.97,474.74L775.2,482.69L775.4,491.74L779.25,496.57L793.27,506.66L799,510.21L798.31,514.76L787.76,524.33L776.35,531.29L763.55,537.97L748.3,542.85L740.65,545.58L733.24,546.02L724.18,543.02L716.13,545.9L708.01,551.63L703.15,552.35L692.45,558.98L684.06,560.32L675.05,570.14L668.47,579.13L664.19,584.52L659.92,588.57L654.16,591.77L646.45,582.82L634.53,574.58L622.98,569.79L618.86,559.55L620.53,547.18L623.35,535.04L625.87,528.96L627.02,521.37L624.93,510.55L623.11,504.32L619.45,498.78L617.8,487.71L617.29,479.45L614.8,473.74L610.02,472.07L609.66,469.02L605.83,458.93L608.98,451.46ZM471.91,257.03L479.82,255.39L490.95,257.42L500.35,263.37L505.36,268.88L509,276.13L503.36,284.3L494.94,286.43L491.93,286.92L482.73,286.54L479.96,279.75L480.72,271.82L478.28,267.12L471.3,261.51L471.91,257.03ZM527.63,262.44L531.64,253.47L541.98,247.14L550.56,249.96L556.28,260.34L561.1,269.82L573.45,268.43L584.9,264.87L598.72,267.77L605.34,275.75L614.43,281.59L624.86,290.76L633.33,294.05L635.27,302.36L631.94,309.3L624.87,313.77L610.86,318.14L598.39,316.61L586.32,320.33L571.52,321.53L563.44,317.51L562.62,308.28L561.75,295.43L561.47,292.67L560.36,286.73L555.49,284.8L550.2,287.52L547.72,286.03L536.39,279.17L528.96,267.33L527.63,262.44ZM525.69,319.24L535.58,315.03L542.55,314.07L545.85,318.36L545.45,326.6L537.92,328.26L524.96,327.87L520.26,322.95L525.69,319.24ZM442.84,214.72L447.58,211.18L446.67,204.53L455.57,206.62L466.63,210.78L480.04,214.06L484.19,213L489.07,211.76L492.33,212.16L497.98,219.65L498.48,219.71L510.23,221.27L525.71,221.76L530.51,225.1L524.98,231.95L514.47,237.73L502.56,239.15L491.02,235.13L480.28,230.23L472.11,227.2L457.85,227.27L445.3,226.23L436.58,222.96L442.84,214.72ZM304.39,129.64L320.8,131.33L328.65,125.78L334,119.63L343.7,115.04L347.42,114.77L352.93,125.26L358.65,138.05L363.94,145.93L361.37,155.64L365.7,160.39L373.69,158.07L380.12,159.22L378.73,167.92L379.96,175.19L388.13,183.3L387.54,183.94L384.27,187.52L379.71,190.15L371.19,186.85L367.44,188.4L362.72,188.99L356.88,183.99L351.32,179.79L342.09,177.65L337.43,176.51L330.68,176.68L320.91,177.04L320.65,177.05L318.33,176.89L315.27,169.04L314.19,164.29L308.83,158.75L308.83,154.65L302.28,144.65L303.31,139.03L297.31,129.5L304.39,129.64ZM1,49.47L5.92,38.42L12.05,34.05L21.34,31.28L23.93,29.4L26.15,24.57L32.53,24.25L34.43,25.64L35.2,28.21L31.87,30.43L28.65,35.79L28.93,40.82L21.58,42.78L16.52,43.42L13.17,46.26L10.3,49.73L6.82,56.05L3.32,53.89L1,49.47ZM77.87,21.23L84.49,17.01L87.71,10.71L91.96,8.24L107.2,3.77L112.36,1L117.96,2.11L122.59,5.68L126.65,2.12L134.99,4.85L139.72,3.53L145.53,7.32L152.31,13.24L153.9,23.06L148.67,32.13L145.76,34.86L145.1,41.52L143.24,48.93L135.11,53.93L125.02,59.46L112.85,55.26L105.79,52.8L101.39,52.25L95.26,44.71L87.04,39.13L80.26,35.49L76.35,28.36L77.87,21.23Z" style="fill:rgb(211,111,175);"/>
</g>
<g id="No-Daylight-Savings" serif:id="No Daylight Savings" transform="matrix(0.689936,0,0,0.611207,461.087,-486.077)">
<clipPath id="_clip1">
<path d="M219.545,398.139L220.671,397.373L221.461,396.672L222.129,396.588L223.003,395.963L223.667,394.958L224.614,394.182L225.234,393.915L225.496,392.911L224.997,391.984L224.197,390.438L224.043,389.141L224.529,387.324L225.455,387.032L226.7,387.582L228.088,388.478L228.785,389.295L230.274,390.376L231.14,391.147L232.084,391.077L233.379,391.627L235.995,393.019L238.655,394.545L240.939,396.604L241.842,397.662L242.656,398.743L242.355,400.598L242.34,401.75L243.363,401.57L244.291,401.673L244.781,402.88L244.812,404.254L245.396,404.987L247.525,406.519L248.395,407.058L248.29,407.749L246.688,409.202L244.956,410.259L243.013,411.273L240.697,412.014L239.536,412.428L238.411,412.495L237.035,412.04L235.813,412.477L234.58,413.347L233.842,413.456L232.218,414.463L230.944,414.666L229.576,416.157L228.577,417.522L227.927,418.34L227.279,418.955L226.404,419.441L225.234,418.082L223.424,416.831L221.67,416.104L221.045,414.549L221.298,412.671L221.727,410.828L222.109,409.905L222.284,408.753L221.966,407.11L221.69,406.164L221.134,405.323L220.884,403.642L220.807,402.388L220.429,401.521L219.703,401.268L219.648,400.805L219.067,399.273L219.545,398.139ZM198.734,368.619L199.935,368.37L201.625,368.678L203.052,369.582L203.813,370.418L204.365,371.519L203.509,372.759L202.231,373.083L201.774,373.157L200.377,373.099L199.956,372.069L200.072,370.865L199.701,370.151L198.642,369.299L198.734,368.619ZM207.194,369.44L207.803,368.079L209.373,367.118L210.675,367.546L211.544,369.122L212.275,370.561L214.151,370.35L215.889,369.809L217.987,370.25L218.992,371.461L220.372,372.348L221.956,373.74L223.242,374.24L223.536,375.501L223.031,376.555L221.957,377.234L219.83,377.897L217.937,377.665L216.105,378.23L213.857,378.412L212.631,377.801L212.506,376.4L212.374,374.449L212.332,374.03L212.163,373.128L211.424,372.835L210.621,373.248L210.244,373.022L208.524,371.98L207.396,370.183L207.194,369.44ZM206.899,378.064L208.401,377.425L209.459,377.279L209.96,377.931L209.899,379.182L208.756,379.434L206.788,379.374L206.075,378.627L206.899,378.064ZM194.321,362.195L195.04,361.658L194.902,360.648L196.253,360.966L197.932,361.597L199.968,362.095L200.599,361.934L201.339,361.746L201.834,361.807L202.692,362.944L202.768,362.953L204.552,363.19L206.902,363.264L207.631,363.771L206.792,364.811L205.196,365.689L203.388,365.904L201.636,365.294L200.005,364.55L198.764,364.09L196.599,364.101L194.694,363.943L193.37,363.446L194.321,362.195ZM173.3,349.278L175.792,349.535L176.984,348.692L177.796,347.758L179.269,347.061L179.833,347.02L180.67,348.613L181.538,350.555L182.342,351.751L181.951,353.225L182.609,353.947L183.822,353.594L184.798,353.769L184.587,355.09L184.774,356.194L186.014,357.425L185.925,357.522L185.428,358.066L184.736,358.465L183.442,357.964L182.873,358.199L182.156,358.289L181.27,357.53L180.425,356.892L179.024,356.567L178.317,356.394L177.292,356.42L175.808,356.475L175.769,356.476L175.417,356.452L174.952,355.26L174.788,354.539L173.974,353.698L173.974,353.075L172.98,351.557L173.136,350.704L172.225,349.257L173.3,349.278ZM127.238,337.106L127.985,335.428L128.916,334.765L130.326,334.344L130.719,334.059L131.056,333.326L132.025,333.277L132.313,333.488L132.43,333.878L131.925,334.215L131.436,335.029L131.478,335.793L130.362,336.09L129.594,336.188L129.086,336.619L128.65,337.146L128.122,338.105L127.59,337.777L127.238,337.106ZM138.909,332.819L139.914,332.178L140.403,331.221L141.048,330.846L143.362,330.168L144.145,329.747L144.995,329.916L145.698,330.458L146.315,329.917L147.581,330.332L148.299,330.131L149.181,330.707L150.211,331.605L150.452,333.096L149.658,334.473L149.216,334.888L149.116,335.899L148.834,337.024L147.599,337.783L146.067,338.623L144.22,337.985L143.148,337.612L142.48,337.528L141.549,336.383L140.301,335.536L139.272,334.984L138.678,333.901L138.909,332.819Z"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g id="Lines1" serif:id="Lines" transform="matrix(1,0,0,1,2,-7)">
<g id="No-Daylight-Savings1" serif:id="No Daylight Savings">
<g id="Lines2" serif:id="Lines">
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969126,176.003,588.009)">
<path d="M71.318,155.942L172.818,155.942" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978616,-0.969113,-0.978596,-0.969133,174.834,590.801)">
<path d="M73.355,153.905L174.855,153.905" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.969119,173.67,593.592)">
<path d="M75.392,151.868L176.892,151.868" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,172.5,596.385)">
<path d="M77.43,149.83L178.93,149.83" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,171.333,599.177)">
<path d="M79.467,147.793L180.967,147.793" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978582,-0.969147,-0.97863,-0.9691,170.172,601.968)">
<path d="M81.503,145.757L183.003,145.757" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,168.998,604.759)">
<path d="M83.54,143.721L185.039,143.721" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,167.831,607.549)">
<path d="M85.575,141.685L187.075,141.685" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969127,166.663,610.339)">
<path d="M87.611,139.649L189.111,139.649" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,165.497,613.129)">
<path d="M89.646,137.613L191.147,137.613" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969126,164.329,615.919)">
<path d="M91.682,135.578L193.182,135.578" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,163.163,618.709)">
<path d="M93.718,133.542L195.217,133.542" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969127,161.996,621.499)">
<path d="M95.754,131.507L197.253,131.507" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,160.829,624.289)">
<path d="M97.789,129.471L199.289,129.471" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.969121,159.663,627.079)">
<path d="M99.825,127.435L201.325,127.435" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.96912,158.497,629.869)">
<path d="M101.861,125.399L203.361,125.399" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,190.525)">
<path d="M118.761,161.9L190.532,90.129L193.183,87.478" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,194.05)">
<path d="M120.796,161.364L192.568,89.592L196.719,85.441" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,197.915)">
<path d="M122.832,160.579L194.603,88.808L200.004,83.406" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,201.782)">
<path d="M124.868,159.793L196.639,88.021L203.29,81.371" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,205.308)">
<path d="M126.903,159.257L198.675,87.485L206.826,79.335" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,218.253)">
<path d="M128.939,151.847L200.71,80.076L203.486,77.3" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,150.327,649.399)">
<path d="M116.11,111.149L217.61,111.149" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,149.159,652.189)">
<path d="M118.146,109.113L219.646,109.113" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.96912,147.994,654.979)">
<path d="M120.182,107.078L221.682,107.078" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,146.826,657.769)">
<path d="M122.218,105.042L223.717,105.042" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978599,-0.96913,-0.978613,-0.969117,145.66,660.559)">
<path d="M124.252,103.006L225.753,103.006" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,144.492,663.349)">
<path d="M126.289,100.971L227.789,100.971" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,143.325,666.139)">
<path d="M128.325,98.936L229.825,98.936" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,142.158,668.929)">
<path d="M130.36,96.899L231.86,96.899" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978612,-0.969117,-0.9786,-0.969129,140.989,671.719)">
<path d="M132.396,94.864L233.896,94.864" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,139.824,674.509)">
<path d="M134.432,92.828L235.932,92.828" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978613,-0.969116,-0.978599,-0.96913,138.655,677.298)">
<path d="M136.467,90.792L237.967,90.792" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,137.489,680.089)">
<path d="M138.504,88.756L240.002,88.756" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,136.323,682.88)">
<path d="M140.539,86.721L242.039,86.721" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978603,-0.969127,-0.978609,-0.96912,135.157,685.67)">
<path d="M142.575,84.686L244.074,84.686" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,133.989,688.46)">
<path d="M144.61,82.649L246.11,82.649" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978605,-0.969124,-0.978607,-0.969123,132.822,691.249)">
<path d="M146.646,80.614L248.146,80.614" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,131.655,694.039)">
<path d="M148.682,78.578L250.182,78.578" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="Outline" transform="matrix(0.10475,0,0,0.0927968,548.768,-284.626)">
<path d="M608.98,451.46L616.4,446.42L621.6,441.8L626,441.25L631.76,437.13L636.13,430.51L642.37,425.4L646.45,423.64L648.18,417.03L644.89,410.92L639.62,400.74L638.61,392.2L641.81,380.23L647.91,378.31L656.11,381.93L665.25,387.83L669.84,393.21L679.65,400.33L685.35,405.41L691.57,404.95L700.1,408.57L717.33,417.74L734.85,427.79L749.89,441.35L755.84,448.32L761.2,455.44L759.22,467.66L759.12,475.25L765.86,474.06L771.97,474.74L775.2,482.69L775.4,491.74L779.25,496.57L793.27,506.66L799,510.21L798.31,514.76L787.76,524.33L776.35,531.29L763.55,537.97L748.3,542.85L740.65,545.58L733.24,546.02L724.18,543.02L716.13,545.9L708.01,551.63L703.15,552.35L692.45,558.98L684.06,560.32L675.05,570.14L668.47,579.13L664.19,584.52L659.92,588.57L654.16,591.77L646.45,582.82L634.53,574.58L622.98,569.79L618.86,559.55L620.53,547.18L623.35,535.04L625.87,528.96L627.02,521.37L624.93,510.55L623.11,504.32L619.45,498.78L617.8,487.71L617.29,479.45L614.8,473.74L610.02,472.07L609.66,469.02L605.83,458.93L608.98,451.46ZM471.91,257.03L479.82,255.39L490.95,257.42L500.35,263.37L505.36,268.88L509,276.13L503.36,284.3L494.94,286.43L491.93,286.92L482.73,286.54L479.96,279.75L480.72,271.82L478.28,267.12L471.3,261.51L471.91,257.03ZM527.63,262.44L531.64,253.47L541.98,247.14L550.56,249.96L556.28,260.34L561.1,269.82L573.45,268.43L584.9,264.87L598.72,267.77L605.34,275.75L614.43,281.59L624.86,290.76L633.33,294.05L635.27,302.36L631.94,309.3L624.87,313.77L610.86,318.14L598.39,316.61L586.32,320.33L571.52,321.53L563.44,317.51L562.62,308.28L561.75,295.43L561.47,292.67L560.36,286.73L555.49,284.8L550.2,287.52L547.72,286.03L536.39,279.17L528.96,267.33L527.63,262.44ZM525.69,319.24L535.58,315.03L542.55,314.07L545.85,318.36L545.45,326.6L537.92,328.26L524.96,327.87L520.26,322.95L525.69,319.24ZM442.84,214.72L447.58,211.18L446.67,204.53L455.57,206.62L466.63,210.78L480.04,214.06L484.19,213L489.07,211.76L492.33,212.16L497.98,219.65L498.48,219.71L510.23,221.27L525.71,221.76L530.51,225.1L524.98,231.95L514.47,237.73L502.56,239.15L491.02,235.13L480.28,230.23L472.11,227.2L457.85,227.27L445.3,226.23L436.58,222.96L442.84,214.72ZM304.39,129.64L320.8,131.33L328.65,125.78L334,119.63L343.7,115.04L347.42,114.77L352.93,125.26L358.65,138.05L363.94,145.93L361.37,155.64L365.7,160.39L373.69,158.07L380.12,159.22L378.73,167.92L379.96,175.19L388.13,183.3L387.54,183.94L384.27,187.52L379.71,190.15L371.19,186.85L367.44,188.4L362.72,188.99L356.88,183.99L351.32,179.79L342.09,177.65L337.43,176.51L330.68,176.68L320.91,177.04L320.65,177.05L318.33,176.89L315.27,169.04L314.19,164.29L308.83,158.75L308.83,154.65L302.28,144.65L303.31,139.03L297.31,129.5L304.39,129.64ZM1,49.47L5.92,38.42L12.05,34.05L21.34,31.28L23.93,29.4L26.15,24.57L32.53,24.25L34.43,25.64L35.2,28.21L31.87,30.43L28.65,35.79L28.93,40.82L21.58,42.78L16.52,43.42L13.17,46.26L10.3,49.73L6.82,56.05L3.32,53.89L1,49.47ZM77.87,21.23L84.49,17.01L87.71,10.71L91.96,8.24L107.2,3.77L112.36,1L117.96,2.11L122.59,5.68L126.65,2.12L134.99,4.85L139.72,3.53L145.53,7.32L152.31,13.24L153.9,23.06L148.67,32.13L145.76,34.86L145.1,41.52L143.24,48.93L135.11,53.93L125.02,59.46L112.85,55.26L105.79,52.8L101.39,52.25L95.26,44.71L87.04,39.13L80.26,35.49L76.35,28.36L77.87,21.23Z" style="fill:none;stroke:black;stroke-width:9.59px;stroke-linejoin:round;stroke-miterlimit:2;"/>
</g>
</g>
</g>
<g id="Time_Zones1">
</g>
<g id="States">
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

+22
View File
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-58.7899,-489.903)">
<g id="Lines">
</g>
<g id="Artboard5" transform="matrix(0.55,0,0,0.270127,40.6399,374.754)">
<rect x="33" y="426.278" width="20" height="40.722" style="fill:none;"/>
<clipPath id="_clip1">
<rect x="33" y="426.278" width="20" height="40.722"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(1.81818,0,0,3.70196,-73.8908,-1387.32)">
<rect x="58.79" y="489.903" width="11" height="11" style="fill:white;"/>
</g>
<g transform="matrix(1.98807,0,0,4.04786,-42.4869,-1558.5)">
<path d="M37.97,493.257L37.97,490.327L40.928,490.327L37.97,493.257ZM37.97,496.021L43.719,490.327L46.704,490.327L37.97,498.976L37.97,496.021ZM39.335,500.387L48.03,491.776L48.03,494.732L42.319,500.387L39.335,500.387ZM45.111,500.387L48.03,497.496L48.03,500.387L45.111,500.387Z"/>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 B

+369
View File
@@ -0,0 +1,369 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="title" content="SethPC Official Time" />
<meta property="og:site_name" content="SethPC" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clock.sethpc.xyz/timegov/" />
<meta property="og:title" content="Official U.S. Time | SethPC" />
<meta property="og:description" content="Self-hosted official U.S. time style display with U.S. map and synchronized clocks." />
<meta property="og:image" content="/timegov/img/map-elements/united-states-map.svg" />
<meta name="dcterms.title" content="SethPC Official Time" />
<meta name="description" content="Self-hosted official U.S. time display with synchronized clock data." />
<meta name="dcterms.subject" content="Working with industry and science to advance innovation and improve quality of life." />
<meta name="google-site-verification" content="" />
<meta name="dcterms.type" content="text" />
<meta name="dcterms.format" content="text/html" />
<meta name="dcterms.identifier" content="https://clock.sethpc.xyz/timegov/" />
<meta name="twitter:title" content="Official U.S. Time | SethPC" />
<meta name="twitter:description" content="Self-hosted official U.S. time style display with synchronized clocks." />
<meta name="twitter:image" content="/img/map-elements/og_map.png" />
<title>SethPC Official Time</title>
<link rel="shortcut icon" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/NIST-styles.css" />
<!-- FUNC FOR TOP BAR INFO BTN -->
<script type="text/javascript">
function info_exp(id, id2) {
var n = document.getElementById(id);
if (n.style.display != 'none') {
n.style.display = 'none';
document.getElementById(id2).setAttribute('aria-expanded', 'false');
} else {
n.style.display = 'block';
document.getElementById(id2).setAttribute('aria-expanded', 'true');
}
}
</script>
</head>
<body>
<header>
<!-- TOP GREY BAR -->
<div id="top-grey">
<div class="inner">
<img src="img/us_flag_small.png" class="left gap" alt="U.S. Flag"><span class="left gap">Official self-hosted time service</span> <div id="info-btn"><a href="index.html#" onclick="info_exp('top-grey-exp', 'arrow');">Service details <span id="arrow" aria-expanded="false"></span></a></div>
</div>
</div>
<!-- EXPANDED TOP GREY BAR -->
<div id="top-grey-exp" style="display:none;">
<div class="inner">
<div class="col-50">
<div class="pad-4">
<img src="img/icon-dot-gov.svg" alt="icon dot gov" class="img10"><br>
<strong>Self-hosted service notice.</strong>
<p class="no-marg">This is a privately hosted clock service designed to mirror the time.gov experience in a homelab environment.</p>
</div>
</div>
<div class="col-50">
<div class="pad-4">
<img src="img/icon-https.svg" alt="icon https" class="img10"><br>
<strong>Encrypted transport.</strong>
<p class="no-marg">The <strong>https://</strong> indicates encrypted traffic between your browser and this host.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- BLACK TITLE BAR AREA -->
<div id="title-area">
<div class="inner">
<center>
<span class="title"><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" id="logo" alt="SethPC"/>OFFICIAL U.S. TIME</span>
</center>
</div>
</div>
<!-- ANNOUNCEMENT GREY BAR -->
<div id="callout-bar"><p></p></div> <!-- Blank between <p> </p> unless there is an upcoming announcement -->
</header>
<!-- MAIN CONTENT AREA -->
<div id="content">
<!-- LEFT COLUMN -->
<div id="col-left">
<div class="pad-2">
<div id="noncontTitle">Non-Contiguous U.S. and Territories</div>
<div id="ak-col">
<!-- ALASKA TIME -->
<div class="clock-box blue dst-clock">
<div class="title">Alaska <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">AK<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">9</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=9></time></div>
</div>
</div>
<!-- ALASKA MAP GRAPHIC -->
<img src="img/map-elements/alaska.svg" class="side-img" alt="Alaska Map">
<!-- ALEUTIAN TIME -->
<div class="clock-box blue dst-clock">
<div class="title">Aleutian <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">HA<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">10</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=10></time></div>
</div>
<!-- <div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div> -->
</div>
</div>
<div id="hi-col">
<!-- HAWAIIAN TIME -->
<div class="clock-box purple">
<div class="title">Hawaii Standard Time</div>
<div class="sub-title">HST (UTC-10)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=10></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- HAWAII MAP GRAPHIC -->
<img src="img/map-elements/hawaii.svg" class="side-img" alt="Hawaii Map">
<!-- SAMOA TIME -->
<div class="clock-box dk-blue">
<div class="title">Samoa Standard Time</div>
<div class="sub-title">SST (UTC-11)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=11></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- CHAMORRO TIME -->
<div class="clock-box dk-blue">
<div class="title">Chamorro Standard Time</div>
<div class="sub-title">CHST (UTC+10)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=-10></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<!-- PUERTO RICO LT COL-->
<div id="pr-lt" class="pad-2 margTop15">
<div class="clock-box dk-blue">
<div class="title">Atlantic Standard Time</div>
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
<div class="sub-title">AST (UTC-4)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=4></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div> </div>
</div>
</div>
</div>
<!-- MAIN COLUMN -->
<div id="col-main">
<div class="pad-2">
<div style="height: 0px;">&nbsp;</div>
<!-- ROW FOR MAINLAND US CLOCK AREA -->
<div class="main-top">
<!-- PACIFIC TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box orange dst-clock">
<div class="title">Pacific <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">P<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">8</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=8 />SYNCHRONIZING</time></div></div>
</div>
</div>
</div>
</div>
<!-- MOUNTAIN TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box green dst-clock">
<div class="title">Mountain <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">M<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">7</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=7>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<!-- CENTRAL TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box yellow dst-clock">
<div class="title">Central <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">C<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">6</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=6>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<!-- EASTERN TIME -->
<div class="col-25">
<div class="pad-2">
<div class="clock-box red dst-clock">
<div class="title">Eastern <span class="DSTterm">Standard</span> Time</div>
<div class="sub-title">E<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">5</span>)</div>
<div class="time-display">
<div class="color-area"></div>
<div class="clock time-text"><time zoneOffset=5>SYNCHRONIZING</time></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- END TOP ROW -->
<div id="mainland">
<!-- ARIZONA/MOUNTAIN STANDARD TIME -->
<div id="az-clock" class="col-25">
<div class="pad-2">
<div class="clock-box green">
<div class="title">Arizona Mountain<br>Standard Time</div>
<div class="sub-title">MST (UTC-7)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=7></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
</div>
</div>
<!-- BEGIN MAIN MAP AREA -->
<img src="img/map-elements/united-states-map.svg" class="full-img" alt="United States Time Zone Map">
</div>
</div>
<!-- RIGHT COLUMN -->
<div id="col-right">
<div class="pad-4">
<!-- 24HR CHECKBOX -->
<div class='hours-wrapper'>
<div class='am-pm'></div>
<input id='twenty-four' type='checkbox' class="css-checkbox">
<label class='css-label' for='twenty-four'>24-Hour Clock Display</label>
<div class="clear"></div>
</div>
<div id="clock-utc">
<p class="text-xs">Coordinated Universal Time (UTC)</p>
<div class="clock text-lg"><time id="timeUTC"></time></div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
<p class="sub-title ital">UTC is always displayed as a 24-hour clock.</p>
<!-- MAIN CLOCK AREA -->
<div id="main-time-area">
<p>Your Device's Clock <span id="myTimeTitle">UTC-0</span> <br>
<div id='myDate'></div>
<canvas id="analog-clock" width=200 height=200></canvas>
<br>
<span id="myTime"></span><br><br>
Your clock is off by: <br><span id="realTimeDif"></span> s</p>
</div>
<!-- PUERTO RICO RT COL-->
<div id="pr-rt" class="pad-2 margTop15">
<div class="clock-box dk-blue">
<div class="title">Atlantic Standard Time</div>
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
<div class="sub-title">AST (UTC-4)</div>
<div class="time-display">
<div class="color-area no-saving"></div>
<div class="clock time-text"><time zoneOffset=4></time></div>
</div>
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
</div>
</div>
<div id="rightColBot">
<a href="/simple/">Simple View</a>
<a href="/decimal/">Decimal Time</a>
<a href="/seth/">Seth Date</a>
<a href="/calendar/">Seth Calendar</a>
<a href="/api/time">Time API</a>
<div class="imgSmText">
<img src="img/stripes.svg" class="striped-box" alt="Hashed image for Daylight Saving Time not observed"> = DAYLIGHT SAVING TIME NOT OBSERVED
<p>Clocks are corrected for network delay</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<footer class="nist-footer">
<div class="nist-footer__inner">
<div class="nist-footer__menu" role="navigation">
<ul>
<li class="nist-footer__menu-item"><a href="/timegov/">Map View</a></li>
<li class="nist-footer__menu-item"><a href="/simple/">Simple View</a></li>
<li class="nist-footer__menu-item"><a href="/decimal/">Decimal Time</a></li>
<li class="nist-footer__menu-item"><a href="/seth/">Seth Date</a></li>
<li class="nist-footer__menu-item"><a href="/calendar/">Seth Calendar</a></li>
<li class="nist-footer__menu-item"><a href="/api/time">JSON Time API</a></li>
</ul>
</div>
</div>
<div class="nist-footer__logo">
<center><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" alt="SethPC logo" /><p>SethPC Official Time</p></center>
</div>
</footer>
<div class='time-zone-container' style='display:none'>
<div class='dropdown-container'>
<select id='dst-time-zone'>
</select>
<select id='no-dst-time-zone'>
</select>
</div>
</div>
<div id="responseTime"></div>
<script src="scripts/jquery-3.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/analogClock.js"></script>
<script type="text/javascript" src="scripts/application.js"></script>
<script type="text/javascript" src="scripts/zzz__bd08fcbbc8bd600a5f9e994be2de69f7cb26b9f4.js"></script>
</body>
</html>
@@ -0,0 +1,126 @@
///////////////////////////////////////////////////////////////////////////
////////////////////// ANALOG CLOCK FUNCTIONS ///////////////////////////
///////////////// Clock code used from W3Schools.com ////////////////////
//////// Refer to their site about applicable use of the code ///////////
///////////////////////////////////////////////////////////////////////////
var canvas = document.getElementById("analog-clock");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
// add 0 to single digit time min, sec
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var deviceClock = new Date();
var hour = deviceClock.getHours();
var minute = deviceClock.getMinutes();
var second = deviceClock.getSeconds();
var ampm = hour >= 12 ? 'P.M.' : 'A.M.';
hour = hour % 12;
hour = hour ? hour : 12; // the hour '0' should be '12'
//minute = minute < 10 ? '0'+minute : minute;
// CHECKTIME FUNC ADDS LEADING '0' if <10
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);
//digital time display
var myDigTime = hour + ":" + minute +":" + second;
document.getElementById('myTime').innerHTML = myDigTime + ' ' + ampm;
var dd = deviceClock.getDate();
var mm = deviceClock.getMonth();
mm++; //Increment because Jan is month 0
dd = checkTime(dd);
mm = checkTime(mm);
var yyyy = deviceClock.getFullYear();
var todaysDate = mm + '/' + dd + '/' + yyyy;
document.getElementById("myDate").innerHTML = "Today: " + todaysDate;
// OFFSET
var utcOffset = deviceClock.getTimezoneOffset()/60;
if (utcOffset > 0) {
utcOffset = "(UTC-" + utcOffset + ")";
} else {
utcOffset = "(UTC+" + Math.abs(utcOffset) + ")";
};
document.getElementById("myTimeTitle").innerHTML = utcOffset;
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
@@ -0,0 +1,67 @@
// ONLOAD OPERATIONS FOR THE SITE
window.onload = function() {
/* PARSE THE URL FOR 12/24 VARIABLE*/
var getT = location.search;
var tArr = getT.split("=");
var t = tArr[1];
// CREATE A VAR FOR THE CHECKBOX
var twentyFour = document.getElementById("twenty-four");
// CHECK VALUE OF 12/24 URL VAR "t" AND SET CHECKBOX ACCORDINGLY
if (t === "24") {
twentyFour.checked = true;
} else {
// DEFAULT TO 12HR DISPLAY
twentyFour.checked = false;
}
var noMoreAlerts = false;
// NOTIFICATION BOX FOR BOOKMARKING 24-HOUR SETTINGS PAGE
var twentyFour = document.getElementById("twenty-four");
twentyFour.addEventListener("click", function(event) {
var hourLabelDiv = document.getElementsByClassName("am-pm")[0];
var url = window.location.toString();
if(timeDotGov.data.twentyFour()) {
window.history.replaceState(url, "", "/timegov/?t=24");
if (!noMoreAlerts) {
alert("Bookmarking this page will save your preference for 24-hour time display.");
}
noMoreAlerts = true;
} else {
window.history.replaceState(url, "", "/timegov/");
}
timeDotGov.clockController.handleonrefresh(new Date());
});
//? timeZoneChange = function(event) {
//? timeDotGov.clockController.getnewOffset(event.target.value);
//? }
// LOAD DST DATES AND LEAP DATE
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "/api/timegov/auxdata.xml", false); // false for synchronous request
xmlHttp.send(null);
timeDotGov.auxdata = xmlHttp.responseText;
timeDotGov.clockController.auxdata();
timeDotGov.clockController.checkservertime();
document.getElementById('responseTime').innerHTML = timeDotGov.data.zoneOffset;
// SET REFRESH RATE TO CHECK FOR TOP OF NEW SECOND, SO THE DISPLAY DOES NOT HAVE TO BE REFRESHED MORE THAN NECESSARY
setInterval(function() {
if(timeDotGov.data.currentTime) {
timeDotGov.clockController.runningclocks();
}
}, 20); // 20 milliseconds
// FUNCTION REFRESHES PAGE EVERY 10 MIN
setInterval(function() {
location.reload();
}, 600000);
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,370 @@
timeDotGov = {};
timeDotGov.clock = {};
timeDotGov.clockController = {};
timeDotGov.clockController.dsClock = {}
timeDotGov.data = {
"then": null,
"serverTime": null,
"responseTime": null,
"RThalf": null,
"realTimeDif": null,
"requestTime": null,
"leapsecond": null,
"dststart": null,
"dstend": null,
"currYear": null,
"dstDates": null,
"leapDate": null,
"clockinstances": [],
"leapFlag": null,
"leapsec60": null,
"myhour0": "0",
"myhour1": "0",
"mysec0": "0",
"mysec1": "0",
"currentTime": null,
"twentyFour": function() {
twentyFour = document.getElementById("twenty-four");
return twentyFour.checked;
}
}
var offsetCheck = true;
var daylightTitles = false;
// CREATE ARRAY THAT WILL STORE WHICH CLOCK NUMS HAVE BEEN UPDATED
var dstClocksUpdated = [];
timeDotGov.clockController.getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
timeDotGov.clockController.getleapdate = function() {
var leap = new Date();
var temp1 = timeDotGov.data.leapdate.split(" ");
var leapdateYear = temp1[0];
var leapdateMonth = temp1[1];
leapdateMonth = leapdateMonth - 1; // month convention = 0-11 (Jan = 0)
var leapdateDay = temp1[2];
leap.setUTCFullYear(leapdateYear, leapdateMonth, leapdateDay);
leap.setUTCHours(0, 0, 0, 0);
timeDotGov.data.leapsecond = leap.getTime();
}
// GET TIME FROM SERVER
timeDotGov.clockController.dsClock.doRequest = function() {
d = new Date();
var xmlHttp = new XMLHttpRequest();
////////////////////////////////////////////////////////////////////////////////////
////// USE OF THIS .CGI BY OUTSIDE SITES OR APPLICATIONS IS STRICTLY PROHIBITED ////
// OR USING THE TIME FROM THIS SITE IN ANY WAY FOR OTHER SITES IS ALSO PROHIBITED //
///////////////////////////////////////////////////////////////////////////////////
xmlHttp.open("GET", "/zzz__2fbc6c3300df7e4483acd44c5044098a9fcc61d6.cgi?disablecache=" + d.getTime(), false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
// GET t1, t2, t3, t4 in doRequest AND CALCULATE DELAYS IN doData
timeDotGov.clockController.checkservertime = function() {
var o = new Object();
var d = new Date();
var currentTimeObj = new Date();
timeDotGov.data.requestTime = currentTimeObj.getTime();
timeDotGov.data.currentTime = timeDotGov.clockController.dsClock.doRequest(); // GET NIST TIME FROM SERVER
timeDotGov.clockController.doData();
}
// PARSE DATA FROM AUXDATA.XML
timeDotGov.clockController.doAuxData = function() {
parser = new DOMParser();
xmlDoc = parser.parseFromString(timeDotGov.auxdata, "text/xml");
timeDotGov.data.curryear = xmlDoc.getElementsByTagName("currYear")[0].childNodes[0].nodeValue;
timeDotGov.data.dstdates = xmlDoc.getElementsByTagName("DstDates")[0].childNodes[0].nodeValue;
timeDotGov.data.leapdate = xmlDoc.getElementsByTagName("LeapDate")[0].childNodes[0].nodeValue;
}
timeDotGov.clockController.getDSTdates = function() {
var dstStartDate = new Date();
var dstEndDate = new Date();
var temp=timeDotGov.data.dstdates.split(" "); // makes an array of the string elements
var startmonth = temp[0];
startmonth = startmonth - 1; // to follow js convention of month = 0-11 (Jan = 0)
var startday = temp[1];
var endmonth = temp[2];
endmonth = endmonth - 1;
var endday = temp[3];
dstStartDate.setUTCFullYear(timeDotGov.data.curryear, startmonth, startday);
dstStartDate.setUTCHours(2, 0, 0, 0);
dstEndDate.setUTCFullYear(timeDotGov.data.curryear, endmonth, endday);
dstEndDate.setUTCHours(1, 0, 0, 0);
timeDotGov.data.dstStart = dstStartDate.getTime();
timeDotGov.data.dstEnd = dstEndDate.getTime();
}
timeDotGov.clockController.auxdata = function() {
this.doAuxData();
this.getDSTdates();
this.getleapdate();
}
timeDotGov.clockController.doData = function() {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(timeDotGov.data.currentTime, "text/xml");
var t2 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time2");
var t3 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time3");
var serverDelay = Math.round((t3 - t2) / 1000); // server delay in milliseconds
timeDotGov.data.serverTime = Math.round(t3/1000); // Server time in milliseconds
var currentTimeObj2 = new Date();
timeDotGov.data.responseTime = currentTimeObj2.getTime(); // t4
timeDotGov.data.RThalf = ((timeDotGov.data.responseTime - timeDotGov.data.requestTime) - serverDelay) / 2; // (t4 - t1) - (t3 -t2) NTP EQ
timeDotGov.data.realTimeDif = timeDotGov.data.serverTime - timeDotGov.data.responseTime; // t3-t4 used for correction to local clock for official time
////////////////////////////////////////////////////////////
// USE OFFSET CHECK VAR TO ONLY CHECK CLIENT CLOCK ONCE ///
////////////////////////////////////////////////////////////
if (offsetCheck) {
// ROUND TO MILLISECONDS - USE (* -1) to invert timediff pos/neg display value
var diff = (timeDotGov.data.realTimeDif/1000) * -1;
var diffDisplay = diff.toFixed(3);
if (diffDisplay > 0 ) {
diffDisplay = "+" + diffDisplay;
}
document.getElementById("realTimeDif").innerHTML = diffDisplay;
offsetCheck = false;
}
timeDotGov.clockController.runningclocks();
timeDotGov.data.leapFlag = "false";
} // END OF doData FUNCTION
// REFRESHES CLOCKS AT THE TOP OF EACH *ACTUAL* SECOND
timeDotGov.clockController.runningclocks = function() {
var deviceClock = new Date();
var fractionalZone =(Math.abs((deviceClock.getTimezoneOffset()/60))) % 1; // IF CLIENT IS IN A ZONE WITH A FRACTIONAL HOUR, MAKE ADJUSTMENT (MODULO 1 TO GET THE FRACTIONAL HOUR)
if (fractionalZone != 0) {
fractionalZone = (1 - fractionalZone); // SUBTRACT FROM 1 TO GET VALID CORRECTION FOR 30 AND 45 MIN ZONES
}
var fractionalZoneMilli = fractionalZone * 3600000; // CONVERT PARTIAL HOUR TO MILLISECONDS, TO BE SUBTRACTED FROM ADJUSTED TIME
var s = new Date(); // convert PC time and delay back to seconds (this is UTC)
s.setTime(s.getTime() + timeDotGov.data.realTimeDif + timeDotGov.data.RThalf - fractionalZoneMilli); // CORRECT FOR PC CLOCK ERROR, HALF NETWORK DELAY AND CLIENT IN PARTIAL TIME ZONE
var sec = s.getSeconds();
if (sec != timeDotGov.data.previousSec) { // call handleonrefresh as soon as you see a new second
timeDotGov.data.previousSec = sec;
timeDotGov.clockController.handleonrefresh(s);
}
}
// CHECK IF USER CHANGED CLOCK or IF NEW DST STATE or LEAP SECOND, THEN REFRESH ALL CLOCKS
timeDotGov.clockController.handleonrefresh = function(s) {
//var mins = s.getMinutes();
var now = s.getTime(); // convert time to ms since epoch (UTC)
//if (0 <= mins < 30) {
// now = now + fractionalZoneMilli;
//} else {
// now = now - fractionalZoneMilli;
//}
if (timeDotGov.data.then == null) {
timeDotGov.data.then = now; // if it's the first round, don't let it fail
}
var DidUserChangeClock = Math.abs(now - timeDotGov.data.then);
if (DidUserChangeClock >= 2000) { // if pc clock changed then reset (|now-then| should only be 1 s)
location.reload();
timeDotGov.data.then = now;
} else {
timeDotGov.data.then = now;
}
if (timeDotGov.data.leapsecond / 1000 == Math.floor(now / 1000)) {
timeDotGov.data.leapFlag = "true"
}
var clocks = document.getElementsByClassName("clock");
var clockNum; // SET TO VALUE OF 'i' IN THE FOLLOWING LOOP TO REPRESENT EACH CLOCK INSTANCE
// SET ALL OF THE CLOCKS BY CALLING setCurrentTime FOR EACH CLOCK INSTANCE
for(var i =0; i < clocks.length; i++ ){
var clock = clocks[i].getElementsByTagName("time")[0];
var zoneOffset = clocks[i].getElementsByTagName("time")[0].getAttribute("zoneOffset") || 0;
// GIVE VAR CLOCKNUM VALUE OF i
clockNum = i;
clock.innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, timeDotGov.data.twentyFour(), timeDotGov.data.dstStart, timeDotGov.data.dstEnd, zoneOffset, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, clockNum);
document.getElementById('timeUTC').innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, true, timeDotGov.data.dstStart, timeDotGov.data.dstEnd, 0, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, 999); // LAST VAR IS CLOCKNUM, PASSING AS '999' TO AVOID DUPLICATE 'i' VARIABLE VALUE SEND TO SETCURRENTTIME FUNCTION
}
} // END OF handleonrefresh FUNCTION
// CREATES CLOCK DIGITS AND DST/ST LABELS FOR EACH CLOCK INSTANCE
timeDotGov.clock.setCurrentTime = function(clock, now, twentyFour, dstStart, dstEnd, zoneOffset, leapFlag, leapsec60, RThalf, clockNum) {
var displayTime = new Date();
now = (now - (zoneOffset * 3600000));
if (leapFlag == "true"){
now = now - 1000; // if leap has occurred, show (seconds - 1) until next sync
var leapsec60 = "true"; // var to show a 60 instead of 59
}
displayTime.setTime(now);
var year = displayTime.getUTCFullYear();
var hourNum = displayTime.getUTCHours();
var minNum = displayTime.getMinutes();
var secNum = displayTime.getSeconds();
// CREATE ARRAY OF THE CLOCK NUMS WHO FOLLOW DST
// ALSO CREATE ARRAY OF DST LABEL CLASSES ////////////////////////
var DSTclocksArray = [ 0, 1, 6, 7, 8, 9 ]; // THESE ARE THE clockNums FOR THE ZONES THAT FOLLOW DST
var dstLabels = document.getElementsByClassName("DSTterm"); // CREATE ARRAY FOR DST LABELS
var dstLetters = document.getElementsByClassName("DSTletter"); // CREATE ARRAY FOR DST ABBREVIATION
var dstNums = document.getElementsByClassName("DSTnum"); // CREATE ARRAY FOR DST OFFSET NUM
if ( now >= dstStart && now <= dstEnd ) { // CHECK IF THIS SECOND IS DST OR NOT
// CHECK IF CLOCK NUM IS IN DST ARRAY, IF SO, ADD THE DST HOUR AND LABELS
// if ( DSTclocksArray.includes(clockNum) ) {
if ( DSTclocksArray.indexOf(clockNum) > -1 ) { // indexOf fixes a chance in ie
hourNum = hourNum + 1;
// AT END OF FUNC ADD/PUSH CLOCKNUM TO dstClocksUpdated ARRAY, IF CLOCKNUM IS IN THERE, DONT UPDATE AGAIN
// if ( !dstClocksUpdated.includes( clockNum ) ) {
if ( dstClocksUpdated.indexOf( clockNum ) == -1 ) { // indexOf fixes a chance in ie
dstLabels[clockNum].innerHTML = "DAYLIGHT";
dstLetters[clockNum].innerHTML = "D";
var standardNum = Number(dstNums[clockNum].innerHTML);
dstNums[clockNum].innerHTML = standardNum - 1;
dstClocksUpdated.push(clockNum); // ADD CLOCK NUM TO ARRAY OF CLOCKS UPDATED
}
}
}
// IF DST OR INCREMENTED HOUR GOES INTO NEXT DAY, RESET TO HOUR ZERO AND ADD A DAY
if (hourNum > 23) {
hourNum = 0;
now = (now + 3600000) // advance now by one hour
displayTime.setTime(now); // reset displaytime so day/date/month are correct with new day
}
// CHECK FOR AND IMPLEMENT LEAP SECOND
if (leapFlag == "true") {
if (leapsec60 == "true") {
if (minNum == "59") {
if (secNum == "59") { // if leapsec, and 59:59 then show 60 and reset
secNum = "60";
leapsec60 = "false";
}
}
}
}
var hourLabel = "";
// 12-HOUR OR 24-HOUR DISPLAY
// BOX NOT CHECKED SO 12-HOUR DISPLAY
if (!(twentyFour)) {
if (hourNum > 11) {
hourNum -= 12;
am_pm = "P.M.";
} else {
am_pm = "A.M.";
}
} else {
am_pm = "";
}
var newVal;
// SET HOURS
if(hourNum > 9) {
newVal = Number(String(hourNum).charAt(0));
if(timeDotGov.data.myhour0 != newVal) {
timeDotGov.data.myhour0 = newVal;
}
}
else if(Number(timeDotGov.data.myhour0) != 0) {
timeDotGov.data.myhour0 = "0";
}
if(Number(hourNum) > 9){
newVal=Number(String(hourNum).charAt(1));
if(timeDotGov.data.myhour1 != newVal) {
timeDotGov.data.myhour1 = newVal;
}
} else if (Number(timeDotGov.data.myhour1) != Number(hourNum)) {
timeDotGov.data.myhour1 = Number(hourNum);
}
if ((hourNum < 1) && (!(twentyFour))) { // if not 24hour time force the 12 so it's not 00
timeDotGov.data.myhour0 = 1;
timeDotGov.data.myhour1 = 2;
}
// SET MINUTES
if(minNum > 9) {
newVal = Number(String(minNum).charAt(0));
if (timeDotGov.data.mymin0 != newVal) {
timeDotGov.data.mymin0 = newVal;
}
} else if(Number(timeDotGov.data.mymin0) != 0) {
timeDotGov.data.mymin0 = 0;
}
if(Number(minNum) > 9) {
newVal = Number(String(minNum).charAt(1));
if(timeDotGov.data.mymin1 != newVal) {
timeDotGov.data.mymin1 = newVal;
}
}
else if(Number(timeDotGov.data.mymin1) != Number(minNum)) {
timeDotGov.data.mymin1 = Number(minNum);
}
// SET SECONDS
if(secNum > 9) {
newVal = Number(String(secNum).charAt(0));
if(timeDotGov.data.mysec0 != newVal) {
timeDotGov.data.mysec0 = newVal;
}
}
else if(Number(timeDotGov.data.mysec0) != 0) {
timeDotGov.data.mysec0 = 0;
}
if(Number(secNum) > 9) {
newVal=Number(String(secNum).charAt(1));
if(timeDotGov.data.mysec1 != newVal) {
timeDotGov.data.mysec1 = newVal;
}
}
else if(Number(timeDotGov.data.mysec1) != Number(secNum)) {
timeDotGov.data.mysec1 = Number(secNum);
}
// CREATE CLOCK DIGITS STRING TO DISPLAY
var clockdigits = (timeDotGov.data.myhour0 + "" + timeDotGov.data.myhour1 + ":" + timeDotGov.data.mymin0 + timeDotGov.data.mymin1 + ":" + timeDotGov.data.mysec0 + timeDotGov.data.mysec1);
clock = clockdigits + " " + am_pm;
return clock;
} // END OF setCurrentTime FUNCTION