index.html (raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!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 - World Clock</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/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> <script src="./searchbar.js" type="application/javascript"></script> <script src="./formatTime.js" type="application/javascript"></script> <script src="./worldClock.js" type="application/javascript"></script> </head> <body> <div id="header"> <h1>Planetary Gears</h1> <h2>a lightweight world clock webapp</h2> </div> <nav> <a class="activeButton" href="./">world clock</a><a href="./timer/">timer/stopwatch</a><a href="./cal/">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="text" id="tzSearchBox" name="tzSearch" autocomplete="off" placeholder="search for a timezone to add to the table..."> <input type="button" id="tzSearchButton" name="tzButton" value="go"> <div id="tzSearchResults"></div> </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"> </form> <form id="windowSelector"> <label for="displayWindow">showing</label> <input type="number" form="" id="displayWindow" name="displayWindow" min="8" max="168" value="24" step="8"> <label for="aroundNow">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="intervalSelectorWrapperA">use the sliders to select a time interval on the table</label><br/> <label>color key: <span class="early">early</span> <span class="working">working</span> <span class="late">late</span> <span class="weekend">weekend</span></label> </form> </div> <div id="tableWrapper"> <table id="zoneHeaders"> </table> <div id="tableAndSelectorWrapper"> <form id="intervalSelectorWrapperA"> <input type="range" min="0" max="48" value="24" id="intervalA" name="intervalA"> </form> <div id="tableSubWrapper"> <div id="intervalHilight"></div> <div id="now"></div> <div id="zoneTable"> </div> </div> <form id="intervalSelectorWrapperB"> <input type="range" min="0" max="48" value="24" id="intervalB" name="intervalB"> </form> </div> </div> <form id="shareControls"> <input type="button" id="shareRawText" name="shareRawText" value="Copy interval to clipboard"> </form> </div> <textarea id="clipboard"></textarea> </body> </html> |