75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Pickleball ELO Tracker{% endblock %}</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
|
<style>
|
|
:root {
|
|
--pitt-blue: #003594;
|
|
--pitt-gold: #FFB81C;
|
|
}
|
|
body {
|
|
@apply bg-gradient-to-br from-blue-900 via-blue-800 to-blue-950;
|
|
}
|
|
.pitt-primary {
|
|
@apply text-blue-900;
|
|
}
|
|
.pitt-gold {
|
|
@apply text-yellow-500;
|
|
}
|
|
.btn-primary {
|
|
@apply px-4 py-2 bg-blue-900 text-white rounded-lg font-bold hover:bg-blue-950 transition-all duration-200 hover:shadow-lg hover:translate-y-[-2px] inline-block;
|
|
}
|
|
.btn-success {
|
|
@apply px-4 py-2 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 transition-all;
|
|
}
|
|
.btn-warning {
|
|
@apply px-4 py-2 bg-yellow-500 text-white rounded-lg font-bold hover:bg-yellow-600 transition-all;
|
|
}
|
|
.btn-danger {
|
|
@apply px-4 py-2 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700 transition-all;
|
|
}
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-lg p-6;
|
|
}
|
|
.stat-card {
|
|
@apply bg-gradient-to-br from-blue-900 to-blue-950 text-white p-6 rounded-lg shadow-lg text-center;
|
|
}
|
|
.alert-info {
|
|
@apply bg-blue-100 text-blue-900 p-4 rounded-lg border border-blue-300 mb-4;
|
|
}
|
|
.alert-success {
|
|
@apply bg-green-100 text-green-900 p-4 rounded-lg border border-green-300 mb-4;
|
|
}
|
|
.alert-error {
|
|
@apply bg-red-100 text-red-900 p-4 rounded-lg border border-red-300 mb-4;
|
|
}
|
|
.leaderboard-entry {
|
|
@apply flex items-center justify-between p-4 bg-gray-50 rounded-lg mb-2 hover:bg-gray-100 transition-colors;
|
|
}
|
|
.rank {
|
|
@apply text-3xl font-bold text-yellow-500 mr-4 min-w-12;
|
|
}
|
|
.player-rating {
|
|
@apply text-2xl font-bold text-blue-900;
|
|
}
|
|
.form-input {
|
|
@apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-900 focus:ring-2 focus:ring-blue-200;
|
|
}
|
|
</style>
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</body>
|
|
</html>
|