<head>
<meta http-equiv="content-type" value="text/html; charset=utf-8" />
<meta charset="utf-8" />
- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
- <style>
-* {
- -webkit-box-sizing: border-box;
- Box-Sizing: border-box;
- -webkit-backface-visibility: hidden;
- -webkit-transition: translate3d(0,0,0);
-}
-html, body {
- width: 1280px;
- height: 720px;
- margin: 0;
- padding: 0;
- background: transparent;
- overflow: hidden;
- -webkit-font-smoothing: antialiased !important;
-}
-body {
- font-family: 'Lato', sans-serif;
- color: white;
-}
-
-/* Score */
-.scorebug {
- position: fixed;
- font-size: 25px;
- left: 10px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
- z-index: 1;
-}
-.scorebug td {
- border: 3px solid #008;
-}
-.team1color, .team2color {
- width: 15px;
- margin: 5px;
-}
-.team1color {
- background: red;
-}
-.team2color {
- background: green;
-}
-.team1, .team2 {
- font-weight: bold;
- width: 100px;
- text-align: center;
- height: 35px;
- background: #00a;
-}
-.score {
- text-align: center;
- background: #00c;
- width: 110px;
- height: 35px;
-}
-
-/* Clock, to the right of score */
-.clockbug {
- position: fixed;
- font-size: 25px;
- left: 360px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
-}
-.clock {
- border: 3px solid #008;
- background: #00a;
- text-align: center;
- height: 35px;
- width: 90px;
-}
-.clockbug-hidden {
- -webkit-transform:translateX(-200%);
-}
-.clockbug-animate-in {
- -webkit-animation: from-left 1s ease;
-}
-.clockbug-animate-out {
- -webkit-animation: to-left 1s ease;
- -webkit-transform:translateX(-200%);
-}
-
-/* Comment, below score */
-.commentbug {
- position: fixed;
- font-size: 20px;
- left: 10px;
- top: 52px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
-}
-.comment {
- border: 3px solid #008;
- background: #00a;
- text-align: center;
- height: 30px;
- width: 340px;
-}
-
-.commentbug-hidden {
- -webkit-transform:translateY(-40px);
-}
-.commentbug-animate-in {
- -webkit-animation: from-top 0.5s ease;
-}
-.commentbug-animate-out {
- -webkit-animation: to-top 0.5s ease;
- -webkit-transform:translateY(-40px);
-}
-
-/* Lower third */
-.lowerthird-headline {
- position: fixed;
- font-size: 40px;
- left: 10px;
- top: 520px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 2px solid #ccc;
- height: 118px;
- font-weight: bold;
- width: 1050px;
- /*background: linear-gradient(to right, #ccc, #fff 15px); */
- background-image: url(lowerthird-bg.png);
- color: black;
- /* padding-top: 20px; */
-}
-.lowerthird-headline-hidden {
- width: 0px;
- border: 0px;
-}
-.lowerthird-headline-animate-in {
- -webkit-animation: scale-out 1.0s;
-}
-.lowerthird-headline-animate-out {
- -webkit-animation: scale-in 1.0s;
-}
-.lowerthird-headline-content {
- padding-left: 20px;
- position: absolute;
-}
-.lowerthird-headline-content-hidden {
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-headline-content-animate-in {
- -webkit-animation: wipe-out 2.0s ease;
-}
-.lowerthird-headline-content-animate-out {
- -webkit-animation: wipe-in 2.0s ease;
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading {
- position: fixed;
- font-size: 24px;
- left: 40px;
- top: 637px;
- height: 40px;
- width: 500px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 1px solid black;
- /*display: flex;
- align-items: center; */
- /*background: linear-gradient(to right, #44c, #33a 15px); */
- background-image: url(lowerthird-bg2.png);
-}
-.lowerthird-subheading-hidden {
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading-animate-in {
- -webkit-animation: scale-out-small 1.6s ease;
-}
-.lowerthird-subheading-animate-out {
- -webkit-animation: scale-in-small 1.6s ease;
- width: 0px;
- border-left: 0px;
-}
-.lowerthird-subheading-content {
- position: absolute;
- padding-left: 20px;
-}
-.lowerthird-subheading-content-hidden {
- width: 0px;
- border: 0px;
-}
-.lowerthird-subheading-content-animate-in {
- -webkit-animation: wipe-out 2.2s ease;
-}
-.lowerthird-subheading-content-animate-out {
- -webkit-animation: wipe-in 2.2s ease;
- clip: rect(0px,0px,200px,0px);
-}
-
-/* these are hidden when actually run in casparcg */
-#area {
- position: fixed;
- left: 0px;
- top: 0px;
- width: 1280px;
- height: 720px;
- background: cyan;
-}
-#manualcontrols {
- z-index: 3;
- position: fixed;
- top: 250px;
-}
-
-/* Animations */
-@-webkit-keyframes from-left {
- 0% {
- -webkit-transform:translateX(-200%);
- }
- 100% {
- -webkit-transform:translateX(0);
- }
-}
-@-webkit-keyframes to-left {
- 0% {
- -webkit-transform:translateX(0);
- }
- 100% {
- -webkit-transform:translateX(-200%);
- }
-}
-@-webkit-keyframes from-top {
- 0% {
- -webkit-transform:translateY(-40px);
- }
- 100% {
- -webkit-transform:translateY(0);
- }
-}
-@-webkit-keyframes to-top {
- 0% {
- -webkit-transform:translateY(0);
- }
- 100% {
- -webkit-transform:translateY(-40px);
- }
-}
-
-@-webkit-keyframes scale-out {
- 0% {
- width: 0px;
- }
- 100% {
- width: 1050px;
- }
-}
-@-webkit-keyframes scale-in {
- 0% {
- width: 1050px;
- border: 2px solid #ccc;
- }
- 100% {
- width: 0px;
- border: 2px solid #ccc;
- }
-}
-@-webkit-keyframes scale-out-small {
- 0% {
- width: 0px;
- border: 0px;
- }
- 19.99% {
- border: 0px;
- }
- 20% {
- width: 0px;
- border: 1px solid black;
- }
- 100% {
- width: 500px;
- }
-}
-@-webkit-keyframes scale-in-small {
- 0% {
- width: 500px;
- border: 1px solid black;
- }
- 80% {
- width: 0px;
- border: 1px solid black;
- }
- 80.01% {
- border: 0px;
- }
- 100% {
- width: 0px;
- border: 0px;
- }
-}
-@-webkit-keyframes wipe-out {
- 0% {
- clip: rect(0px,0px,200px,0px);
- }
- 20% {
- clip: rect(0px,0px,200px,0px);
- }
- 100% {
- clip: rect(0px,1050px,200px,0px);
- }
-}
-@-webkit-keyframes wipe-in {
- 0% {
- clip: rect(0px,1050px,200px,0px);
- }
- 20% { /* Not symmetrical! */
- clip: rect(0px,0px,200px,0px);
- }
- 100% {
- clip: rect(0px,0px,200px,0px);
- }
-}
- </style>
+<!-- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
+ <link href="fonts/lato.css" rel="stylesheet">
+ <link href="score.css" rel="stylesheet">
</head>
<body>
<div id="area"></div>
<div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
Commentators, Trøndisk 2016
</div></div>
- <div id="manualcontrols">
- <p>
- <a href="javascript:startclock()">start clock</a>
- <a href="javascript:stopclock()">stop clock</a>
- <a href="javascript:setclock(25*60)">reset clock</a>
- <a href="javascript:showclock()">show clock</a>
- <a href="javascript:hideclock()">hide clock</a>
- </p>
- <p>
- <a href="javascript:goalA()">goal team A</a>
- <a href="javascript:goalB()">goal team B</a>
- <a href="javascript:ungoalA()">ungoal team A</a>
- <a href="javascript:ungoalB()">ungoal team B</a>
- <a href="javascript:resetscore()">reset score</a>
- </p>
- <p>
- <a href="javascript:showcomment()">show comment</a>
- <a href="javascript:hidecomment()">hide comment</a>
- </p>
- <p>
- <a href="javascript:showlowerthird()">show lower third</a>
- <a href="javascript:hidelowerthird()">hide lower third</a>
- </p>
- </div>
-
+ <table id="carousel">
+ <thead>
+ <tr>
+ <th colspan="5">Current standings, TrønDisk 2017<br />Group A</th>
+ </tr>
+ </thead>
+ <tr class="subfooter">
+ <th class="rank"></th>
+ <th class="team"></th>
+ <th class="nplayed">P</th>
+ <th class="gd">GD</th>
+ <th class="pts">Pts</th>
+ </tr>
+ </table>
+ <div id="manualcontrols">
+ <p>
+ <a href="javascript:startclock()">start clock</a>
+ <a href="javascript:stopclock()">stop clock</a>
+ <a href="javascript:setclock(25*60)">reset clock</a>
+ <a href="javascript:showclock()">show clock</a>
+ <a href="javascript:hideclock()">hide clock</a>
+ </p>
+ <p>
+ <a href="javascript:goalA()">goal team A</a>
+ <a href="javascript:goalB()">goal team B</a>
+ <a href="javascript:ungoalA()">ungoal team A</a>
+ <a href="javascript:ungoalB()">ungoal team B</a>
+ <a href="javascript:resetscore()">reset score</a>
+ </p>
+ <p>
+ <a href="javascript:showcomment()">show comment</a>
+ <a href="javascript:hidecomment()">hide comment</a>
+ </p>
+ <p>
+ <a href="javascript:showlowerthird()">show lower third</a>
+ <a href="javascript:hidelowerthird()">hide lower third</a>
+ </p>
+ </div>
+
+<script src="carousel.js" type="text/javascript" />
<script>
var clock_running = false;
var clock_visible = false;
//play();
//startclock();
+
</script>
</body>
</html>
projects / ultimatescore / blobdiff