sites
/
thelinux.pro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css

This commit is contained in:
Kameron Kenny 2019-05-29 17:32:53 -04:00
parent af5d4e4a7f
commit 919707adae
5 changed files with 172 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
broadcast_timer/css/custom.css
View File

@ -22,6 +22,17 @@ body {
table.events { table.events {
width: 99%; width: 99%;
} }
.notes {
background: #000;
margin-top: 10px;
font-size: 1.8rem;
color: #fff;
max-width: 100%; }
.debug {
background: #000;
color: lime;
margin-top: 15px;
border: 1px solid lime; }
.clock { .clock {
display: none; display: none;
font-size: 1.8rem; font-size: 1.8rem;
@ -30,7 +41,7 @@ table.events {
padding: 5px; padding: 5px;
margin-bottom: 0px; } margin-bottom: 0px; }
.button { .button {
border: 1px solid #666; border: 1px solid #333;
background-color: #4CAF50; background-color: #4CAF50;
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0px;
@ -43,13 +54,15 @@ table.events {
max-width: 99%; max-width: 99%;
padding: 0 5px; } padding: 0 5px; }
.header { .header {
background: #666; background-color: #666;
margin-top: 6rem; margin-top: 6rem;
text-align: center; } text-align: center; }
.header.columns {
background: #666; }
.navbar { .navbar {
font-size: 3rem; font-size: 3rem;
font-weight: 600; font-weight: 600;
background-color: #222; background: #222;
/*display: none;*/ } /*display: none;*/ }
.events { .events {
text-align: left; } text-align: left; }
@ -57,7 +70,7 @@ table.events {
/* Larger than phone */ /* Larger than phone */
@media (min-width: 550px) { @media (min-width: 550px) {
.button { .button {
border: 1px solid #666; border: 1px solid #333;
background-color: #4CAF50; background-color: #4CAF50;
margin-top: 10px; margin-top: 10px;
margin-bottom: 0px; margin-bottom: 0px;
@ -67,6 +80,7 @@ table.events {
.two-thirds.column { width: 68.8%; } .two-thirds.column { width: 68.8%; }
.column, .column,
.columns { .columns {
background: transparent;
margin-left: 3px; } margin-left: 3px; }
.clock-wrapper { .clock-wrapper {
display: block; display: block;
@ -80,7 +94,9 @@ table.events {
padding: 5px; padding: 5px;
margin-bottom: 0px; } margin-bottom: 0px; }
.header { .header {
margin-top: 0rem; } background-color: #666;
text-align: center;
margin-top: 6rem; }
.events { .events {
text-align: left; } text-align: left; }
} }

5
broadcast_timer/events.js
View File

@ -69,6 +69,11 @@ var events = [
"subject": "Monit w/ Gumby", "subject": "Monit w/ Gumby",
"notes": "Demo Monit and how it can be useful for gumby" "notes": "Demo Monit and how it can be useful for gumby"
}, },
{
"date": "May 29, 2019 16:25:00",
"subject": "Git Push",
"notes": ""
},
{ {
"date": "May 30, 2019 00:00:01", "date": "May 30, 2019 00:00:01",
"subject": "10-year anniversery", "subject": "10-year anniversery",

161
broadcast_timer/index.html
View File

@ -1,88 +1,111 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Broadcast Timer</title> <title>Broadcast Timer</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="description" content="Broadcast Timer"> <meta name="description" content="Broadcast Timer">
<meta name="author" content="Kameron Kenny"> <meta name="author" content="Kameron Kenny">
<!-- Mobile Specific Metas --> <!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font --> <!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/custom.css">
<!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<!-- No Cache --> <!-- No Cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> <meta http-equiv="Expires" content="0">
</head> </head>
<body> <body>
<!-- Top Bar -->
<div class="section hero u-full-width u-max-full-width"> <div class="section hero u-full-width u-max-full-width">
<div class="container navbar"> <div class="container navbar">
<div class="row"> <div class="row">
<div class="one-half column u-pull-left"> <div class="one-half column u-pull-left">
<div class="one-third column"> <div class="one-third column">
<div class="clock u-pull-left">Date: </div> <div class="clock u-pull-left">Date: </div>
<div id="calDate" class="clock u-pull-left"></div> <div id="calDate" class="clock u-pull-left"></div>
</div>
<div class="one-third column">
<div class="clock u-pull-left">Local: </div>
<div id="now" class="clock u-pull-left"></div>
</div>
<div class="one-third column">
<div class="clock u-pull-left">UTC: </div>
<div id="utc_now" class="clock u-pull-left"></div>
</div>
</div>
<div class="one-half column u-pull-right">
<div class="nav-button">
<button class="button" onclick="decArray()">Previous</button>
<button class="button" onclick="incArray()">Next</button>
</div>
</div>
</div>
</div> </div>
<div class="one-third column">
<div class="clock u-pull-left">Local: </div>
<div id="now" class="clock u-pull-left"></div>
</div>
<div class="one-third column">
<div class="clock u-pull-left">UTC: </div>
<div id="utc_now" class="clock u-pull-left"></div>
</div>
</div>
<div class="one-half column u-pull-right">
<div class="nav-button">
<button class="button" onclick="decArray()">Previous</button>
<button class="button" onclick="incArray()">Next</button>
</div>
</div>
</div>
</div>
</div> </div>
<!-- / Top Bar -->
<!-- mid-section -->
<div class="section"> <div class="section">
<div class="container"> <div class="container">
<div class="row columns"> <div class="row columns">
<div class="one-third column events"> <!-- events-list -->
<div id="events-list"></div> <div class="one-third column events">
</div> <div id="events-list"></div>
</div>
<!-- /events-list -->
<!-- current-next events -->
<div class="two-thirds column">
<!-- current-event -->
<div class="header">
<div class="row">
<div class="two-thirds column">
<div id="currentSubject" class="subject"></div>
</div>
<div class="one-third column">
<div id="countdown" class="countdown"></div>
</div>
</div>
</div>
<div class="row">
<div id="currentStartEnd"></div>
</div>
<div calss="row">
<div class="notes" id="notes"></div>
</div>
<!-- /current-event -->
<div class="two-thirds column"> <!-- next-event -->
<div class="header"> <div class="header">
<div class="columns"> <div class="row">
<div class="two-thirds column"> <div class="two-thirds column">
<div id="currentSubject" class="subject"></div> <div id="upNext" class="subject"></div>
</div> </div>
<div class="one-third column"> <div class="one-third column">
<div id="countdown" class="countdown"></div> <div id="nextCountdown" class="countdown"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="currentStartEnd"></div> <div id="nextStartEnd"></div>
<div class="notes" id="notes"></div> <!-- /next-event -->
<div class="header"> <div id="debug" class="debug"></div>
<div id="upNext" class="subject"></div> </div>
<div id="nextCountdown" class="countdown"></div> <!-- /current-next-events -->
<div id="nextStartEnd"></div> </div>
</div> </div>
</div>
<!-- /mid-section -->
<div id="debug" class="debug"></div>
</div> <div class="grid-bottom">
</div> <div id="meta" class="grid-meta u-pull-right"></div>
</div>
</div> </div>
<div class="grid-bottom">
<div id="meta" class="grid-meta"></div>
</div>
<script src="events.js"></script> <script src="events.js"></script>
<script src="main.js"></script> <script src="main.js"></script>

20
broadcast_timer/main.js
View File

@ -1,7 +1,9 @@
// meta // meta
var version = "0.9.112" var version = "0.10.2"
var debug = false; var debug = false;
var initialized = false;
var style = 'green'; var style = 'green';
var eventStyle = "events"; var eventStyle = "events";
@ -9,6 +11,7 @@ var list;
var counter_diff; var counter_diff;
var eventsLength = events.length; var eventsLength = events.length;
var eventLength;
var array_counter = 0; var array_counter = 0;
var currentObject = array_counter; var currentObject = array_counter;
@ -44,7 +47,6 @@ function toggleDebug() {
} }
} }
function incArray() { function incArray() {
if (array_counter < eventsLength) { if (array_counter < eventsLength) {
array_counter++; array_counter++;
@ -108,8 +110,8 @@ var x = setInterval(function() {
list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>"; list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
if (eventsLength > 20) { if (eventsLength > 15) {
var listLength = 20; var listLength = 15;
var page = true; var page = true;
} else { } else {
var listLength = eventsLength; var listLength = eventsLength;
@ -121,9 +123,11 @@ var x = setInterval(function() {
for (i = 0; i < listLength; i++) { for (i = 0; i < listLength; i++) {
if (i === array_counter) { if (i === array_counter) {
eventStyle= "events-current"; eventStyle = "events-current";
cdFunction = countdown(events[i].date, "current");
} else { } else {
eventStyle = "events"; eventStyle = "events";
cdFunction = countdown(events[i].date, "next");
} }
counter_diff = i - array_counter; counter_diff = i - array_counter;
@ -134,7 +138,7 @@ var x = setInterval(function() {
listLength++; listLength++;
} }
} else { } 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 += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + cdFunction + "</td></tr>";
} }
} }
@ -148,8 +152,8 @@ var x = setInterval(function() {
document.getElementById("utc_now").innerHTML = clock_dateUTC(); document.getElementById("utc_now").innerHTML = clock_dateUTC();
// //
document.getElementById("countdown").innerHTML = countdown(currentDate); document.getElementById("countdown").innerHTML = countdown(currentDate, "current");
document.getElementById("nextCountdown").innerHTML = countdown(nextDate); document.getElementById("nextCountdown").innerHTML = countdown(nextDate, "next");
if (debug === true) { 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 />" ; 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 />" ;

60
broadcast_timer/timerMath.js
View File

@ -6,51 +6,67 @@ var style = "green"; // reset style
var r; var r;
aLen = events.length; aLen = events.length;
function countdown(targetDate) { function countdown(targetDate, current) {
countDownDate = new Date(targetDate).getTime(); countDownDate = new Date(targetDate).getTime();
now = new Date().getTime(); now = new Date().getTime();
distance = countDownDate - now; distance = countDownDate - now;
if (current === "current") {
var nextCountDownDate = new Date(nextDate).getTime();
var nextDistance = nextCountDownDate - now;
var nextDays = Math.floor(nextDistance / (1000 * 60 * 60 * 24));
var nextHours = Math.floor((nextDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var nextMinutes = Math.floor((nextDistance % (1000 * 60 * 60)) / (1000 * 60));
var nextSeconds = Math.floor((nextDistance % (1000 * 60)) / 1000);
}
days = Math.floor(distance / (1000 * 60 * 60 * 24)); days = Math.floor(distance / (1000 * 60 * 60 * 24));
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
seconds = Math.floor((distance % (1000 * 60)) / 1000); seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Day or Days? // Day or Days?
if (days > 0) { if (days > 0) {
if (days == 1){ if (days === 1){
days = (days + ' Day '); rDays = (days + ' Day ');
} else { } else {
days = (days + ' Days '); rDays = (days + ' Days ');
} }
} else { } else {
days = ''; rDays = '';
} }
// set style for countdown based on remaining time // set style for countdown based on remaining time
style = "green"; // reset style style = "green"; // reset style
if (days < 1 && hours < 1) { if (current === "current") {
//console.log(`in days and hours if statment`) if (nextDays < 1 && nextHours < 1) {
//console.log(`days = ${days} , hours = ${hours} , minutes = ${minutes}`) if (nextMinutes < 0) {
if (minutes < 0) { style = 'over';
style = 'over'; } else if (nextMinutes < 15) {
} else if (minutes < 15) { style = 'warn';
style = 'warn'; } else {
} else { style = 'green';
style = 'green'; }
}
} else {
if (days < 1 && hours < 1) {
if (minutes < 0) {
style = 'over';
} else if (minutes < 15) {
style = 'warn';
} else {
style = 'green';
}
} }
} }
//console.log(`Style = ${style}`)
// pad single digits with a '0' prefix // pad single digits with a '0' prefix
// when time is out, start counting up by inverting // when time is out, start counting up by inverting
if (hours < 0) { if (hours < 0) {
hours = (-hours); hours = (-hours);
hours--;
} }
if (hours < 10 && hours >= 0) { if (hours < 10 && hours >= 0) {
hours = ('0' + hours); hours = ('0' + hours);
@ -58,6 +74,7 @@ function countdown(targetDate) {
if (minutes < 0) { if (minutes < 0) {
minutes = (-minutes); minutes = (-minutes);
minutes--;
} }
if (minutes < 10 && minutes >= 0) { if (minutes < 10 && minutes >= 0) {
minutes = ('0' + minutes); minutes = ('0' + minutes);
@ -65,13 +82,20 @@ function countdown(targetDate) {
if (seconds < 0) { if (seconds < 0) {
seconds = (-seconds); seconds = (-seconds);
seconds--;
} }
if (seconds < 10 && seconds >= 0) { if (seconds < 10 && seconds >= 0) {
seconds = ('0' + seconds); seconds = ('0' + seconds);
} }
var r = "<div class=" + style + ">" + days + hours + ":" + minutes + ":" + seconds + "</div>"; if (initialized === false && distance < 0) {
incArray();
} else if (initialized === false) {
initialized = true;
decArray();
}
var r = "<div class=" + style + ">" + rDays + hours + ":" + minutes + ":" + seconds + "</div>";
return r; return r;
} }