Files
ash-pages/workout/2026-04-08.html
T
ash-bot 3515e88dca fix: add <base href=/ash/> to all HTML pages
Site served at ogle.fyi/ash/ via Traefik strip-prefix middleware.
Without base tag, relative links resolve to ogle.fyi/workout/ (404).
With base tag, links resolve correctly to /ash/workout/ etc.

Also fixed both template files for future generated pages.
2026-04-13 08:29:56 -07:00

295 lines
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/ash/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workout: Day B — April 8, 2026</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #0f0f0f;
color: #e0e0e0;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 40px 20px;
}
.container { max-width: 800px; width: 100%; }
h1 { font-size: 1.8rem; margin-bottom: 4px; color: #f97316; }
.breadcrumb { color: #666; margin-bottom: 24px; font-size: 0.85rem; }
.breadcrumb a { color: #888; text-decoration: none; }
.breadcrumb a:hover { color: #f97316; }
.date-header { color: #888; font-size: 0.9rem; margin-bottom: 16px; }
.day-badge { display: inline-block; background: rgba(249, 115, 22, 0.2); color: #f97316; padding: 4px 12px; border-radius: 16px; font-size: 0.85rem; font-weight: 500; margin-bottom: 24px; }
.section { margin-bottom: 32px; }
h2 { font-size: 1.2rem; color: #f97316; margin-bottom: 16px; }
.table {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
}
.table table {
width: 100%;
border-collapse: collapse;
}
.table th {
background: rgba(255,255,255,0.08);
padding: 12px 16px;
text-align: left;
font-weight: 500;
font-size: 0.85rem;
color: #888;
}
.table td {
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 0.95rem;
}
.exercise-name { font-weight: 500; }
.reps { color: #666; font-size: 0.9rem; }
.weight { color: #666; font-size: 0.9rem; }
.video-link {
color: #4a9eff;
text-decoration: none;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 4px;
}
.video-link:hover { color: #6bb3ff; }
.form-note { color: #666; font-size: 0.85rem; font-style: italic; margin-top: 4px; }
.note {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px;
margin-top: 16px;
color: #888;
font-size: 0.85rem;
}
.back-link {
display: inline-block;
color: #f97316;
text-decoration: none;
font-size: 0.85rem;
margin-top: 32px;
}
.back-link:hover { color: #ff8c42; }
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.wake-locked {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(249, 115, 22, 0.9);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
animation: pulse 2s infinite;
display: none;
}
</style>
</head>
<body>
<div class="container">
<p class="breadcrumb"><a href="../">Ash Pages</a> / <a href="index.html">Workouts</a> /</p>
<h1>💪 Workout Day</h1>
<div class="date-header">Wednesday, April 8, 2026</div>
<div class="day-badge">Day B — Full-Body Circuit</div>
<div class="section">
<h2>Main Workout</h2>
<div class="table">
<table>
<thead>
<tr>
<th style="width: 40px;">#</th>
<th style="width: 180px;">Exercise</th>
<th style="width: 100px;">Reps</th>
<th style="width: 120px;">Weight</th>
<th>Form Video</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="exercise-name">KB Around the World</td>
<td class="reps">20 (10/dir)</td>
<td class="weight">20 lb KB</td>
<td><a href="https://www.youtube.com/watch?v=CNZcc7Nadwk" class="video-link" target="_blank">▶ Watch</a></td>
</tr>
<tr>
<td>2</td>
<td class="exercise-name">DB Lateral Raises</td>
<td class="reps">15</td>
<td class="weight">5 lb pair → 10 lb</td>
<td><a href="https://www.youtube.com/watch?v=Y29xKcze8Ik" class="video-link" target="_blank">▶ Watch</a></td>
</tr>
<tr>
<td>3</td>
<td class="exercise-name">KB Sumo Deadlift</td>
<td class="reps">10</td>
<td class="weight">25 lb KB</td>
<td><a href="https://www.youtube.com/watch?v=CQ4Jkm-yKnw" class="video-link" target="_blank">▶ Watch</a></td>
</tr>
<tr>
<td>4</td>
<td class="exercise-name">DB Biceps Curls</td>
<td class="reps">10</td>
<td class="weight">10 lb pair → 12 lb</td>
<td><span class="form-note">standard curl form</span></td>
</tr>
<tr>
<td>5</td>
<td class="exercise-name">Push-ups (on knees)</td>
<td class="reps">15</td>
<td class="weight">bodyweight</td>
<td><span class="form-note">progress to full push-ups</span></td>
</tr>
<tr>
<td>6</td>
<td class="exercise-name">DB Glute Bridge</td>
<td class="reps">12</td>
<td class="weight">15 lb on hips</td>
<td><span class="form-note">lie on floor, feet flat, press hips up</span></td>
</tr>
</tbody>
</table>
</div>
<div class="note">
<strong>Structure:</strong> 3 rounds, 60-90s rest between rounds<br>
<strong>Warmup:</strong> 5 min treadmill walk + torso twists + leg swings
</div>
</div>
<div class="section">
<h2>Core Finisher</h2>
<div class="note">
Do these after your last round. No rest between exercises — just move through them.
</div>
<div class="table">
<table>
<thead>
<tr>
<th style="width: 40px;">#</th>
<th style="width: 180px;">Exercise</th>
<th style="width: 100px;">Reps/Time</th>
<th style="width: 120px;">Weight</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="exercise-name">Dead Bugs</td>
<td class="reps">10/side</td>
<td class="weight">bodyweight</td>
<td><span class="form-note">Back flat on floor, extend opposite arm+leg slowly</span></td>
</tr>
<tr>
<td>2</td>
<td class="exercise-name">Russian Twists</td>
<td class="reps">20 total</td>
<td class="weight">8 lb KB or 10 lb DB</td>
<td><span class="form-note">Sit with knees bent, rotate side to side, tap weight to floor</span></td>
</tr>
<tr>
<td>3</td>
<td class="exercise-name">Plank Hold</td>
<td class="reps">30-45s</td>
<td class="weight">bodyweight</td>
<td><span class="form-note">Forearms on floor, straight line head to heels</span></td>
</tr>
</tbody>
</table>
</div>
<div class="note">
<strong>Structure:</strong> 2 rounds, minimal rest between rounds
</div>
</div>
<div class="note">
<strong>🎯 Notes for today:</strong> Left elbow pain still present but recovering. Limited extension on left-arm rows to protect it.
</div>
<a href="index.html" class="back-link">← Back to workout list</a>
</div>
<div class="wake-locked" id="wakeLockStatus">Screen locked for workout</div>
<script>
// Wake Lock API — correct API is navigator.wakeLock
let wakeLock = null;
async function requestWakeLock() {
try {
wakeLock = await navigator.wakeLock.request('screen');
const status = document.getElementById('wakeLockStatus');
status.style.display = 'block';
status.textContent = '🔒 Screen locked for workout';
wakeLock.addEventListener('release', () => {
status.style.display = 'none';
wakeLock = null;
});
} catch (err) {
console.log('Wake Lock request failed:', err);
// Fallback: show a note that wake lock isn't available
const status = document.getElementById('wakeLockStatus');
status.style.display = 'block';
status.textContent = '⚠️ Wake lock not available — keep screen awake manually';
status.style.background = 'rgba(100, 100, 100, 0.9)';
}
}
if ('wakeLock' in navigator) {
const wakeLockButton = document.createElement('button');
wakeLockButton.textContent = '🔒 Lock Screen';
wakeLockButton.style.cssText = `
position: fixed;
bottom: 20px;
left: 20px;
background: #f97316;
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s;
z-index: 1000;
`;
wakeLockButton.addEventListener('click', requestWakeLock);
document.body.appendChild(wakeLockButton);
// Re-acquire wake lock after visibility change (e.g., tab switch)
document.addEventListener('visibilitychange', async () => {
if (wakeLock !== null && document.visibilityState === 'visible') {
await requestWakeLock();
}
});
}
// Smooth scroll behavior for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>