Website/static/pickleball.html
2026-03-29 00:00:17 -04:00

287 lines
19 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Summary - Pickleball ELO</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #003594 0%, #001a4d 100%);
padding: 20px;
margin: 0;
min-height: 100vh;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 { color: #003594; text-align: center; }
h2 { color: #003594; border-bottom: 3px solid #FFB81C; padding-bottom: 10px; }
a { color: #003594; text-decoration: none; }
a:hover { text-decoration: underline; color: #FFB81C; }
.btn {
display: inline-block;
padding: 10px 20px;
background: #003594;
color: white !important;
text-decoration: none !important;
border-radius: 6px;
font-weight: bold;
border: none;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover { background: #FFB81C; color: #003594 !important; }
.btn-success { background: #28a745; }
.btn-success:hover { background: #218838; }
.btn-danger { background: #dc3545; }
.btn-danger:hover { background: #c82333; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.back-link {
display: block;
text-align: center;
margin-top: 20px;
}
.nav {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
}
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #003594; color: white; }
tr:hover { background: #f9f9f9; }
.badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: bold;
}
.badge-win { background: #d4edda; color: #155724; }
.badge-loss { background: #f8d7da; color: #721c24; }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
}
.stat-card {
background: #f0f5ff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.stat-value { font-size: 32px; font-weight: bold; color: #003594; }
.stat-label { font-size: 14px; color: #666; margin-top: 5px; }
.achievement {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #fff3cd;
border-radius: 20px;
margin: 4px;
font-size: 13px;
}
.achievement.locked { background: #e9ecef; opacity: 0.6; }
.rating-up { color: #28a745; }
.rating-down { color: #dc3545; }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<h1>🏓 Daily Summary</h1>
<div class="nav">
<a href="/" class="btn">🏠 Home</a>
<a href="/leaderboard" class="btn">📊 Leaderboard</a>
<a href="/matches" class="btn">📜 History</a>
<a href="/players" class="btn">👥 Players</a>
<a href="/balance" class="btn">⚖️ Balance</a>
<a href="/daily" class="btn">📧 Daily</a>
<a href="/about" class="btn">❓ About</a>
<a href="/matches/new" class="btn btn-success">🎾 Record</a>
</div>
<div style="text-align: center; margin-bottom: 20px;">
<input type="date" id="datePicker" value="2026-03-10"
style="padding: 10px; font-size: 16px; border-radius: 6px; border: 2px solid #003594;"
onchange="window.location.href='/daily?date=' + this.value">
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">6</div>
<div class="stat-label">Matches</div>
</div>
<div class="stat-card">
<div class="stat-value">3</div>
<div class="stat-label">Recipients</div>
</div>
</div>
<h2>🎾 Today's Matches</h2>
<table>
<thead>
<tr>
<th>Time</th>
<th>Type</th>
<th>Team 1</th>
<th>Score</th>
<th>Team 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>07:47</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 7</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>07:58</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 5</td>
<td style="color:#666;">Eliana Crew</td>
</tr><tr>
<td>08:11</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Eliana Crew</td>
<td style="text-align:center;">11 - 6</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>08:23</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 0</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>08:30</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 3</td>
<td style="color:#666;">Eliana Crew</td>
</tr><tr>
<td>08:40</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Eliana Crew</td>
<td style="text-align:center;">11 - 5</td>
<td style="color:#666;">Dane Sabo</td>
</tr>
</tbody>
</table>
<h2>📈 Player Performance</h2>
<table>
<thead>
<tr>
<th>Player</th>
<th>ELO Δ</th>
</tr>
</thead>
<tbody>
<tr><td>Andrew Stricklin</td><td style='text-align:center;'><span style='color:#28a745;font-weight:bold;'>+17</span></td></tr><tr><td>Eliana Crew</td><td style='text-align:center;'><span style='color:#28a745;font-weight:bold;'>+11</span></td></tr><tr><td>Dane Sabo</td><td style='text-align:center;'><span style='color:#dc3545;font-weight:bold;'>-28</span></td></tr>
</tbody>
</table>
<h2>📈 ELO Journey</h2>
<div style="background:#fafafa;padding:15px;border-radius:8px;margin-bottom:20px;">
<canvas id="eloChart" height="180"></canvas>
</div>
<script>
new Chart(document.getElementById('eloChart'), {
type: 'line',
data: { labels: ["07:47","07:58","08:11","08:23","08:30","08:40"], datasets: [{"label":"Andrew Stricklin","data":[1566.0,1565.9,1565.9,1584.3,1589.7,1589.7],"borderColor":"#003594","backgroundColor":"#003594","tension":0.3,"fill":false},{"label":"Dane Sabo","data":[1416.6,1416.6,1408.2,1389.8,1389.8,1381.5],"borderColor":"#FFB81C","backgroundColor":"#FFB81C","tension":0.3,"fill":false},{"label":"Eliana Crew","data":[1500.0,1427.5,1435.9,1435.9,1430.5,1438.8],"borderColor":"#dc3545","backgroundColor":"#dc3545","tension":0.3,"fill":false},] },
options: {
responsive: true,
plugins: {
title: { display: true, text: 'Unified ELO Rating', font: { size: 14 } },
legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } }
},
scales: { y: { title: { display: true, text: 'Rating' } } }
}
});
</script>
<h2>🤝 Partner Synergy (All-Time Doubles)</h2>
<p style="color:#666;font-size:14px;margin-bottom:10px;">Win rate when partnered together. Green = good chemistry, Red = rough times.</p>
<div style='display:grid;grid-template-columns:120px repeat(7, 1fr);gap:2px;font-size:12px;'><div></div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Andrew</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Dane</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>David</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Eliana</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Jacklyn</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Krzysztof</div><div style='text-align:center;font-weight:bold;padding:5px;writing-mode:vertical-rl;transform:rotate(180deg);'>Sanjana</div><div style='font-weight:bold;padding:5px;text-align:right;'>Andrew</div><div style='background:#333;'></div><div style='background:rgb(204,200,204);text-align:center;padding:8px;' title='Andrew Stricklin + Dane Sabo: 60%'>60%</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Andrew Stricklin + David Pabst: 100%'>100%</div><div style='background:rgb(255,133,170);text-align:center;padding:8px;' title='Andrew Stricklin + Eliana Crew: 33%'>33%</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Andrew Stricklin + Jacklyn Wyszynski: 100%'>100%</div><div style='background:rgb(191,200,191);text-align:center;padding:8px;' title='Andrew Stricklin + Krzysztof Radziszeski : 62%'>62%</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Andrew Stricklin + Sanjana Goyal: 100%'>100%</div><div style='font-weight:bold;padding:5px;text-align:right;'>Dane</div><div style='background:rgb(204,200,204);text-align:center;padding:8px;' title='Dane Sabo + Andrew Stricklin: 60%'>60%</div><div style='background:#333;'></div><div style='background:rgb(255,200,255);text-align:center;padding:8px;' title='Dane Sabo + David Pabst: 50%'>50%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Dane Sabo + Eliana Crew: 0%'>0%</div><div style='background:rgb(170,200,170);text-align:center;padding:8px;' title='Dane Sabo + Jacklyn Wyszynski: 67%'>67%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Dane Sabo + Krzysztof Radziszeski : 0%'>0%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='font-weight:bold;padding:5px;text-align:right;'>David</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='David Pabst + Andrew Stricklin: 100%'>100%</div><div style='background:rgb(255,200,255);text-align:center;padding:8px;' title='David Pabst + Dane Sabo: 50%'>50%</div><div style='background:#333;'></div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='David Pabst + Jacklyn Wyszynski: 100%'>100%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='font-weight:bold;padding:5px;text-align:right;'>Eliana</div><div style='background:rgb(255,133,170);text-align:center;padding:8px;' title='Eliana Crew + Andrew Stricklin: 33%'>33%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Eliana Crew + Dane Sabo: 0%'>0%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:#333;'></div><div style='background:rgb(170,200,170);text-align:center;padding:8px;' title='Eliana Crew + Jacklyn Wyszynski: 67%'>67%</div><div style='background:rgb(255,133,170);text-align:center;padding:8px;' title='Eliana Crew + Krzysztof Radziszeski : 33%'>33%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Eliana Crew + Sanjana Goyal: 0%'>0%</div><div style='font-weight:bold;padding:5px;text-align:right;'>Jacklyn</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Jacklyn Wyszynski + Andrew Stricklin: 100%'>100%</div><div style='background:rgb(170,200,170);text-align:center;padding:8px;' title='Jacklyn Wyszynski + Dane Sabo: 67%'>67%</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Jacklyn Wyszynski + David Pabst: 100%'>100%</div><div style='background:rgb(170,200,170);text-align:center;padding:8px;' title='Jacklyn Wyszynski + Eliana Crew: 67%'>67%</div><div style='background:#333;'></div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Jacklyn Wyszynski + Krzysztof Radziszeski : 0%'>0%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='font-weight:bold;padding:5px;text-align:right;'>Krzysztof</div><div style='background:rgb(191,200,191);text-align:center;padding:8px;' title='Krzysztof Radziszeski + Andrew Stricklin: 62%'>62%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Krzysztof Radziszeski + Dane Sabo: 0%'>0%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:rgb(255,133,170);text-align:center;padding:8px;' title='Krzysztof Radziszeski + Eliana Crew: 33%'>33%</div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Krzysztof Radziszeski + Jacklyn Wyszynski: 0%'>0%</div><div style='background:#333;'></div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Krzysztof Radziszeski + Sanjana Goyal: 100%'>100%</div><div style='font-weight:bold;padding:5px;text-align:right;'>Sanjana</div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Sanjana Goyal + Andrew Stricklin: 100%'>100%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:rgb(255,0,0);text-align:center;padding:8px;' title='Sanjana Goyal + Eliana Crew: 0%'>0%</div><div style='background:#eee;text-align:center;padding:8px;'></div><div style='background:rgb(0,200,0);text-align:center;padding:8px;' title='Sanjana Goyal + Krzysztof Radziszeski : 100%'>100%</div><div style='background:#333;'></div></div>
<h2>📬 Recipients</h2>
<div style="margin-bottom: 20px;"><span style='display:inline-block;background:#f0f5ff;padding:4px 10px;border-radius:12px;margin:3px;'>Andrew Stricklin &lt;ans364@pitt.edu&gt;</span><span style='display:inline-block;background:#f0f5ff;padding:4px 10px;border-radius:12px;margin:3px;'>Eliana Crew &lt;elianacrew@pitt.edu&gt;</span><span style='display:inline-block;background:#f0f5ff;padding:4px 10px;border-radius:12px;margin:3px;'>Dane Sabo &lt;dane.sabo@pitt.edu&gt;</span></div>
<h2>📄 Email Preview</h2>
<div style="border: 2px solid #003594; border-radius: 8px; padding: 20px; background: #fafafa;">
<h3 style="color: #003594;">🏓 Pickleball Daily Summary - 2026-03-10</h3>
<h4 style="border-bottom: 2px solid #FFB81C; padding-bottom: 5px;">🎾 Match Results</h4>
<table style="width:100%;"><tr>
<td>07:47</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 7</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>07:58</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 5</td>
<td style="color:#666;">Eliana Crew</td>
</tr><tr>
<td>08:11</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Eliana Crew</td>
<td style="text-align:center;">11 - 6</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>08:23</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 0</td>
<td style="color:#666;">Dane Sabo</td>
</tr><tr>
<td>08:30</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Andrew Stricklin</td>
<td style="text-align:center;">11 - 3</td>
<td style="color:#666;">Eliana Crew</td>
</tr><tr>
<td>08:40</td>
<td><strong>SINGLES</strong></td>
<td style="color:#28a745;font-weight:bold;">Eliana Crew</td>
<td style="text-align:center;">11 - 5</td>
<td style="color:#666;">Dane Sabo</td>
</tr></table>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
<div>
<h4 style="border-bottom: 2px solid #FFB81C; padding-bottom: 5px;">📊 Top Players (Unified ELO)</h4>
<div>🥇1. Andrew Stricklin - 1590</div><div>🥈2. Jacklyn Wyszynski - 1544</div><div>🥉3. David Pabst - 1542</div><div>4. Sanjana Goyal - 1500</div><div>5. Krzysztof Radziszeski - 1448</div>
</div>
</div>
</div>
<form method="POST" action="/daily/send?date=2026-03-10" style="text-align: center; margin-top: 30px;"
onsubmit="return confirm('Send daily summary to 3 player(s)?')">
<button type="submit" class="btn btn-success" style="font-size: 18px; padding: 15px 40px;">
📧 Send Daily Summary
</button>
</form>
</div>
</body>
</html>