claude.html
Changed around line 19
- width: DOT_SIZEpx;
- height: DOT_SIZEpx;
+ width: 8px;
+ height: 8px;
Changed around line 134
- for (let minute = 0; minute < 60; minute += INCREMENT) {
+ for (let minute = 0; minute < 60; minute += 10) {
index.scroll
Changed around line 1
- replace INCREMENT 10
- replace DOT_SIZE 10
index.scroll
Changed around line 6: center
- import claude.html
+ claude.html
index.scroll
Changed around line 6: center
- claude.html
+ import claude.html
claude.html
Changed around line 19
- width: 8px;
- height: 8px;
+ width: DOT_SIZEpx;
+ height: DOT_SIZEpx;
claude.html
Changed around line 134
- for (let minute = 0; minute < 60; minute += 10) {
+ for (let minute = 0; minute < 60; minute += INCREMENT) {
index.scroll
Changed around line 1
+ replace INCREMENT 10
+ replace DOT_SIZE 10
claude.html
Changed around line 19
- width: 4px;
- height: 4px;
+ width: 8px;
+ height: 8px;
claude.html
Changed around line 134
- for (let minute = 0; minute < 60; minute += 5) {
+ for (let minute = 0; minute < 60; minute += 10) {
claude.html
Changed around line 6
- border: 4px solid #e5e7eb;
claude.html
Changed around line 26
- transition: background-color 0.2s;
+ transition: all 0.2s;
claude.html
Changed around line 31
+ width: 20px;
+ height: 20px;
claude.html
Changed around line 20
- width: 8px;
- height: 8px;
+ width: 4px;
+ height: 4px;
claude.html
Changed around line 81
- font-weight: bold;
claude.html
Changed around line 79
+ #alarm-count {
+ font-size: 24px;
+ font-weight: bold;
+ }
-
claude.html
Changed around line 93
+ function formatTime(hour, minute = 0) {
+ const period = hour >= 12 ? "pm" : "am";
+ const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+ return {
+ label:
+ hour === 0
+ ? "midnight"
+ : hour === 12
+ ? "noon"
+ : `${displayHour}${period}`,
+ time: `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`,
+ display: `${displayHour}:${minute.toString().padStart(2, "0")}${period}`,
+ };
+ }
+
Changed around line 119
- label.textContent =
- hour === 0
- ? "midnight"
- : hour === 12
- ? "noon"
- : (hour % 12).toString() + (hour > 11 ? "pm" : "am");
+ label.textContent = formatTime(hour).label;
Changed around line 138
- const time = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+ const formatted = formatTime(hour, minute);
- timeSlot.title = time;
- timeSlot.onclick = () => toggleAlarm(time, timeSlot);
+ timeSlot.title = formatted.time;
+ timeSlot.onclick = () =>
+ toggleAlarm(formatted.time, formatted.display, timeSlot);
- minuteLabel.textContent = time;
+ minuteLabel.textContent = formatted.display;
Changed around line 159
- function toggleAlarm(time, slot) {
+ function toggleAlarm(time, display, slot) {
Changed around line 177
+ const [hour, minute] = time.split(":").map(Number);
+ const formatted = formatTime(hour, minute);
- tag.textContent = time;
+ tag.textContent = formatted.display;
- toggleAlarm(time, slot);
+ toggleAlarm(time, formatted.display, slot);
claude.html
Changed around line 84
-
24H
+
index.scroll
Changed around line 1
+ center
- center
index.scroll
Changed around line 1
+ Inspired by this tweet
+ https://x.com/rauchg/status/1863457463242039562 this tweet
index.scroll
Changed around line 1
- # A New Alarm Clock UI
+ ## A New Alarm Clock UI
index.scroll
Changed around line 1
+ center
index.scroll
Changed around line 1
+ # A New Alarm Clock UI
- claude.html
+ claude.html
index.scroll
Changed around line 1
- theme roboto
-
- Hello World my name is
+ font Helvetica
+ claude.html
claude.html
Changed around line 105
- hour === 12
- ? "noon"
- : (hour % 12).toString() + (hour > 11 ? "pm" : "am");
+ hour === 0
+ ? "midnight"
+ : hour === 12
+ ? "noon"
+ : (hour % 12).toString() + (hour > 11 ? "pm" : "am");
claude.html
Changed around line 105
- (hour % 12).toString() + (hour > 11 ? "pm" : "am");
+ hour === 12
+ ? "noon"
+ : (hour % 12).toString() + (hour > 11 ? "pm" : "am");
claude.html
Changed around line 104
- label.textContent = hour.toString() + (hour > 11 ? "pm" : "am");
+ label.textContent =
+ (hour % 12).toString() + (hour > 11 ? "pm" : "am");
claude.html
Changed around line 104
- label.textContent = hour.toString() + hour > 11 ? "pm" : "am";
+ label.textContent = hour.toString() + (hour > 11 ? "pm" : "am");
claude.html
Changed around line 104
- label.textContent = hour.toString() + "am";
+ label.textContent = hour.toString() + hour > 11 ? "pm" : "am";
claude.html
Changed around line 104
- label.textContent = hour.toString();
+ label.textContent = hour.toString() + "am";
claude.html
Changed around line 104
- label.textContent = hour.toString().padStart(2, "0");
+ label.textContent = hour.toString();
claude.html
Changed around line 11
+ .hour-label {
+ position: absolute;
+ font-size: 14px;
+ color: #6b7280;
+ transform: translate(-50%, -50%);
+ }
+
Changed around line 37
+ .minute-label {
+ position: absolute;
+ background: #1f2937;
+ color: white;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 12px;
+ transform: translate(-50%, -50%);
+ opacity: 0;
+ transition: opacity 0.2s;
+ pointer-events: none;
+ z-index: 10;
+ }
+
+ .time-slot:hover + .minute-label {
+ opacity: 1;
+ }
+
Changed around line 93
+ function createHourLabels() {
+ const clock = document.querySelector(".clock");
+
+ for (let hour = 0; hour < 24; hour++) {
+ const angle = (hour / 24) * 360 - 90;
+ const radius = 160;
+ const x = 200 + radius * Math.cos((angle * Math.PI) / 180);
+ const y = 200 + radius * Math.sin((angle * Math.PI) / 180);
+
+ const label = document.createElement("div");
+ label.className = "hour-label";
+ label.textContent = hour.toString().padStart(2, "0");
+ label.style.left = `${x}px`;
+ label.style.top = `${y}px`;
+
+ clock.appendChild(label);
+ }
+ }
+
Changed around line 131
+ const minuteLabel = document.createElement("div");
+ minuteLabel.className = "minute-label";
+ minuteLabel.textContent = time;
+ minuteLabel.style.left = `${x}px`;
+ minuteLabel.style.top = `${y - 20}px`;
+
+ clock.appendChild(minuteLabel);
Changed around line 172
+ createHourLabels();