minify CSS, switch to minified moment[-timezone], added a label (set->) for timer input
This commit is contained in:
parent
5212a10c41
commit
9f7e0efc61
9 changed files with 10 additions and 417 deletions
188
alt.html
188
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>
|
|
||||||
178
cal/alt.html
178
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>
|
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
<link rel="shortcut icon" href="/favicon.ico">
|
<link rel="shortcut icon" href="/favicon.ico">
|
||||||
<link rel="stylesheet" type="text/css" href="/style.css">
|
<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/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="/node_modules/moment-timezone/builds/moment-timezone-with-data.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="/setOption.js" type="application/javascript"></script>
|
||||||
<script src="/cal.js" type="application/javascript"></script>
|
<script src="/cal.js" type="application/javascript"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,10 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Planetary Gears - World Clock</title>
|
<title>Planetary Gears - World Clock</title>
|
||||||
<link rel="shortcut icon" href="/favicon.ico">
|
<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/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="/node_modules/moment-timezone/builds/moment-timezone-with-data.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="/node_modules/fuse.js/dist/fuse.js" type="application/javascript"></script>
|
||||||
<script src="/table.js" type="application/javascript"></script>
|
<script src="/table.js" type="application/javascript"></script>
|
||||||
<script src="/setOption.js" type="application/javascript"></script>
|
<script src="/setOption.js" type="application/javascript"></script>
|
||||||
|
|
|
||||||
1
min.css
Normal file
1
min.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -35,8 +35,6 @@ searchbar.getZones = function(r)
|
||||||
{
|
{
|
||||||
ret += '<input type="button" value="' + zones[x] + '">';
|
ret += '<input type="button" value="' + zones[x] + '">';
|
||||||
i++;
|
i++;
|
||||||
if (i >= 10)
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
color:#000000;
|
color:#000000;
|
||||||
background:#bbbbbb4f;
|
background:#bbbbbbb4;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
font-family: montserrat;
|
font-family: montserrat;
|
||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -8,9 +8,9 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Planetary Gears - Timer/Stopwatch</title>
|
<title>Planetary Gears - Timer/Stopwatch</title>
|
||||||
<link rel="shortcut icon" href="/favicon.ico">
|
<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/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="/setOption.js" type="application/javascript"></script>
|
||||||
<script src="/timer.js" type="application/javascript"></script>
|
<script src="/timer.js" type="application/javascript"></script>
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
<h3><time>00:00:00</time></h3>
|
<h3><time>00:00:00</time></h3>
|
||||||
<div id="timerControls">
|
<div id="timerControls">
|
||||||
<div id="timerSetup">
|
<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>
|
<input type="checkbox" id="chimeBool" name="chimeBool" checked>
|
||||||
<label for="chimeBool">Play chime when time up</label>
|
<label for="chimeBool">Play chime when time up</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue