-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjquery_clock.html
More file actions
99 lines (84 loc) · 4.1 KB
/
jquery_clock.html
File metadata and controls
99 lines (84 loc) · 4.1 KB
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
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html>
<head>
<title>jQuery Clockery</title>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<header>
<div id="maintitle">
<h1>jQuery Clockery!*</h1>
<p>*an experiment in object-oriented javascript</p>
</div>
<div id="splash">
<h3>now in refreshing mint!</h3>
</div>
</header>
<hr />
<!--Input Form Section Below-->
<div id="form">
<div id="innerform">
<label>1. Add a name for your clock</label> <br />
<input id="addCity"></input>
<hr/>
<label>2. Select your clock's time zone from the drop-down menu</label> <br />
<!-- data here provided by http://michaelapproved.com/articles/timezone-dropdown-select-list -->
<select name="DropDownTimezone" id="addOffsetDropdown">
<option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10.0">(GMT -10:00) Hawaii</option>
<option value="-9.0">(GMT -9:00) Alaska</option>
<option value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-3.5">(GMT -3:30) Newfoundland</option>
<option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
<option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="3.5">(GMT +3:30) Tehran</option>
<option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="4.5">(GMT +4:30) Kabul</option>
<option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
<option value="5.75">(GMT +5:45) Kathmandu</option>
<option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
<option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
<h2>or</h2>
<label>add your GMT offset manually here</label>
<input id="addOffsetManual"> </input></br>
<p>Find your city's timezone offset <a href="http://en.wikipedia.org/wiki/List_of_UTC_time_offsets">here</a></p>
<hr />
<label>3.</label>
<button id="submitCity">Add your clock!</button>
<hr/>
<p>*Note: this service does not currently handle Daylight Saving Time</p>
<small>© Adam Jasiura 2013</small>
</div>
</div>
<!--Individual Clock Display Section Below-->
<div id="clockslist">
<ul id="cities"></ul>
</div>
</div><!--Container Div Closed-->
<!--Scripts Section-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="objectscript.js"></script>
</body>
</html>