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() {
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();

33
broadcast_timer/index.html
View File

@ -1,6 +1,6 @@
<html>
<head>
<title>Countdown Timer</title>
<title>Broadcast Timer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
@ -9,22 +9,21 @@
<body>
<div class="grid-container">
<div class="grid-left">
<div class="grid-clock">
<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>
<div class="grid-top-bar">
<div class="btn-group">
<button class="button" onclick="incArray()">Next</button>
</div>
<button class="button" onclick="decArray()">Previous</button>
</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="grid-events">
@ -55,6 +54,10 @@
<div id="debug" class="debug"></div>
</div>
</div>
<div class="grid-bottom">
<div id="meta" class="grid-meta"></div>
</div>
</div>
<script src="events.js"></script>

11
broadcast_timer/main.js
View File

@ -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);

84
broadcast_timer/style.css
View File

@ -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;
}