220 lines
7.3 KiB
HTML
220 lines
7.3 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Random Comment -->
|
|
<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">
|
|
{% for item in comment %}
|
|
<blockquote class="blockquote text-center">
|
|
<p class="mb-0">
|
|
<i class="fas fa-quote-left text-muted me-2"></i>
|
|
<em>{{ item.comment }}</em>
|
|
<i class="fas fa-quote-right text-muted ms-2"></i>
|
|
</p>
|
|
</blockquote>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voting Forms -->
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- Man of the Match -->
|
|
<div class="card h-100">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-trophy me-2"></i>Man of the Match
|
|
</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="motmSelect" 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="d-grid">
|
|
<button type="submit" class="btn btn-success btn-lg">
|
|
<i class="fas fa-vote-yea me-2"></i>Submit MOTM Vote
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- Dick of the Day -->
|
|
<div class="card h-100">
|
|
<div class="card-header bg-warning text-dark">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-award me-2"></i>Dick of the Day
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="post" action="/motm/dotd-thanks" id="dotdForm">
|
|
{{ 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="dotdSelect" class="form-label">Select Player:</label>
|
|
<select class="form-select" id="dotdSelect" name="dotdSelect" 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="d-grid">
|
|
<button type="submit" class="btn btn-warning btn-lg">
|
|
<i class="fas fa-vote-yea me-2"></i>Submit DotD Vote
|
|
</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() {
|
|
// Form validation
|
|
$('#motmForm, #dotdForm').on('submit', function(e) {
|
|
const selectElement = $(this).find('select');
|
|
if (!selectElement.val()) {
|
|
e.preventDefault();
|
|
alert('Please select a player before submitting your vote.');
|
|
selectElement.focus();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// Add loading state to buttons
|
|
$('#motmForm, #dotdForm').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 %}
|