Add files via upload
This commit is contained in:
Bl3kiiie
@@ -0,0 +1,547 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Tournament Draft</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: Arial, sans-serif;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
height: 70px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(100vh - 70px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.tournament-header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tournament-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.tournament-stats {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tournament-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.round-nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.round-nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.round-nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.current-round-display {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin: 0 15px;
|
||||
min-width: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Rounds Container - Vertical stack */
|
||||
.rounds-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.round-row {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.round-row.current {
|
||||
border-left: 4px solid #007bff;
|
||||
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.round-row.completed {
|
||||
border-left: 4px solid #28a745;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.round-row.waiting {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.round-header {
|
||||
background: #f8f9fa;
|
||||
border-right: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
min-width: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.round-row.current .round-header {
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
.round-row.completed .round-header {
|
||||
background: #e8f5e8;
|
||||
}
|
||||
|
||||
.round-title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.round-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.65rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.current-badge {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.completed-badge {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.waiting-badge {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.positions-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 8px 6px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.position-card.filled {
|
||||
border-color: #28a745;
|
||||
background: linear-gradient(135deg, #f8fff9 0%, #ffffff 100%);
|
||||
box-shadow: 0 3px 10px rgba(40, 167, 69, 0.15);
|
||||
}
|
||||
|
||||
.position-card.empty {
|
||||
border-color: #dee2e6;
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.position-number {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #007bff;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.position-card.empty .position-number {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.position-card.empty .player-name {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.player-id {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* No Tournament State */
|
||||
.no-tournament {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.no-tournament h2 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.no-tournament p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Auto-refresh indicator */
|
||||
.refresh-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: rgba(0, 123, 255, 0.9);
|
||||
color: white;
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.refresh-indicator.show {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">🏆 Tournament Draft</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/" class="nav-btn">← Dashboard</a>
|
||||
<a href="/tournament" class="nav-btn">⚙️ Manage</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
{% if tournament %}
|
||||
<div class="tournament-header">
|
||||
<div class="tournament-title">🎯 Shooting Tournament</div>
|
||||
<div class="tournament-stats">
|
||||
{{ tournament.total_players }} players • {{ tournament.total_rounds }} rounds
|
||||
{% if tournament.current_round %}
|
||||
• Currently on Round {{ tournament.current_round }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if tournament.current_round %}
|
||||
<div class="tournament-controls">
|
||||
<button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
|
||||
← Previous
|
||||
</button>
|
||||
<span class="current-round-display">Round {{ tournament.current_round }} of {{ tournament.total_rounds }}</span>
|
||||
<button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="rounds-container" data-total-rounds="{{ tournament.total_rounds }}">
|
||||
{% for round in tournament.rounds %}
|
||||
{% set is_current = tournament.current_round == round.round_number %}
|
||||
{% set is_completed = tournament.current_round > round.round_number %}
|
||||
<div class="round-row {{ 'current' if is_current else ('completed' if is_completed else 'waiting') }}">
|
||||
<div class="round-header">
|
||||
<div class="round-title">Round {{ round.round_number }}</div>
|
||||
{% if is_current %}
|
||||
<div class="round-badge current-badge">Current</div>
|
||||
{% elif is_completed %}
|
||||
<div class="round-badge completed-badge">Done</div>
|
||||
{% else %}
|
||||
<div class="round-badge waiting-badge">Wait</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="positions-container">
|
||||
{% for position in range(1, 7) %}
|
||||
{% set player = round.players[position-1] if position <= round.players|length else none %}
|
||||
<div class="position-card {{ 'filled' if player else 'empty' }}">
|
||||
<div class="position-number">{{ position }}</div>
|
||||
{% if player %}
|
||||
<div class="player-name">{{ player.name }}</div>
|
||||
<div class="player-id">ID: {{ player.id }}</div>
|
||||
{% else %}
|
||||
<div class="player-name">Empty</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="no-tournament">
|
||||
<h2>No Active Tournament</h2>
|
||||
<p>Go to Tournament Management to set up players and start a tournament.</p>
|
||||
<a href="/tournament" class="nav-btn primary">🏆 Set Up Tournament</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Auto-refresh indicator -->
|
||||
<div class="refresh-indicator" id="refreshIndicator">
|
||||
🔄 Updating...
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tournament state
|
||||
const tournamentActive = {{ 'true' if tournament else 'false' }};
|
||||
let currentRound = {{ tournament.current_round if tournament else 1 }};
|
||||
const totalRounds = {{ tournament.total_rounds if tournament else 1 }};
|
||||
|
||||
function updateRoundNavigation() {
|
||||
if (tournamentActive) {
|
||||
const prevBtn = document.getElementById('prevRoundBtn');
|
||||
const nextBtn = document.getElementById('nextRoundBtn');
|
||||
|
||||
if (prevBtn) prevBtn.disabled = currentRound <= 1;
|
||||
if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
|
||||
}
|
||||
}
|
||||
|
||||
// Change round function
|
||||
async function changeRound(direction) {
|
||||
if (!tournamentActive) return;
|
||||
|
||||
const newRound = currentRound + direction;
|
||||
if (newRound < 1 || newRound > totalRounds) return;
|
||||
|
||||
// Disable buttons during request
|
||||
const prevBtn = document.getElementById('prevRoundBtn');
|
||||
const nextBtn = document.getElementById('nextRoundBtn');
|
||||
|
||||
if (prevBtn) prevBtn.disabled = true;
|
||||
if (nextBtn) nextBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tournament/round/${newRound}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
currentRound = newRound;
|
||||
updateRoundNavigation();
|
||||
|
||||
// Reload page to get new round players
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 300);
|
||||
} else {
|
||||
console.error('Failed to change round');
|
||||
alert('Failed to change round. Please try again.');
|
||||
updateRoundNavigation();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error changing round:', error);
|
||||
alert('Error changing round. Please try again.');
|
||||
updateRoundNavigation();
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-refresh functionality
|
||||
function setupAutoRefresh() {
|
||||
setInterval(() => {
|
||||
if (document.visibilityState === 'visible' && tournamentActive) {
|
||||
const indicator = document.getElementById('refreshIndicator');
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1000);
|
||||
}
|
||||
}, 15000); // 15 seconds
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
window.location.href = '/';
|
||||
} else if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
window.location.reload();
|
||||
} else if (tournamentActive) {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
changeRound(-1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
changeRound(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateRoundNavigation();
|
||||
setupAutoRefresh();
|
||||
|
||||
// Scroll to current round
|
||||
setTimeout(() => {
|
||||
const currentRoundRow = document.querySelector('.round-row.current');
|
||||
if (currentRoundRow) {
|
||||
currentRoundRow.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
|
||||
console.log('🖥️ PC Tournament Draft (Vertical Rows) loaded');
|
||||
console.log('🏆 Tournament active:', tournamentActive);
|
||||
console.log(`📊 Displaying ${totalRounds} rounds in vertical layout`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,766 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{{ title }} - Fullscreen</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
/* Reset and base styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: black;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
.fullscreen-navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Control buttons */
|
||||
.control-btn {
|
||||
background: #f8f9fa !important;
|
||||
border: 2px solid #e9ecef !important;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: #e9ecef !important;
|
||||
border-color: #007bff !important;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
color: #007bff !important;
|
||||
}
|
||||
|
||||
.control-btn:active {
|
||||
transform: translateY(0) !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.control-btn:disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
background: #f8f9fa !important;
|
||||
border-color: #e9ecef !important;
|
||||
color: #333 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.control-btn.close-btn:hover {
|
||||
border-color: #dc3545 !important;
|
||||
color: #dc3545 !important;
|
||||
}
|
||||
|
||||
.control-btn svg {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Stream container */
|
||||
.stream-container {
|
||||
height: calc(100vh - 70px);
|
||||
width: 100%;
|
||||
background: #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stream-viewport {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stream-viewport.dragging {
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
.stream-viewport.zoomed {
|
||||
cursor: grab !important;
|
||||
}
|
||||
|
||||
.fullscreen-stream {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
transition: transform 0.2s ease;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.fullscreen-stream.instant-transition {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Zoom controls */
|
||||
.zoom-controls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
background: rgba(248, 249, 250, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
background: #f8f9fa !important;
|
||||
border: 2px solid #e9ecef !important;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333 !important;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zoom-btn:hover {
|
||||
background: #e9ecef !important;
|
||||
border-color: #007bff !important;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
color: #007bff !important;
|
||||
}
|
||||
|
||||
.zoom-btn:active {
|
||||
transform: translateY(0) !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.zoom-btn:disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
background: #f8f9fa !important;
|
||||
border-color: #e9ecef !important;
|
||||
color: #333 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
padding: 10px 12px;
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Loading indicator */
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stream-loaded .loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile optimizations */
|
||||
@media (max-width: 768px) {
|
||||
.fullscreen-navbar {
|
||||
padding: 10px 15px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 10px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
bottom: 15px;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
padding: 8px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
padding: 8px 10px;
|
||||
min-width: 45px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small mobile devices */
|
||||
@media (max-width: 480px) {
|
||||
.fullscreen-navbar {
|
||||
padding: 8px 12px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
bottom: 12px;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
padding: 6px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
padding: 6px 8px;
|
||||
min-width: 40px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape mobile optimization */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.fullscreen-navbar {
|
||||
padding: 8px 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 6px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stream-container {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.zoom-controls {
|
||||
bottom: 10px;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.zoom-btn {
|
||||
padding: 4px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
padding: 4px 6px;
|
||||
min-width: 35px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fullscreen-navbar">
|
||||
<div class="navbar-title">{{ title }}</div>
|
||||
<div class="navbar-controls">
|
||||
<button class="control-btn" id="fullscreenToggleBtn" title="Toggle Browser Fullscreen (F)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="/" class="control-btn close-btn" title="Close Fullscreen">✕</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stream-container" id="streamContainer">
|
||||
<div class="loading" id="loadingIndicator">Loading stream...</div>
|
||||
<div class="stream-viewport" id="streamViewport">
|
||||
<img
|
||||
src="{{ stream.url }}"
|
||||
alt="{{ title }}"
|
||||
class="fullscreen-stream"
|
||||
id="fullscreenStream"
|
||||
onerror="handleStreamError()"
|
||||
onload="handleStreamLoad()"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="zoom-controls" id="zoomControls">
|
||||
<button class="zoom-btn" id="zoomOutBtnBottom" title="Zoom Out (-)">−</button>
|
||||
<div class="zoom-level" id="zoomLevel">1.0x</div>
|
||||
<button class="zoom-btn" id="zoomInBtnBottom" title="Zoom In (+)">+</button>
|
||||
<button class="zoom-btn" id="resetZoomBtn" title="Reset Zoom (R)">⌂</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let retryCount = 0;
|
||||
const maxRetries = 3;
|
||||
|
||||
// Zoom functionality
|
||||
let currentZoom = 1;
|
||||
const minZoom = 1;
|
||||
const maxZoom = 5;
|
||||
const zoomStep = 0.1;
|
||||
|
||||
// Pan functionality
|
||||
let isPanning = false;
|
||||
let panStartX = 0;
|
||||
let panStartY = 0;
|
||||
let panOffsetX = 0;
|
||||
let panOffsetY = 0;
|
||||
let lastTouchDistance = 0;
|
||||
|
||||
function handleStreamLoad() {
|
||||
document.getElementById('streamContainer').classList.add('stream-loaded');
|
||||
retryCount = 0;
|
||||
resetZoom();
|
||||
}
|
||||
|
||||
function handleStreamError() {
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
const loadingIndicator = document.getElementById('loadingIndicator');
|
||||
|
||||
if (retryCount < maxRetries) {
|
||||
retryCount++;
|
||||
loadingIndicator.textContent = `Retrying... (${retryCount}/${maxRetries})`;
|
||||
|
||||
setTimeout(() => {
|
||||
streamImg.src = streamImg.src + '?retry=' + Date.now();
|
||||
}, 2000);
|
||||
} else {
|
||||
loadingIndicator.textContent = 'Stream unavailable';
|
||||
streamImg.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom functions
|
||||
function updateZoom(smoothTransition = true) {
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
const zoomLevel = document.getElementById('zoomLevel');
|
||||
const zoomInBtnBottom = document.getElementById('zoomInBtnBottom');
|
||||
const zoomOutBtnBottom = document.getElementById('zoomOutBtnBottom');
|
||||
const viewport = document.getElementById('streamViewport');
|
||||
|
||||
if (smoothTransition) {
|
||||
streamImg.classList.remove('instant-transition');
|
||||
} else {
|
||||
streamImg.classList.add('instant-transition');
|
||||
}
|
||||
|
||||
if (currentZoom <= 1) {
|
||||
panOffsetX = 0;
|
||||
panOffsetY = 0;
|
||||
currentZoom = 1;
|
||||
streamImg.style.transform = '';
|
||||
} else {
|
||||
streamImg.style.transform = `scale(${currentZoom}) translate(${panOffsetX}px, ${panOffsetY}px)`;
|
||||
}
|
||||
|
||||
zoomLevel.textContent = `${currentZoom.toFixed(1)}x`;
|
||||
|
||||
const atMinZoom = currentZoom <= minZoom;
|
||||
const atMaxZoom = currentZoom >= maxZoom;
|
||||
|
||||
if (zoomOutBtnBottom) zoomOutBtnBottom.disabled = atMinZoom;
|
||||
if (zoomInBtnBottom) zoomInBtnBottom.disabled = atMaxZoom;
|
||||
|
||||
if (currentZoom > 1) {
|
||||
viewport.classList.add('zoomed');
|
||||
} else {
|
||||
viewport.classList.remove('zoomed');
|
||||
panOffsetX = 0;
|
||||
panOffsetY = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
if (currentZoom < maxZoom) {
|
||||
currentZoom = Math.min(maxZoom, currentZoom + zoomStep);
|
||||
updateZoom(false);
|
||||
}
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
if (currentZoom > minZoom) {
|
||||
const newZoom = Math.max(minZoom, currentZoom - zoomStep);
|
||||
|
||||
if (newZoom <= minZoom) {
|
||||
currentZoom = minZoom;
|
||||
panOffsetX = 0;
|
||||
panOffsetY = 0;
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
streamImg.style.transform = '';
|
||||
updateZoom(true);
|
||||
} else {
|
||||
currentZoom = newZoom;
|
||||
const zoomRatio = currentZoom / (currentZoom + zoomStep);
|
||||
panOffsetX *= zoomRatio;
|
||||
panOffsetY *= zoomRatio;
|
||||
updateZoom(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
currentZoom = 1;
|
||||
panOffsetX = 0;
|
||||
panOffsetY = 0;
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
streamImg.style.transform = '';
|
||||
updateZoom(true);
|
||||
}
|
||||
|
||||
// Pan functions
|
||||
function startPan(clientX, clientY) {
|
||||
if (currentZoom > 1) {
|
||||
isPanning = true;
|
||||
panStartX = clientX - panOffsetX;
|
||||
panStartY = clientY - panOffsetY;
|
||||
document.getElementById('streamViewport').classList.add('dragging');
|
||||
}
|
||||
}
|
||||
|
||||
function updatePan(clientX, clientY) {
|
||||
if (isPanning && currentZoom > 1) {
|
||||
const viewport = document.getElementById('streamViewport');
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
|
||||
const newOffsetX = clientX - panStartX;
|
||||
const newOffsetY = clientY - panStartY;
|
||||
|
||||
const imgRect = streamImg.getBoundingClientRect();
|
||||
const viewportRect = viewport.getBoundingClientRect();
|
||||
|
||||
const scaledWidth = imgRect.width / currentZoom;
|
||||
const scaledHeight = imgRect.height / currentZoom;
|
||||
const maxOffsetX = Math.max(0, (scaledWidth * currentZoom - viewportRect.width) / (2 * currentZoom));
|
||||
const maxOffsetY = Math.max(0, (scaledHeight * currentZoom - viewportRect.height) / (2 * currentZoom));
|
||||
|
||||
panOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, newOffsetX));
|
||||
panOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, newOffsetY));
|
||||
|
||||
updateZoom(false);
|
||||
}
|
||||
}
|
||||
|
||||
function endPan() {
|
||||
isPanning = false;
|
||||
document.getElementById('streamViewport').classList.remove('dragging');
|
||||
|
||||
if (currentZoom <= 1) {
|
||||
panOffsetX = 0;
|
||||
panOffsetY = 0;
|
||||
updateZoom();
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const zoomInBtnBottom = document.getElementById('zoomInBtnBottom');
|
||||
const zoomOutBtnBottom = document.getElementById('zoomOutBtnBottom');
|
||||
const resetZoomBtn = document.getElementById('resetZoomBtn');
|
||||
const fullscreenToggleBtn = document.getElementById('fullscreenToggleBtn');
|
||||
const viewport = document.getElementById('streamViewport');
|
||||
|
||||
if (zoomInBtnBottom) zoomInBtnBottom.addEventListener('click', zoomIn);
|
||||
if (zoomOutBtnBottom) zoomOutBtnBottom.addEventListener('click', zoomOut);
|
||||
if (resetZoomBtn) resetZoomBtn.addEventListener('click', resetZoom);
|
||||
|
||||
if (fullscreenToggleBtn) {
|
||||
fullscreenToggleBtn.addEventListener('click', toggleBrowserFullscreen);
|
||||
}
|
||||
|
||||
// Mouse events for panning
|
||||
viewport.addEventListener('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
startPan(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (isPanning) {
|
||||
e.preventDefault();
|
||||
updatePan(e.clientX, e.clientY);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('mouseup', endPan);
|
||||
|
||||
// Mouse wheel zoom
|
||||
viewport.addEventListener('wheel', function(e) {
|
||||
e.preventDefault();
|
||||
if (e.deltaY < 0) {
|
||||
zoomIn();
|
||||
} else {
|
||||
zoomOut();
|
||||
}
|
||||
});
|
||||
|
||||
// Touch events for mobile
|
||||
viewport.addEventListener('touchstart', function(e) {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1) {
|
||||
startPan(e.touches[0].clientX, e.touches[0].clientY);
|
||||
} else if (e.touches.length === 2) {
|
||||
const touch1 = e.touches[0];
|
||||
const touch2 = e.touches[1];
|
||||
lastTouchDistance = Math.sqrt(
|
||||
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
||||
Math.pow(touch2.clientY - touch1.clientY, 2)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
viewport.addEventListener('touchmove', function(e) {
|
||||
e.preventDefault();
|
||||
if (e.touches.length === 1 && isPanning) {
|
||||
updatePan(e.touches[0].clientX, e.touches[0].clientY);
|
||||
} else if (e.touches.length === 2) {
|
||||
const touch1 = e.touches[0];
|
||||
const touch2 = e.touches[1];
|
||||
const currentDistance = Math.sqrt(
|
||||
Math.pow(touch2.clientX - touch1.clientX, 2) +
|
||||
Math.pow(touch2.clientY - touch1.clientY, 2)
|
||||
);
|
||||
|
||||
if (lastTouchDistance > 0) {
|
||||
const distanceRatio = currentDistance / lastTouchDistance;
|
||||
if (distanceRatio > 1.02) {
|
||||
zoomIn();
|
||||
} else if (distanceRatio < 0.98) {
|
||||
zoomOut();
|
||||
}
|
||||
}
|
||||
lastTouchDistance = currentDistance;
|
||||
}
|
||||
});
|
||||
|
||||
viewport.addEventListener('touchend', function(e) {
|
||||
endPan();
|
||||
if (e.touches.length < 2) {
|
||||
lastTouchDistance = 0;
|
||||
}
|
||||
});
|
||||
|
||||
updateZoom(false);
|
||||
});
|
||||
|
||||
// Handle keyboard shortcuts
|
||||
document.addEventListener('keydown', function(event) {
|
||||
switch(event.key) {
|
||||
case 'Escape':
|
||||
window.location.href = '/';
|
||||
break;
|
||||
case 'f':
|
||||
case 'F':
|
||||
toggleBrowserFullscreen();
|
||||
break;
|
||||
case 'r':
|
||||
case 'R':
|
||||
event.preventDefault();
|
||||
resetZoom();
|
||||
break;
|
||||
case '=':
|
||||
case '+':
|
||||
event.preventDefault();
|
||||
zoomIn();
|
||||
break;
|
||||
case '-':
|
||||
event.preventDefault();
|
||||
zoomOut();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function toggleBrowserFullscreen() {
|
||||
if (!document.fullscreenElement && !document.webkitFullscreenElement &&
|
||||
!document.mozFullScreenElement && !document.msFullscreenElement) {
|
||||
const docEl = document.documentElement;
|
||||
if (docEl.requestFullscreen) {
|
||||
docEl.requestFullscreen().catch(err => console.log('Fullscreen error:', err));
|
||||
} else if (docEl.webkitRequestFullscreen) {
|
||||
docEl.webkitRequestFullscreen();
|
||||
} else if (docEl.mozRequestFullScreen) {
|
||||
docEl.mozRequestFullScreen();
|
||||
} else if (docEl.msRequestFullscreen) {
|
||||
docEl.msRequestFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen().catch(err => console.log('Exit fullscreen error:', err));
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleFullscreenChange() {
|
||||
const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement || document.msFullscreenElement;
|
||||
const fullscreenBtn = document.getElementById('fullscreenToggleBtn');
|
||||
|
||||
if (fullscreenBtn) {
|
||||
if (isFullscreen) {
|
||||
fullscreenBtn.innerHTML = `
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
|
||||
</svg>
|
||||
`;
|
||||
fullscreenBtn.title = "Exit Browser Fullscreen (F)";
|
||||
} else {
|
||||
fullscreenBtn.innerHTML = `
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
|
||||
</svg>
|
||||
`;
|
||||
fullscreenBtn.title = "Toggle Browser Fullscreen (F)";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for fullscreen changes
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
|
||||
// Auto-refresh stream every 30 seconds
|
||||
setInterval(() => {
|
||||
const streamImg = document.getElementById('fullscreenStream');
|
||||
if (streamImg && !streamImg.complete) {
|
||||
streamImg.src = streamImg.src.split('?')[0] + '?refresh=' + Date.now();
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
// Prevent context menu and dragging on stream
|
||||
document.getElementById('fullscreenStream').addEventListener('contextmenu', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
document.getElementById('fullscreenStream').addEventListener('dragstart', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,875 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Camera Dashboard</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: black;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.navbar img.logo {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Tournament Navigation */
|
||||
.tournament-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.round-nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.round-nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.round-nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
background: #f8f9fa !important;
|
||||
border-color: #e9ecef !important;
|
||||
color: #333 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.current-round-info {
|
||||
text-align: center;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.round-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.round-progress {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
padding: 2px 8px;
|
||||
background: rgba(0, 123, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Regular time/date display */
|
||||
.datetime .time {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.datetime .date {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.hamburger-menu:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #333;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hamburger-menu:hover .hamburger-line {
|
||||
background: #007bff;
|
||||
}
|
||||
|
||||
.grid {
|
||||
height: calc(100vh - 60px);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.camera-card {
|
||||
background: #2a2a2a;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.camera-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
background: #1a1a1a;
|
||||
padding: 12px 16px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
border-bottom: 1px solid #404040;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stream-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
background: #222;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stream {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Tooltip for camera cards */
|
||||
.camera-card::after {
|
||||
content: "Click to view fullscreen";
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.camera-card:hover::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateX(-50%) translateY(-5px);
|
||||
}
|
||||
|
||||
/* Settings Panel */
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||||
transition: right 0.3s ease;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.settings-panel.active {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #e9ecef;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.settings-group h4 {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
color: #333;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tournament-status-info {
|
||||
background: #f0f8ff;
|
||||
border: 2px solid #007bff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.tournament-status-info p {
|
||||
margin: 5px 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tournament-btn {
|
||||
background: #007bff !important;
|
||||
border-color: #0056b3 !important;
|
||||
color: white !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tournament-btn:hover {
|
||||
background: #0056b3 !important;
|
||||
border-color: #004085 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Desktop-only styles - mobile users are redirected */
|
||||
|
||||
/* Mobile responsive fallback for desktop users on small screens */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 10px 15px;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
height: calc(100vh - 100px);
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
gap: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 16px 18px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
width: 100%;
|
||||
right: -100%;
|
||||
}
|
||||
|
||||
.tournament-nav {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.round-nav-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 10px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.current-round-info {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.round-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.round-progress {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.grid {
|
||||
padding: 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 14px 16px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<img src="/static/logo.png" alt="Logo" class="logo" onerror="this.style.display='none'" />
|
||||
|
||||
<div class="navbar-center">
|
||||
{% if settings.tournament_active %}
|
||||
<div class="tournament-nav">
|
||||
<button class="round-nav-btn" id="prevRoundBtn" onclick="changeRound(-1)" title="Previous Round">
|
||||
←
|
||||
</button>
|
||||
<div class="current-round-info">
|
||||
<div class="round-title">🏆 Round <span id="currentRoundNum">{{ settings.current_round }}</span></div>
|
||||
<div class="round-progress">{{ settings.current_round }} of {{ settings.total_rounds }}</div>
|
||||
</div>
|
||||
<button class="round-nav-btn" id="nextRoundBtn" onclick="changeRound(1)" title="Next Round">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="datetime">
|
||||
<div class="time" id="time"></div>
|
||||
<div class="date" id="date"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button class="hamburger-menu" id="menuButton" title="Settings">
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="overlay"></div>
|
||||
|
||||
<div class="settings-panel" id="settingsPanel">
|
||||
<div class="settings-header">
|
||||
<h3>Camera Settings</h3>
|
||||
<button class="close-btn" id="closeBtn">×</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-content">
|
||||
{% if settings.tournament_active %}
|
||||
<div class="settings-group">
|
||||
<h4>🏆 Active Tournament</h4>
|
||||
|
||||
<div class="tournament-status-info">
|
||||
<p><strong>Current Round:</strong> {{ settings.current_round }} of {{ settings.total_rounds }}</p>
|
||||
<p>Camera cards show current round players</p>
|
||||
</div>
|
||||
|
||||
<div class="tournament-actions">
|
||||
<a href="/tournament/draft" class="nav-link tournament-btn" style="font-size: 1.1rem; padding: 15px 20px;">📋 View Full Tournament Draft</a>
|
||||
<a href="/tournament" class="nav-link tournament-btn" id="manageTournamentLink">⚙️ Manage Tournament</a>
|
||||
<a href="/results/calculator" class="nav-link tournament-btn">🎯 Results Calculator</a>
|
||||
<a href="/results" class="nav-link tournament-btn">📊 View Results</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="settings-group">
|
||||
{% if not settings.tournament_active %}
|
||||
<h4>Navigation</h4>
|
||||
<a href="/tournament" class="nav-link" id="tournamentModeLink">🏆 Tournament Mode</a>
|
||||
<h4>Data & Analysis</h4>
|
||||
<a href="/archive/player-analysis" class="nav-link">👤 Player Analysis</a>
|
||||
<a href="/archive" class="nav-link" >📚 View Archive</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not settings.tournament_active %}
|
||||
<div class="settings-group" id="displayOptionsGroup">
|
||||
<h4>Display Options</h4>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="checkbox" id="toggleTitles" {% if settings.display_options.show_titles %}checked{% endif %} onchange="toggleTitles()" style="width: 18px; height: 18px;">
|
||||
Show Card Titles
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display: block; margin-bottom: 8px; font-weight: bold; color: #333;">
|
||||
Title Text Size: <span id="titleSizeValue">{{ settings.display_options.title_size }}</span>rem
|
||||
</label>
|
||||
<input type="range"
|
||||
id="titleSize"
|
||||
min="0.8"
|
||||
max="2.5"
|
||||
step="0.1"
|
||||
value="{{ settings.display_options.title_size }}"
|
||||
oninput="adjustTitleSize(this.value)"
|
||||
style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-group" id="cameraTitleGroup">
|
||||
<h4>Camera Titles</h4>
|
||||
{% for i in range(1, 7) %}
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display: block; margin-bottom: 5px; font-weight: bold; color: #333;">Camera {{ i }} Title:</label>
|
||||
<input type="text"
|
||||
id="titleInput{{ i }}"
|
||||
value="{{ settings.camera_titles[i|string] }}"
|
||||
oninput="updateCardTitle({{ i }})"
|
||||
style="width: 100%; padding: 8px 12px; border: 2px solid #e9ecef; border-radius: 6px; font-size: 0.9rem;">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
{% for i in range(1, 7) %}
|
||||
<div class="camera-card" onclick="openCameraFullscreen({{ i }})" data-camera-id="{{ i }}">
|
||||
<div class="card-title" id="cardTitle{{ i }}">{{ settings.camera_titles[i|string] }}</div>
|
||||
<div class="stream-wrapper">
|
||||
<img src="{{ streams[i-1].url }}" alt="Camera Stream {{ i }}" class="stream" onerror="this.style.opacity='0.1'">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Global settings and tournament state
|
||||
let currentSettings = {{ settings|tojson }};
|
||||
const tournamentActive = {{ 'true' if settings.tournament_active else 'false' }};
|
||||
let currentRound = {{ settings.current_round if settings.tournament_active else 1 }};
|
||||
const totalRounds = {{ settings.total_rounds if settings.tournament_active else 1 }};
|
||||
|
||||
function updateRoundNavigation() {
|
||||
if (tournamentActive) {
|
||||
const prevBtn = document.getElementById('prevRoundBtn');
|
||||
const nextBtn = document.getElementById('nextRoundBtn');
|
||||
const currentRoundNum = document.getElementById('currentRoundNum');
|
||||
|
||||
if (prevBtn) prevBtn.disabled = currentRound <= 1;
|
||||
if (nextBtn) nextBtn.disabled = currentRound >= totalRounds;
|
||||
if (currentRoundNum) currentRoundNum.textContent = currentRound;
|
||||
}
|
||||
}
|
||||
|
||||
// Change round function
|
||||
async function changeRound(direction) {
|
||||
if (!tournamentActive) return;
|
||||
|
||||
const newRound = currentRound + direction;
|
||||
if (newRound < 1 || newRound > totalRounds) return;
|
||||
|
||||
// Disable buttons during request
|
||||
const prevBtn = document.getElementById('prevRoundBtn');
|
||||
const nextBtn = document.getElementById('nextRoundBtn');
|
||||
|
||||
if (prevBtn) prevBtn.disabled = true;
|
||||
if (nextBtn) nextBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tournament/round/${newRound}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
currentRound = newRound;
|
||||
updateRoundNavigation();
|
||||
|
||||
// Reload page to get new round players
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 300);
|
||||
} else {
|
||||
console.error('Failed to change round');
|
||||
alert('Failed to change round. Please try again.');
|
||||
updateRoundNavigation();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error changing round:', error);
|
||||
alert('Error changing round. Please try again.');
|
||||
updateRoundNavigation();
|
||||
}
|
||||
}
|
||||
|
||||
// Debounce function
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Save settings to server
|
||||
async function saveSettings(settingsUpdate) {
|
||||
try {
|
||||
const response = await fetch('/api/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(settingsUpdate)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (!tournamentActive) {
|
||||
currentSettings = result.settings;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const debouncedSaveSettings = debounce(saveSettings, 500);
|
||||
|
||||
// Desktop-only functionality - mobile users are redirected
|
||||
|
||||
// Mobile device detection
|
||||
function isMobileDevice() {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
|
||||
(window.innerWidth <= 1024 && window.innerHeight <= 1366) ||
|
||||
('ontouchstart' in window) ||
|
||||
(navigator.maxTouchPoints > 0);
|
||||
}
|
||||
|
||||
// Update card title
|
||||
function updateCardTitle(index) {
|
||||
if (tournamentActive) return;
|
||||
|
||||
const input = document.getElementById(`titleInput${index}`);
|
||||
const cardTitle = document.getElementById(`cardTitle${index}`);
|
||||
if (input && cardTitle) {
|
||||
const newTitle = input.value || `Camera ${index}`;
|
||||
cardTitle.textContent = newTitle;
|
||||
|
||||
if (event && event.target === input) {
|
||||
currentSettings.camera_titles[index.toString()] = newTitle;
|
||||
debouncedSaveSettings({
|
||||
camera_titles: {
|
||||
[index.toString()]: newTitle
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle titles
|
||||
function toggleTitles() {
|
||||
const show = document.getElementById('toggleTitles').checked;
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const cardTitle = document.getElementById(`cardTitle${i}`);
|
||||
if (cardTitle) {
|
||||
cardTitle.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if (event && event.target === document.getElementById('toggleTitles')) {
|
||||
currentSettings.display_options.show_titles = show;
|
||||
debouncedSaveSettings({
|
||||
display_options: {
|
||||
show_titles: show
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust title size
|
||||
function adjustTitleSize(size) {
|
||||
document.getElementById('titleSizeValue').textContent = size;
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const cardTitle = document.getElementById(`cardTitle${i}`);
|
||||
if (cardTitle) {
|
||||
cardTitle.style.fontSize = `${size}rem`;
|
||||
}
|
||||
}
|
||||
|
||||
if (event && event.target === document.getElementById('titleSize')) {
|
||||
currentSettings.display_options.title_size = parseFloat(size);
|
||||
debouncedSaveSettings({
|
||||
display_options: {
|
||||
title_size: parseFloat(size)
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Open camera fullscreen
|
||||
function openCameraFullscreen(cameraId) {
|
||||
const customTitle = currentSettings.camera_titles[cameraId.toString()] || `Camera ${cameraId}`;
|
||||
window.location.href = `/fullscreen/${cameraId}?title=${encodeURIComponent(customTitle)}`;
|
||||
}
|
||||
|
||||
// Apply current settings
|
||||
function applyCurrentSettings() {
|
||||
// Apply title visibility
|
||||
const showTitles = currentSettings.display_options.show_titles;
|
||||
if (document.getElementById('toggleTitles')) {
|
||||
document.getElementById('toggleTitles').checked = showTitles;
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const cardTitle = document.getElementById(`cardTitle${i}`);
|
||||
if (cardTitle) {
|
||||
cardTitle.style.display = showTitles ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Apply title size
|
||||
const titleSize = currentSettings.display_options.title_size;
|
||||
if (document.getElementById('titleSizeValue')) {
|
||||
document.getElementById('titleSizeValue').textContent = titleSize;
|
||||
}
|
||||
if (document.getElementById('titleSize')) {
|
||||
document.getElementById('titleSize').value = titleSize;
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const cardTitle = document.getElementById(`cardTitle${i}`);
|
||||
if (cardTitle) {
|
||||
cardTitle.style.fontSize = `${titleSize}rem`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply card titles
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
const cardTitle = document.getElementById(`cardTitle${i}`);
|
||||
if (cardTitle) {
|
||||
const title = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
|
||||
cardTitle.textContent = title;
|
||||
}
|
||||
|
||||
if (!tournamentActive) {
|
||||
const input = document.getElementById(`titleInput${i}`);
|
||||
if (input) {
|
||||
input.value = currentSettings.camera_titles[i.toString()] || `Camera ${i}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Time and date updates
|
||||
function updateDateTime() {
|
||||
const now = new Date();
|
||||
const hours = now.getHours().toString().padStart(2, '0');
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0');
|
||||
const day = now.getDate().toString().padStart(2, '0');
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = now.getFullYear();
|
||||
|
||||
const timeEl = document.getElementById('time');
|
||||
const dateEl = document.getElementById('date');
|
||||
|
||||
if (timeEl) timeEl.textContent = `${hours}:${minutes}`;
|
||||
if (dateEl) dateEl.textContent = `${day}.${month}.${year}`;
|
||||
}
|
||||
|
||||
// Settings panel functionality
|
||||
const menuButton = document.getElementById('menuButton');
|
||||
const settingsPanel = document.getElementById('settingsPanel');
|
||||
const overlay = document.getElementById('overlay');
|
||||
const closeBtn = document.getElementById('closeBtn');
|
||||
|
||||
function openSettings() {
|
||||
settingsPanel.classList.add('active');
|
||||
overlay.classList.add('active');
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
settingsPanel.classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
if (menuButton) menuButton.addEventListener('click', openSettings);
|
||||
if (closeBtn) closeBtn.addEventListener('click', closeSettings);
|
||||
if (overlay) overlay.addEventListener('click', closeSettings);
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape' && settingsPanel.classList.contains('active')) {
|
||||
closeSettings();
|
||||
} else if (tournamentActive) {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
changeRound(-1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
changeRound(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateDateTime();
|
||||
setInterval(updateDateTime, 1000);
|
||||
updateRoundNavigation();
|
||||
applyCurrentSettings();
|
||||
addTouchFeedback();
|
||||
});
|
||||
|
||||
// Add touch feedback for interactive elements on touch devices
|
||||
function addTouchFeedback() {
|
||||
if (isMobileDevice()) {
|
||||
const touchElements = document.querySelectorAll('.camera-card, .nav-btn');
|
||||
|
||||
touchElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = 'scale(0.95) translateY(0)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function(e) {
|
||||
if (!this.disabled) {
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,769 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>📱 Tournament Draft</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
background: #f1f3f4;
|
||||
border-color: #dadce0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.tournament-header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tournament-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tournament-stats {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.view-only-badge {
|
||||
background: #e3f2fd;
|
||||
border: 2px solid #2196f3;
|
||||
color: #1976d2;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rounds-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.round-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.round-card.current {
|
||||
border-left: 5px solid #007bff;
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
.round-card.completed {
|
||||
border-left: 5px solid #28a745;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.round-card.waiting {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.round-header {
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.round-card.current .round-header {
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.round-card.completed .round-header {
|
||||
background: #f8fff9;
|
||||
}
|
||||
|
||||
.round-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.round-badge {
|
||||
padding: 8px 15px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.current-badge {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.completed-badge {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.waiting-badge {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
padding: 18px 15px;
|
||||
text-align: center;
|
||||
min-height: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.position-card.filled {
|
||||
border-color: #28a745;
|
||||
background: #f8fff9;
|
||||
}
|
||||
|
||||
.position-card.empty {
|
||||
border-color: #6c757d;
|
||||
background: #f1f3f4;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.position-number {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.position-card.empty .position-number {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1.2;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.position-card.empty .player-name {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.player-id {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
margin-top: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Mobile landscape optimization */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.mobile-navbar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.tournament-header {
|
||||
padding: 20px 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tournament-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tournament-stats {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
padding: 12px 10px;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.position-number {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.player-id {
|
||||
font-size: 0.7rem;
|
||||
padding: 3px 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.tournament-header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.tournament-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.tournament-stats {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.round-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.round-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
padding: 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.position-card {
|
||||
padding: 15px 12px;
|
||||
min-height: 85px;
|
||||
}
|
||||
|
||||
.position-number {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.player-id {
|
||||
font-size: 0.75rem;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.round-change-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: rgba(40, 167, 69, 0.9);
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 999;
|
||||
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
|
||||
}
|
||||
|
||||
.round-change-indicator.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tournament-summary {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.summary-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.smart-refresh-badge {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Tournament status indicator */
|
||||
.tournament-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* Results available indicator */
|
||||
.results-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* No tournament message */
|
||||
.no-tournament-message {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.no-tournament-message h2 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.no-tournament-message p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mobile-navbar">
|
||||
<div class="navbar-title">
|
||||
📋 Draft
|
||||
{% if tournament %}
|
||||
{% if tournament.current_round %}
|
||||
<span class="tournament-indicator">R{{ tournament.current_round }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="navbar-controls">
|
||||
<!-- Always show all 3 navigation buttons -->
|
||||
<a href="/mobile/streams" class="nav-btn">📷</a>
|
||||
<a href="/mobile/draft" class="nav-btn active">📋</a>
|
||||
<a href="/mobile/results" class="nav-btn">🏆</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
{% if tournament %}
|
||||
<div class="tournament-header">
|
||||
<div class="tournament-title">🎯 Shooting Tournament</div>
|
||||
<div class="tournament-stats">
|
||||
{{ tournament.total_players }} players • {{ tournament.total_rounds }} rounds
|
||||
{% if tournament.current_round %}
|
||||
• Currently on Round {{ tournament.current_round }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounds-container">
|
||||
{% for round in tournament.rounds %}
|
||||
{% set is_current = tournament.current_round == round.round_number %}
|
||||
{% set is_completed = tournament.current_round > round.round_number %}
|
||||
<div class="round-card {{ 'current' if is_current else ('completed' if is_completed else 'waiting') }}">
|
||||
<div class="round-header">
|
||||
<div class="round-title">Round {{ round.round_number }}</div>
|
||||
{% if is_current %}
|
||||
<div class="round-badge current-badge">Current</div>
|
||||
{% elif is_completed %}
|
||||
<div class="round-badge completed-badge">Completed</div>
|
||||
{% else %}
|
||||
<div class="round-badge waiting-badge">Waiting</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="players-grid">
|
||||
{% for position in range(1, 7) %}
|
||||
{% set player = round.players[position-1] if position <= round.players|length else none %}
|
||||
<div class="position-card {{ 'filled' if player else 'empty' }}">
|
||||
<div class="position-number">{{ position }}</div>
|
||||
{% if player %}
|
||||
<div class="player-name">{{ player.name }}</div>
|
||||
<div class="player-id">ID: {{ player.id }}</div>
|
||||
{% else %}
|
||||
<div class="player-name">Empty</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Tournament Summary -->
|
||||
<div class="tournament-summary">
|
||||
<div class="summary-title">📊 Tournament Summary</div>
|
||||
<div class="summary-grid">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Total Players:</span>
|
||||
<span class="summary-value">{{ tournament.total_players }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Total Rounds:</span>
|
||||
<span class="summary-value">{{ tournament.total_rounds }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Current Round:</span>
|
||||
<span class="summary-value">{{ tournament.current_round or 'Not set' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Updates:</span>
|
||||
<span class="summary-value" style="color: #28a745; font-weight: bold;">On Round Change</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Created:</span>
|
||||
<span class="summary-value">{{ tournament.created_at[:10] if tournament.created_at else 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Status:</span>
|
||||
<span class="summary-value" style="color: #28a745; font-weight: bold;">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- No tournament available -->
|
||||
<div class="no-tournament-message">
|
||||
<h2>📋 No Active Tournament</h2>
|
||||
<p>No tournament is currently running. Check the Results tab for completed tournaments or use the dashboard to start a new tournament.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Round change indicator -->
|
||||
<div class="round-change-indicator" id="roundChangeIndicator">
|
||||
🆕 New Round Starting...
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tournament state
|
||||
const tournamentActive = {{ 'true' if tournament else 'false' }};
|
||||
let currentRound = {{ tournament.current_round if tournament else 1 }};
|
||||
const totalRounds = {{ tournament.total_rounds if tournament else 1 }};
|
||||
|
||||
// Manual refresh function
|
||||
function manualRefresh() {
|
||||
const indicator = document.getElementById('roundChangeIndicator');
|
||||
indicator.textContent = '🔄 Refreshing...';
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function scrollToCurrentRound() {
|
||||
const currentRound = document.querySelector('.round-card.current');
|
||||
if (currentRound) {
|
||||
setTimeout(() => {
|
||||
currentRound.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function addMobileTouchFeedback() {
|
||||
const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .round-card');
|
||||
|
||||
touchElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = 'scale(0.98)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function(e) {
|
||||
if (!this.disabled) {
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function setupRoundChangeDetection() {
|
||||
if (!tournamentActive) return;
|
||||
|
||||
setInterval(async () => {
|
||||
if (document.visibilityState !== 'visible') return;
|
||||
|
||||
try {
|
||||
const response = await fetch(window.location.pathname + '?check=1');
|
||||
if (response.ok) {
|
||||
const pageContent = await response.text();
|
||||
|
||||
const roundMatch = pageContent.match(/Currently on Round\s*(\d+)/);
|
||||
if (roundMatch) {
|
||||
const serverCurrentRound = parseInt(roundMatch[1]);
|
||||
|
||||
if (serverCurrentRound !== currentRound) {
|
||||
console.log(`📱 Round changed from ${currentRound} to ${serverCurrentRound}`);
|
||||
|
||||
const indicator = document.getElementById('roundChangeIndicator');
|
||||
indicator.textContent = '🆕 New Round Starting...';
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Round check failed:', error);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
manualRefresh();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
addMobileTouchFeedback();
|
||||
scrollToCurrentRound();
|
||||
setupRoundChangeDetection();
|
||||
|
||||
console.log('📱 Mobile Draft with Fixed Navigation loaded');
|
||||
console.log('🏆 Tournament active:', tournamentActive);
|
||||
console.log('🔍 Round change detection active');
|
||||
});
|
||||
|
||||
window.addEventListener('focus', function() {
|
||||
console.log('📱 App regained focus - checking for round changes');
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
const response = await fetch(window.location.pathname + '?check=1');
|
||||
if (response.ok) {
|
||||
const pageContent = await response.text();
|
||||
const roundMatch = pageContent.match(/Currently on Round\s*(\d+)/);
|
||||
if (roundMatch) {
|
||||
const serverCurrentRound = parseInt(roundMatch[1]);
|
||||
if (serverCurrentRound !== currentRound) {
|
||||
manualRefresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Focus round check failed:', error);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,934 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>📱 League Results</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.league-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.league-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.league-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.league-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.league-stats {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.explanation-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #856404;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.explanation-text {
|
||||
color: #856404;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-card.podium {
|
||||
border-left: 5px solid;
|
||||
}
|
||||
|
||||
.result-card.rank-1 {
|
||||
border-left-color: #ffd700;
|
||||
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card.rank-2 {
|
||||
border-left-color: #c0c0c0;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card.rank-3 {
|
||||
border-left-color: #cd7f32;
|
||||
background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.result-card.rank-1 .rank-number { color: #b8860b; }
|
||||
.result-card.rank-2 .rank-number { color: #696969; }
|
||||
.result-card.rank-3 .rank-number { color: #8b4513; }
|
||||
|
||||
.rank-suffix {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.participant-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.participant-details {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.participant-id {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
text-align: right;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.final-score {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #28a745;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.total-score {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tournament-breakdown {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.breakdown-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.breakdown-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tournament-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tournament-number {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tournament-score {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tournament-item.joker {
|
||||
background: #fff3cd;
|
||||
border-color: #ffc107;
|
||||
}
|
||||
|
||||
.tournament-item.joker .tournament-score {
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.tournament-item.excluded {
|
||||
background: #f8d7da;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.tournament-item.excluded .tournament-score {
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.tournament-item.counted {
|
||||
background: #d1edf1;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.tournament-item.counted .tournament-score {
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.scoring-legend {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.legend-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.legend-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.legend-rule {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #007bff;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.legend-items-mobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.legend-item-mobile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
font-size: 1.2rem;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.congratulations {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.congrats-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.congrats-message {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Mobile landscape optimization */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.mobile-navbar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.league-header {
|
||||
padding: 20px 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.league-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.league-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.final-score {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.league-header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.league-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.league-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.final-score {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.congratulations {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.congrats-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.congrats-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.breakdown-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tournament-item {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.tournament-score {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.legend-rule {
|
||||
padding: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.legend-item-mobile {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.league-stats {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for results appearance */
|
||||
.result-card {
|
||||
animation: slideInUp 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.result-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.result-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.result-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.result-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
.result-card:nth-child(5) { animation-delay: 0.5s; }
|
||||
.result-card:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes slideInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Celebration confetti effect */
|
||||
.confetti {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.confetti-piece {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffd700;
|
||||
animation: confetti-fall 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes confetti-fall {
|
||||
0% {
|
||||
transform: translateY(-100vh) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* League status indicator */
|
||||
.league-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mobile-navbar">
|
||||
<div class="navbar-title">
|
||||
🏆 League
|
||||
<span class="league-indicator">FINAL</span>
|
||||
</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/mobile/streams" class="nav-btn">📷</a>
|
||||
<a href="/mobile/results" class="nav-btn active">🏆</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="league-header">
|
||||
<div class="league-title">🏆 League Championship</div>
|
||||
<div class="league-subtitle">
|
||||
Final Results - Best 5 of 6 Tournaments
|
||||
</div>
|
||||
<div class="league-badge">
|
||||
{% if league.tournament_type == '40_targets' %}
|
||||
40 Targets Format
|
||||
{% else %}
|
||||
20 Targets Format
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="league-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ participants|length if participants else 0 }}</div>
|
||||
<div class="stat-label">Participants</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ league.total_tournaments }}</div>
|
||||
<div class="stat-label">Tournaments</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{% if participants and participants|length > 0 %}{{ participants[0].final_score }}{% else %}0{% endif %}</div>
|
||||
<div class="stat-label">Highest Score</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ league.finished_at[:10] if league.finished_at else 'Today' }}</div>
|
||||
<div class="stat-label">Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if participants and participants|length > 0 %}
|
||||
<div class="congratulations">
|
||||
<div class="congrats-title">🎉 League Complete!</div>
|
||||
<div class="congrats-message">
|
||||
Congratulations to {{ participants[0].name }} for winning the league!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-list">
|
||||
{% for participant in participants %}
|
||||
<div class="result-card {{ 'podium rank-' + participant.rank|string if participant.rank <= 3 else '' }}">
|
||||
<div class="rank-display">
|
||||
<div class="rank-number">{{ participant.rank }}</div>
|
||||
<div class="rank-suffix">
|
||||
{% if participant.rank == 1 %}st
|
||||
{% elif participant.rank == 2 %}nd
|
||||
{% elif participant.rank == 3 %}rd
|
||||
{% else %}th
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if participant.rank == 1 %}
|
||||
<div class="medal">🥇</div>
|
||||
{% elif participant.rank == 2 %}
|
||||
<div class="medal">🥈</div>
|
||||
{% elif participant.rank == 3 %}
|
||||
<div class="medal">🥉</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">{{ participant.name }}</div>
|
||||
<div class="participant-details">
|
||||
<div class="participant-id">ID: {{ participant.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="score-display">
|
||||
<div class="final-score">{{ participant.final_score }}</div>
|
||||
<div class="total-score">Total: {{ participant.total_score }}</div>
|
||||
<div class="score-label">Final Score</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Tournament Breakdown for Top Players -->
|
||||
<!-- Fixed: Replace min(3, participants|length) with proper Jinja2 logic -->
|
||||
{% set max_breakdowns = 3 %}
|
||||
{% if participants|length < 3 %}
|
||||
{% set max_breakdowns = participants|length %}
|
||||
{% endif %}
|
||||
|
||||
{% for i in range(max_breakdowns) %}
|
||||
{% set participant = participants[i] %}
|
||||
<div class="tournament-breakdown">
|
||||
<div class="breakdown-title">
|
||||
{% if participant.rank == 1 %}🥇{% elif participant.rank == 2 %}🥈{% elif participant.rank == 3 %}🥉{% endif %}
|
||||
{{ participant.name }}'s Tournament History
|
||||
</div>
|
||||
<div class="breakdown-grid">
|
||||
{% for tournament_num in range(1, 7) %}
|
||||
{% set result = participant.tournament_results
|
||||
| selectattr("tournament", "equalto", tournament_num)
|
||||
| list
|
||||
| first %}
|
||||
|
||||
{% if result %}
|
||||
{% if (result.joker is defined and result.joker) or (result.participated is defined and not result.participated) %}
|
||||
<div class="tournament-item joker">
|
||||
<div class="tournament-number">T{{ tournament_num }}</div>
|
||||
<div class="tournament-score">🃏 Joker</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% set all_participated_scores = participant.tournament_results
|
||||
| selectattr("participated", "defined")
|
||||
| selectattr("participated")
|
||||
| selectattr("score", "defined")
|
||||
| map(attribute="score")
|
||||
| list %}
|
||||
{% set sorted_scores = all_participated_scores | sort(reverse=true) %}
|
||||
{% set is_excluded = sorted_scores | length > 5 and result.score == sorted_scores[-1] %}
|
||||
|
||||
{% if is_excluded %}
|
||||
<div class="tournament-item excluded">
|
||||
<div class="tournament-number">T{{ tournament_num }}</div>
|
||||
<div class="tournament-score">{{ result.score }} ❌</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="tournament-item counted">
|
||||
<div class="tournament-number">T{{ tournament_num }}</div>
|
||||
<div class="tournament-score">{{ result.score }} ✅</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="tournament-item">
|
||||
<div class="tournament-number">T{{ tournament_num }}</div>
|
||||
<div class="tournament-score">-</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Scoring Legend -->
|
||||
<div class="scoring-legend">
|
||||
<div class="legend-title">📖 How Final Scores Are Calculated</div>
|
||||
<div class="legend-content">
|
||||
<div class="legend-rule">
|
||||
<strong>🏆 League Rule:</strong> Best 5 out of 6 tournaments count toward final ranking
|
||||
</div>
|
||||
<div class="legend-rule">
|
||||
<strong>🃏 Joker System:</strong> Each player can skip 1 tournament without penalty
|
||||
</div>
|
||||
<div class="legend-items-mobile">
|
||||
<div class="legend-item-mobile">
|
||||
<span class="legend-dot counted">✅</span>
|
||||
<span>Counted toward final score</span>
|
||||
</div>
|
||||
<div class="legend-item-mobile">
|
||||
<span class="legend-dot excluded">❌</span>
|
||||
<span>Excluded (worst score)</span>
|
||||
</div>
|
||||
<div class="legend-item-mobile">
|
||||
<span class="legend-dot joker">🃏</span>
|
||||
<span>Joker used (skipped)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="result-card">
|
||||
<div style="text-align: center; width: 100%; color: #666;">
|
||||
<h3>No League Results Available</h3>
|
||||
<p>League results will appear here when the league is complete.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Confetti container -->
|
||||
<div class="confetti" id="confetti"></div>
|
||||
|
||||
<script>
|
||||
function createConfetti() {
|
||||
const confettiContainer = document.getElementById('confetti');
|
||||
const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const confettiPiece = document.createElement('div');
|
||||
confettiPiece.className = 'confetti-piece';
|
||||
confettiPiece.style.left = Math.random() * 100 + '%';
|
||||
confettiPiece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
confettiPiece.style.animationDelay = Math.random() * 3 + 's';
|
||||
confettiPiece.style.animationDuration = (Math.random() * 2 + 2) + 's';
|
||||
confettiContainer.appendChild(confettiPiece);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
confettiContainer.innerHTML = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function addMobileTouchFeedback() {
|
||||
const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .result-card');
|
||||
|
||||
touchElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = 'scale(0.98) translateY(0)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function(e) {
|
||||
if (!this.disabled) {
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showChampionCelebration() {
|
||||
{% if participants and participants|length > 0 %}
|
||||
createConfetti();
|
||||
|
||||
setTimeout(() => {
|
||||
const firstCard = document.querySelector('.result-card.rank-1');
|
||||
if (firstCard) {
|
||||
firstCard.style.boxShadow = '0 0 30px rgba(255, 215, 0, 0.5)';
|
||||
setTimeout(() => {
|
||||
firstCard.style.boxShadow = '';
|
||||
}, 2000);
|
||||
}
|
||||
}, 1000);
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
addMobileTouchFeedback();
|
||||
|
||||
setTimeout(() => {
|
||||
showChampionCelebration();
|
||||
}, 1500);
|
||||
|
||||
console.log('📱 Mobile League Results loaded');
|
||||
console.log('🏆 League participants:', {{ participants|length if participants else 0 }});
|
||||
console.log('🎯 Tournament type:', '{{ league.tournament_type }}');
|
||||
{% if participants and participants|length > 0 %}
|
||||
console.log('🏆 League Champion:', '{{ participants[0].name }}');
|
||||
console.log('🏆 Winning score:', {{ participants[0].final_score }});
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>📱 Camera Dashboard</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 20px;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 4px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 1rem;
|
||||
opacity: 0.8;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quick-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.quick-btn.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.quick-btn.priority {
|
||||
background: rgba(40, 167, 69, 0.8);
|
||||
border-color: rgba(40, 167, 69, 1);
|
||||
animation: priorityPulse 2s infinite;
|
||||
}
|
||||
|
||||
.quick-btn.priority:hover {
|
||||
background: rgba(40, 167, 69, 0.9);
|
||||
border-color: rgba(40, 167, 69, 1);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes priorityPulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
padding: 10px 20px;
|
||||
margin: 20px 0;
|
||||
font-size: 0.9rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-indicator.tournament-active {
|
||||
background: rgba(0, 123, 255, 0.8);
|
||||
border-color: rgba(0, 123, 255, 1);
|
||||
}
|
||||
|
||||
.status-indicator.results-available {
|
||||
background: rgba(40, 167, 69, 0.8);
|
||||
border-color: rgba(40, 167, 69, 1);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
width: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader-container">
|
||||
<div class="logo">📱</div>
|
||||
<div class="title">Camera Dashboard</div>
|
||||
<div class="subtitle">Loading mobile interface...</div>
|
||||
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="status-text" id="statusText">Detecting tournament state...</div>
|
||||
|
||||
<!-- Status Indicator -->
|
||||
<div class="status-indicator" id="statusIndicator" style="display: none;">
|
||||
<span id="statusMessage">Checking status...</span>
|
||||
</div>
|
||||
|
||||
<!-- Quick navigation fallback -->
|
||||
<div class="quick-nav" id="quickNav" style="display: none;">
|
||||
<a href="/mobile/streams" class="quick-btn">
|
||||
<span>📷</span>
|
||||
<span>Camera Streams</span>
|
||||
</a>
|
||||
|
||||
{% if tournament_active %}
|
||||
<a href="/mobile/draft" class="quick-btn">
|
||||
<span>📋</span>
|
||||
<span>Tournament Draft</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if results_available %}
|
||||
<a href="/mobile/results" class="quick-btn priority">
|
||||
<span>🏆</span>
|
||||
<span>View Results</span>
|
||||
</a>
|
||||
{% elif tournament_active %}
|
||||
<div class="quick-btn disabled">
|
||||
<span>🏆</span>
|
||||
<span>Results (Soon)</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Tournament state from server
|
||||
const tournamentActive = {{ 'true' if tournament_active else 'false' }};
|
||||
const resultsAvailable = {{ 'true' if results_available else 'false' }};
|
||||
|
||||
function updateStatus(message) {
|
||||
const statusText = document.getElementById('statusText');
|
||||
if (statusText) {
|
||||
statusText.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
function showStatusIndicator(message, type = '') {
|
||||
const statusIndicator = document.getElementById('statusIndicator');
|
||||
const statusMessage = document.getElementById('statusMessage');
|
||||
|
||||
if (statusIndicator && statusMessage) {
|
||||
statusMessage.textContent = message;
|
||||
statusIndicator.className = `status-indicator ${type}`;
|
||||
statusIndicator.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function redirectToOptimalPage() {
|
||||
// Determine the best page to redirect to based on current state
|
||||
let targetUrl = '/mobile/streams'; // Default to streams
|
||||
let reason = 'Camera streams';
|
||||
let statusType = '';
|
||||
|
||||
if (resultsAvailable) {
|
||||
targetUrl = '/mobile/results';
|
||||
reason = 'Tournament results are ready!';
|
||||
statusType = 'results-available';
|
||||
showStatusIndicator('🏆 ' + reason, statusType);
|
||||
} else if (tournamentActive) {
|
||||
targetUrl = '/mobile/draft';
|
||||
reason = 'Tournament is active';
|
||||
statusType = 'tournament-active';
|
||||
showStatusIndicator('🏆 ' + reason, statusType);
|
||||
} else {
|
||||
reason = 'Camera streams (default)';
|
||||
showStatusIndicator('📷 ' + reason);
|
||||
}
|
||||
|
||||
updateStatus(`Redirecting to ${reason.toLowerCase()}...`);
|
||||
|
||||
// Add a small delay for smooth UX
|
||||
setTimeout(() => {
|
||||
window.location.href = targetUrl;
|
||||
}, 1800);
|
||||
}
|
||||
|
||||
function showQuickNav() {
|
||||
const quickNav = document.getElementById('quickNav');
|
||||
const statusText = document.getElementById('statusText');
|
||||
|
||||
if (quickNav && statusText) {
|
||||
statusText.textContent = 'Choose your destination:';
|
||||
quickNav.style.display = 'flex';
|
||||
|
||||
// Show status indicator based on current state
|
||||
if (resultsAvailable) {
|
||||
showStatusIndicator('🏆 Tournament completed - results ready!', 'results-available');
|
||||
} else if (tournamentActive) {
|
||||
showStatusIndicator('🏆 Tournament in progress', 'tournament-active');
|
||||
} else {
|
||||
showStatusIndicator('📷 Ready to view camera streams');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-redirect logic
|
||||
function initializeRedirect() {
|
||||
console.log('📱 Mobile entry point loaded');
|
||||
console.log('🏆 Tournament active:', tournamentActive);
|
||||
console.log('📊 Results available:', resultsAvailable);
|
||||
|
||||
// Show status first
|
||||
setTimeout(() => {
|
||||
if (resultsAvailable) {
|
||||
showStatusIndicator('🏆 Tournament completed - results ready!', 'results-available');
|
||||
} else if (tournamentActive) {
|
||||
showStatusIndicator('🏆 Tournament in progress', 'tournament-active');
|
||||
} else {
|
||||
showStatusIndicator('📷 Ready to view camera streams');
|
||||
}
|
||||
}, 800);
|
||||
|
||||
// Wait a moment, then redirect
|
||||
setTimeout(() => {
|
||||
redirectToOptimalPage();
|
||||
}, 1500);
|
||||
|
||||
// Show quick nav as fallback after 4 seconds if redirect fails
|
||||
setTimeout(() => {
|
||||
showQuickNav();
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
// Handle errors gracefully
|
||||
function handleRedirectError() {
|
||||
updateStatus('Connection issue detected');
|
||||
setTimeout(() => {
|
||||
showQuickNav();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(event) {
|
||||
switch(event.key) {
|
||||
case '1':
|
||||
window.location.href = '/mobile/streams';
|
||||
break;
|
||||
case '2':
|
||||
if (tournamentActive) {
|
||||
window.location.href = '/mobile/draft';
|
||||
}
|
||||
break;
|
||||
case '3':
|
||||
if (resultsAvailable) {
|
||||
window.location.href = '/mobile/results';
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
showQuickNav();
|
||||
break;
|
||||
case 'r':
|
||||
case 'R':
|
||||
if (resultsAvailable) {
|
||||
window.location.href = '/mobile/results';
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize when page loads
|
||||
document.addEventListener('DOMContentLoaded', initializeRedirect);
|
||||
|
||||
// Handle network errors
|
||||
window.addEventListener('error', handleRedirectError);
|
||||
|
||||
// Handle orientation changes gracefully
|
||||
window.addEventListener('orientationchange', function() {
|
||||
setTimeout(() => {
|
||||
// Trigger a reflow to handle orientation change
|
||||
document.body.style.display = 'none';
|
||||
document.body.offsetHeight; // Trigger reflow
|
||||
document.body.style.display = '';
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Handle visibility change (when user returns to app)
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (!document.hidden && resultsAvailable) {
|
||||
// If results are available and user returns to app, prioritize results
|
||||
updateStatus('🏆 Redirecting to results...');
|
||||
setTimeout(() => {
|
||||
window.location.href = '/mobile/results';
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,696 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>📱 Tournament Results</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
background: #f1f3f4;
|
||||
border-color: #dadce0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.results-subtitle {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.results-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-card.podium {
|
||||
border-left: 5px solid;
|
||||
}
|
||||
|
||||
.result-card.rank-1 {
|
||||
border-left-color: #ffd700;
|
||||
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card.rank-2 {
|
||||
border-left-color: #c0c0c0;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card.rank-3 {
|
||||
border-left-color: #cd7f32;
|
||||
background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.result-card.rank-1 .rank-number { color: #b8860b; }
|
||||
.result-card.rank-2 .rank-number { color: #696969; }
|
||||
.result-card.rank-3 .rank-number { color: #8b4513; }
|
||||
|
||||
.rank-suffix {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.participant-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.participant-id {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
text-align: right;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #28a745;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tournament-info {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.congratulations {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px 20px;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.congrats-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.congrats-message {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Mobile landscape optimization */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.mobile-navbar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
padding: 20px 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.results-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.results-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.congratulations {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.congrats-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.congrats-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for results appearance */
|
||||
.result-card {
|
||||
animation: slideInUp 0.5s ease forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.result-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.result-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.result-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.result-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
.result-card:nth-child(5) { animation-delay: 0.5s; }
|
||||
.result-card:nth-child(6) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes slideInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Celebration confetti effect */
|
||||
.confetti {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.confetti-piece {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffd700;
|
||||
animation: confetti-fall 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes confetti-fall {
|
||||
0% {
|
||||
transform: translateY(-100vh) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh) rotate(720deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Results status indicator */
|
||||
.results-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mobile-navbar">
|
||||
<div class="navbar-title">
|
||||
🏆 Results
|
||||
<span class="results-indicator">FINAL</span>
|
||||
</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/mobile/streams" class="nav-btn">📷</a>
|
||||
|
||||
{% if tournament_active %}
|
||||
<a href="/mobile/draft" class="nav-btn">📋</a>
|
||||
{% endif %}
|
||||
|
||||
<a href="/mobile/results" class="nav-btn active">🏆</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
{% if participants %}
|
||||
{% if participants|length > 0 %}
|
||||
<div class="congratulations">
|
||||
<div class="congrats-title">🎉 Tournament Complete!</div>
|
||||
<div class="congrats-message">
|
||||
Congratulations to {{ participants[0].name }} for winning!
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="results-list">
|
||||
{% for participant in participants %}
|
||||
<div class="result-card {{ 'podium rank-' + participant.rank|string if participant.rank <= 3 else '' }}">
|
||||
<div class="rank-display">
|
||||
<div class="rank-number">{{ participant.rank }}</div>
|
||||
<div class="rank-suffix">
|
||||
{% if participant.rank == 1 %}st
|
||||
{% elif participant.rank == 2 %}nd
|
||||
{% elif participant.rank == 3 %}rd
|
||||
{% else %}th
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if participant.rank == 1 %}
|
||||
<div class="medal">🥇</div>
|
||||
{% elif participant.rank == 2 %}
|
||||
<div class="medal">🥈</div>
|
||||
{% elif participant.rank == 3 %}
|
||||
<div class="medal">🥉</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">{{ participant.name }}</div>
|
||||
<div class="participant-id">ID: {{ participant.id }}</div>
|
||||
</div>
|
||||
|
||||
<div class="score-display">
|
||||
<div class="score-number">{{ participant.total_score }}</div>
|
||||
<div class="score-label">Points</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="result-card">
|
||||
<div style="text-align: center; width: 100%; color: #666;">
|
||||
<h3>No Results Available</h3>
|
||||
<p>Tournament results will appear here when scoring is complete.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Tournament Info -->
|
||||
<div class="tournament-info">
|
||||
<div class="info-title">📊 Tournament Information</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Total Participants:</span>
|
||||
<span class="info-value">{{ participants|length if participants else 0 }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Tournament ID:</span>
|
||||
<span class="info-value">{{ results.tournament_id[:10] if results.tournament_id else 'Unknown' }}...</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Created:</span>
|
||||
<span class="info-value">{{ results.created_at[:10] if results.created_at else 'Unknown' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Status:</span>
|
||||
<span class="info-value" style="color: #28a745; font-weight: bold;">Completed</span>
|
||||
</div>
|
||||
{% if participants and participants|length > 0 %}
|
||||
<div class="info-item">
|
||||
<span class="info-label">Highest Score:</span>
|
||||
<span class="info-value" style="color: #28a745; font-weight: bold;">{{ participants[0].total_score }} points</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Winner:</span>
|
||||
<span class="info-value" style="color: #ffd700; font-weight: bold;">{{ participants[0].name }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confetti container -->
|
||||
<div class="confetti" id="confetti"></div>
|
||||
|
||||
<script>
|
||||
function createConfetti() {
|
||||
const confettiContainer = document.getElementById('confetti');
|
||||
const colors = ['#ffd700', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7'];
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const confettiPiece = document.createElement('div');
|
||||
confettiPiece.className = 'confetti-piece';
|
||||
confettiPiece.style.left = Math.random() * 100 + '%';
|
||||
confettiPiece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
|
||||
confettiPiece.style.animationDelay = Math.random() * 3 + 's';
|
||||
confettiPiece.style.animationDuration = (Math.random() * 2 + 2) + 's';
|
||||
confettiContainer.appendChild(confettiPiece);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
confettiContainer.innerHTML = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function addMobileTouchFeedback() {
|
||||
const touchElements = document.querySelectorAll('.nav-btn:not(.disabled), .result-card');
|
||||
|
||||
touchElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = 'scale(0.98) translateY(0)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function(e) {
|
||||
if (!this.disabled) {
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function(e) {
|
||||
if (!this.disabled) {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showWinnerCelebration() {
|
||||
{% if participants and participants|length > 0 %}
|
||||
createConfetti();
|
||||
|
||||
setTimeout(() => {
|
||||
const firstCard = document.querySelector('.result-card.rank-1');
|
||||
if (firstCard) {
|
||||
firstCard.style.boxShadow = '0 0 30px rgba(255, 215, 0, 0.5)';
|
||||
setTimeout(() => {
|
||||
firstCard.style.boxShadow = '';
|
||||
}, 2000);
|
||||
}
|
||||
}, 1000);
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
addMobileTouchFeedback();
|
||||
|
||||
setTimeout(() => {
|
||||
showWinnerCelebration();
|
||||
}, 1500);
|
||||
|
||||
console.log('📱 Mobile Results with Smart Navbar loaded');
|
||||
console.log('🏆 Tournament Results:', {
|
||||
participants: {{ participants|length if participants else 0 }},
|
||||
{% if participants and participants|length > 0 %}
|
||||
winner: '{{ participants[0].name }}',
|
||||
winning_score: {{ participants[0].total_score }}
|
||||
{% endif %}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,670 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>📱 Camera Streams</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, viewport-fit=cover">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.mobile-navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 44px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.active:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
background: #f1f3f4;
|
||||
border-color: #dadce0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
background: #000;
|
||||
min-height: calc(100vh - 70px);
|
||||
min-height: calc(100dvh - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Camera Selection Grid */
|
||||
.camera-selection {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.camera-selection {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.camera-option {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #333;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.camera-option {
|
||||
min-height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.camera-option::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.camera-option:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.camera-option:hover {
|
||||
border-color: #007bff;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
|
||||
}
|
||||
|
||||
.camera-option:active {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.stream-preview {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stream-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
transition: opacity 0.3s ease;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.stream-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999;
|
||||
font-size: 0.9rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.camera-info {
|
||||
background: #000;
|
||||
padding: 12px 15px;
|
||||
border-top: 1px solid #333;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.camera-title {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.camera-info {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.camera-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.camera-selection {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.camera-option {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.stream-preview {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.camera-info {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.camera-title {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.camera-selection {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.camera-option {
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
.camera-info {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.camera-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 6px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.camera-selection {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.camera-option {
|
||||
min-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating Fullscreen Button */
|
||||
.floating-fullscreen-btn {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #007bff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.floating-fullscreen-btn:hover {
|
||||
background: #0056b3;
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.floating-fullscreen-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.floating-fullscreen-btn.hidden {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hide floating button when in fullscreen */
|
||||
:fullscreen .floating-fullscreen-btn,
|
||||
:-webkit-full-screen .floating-fullscreen-btn,
|
||||
:-moz-full-screen .floating-fullscreen-btn,
|
||||
:-ms-fullscreen .floating-fullscreen-btn {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Fullscreen adjustments */
|
||||
:fullscreen .mobile-navbar,
|
||||
:-webkit-full-screen .mobile-navbar,
|
||||
:-moz-full-screen .mobile-navbar,
|
||||
:-ms-fullscreen .mobile-navbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:fullscreen .container,
|
||||
:-webkit-full-screen .container,
|
||||
:-moz-full-screen .container,
|
||||
:-ms-fullscreen .container {
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
html:fullscreen .mobile-navbar,
|
||||
html:-webkit-full-screen .mobile-navbar,
|
||||
html:-moz-full-screen .mobile-navbar,
|
||||
html:-ms-fullscreen .mobile-navbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html:fullscreen .container,
|
||||
html:-webkit-full-screen .container,
|
||||
html:-moz-full-screen .container,
|
||||
html:-ms-fullscreen .container {
|
||||
padding: 10px;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.floating-fullscreen-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tournament status indicator */
|
||||
.tournament-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Results available indicator */
|
||||
.results-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mobile-navbar">
|
||||
<div class="navbar-title">
|
||||
📷 Streams
|
||||
{% if tournament_active %}
|
||||
<span class="tournament-indicator">LIVE</span>
|
||||
{% elif results_available %}
|
||||
<span class="results-indicator">FINAL</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="navbar-controls">
|
||||
<!-- Always show all 3 navigation buttons -->
|
||||
<a href="/mobile/streams" class="nav-btn active">📷</a>
|
||||
<a href="/mobile/draft" class="nav-btn">📋</a>
|
||||
<a href="/mobile/results" class="nav-btn">🏆</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="camera-selection">
|
||||
{% for i in range(1, 7) %}
|
||||
{% set camera_id = i %}
|
||||
<div class="camera-option" onclick="openCameraFullscreen({{ camera_id }})">
|
||||
<div class="stream-preview">
|
||||
<div class="stream-loading">Loading...</div>
|
||||
<img src="{{ streams[i-1].url }}"
|
||||
alt="Camera {{ camera_id }}"
|
||||
class="stream-img"
|
||||
onerror="handleStreamError(this, {{ camera_id }})"
|
||||
onload="handleStreamLoad(this)">
|
||||
</div>
|
||||
<div class="camera-info">
|
||||
<div class="camera-title">
|
||||
{% if tournament_active and current_round_data and (i-1) < current_round_data.players|length %}
|
||||
{{ current_round_data.players[i-1].name }}
|
||||
{% else %}
|
||||
{{ settings.camera_titles[camera_id|string] }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Fullscreen Button -->
|
||||
<button class="floating-fullscreen-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Enter Fullscreen">
|
||||
⛶
|
||||
</button>
|
||||
|
||||
<script>
|
||||
function handleStreamError(img, cameraId) {
|
||||
const loadingIndicator = img.parentElement.querySelector('.stream-loading');
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.textContent = 'Unavailable';
|
||||
loadingIndicator.style.color = '#ff6b6b';
|
||||
}
|
||||
img.style.opacity = '0.1';
|
||||
}
|
||||
|
||||
function handleStreamLoad(img) {
|
||||
const loadingIndicator = img.parentElement.querySelector('.stream-loading');
|
||||
if (loadingIndicator) {
|
||||
loadingIndicator.style.display = 'none';
|
||||
}
|
||||
img.style.opacity = '1';
|
||||
}
|
||||
|
||||
function openCameraFullscreen(cameraId) {
|
||||
{% if tournament_active and current_round_data %}
|
||||
const players = {{ current_round_data.players|tojson }};
|
||||
let customTitle = `Camera ${cameraId}`;
|
||||
if (cameraId <= players.length) {
|
||||
customTitle = players[cameraId - 1].name;
|
||||
}
|
||||
{% else %}
|
||||
const titles = {{ settings.camera_titles|tojson }};
|
||||
const customTitle = titles[cameraId.toString()] || `Camera ${cameraId}`;
|
||||
{% endif %}
|
||||
|
||||
const fullscreenUrl = `/fullscreen/${cameraId}?title=${encodeURIComponent(customTitle)}`;
|
||||
|
||||
if (screen.orientation && screen.orientation.lock) {
|
||||
screen.orientation.lock('landscape').then(() => {
|
||||
window.location.href = fullscreenUrl;
|
||||
}).catch(() => {
|
||||
window.location.href = fullscreenUrl;
|
||||
});
|
||||
} else {
|
||||
window.location.href = fullscreenUrl;
|
||||
}
|
||||
}
|
||||
|
||||
function addMobileTouchFeedback() {
|
||||
const touchElements = document.querySelectorAll('.camera-option, .nav-btn:not(.disabled), .floating-fullscreen-btn');
|
||||
|
||||
touchElements.forEach(element => {
|
||||
element.addEventListener('touchstart', function(e) {
|
||||
if (!this.disabled && !this.classList.contains('hidden')) {
|
||||
this.style.transform = 'scale(0.95) translateY(0)';
|
||||
this.style.transition = 'transform 0.1s ease';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchend', function(e) {
|
||||
if (!this.disabled && !this.classList.contains('hidden')) {
|
||||
setTimeout(() => {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('touchcancel', function(e) {
|
||||
if (!this.disabled && !this.classList.contains('hidden')) {
|
||||
this.style.transform = '';
|
||||
this.style.transition = 'transform 0.2s ease';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard shortcuts for quick camera selection
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key >= '1' && event.key <= '6') {
|
||||
const cameraId = parseInt(event.key);
|
||||
openCameraFullscreen(cameraId);
|
||||
} else if (event.key === 'f' || event.key === 'F') {
|
||||
event.preventDefault();
|
||||
toggleFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
// Fullscreen functionality
|
||||
function toggleFullscreen() {
|
||||
if (isFullscreen()) {
|
||||
exitFullscreen();
|
||||
} else {
|
||||
enterFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function isFullscreen() {
|
||||
return document.fullscreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.msFullscreenElement;
|
||||
}
|
||||
|
||||
function enterFullscreen() {
|
||||
const element = document.documentElement;
|
||||
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen().catch(err => console.log('Fullscreen error:', err));
|
||||
} else if (element.webkitRequestFullscreen) {
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.msRequestFullscreen) {
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function exitFullscreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen().catch(err => console.log('Exit fullscreen error:', err));
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
function handleFullscreenChange() {
|
||||
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||
const navbar = document.querySelector('.mobile-navbar');
|
||||
const isFS = isFullscreen();
|
||||
|
||||
if (fullscreenBtn) {
|
||||
if (isFS) {
|
||||
fullscreenBtn.innerHTML = '⛉';
|
||||
fullscreenBtn.title = 'Exit Fullscreen';
|
||||
fullscreenBtn.classList.add('hidden');
|
||||
|
||||
if (navbar) {
|
||||
navbar.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
fullscreenBtn.innerHTML = '⛶';
|
||||
fullscreenBtn.title = 'Enter Fullscreen';
|
||||
fullscreenBtn.classList.remove('hidden');
|
||||
|
||||
if (navbar) {
|
||||
navbar.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
addMobileTouchFeedback();
|
||||
handleFullscreenChange();
|
||||
|
||||
console.log('📱 Mobile camera selection loaded with fixed navigation');
|
||||
console.log('🏆 Tournament active:', {{ 'true' if tournament_active else 'false' }});
|
||||
console.log('📊 Results available:', {{ 'true' if results_available else 'false' }});
|
||||
|
||||
setTimeout(() => {
|
||||
if (window.innerHeight < window.screen.height) {
|
||||
window.scrollBy(0, 1);
|
||||
setTimeout(() => window.scrollBy(0, -1), 100);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
setInterval(() => {
|
||||
const streams = document.querySelectorAll('.stream-img');
|
||||
streams.forEach(stream => {
|
||||
if (stream.complete && stream.naturalHeight === 0) {
|
||||
stream.src = stream.src.split('?')[0] + '?refresh=' + Date.now();
|
||||
}
|
||||
});
|
||||
}, 30000);
|
||||
|
||||
if (window.innerHeight > window.innerWidth) {
|
||||
const hint = document.createElement('div');
|
||||
hint.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
`;
|
||||
hint.textContent = '📱 Rotate to landscape or tap ⛶ for fullscreen';
|
||||
document.body.appendChild(hint);
|
||||
|
||||
setTimeout(() => {
|
||||
if (hint.parentNode) {
|
||||
hint.parentNode.removeChild(hint);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Tournament Archive</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f5f5;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Standardized Navigation Bar */
|
||||
.navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.success {
|
||||
background: #28a745;
|
||||
border-color: #1e7e34;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.success:hover {
|
||||
background: #1e7e34;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.danger {
|
||||
background: #dc3545;
|
||||
border-color: #c82333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.danger:hover {
|
||||
background: #c82333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Standardized Container */
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* White Scrollbar for main page */
|
||||
body::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: #c0c0c0;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 3px solid #007bff;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Compact Stats Overview */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid #e9ecef;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Compact Archive Grid */
|
||||
.archive-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.archive-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.archive-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.archive-header {
|
||||
background: #f8f9fa;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.archive-card.league .archive-header {
|
||||
background: #e8f5e8;
|
||||
}
|
||||
|
||||
.archive-card.tournament .archive-header {
|
||||
background: #fff3cd;
|
||||
}
|
||||
|
||||
.archive-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.archive-subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.archive-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-league {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-tournament {
|
||||
background: #ffc107;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.archive-content {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.archive-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.archive-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
background: #007bff;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: #0056b3;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #dc3545;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Confirmation Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.confirmation-modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
max-width: 400px;
|
||||
width: 90%;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.active .confirmation-modal {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal-message {
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
padding: 8px 15px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-btn.cancel {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn.cancel:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.modal-btn.confirm {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-btn.confirm:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 12px 20px;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.archive-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.archive-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.archive-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.archive-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">📚 Tournament Archive</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/" class="nav-btn">← Dashboard</a>
|
||||
<a href="/tournament" class="nav-btn">🏆 Tournament</a>
|
||||
<a href="/archive/player-analysis" class="nav-btn success">👤 Player Analysis</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Stats Overview -->
|
||||
<div class="stats-overview">
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">🏆</span>
|
||||
<div class="stat-value">{{ stats.total_tournaments }}</div>
|
||||
<div class="stat-label">Standalone Tournaments</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">🎖️</span>
|
||||
<div class="stat-value">{{ stats.total_leagues }}</div>
|
||||
<div class="stat-label">Completed Leagues</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">👥</span>
|
||||
<div class="stat-value">{{ stats.total_players }}</div>
|
||||
<div class="stat-label">Active Players</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">📊</span>
|
||||
<div class="stat-value">{{ stats.total_matches }}</div>
|
||||
<div class="stat-label">Total Competitions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leagues Section -->
|
||||
{% if leagues %}
|
||||
<div class="section">
|
||||
<h2 class="section-title">🎖️ League Championships</h2>
|
||||
<div class="archive-grid">
|
||||
{% for league in leagues %}
|
||||
<div class="archive-card league" onclick="viewLeague('{{ league.filename }}')">
|
||||
<div class="archive-header">
|
||||
<div>
|
||||
<div class="archive-title">League Championship</div>
|
||||
<div class="archive-subtitle">{{ league.created_at[:10] if league.created_at != 'Unknown' else 'Unknown Date' }}</div>
|
||||
</div>
|
||||
<span class="archive-badge badge-league">League</span>
|
||||
</div>
|
||||
<div class="archive-content">
|
||||
<div class="archive-info">
|
||||
<div class="info-item">
|
||||
<span class="info-icon">👥</span>
|
||||
<span class="info-value">{{ league.participants_count }} players</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">🎯</span>
|
||||
<span class="info-value">{{ league.tournament_type.replace('_', ' ')|title }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">📅</span>
|
||||
<span class="info-value">{{ league.archived_at[:10] if league.archived_at != 'Unknown' else 'Unknown Date' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">✅</span>
|
||||
<span class="info-value">{{ league.completed_tournaments }}/{{ league.total_tournaments }} tournaments</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="archive-actions">
|
||||
<a href="/archive/league/{{ league.filename }}" class="view-btn">🏆 View Results</a>
|
||||
<button class="delete-btn" onclick="event.stopPropagation(); deleteArchive('league', '{{ league.filename }}')">
|
||||
🗑️ Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Standalone Tournaments Section -->
|
||||
{% if tournaments %}
|
||||
<div class="section">
|
||||
<h2 class="section-title">🏆 Standalone Tournaments</h2>
|
||||
<div class="archive-grid">
|
||||
{% for tournament in tournaments %}
|
||||
<div class="archive-card tournament" onclick="viewTournament('{{ tournament.filename }}')">
|
||||
<div class="archive-header">
|
||||
<div>
|
||||
<div class="archive-title">Single Tournament</div>
|
||||
<div class="archive-subtitle">{{ tournament.created_at[:10] if tournament.created_at != 'Unknown' else 'Unknown Date' }}</div>
|
||||
</div>
|
||||
<span class="archive-badge badge-tournament">Tournament</span>
|
||||
</div>
|
||||
<div class="archive-content">
|
||||
<div class="archive-info">
|
||||
<div class="info-item">
|
||||
<span class="info-icon">👥</span>
|
||||
<span class="info-value">{{ tournament.participants_count }} players</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">🎯</span>
|
||||
<span class="info-value">{{ tournament.tournament_type.replace('_', ' ')|title }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">📅</span>
|
||||
<span class="info-value">{{ tournament.archived_at[:10] if tournament.archived_at != 'Unknown' else 'Unknown Date' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-icon">🏁</span>
|
||||
<span class="info-value">{{ 'Finished' if tournament.tournament_finished else 'Incomplete' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="archive-actions">
|
||||
<a href="/archive/tournament/{{ tournament.filename }}" class="view-btn">📊 View Results</a>
|
||||
<button class="delete-btn" onclick="event.stopPropagation(); deleteArchive('tournament', '{{ tournament.filename }}')">
|
||||
🗑️ Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Empty State -->
|
||||
{% if not leagues and not tournaments %}
|
||||
<div class="section">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📚</div>
|
||||
<h3>No Archives Found</h3>
|
||||
<p>Complete some tournaments or leagues to see them archived here</p>
|
||||
<a href="/tournament" class="nav-btn primary" style="margin-top: 15px;">🏆 Start Tournament</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div class="modal-overlay" id="confirmationModal">
|
||||
<div class="confirmation-modal">
|
||||
<div class="modal-title" id="modalTitle">Confirm Action</div>
|
||||
<div class="modal-message" id="modalMessage">Are you sure you want to proceed?</div>
|
||||
<div class="modal-buttons">
|
||||
<button class="modal-btn cancel" onclick="closeModal()">Cancel</button>
|
||||
<button class="modal-btn confirm" id="confirmBtn" onclick="confirmAction()">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pendingAction = null;
|
||||
|
||||
// Navigation functions
|
||||
function viewTournament(filename) {
|
||||
window.location.href = `/archive/tournament/${filename}`;
|
||||
}
|
||||
|
||||
function viewLeague(filename) {
|
||||
window.location.href = `/archive/league/${filename}`;
|
||||
}
|
||||
|
||||
async function deleteArchive(type, filename) {
|
||||
showModal(
|
||||
'Delete Archive',
|
||||
`Are you sure you want to delete this ${type}? This action cannot be undone.`,
|
||||
async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/archive/delete/${type}/${filename}`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
alert('Archive deleted successfully');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error deleting archive: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error deleting archive: ' + error.message);
|
||||
}
|
||||
closeModal();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Modal functions
|
||||
function showModal(title, message, confirmCallback) {
|
||||
document.getElementById('modalTitle').textContent = title;
|
||||
document.getElementById('modalMessage').textContent = message;
|
||||
pendingAction = confirmCallback;
|
||||
document.getElementById('confirmationModal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('confirmationModal').classList.remove('active');
|
||||
pendingAction = null;
|
||||
}
|
||||
|
||||
function confirmAction() {
|
||||
if (pendingAction) {
|
||||
pendingAction();
|
||||
}
|
||||
}
|
||||
|
||||
// Click outside modal to close
|
||||
document.getElementById('confirmationModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('📚 Archive loaded');
|
||||
console.log('🏆 Tournaments:', {{ tournaments|length if tournaments else 0 }});
|
||||
console.log('🎖️ Leagues:', {{ leagues|length if leagues else 0 }});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,776 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Player Analysis - Camera Dashboard</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Standardized Navigation Bar */
|
||||
.navbar {
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.secondary {
|
||||
background: #6c757d;
|
||||
border-color: #495057;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.secondary:hover {
|
||||
background: #495057;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Standardized Container */
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* White Scrollbar for main page */
|
||||
body::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: #c0c0c0;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #333;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f1f3f4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Compact Stats Overview */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e9ecef;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Compact Controls */
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 10px 15px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
|
||||
}
|
||||
|
||||
.sort-select {
|
||||
padding: 10px 15px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.sort-select:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: white;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 8px 15px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: #007bff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Compact Players Grid */
|
||||
.players-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid #e9ecef;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #28a745, #20c997);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.player-card.current-player::before {
|
||||
background: linear-gradient(90deg, #28a745, #20c997);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.player-card.archived-player::before {
|
||||
background: linear-gradient(90deg, #6c757d, #495057);
|
||||
}
|
||||
|
||||
.player-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.player-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.player-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.player-badge {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.player-badge.archived {
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.stat-item .icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-item .value {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-item .label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Compact Mini Charts */
|
||||
.player-chart {
|
||||
margin-top: 15px;
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #007bff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 12px 20px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box, .sort-select {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">👤 Player Analysis</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/archive" class="nav-btn secondary">📚 Back to Archive</a>
|
||||
<a href="/" class="nav-btn primary">🏠 Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Stats Overview -->
|
||||
<div class="stats-overview">
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">👥</span>
|
||||
<div class="stat-value" id="totalPlayers">{{ players|length }}</div>
|
||||
<div class="stat-label">Total Players</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">✅</span>
|
||||
<div class="stat-value" id="activePlayers">{{ players|selectattr('current_player')|list|length }}</div>
|
||||
<div class="stat-label">Active Players</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">📊</span>
|
||||
<div class="stat-value" id="avgTournaments">{{ overview_stats.avg_tournaments if overview_stats else 0 }}</div>
|
||||
<div class="stat-label">Avg Tournaments</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-icon">🏆</span>
|
||||
<div class="stat-value" id="topScore">{{ overview_stats.top_score if overview_stats else 0 }}</div>
|
||||
<div class="stat-label">Highest Score</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title">Select a Player to Analyze</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="controls">
|
||||
<input type="text" class="search-box" id="searchBox" placeholder="🔍 Search players by name...">
|
||||
|
||||
<select class="sort-select" id="sortSelect">
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="best_score">Sort by Best Score</option>
|
||||
<option value="average_score">Sort by Average Score</option>
|
||||
<option value="total_tournaments">Sort by Total Tournaments</option>
|
||||
<option value="total_leagues">Sort by Total Leagues</option>
|
||||
<option value="total_shots">Sort by Total Shots</option>
|
||||
</select>
|
||||
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-btn active" data-filter="all">All Players</button>
|
||||
<button class="filter-btn" data-filter="current">Current Players</button>
|
||||
<button class="filter-btn" data-filter="archived">Archived Players</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Players Grid -->
|
||||
<div class="players-grid" id="playersGrid">
|
||||
<div class="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading players...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Players data from Flask
|
||||
let playersData = {{ players|tojson }};
|
||||
let filteredPlayers = [...playersData];
|
||||
let currentFilter = 'all';
|
||||
let currentSort = 'name';
|
||||
let playersWithStats = [];
|
||||
|
||||
// Initialize page
|
||||
function initializePage() {
|
||||
loadPlayerStats();
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
// Load player statistics
|
||||
async function loadPlayerStats() {
|
||||
try {
|
||||
const response = await fetch('/api/archive/players/with-stats');
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
playersWithStats = result.players;
|
||||
playersData = playersWithStats;
|
||||
filteredPlayers = [...playersWithStats];
|
||||
filterAndSortPlayers();
|
||||
} else {
|
||||
console.error('Failed to load player stats');
|
||||
renderPlayersBasic();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading player stats:', error);
|
||||
renderPlayersBasic();
|
||||
}
|
||||
}
|
||||
|
||||
// Setup event listeners
|
||||
function setupEventListeners() {
|
||||
const searchBox = document.getElementById('searchBox');
|
||||
const sortSelect = document.getElementById('sortSelect');
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
|
||||
searchBox.addEventListener('input', filterAndSortPlayers);
|
||||
sortSelect.addEventListener('change', (e) => {
|
||||
currentSort = e.target.value;
|
||||
filterAndSortPlayers();
|
||||
});
|
||||
|
||||
filterButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterButtons.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentFilter = btn.dataset.filter;
|
||||
filterAndSortPlayers();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Filter and sort players
|
||||
function filterAndSortPlayers() {
|
||||
const searchTerm = document.getElementById('searchBox').value.toLowerCase();
|
||||
|
||||
// Filter players
|
||||
filteredPlayers = playersData.filter(player => {
|
||||
const matchesSearch = player.name.toLowerCase().includes(searchTerm);
|
||||
const matchesFilter = currentFilter === 'all' ||
|
||||
(currentFilter === 'current' && player.current_player) ||
|
||||
(currentFilter === 'archived' && !player.current_player);
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
|
||||
// Sort players
|
||||
filteredPlayers.sort((a, b) => {
|
||||
switch (currentSort) {
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'best_score':
|
||||
return (b.stats?.best_tournament_score || 0) - (a.stats?.best_tournament_score || 0);
|
||||
case 'average_score':
|
||||
return (b.stats?.average_tournament_score || 0) - (a.stats?.average_tournament_score || 0);
|
||||
case 'total_tournaments':
|
||||
return (b.stats?.total_tournaments || 0) - (a.stats?.total_tournaments || 0);
|
||||
case 'total_leagues':
|
||||
return (b.stats?.total_leagues || 0) - (a.stats?.total_leagues || 0);
|
||||
case 'total_shots':
|
||||
return (b.stats?.total_shots_fired || 0) - (a.stats?.total_shots_fired || 0);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
renderPlayers();
|
||||
}
|
||||
|
||||
// Render players with stats
|
||||
function renderPlayers() {
|
||||
const playersGrid = document.getElementById('playersGrid');
|
||||
|
||||
if (filteredPlayers.length === 0) {
|
||||
playersGrid.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">👤</div>
|
||||
<h3>No Players Found</h3>
|
||||
<p>Try adjusting your search or filter criteria</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
playersGrid.innerHTML = filteredPlayers.map(player => `
|
||||
<div class="player-card ${player.current_player ? 'current-player' : 'archived-player'}"
|
||||
onclick="viewPlayerStats(${player.id})">
|
||||
<div class="player-header">
|
||||
<div class="player-name">${player.name}</div>
|
||||
<div class="player-badge ${player.current_player ? 'current' : 'archived'}">
|
||||
${player.current_player ? 'Current' : 'Archived'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-stats">
|
||||
<div class="stat-item">
|
||||
<span class="icon">🎯</span>
|
||||
<span class="label">Tournaments:</span>
|
||||
<span class="value">${player.stats?.total_tournaments || 0}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">🏆</span>
|
||||
<span class="label">Leagues:</span>
|
||||
<span class="value">${player.stats?.total_leagues || 0}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">📈</span>
|
||||
<span class="label">Best Score:</span>
|
||||
<span class="value">${player.stats?.best_tournament_score || 0}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">📊</span>
|
||||
<span class="label">Average:</span>
|
||||
<span class="value">${Math.round(player.stats?.average_tournament_score || 0)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-chart">
|
||||
<canvas class="chart-canvas" id="chart-${player.id}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// Create mini charts for each player
|
||||
setTimeout(() => {
|
||||
filteredPlayers.forEach(player => {
|
||||
if (player.stats?.performance_trend) {
|
||||
createMiniChart(player);
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Render players without stats (fallback)
|
||||
function renderPlayersBasic() {
|
||||
const playersGrid = document.getElementById('playersGrid');
|
||||
|
||||
playersGrid.innerHTML = playersData.map(player => `
|
||||
<div class="player-card ${player.current_player ? 'current-player' : 'archived-player'}"
|
||||
onclick="viewPlayerStats(${player.id})">
|
||||
<div class="player-header">
|
||||
<div class="player-name">${player.name}</div>
|
||||
<div class="player-badge ${player.current_player ? 'current' : 'archived'}">
|
||||
${player.current_player ? 'Current' : 'Archived'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="player-stats">
|
||||
<div class="stat-item">
|
||||
<span class="icon">🎯</span>
|
||||
<span class="label">Tournaments:</span>
|
||||
<span class="value">Loading...</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">🏆</span>
|
||||
<span class="label">Leagues:</span>
|
||||
<span class="value">Loading...</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">📈</span>
|
||||
<span class="label">Best Score:</span>
|
||||
<span class="value">Loading...</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="icon">📊</span>
|
||||
<span class="label">Average:</span>
|
||||
<span class="value">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Create mini performance chart for player
|
||||
function createMiniChart(player) {
|
||||
const canvas = document.getElementById(`chart-${player.id}`);
|
||||
if (!canvas || !player.stats?.performance_trend) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: player.stats.performance_trend.map((_, i) => `T${i + 1}`),
|
||||
datasets: [{
|
||||
data: player.stats.performance_trend,
|
||||
borderColor: player.current_player ? '#28a745' : '#6c757d',
|
||||
backgroundColor: player.current_player ? 'rgba(40, 167, 69, 0.1)' : 'rgba(108, 117, 125, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 2,
|
||||
pointHoverRadius: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
hoverBackgroundColor: player.current_player ? '#28a745' : '#6c757d'
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Navigate to player stats
|
||||
function viewPlayerStats(playerId) {
|
||||
window.location.href = `/archive/player/${playerId}`;
|
||||
}
|
||||
|
||||
// Initialize page when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,627 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ player.name }} - Player Stats</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
height: 100vh;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Enhanced Navigation Bar */
|
||||
.navbar {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
color: black;
|
||||
padding: 12px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main Container */
|
||||
.container {
|
||||
height: calc(100vh - 60px);
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Top Section - Stats and Chart */
|
||||
.top-section {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 15px;
|
||||
height: 50%;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
/* Stats Panel */
|
||||
.stats-panel {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 12px 8px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Chart Panel */
|
||||
.chart-panel {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
/* Bottom Section - History */
|
||||
.bottom-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.history-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.history-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.history-list::-webkit-scrollbar-track {
|
||||
background: #f8f9fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.history-list::-webkit-scrollbar-thumb {
|
||||
background: #dee2e6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.history-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #adb5bd;
|
||||
}
|
||||
|
||||
/* Tournament History Items */
|
||||
.history-item {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid #2196f3;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
|
||||
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
|
||||
}
|
||||
|
||||
.history-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
font-size: 0.8rem;
|
||||
color: #1976d2;
|
||||
margin-bottom: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.history-type {
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
color: #0d47a1;
|
||||
}
|
||||
|
||||
.history-score {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #2e7d32;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* League History Items */
|
||||
.league-history-item {
|
||||
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid #9c27b0;
|
||||
}
|
||||
|
||||
.league-history-item:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
|
||||
background: linear-gradient(135deg, #e1bee7 0%, #ce93d8 100%);
|
||||
}
|
||||
|
||||
.league-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.league-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.league-score-display {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #4a148c;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.league-details {
|
||||
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
|
||||
border: 1px solid #81c784;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.league-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.league-final-score {
|
||||
color: #1b5e20;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.league-total-score {
|
||||
color: #388e3c;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tournament-results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tournament-result {
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.65rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.tournament-result:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.tournament-result.participated {
|
||||
background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
|
||||
color: #1b5e20;
|
||||
border: 1px solid #81c784;
|
||||
}
|
||||
|
||||
.tournament-result.joker {
|
||||
background: linear-gradient(135deg, #fff3e0, #ffcc02);
|
||||
color: #e65100;
|
||||
border: 1px solid #ffb74d;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.top-section {
|
||||
grid-template-columns: 1fr;
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 10px 15px;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 80px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.top-section, .bottom-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.top-section {
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation Bar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-title">📊 {{ player.name }} - Stats</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/archive/player-analysis" class="nav-btn">👤 All Players</a>
|
||||
<a href="/archive" class="nav-btn">📚 Archive</a>
|
||||
<a href="/" class="nav-btn primary">🏠 Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Top Section - Stats and Chart -->
|
||||
<div class="top-section">
|
||||
<!-- Stats Panel -->
|
||||
<div class="stats-panel">
|
||||
<div class="panel-title">📊 Statistics</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.total_tournaments }}</div>
|
||||
<div class="stat-label">Tournaments</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.total_leagues }}</div>
|
||||
<div class="stat-label">Leagues</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.best_tournament_score }}</div>
|
||||
<div class="stat-label">Best Score</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.average_tournament_score|round|int if stats.average_tournament_score > 0 else 0 }}</div>
|
||||
<div class="stat-label">Average</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.total_shots_fired|default(0) }}</div>
|
||||
<div class="stat-label">Total Shots</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ stats.worst_tournament_score if stats.worst_tournament_score > 0 else 0 }}</div>
|
||||
<div class="stat-label">Worst Score</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Chart -->
|
||||
<div class="chart-panel">
|
||||
<div class="panel-title">📈 Performance Trend</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="performanceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section - History -->
|
||||
<div class="bottom-section">
|
||||
<!-- Tournament History -->
|
||||
<div class="history-section">
|
||||
<div class="panel-title">🎯 Tournament History</div>
|
||||
{% if stats.tournament_history %}
|
||||
<div class="history-list">
|
||||
{% for tournament in stats.tournament_history[:10] %}
|
||||
<div class="history-item">
|
||||
<div class="history-info">
|
||||
<div class="history-date">{{ tournament.date[:10] if tournament.date != 'Unknown' else 'Unknown Date' }}</div>
|
||||
<div class="history-type">{{ tournament.tournament_type.replace('_', ' ')|title }} • {{ tournament.shots_fired }} shots</div>
|
||||
</div>
|
||||
<div class="history-score">{{ tournament.score }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if stats.tournament_history|length > 10 %}
|
||||
<div style="text-align: center; padding: 8px; color: #666; font-size: 0.8rem;">
|
||||
... and {{ stats.tournament_history|length - 10 }} more
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">🎯</div>
|
||||
<div>No tournament history</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- League History -->
|
||||
<div class="history-section">
|
||||
<div class="panel-title">🏆 League History</div>
|
||||
{% if stats.league_history %}
|
||||
<div class="history-list">
|
||||
{% for league in stats.league_history %}
|
||||
<div class="league-history-item">
|
||||
<div class="league-header">
|
||||
<div class="league-info">
|
||||
<div class="history-date">{{ league.date[:10] if league.date != 'Unknown' else 'Unknown Date' }}</div>
|
||||
<div class="history-type">
|
||||
League Championship • {{ league.tournaments_participated }}/6 tournaments
|
||||
{% if league.joker_used %} • 🃏 Joker Used{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="league-score-display">{{ league.final_score }}</div>
|
||||
</div>
|
||||
|
||||
<div class="league-details">
|
||||
<div class="league-summary">
|
||||
<span>Final Score: <span class="league-final-score">{{ league.final_score }}</span></span>
|
||||
<span class="league-total-score">Total: {{ league.total_score }}</span>
|
||||
</div>
|
||||
<div class="tournament-results">
|
||||
{% for result in league.tournament_results %}
|
||||
<span class="tournament-result {{ 'participated' if result.participated else 'joker' }}">
|
||||
T{{ result.tournament }}: {{ result.score if result.participated else 'Joker' }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">🏆</div>
|
||||
<div>No league history</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Player data from Flask
|
||||
const playerStats = {{ stats|tojson }};
|
||||
|
||||
// Initialize page
|
||||
function initializePage() {
|
||||
createPerformanceChart();
|
||||
}
|
||||
|
||||
// Create performance trend chart
|
||||
function createPerformanceChart() {
|
||||
const ctx = document.getElementById('performanceChart').getContext('2d');
|
||||
const scores = playerStats.tournament_scores || [];
|
||||
|
||||
if (scores.length === 0) {
|
||||
ctx.font = '14px Arial';
|
||||
ctx.fillStyle = '#666';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('No tournament data available', ctx.canvas.width / 2, ctx.canvas.height / 2);
|
||||
return;
|
||||
}
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: scores.map((_, i) => `T${i + 1}`),
|
||||
datasets: [{
|
||||
label: 'Tournament Score',
|
||||
data: scores,
|
||||
borderColor: '#28a745',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.15)',
|
||||
borderWidth: 3,
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 8,
|
||||
pointBackgroundColor: '#28a745',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBackgroundColor: '#1e7e34',
|
||||
pointHoverBorderColor: '#fff'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.9)',
|
||||
titleColor: '#fff',
|
||||
bodyColor: '#fff',
|
||||
borderColor: '#28a745',
|
||||
borderWidth: 2,
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
return `Tournament ${context[0].dataIndex + 1}`;
|
||||
},
|
||||
label: function(context) {
|
||||
return `Score: ${context.parsed.y}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: { color: 'rgba(40, 167, 69, 0.1)' },
|
||||
ticks: {
|
||||
color: '#28a745',
|
||||
font: { size: 11, weight: 'bold' }
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: { color: 'rgba(40, 167, 69, 0.1)' },
|
||||
ticks: {
|
||||
color: '#28a745',
|
||||
font: { size: 11, weight: 'bold' }
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize page when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,872 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Tournament Results</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f8f9fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
height: 100vh;
|
||||
overflow: hidden; /* Prevent scrolling for TV display */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: white;
|
||||
border-bottom: 1px solid #e1e5e9;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
height: 40px;
|
||||
max-width: 120px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-controls {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
cursor: pointer;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background: #007bff;
|
||||
border-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main TV Layout */
|
||||
.tv-container {
|
||||
height: calc(100vh - 90px); /* Adjusted for consistent navbar size */
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Left Column - Header & Podium */
|
||||
.left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.results-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.results-header * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
height: 70px;
|
||||
max-width: 180px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 20px;
|
||||
filter: brightness(1.2) contrast(1.1);
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: rgb(255, 255, 255);
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.results-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.results-meta {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meta-number {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Modern Podium Design */
|
||||
.podium-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 25px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.podium-title {
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.podium-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.podium-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-left: 5px solid;
|
||||
}
|
||||
|
||||
.podium-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.podium-card.rank-1 {
|
||||
border-left-color: #ffd700;
|
||||
background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.podium-card.rank-2 {
|
||||
border-left-color: #c0c0c0;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.podium-card.rank-3 {
|
||||
border-left-color: #cd7f32;
|
||||
background: linear-gradient(135deg, #fdf6f0 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.podium-card.rank-1 .rank-number { color: #b8860b; }
|
||||
.podium-card.rank-2 .rank-number { color: #696969; }
|
||||
.podium-card.rank-3 .rank-number { color: #8b4513; }
|
||||
|
||||
.rank-suffix {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.participant-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.participant-id {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
text-align: right;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #28a745;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Right Column - Full Results Table */
|
||||
.right-column {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: #f8f9fa;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.results-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.results-table th,
|
||||
.results-table td {
|
||||
padding: 10px 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
}
|
||||
|
||||
.results-table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.5px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.results-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(1) {
|
||||
background: #fff9e6;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(1):hover {
|
||||
background: #fff3cd;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(2) {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(2):hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(3) {
|
||||
background: #fdf6f0;
|
||||
}
|
||||
|
||||
.results-table tbody tr:nth-child(3):hover {
|
||||
background: #f8f1e6;
|
||||
}
|
||||
|
||||
.rank-cell {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-1 { color: #b8860b; }
|
||||
.rank-2 { color: #6c757d; }
|
||||
.rank-3 { color: #8b4513; }
|
||||
|
||||
.name-cell {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.id-cell {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 3px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.score-cell {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #28a745;
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 3px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
/* Tournament Stats Footer */
|
||||
.stats-footer {
|
||||
background: white;
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 0.8rem;
|
||||
color: #6c757d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 600;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* Large Screen Optimization */
|
||||
@media (min-width: 1200px) {
|
||||
.tv-container {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.results-table th,
|
||||
.results-table td {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ultra-wide screens (TVs) */
|
||||
@media (min-width: 1600px) {
|
||||
.tv-container {
|
||||
grid-template-columns: 1fr 2.5fr;
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Prevent scrolling on small screens by scaling down */
|
||||
@media (max-height: 800px) {
|
||||
.results-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.results-table th,
|
||||
.results-table td {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsive - keep consistent navbar size from other pages */
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
height: 30px;
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.tv-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.podium-section {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.podium-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Mobile podium - keep the same structure */
|
||||
.podium-container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.podium-card {
|
||||
padding: 15px 20px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar-logo {
|
||||
height: 28px;
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.podium-section {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.podium-card {
|
||||
padding: 12px 15px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rank-display {
|
||||
min-width: 45px;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.rank-suffix {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Auto-refresh indicator for TV */
|
||||
.tv-refresh-indicator {
|
||||
position: fixed;
|
||||
top: 100px; /* Adjusted for consistent navbar */
|
||||
right: 20px;
|
||||
background: rgba(40, 167, 69, 0.9);
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tv-refresh-indicator.show {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbar-brand">
|
||||
<div class="navbar-title">🏆 Tournament Results</div>
|
||||
</div>
|
||||
<div class="navbar-controls">
|
||||
<a href="/" class="nav-btn">← Dashboard</a>
|
||||
<a href="/tournament/draft" class="nav-btn">📋 Draft</a>
|
||||
<a href="/results/calculator" class="nav-btn primary">🎯 Calculator</a>
|
||||
<button class="nav-btn" onclick="window.print()">🖨️ Print</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tv-container">
|
||||
<!-- Left Column -->
|
||||
<div class="left-column">
|
||||
<!-- Header Section -->
|
||||
<div class="results-header">
|
||||
<img src="/static/logo.png" alt="Logo" class="header-logo" onerror="this.style.display='none'" />
|
||||
<div class="results-title">Tournament Results</div>
|
||||
<div class="results-subtitle">Final Rankings & Scores</div>
|
||||
<div class="results-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-number">{{ participants|length }}</span>
|
||||
<span class="meta-label">Participants</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-number">{{ (participants|length * 40) if participants else 0 }}</span>
|
||||
<span class="meta-label">Total Shots</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-number">{% if participants and participants|length > 0 %}{{ participants[0].total_score }}{% else %}0{% endif %}</span>
|
||||
<span class="meta-label">Highest Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if participants and participants|length >= 3 %}
|
||||
<!-- Podium Section -->
|
||||
<div class="podium-section">
|
||||
<div class="podium-title">🏆 Top 3 Winners</div>
|
||||
<div class="podium-container">
|
||||
{% for i in range(3) %}
|
||||
{% set participant = participants[i] %}
|
||||
<div class="podium-card rank-{{ participant.rank }}">
|
||||
<div class="rank-display">
|
||||
<div class="rank-number">{{ participant.rank }}</div>
|
||||
<div class="rank-suffix">
|
||||
{% if participant.rank == 1 %}st
|
||||
{% elif participant.rank == 2 %}nd
|
||||
{% elif participant.rank == 3 %}rd
|
||||
{% else %}th
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="medal">
|
||||
{% if participant.rank == 1 %}🥇
|
||||
{% elif participant.rank == 2 %}🥈
|
||||
{% elif participant.rank == 3 %}🥉
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">{{ participant.name }}</div>
|
||||
<div class="participant-id">ID: {{ participant.id }}</div>
|
||||
</div>
|
||||
|
||||
<div class="score-display">
|
||||
<div class="score-number">{{ participant.total_score }}</div>
|
||||
<div class="score-label">Points</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="right-column">
|
||||
<div class="table-header">
|
||||
<h3 class="table-title">📊 Complete Rankings</h3>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="results-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Participant</th>
|
||||
<th>ID</th>
|
||||
<th>Score</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for participant in participants %}
|
||||
<tr>
|
||||
<td class="rank-cell rank-{{ participant.rank if participant.rank <= 3 else 'other' }}">
|
||||
{{ participant.rank }}
|
||||
{% if participant.rank == 1 %}🥇
|
||||
{% elif participant.rank == 2 %}🥈
|
||||
{% elif participant.rank == 3 %}🥉
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="name-cell">{{ participant.name }}</td>
|
||||
<td><span class="id-cell">{{ participant.id }}</span></td>
|
||||
<td class="score-cell">{{ participant.total_score }}</td>
|
||||
<td class="status-cell">
|
||||
<span class="status-badge status-{{ 'completed' if participant.completed else 'incomplete' }}">
|
||||
✓
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="stats-footer">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ participants|length if participants else 0 }}</div>
|
||||
<div>Participants</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{% if participants and participants|length > 0 %}{{ participants[0].total_score }}{% else %}0{% endif %}</div>
|
||||
<div>Highest Score</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{% if participants %}{{ "%.0f"|format(participants|map(attribute='total_score')|sum / participants|length) }}{% else %}0{% endif %}</div>
|
||||
<div>Average Score</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{{ results.created_at[:10] if results and results.created_at else 'Today' }}</div>
|
||||
<div>Tournament Date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const participants = {{ participants|tojson }};
|
||||
const results = {{ results|tojson }};
|
||||
|
||||
// TV-optimized auto-refresh
|
||||
function setupTVRefresh() {
|
||||
setInterval(() => {
|
||||
if (document.visibilityState === 'visible') {
|
||||
// Show refresh indicator
|
||||
const indicator = document.getElementById('tvRefreshIndicator');
|
||||
indicator.textContent = '🔄 Updating...';
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
}
|
||||
}, 30000); // 30 seconds for TV display
|
||||
}
|
||||
|
||||
// Subtle winner highlight for TV
|
||||
function showTVWinnerHighlight() {
|
||||
if (participants && participants.length > 0) {
|
||||
setTimeout(() => {
|
||||
const firstPlace = document.querySelector('.podium-card.rank-1');
|
||||
if (firstPlace) {
|
||||
firstPlace.style.boxShadow = '0 4px 15px rgba(255, 215, 0, 0.4)';
|
||||
|
||||
setTimeout(() => {
|
||||
firstPlace.style.boxShadow = '';
|
||||
}, 3000);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard shortcuts for TV operation
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'r' || event.key === 'R') {
|
||||
event.preventDefault();
|
||||
window.location.reload();
|
||||
} else if (event.key === 'p' || event.key === 'P') {
|
||||
event.preventDefault();
|
||||
window.print();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize TV mode
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setupTVRefresh();
|
||||
showTVWinnerHighlight();
|
||||
|
||||
// Show TV mode indicator
|
||||
setTimeout(() => {
|
||||
const indicator = document.getElementById('tvRefreshIndicator');
|
||||
indicator.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
indicator.classList.remove('show');
|
||||
}, 4000);
|
||||
}, 1000);
|
||||
|
||||
// Log TV mode
|
||||
console.log(`🏆 ${participants ? participants.length : 0} participants displayed`);
|
||||
});
|
||||
|
||||
// Handle screen size changes
|
||||
window.addEventListener('resize', function() {
|
||||
// Force recalculation of layout
|
||||
document.body.style.display = 'none';
|
||||
document.body.offsetHeight; // Trigger reflow
|
||||
document.body.style.display = '';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user