diff --git a/archive.html b/archive.html
index 1731046f9ed63209256c06542d61aedc94a448c5..fd620400c307bf7e05a7b81fa7973a1b7fb69177 100755
--- a/archive.html
+++ b/archive.html
@@ -1,148 +1,141 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<!DOCTYPE html>
<!-- This is the new Javascript based webcams page by [PXY],
who was sick of the page reloads. Extra crack added by
[TRS], who wanted back and forward to work. -->
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!-- Made HTML5/CSS3-compliant by [MPT] -->
+<html lang="en">
<head>
<title>UCC Webcams @ Loading...</title>
- <link rel="stylesheet" href="https://planet.ucc.asn.au/planet.css" type="text/css" media="screen" />
- <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen" />
- <script type="text/javascript" src="archive.js"></script>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!--<link rel="stylesheet" href="https://planet.ucc.asn.au/planet.css" type="text/css" media="screen" />
+ <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen" />-->
+ <link rel="stylesheet" href="webcam.css" type="text/css" media="screen">
+ <script src="archive.js"></script>
</head>
<body onload="windowOnload()">
-<div class="header">
-<img alt="Planet UCC" id="pucc_logo"
- src="//www.ucc.asn.au/images/ucc_logo.gif" />
-<div id="globalnav-wrapper">
- <ul id="portal-globalnav">
-
- <li id="portaltab-index_html" class="plain">
- <a href="https://www.ucc.asn.au">Home</a>
- </li>
- <li id="portaltab-aboutucc" class="plain">
- <a href="https://www.ucc.asn.au/aboutucc/">About Us</a>
- </li>
-
- <li id="portaltab-infobase" class="plain">
-
- <a href="https://www.ucc.asn.au/infobase/">Information</a>
- </li>
- <li id="portaltab-services" class="plain">
- <a href="https://www.ucc.asn.au/services/">Services</a>
- </li>
- <li id="portaltab-events" class="plain">
- <a href="https://www.ucc.asn.au/infobase/events/">Events</a>
-
- </li>
- <li id="portaltab-planetucc" class="plain">
- <a href="https://planet.ucc.asn.au/">Planet UCC</a>
- </li>
- <li id="portaltab-planetucc" class="plain">
- <a href="https://wiki.ucc.asn.au/">Wiki</a>
- </li>
- </ul>
-</div>
-</div>
-<div class="items">
- <h1 id="header">UCC Webcams @ Loading...</h1>
- <div class="navMenu">
+ <div class="header">
+ <img alt="Planet UCC" id="pucc_logo"
+ src="https://www.ucc.asn.au/images/ucc_logo.gif">
+ <div id="globalnav-wrapper">
+ <ul id="portal-globalnav">
+ <li id="portaltab-index_html" class="plain">
+ <a href="https://www.ucc.asn.au">Home</a>
+ </li>
+ <li id="portaltab-aboutucc" class="plain">
+ <a href="https://www.ucc.asn.au/aboutucc/">About Us</a>
+ </li>
+ <li id="portaltab-infobase" class="plain">
+ <a href="https://www.ucc.asn.au/infobase/">Information</a>
+ </li>
+ <li id="portaltab-services" class="plain">
+ <a href="https://www.ucc.asn.au/services/">Services</a>
+ </li>
+ <li id="portaltab-events" class="plain">
+ <a href="https://www.ucc.asn.au/infobase/events/">Events</a>
+ </li>
+ <li id="portaltab-planetucc" class="plain">
+ <a href="https://planet.ucc.asn.au/">Planet UCC</a>
+ </li>
+ <li id="portaltab-wiki" class="plain">
+ <a href="https://wiki.ucc.asn.au/">Wiki</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="items">
+ <h1 id="header">UCC Webcams @ Loading...</h1>
+ <div class="navMenu">
<a href="index.html">Live</a>
<a href="https://webcam.ucc.asn.au/clubroom-schematic.png">Map</a>
- </div>
- <div class=camSection>
- <div class="camera" id="webcam4"><img alt="BW Webcam" /></div>
- <div class="camera" id="webcam3"><img alt="Webcam 3" /></div>
- <div class="camera" id="webcam2"><img alt="Webcam 1" /></div>
- <div class="camera" id="uvc1"><img alt="UVC 1" /></div>
- <div class="camera" id="webcam1"><img alt="Webcam 2" /></div>
- <div class="camera" id="ipcamera1"><img alt="IPCamera1" /></div>
- <div class="camera" id="ipcamera11"><img alt="IPCamera11" /></div>
- <div class="camera" id="ipcamera2"><img alt="IPCamera2" /></div>
- <div class="camera" id="ipcamera3"><img alt="IPCamera3" /></div>
- <div class="camera" id="ipcamera4"><img alt="IPCamera4" /></div>
- <div class="camera" id="ipcamera5"><img alt="IPCamera5" /></div>
- <div class="camera" id="ipcamera7"><img alt="IPCamera7" /></div>
- <div class="camera" id="ipcamera6"><img alt="IPCamera6" /></div>
- <div class="camera" id="ipcamera9"><img alt="IPCamera9" /></div>
- <div class="camera" id="ipcamera10"><img alt="IPCamera10" /></div>
- <div class="camera" id="ipcamera8"><img alt="IPCamera8" /></div>
- </div>
- <div class="nav">
- <table width="100%">
- <tr>
+ </div>
+ <div class=camSection>
+ <div class="camera" id="webcam4"><img alt="BW Webcam"></div>
+ <div class="camera" id="webcam3"><img alt="Webcam 3"></div>
+ <div class="camera" id="webcam2"><img alt="Webcam 1"></div>
+ <div class="camera" id="uvc1"><img alt="UVC 1"></div>
+ <div class="camera" id="webcam1"><img alt="Webcam 2"></div>
+ <div class="camera" id="ipcamera1"><img alt="IPCamera1"></div>
+ <div class="camera" id="ipcamera11"><img alt="IPCamera11"></div>
+ <div class="camera" id="ipcamera2"><img alt="IPCamera2"></div>
+ <div class="camera" id="ipcamera3"><img alt="IPCamera3"></div>
+ <div class="camera" id="ipcamera4"><img alt="IPCamera4"></div>
+ <div class="camera" id="ipcamera5"><img alt="IPCamera5"></div>
+ <div class="camera" id="ipcamera7"><img alt="IPCamera7"></div>
+ <div class="camera" id="ipcamera6"><img alt="IPCamera6"></div>
+ <div class="camera" id="ipcamera9"><img alt="IPCamera9"></div>
+ <div class="camera" id="ipcamera10"><img alt="IPCamera10"></div>
+ <div class="camera" id="ipcamera8"><img alt="IPCamera8"></div>
+ </div>
+ <div id="footerNav" class="nav">
+ <table>
+ <tr>
<td>
-
- « Back<br />
-<a href="javascript:setMinutes(-30)">30</a>
-<a href="javascript:setMinutes(-10)">10</a>
-<a href="javascript:setMinutes(-5)">5</a>
-<a href="javascript:setMinutes(-2)">2</a>
-<a href="javascript:setMinutes(-1)">1</a>
-minutes
-<br />
-<a href="javascript:setDays(-10)">10</a>
-<a href="javascript:setDays(-7)">7</a>
-<a href="javascript:setDays(-5)">5</a>
-<a href="javascript:setDays(-2)">2</a>
-<a href="javascript:setDays(-1)">1</a>
-days
-<a href="javascript:setHours(-6)">6</a>
-<a href="javascript:setHours(-2)">2</a>
-<a href="javascript:setHours(-1)">1</a>
-hours
-
- </td>
-<td align="middle">
- Time Index: <a id="timeindex" href="">Loading...</a><br />
- <a href="javascript:setDateNow()">Now</a>
- (<a href="index.html">Live</a>)
- </td>
-
- <td align="right">
- Forward »<br />
-
-<a href="javascript:setMinutes(1)">1</a>
-<a href="javascript:setMinutes(2)">2</a>
-<a href="javascript:setMinutes(5)">5</a>
-<a href="javascript:setMinutes(10)">10</a>
-<a href="javascript:setMinutes(30)">30</a>
-minutes
-<br />
-<a href="javascript:setHours(1)">1</a>
-<a href="javascript:setHours(2)">2</a>
-<a href="javascript:setHours(6)">6</a>
-hours
-<a href="javascript:setDays(1)">1</a>
-<a href="javascript:setDays(2)">2</a>
-<a href="javascript:setDays(5)">5</a>
-<a href="javascript:setDays(7)">7</a>
-<a href="javascript:setDays(10)">10</a>
-days
-
- </td>
- </tr>
+ « Back<br>
+ <a href="javascript:setMinutes(-30)">30</a>
+ <a href="javascript:setMinutes(-10)">10</a>
+ <a href="javascript:setMinutes(-5)">5</a>
+ <a href="javascript:setMinutes(-2)">2</a>
+ <a href="javascript:setMinutes(-1)">1</a>
+ minutes<br>
+ <a href="javascript:setHours(-6)">6</a>
+ <a href="javascript:setHours(-2)">2</a>
+ <a href="javascript:setHours(-1)">1</a>
+ hours<br>
+ <a href="javascript:setDays(-10)">10</a>
+ <a href="javascript:setDays(-7)">7</a>
+ <a href="javascript:setDays(-5)">5</a>
+ <a href="javascript:setDays(-2)">2</a>
+ <a href="javascript:setDays(-1)">1</a>
+ days
+ </td>
+ <td>
+ Time Index: <a id="timeindex" href="">Loading...</a><br>
+ <a href="javascript:setDateNow()">Now</a>
+ (<a href="index.html">Live</a>)
+ </td>
+ <td>
+ Forward »<br>
+ <a href="javascript:setMinutes(1)">1</a>
+ <a href="javascript:setMinutes(2)">2</a>
+ <a href="javascript:setMinutes(5)">5</a>
+ <a href="javascript:setMinutes(10)">10</a>
+ <a href="javascript:setMinutes(30)">30</a>
+ minutes<br>
+ <a href="javascript:setHours(1)">1</a>
+ <a href="javascript:setHours(2)">2</a>
+ <a href="javascript:setHours(6)">6</a>
+ hours<br>
+ <a href="javascript:setDays(1)">1</a>
+ <a href="javascript:setDays(2)">2</a>
+ <a href="javascript:setDays(5)">5</a>
+ <a href="javascript:setDays(7)">7</a>
+ <a href="javascript:setDays(10)">10</a>
+ days
+ </td>
+ </tr>
</table>
- <form>
- <p align="middle" style="padding:0; margin:0;">
- <span id="nav-dayname">...</span>
- <select onChange="navDate()" id="nav-day"></select>
- <select onChange="navDate()" id="nav-month"></select>
- <select onChange="navDate()" id="nav-year"></select>,
- <select onChange="navDate()" id="nav-hour"></select>:
- <select onChange="navDate()" id="nav-minute"></select>
- </p>
-
- </form></div>
-</div>
-<div class="footer">
- <p>Copyright 1993-2014, The University Computer Club Inc.
- <<a href="mailto:webmasters@ucc">webmasters@ucc</a>><br />
- Written to be <a href="http://www.w3.org/">specifications compliant</a>.
- </p>
- <p class="logos" style="text-align: center;">
+ <form>
+ <p>
+ <span id="nav-dayname">...</span>
+ <select onChange="navDate()" id="nav-day"></select>
+ <select onChange="navDate()" id="nav-month"></select>
+ <select onChange="navDate()" id="nav-year"></select>,
+ <select onChange="navDate()" id="nav-hour"></select>:
+ <select onChange="navDate()" id="nav-minute"></select>
+ </p>
+ </form>
+ </div>
+ </div>
+ <div class="footer">
+ <p>
+ Copyright 1993-2014, The University Computer Club Inc.
+ <<a href="mailto:webmasters@ucc">webmasters@ucc</a>><br>
+ Written to be <a href="http://www.w3.org/">specifications compliant</a>.
+ </p>
+ <!--<p class="logos" style="text-align: center;">
<a href="https://www.ucc.asn.au">
- <img style="padding-bottom:1ex;" src="https://www.ucc.asn.au/images/ucc-sun-logo-black.png" alt="UCC" title="University Computer Club" />
+ <img style="padding-bottom:1ex;" src="https://www.ucc.asn.au/images/ucc-sun-logo-black.png" alt="UCC" title="University Computer Club" />
</a>
<img alt="Hacking Life" title="Hacking Life" style="padding-bottom:1ex;" src="https://www.ucc.asn.au/images/glider.png" />
<a href="https://www.gu.uwa.edu.au">
@@ -151,10 +144,9 @@ days
<a href="https://www.uwa.edu.au">
<img alt="University of Western Australia" title="University of Western Australia" src="https://www.ucc.asn.au/images/uwa_crest.png" />
</a>
- </p>
-</div>
-
-<script>
+ </p>-->
+ </div>
+ <!--<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
@@ -163,6 +155,6 @@ days
ga('create', 'UA-11604699-2', 'auto');
ga('send', 'pageview');
-</script>
+ </script>-->
</body>
</html>
diff --git a/webcam.css b/webcam.css
index 7e1f3970a7183cbf63d2c4ece02510fcca4d63af..e4bb53fb5cdda3a9ead246bfbde8ab79d8bede58 100644
--- a/webcam.css
+++ b/webcam.css
@@ -80,3 +80,41 @@ h1 {
color: #999999;
text-align: center;
}
+
+/*the navigation stuff for the archives page*/
+#footerNav {
+ position: fixed;
+ z-index: 3;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #ffce7b;
+ border-top: 1px solid #ffa500;
+ padding: 0.5em;
+ padding-bottom: 1.5em;
+}
+
+#footerNav table {
+ font-size: 75%;
+ width: 100%;
+ padding: 0;
+ border-spacing: 0;
+}
+
+#footerNav table td:nth-child(2) {
+ text-align: center;
+}
+
+#footerNav table td:nth-child(3) {
+ text-align: right;
+}
+
+#footerNav form {
+ margin-bottom: 0;
+}
+
+#footerNav form p {
+ text-align: center;
+ margin: 0;
+ padding: 0;
+}