Skip to content

Commit e62d0d3

Browse files
simonwsimonw
committed
california-clock-change
https://gist.github.com/simonw/9510723176f5b44ac1ebc495c95a4bc7
1 parent c96945c commit e62d0d3

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Prompts used are linked to from [the commit messages](https://github.com/simonw/
3131
## Miscellaneous
3232

3333
- [Arena animated](https://tools.simonwillison.net/arena-animated) animates the progression of the LMSYS Chatbot Arena, inspired by [this visualization](https://public.flourish.studio/visualisation/17992181/) by [Peter Gostev](https://www.linkedin.com/posts/peter-gostev_how-companies-llms-compare-over-the-course-activity-7196899934615257090-zilk) (via [Time-Winter-4319 on Reddit](https://www.reddit.com/r/LocalLLaMA/comments/1bp4j19/gpt4_is_no_longer_the_top_dog_timelapse_of/))
34+
- [California Clock Change](https://tools.simonwillison.net/california-clock-change) - shows when the clocks will next change for daylight saving time in California
3435

3536
## On Observable
3637

‎california-clock-change.html

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>California Clock Change - PST/PDT Only</title>
7+
<style>
8+
body {
9+
font-family: system-ui, -apple-system, sans-serif;
10+
margin: 0;
11+
padding: 20px;
12+
background-color: #f0f4f8;
13+
min-height: 100vh;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
.container {
19+
background: white;
20+
padding: 2rem;
21+
border-radius: 12px;
22+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
max-width: 600px;
24+
width: 90%;
25+
text-align: center;
26+
}
27+
h1 {
28+
color: #1a365d;
29+
font-size: 1.8rem;
30+
margin-bottom: 0.5rem;
31+
}
32+
.subtitle {
33+
color: #4a5568;
34+
margin-bottom: 1.5rem;
35+
}
36+
.info-box {
37+
background: #e6fffa;
38+
border: 2px solid #38b2ac;
39+
border-radius: 8px;
40+
padding: 1.5rem;
41+
margin: 1rem 0;
42+
font-size: 1.2rem;
43+
line-height: 1.6;
44+
}
45+
.highlight {
46+
color: #2b6cb0;
47+
font-weight: bold;
48+
}
49+
.tonight {
50+
display: inline-block;
51+
background: #f6e05e;
52+
color: #744210;
53+
padding: 0.2em 0.5em;
54+
border-radius: 4px;
55+
margin-left: 0.5em;
56+
font-weight: bold;
57+
}
58+
.wrong-timezone {
59+
background: #fed7d7;
60+
border: 2px solid #f56565;
61+
border-radius: 8px;
62+
padding: 1.5rem;
63+
margin: 1rem 0;
64+
font-size: 1.2rem;
65+
line-height: 1.6;
66+
color: #c53030;
67+
}
68+
@media (max-width: 480px) {
69+
.container {
70+
padding: 1.5rem;
71+
}
72+
h1 {
73+
font-size: 1.5rem;
74+
}
75+
.info-box {
76+
font-size: 1.1rem;
77+
padding: 1rem;
78+
}
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<div class="container">
84+
<h1>California Clock Change</h1>
85+
<div class="subtitle">For Pacific Time (PST/PDT) only</div>
86+
<div id="content">Loading...</div>
87+
</div>
88+
89+
<script>
90+
function isCaliforniaTimezone() {
91+
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
92+
return timezone === "America/Los_Angeles" ||
93+
timezone === "America/Pacific" ||
94+
timezone === "US/Pacific" ||
95+
timezone === "PST8PDT";
96+
}
97+
98+
function getNextCaliforniaChange() {
99+
const now = new Date();
100+
const year = now.getFullYear();
101+
102+
// Second Sunday in March
103+
const springForward = new Date(year, 2, 1 + (14 - new Date(year, 2, 1).getDay()));
104+
// First Sunday in November
105+
const fallBack = new Date(year, 10, 1 + (7 - new Date(year, 10, 1).getDay()));
106+
107+
if (now > fallBack) {
108+
return {
109+
date: new Date(year + 1, 2, 1 + (14 - new Date(year + 1, 2, 1).getDay())),
110+
isSpringForward: true
111+
};
112+
} else if (now > springForward) {
113+
return {
114+
date: fallBack,
115+
isSpringForward: false
116+
};
117+
} else {
118+
return {
119+
date: springForward,
120+
isSpringForward: true
121+
};
122+
}
123+
}
124+
125+
function formatDate(date) {
126+
const months = ['January', 'February', 'March', 'April', 'May', 'June',
127+
'July', 'August', 'September', 'October', 'November', 'December'];
128+
return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
129+
}
130+
131+
function updateInfo() {
132+
const content = document.getElementById('content');
133+
134+
if (!isCaliforniaTimezone()) {
135+
content.className = 'wrong-timezone';
136+
content.innerHTML = 'You appear to be outside of California/Pacific Time.<br>This tool only works for Pacific Time (PST/PDT).';
137+
return;
138+
}
139+
140+
const change = getNextCaliforniaChange();
141+
const saturday = new Date(change.date);
142+
saturday.setDate(change.date.getDate() - 1);
143+
144+
const now = new Date();
145+
const isTonight = now.getDate() === saturday.getDate() &&
146+
now.getMonth() === saturday.getMonth() &&
147+
now.getFullYear() === saturday.getFullYear();
148+
149+
const sleepEffect = change.isSpringForward ? 'lose an hour of sleep' : 'get an extra hour of sleep';
150+
const clockEffect = change.isSpringForward ?
151+
'clocks spring forward from 2:00 AM to 3:00 AM' :
152+
'clocks fall back from 2:00 AM to 1:00 AM';
153+
154+
const tonightBadge = isTonight ? '<span class="tonight">That\'s tonight!</span>' : '';
155+
156+
content.className = 'info-box';
157+
content.innerHTML = `
158+
When you go to bed on <span class="highlight">Saturday, ${formatDate(saturday)}</span>${tonightBadge},
159+
you will ${sleepEffect}!<br><br>
160+
The ${clockEffect} on
161+
<span class="highlight">Sunday, ${formatDate(change.date)}</span>.
162+
`;
163+
}
164+
165+
updateInfo();
166+
</script>
167+
</body>
168+
</html>

0 commit comments

Comments
 (0)