125 lines
8.8 KiB
HTML
125 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="scoreboardDetails.css">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
|
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
|
crossorigin="anonymous">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
|
|
integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
|
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="noMatch" data-bind="ifnot: gameOn">
|
|
No matches are scheduled at the moment; please check back later!
|
|
</div>
|
|
<div data-bind="if: gameOn">
|
|
<div class="scoreboard">
|
|
<div class="border">
|
|
<div class="team">
|
|
<div class="team-info">
|
|
<div class="team-logo">
|
|
<svg viewBox="0 0 35 40" version="1.1" width="32" length="auto">
|
|
<g id="shield" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<path
|
|
d="M24.9440298,0.636942674 C26.6113155,0.922262685 29.0926587,1.55920537 32.3880597,2.5477707 C34.1293532,7.30360933 35,12.6539278 35,18.5987261 C35,23.4394904 32.6492537,29.1719745 28.3395523,33.2484077 C25.6413422,35.8005735 22.0281581,38.0511042 17.5,40 C12.9718419,38.0511042 9.35865783,35.8005735 6.66044775,33.2484077 C2.35074626,29.1719745 0,23.4394904 0,18.5987261 C0,12.6539278 0.870646769,7.30360933 2.6119403,2.5477707 C5.90734124,1.55920537 8.38868452,0.922262685 10.0559702,0.636942674 C11.7232557,0.351622651 14.204599,0.139308434 17.5,0 C20.795401,0.139308434 23.2767442,0.351622651 24.9440298,0.636942674 Z"
|
|
id="Background" fill="#000000" />
|
|
<path
|
|
d="m 30.033126,6.9745223 c 1.293532,3.6857747 1.940298,7.8322717 1.940298,12.4394907 0,3.751592 -1.746269,8.194267 -4.947761,11.353503 C 25.021278,32.745444 22.337199,34.489606 18.973424,36 V 5 c 2.448012,0.107964 4.291296,0.2725076 5.529851,0.4936306 1.238555,0.221123 3.081838,0.7147536 5.529851,1.4808917 z"
|
|
id="Darkening" fill="#000000" opacity="0.24" style="fill:#000000" />
|
|
<path
|
|
d="M 4.752799,6.9745223 C 3.459266,10.660297 2.8125,14.806794 2.8125,19.414013 c 0,3.751592 1.746269,8.194267 4.947761,11.353503 C 9.764646,32.745444 12.448725,34.489606 15.8125,36 V 5 C 13.364488,5.107964 11.521204,5.2725076 10.282649,5.4936306 9.044094,5.7147536 7.200811,6.2083842 4.752799,6.9745223 Z"
|
|
id="Darkening-3" fill="#000000" opacity="0.8"
|
|
data-bind="style: { fill: homeTeamColor}" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="team-name" data-bind="text: homeTeamName">Home</div>
|
|
</div>
|
|
<div class="team-details">
|
|
<div class="team-score" data-bind="text: homeTeamPoints">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="timer-container">
|
|
<!-- ko if: gameState() !== 'WaitingForStart' && gameState() !== 'Finished' && gameState() !== 'HalfTime'-->
|
|
<div class="timer" id="match-timer" data-bind="text: calculateRemainingTime"></div>
|
|
<div class="half-indicator" data-bind="text: halfIndicator"></div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'WaitingForStart' -->
|
|
<div class="kickoff-indicator" data-bind="text: halfIndicator"></div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'Finished' -->
|
|
<div class="finalscore-indicator">Full Time</div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'HalfTime' -->
|
|
<div class="kickoff-indicator">Half Time</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<div class="team">
|
|
<div class="team-info">
|
|
<div class="team-logo">
|
|
<svg viewBox="0 0 35 40" version="1.1" width="32" length="auto">
|
|
<g id="shield" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<path
|
|
d="M24.9440298,0.636942674 C26.6113155,0.922262685 29.0926587,1.55920537 32.3880597,2.5477707 C34.1293532,7.30360933 35,12.6539278 35,18.5987261 C35,23.4394904 32.6492537,29.1719745 28.3395523,33.2484077 C25.6413422,35.8005735 22.0281581,38.0511042 17.5,40 C12.9718419,38.0511042 9.35865783,35.8005735 6.66044775,33.2484077 C2.35074626,29.1719745 0,23.4394904 0,18.5987261 C0,12.6539278 0.870646769,7.30360933 2.6119403,2.5477707 C5.90734124,1.55920537 8.38868452,0.922262685 10.0559702,0.636942674 C11.7232557,0.351622651 14.204599,0.139308434 17.5,0 C20.795401,0.139308434 23.2767442,0.351622651 24.9440298,0.636942674 Z"
|
|
id="Background" fill="#000000" />
|
|
<path
|
|
d="m 30.033126,6.9745223 c 1.293532,3.6857747 1.940298,7.8322717 1.940298,12.4394907 0,3.751592 -1.746269,8.194267 -4.947761,11.353503 C 25.021278,32.745444 22.337199,34.489606 18.973424,36 V 5 c 2.448012,0.107964 4.291296,0.2725076 5.529851,0.4936306 1.238555,0.221123 3.081838,0.7147536 5.529851,1.4808917 z"
|
|
id="Darkening" fill="#000000" opacity="0.24" style="fill:#000000" />
|
|
<path
|
|
d="M 4.752799,6.9745223 C 3.459266,10.660297 2.8125,14.806794 2.8125,19.414013 c 0,3.751592 1.746269,8.194267 4.947761,11.353503 C 9.764646,32.745444 12.448725,34.489606 15.8125,36 V 5 C 13.364488,5.107964 11.521204,5.2725076 10.282649,5.4936306 9.044094,5.7147536 7.200811,6.2083842 4.752799,6.9745223 Z"
|
|
id="Darkening-3" fill="#000000" opacity="0.8"
|
|
data-bind="style: { fill: awayTeamColor}" />
|
|
</g>
|
|
</svg>
|
|
<div class="team-name" data-bind="text: awayTeamName">Away</div>
|
|
</div>
|
|
</div>
|
|
<div class="team-details">
|
|
<div class="team-score" data-bind="text: awayTeamPoints">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ko if: eventList().length === 0 && gameState() !== 'WaitingForStart' -->
|
|
<div class="noMatch">No events available yet.</div>
|
|
<!-- /ko-->
|
|
<!-- ko if: eventList().length > 0 -->
|
|
<div class="timeline" data-bind="foreach: eventList">
|
|
<!-- ko if: category === 'Match' -->
|
|
<div class="timeline-item match">
|
|
<div class="timeline-content-match">
|
|
<p data-bind="text: $parent.getEventMessage($data)"></p>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko ifnot: category === 'Match' -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-content"
|
|
data-bind="css: { away: category ==='Away' }, style: { 'border-color': category === 'Home' ? $parent.homeTeamColor() : $parent.awayTeamColor() }">
|
|
<p data-bind="text: $parent.getEventMessage($data)"></p>
|
|
</div>
|
|
<!-- ko if: eventType !== 'YellowCard' && eventType !== 'RedCard' -->
|
|
<span class="score-panel" data-bind="text: $parent.getScoreAtEvent($data.id)"></span>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: eventType === 'YellowCard' || eventType === 'RedCard' -->
|
|
<i class="fa fa-circle icon"
|
|
data-bind="css:{ yc: eventType ==='YellowCard', rc: eventType ==='RedCard' }"></i>
|
|
<!-- /ko -->
|
|
</div>
|
|
<!-- /ko-->
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
|
|
<script src="scoreboardDetails.js" type="text/javascript"></script>
|
|
</body> |