289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}HKFC Men's C Team - MotM and DotD Vote{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Match Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<h2 class="card-title">
|
|
<i class="fas fa-trophy text-warning me-2"></i>
|
|
HKFC Men's C Team MotM and DotD Vote
|
|
</h2>
|
|
<h5 class="text-muted">{{ formatDate }}</h5>
|
|
|
|
<!-- Team Logos -->
|
|
<div class="d-flex justify-content-center align-items-center mt-3">
|
|
<div class="text-center me-4">
|
|
<img src="{{ hkfcLogo }}" alt="HKFC Logo" class="img-fluid" style="max-height: 120px;">
|
|
<div class="mt-2">
|
|
<strong>HKFC</strong>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mx-3">
|
|
<h3 class="text-primary">VS</h3>
|
|
</div>
|
|
<div class="text-center ms-4">
|
|
<img src="{{ oppoLogo }}" alt="Opponent Logo" class="img-fluid" style="max-height: 120px;">
|
|
<div class="mt-2">
|
|
<strong>{{ oppo }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voting Deadline Countdown -->
|
|
{% if votingDeadline %}
|
|
<div class="mt-4">
|
|
<div id="countdown-container" class="alert alert-info">
|
|
<h5 class="mb-2"><i class="fas fa-clock me-2"></i>Voting Closes In:</h5>
|
|
<div id="countdown-timer" class="display-6 fw-bold"></div>
|
|
</div>
|
|
<div id="voting-closed" class="alert alert-danger" style="display: none;">
|
|
<h5 class="mb-0"><i class="fas fa-lock me-2"></i>Voting has closed</h5>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Random Comment -->
|
|
{% if comment and comment != "No comments added yet" %}
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-comment-dots me-2"></i>Random Match Comment
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<blockquote class="blockquote text-center">
|
|
<p class="mb-0">
|
|
<i class="fas fa-quote-left text-muted me-2"></i>
|
|
<em>{{ comment }}</em>
|
|
<i class="fas fa-quote-right text-muted ms-2"></i>
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Voting Forms -->
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto mb-4">
|
|
<!-- Vote for MOTM and DotD -->
|
|
<div class="card h-100">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-vote-yea me-2"></i>Vote for MOTM and DotD
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="/motm/vote-thanks" id="motmForm">
|
|
{{ form.csrf_token }}
|
|
<input type="hidden" id="matchNumber" name="matchNumber" value="{{ matchNumber }}">
|
|
<input type="hidden" id="oppo" name="oppo" value="{{ oppo }}">
|
|
|
|
<div class="mb-3">
|
|
<label for="motmSelect" class="form-label">Select Player:</label>
|
|
<select class="form-select" id="motmSelect" name="motmVote" required>
|
|
<option value="">Choose a player...</option>
|
|
{% for player in data %}
|
|
<option value="{{ player.playernumber }}">{{ player.playerforenames }} {{ player.playersurname }}
|
|
{% if player.playernickname %}"{{ player.playernickname }}"{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="dotdSelect" class="form-label">Dick of the Day:</label>
|
|
<select class="form-select" id="dotdSelect" name="dotdVote" required>
|
|
<option value="">Choose a player...</option>
|
|
{% for player in data %}
|
|
<option value="{{ player.playernumber }}">{{ player.playerforenames }} {{ player.playersurname }}
|
|
{% if player.playernickname %}"{{ player.playernickname }}"{% endif %}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="motmComment" class="form-label">Optional Comment:</label>
|
|
<textarea class="form-control" id="motmComment" name="motmComment" rows="3" placeholder="Share your thoughts about the match..."></textarea>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fas fa-vote-yea me-2"></i>Submit Votes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Results (if available) -->
|
|
{% if currMotM or currDotD %}
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header bg-secondary text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>Current Results
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% if currMotM %}
|
|
<div class="col-md-6">
|
|
<div class="alert alert-success">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-trophy me-2"></i>Current Man of the Match
|
|
</h6>
|
|
<p class="mb-0">{{ currMotM }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if currDotD %}
|
|
<div class="col-md-6">
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-award me-2"></i>Current Dick of the Day
|
|
</h6>
|
|
<p class="mb-0">{{ currDotD }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Instructions -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6><i class="fas fa-info-circle me-2"></i>Voting Instructions</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-check text-success me-2"></i>Select one player for Man of the Match</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Select one player for Dick of the Day</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>You can vote for the same player for both categories</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>Votes are submitted independently</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
{% if votingDeadline %}
|
|
// Countdown timer functionality
|
|
const votingDeadline = new Date('{{ votingDeadline }}');
|
|
const countdownTimer = $('#countdown-timer');
|
|
const countdownContainer = $('#countdown-container');
|
|
const votingClosedDiv = $('#voting-closed');
|
|
const votingForm = $('#motmForm');
|
|
const submitButton = votingForm.find('button[type="submit"]');
|
|
|
|
function updateCountdown() {
|
|
const now = new Date();
|
|
const timeRemaining = votingDeadline - now;
|
|
|
|
if (timeRemaining <= 0) {
|
|
// Voting has closed
|
|
countdownContainer.hide();
|
|
votingClosedDiv.show();
|
|
votingForm.find('select, textarea, button').prop('disabled', true);
|
|
submitButton.html('<i class="fas fa-lock me-2"></i>Voting Closed');
|
|
return;
|
|
}
|
|
|
|
// Calculate time components
|
|
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
|
|
|
|
// Format and display countdown
|
|
let countdownText = '';
|
|
if (days > 0) {
|
|
countdownText = `${days}d ${hours}h ${minutes}m ${seconds}s`;
|
|
} else if (hours > 0) {
|
|
countdownText = `${hours}h ${minutes}m ${seconds}s`;
|
|
} else if (minutes > 0) {
|
|
countdownText = `${minutes}m ${seconds}s`;
|
|
} else {
|
|
countdownText = `${seconds}s`;
|
|
}
|
|
|
|
countdownTimer.text(countdownText);
|
|
|
|
// Update alert color based on time remaining
|
|
if (timeRemaining < 60000) { // Less than 1 minute
|
|
countdownContainer.removeClass('alert-info alert-warning').addClass('alert-danger');
|
|
} else if (timeRemaining < 300000) { // Less than 5 minutes
|
|
countdownContainer.removeClass('alert-info alert-danger').addClass('alert-warning');
|
|
}
|
|
}
|
|
|
|
// Update countdown every second
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
{% endif %}
|
|
|
|
// Form validation
|
|
$('#motmForm').on('submit', function(e) {
|
|
const motmSelect = $('#motmSelect');
|
|
const dotdSelect = $('#dotdSelect');
|
|
|
|
{% if votingDeadline %}
|
|
// Check if voting is still open
|
|
const now = new Date();
|
|
const votingDeadline = new Date('{{ votingDeadline }}');
|
|
if (now >= votingDeadline) {
|
|
e.preventDefault();
|
|
alert('Sorry, voting has closed.');
|
|
return false;
|
|
}
|
|
{% endif %}
|
|
|
|
if (!motmSelect.val()) {
|
|
e.preventDefault();
|
|
alert('Please select a player for Man of the Match.');
|
|
motmSelect.focus();
|
|
return false;
|
|
}
|
|
|
|
if (!dotdSelect.val()) {
|
|
e.preventDefault();
|
|
alert('Please select a player for Dick of the Day.');
|
|
dotdSelect.focus();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Add loading state to button
|
|
$('#motmForm').on('submit', function() {
|
|
const button = $(this).find('button[type="submit"]');
|
|
const originalText = button.html();
|
|
button.html('<span class="loading-spinner"></span> Submitting...').prop('disabled', true);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|