Exec denied (gateway id=47124a5f-d523-4b44-ab33-33618716210b, approval-timeout (obfuscation-detected)): cat << 'TEMPLATE_SCRIPT' > /tmp/build_tracker.py
import os
members = [
{"slug": "jani", "name": "Jani", "emoji": "🌼", "color": "#f9a8d4", "accent": "#ec4899", "bg": "linear-gradient(135deg, #fef9c3 0%, #fce7f3 40%, #ede9fe 100%)"},
{"slug": "anna", "name": "Anna", "emoji": "🍀", "color": "#6ee7b7", "accent": "#10b981", "bg": "linear-gradient(135deg, #d1fae5 0%, #a7f3d0 40%, #ecfdf5 100%)"},
{"slug": "amy", "name": "Amy", "emoji": "🌺", "color": "#fca5a5", "accent": "#ef4444", "bg": "linear-gradient(135deg, #fee2e2 0%, #fecaca 40%, #fff1f2 100%)"},
{"slug": "angela", "name": "Angela", "emoji": "🌻", "color": "#fcd34d", "accent": "#f59e0b", "bg": "linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fffbeb 100%)"},
{"slug": "andy", "name": "Andy", "emoji": "⚡", "color": "#93c5fd", "accent": "#3b82f6", "bg": "linear-gradient(135deg, #dbeafe 0%, #bfdbfe 40%, #eff6ff 100%)"},
{"slug": "mom", "name": "Mom", "emoji": "💝", "color": "#c4b5fd", "accent": "#7c3aed", "bg": "linear-gradient(135deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 100%)"},
]
html_template = '''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>💨 {name}'s Fart Tracker</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap');
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
body {{ font-family: 'Nunito', sans-serif; background: {bg}; min-height: 100vh; padding: 20px; color: #374151; }}
header {{ text-align: center; padding: 30px 0 20px; }}
.hero-banner {{ background: linear-gradient(135deg, {color}, {accent}); border-radius: 24px; padding: 18px 30px; margin-bottom: 18px; box-shadow: 0 6px 24px rgba(0,0,0,0.15); }}
.hero-banner h1 {{ font-size: 2.4rem; font-weight: 900; color: white; text-shadow: 2px 2px 0px rgba(0,0,0,0.1); }}
.avatar-img {{ width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-bottom: 10px; }}
.stats-row {{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 24px auto; max-width: 700px; }}
.stat-card {{ background: white; border-radius: 20px; padding: 16px 24px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,0.08); min-width: 130px; flex: 1; }}
.stat-card .num {{ font-size: 2.2rem; font-weight: 900; color: {accent}; }}
.stat-card .label {{ font-size: 0.8rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }}
.big-button-area {{ text-align: center; margin: 10px auto 30px; }}
#logBtn {{ background: linear-gradient(135deg, {color}, {accent}); color: white; font-size: 1.5rem; font-weight: 900; font-family: 'Nunito', sans-serif; border: none; border-radius: 50px; padding: 20px 50px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.2); transition: transform 0.1s; user-select: none; touch-action: none; }}
#logBtn:active {{ transform: scale(0.96); }}
.hint {{ font-size: 0.85rem; color: #9ca3af; margin-top: 10px; }}
#duration-display {{ font-size: 1rem; font-weight: 700; color: {accent}; margin-top: 12px; min-height: 24px; }}
.upload-section {{ max-width: 700px; margin: 0 auto 30px; background: white; border-radius: 20px; padding: 20px 24px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }}
.upload-section h2 {{ font-size: 1.1rem; font-weight: 800; color: #4b5563; margin-bottom: 12px; }}
.upload-area {{ border: 2px dashed #d1d5db; border-radius: 14px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s; position: relative; }}
.upload-area:hover {{ border-color: {accent}; }}
.upload-area input {{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }}
.upload-area p {{ color: #9ca3af; font-size: 0.9rem; }}
.audio-list {{ margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }}
.audio-item {{ background: #f9fafb; border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }}
.audio-item audio {{ flex: 1; height: 32px; }}
.audio-item .audio-name {{ font-size: 0.8rem; color: #6b7280; min-width: 80px; }}
.del-audio {{ background: none; border: none; cursor: pointer; color: #d1d5db; font-size: 0.9rem; transition: color 0.2s; }}
.del-audio:hover {{ color: #f87171; }}
.log-section {{ max-width: 700px; margin: 0 auto; }}
.log-section h2 {{ font-size: 1.3rem; font-weight: 800; color: #4b5563; margin-bottom: 14px; }}
.log-list {{ display: flex; flex-direction: column; gap: 10px; }}
.log-item {{ background: white; border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0,0,0,0.06); animation: popIn 0.3s ease; }}
@keyframes popIn {{ from {{ opacity: 0; transform: translateY(-8px); }} to {{ opacity: 1; transform: translateY(0); }} }}
.log-item .emoji {{ font-size: 1.6rem; margin-right: 12px; }}
.log-item .info {{ flex: 1; }}
.log-item .time {{ font-weight: 700; font-size: 0.95rem; color: #374151; }}
.log-item .date {{ font-size: 0.78rem; color: #9ca3af; }}
.log-item .duration-badge {{ background: linear-gradient(135deg, {color}88, {color}); border-radius: 20px; padding: 4px 12px; font-size: 0.8rem; font-weight: 700; color: {accent}; white-space: nowrap; }}
.delete-btn {{ background: none; border: none; cursor: pointer; font-size: 1rem; color: #d1d5db; margin-left: 10px; transition: color 0.2s; }}
.delete-btn:hover {{ color: #f87171; }}
.empty-state {{ text-align: center; padding: 40px 20px; color: #9ca3af; font-size: 1rem; }}
.empty-state .big {{ font-size: 3rem; margin-bottom: 10px; }}
.clear-btn {{ display: block; margin: 20px auto 0; background: none; border: 2px solid #e5e7eb; border-radius: 12px; padding: 8px 20px; font-family: 'Nunito', sans-serif; font-size: 0.85rem; color: #9ca3af; cursor: pointer; transition: border-color 0.2s, color 0.2s; }}
.clear-btn:hover {{ border-color: #f87171; color: #f87171; }}
.flowers {{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 999; }}
.petal {{ position: absolute; top: -60px; font-size: 1.5rem; animation: fall linear forwards; opacity: 0.85; }}
@keyframes fall {{ 0% {{ transform: translateY(0) rotate(0deg); opacity: 0.9; }} 100% {{ transform: translateY(110vh) rotate(720deg); opacity: 0; }} }}
footer {{ text-align: center; margin-top: 40px; padding-bottom: 30px; font-size: 0.8rem; color: #9ca3af; }}
.family-link {{ text-align: center; margin: 10px 0 20px; }}
.family-link a {{ color: {accent}; font-weight: 700; text-decoration: none; font-size: 0.9rem; }}
</style>
</head>
<body>
<div class="flowers" id="flowers"></div>
<header>
<div class="hero-banner"><h1>💨 {name}'s Fart Tracker 💨</h1></div>
<img src="avatar.png" alt="{name}" class="avatar-img" />
</header>
<div class="stats-row">
<div class="stat-card"><div class="num" id="totalCount">0</div><div class="label">Total Puffs</div></div>
<div class="stat-card"><div class="num" id="todayCount">0</div><div class="label">Today</div></div>
<div class="stat-card"><div class="num" id="avgDuration">0s</div><div class="label">Avg Duration</div></div>
<div class="stat-card"><div class="num" id="longestDuration">0s</div><div class="label">Personal Best</div></div>
</div>
<div class="big-button-area">
<button id="logBtn">💨 Hold to Puff</button>
<div id="duration-display"></div>
<p class="hint">Press and hold to track duration. Release to log.</p>
</div>
<div class="upload-section">
<h2>🎙️ Upload a Fart Recording</h2>
<div class="upload-area">
<input type="file" id="audioUpload" accept="audio/*" multiple />
<p>📂 Tap to upload audio files (mp3, wav, m4a...)</p>
</div>
<div class="audio-list" id="audioList"></div>
</div>
<div class="log-section">
<h2>{emoji} Puff Log</h2>
<div class="log-list" id="logList">
<div class="empty-state"><div class="big">🌿</div>No puffs yet. Let it rip.</div>
</div>
<button class="clear-btn" id="clearBtn">Clear all records</button>
</div>
<footer>💨 {name}'s personal puff station · <a href="https://kidd-family-farts.pages.dev" style="color:{accent}">Family Leaderboard →</a></footer>
<script>
const STORAGE_KEY = 'fartLog_{slug}';
const AUDIO_KEY = 'fartAudio_{slug}';
const EMOJIS = ['💨','🌬️','☁️','🍃','🌀','✨','🎈','{emoji}'];
let logs = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
let audios = JSON.parse(localStorage.getItem(AUDIO_KEY) || '[]');
let holdStart = null, holdInterval = null;
const logBtn = document.getElementById('logBtn');
const durationDisplay = document.getElementById('duration-display');
function startHold() {{
holdStart = Date.now();
holdInterval = setInterval(() => {{
const elapsed = ((Date.now() - holdStart) / 1000).toFixed(1);
durationDisplay.textContent = `⏱ ${{elapsed}}s and counting...`;
}}, 100);
}}
function endHold() {{
if (!holdStart) return;
const duration = Math.max(0.1, (Date.now() - holdStart) / 1000);
clearInterval(holdInterval); holdInterval = null; holdStart = null;
durationDisplay.textContent = '';
logFart(duration);
}}
logBtn.addEventListener('mousedown', startHold);
logBtn.addEventListener('touchstart', (e) => {{ e.preventDefault(); startHold(); }});
logBtn.addEventListener('mouseup', endHold);
logBtn.addEventListener('touchend', endHold);
logBtn.addEventListener('mouseleave', () => {{ if (holdStart) endHold(); }});
function logFart(duration) {{
const entry = {{ id: Date.now(), timestamp: new Date().toISOString(), duration: parseFloat(duration.toFixed(1)) }};
logs.unshift(entry); save(); render(); celebrate();
// Sync to family board
syncToFamily();
}}
function save() {{ localStorage.setItem(STORAGE_KEY, JSON.stringify(logs)); }}
function syncToFamily() {{
const familyData = JSON.parse(localStorage.getItem('familyFarts') || '{{}}');
familyData['{slug}'] = {{ name: '{name}', emoji: '{emoji}', logs: logs, audios: audios.map(a => ({{ name: a.name }})) }};
localStorage.setItem('familyFarts', JSON.stringify(familyData));
}}
function render() {{
const today = new Date().toDateString();
const todayLogs = logs.filter(l => new Date(l.timestamp).toDateString() === today);
const withDur = logs.filter(l => l.duration > 0);
const avg = withDur.length ? (withDur.reduce((s,l) => s+l.duration,0)/withDur.length).toFixed(1) : 0;
const longest = withDur.length ? Math.max(...withDur.map(l=>l.duration)).toFixed(1) : 0;
document.getElementById('totalCount').textContent = logs.length;
document.getElementById('todayCount').textContent = todayLogs.length;
document.getElementById('avgDuration').textContent = avg + 's';
document.getElementById('longestDuration').textContent = longest + 's';
const list = document.getElementById('logList');
if (!logs.length) {{ list.innerHTML = '<div class="empty-state"><div class="big">🌿</div>No puffs yet. Let it rip.</div>'; return; }}
list.innerHTML = logs.map(entry => {{
const d = new Date(entry.timestamp);
const emoji = EMOJIS[entry.id % EMOJIS.length];
return `<div class="log-item" id="item-${{entry.id}}">
<span class="emoji">${{emoji}}</span>
<div class="info"><div class="time">${{d.toLocaleTimeString([],{{hour:'2-digit',minute:'2-digit',second:'2-digit'}})}} </div><div class="date">${{d.toLocaleDateString([],{{weekday:'short',month:'short',day:'numeric'}})}}</div></div>
<span class="duration-badge">⏱ ${{entry.duration}}s</span>
<button class="delete-btn" onclick="deleteEntry(${{entry.id}})">✕</button>
</div>`;
}}).join('');
}}
function deleteEntry(id) {{ logs = logs.filter(l=>l.id!==id); save(); render(); syncToFamily(); }}
document.getElementById('clearBtn').addEventListener('click', () => {{ if(confirm('Clear all puff records?')) {{ logs=[]; save(); render(); syncToFamily(); }} }});
// Audio upload
document.getElementById('audioUpload').addEventListener('change', function(e) {{
Array.from(e.target.files).forEach(file => {{
const reader = new FileReader();
reader.onload = (ev) => {{
audios.push({{ id: Date.now() + Math.random(), name: file.name, data: ev.target.result }});
localStorage.setItem(AUDIO_KEY, JSON.stringify(audios));
renderAudio(); syncToFamily();
}};
reader.readAsDataURL(file);
}});
}});
function renderAudio() {{
const list = document.getElementById('audioList');
if (!audios.length) {{ list.innerHTML = ''; return; }}
list.innerHTML = audios.map(a => `
<div class="audio-item">
<span class="audio-name">💨 ${{a.name.substring(0,20)}}</span>
<audio controls src="${{a.data}}"></audio>
<button class="del-audio" onclick="deleteAudio(${{a.id}})">✕</button>
</div>`).join('');
}}
function deleteAudio(id) {{ audios = audios.filter(a=>a.id!==id); localStorage.setItem(AUDIO_KEY, JSON.stringify(audios)); renderAudio(); syncToFamily(); }}
function celebrate() {{
const container = document.getElementById('flowers');
const petals = ['💨','🌸','🌺','🌼','{emoji}','✨'];
for (let i=0; i<12; i++) {{
const p = document.createElement('div'); p.className='petal';
p.textContent = petals[Math.floor(Math.random()*petals.length)];
p.style.left = Math.random()*100+'vw';
const dur = 1.5 + Math.random()*2;
p.style.animationDuration = dur+'s';
p.style.animationDelay = Math.random()*0.5+'s';
container.appendChild(p);
setTimeout(()=>p.remove(),(dur+0.6)*1000);
}}
}}
render(); renderAudio(); syncToFamily();
</script>
</body>
</html>'''
base = '/Users/achie/.openclaw/workspace/active-projects/fart-tracker-family'
for m in members:
html = html_template.format(**m)
path = f"{base}/{m['slug']}/index.html"
with open(path, 'w') as f:
f.write(html)
print(f"Built {m['slug']}")
print("All individual trackers done")
TEMPLATE_SCRIPT
python3 /tmp/build_tracker.py
