76 lines
3.9 KiB
HTML
76 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<link rel="stylesheet" href="scoreboard.css">
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- <div class="scoreboard" data-bind="if: gameOn">
|
|
<div class="border">
|
|
<div class="team" data-bind="style:{'background-color': homeTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-logo">
|
|
<img data-bind="attr:{src: homeTeamLogo}" src="https://png.pngtree.com/png-clipart/20210129/ourmid/pngtree-blue-square-button-png-image_2844356.jpg" alt="Home Team Logo">
|
|
</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">
|
|
<div class="timer" id="match-timer" data-bind="text: timerValue"></div>
|
|
<div class="half-indicator" data-bind="text: halfIndicator"></div>
|
|
</div>
|
|
<div class="team" data-bind="style:{'background-color': awayTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-logo">
|
|
<img data-bind="attr:{src: homeTeamLogo}" src="https://png.pngtree.com/png-clipart/20210129/ourmid/pngtree-blue-square-button-png-image_2844356.jpg" alt="AWAY TEAM">
|
|
<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> -->
|
|
<div data-bind="if: gameOn">
|
|
<div class="scoreboard">
|
|
<div class="border">
|
|
<div class="team" data-bind="style:{'background-color': homeTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-name summary-team-label" 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" data-bind="style:{'background-color': awayTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-name summary-team-label" data-bind="text: awayTeamName">Away</div>
|
|
</div>
|
|
<div class="team-details">
|
|
<div class="team-score" data-bind="text: awayTeamPoints">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="scoreboardViewModel.js" type="text/javascript"></script>
|
|
</body> |