Skip to content

Commit 8067684

Browse files
simonwsimonw
authored
Update progress.html
Progress to midterms. https://claude.ai/share/dd9252c1-a24f-4c8d-9429-6195ce863960
1 parent 7cd7c03 commit 8067684

File tree

1 file changed

+83
-5
lines changed

1 file changed

+83
-5
lines changed

‎progress.html

+83-5
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,20 @@
2424
line-height: 1.2;
2525
}
2626

27+
h2 {
28+
font-size: 20px;
29+
margin-top: 32px;
30+
margin-bottom: 16px;
31+
color: #334155;
32+
}
33+
2734
.progress-container {
2835
background-color: #f0f0f0;
2936
border-radius: 8px;
3037
height: 32px;
3138
margin-bottom: 24px;
3239
overflow: hidden;
40+
position: relative;
3341
}
3442

3543
.progress-bar {
@@ -39,6 +47,24 @@
3947
width: 0;
4048
}
4149

50+
.midterm-marker {
51+
position: absolute;
52+
top: 0;
53+
height: 100%;
54+
width: 2px;
55+
background-color: #dc2626;
56+
z-index: 2;
57+
}
58+
59+
.midterm-label {
60+
position: absolute;
61+
top: -24px;
62+
transform: translateX(-50%);
63+
color: #dc2626;
64+
font-size: 14px;
65+
font-weight: 600;
66+
}
67+
4268
.details {
4369
color: #4b5563;
4470
font-size: 16px;
@@ -48,14 +74,20 @@
4874

4975
.stats {
5076
display: grid;
51-
grid-template-columns: 1fr;
77+
grid-template-columns: 1fr 1fr;
5278
gap: 16px;
79+
margin-bottom: 32px;
80+
}
81+
82+
.stats-single {
83+
grid-column: span 2;
5384
}
5485

5586
.stat-card {
56-
background-color: #f8fafc;
87+
background-color: #eff6ff;
5788
border-radius: 12px;
5889
padding: 20px;
90+
border-left: 4px solid #2563eb;
5991
}
6092

6193
.stat-label {
@@ -68,15 +100,32 @@
68100
font-size: 24px;
69101
font-weight: 600;
70102
}
103+
104+
.midterm-stats {
105+
display: grid;
106+
grid-template-columns: 1fr 1fr;
107+
gap: 16px;
108+
}
109+
110+
.midterm-card {
111+
background-color: #fef2f2;
112+
border-radius: 12px;
113+
padding: 20px;
114+
border-left: 4px solid #dc2626;
115+
}
71116
</style>
72117
</head>
73118
<body>
74119
<div class="container">
75120
<h1>Current presidential term progress</h1>
76121
<div class="progress-container">
77122
<div class="progress-bar" id="progressBar"></div>
123+
<div class="midterm-marker" id="midtermMarker"></div>
124+
<div class="midterm-label" id="midtermLabel">Midterms</div>
78125
</div>
79126
<div class="details" id="details"></div>
127+
128+
<h2>Presidential Term Stats</h2>
80129
<div class="stats">
81130
<div class="stat-card">
82131
<div class="stat-label">Days elapsed</div>
@@ -86,33 +135,62 @@ <h1>Current presidential term progress</h1>
86135
<div class="stat-label">Days remaining</div>
87136
<div class="stat-value" id="daysRemaining">-</div>
88137
</div>
89-
<div class="stat-card">
138+
<div class="stat-card stats-single">
90139
<div class="stat-label">Percentage complete</div>
91140
<div class="stat-value" id="percentage">-</div>
92141
</div>
93142
</div>
143+
144+
<h2>Midterm Elections Progress</h2>
145+
<div class="midterm-stats">
146+
<div class="midterm-card">
147+
<div class="stat-label">Days until midterms</div>
148+
<div class="stat-value" id="daysToMidterm">-</div>
149+
</div>
150+
<div class="midterm-card">
151+
<div class="stat-label">Percentage to midterms</div>
152+
<div class="stat-value" id="percentageToMidterm">-</div>
153+
</div>
154+
</div>
94155
</div>
95156

96157
<script type="module">
97158
const TERM_START = new Date('2025-01-20T12:00:00-05:00')
98159
const TERM_END = new Date('2029-01-20T12:00:00-05:00')
160+
const MIDTERM_ELECTION = new Date('2026-11-03T00:00:00-05:00') // First Tuesday in November 2026
99161
const TERM_LENGTH = TERM_END - TERM_START
162+
const MIDTERM_POSITION = (MIDTERM_ELECTION - TERM_START) / TERM_LENGTH * 100
100163

101164
function updateProgress() {
102165
const now = new Date()
103166
const elapsed = now - TERM_START
104167
const remaining = TERM_END - now
105168
const percentage = (elapsed / TERM_LENGTH) * 100
106-
169+
170+
// Midterm calculations
171+
const timeToMidterm = MIDTERM_ELECTION - now
172+
const percentageToMidterm = elapsed / (MIDTERM_ELECTION - TERM_START) * 100
173+
174+
// Update term progress
107175
document.getElementById('progressBar').style.width = `${percentage}%`
108-
document.getElementById('details').textContent = `Term started on January 20, 2025 and ends on January 20, 2029`
176+
document.getElementById('details').textContent = `Term started on January 20, 2025 and ends on January 20, 2029. Midterm elections will be held on November 3, 2026.`
109177

110178
const daysElapsed = Math.floor(elapsed / (1000 * 60 * 60 * 24))
111179
const daysRemaining = Math.ceil(remaining / (1000 * 60 * 60 * 24))
112180

113181
document.getElementById('daysElapsed').textContent = daysElapsed.toLocaleString()
114182
document.getElementById('daysRemaining').textContent = daysRemaining.toLocaleString()
115183
document.getElementById('percentage').textContent = `${percentage.toFixed(1)}%`
184+
185+
// Update midterm marker position
186+
document.getElementById('midtermMarker').style.left = `${MIDTERM_POSITION}%`
187+
document.getElementById('midtermLabel').style.left = `${MIDTERM_POSITION}%`
188+
189+
// Update midterm stats
190+
const daysToMidterm = Math.ceil(timeToMidterm / (1000 * 60 * 60 * 24))
191+
document.getElementById('daysToMidterm').textContent = timeToMidterm > 0 ? daysToMidterm.toLocaleString() : 'Completed'
192+
document.getElementById('percentageToMidterm').textContent = timeToMidterm > 0 ?
193+
`${Math.min(percentageToMidterm, 100).toFixed(1)}%` : '100%'
116194
}
117195

118196
updateProgress()

0 commit comments

Comments
 (0)