minify CSS, switch to minified moment[-timezone], added a label (set->) for timer input
Iris Lightshard nilix@nilfm.cc
9 files changed,
10 insertions(+),
417 deletions(-)
D
alt.html
@@ -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="▲" 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="▼"> - </div> - <div class="zoneInfo"> - UTC [+00:00] - </div> - </th> - </tr> - <tr> - <th> - <div class="zoneControlUpWrapper"> - <input type="button" name="zone2Up" class="zoneControlUp" value="▲"> - </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="▼" 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>
D
cal/alt.html
@@ -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>
M
cal/index.html
→
cal/index.html
@@ -10,8 +10,8 @@ <title>Planetary Gears - Calendar</title>
<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>
M
index.html
→
index.html
@@ -8,10 +8,10 @@ <meta name="HandheldFriendly" content="True" />
<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>
A
min.css
@@ -0,0 +1,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}
M
searchbar.js
→
searchbar.js
@@ -35,8 +35,6 @@ for (var x of r)
{ ret += '<input type="button" value="' + zones[x] + '">'; i++; - if (i >= 10) - break; } return ret; }
D
timer/alt.html
@@ -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>
M
timer/index.html
→
timer/index.html
@@ -8,9 +8,9 @@ <meta name="HandheldFriendly" content="True" />
<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 @@ </div>
<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→ </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>