Skip to content

Commit 1cba17e

Browse files
simonwsimonw
authored
Create progress.html
Prompt to my custom Claude project for artifacts was: > Build a progress bar through the current US presidency It did the 2021 to 2025 one so I said: > That's wrong it started in January 2025 and ends four years later
1 parent dcc696f commit 1cba17e

File tree

1 file changed

+119
-0
lines changed

1 file changed

+119
-0
lines changed

‎progress.html

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
* {
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
font-family: Helvetica, Arial, sans-serif;
11+
margin: 0;
12+
padding: 20px;
13+
}
14+
15+
.container {
16+
max-width: 600px;
17+
margin: 0 auto;
18+
}
19+
20+
h1 {
21+
font-size: 24px;
22+
margin-bottom: 20px;
23+
}
24+
25+
.progress-container {
26+
background-color: #f0f0f0;
27+
border-radius: 4px;
28+
height: 24px;
29+
margin-bottom: 16px;
30+
overflow: hidden;
31+
}
32+
33+
.progress-bar {
34+
background-color: #2563eb;
35+
height: 100%;
36+
transition: width 0.5s ease;
37+
width: 0;
38+
}
39+
40+
.details {
41+
color: #4b5563;
42+
font-size: 14px;
43+
margin-bottom: 24px;
44+
}
45+
46+
.stats {
47+
display: grid;
48+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
49+
gap: 16px;
50+
}
51+
52+
.stat-card {
53+
background-color: #f8fafc;
54+
border-radius: 8px;
55+
padding: 16px;
56+
}
57+
58+
.stat-label {
59+
color: #64748b;
60+
font-size: 14px;
61+
margin-bottom: 4px;
62+
}
63+
64+
.stat-value {
65+
font-size: 18px;
66+
font-weight: 600;
67+
}
68+
</style>
69+
</head>
70+
<body>
71+
<div class="container">
72+
<h1>Current presidential term progress</h1>
73+
<div class="progress-container">
74+
<div class="progress-bar" id="progressBar"></div>
75+
</div>
76+
<div class="details" id="details"></div>
77+
<div class="stats">
78+
<div class="stat-card">
79+
<div class="stat-label">Days elapsed</div>
80+
<div class="stat-value" id="daysElapsed">-</div>
81+
</div>
82+
<div class="stat-card">
83+
<div class="stat-label">Days remaining</div>
84+
<div class="stat-value" id="daysRemaining">-</div>
85+
</div>
86+
<div class="stat-card">
87+
<div class="stat-label">Percentage complete</div>
88+
<div class="stat-value" id="percentage">-</div>
89+
</div>
90+
</div>
91+
</div>
92+
93+
<script type="module">
94+
const TERM_START = new Date('2025-01-20T12:00:00-05:00')
95+
const TERM_END = new Date('2029-01-20T12:00:00-05:00')
96+
const TERM_LENGTH = TERM_END - TERM_START
97+
98+
function updateProgress() {
99+
const now = new Date()
100+
const elapsed = now - TERM_START
101+
const remaining = TERM_END - now
102+
const percentage = (elapsed / TERM_LENGTH) * 100
103+
104+
document.getElementById('progressBar').style.width = `${percentage}%`
105+
document.getElementById('details').textContent = `Term started on January 20, 2025 and ends on January 20, 2029`
106+
107+
const daysElapsed = Math.floor(elapsed / (1000 * 60 * 60 * 24))
108+
const daysRemaining = Math.ceil(remaining / (1000 * 60 * 60 * 24))
109+
110+
document.getElementById('daysElapsed').textContent = daysElapsed.toLocaleString()
111+
document.getElementById('daysRemaining').textContent = daysRemaining.toLocaleString()
112+
document.getElementById('percentage').textContent = `${percentage.toFixed(1)}%`
113+
}
114+
115+
updateProgress()
116+
setInterval(updateProgress, 1000 * 60 * 60) // Update every hour
117+
</script>
118+
</body>
119+
</html>

0 commit comments

Comments
 (0)