projects / kiosk.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Bringing git version into sync with what's really running.
[kiosk.git] / pages / clock_10_none.html
diff --git a/pages/clock_10_none.html b/pages/clock_10_none.html
index 737ba6b49da2896c1f16b18467f45296762aae0d..cac7de52f2554488ac3675e537dc60c91d402a7f 100755 (executable)
--- a/pages/clock_10_none.html
+++ b/pages/clock_10_none.html
@@ -1,11 +1,9 @@
-<head>
 <!-- Thank you to Toby Pitman for posting this really cool article (and
      javascript / css / image) explaining how to make a running analog
      clock webpage.  See: http://css-tricks.com/css3-clock for more info. -->
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <title>Analog Clock</title>
-  <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
-  <style type="text/css">
+<head>
+<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
+<style type="text/css">
     * {
       margin: 0px;
       padding: 0px;
@@ -36,15 +34,26 @@
       line-height:0.5;
     }
     #clock {
-      position: relative;
+      position: absolute;
+      top: 100px;
+      left: 120px;
       width: 600px;
       height: 600px;
       margin: 20px auto 0 auto;
+      float: none;
+      // background-image: url("clockimg/smallface.gif");
       list-style: none;
     }
     #analog {
-      position: relative;
+      position: absolute;
+      top: 200px;
+      left: 750px;
       width: 100%;
+      float: none;
+    }
+    #bottom {
+      position: absolute;
+      top: 750px;
     }
     #txt {
       position: absolute;
@@ -77,8 +86,8 @@
     .digit {
       display: block;
     }
-  </style>
-  <script type="text/javascript">
+</style>
+<script type="text/javascript">
     $(document).ready(
       function() {
         $.fn.preload = function() {
@@ -147,7 +156,7 @@
             var s2 = seconds % 10;
             $("#s1").css({"content" : "url(" + digit_images[s1] + ")"});
             $("#s2").css({"content" : "url(" + digit_images[s2] + ")"});
-          }, 75);
+          }, 125);
 
         // Rotate minute hand and set minutes.
         function updateMinutes() {
@@ -164,7 +173,7 @@
           $("#m2").css({"content" : "url(" + digit_images[m2] + ")"});
         }
         updateMinutes();
-        setInterval(function(){updateMinutes();}, 1000);
+        setInterval(function(){updateMinutes();}, 3000);
 
         // Rotate hour hand and set hours.
         function updateHours() {
@@ -187,7 +196,7 @@
           $("#h2").css({"content" : "url(" + digit_images[h2] + ")"});
         }
         updateHours();
-        setInterval(function(){updateHours();}, 1000);
+        setInterval(function(){updateHours();}, 10000);
 
         function updateDate() {
           var date = new Date();
@@ -204,58 +213,48 @@
           $("#mm").css({"content" : "url(" + month_images[month] + ")"});
         }
         updateDate();
-        setInterval(function(){updateDate();}, 1000);
+        setInterval(function(){updateDate();}, 10000);
       });
   </script>
 </head>
 <body>
-  <table border=0 width=100%>
-    <tr>
-      <td width=50%>
-        <ul id="clock">
-          <div id="txt">
-            <table style="background-color:#999999" border>
-              <td><img src="0.png" height=26 id="d1" class="digit"></td>
-              <td><img src="1.png" height=26 id="d2" class="digit"></td>
-            </table>
-          </div>
-          <li id="sec"></li>
-          <li id="hour"></li>
-          <li id="min"></li>
-        </ul>
-      </td>
-      <td STYLE="vertical-align:middle">
-          <li><div id="analog">
-            <center>
-              <table style="background-color:#999999;height:80px;" border>
-                <tr>
-                <td><img src="clockimg/2.png" id="h1" class="digit"></td>
-                <td><img src="clockimg/3.png" id="h2" class="digit"></td>
-                <td style="border: none">&nbsp;&nbsp;</td>
-                <td><img src="clockimg/4.png" id="m1" class="digit"></td>
-                <td><img src="clockimg/5.png" id="m2" class="digit"></td>
-                <td style="border: none">&nbsp;&nbsp;</td>
-                <td><img src="clockimg/6.png" id="s1" class="digit"></td>
-                <td><img src="clockimg/7.png" id="s2" class="digit"></td>
-                </tr>
-              </table>
-              <br>
-              <table style="background-color:#999999;height:80px;" border>
-                <tr>
-                <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
-                <td style="border: none">&nbsp;&nbsp;</td>
-                <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
-                <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
-                <td style="border: none">&nbsp;&nbsp;</td>
-                <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
-                </tr>
-              </table>
-            </center>
-            </div>
-          </li>
-        </ul>
-      </td>
-    </tr>
-  </table>
-</body>
-</html>
+  <div style="height:775px; float:none">
+  <ul id="clock">
+     <div id="txt">
+       <table style="background-color:#999999" border>
+         <td><img src="0.png" height=26 id="d1" class="digit"></td>
+         <td><img src="1.png" height=26 id="d2" class="digit"></td>
+       </table>
+     </div>
+     <li id="sec"></li>
+     <li id="hour"></li>
+     <li id="min"></li>
+     <li><div id="analog">
+         <center>
+         <table style="background-color:#999999;height:80px;" border>
+           <tr>
+           <td><img src="clockimg/2.png" id="h1" class="digit"></td>
+           <td><img src="clockimg/3.png" id="h2" class="digit"></td>
+           <td style="border: none">&nbsp;&nbsp;</td>
+           <td><img src="clockimg/4.png" id="m1" class="digit"></td>
+           <td><img src="clockimg/5.png" id="m2" class="digit"></td>
+           <td style="border: none">&nbsp;&nbsp;</td>
+           <td><img src="clockimg/6.png" id="s1" class="digit"></td>
+           <td><img src="clockimg/7.png" id="s2" class="digit"></td>
+           </tr>
+         </table>
+         <br>
+         <table style="background-color:#999999;height:80px;" border>
+           <tr>
+           <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
+           <td style="border: none">&nbsp;&nbsp;</td>
+           <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
+           <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
+           <td style="border: none">&nbsp;&nbsp;</td>
+           <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
+           </tr>
+         </table>
+         </center>
+         </div></li>
+  </ul>
+  </div>
Local rpi-based kiosk driver program.