Skip to content

Commit 9c10367

Browse files
simonwsimonw
committed
unix-timestamp
https://gist.github.com/simonw/8c04788c5e4db11f6324ef5962127ecb
1 parent 7eff228 commit 9c10367

File tree

2 files changed

+187
-1
lines changed

2 files changed

+187
-1
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Prompts used are linked to from [the commit messages](https://github.com/simonw/
1818
- [Extract URLs](https://tools.simonwillison.net/extract-urls) - copy a section from a web page to your clipboard, paste it in here and get back a plain text list of all of the linked URLs from that section
1919
- [EXIF Data Viewer](https://tools.simonwillison.net/exif) - view EXIF data for an image
2020
- [MDN Browser Support Timelines](https://tools.simonwillison.net/mdn-timelines) - search for web features and view the browser support timeline pulled from [MDN](https://developer.mozilla.org/)
21-
21+
- [Timestamp Converter](https://tools.simonwillison.net/unix-timestamp) - convert between Unix timestamps and human-readable dates
2222

2323
## LLM playgrounds and debuggers
2424

‎unix-timestamp.html

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Timestamp Converter</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
15+
line-height: 1.5;
16+
background-color: #f5f5f5;
17+
color: #333;
18+
padding: 1rem;
19+
min-height: 100vh;
20+
}
21+
22+
.container {
23+
max-width: 500px;
24+
margin: 0 auto;
25+
background: white;
26+
padding: 1.5rem;
27+
border-radius: 8px;
28+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
29+
}
30+
31+
h1 {
32+
font-size: 1.5rem;
33+
margin-bottom: 1.5rem;
34+
color: #1a1a1a;
35+
}
36+
37+
.input-group {
38+
margin-bottom: 1.5rem;
39+
}
40+
41+
label {
42+
display: block;
43+
font-size: 0.875rem;
44+
font-weight: 500;
45+
margin-bottom: 0.5rem;
46+
color: #4a4a4a;
47+
}
48+
49+
input {
50+
width: 100%;
51+
padding: 0.75rem;
52+
font-size: 1rem;
53+
border: 1px solid #ddd;
54+
border-radius: 4px;
55+
transition: border-color 0.2s, box-shadow 0.2s;
56+
}
57+
58+
input:focus {
59+
outline: none;
60+
border-color: #2563eb;
61+
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
62+
}
63+
64+
.time-display {
65+
margin-bottom: 1rem;
66+
}
67+
68+
.time-display-label {
69+
font-size: 0.875rem;
70+
font-weight: 500;
71+
margin-bottom: 0.5rem;
72+
color: #4a4a4a;
73+
}
74+
75+
.time-display-value {
76+
background-color: #f8f9fa;
77+
padding: 0.75rem;
78+
border-radius: 4px;
79+
font-family: monospace;
80+
font-size: 0.875rem;
81+
word-wrap: break-word;
82+
}
83+
84+
@media (max-width: 480px) {
85+
body {
86+
padding: 0.5rem;
87+
}
88+
89+
.container {
90+
padding: 1rem;
91+
}
92+
93+
input {
94+
font-size: 16px; /* Prevents zoom on mobile */
95+
}
96+
}
97+
</style>
98+
</head>
99+
<body>
100+
<div class="container">
101+
<h1>Timestamp Converter</h1>
102+
103+
<div class="input-group">
104+
<label for="timestamp">Unix Timestamp</label>
105+
<input
106+
type="text"
107+
id="timestamp"
108+
placeholder="Enter Unix timestamp..."
109+
autocomplete="off"
110+
>
111+
</div>
112+
113+
<div class="time-display">
114+
<div class="time-display-label">UTC Time:</div>
115+
<div id="utcTime" class="time-display-value"></div>
116+
</div>
117+
118+
<div class="time-display">
119+
<div class="time-display-label">Local Time:</div>
120+
<div id="localTime" class="time-display-value"></div>
121+
</div>
122+
</div>
123+
124+
<script>
125+
const timestampInput = document.getElementById('timestamp');
126+
const utcTimeDiv = document.getElementById('utcTime');
127+
const localTimeDiv = document.getElementById('localTime');
128+
129+
function formatUTCDate(date) {
130+
return date.toLocaleString('en-US', {
131+
weekday: 'long',
132+
year: 'numeric',
133+
month: 'long',
134+
day: 'numeric',
135+
hour: '2-digit',
136+
minute: '2-digit',
137+
second: '2-digit',
138+
timeZone: 'UTC',
139+
timeZoneName: 'short'
140+
});
141+
}
142+
143+
function formatLocalDate(date) {
144+
return date.toLocaleString('en-US', {
145+
weekday: 'long',
146+
year: 'numeric',
147+
month: 'long',
148+
day: 'numeric',
149+
hour: '2-digit',
150+
minute: '2-digit',
151+
second: '2-digit',
152+
timeZoneName: 'short'
153+
});
154+
}
155+
156+
function updateTimes() {
157+
const timestamp = timestampInput.value.trim();
158+
159+
if (!timestamp) {
160+
utcTimeDiv.textContent = '—';
161+
localTimeDiv.textContent = '—';
162+
return;
163+
}
164+
165+
// Handle both seconds and milliseconds
166+
const ms = timestamp.length <= 10 ? timestamp * 1000 : timestamp;
167+
const date = new Date(Number(ms));
168+
169+
if (isNaN(date.getTime())) {
170+
utcTimeDiv.textContent = 'Invalid timestamp';
171+
localTimeDiv.textContent = 'Invalid timestamp';
172+
return;
173+
}
174+
175+
utcTimeDiv.textContent = formatUTCDate(date);
176+
localTimeDiv.textContent = formatLocalDate(date);
177+
}
178+
179+
timestampInput.addEventListener('input', updateTimes);
180+
181+
// Initialize with current timestamp
182+
timestampInput.value = Math.floor(Date.now() / 1000);
183+
updateTimes();
184+
</script>
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)