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

style fixup

This commit is contained in:
Kameron Kenny 2019-05-28 22:16:43 -04:00
parent 21a361b3e1
commit f24d12742b
4 changed files with 99 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
broadcast_timer/clock.js
View File

@ -1,6 +1,6 @@
var d = new Date();
function clock_cal_date() { function clock_cal_date() {
var d = new Date();
var r = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate(); var r = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate();
return r return r
} }
@ -9,6 +9,7 @@ function clock_date() {
// A regular clock // A regular clock
var d = new Date();
var hour = d.getHours(); var hour = d.getHours();
var minute = d.getMinutes(); var minute = d.getMinutes();
var second = d.getSeconds(); var second = d.getSeconds();
@ -31,6 +32,7 @@ function clock_date() {
function clock_dateUTC() { function clock_dateUTC() {
// Same for UTC // Same for UTC
var d = new Date();
var hourUTC = d.getUTCHours(); var hourUTC = d.getUTCHours();
var minuteUTC = d.getUTCMinutes(); var minuteUTC = d.getUTCMinutes();
var secondUTC = d.getUTCSeconds(); var secondUTC = d.getUTCSeconds();

33
broadcast_timer/index.html
View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<title>Countdown Timer</title> <title>Broadcast Timer</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<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">
@ -9,22 +9,21 @@
<body> <body>
<div class="grid-container"> <div class="grid-container">
<div class="grid-left"> <div class="grid-top-bar">
<div class="grid-clock"> <div class="btn-group">
<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> <button class="button" onclick="incArray()">Next</button>
</div> <button class="button" onclick="decArray()">Previous</button>
</div> </div>
<div class="grid-info-bar">
<div id="calDate" class="mainClock-cal"></div>
<div class="mainClock-left">Local: </div>
<div id="now" class="mainClock-right"></div>
<div class="mainClock-left">UTC: </div>
<div id="utc_now" class="mainClock-right"></div>
</div>
</div>
<div class="grid-left">
<div class="clear"></div> <div class="clear"></div>
<div class="grid-events"> <div class="grid-events">
@ -55,6 +54,10 @@
<div id="debug" class="debug"></div> <div id="debug" class="debug"></div>
</div> </div>
</div> </div>
<div class="grid-bottom">
<div id="meta" class="grid-meta"></div>
</div>
</div> </div>
<script src="events.js"></script> <script src="events.js"></script>

11
broadcast_timer/main.js
View File

@ -1,5 +1,5 @@
// meta // meta
var version = "0.9.002" var version = "0.9.012"
var debug = false; var debug = false;
var style = 'green'; var style = 'green';
@ -142,13 +142,10 @@ var x = setInterval(function() {
document.getElementById("events-list").innerHTML = list; document.getElementById("events-list").innerHTML = list;
// A regular clock // 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("calDate").innerHTML = clock_cal_date();
document.getElementById("now").innerHTML = clock; document.getElementById("now").innerHTML = clock_date();
document.getElementById("utc_now").innerHTML = clockUTC; document.getElementById("utc_now").innerHTML = clock_dateUTC();
// //
document.getElementById("countdown").innerHTML = countdown(currentDate); document.getElementById("countdown").innerHTML = countdown(currentDate);

84
broadcast_timer/style.css
View File

@ -1,6 +1,9 @@
body { body {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
padding-top: 0px;
padding-left: 0px;
margin: 0px;
} }
th { color: #FFF; font-size: 28px; } 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 { .grid-container {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
'left right'; 'top-bar top-bar'
'info-bar info-bar'
'left right'
'bottom bottom';
grid-gap: 3px; grid-gap: 3px;
padding: 4px; padding: 4px;
padding-top: 0px;
width: 100%; 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 { .grid-main {
width: 75%; width: 75%;
grid-area: right; 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; border-right: 1px solid #AAA;
} }
.grid-bottom {
grid-area: bottom;
background-color: #222;
}
.grid-clock { .grid-clock {
} }
.grid-meta { .grid-meta {
vertical-align: top; border: 0px solid #AAA;
max-height: 100px;
border: 1px solid #AAA;
background-color: #000; background-color: #000;
color: lime; color: lime;
float: right;
} }
.grid-nav { .grid-nav {
@ -53,13 +93,37 @@ table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-
background-color: #222; background-color: #222;
} }
.mainClock { .mainClock-cal {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
border: 1px solid #999; border-left: 1px solid #999;
padding: 15px; border-top: 1px solid #999;
padding-top: 5px; border-bottom: 1px solid #999;
padding-bottom: 5px; 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 { .events {
@ -92,7 +156,7 @@ table.events {
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
float: left; float: right;
border-bottom: 2px solid #AAA; border-bottom: 2px solid #AAA;
} }