From a2c49fc0a4e8c1676807ba8300abd3f68e07300f Mon Sep 17 00:00:00 2001 From: Kameron Kenny Date: Tue, 28 May 2019 18:23:42 -0400 Subject: [PATCH] fix css --- broadcast_timer/index.html | 213 +++++++------------------------------ broadcast_timer/main.js | 158 +++++++++++++++++++++++++++ broadcast_timer/style.css | 76 +++++++++---- 3 files changed, 253 insertions(+), 194 deletions(-) create mode 100644 broadcast_timer/main.js diff --git a/broadcast_timer/index.html b/broadcast_timer/index.html index 94ee7b2..d02506c 100644 --- a/broadcast_timer/index.html +++ b/broadcast_timer/index.html @@ -6,196 +6,59 @@
-
- - - -
DateCurrent TZUTC
-
+
+
+ + + +
DateLocalUTC
+
-
-
+
+ +
+
+ + +
+
+
+ +
+
+
- - - -
+
+
+
-
-

Notes

+
+
+
+

Notes

+ +
+
+
+ +
+
+
+ +
- - - - -
- -
- - - -
- -
+ - - diff --git a/broadcast_timer/main.js b/broadcast_timer/main.js new file mode 100644 index 0000000..cfb2723 --- /dev/null +++ b/broadcast_timer/main.js @@ -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 + "
End Time: " + currentEnd; +document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "
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 + "
End Time: " + currentEnd; + document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "
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 + "
End Time: " + currentEnd; + document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "
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 + "
Debug: " + debug + ""; + + list = ""; + + 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 += ""; + } + } + + list += "
EventTimeTime Until
" + events[i].subject + "" + events[i].date + "" + countdown(events[i].date) + "
"; + 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 + "
Version: " + version + "
Current time object: " + currentDate + "
Current subject object: " + currentSubject + "
current notes object: " + notes + "
next time object: " + nextDate + "
next subject object: " + nextSubject + "
current array counter: " + array_counter + "
Start Time: " + currentStart + "
End Time: " + currentEnd + "
" ; + } + + // If the count down is finished, write some text + //if (distance < 0) { + // clearInterval(x); + // document.getElementById("clock").innerHTML = "EXPIRED"; + //} +}, 1000); diff --git a/broadcast_timer/style.css b/broadcast_timer/style.css index 3dd5b5f..cbd67d2 100644 --- a/broadcast_timer/style.css +++ b/broadcast_timer/style.css @@ -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; }