-
Notifications
You must be signed in to change notification settings - Fork 5
/
popup.html
168 lines (168 loc) · 10.9 KB
/
popup.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<html>
<head>
<link type="text/css" rel="stylesheet" media="all" href="dist/utime.css" />
</head>
<body class="scroller">
<div id="popup-ct">
<div id="app-ct" class="container app-container">
<div class="input-groups scroller">
<div class="input-group input-group-primary" id="input-group-0">
<div class="input-group-field">
<input type="text" class="input-group-control input-0" placeholder="Enter a timestamp or date..." />
</div>
<div class="input-group-field">
<input type="text" class="input-group-control input-1" />
</div>
</div>
</div>
<div class="toolbar toolbar-bottom clearfix">
<div class="pull-left">
<button type="button" class="btn toolbar-btn add-input-group-btn" title="Add an input group">+</button>
</div>
<div class="pull-right">
<button type="button" class="btn toolbar-btn open-location" data-target="options">Options</button>
<button type="button" class="btn toolbar-btn open-location" data-target="help" title="Keyboard shortcuts and tips">?</button>
</div>
</div>
</div>
<div id="options-ct" class="container options-container hide">
<h1 class="heading">
<button type="button" class="btn close-btn open-location pull-right" data-target="app">×</button>
Options
</h1>
<form class="form options-form">
<div class="form-group">
<label for="">Input Mode</label>
<select id="option-input-mode" class="form-control">
<option value="auto">Auto-detect</option>
<option value="timestamp-date">Timestamp on top</option>
<option value="date-timestamp">Date on top</option>
</select>
</div>
<div class="form-group">
<label for="">Timestamp Unit</label>
<select id="option-timestamp-unit" class="form-control">
<option value="s">Seconds</option>
<option value="ms">Milliseconds</option>
</select>
</div>
<div class="form-group">
<label for="">Timezone</label>
<select id="option-timezone-offset" class="form-control">
<option value="local">Local time (computer's timezone)</option>
<option value="-12">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10">(GMT -10:00) Hawaii</option>
<option value="-9">(GMT -9:00) Alaska</option>
<option value="-8">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-7">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-6">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-5">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-4">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-3.5">(GMT -3:30) Newfoundland</option>
<option value="-3">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-2">(GMT -2:00) Mid-Atlantic</option>
<option value="-1">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option value="0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="1">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="2">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="3">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="3.5">(GMT +3:30) Tehran</option>
<option value="4">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="4.5">(GMT +4:30) Kabul</option>
<option value="5">(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">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="7">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="8">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="9">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
<option value="10">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="11">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="12">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
</div>
<div class="form-group">
<label for="">Date input order</label>
<select id="option-date-input-order" class="form-control">
<option value="mdy">Month/Day/Year</option>
<option value="dmy">Day/Month/Year</option>
</select>
</div>
<div class="form-group">
<label for="">Date output format</label>
<select id="option-date-output-format" class="form-control">
<option value="MMMM dS, yyyy">mmmm dS, yyyy</option>
<option value="ddd, MMMM dS, yyyy">ddd, mmmm dS, yyyy</option>
<option value="MMM d, yyyy">mmm d, yyyy</option>
<option value="M/d/yyyy">m/d/yyyy</option>
<option value="M/d/yy">m/d/yy</option>
<option value="d/M/yyyy">d/m/yyyy</option>
<option value="d/M/yy">d/m/yy</option>
<option value="M-d-yyyy">m-d-yyyy</option>
<option value="M-d-yy">m-d-yy</option>
<option value="d-M-yyyy">d-m-yyyy</option>
<option value="d-M-yy">d-m-yy</option>
<option value="M.d.yyyy">m.d.yyyy</option>
<option value="M.d.yy">m.d.yy</option>
<option value="d.M.yyyy">d.m.yyyy</option>
<option value="d.M.yy">d.m.yy</option>
<option value="yyyy-MM-ddTHH:mm:ss">YYYY-MM-DDThh:mm:ss (ISO 8601)</option>
</select>
</div>
<div class="form-group">
<label for="">Time output format</label>
<select id="option-time-output-format" class="form-control">
<option value="none">Don't display time</option>
<option value="h:mm:ss tt">h:mm:ss tt (12 hour)</option>
<option value="h:mm tt">h:mm tt (12 hour)</option>
<option value="H:mm:ss">H:mm:ss (24 hour)</option>
<option value="H:mm">H:mm (24 hour)</option>
</select>
</div>
</form>
<div class="toolbar toolbar-bottom clearfix">
<div class="pull-left">
<button type="button" class="btn toolbar-btn open-location" data-target="app">« Back</button>
</div>
</div>
</div>
<div id="help-ct" class="container help-container hide">
<h1 class="heading">
<button type="button" class="btn close-btn pull-right open-location" data-target="app">×</button>
Help
</h1>
<div class="content">
<h2 class="sec-heading">Keyboard shortcuts</h2>
<dl class="kb-shortcuts">
<dt><span class="shortcut-key">Shift</span> + <span class="shortcut-key">↓</span></dt>
<dd>Focus next input</dd>
<dt><span class="shortcut-key">Shift</span> + <span class="shortcut-key">↑</span></dt>
<dd>Focus previous input</dd>
<dt><span class="shortcut-key">Alt</span> + <span class="shortcut-key">A</span></dt>
<dd>Add input group</dd>
<dt><span class="shortcut-key">Alt</span> + <span class="shortcut-key">C</span></dt>
<dd>Clear focused input</dd>
<dt><span class="shortcut-key">Alt</span> + <span class="shortcut-key">D</span></dt>
<dd>Remove focused input group</dd>
</dl>
<h2 class="sec-heading">Pro Tips</h2>
<ul class="help-tips">
<li>Press enter on an empty input field to display the current timestamp/date.</li>
<li>Use relative dates such as "now", "today", "tomorrow" or "last friday"</li>
<li>Add additional input groups to convert and view multiple timestamps and dates at once</li>
<li>Right click a selected timestamp or date in a webpage and select "Convert with Utime"</li>
<li>In Chrome's address bar, type "ut" then press tab and enter a date or timestamp to convert it</li>
</ul>
</div>
<div class="toolbar toolbar-bottom clearfix">
<div class="pull-left">
<button type="button" class="btn toolbar-btn open-location" data-target="app">« Back</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="dist/utime-popup.js"></script>
</body>
</html>