diff --git a/broadcast_timer/clock.js b/broadcast_timer/clock.js index 07ad007..11f57a0 100755 --- a/broadcast_timer/clock.js +++ b/broadcast_timer/clock.js @@ -1,6 +1,6 @@ -var d = new Date(); function clock_cal_date() { + var d = new Date(); var r = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate(); return r } @@ -9,6 +9,7 @@ function clock_date() { // A regular clock + var d = new Date(); var hour = d.getHours(); var minute = d.getMinutes(); var second = d.getSeconds(); @@ -31,6 +32,7 @@ function clock_date() { function clock_dateUTC() { // Same for UTC + var d = new Date(); var hourUTC = d.getUTCHours(); var minuteUTC = d.getUTCMinutes(); var secondUTC = d.getUTCSeconds(); diff --git a/broadcast_timer/index.html b/broadcast_timer/index.html index 5d4f692..bf865b8 100644 --- a/broadcast_timer/index.html +++ b/broadcast_timer/index.html @@ -1,6 +1,6 @@ - Countdown Timer + Broadcast Timer @@ -9,22 +9,21 @@
-
-
- - - -
DateLocalUTC
-
- -
- -
-
- +
+
-
+
+
+
+
Local:
+
+
UTC:
+
+
+
+ +
@@ -55,6 +54,10 @@
+ +
+
+
diff --git a/broadcast_timer/main.js b/broadcast_timer/main.js index b59c2e5..bea52e3 100644 --- a/broadcast_timer/main.js +++ b/broadcast_timer/main.js @@ -1,5 +1,5 @@ // meta -var version = "0.9.002" +var version = "0.9.012" var debug = false; var style = 'green'; @@ -142,13 +142,10 @@ var x = setInterval(function() { 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("calDate").innerHTML = clock_cal_date(); + document.getElementById("now").innerHTML = clock_date(); + document.getElementById("utc_now").innerHTML = clock_dateUTC(); // document.getElementById("countdown").innerHTML = countdown(currentDate); diff --git a/broadcast_timer/style.css b/broadcast_timer/style.css index cbd67d2..b92e339 100644 --- a/broadcast_timer/style.css +++ b/broadcast_timer/style.css @@ -1,6 +1,9 @@ body { background-color: #333; color: #fff; + padding-top: 0px; + padding-left: 0px; + margin: 0px; } th { color: #FFF; font-size: 28px; } @@ -12,12 +15,45 @@ table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding- .grid-container { display: grid; grid-template-areas: - 'left right'; + 'top-bar top-bar' + 'info-bar info-bar' + 'left right' + 'bottom bottom'; grid-gap: 3px; padding: 4px; + padding-top: 0px; width: 100%; } +@media (max-width:600px) { +.grid-container { + display: grid; + grid-template-areas: + 'top-bar' + 'info-bar' + 'left' + 'right' + 'bottom'; + grid-gap: 3px; + padding: 4px; + padding-top: 0px; + width: 100%; +} +} +.grid-top-bar { + grid-area: top-bar; + padding: 0px; + width: 100%; + background-color: #222; +} + +.grid-info-bar { + grid-area: info-bar; + padding-top: 0px; + background-color: #222; + clear: both; +} + .grid-main { width: 75%; grid-area: right; @@ -30,15 +66,19 @@ table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding- border-right: 1px solid #AAA; } +.grid-bottom { + grid-area: bottom; + background-color: #222; +} + .grid-clock { } .grid-meta { - vertical-align: top; - max-height: 100px; - border: 1px solid #AAA; + border: 0px solid #AAA; background-color: #000; color: lime; + float: right; } .grid-nav { @@ -53,13 +93,37 @@ table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding- background-color: #222; } -.mainClock { +.mainClock-cal { text-align: center; font-size: 20px; - border: 1px solid #999; - padding: 15px; - padding-top: 5px; - padding-bottom: 5px; + border-left: 1px solid #999; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + border-right: 1px solid #999; + padding: 5px; + float: left; +} + +.mainClock-left { + text-align: center; + font-size: 20px; + border-left: 1px solid #999; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + border-right: 0px solid #999; + padding: 5px; + float: left; +} + +.mainClock-right { + text-align: center; + font-size: 20px; + border-left: 0px solid #999; + border-top: 1px solid #999; + border-bottom: 1px solid #999; + border-right: 1px solid #999; + padding: 5px; + float: left; } .events { @@ -92,7 +156,7 @@ table.events { display: inline-block; font-size: 16px; cursor: pointer; - float: left; + float: right; border-bottom: 2px solid #AAA; }