nilix/gears
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

minify CSS, switch to minified moment[-timezone], added a label (set->) for timer input

Browse source
This commit is contained in:
Iris Lightshard 2019-11-20 09:28:30 -05:00
parent 5212a10c41
commit 9f7e0efc61
9 changed files with 10 additions and 417 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

188
alt.html
View file

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

178
cal/alt.html
View file

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

4
cal/index.html
View file

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

6
index.html
View file

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

1
min.css Normal file
View file

File diff suppressed because one or more lines are too long

2
searchbar.js
View file

@ -35,8 +35,6 @@ searchbar.getZones = function(r)
{
ret += '<input type="button" value="' + zones[x] + '">';
i++;
if (i >= 10)
break;
}
return ret;
}

2
style.css
View file

@ -18,7 +18,7 @@
body
{
color:#000000;
background:#bbbbbb4f;
background:#bbbbbbb4;
text-align:center;
font-family: montserrat;
margin-left: 0px;

40
timer/alt.html
View file

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

6
timer/index.html
View file

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