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();
claude.html
Changed around line 1
+
+
+
+
+
+
+
+
+
24H
+
0 alarms
+
+
+
+
+
+
+
script.js
Changed around line 1
+ const clock = document.querySelector(".clock");
+
+ // Generate 288 segments (5-minute intervals in a 24-hour clock)
+ for (let i = 0; i < 288; i++) {
+ const segment = document.createElement("div");
+ segment.className = "segment";
+ segment.style.transform = `rotate(${(i * 360) / 288}deg)`;
+
+ // Click to toggle active state
+ segment.addEventListener("click", () => {
+ segment.classList.toggle("active");
+ });
+
+ clock.appendChild(segment);
+ }
script.js
styles.css
Changed around line 1
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background: #f4f4f9;
+ font-family: Arial, sans-serif;
+ }
+
+ .clock-container {
+ position: relative;
+ width: 400px;
+ height: 400px;
+ }
+
+ .clock {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: #fff;
+ border: 5px solid #ddd;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+ }
+
+ .clock .center-dot {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ background: #333;
+ border-radius: 50%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .clock div.segment {
+ position: absolute;
+ width: 50%;
+ height: 2px;
+ background: #ddd;
+ transform-origin: 100% 50%;
+ cursor: pointer;
+ transition: background 0.2s;
+ }
+
+ .clock div.segment.active {
+ background: #ff6f61;
+ }
styles.css
chatgpt.html
Changed around line 1
+
+
+
+
+
+ 24-Hour Alarm Clock
+
+
+
+
+
+
+
+
+
+
+
chatgpt.html
claude.html
.gitignore
Changed around line 1
+ .DS_Store
+ *.html
+ *.txt
+ *.xml
+ *.css
+ *.js
+ *.csv
+ requests.scroll
index.scroll
Changed around line 1
+ buildHtml
+ theme roboto
+
+ Hello World my name is