Narrowcasting code games
Updated
by
Niels Mosselmans
HTML template
<div class="header">
<table width="100%">
<tr>
<td width="100%">
<table width="100%">
<td class="timeheader" style="width: 30px;">
${currentTime}
</td>
<td style="text-align: center;" class="title">
${title}
</td>
<td style="width: 100px;">
</td>
</table>
</td>
</tr>
</table>
<svg style="position:absolute; bottom:-1;" viewBox="0 0 1920 88">
<g transform="translate(0.000000, -568.000000)" fill="#FFFFFF">
<path d="M1920,568 L1920,656 C640.2632,656 0,656 0,656 C640,640 1280,627 1920,617 Z"></path>
</g>
</svg>
<img src="" class="logo" />
</div>
<div class="row">
<div class="col-md-12">
<table width="100%">
<tr>
<td width="100%" class="contentwrapper">
<table width="100%" class="schedule">
<thead>
<tr>
<th>Date</th>
<th>Hour</th>
<th>Team</th>
<th>Game</th>
<th>Pitch</th>
<th>Dressing room home team</th>
<th>Dressing room away team</th>
</tr>
</thead>
<tbody>
<#list events as event>
<tr>
<td>${event.start?string["dd/MM"]} </td>
<td>${event.start?string["HH:mm"]}</td>
<td>${event.teamNames}</td>
<td><#if event.homeClub??>${event.homeClub}</#if> - <#if event.awayClub??>${event.awayClub}</#if></td>
<td>${event.pitch}</td>
<td>${event.dressingRoom}</td>
<td>${event.dressingRoomVisitors}</td>
</tr>
<#else>
<tr>
<td colspan="4">Unfortunately, no games are planned!</td>
</tr>
</#list>
</tbody>
</table>
</td>
</tr>
</table>
<div class="row">
<div class="col-md-12">
<p style="text-align:center">
<br>
Please do not leave any valuables in the dressing room.
</p>
</div>
</div>
</div>
Template CSS
.body {
margin: 0;
}
.contentwrapper {
padding: 15px;
}
.header {
position: relative;
margin-top: 2px;
height: 30%;
max-height: 30%;
display: inline-block;
width: 100%;
background: url("") 0 0 no-repeat;
background-size: cover;
color:#fff;
}
.timeheader, .title {
font-size: 40px;
padding-left: 25px;
height: 150px;
line-height: 50px;
color:#d3261a;
}
.logo {
position: absolute;
top: 10px;
right: 80px;
height: 75%;
}
#nprogress .bar{
background-color: #d3261a;
}
