fix css
This commit is contained in:
Kameron Kenny
parent
847e2aab02
commit
a2c49fc0a4
|
|
@ -6,196 +6,59 @@
|
|||
<body>
|
||||
|
||||
<div class="grid-container">
|
||||
<div class="grid-left">
|
||||
<div class="grid-clock">
|
||||
<table>
|
||||
<th class="mainClock">Date</th><th class="mainClock">Current TZ</th><th class="mainClock">UTC</th>
|
||||
<tr><td class="mainClock"><div id="calDate"></div></td><td class="mainClock"><div id="now"></div></td><td class="mainClock"><div id="utc_now"></div></td></tr>
|
||||
<table width="100%">
|
||||
<th class="mainClock">Date</th><th class="mainClock">Local</th><th class="mainClock">UTC</th>
|
||||
<tr><td class="mainClock" id="calDate"></td><td class="mainClock" id="now"></td><td class="mainClock" id="utc_now"></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="meta" class="grid-meta"></div>
|
||||
|
||||
<div class="grid-nav">
|
||||
<div class="btn-group">
|
||||
<button class="button" onclick="decArray()">Previous</button>
|
||||
<button class="button" onclick="incArray()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
<div class="grid-events">
|
||||
<div id="events-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid-main">
|
||||
<div class="main">
|
||||
<table class="nav"><tr>
|
||||
<td class="left"><div id="currentSubject" class="upNext"></div></td>
|
||||
<td class="right"><div id="countdown" class="countdown"></div></td>
|
||||
</tr></table>
|
||||
<div class="header">
|
||||
<div id="currentSubject" class="subject"></div>
|
||||
<div id="countdown" class="countdown"></div>
|
||||
|
||||
<div id="currentStartEnd"></div>
|
||||
<div class="notesTitle"><h2>Notes</h2>
|
||||
<div class="notes" id="notes"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<div class="notesTitle"><h2>Notes</h2></div>
|
||||
<div class="notes" id="notes"></div>
|
||||
|
||||
<table class="nav"><tr>
|
||||
<td class="left"><div id="upNext" class="upNext"></div></td>
|
||||
<td class="right"><div id="nextCountdown" class="countdown"></div></td>
|
||||
</tr></table>
|
||||
<div class="header">
|
||||
<div id="upNext" class="subject"></div>
|
||||
<div id="nextCountdown" class="countdown"></div>
|
||||
|
||||
<div id="nextStartEnd"></div>
|
||||
<table class="nav"><tr>
|
||||
<td class="nav"><form class="left"><input type="button" value="Previous" onclick="decArray()"></form></td>
|
||||
<td class="nav"><form class="right"><input type="button" value="Next" onclick="incArray()"></form></td>
|
||||
</tr></table>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
<div id="debug" class="debug"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="events.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="timerMath.js"></script>
|
||||
<script src="clock.js"></script>
|
||||
|
||||
<script>
|
||||
var version = "0.8.019"
|
||||
var debug = true;
|
||||
|
||||
var style = 'green';
|
||||
var eventStyle = "events";
|
||||
var list;
|
||||
var counter_diff;
|
||||
|
||||
var eventsLength = events.length;
|
||||
|
||||
var array_counter = 0;
|
||||
var currentObject = array_counter;
|
||||
var nextObject = array_counter + 1;
|
||||
|
||||
var notes = events[currentObject].notes;
|
||||
var currentDate = events[currentObject].date;
|
||||
var nextDate = events[nextObject].date;
|
||||
var currentStart = currentDate;
|
||||
var currentEnd = nextDate;
|
||||
var nextStart = nextDate;
|
||||
var nextEnd = events[(nextObject + 1)].date;
|
||||
var currentSubject = events[currentObject].subject;
|
||||
var nextSubject = events[nextObject].subject;
|
||||
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date(nextDate).getTime();
|
||||
var currentTimer = new Date(currentDate).getTime();
|
||||
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
||||
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
|
||||
function incArray() {
|
||||
if (array_counter < eventsLength) {
|
||||
array_counter++;
|
||||
}
|
||||
currentObject = array_counter;
|
||||
currentDate = events[currentObject].date;
|
||||
currentSubject = events[currentObject].subject;
|
||||
currentStart = currentDate;
|
||||
currentEnd = nextDate;
|
||||
nextStart = nextDate;
|
||||
nextEnd = events[(nextObject + 1)].date;
|
||||
|
||||
nextObject = array_counter + 1;
|
||||
nextDate = events[nextObject].date;
|
||||
nextSubject = events[nextObject].subject;
|
||||
notes = events[currentObject].notes;
|
||||
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
||||
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
countDownDate = new Date(nextDate).getTime();
|
||||
currentTimer = new Date(currentDate).getTime();
|
||||
}
|
||||
|
||||
function decArray() {
|
||||
if (array_counter > 0) {
|
||||
array_counter--;
|
||||
}
|
||||
|
||||
currentObject = array_counter;
|
||||
nextObject = array_counter + 1;
|
||||
currentDate = events[currentObject].date;
|
||||
nextDate = events[nextObject].date;
|
||||
currentSubject = events[currentObject].subject;
|
||||
nextSubject = events[nextObject].subject;
|
||||
currentStart = currentDate;
|
||||
currentEnd = nextDate;
|
||||
nextStart = nextDate;
|
||||
nextEnd = events[(nextObject + 1)].date;
|
||||
notes = events[currentObject].notes;
|
||||
|
||||
nextObject = array_counter + 1;
|
||||
nextDate = events[nextObject].date;
|
||||
nextSubject = events[nextObject].subject;
|
||||
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
||||
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
countDownDate = new Date(nextDate).getTime();
|
||||
currentTimer = new Date(currentDate).getTime();
|
||||
}
|
||||
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
|
||||
|
||||
|
||||
if (aLen > 30) {
|
||||
var listLength = 30;
|
||||
} else {
|
||||
var listLength = aLen;
|
||||
}
|
||||
|
||||
for (i = 0; i < listLength; i++) {
|
||||
if (i === array_counter) {
|
||||
eventStyle= "events-current";
|
||||
} else {
|
||||
eventStyle = "events";
|
||||
}
|
||||
|
||||
counter_diff = i - array_counter;
|
||||
|
||||
if (counter_diff < -2) {
|
||||
list += '';
|
||||
} else {
|
||||
list += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + countdown(events[i].date) + "</td></tr>";
|
||||
}
|
||||
}
|
||||
|
||||
list += "</table>";
|
||||
document.getElementById("events-list").innerHTML = list;
|
||||
|
||||
// A regular clock
|
||||
var cal_date = clock_cal_date();
|
||||
var clock = clock_date();
|
||||
var clockUTC = clock_dateUTC();
|
||||
|
||||
document.getElementById("calDate").innerHTML = cal_date;
|
||||
document.getElementById("now").innerHTML = clock;
|
||||
document.getElementById("utc_now").innerHTML = clockUTC;
|
||||
|
||||
//
|
||||
document.getElementById("countdown").innerHTML = countdown(currentDate);
|
||||
document.getElementById("nextCountdown").innerHTML = countdown(nextDate);
|
||||
|
||||
if (debug == true) {
|
||||
document.getElementById("debug").innerHTML = "debug: " + debug + "<br />Version: " + version + "<br />Current time object: " + currentDate + "<br />Current subject object: " + currentSubject + "<br />current notes object: " + notes + "<br />next time object: " + nextDate + "<br />next subject object: " + nextSubject + "<br />current array counter: " + array_counter + "<br />Start Time: " + currentStart + "<br />End Time: " + currentEnd + "<br />" ;
|
||||
}
|
||||
|
||||
// If the count down is finished, write some text
|
||||
//if (distance < 0) {
|
||||
// clearInterval(x);
|
||||
// document.getElementById("clock").innerHTML = "EXPIRED";
|
||||
//}
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,158 @@
|
|||
// meta
|
||||
var version = "0.8.037"
|
||||
var debug = true;
|
||||
|
||||
var style = 'green';
|
||||
var eventStyle = "events";
|
||||
|
||||
var list;
|
||||
var counter_diff;
|
||||
|
||||
var eventsLength = events.length;
|
||||
|
||||
var array_counter = 0;
|
||||
var currentObject = array_counter;
|
||||
var nextObject = array_counter + 1;
|
||||
|
||||
var notes = events[currentObject].notes;
|
||||
var currentDate = events[currentObject].date;
|
||||
var nextDate = events[nextObject].date;
|
||||
var currentStart = currentDate;
|
||||
var currentEnd = nextDate;
|
||||
var nextStart = nextDate;
|
||||
var nextEnd = events[(nextObject + 1)].date;
|
||||
var currentSubject = events[currentObject].subject;
|
||||
var nextSubject = events[nextObject].subject;
|
||||
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date(nextDate).getTime();
|
||||
var currentTimer = new Date(currentDate).getTime();
|
||||
|
||||
// initialize html objects
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "Now: " + currentSubject;
|
||||
document.getElementById("upNext").innerHTML = "Next: " + nextSubject;
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
|
||||
function toggleDebug() {
|
||||
if (debug === true) {
|
||||
debug = false;
|
||||
document.getElementById("debug").innerHTML = "";
|
||||
} else {
|
||||
debug = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function incArray() {
|
||||
if (array_counter < eventsLength) {
|
||||
array_counter++;
|
||||
}
|
||||
currentObject = array_counter;
|
||||
currentDate = events[currentObject].date;
|
||||
currentSubject = events[currentObject].subject;
|
||||
currentStart = currentDate;
|
||||
currentEnd = nextDate;
|
||||
nextStart = nextDate;
|
||||
nextEnd = events[(nextObject + 1)].date;
|
||||
|
||||
nextObject = array_counter + 1;
|
||||
nextDate = events[nextObject].date;
|
||||
nextSubject = events[nextObject].subject;
|
||||
notes = events[currentObject].notes;
|
||||
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "Now: " + currentSubject;
|
||||
document.getElementById("upNext").innerHTML = "Next: " + nextSubject;
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
countDownDate = new Date(nextDate).getTime();
|
||||
currentTimer = new Date(currentDate).getTime();
|
||||
}
|
||||
|
||||
function decArray() {
|
||||
if (array_counter > 0) {
|
||||
array_counter--;
|
||||
}
|
||||
|
||||
currentObject = array_counter;
|
||||
nextObject = array_counter + 1;
|
||||
currentDate = events[currentObject].date;
|
||||
nextDate = events[nextObject].date;
|
||||
currentSubject = events[currentObject].subject;
|
||||
nextSubject = events[nextObject].subject;
|
||||
currentStart = currentDate;
|
||||
currentEnd = nextDate;
|
||||
nextStart = nextDate;
|
||||
nextEnd = events[(nextObject + 1)].date;
|
||||
notes = events[currentObject].notes;
|
||||
|
||||
nextObject = array_counter + 1;
|
||||
nextDate = events[nextObject].date;
|
||||
nextSubject = events[nextObject].subject;
|
||||
|
||||
document.getElementById("notes").innerHTML = notes;
|
||||
document.getElementById("currentSubject").innerHTML = "Now: " + currentSubject;
|
||||
document.getElementById("upNext").innerHTML = "Next: " + nextSubject;
|
||||
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
||||
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
||||
countDownDate = new Date(nextDate).getTime();
|
||||
currentTimer = new Date(currentDate).getTime();
|
||||
}
|
||||
|
||||
// Update the count down every 1 second
|
||||
var x = setInterval(function() {
|
||||
|
||||
document.getElementById("meta").innerHTML = "Version: " + version + "<br />Debug: <a onclick=toggleDebug()>" + debug + "</a>";
|
||||
|
||||
list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
|
||||
|
||||
if (aLen > 30) {
|
||||
var listLength = 30;
|
||||
} else {
|
||||
var listLength = aLen;
|
||||
}
|
||||
|
||||
for (i = 0; i < listLength; i++) {
|
||||
if (i === array_counter) {
|
||||
eventStyle= "events-current";
|
||||
} else {
|
||||
eventStyle = "events";
|
||||
}
|
||||
|
||||
counter_diff = i - array_counter;
|
||||
|
||||
if (counter_diff < -2) {
|
||||
list += '';
|
||||
} else {
|
||||
list += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + countdown(events[i].date) + "</td></tr>";
|
||||
}
|
||||
}
|
||||
|
||||
list += "</table>";
|
||||
document.getElementById("events-list").innerHTML = list;
|
||||
|
||||
// A regular clock
|
||||
var cal_date = clock_cal_date();
|
||||
var clock = clock_date();
|
||||
var clockUTC = clock_dateUTC();
|
||||
|
||||
document.getElementById("calDate").innerHTML = cal_date;
|
||||
document.getElementById("now").innerHTML = clock;
|
||||
document.getElementById("utc_now").innerHTML = clockUTC;
|
||||
|
||||
//
|
||||
document.getElementById("countdown").innerHTML = countdown(currentDate);
|
||||
document.getElementById("nextCountdown").innerHTML = countdown(nextDate);
|
||||
|
||||
if (debug === true) {
|
||||
document.getElementById("debug").innerHTML = "debug: " + debug + "<br />Version: " + version + "<br />Current time object: " + currentDate + "<br />Current subject object: " + currentSubject + "<br />current notes object: " + notes + "<br />next time object: " + nextDate + "<br />next subject object: " + nextSubject + "<br />current array counter: " + array_counter + "<br />Start Time: " + currentStart + "<br />End Time: " + currentEnd + "<br />" ;
|
||||
}
|
||||
|
||||
// If the count down is finished, write some text
|
||||
//if (distance < 0) {
|
||||
// clearInterval(x);
|
||||
// document.getElementById("clock").innerHTML = "EXPIRED";
|
||||
//}
|
||||
}, 1000);
|
||||
|
|
@ -1,35 +1,56 @@
|
|||
body { background-color: #333; color: #fff;}
|
||||
body {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
th { color: #FFF; font-size: 28px; }
|
||||
table { border-collapse: collapse; }
|
||||
table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-bottom: 0px; }
|
||||
|
||||
.clear { clear: both ;}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'clock main main main main main'
|
||||
'events main main main main main'
|
||||
'events main main main main main';
|
||||
'left right';
|
||||
grid-gap: 3px;
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-main {
|
||||
grid-area: main;
|
||||
width: 75%;
|
||||
grid-area: right;
|
||||
}
|
||||
|
||||
.grid-left {
|
||||
grid-area: left;
|
||||
width: 25%;
|
||||
min-width: 500px;
|
||||
border-right: 1px solid #AAA;
|
||||
}
|
||||
|
||||
.grid-clock {
|
||||
grid-area: clock;
|
||||
}
|
||||
|
||||
.grid-meta {
|
||||
vertical-align: top;
|
||||
max-height: 100px;
|
||||
border: 1px solid #AAA;
|
||||
background-color: #000;
|
||||
color: lime;
|
||||
}
|
||||
|
||||
.grid-nav {
|
||||
}
|
||||
|
||||
.grid-events {
|
||||
grid-area: events;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: #222;
|
||||
position: center;
|
||||
/* margin: auto; */
|
||||
}
|
||||
|
||||
.mainClock {
|
||||
|
|
@ -59,22 +80,39 @@ th.events {
|
|||
}
|
||||
|
||||
table.events {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.countdown { text-align: right; font-size: 60px; }
|
||||
.btn-group .button {
|
||||
background-color: #4CAF50; /* Green */
|
||||
border: 1px solid green;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
border-bottom: 2px solid #AAA;
|
||||
}
|
||||
|
||||
.btn-group .button:not(:last-child) {
|
||||
border-right: none; /* Prevent double borders */
|
||||
}
|
||||
|
||||
.btn-group .button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
.countdown { float: right; text-align: right; font-size: 60px; }
|
||||
.warn { color: yellow; }
|
||||
.over { color: red; }
|
||||
.green { color: lime; }
|
||||
#now { color: #FFF; font-size: 20px; }
|
||||
#utc_now { color: #FFF; font-size: 20px; }
|
||||
.debug { background-color: #000; color: lime; border: 2px; border-color: lime; }
|
||||
.notes { background-color: #000; color: #AAA; width: 100%; min-height: 400px;}
|
||||
.notesTitle { background-color: #000; color: #AAA; width: 100%; font-size: 20px;}
|
||||
.notes { min-width: 1000px; width: 100%; background-color: #000; color: #AAA; min-height: 200px; border: 1px solid #aaa;}
|
||||
.notesTitle { background-color: #000; color: #AAA; font-size: 20px;}
|
||||
|
||||
.right { text-align: right; border: 0px;}
|
||||
.left { text-align: left; border: 0px; }
|
||||
.nav { border: 0px; width: 100%; padding:0px; }
|
||||
.upNext { color: #fff; font-size: 45px; }
|
||||
.subject { color: #fff; font-size: 45px; }
|
||||
.header { width: 100%; background-color: #222; }
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue