php/time1.php

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4 <meta charset="utf-8">
   5 <title></title>
   6 <meta name="description" content="">
   7 <meta name="author" content="">
   8 <style type="text/css">
   9 .form-container {
  10    border: 1px solid #f2e3d2;
  11    background: #c9b7a2;
  12    background: -webkit-gradient(linear, left top, left bottom, from(#f2e3d2), to(#c9b7a2));
  13    background: -webkit-linear-gradient(top, #f2e3d2, #c9b7a2);
  14    background: -moz-linear-gradient(top, #f2e3d2, #c9b7a2);
  15    background: -ms-linear-gradient(top, #f2e3d2, #c9b7a2);
  16    background: -o-linear-gradient(top, #f2e3d2, #c9b7a2);
  17    background-image: -ms-linear-gradient(top, #f2e3d2 0%, #c9b7a2 100%);
  18    -webkit-border-radius: 8px;
  19    -moz-border-radius: 8px;
  20    border-radius: 8px;
  21    -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  22    -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  23    box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0;
  24    font-family: 'Helvetica Neue',Helvetica,sans-serif;
  25    text-decoration: none;
  26    vertical-align: middle;
  27    min-width:500px;
  28    padding:20px;
  29    width:500px;
  30    margin: 0 auto;
  31    }
  32 .form-field {
  33    border: 1px solid #c9b7a2;
  34    background: #e4d5c3;
  35    -webkit-border-radius: 4px;
  36    -moz-border-radius: 4px;
  37    border-radius: 4px;
  38    color: #c9b7a2;
  39    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  40    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  41    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  42    padding:8px;
  43    margin-bottom:20px;
  44    width:280px;
  45    }
  46 .form-field:focus {
  47    background: #fff;
  48    color: #725129;
  49    }
  50 .form-container h2 {
  51    text-shadow: #fdf2e4 0 1px 0;
  52    font-size:24px;
  53    margin: 0 0 10px 0;
  54    font-weight:bold;
  55    text-align:center;
  56     }
  57 .form-container h3 {
  58    text-shadow: #fdf2e4 0 1px 0;
  59    font-size:18px;
  60    margin: 0 0 10px 0;
  61    text-align:center;
  62     }
  63 .form-title {
  64    margin-bottom:10px;
  65    color: #725129;
  66    text-shadow: #fdf2e4 0 1px 0;
  67    }
  68 .submit-container {
  69    margin:8px 0;
  70    text-align:right;
  71    }
  72 .submit-button {
  73    border: 1px solid #447314;
  74    background: #6aa436;
  75    background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
  76    background: -webkit-linear-gradient(top, #8dc059, #6aa436);
  77    background: -moz-linear-gradient(top, #8dc059, #6aa436);
  78    background: -ms-linear-gradient(top, #8dc059, #6aa436);
  79    background: -o-linear-gradient(top, #8dc059, #6aa436);
  80    background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
  81    -webkit-border-radius: 4px;
  82    -moz-border-radius: 4px;
  83    border-radius: 4px;
  84    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  85    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  86    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
  87    text-shadow: #addc7e 0 1px 0;
  88    color: #31540c;
  89    font-family: helvetica, serif;
  90    padding: 8.5px 18px;
  91    font-size: 14px;
  92    text-decoration: none;
  93    vertical-align: middle;
  94    }
  95 .submit-button:hover {
  96    border: 1px solid #447314;
  97    text-shadow: #31540c 0 1px 0;
  98    background: #6aa436;
  99    background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436));
 100    background: -webkit-linear-gradient(top, #8dc059, #6aa436);
 101    background: -moz-linear-gradient(top, #8dc059, #6aa436);
 102    background: -ms-linear-gradient(top, #8dc059, #6aa436);
 103    background: -o-linear-gradient(top, #8dc059, #6aa436);
 104    background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%);
 105    color: #fff;
 106    }
 107 .submit-button:active {
 108    text-shadow: #31540c 0 1px 0;
 109    border: 1px solid #447314;
 110    background: #8dc059;
 111    background: -webkit-gradient(linear, left top, left bottom, from(#6aa436), to(#6aa436));
 112    background: -webkit-linear-gradient(top, #6aa436, #8dc059);
 113    background: -moz-linear-gradient(top, #6aa436, #8dc059);
 114    background: -ms-linear-gradient(top, #6aa436, #8dc059);
 115    background: -o-linear-gradient(top, #6aa436, #8dc059);
 116    background-image: -ms-linear-gradient(top, #6aa436 0%, #8dc059 100%);
 117    color: #fff;
 118    }
 119
 120 html {
 121     height: 100%;
 122 }
 123 body {
 124     height: 100%;
 125     margin: 0;
 126     background-repeat: no-repeat;
 127     background-attachment: fixed;
 128     background: rgb(167,199,220); /* Old browsers */
 129     background: -moz-radial-gradient(center, ellipse cover,  rgba(167,199,220,1) 0%, rgba(133,178,211,1) 100%); /* FF3.6-15 */
 130     background: -webkit-radial-gradient(center, ellipse cover,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* Chrome10-25,Safari5.1-6 */
 131     background: radial-gradient(ellipse at center,  rgba(167,199,220,1) 0%,rgba(133,178,211,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 132     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c7dc', endColorstr='#85b2d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 133 }
 134
 135 </style>
 136 <script type="text/javascript">
 137 get_time();
 138 var utcSeconds = 0;
 139 var date = new Date(0);
 140 date.setUTCSeconds(utcSeconds);
 141 var ntpcounter=0;
 142
 143 function loadpage(page_request){
 144   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
 145     utcSeconds = parseInt(page_request.responseText,10);
 146     var tmpdate = new Date(0);
 147     tmpdate.setUTCSeconds(utcSeconds);
 148     date = tmpdate;
 149     //document.getElementById('times').innerHTML=utcSeconds;
 150   }
 151 }
 152
 153 function get_time() {
 154   var page_request = false
 155   if (window.XMLHttpRequest) // if Mozilla, Safari etc
 156     page_request = new XMLHttpRequest()
 157   else if (window.ActiveXObject){ // if IE
 158     try {
 159       page_request = new ActiveXObject("Msxml2.XMLHTTP")
 160     }
 161     catch (e){
 162       try{
 163         page_request = new ActiveXObject("Microsoft.XMLHTTP")
 164       }
 165     catch (e){}
 166     }
 167   }
 168   else
 169     return false
 170   page_request.onreadystatechange=function(){
 171     loadpage(page_request);
 172   }
 173   page_request.open('GET', '/time-ajax.php', true)
 174   page_request.send(null)
 175 }
 176
 177 function update_time() {
 178   ntpcounter=ntpcounter+1;
 179   date.setSeconds(date.getSeconds() + 1);
 180   document.getElementById("updatetime").innerHTML = (date);
 181   if (ntpcounter>3600) {
 182     ntpcounter=0;
 183     get_time();
 184   }
 185   setTimeout("update_time()", 1000);
 186 }
 187
 188 </script>
 189 </head>
 190 <body onload="update_time();">
 191 <br><br>
 192 <form class="form-container">
 193 <div class="form-title"><h2>Atomic Clock Status</h2></div>
 194 <h3><div class="form-title" id="updatetime"></div></h3>
 195 </div>
 196 </form>
 197
 198 </body>
 199 </html>