aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDerek Stevens <nilix@nilfm.cc>2019-11-20 09:28:30 -0500
committerDerek Stevens <nilix@nilfm.cc>2019-11-20 09:28:30 -0500
commit9f7e0efc61eef0c9139f07780f0c9dd714e78541 (patch)
tree54fd6b57980bf59d4bc7f0083d1dbfc7a9f0bf75
parent5212a10c4137f5b89d9686aba6f69913fdebcf5d (diff)
minify CSS, switch to minified moment[-timezone], added a label (set->) for timer input
-rw-r--r--alt.html188
-rw-r--r--cal/alt.html178
-rw-r--r--cal/index.html4
-rw-r--r--index.html6
-rw-r--r--min.css1
-rw-r--r--searchbar.js2
-rw-r--r--style.css2
-rw-r--r--timer/alt.html40
-rw-r--r--timer/index.html6
9 files changed, 10 insertions, 417 deletions
diff --git a/alt.html b/alt.html
deleted file mode 100644
index 5ff821b..0000000
--- a/alt.html
+++ /dev/null
@@ -1,188 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="description" content="Planetary Gears is a lightweight world clock web application in jQuery, fuse.js, and moment-timezone" />
- <meta name="HandheldFriendly" content="True" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Planetary Gears - Yet Another World Clock Webapp</title>
- <link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/dark.css">
- </head>
- <body>
- <div id="header">
- <h1>Planetary Gears</h1>
- <h2>yet another world clock webapp</h2>
- </div>
- <div id="shroud"></div>
- <nav>
- <a class="activeButton" href="/alt.html">converter</a><a href="/timer/alt.html">timer/stopwatch</a><a href="/cal/alt.html">calendar</a>
- </nav>
-
-
- <div id="localTime">
- <h3><time>00:00</time></h3>
- <h4>+00:00</h4>
- <h5>Universal Coordinated Time</h5>
- </div>
-
- <form id="searchBox">
- <input type="search" id="tzSearchBox" name="tzSearch" placeholder="search for a timezone or location...">
- <input type="button" id="tzSearchButton" name="tzButton" value="go">
- </form>
-
- <div id="bigWrapper">
-
- <div id="controls">
- <form id="formatSelector">
- <input type="button" id="12HSelector" name="12H" value="12H">
- <input type="button" id="24HSelector" name="24H" value="24H" class="activeButton">
- <input type="button" id="MXSelector" name="MX" value="MX">
- </form>
- <form id="windowSelector">
- <label for="displayWindow">showing</label>
- <input type="number" id="displayWindow" name="displayWindow" min="4" max="48" value="9">
- <label for="arondNow">hours</label>
- <input type="button" id="aroundNow" name="aroundNow" value="Around Now" class="activeButton">
- <input type="button" id="startingNow" name="startingNow" value="Starting Now"><br/>
- <label for="intervalSelectorWrapper A">use the sliders to select a time interval on the table</label>
- </form>
- </div>
-
- <div id="tableWrapper">
- <table id="zoneHeaders">
- <tr>
- <th>
- <div class="zoneControlUpWrapper">
- <input type="button" name="zone1Up" class="zoneControlUp" value="&#9650;" disabled>
- </div>
- <div class="zoneControlDeleteWrapper">
- <input type="button" name="zone1Delete" class="zoneControlDelete" value="X">
- </div>
- <div class="zoneControlDownWrapper">
- <input type="button" name="zone1Down" class="zoneControlDown" value="&#9660;">
- </div>
- <div class="zoneInfo">
- UTC [+00:00]
- </div>
- </th>
- </tr>
- <tr>
- <th>
- <div class="zoneControlUpWrapper">
- <input type="button" name="zone2Up" class="zoneControlUp" value="&#9650;">
- </div>
- <div class="zoneControlDeleteWrapper">
- <input type="button" name="zone2Delete" class="zoneControlDelete" value="X">
- </div>
- <div class="zoneControlDownWrapper">
- <input type="button" name="zone2Down" class="zoneControlDown" value="&#9660;" disabled>
- </div>
- <div class="zoneInfo">
- PST [-08:00]
- </div>
- </th>
- </tr>
- </table>
-
- <div id="tableAndSelectorWrapper">
- <form id="intervalSelectorWrapperA">
- <input type="range" min="0" max="36" value="18" id="intervalA" name="intervalA">
- </form>
-
- <div id="tableSubWrapper">
- <div id="intervalHilight"></div>
- <table id="zoneTable">
- <tr>
- <td>
- <div class="day">Sun</div>
- <time>20:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>21:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>22:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>23:00</time>
- </td>
- <td class="now">
- <div class="day">Mon</div>
- <time>00:00</time>
- </td>
- <td>
- <div class="day">Mon</div>
- <time>01:00</time>
- </td>
- <td>
- <div class="day">Mon</div>
- <time>02:00</time>
- </td>
- <td>
- <div class="day">Mon</div>
- <time>03:00</time>
- </td>
- <td>
- <div class="day">Mon</div>
- <time>04:00</time>
- </td>
- </tr>
- <tr>
- <td>
- <div class="day">Sun</div>
- <time>12:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>13:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>14:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>15:00</time>
- </td>
- <td class="now">
- <div class="day">Sun</div>
- <time>16:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>17:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>18:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>19:00</time>
- </td>
- <td>
- <div class="day">Sun</div>
- <time>20:00</time>
- </td>
- </tr>
- </table>
- </div>
- <form id="intervalSelectorWrapperB">
- <input type="range" min="0" max="36" value="18" id="intervalB" name="intervalB">
- </form>
- </div>
- </div>
- <form id="shareControls">
- <label for="shareGCal">share hilighted interval via</label>
- <input type="button" id="shareGCal" name="shareGcal" value="Google Calendar">
- <input type="button" id="shareGmail" name="shareGmail" value="GMail">
- <input type="button" id="shareRawText" name="shareRawText" value="raw text">
- </form>
- </div>
- </body>
-</html>
diff --git a/cal/alt.html b/cal/alt.html
deleted file mode 100644
index eb8a394..0000000
--- a/cal/alt.html
+++ /dev/null
@@ -1,178 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="description" content="Planetary Gears is a lightweight world clock web application in jQuery, fuse.js, and moment-timezone" />
- <meta name="HandheldFriendly" content="True" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Planetary Gears - Yet Another World Clock Webapp</title>
- <link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/dark.css">
- </head>
- <body>
- <div id="header">
- <h1>Planetary Gears</h1>
- <h2>yet another world clock webapp</h2>
- </div>
- <div id="shroud"></div>
-
- <nav>
- <a href="/alt.html">converter</a><a href="/timer/alt.html">timer/stopwatch</a><a class="activeButton" href="/cal/alt.html">calendar</a>
- </nav>
-
- <div id="calendarSpacer"></div>
-
-
- <div id="bigWrapper">
-
- <div id="controls">
- <form id="calendarSelector">
- <input type="button" id="thisMonth" name="thisMonth" value="This Month" class="activeButton">
- <input type="button" id="thisYear" name="thisYear" value="This Year">
- <input type="button" id="nextYear" name="nextYear" value="Next Year">
- </form>
- </div>
-
- <div id="calendarWrapper">
- <h4>October</h4>
- <table class="calendar">
- <tr>
- <th>
- Sun
- </th>
- <th>
- Mon
- </th>
- <th>
- Tue
- </th>
- <th>
- Wed
- </th>
- <th>
- Thu
- </th>
- <th>
- Fri
- </th>
- <th>
- Sat
- </th>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- </td>
- <td>
- 1
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- </tr>
- <tr>
- <td>
- 6
- </td>
- <td>
- 7
- </td>
- <td>
- 8
- </td>
- <td>
- 9
- </td>
- <td>
- 10
- </td>
- <td>
- 11
- </td>
- <td>
- 12
- </td>
- </tr>
- <tr>
- <td>
- 13
- </td>
- <td>
- 14
- </td>
- <td>
- 15
- </td>
- <td>
- 16
- </td>
- <td>
- 17
- </td>
- <td>
- 18
- </td>
- <td>
- 19
- </td>
- </tr>
- <tr>
- <td>
- 20
- </td>
- <td>
- 21
- </td>
- <td>
- 22
- </td>
- <td>
- 23
- </td>
- <td>
- 24
- </td>
- <td>
- 25
- </td>
- <td>
- 26
- </td>
- </tr>
- <tr>
- <td>
- 27
- </td>
- <td>
- 28
- </td>
- <td>
- 29
- </td>
- <td>
- 30
- </td>
- <td>
- 31
- </td>
- <td>
- </td>
- <td>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </body>
-</html>
diff --git a/cal/index.html b/cal/index.html
index 04b4b14..95d1ed1 100644
--- a/cal/index.html
+++ b/cal/index.html
@@ -10,8 +10,8 @@
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="/node_modules/jquery/dist/jquery.min.js" type="application/javascript"></script>
- <script src="/node_modules/moment/moment.js" type="application/javascript"></script>
- <script src="/node_modules/moment-timezone/builds/moment-timezone-with-data.js" type="application/javascript"></script>
+ <script src="/node_modules/moment/min/moment.min.js" type="application/javascript"></script>
+ <script src="/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js" type="application/javascript"></script>
<script src="/setOption.js" type="application/javascript"></script>
<script src="/cal.js" type="application/javascript"></script>
</head>
diff --git a/index.html b/index.html
index 48f6e57..bf46373 100644
--- a/index.html
+++ b/index.html
@@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Planetary Gears - World Clock</title>
<link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="stylesheet" type="text/css" href="/min.css">
<script src="/node_modules/jquery/dist/jquery.min.js" type="application/javascript"></script>
- <script src="/node_modules/moment/moment.js" type="application/javascript"></script>
- <script src="/node_modules/moment-timezone/builds/moment-timezone-with-data.js" type="application/javascript"></script>
+ <script src="/node_modules/moment/min/moment.min.js" type="application/javascript"></script>
+ <script src="/node_modules/moment-timezone/builds/moment-timezone-with-data.min.js" type="application/javascript"></script>
<script src="/node_modules/fuse.js/dist/fuse.js" type="application/javascript"></script>
<script src="/table.js" type="application/javascript"></script>
<script src="/setOption.js" type="application/javascript"></script>
diff --git a/min.css b/min.css
new file mode 100644
index 0000000..a1fee1a
--- /dev/null
+++ b/min.css
@@ -0,0 +1 @@
+@font-face{font-family:montserrat;src:url(Montserrat-Regular.ttf) format('truetype');font-weight:400;font-style:normal}@font-face{font-family:montserrat;src:url(Montserrat-Bold.ttf) format('truetype');font-weight:700;font-style:normal}body{color:#000;background:#bbbbbbb4;text-align:center;font-family:montserrat;margin-left:0;margin-right:0;margin-bottom:0;margin-top:0;border:none;width:100%;height:100vh}#header{position:relative;width:100%;height:auto;left:0;margin-left:0;margin-top:0;margin-bottom:0;padding-bottom:20px;background-color:#1264b8;background-size:100% 100%;background-position:top center;overflow:visible;z-index:3;box-shadow:0 0 5px black}h1{position:relative;color:#eee;line-height:35px;margin-top:0;margin-bottom:0;font-size:32px;position:relative;z-index:3}h2{position:relative;color:#eee;font-size:14px;margin-top:0;line-height:20px;z-index:3}nav{position:sticky;width:auto;margin-top:-29px;margin-bottom:0;background:#1264b8;padding:4px;z-index:4;top:-1px}nav a{padding-left:4px;padding-right:4px;margin-left:-1px;border-style:solid;border-width:1px;border-color:#064899;color:#fff;text-decoration:none;background:#2293eb;border-radius:4px}@media screen and (max-width:500px){nav a{font-size:3vw}}#localTime,#timerContainer{position:relative;display:inline-block;color:#000;width:auto;margin-top:10px;height:auto}#timerContainer{border:1px solid #797979;box-shadow:0 0 5px #000;padding:4px;background:#fff;border-radius:4px}h3{font-size:42px;position:relative;margin-top:0;margin-bottom:0;z-index:2}h4{position:relative;margin-top:0;margin-bottom:0;z-index:2}h5{position:relative;margin-top:0;margin-bottom:0;z-index:2}select{background:#fff;color:#000;border:#797979 solid 1px}input{background:#fff;color:#000;border-radius:0}#calendarSpacer{height:10px}input[type=button]{background:#2293eb;border-style:solid;border-width:0;border-color:#797979;color:#fff;border-radius:4px}input.activeButton,input[type=button]:active,a.activeButton{background:#12b6b9;color:#000}#searchBox{position:relative;width:385px;left:50%;margin-top:10px;margin-bottom:10px;margin-left:-193px;;display:grid;grid-template-columns:1fr 35px;text-align:left;box-shadow:0 0 5px #000;border-radius:4px;background:#fff}@media screen and (max-width:480px){#searchBox{width:80vw;left:10vw;margin-left:0}}#tzSearchBox{display:relative;background:rgba(0,0,0,0);color:#000;padding:3px;border:none;grid-column:1/2;grid-row:1;z-index:2;border:none}#tzSearchButton{background:#2293eb;text-align:center;color:#fff;border:none;grid-row:1;grid-column:2;border-radius:4px}#tzSearchResults{position:absolute;overflow:auto;top:100%;width:100%;height:auto;max-height:50vh;border:1px solid #797979;box-shadow:0 0 5px #000;z-index:20;background:#fff;display:none}#bigWrapper{position:relative;display:inline-block;width:auto;max-width:100vw;background:#fff;box-shadow:0 0 5px #000;z-index:2;padding:4px;border-radius:4px}#controls{position:relative;padding-top:4px;padding-bottom:4px}#timerContainer #controls,#timerContainer #timerControls{position:relative;z-index:10}label{font-size:12px}input[type=number],select{border:1px #797979 solid;background:white;color:black}#displayWindow,#timerHours,#timerMinutes,#timerSeconds{border:1px #797979 solid;width:30px}#tableWrapper{position:relative;display:grid;grid-template-columns:155px 1fr;grid-template-rows:24px 1fr 24px;grid-gap:0}#tableAndSelectorWrapper{grid-row:1/4;grid-column:2;display:grid;grid-template-rows:24px 1fr 24px;grid-template-columns:1fr;padding:0 0 0 0;position:relative;overflow:auto}#tableSubWrapper{grid-row:2;grid-column:1;padding:0 0 0 0;position:relative}#intervalSelectorWrapperA{grid-row:1;grid-column:1}#intervalA,#intervalB{position:relative;width:100%;appearance:none;background:#c8c8c8;outline:none;height:4px;left:0;margin-left:-2px;margin-bottom:3px}#intervalA::-moz-range-thumb,#intervalB::-moz-range-thumb{width:8px;height:8px;background:#fff;box-shadow:0 0 5px #000;cursor:pointer;border-radius:2;border:none}#intervalSelectorWrapperB{grid-row:3;grid-column:1}#zoneHeaders{width:140px;margin-top:1px;grid-row:2/3;grid-column:1;border-collapse:collapse}#zoneTable{display:inline-block;padding-top:3px}.day{font-size:9px}table{display:inline-block;border-collapse:collapse}table th{position:relative;margin-bottom:2px;border-style:solid;border-color:#797979;border-width:1px;border-collapse:collapse;padding:4px;border-radius:4px;margin-top:2px}table td{border-style:solid;border-color:#797979;border-width:1px;border-collapse:collapse;padding:4px}#zoneHeaders th{height:40px;width:135px;display:grid;grid-gap:0;grid-template-rows:13px 14px 13px;grid-templates-columns:13px 1fr;font-size:14px;line-height:40px;padding:4px}.zoneControlUpWrapper input[type=button],.zoneControlDownWrapper input[type=button],.zoneControlDeleteWrapper input[type=button]{position:absolute;left:0;top:0;right:4px;height:12px;text-align:left;font-size:8px;border:none;background:rgba(0,0,0,0);color:#1264B9}.zoneControlUpWrapper{position:relative;grid-row:1;grid-column:1}.zoneControlDownWrapper{position:relative;grid-row:3;grid-column:1}.zoneControlDeleteWrapper{position:relative;grid-row:2;grid-column:1}.zoneInfo{grid-row:1/2;grid-column:2/3;text-align:right;height:27px}.zoneInterval{grid-row:3;grid-column:2/3;text-align:right;height:13px;font-size:10px}#zoneTable table tr td{height:40px;max-height:40px!important;width:40px!important;max-width:40px;font-size:10px;min-width:40px;table-layout:fixed;background:#bbdefbd4;font-size:11px}.early{background:#bbdefb6b!important;color:black}.late{background:#1264b9c9!important;color:white}.working{background:#bbdefbd4!important}.weekend{background:#ff980044!important;color:black}.workingEven{background:#eeffffff!important}.earlyEven{background:#eeffff33!important;color:black}.lateEven{background:#5b91ecff!important;color:white}.weekendEven{background:#ffc94744!important;color:black}input[type=button]:disabled{color:#797979}#calendarWrapper{padding-left:4px;padding-right:4px}#shareControls{padding-bottom:4px;padding-left:4px;padding-right:4px}#intervalHilight{position:absolute;height:100%;grid-row:2/3;grid-column:1;border:2px solid #12b6b9;background:rgba(18,182,185,.3);display:none;margin-top:-3px}#now{position:absolute;grid-row:2/3;width:3px;height:100%;background:#2293eb;display:block;margin-top:-2px;padding-bottom:1px}#clipboard{position:absolute;top:0;left:0;width:10px;height:10px;display:hidden;overflow:hidden}#tzSearchResults input{margin-top:1px;margin-bottom:1px;padding:2px;color:#000;background:#fff;width:100%;text-align:left}#tzSearchResults input.activeButton{background:#12b6b9}input.searchResult:focus{border:1px dashed #797979}#chime{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;display:hidden}.calendar tr th{width:32px!important;max-width:32px!important;table-layout:fixed;font-size:11px}#monthSelect{width:100px}#yearSelect,#wholeYearSelect{width:50px}#shareRawText{padding:8px;font-size:12px}
diff --git a/searchbar.js b/searchbar.js
index 534cacf..27b6b46 100644
--- a/searchbar.js
+++ b/searchbar.js
@@ -35,8 +35,6 @@ searchbar.getZones = function(r)
{
ret += '<input type="button" value="' + zones[x] + '">';
i++;
- if (i >= 10)
- break;
}
return ret;
}
diff --git a/style.css b/style.css
index d320e0f..e3a509b 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@
body
{
color:#000000;
- background:#bbbbbb4f;
+ background:#bbbbbbb4;
text-align:center;
font-family: montserrat;
margin-left: 0px;
diff --git a/timer/alt.html b/timer/alt.html
deleted file mode 100644
index 1c865ee..0000000
--- a/timer/alt.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="description" content="Planetary Gears is a lightweight world clock web application in jQuery, fuse.js, and moment-timezone" />
- <meta name="HandheldFriendly" content="True" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Planetary Gears - Yet Another World Clock Webapp</title>
- <link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/dark.css">
- </head>
- <body>
- <div id="header">
- <h1>Planetary Gears</h1>
- <h2>yet another world clock webapp</h2>
- </div>
- <div id="shroud"></div>
-
- <nav>
- <a href="/alt.html">converter</a><a class="activeButton" href="/timer/alt.html">timer/stopwatch</a><a href="/cal/alt.html">calendar</a>
- </nav>
-
- <div id="timerContainer">
- <div id="controls">
- <form id="timerType">
- <input type="button" id="timerMode" name="timerMode" value="Timer" class="activeButton">
- <input type="button" id="stopwatchMode" name="stopwatchMode" value="Stopwatch">
- </form>
- </div>
- <h3><time>00:00</time></h3>
- <div id="timerControls">
- <input type="number" id="timerHours" name="timerHours" min="0" max="999" placeholder="00">:
- <input type="number" id="timerMinutes" name="timerMinutes" min="0" max="59" placeholder="00">
- <input type="button" id="startStop" name="startStop" value="Start/Stop">
- </div>
- </div>
-
- </body>
-</html>
diff --git a/timer/index.html b/timer/index.html
index f19fc77..db2e9c5 100644
--- a/timer/index.html
+++ b/timer/index.html
@@ -8,9 +8,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Planetary Gears - Timer/Stopwatch</title>
<link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" type="text/css" href="/style.css">
+ <link rel="stylesheet" type="text/css" href="/min.css">
<script src="/node_modules/jquery/dist/jquery.min.js" type="application/javascript"></script>
- <script src="/node_modules/moment/moment.js" type="application/javascript"></script>
+ <script src="/node_modules/moment/min/moment.min.js" type="application/javascript"></script>
<script src="/setOption.js" type="application/javascript"></script>
<script src="/timer.js" type="application/javascript"></script>
@@ -35,7 +35,7 @@
<h3><time>00:00:00</time></h3>
<div id="timerControls">
<div id="timerSetup">
- <input type="number" id="timerHours" name="timerHours" min="0" max="23" placeholder="00">:<input type="number" id="timerMinutes" name="timerMinutes" min="0" max="59" placeholder="00">:<input type="number" id="timerSeconds" name="timerSeconds" min="0" max="59" placeholder="00"><br/>
+ <label for="timerHours">set&rarr; </label><input type="number" id="timerHours" name="timerHours" min="0" max="23" placeholder="00">:<input type="number" id="timerMinutes" name="timerMinutes" min="0" max="59" placeholder="00">:<input type="number" id="timerSeconds" name="timerSeconds" min="0" max="59" placeholder="00"><br/>
<input type="checkbox" id="chimeBool" name="chimeBool" checked>
<label for="chimeBool">Play chime when time up</label>
</div>