cl-deck-builder2/templates/kde-team.html
2024-03-05 22:11:33 -05:00

303 lines
12 KiB
HTML

{% extends "layouts/minimal.html" %}
{% block title %}{_ "KDE Team Deck Listing" _}{% endblock %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA=="crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js" integrity="sha512-vLs5rAqfvmv/IpN7JustROkGAvjK/L+vgVDFe7KpdtLztqF8mZDfleK2MZj/xuOrWjma0pW+lPCMcBbPKJVC7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script>
$(document).ready(function() {
toggle_darkness();
// textFit(document.getElementsByClassName('textfit'));
});
function downloadImage() {
html2canvas(document.getElementById('main')).then(function(canvas) {
var a = document.createElement('a');
a.style.display = 'none';
a.href = canvas.toDataURL();
a.download = 'kde-team-listing.png';
a.click();
a.remove();
});
}
</script>
<style>
.table {
border: 2px solid black !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
padding: 0.1rem 0.25rem; !important;
}
.table th, .table td {
border: 1px solid black !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
padding: 0.1rem 0.25rem; !important;
}
.is-size-10 {
font-size: 6pt !important;
white-space: nowrap !important;
}
.has-min-column-width {
width: 30px !important;
}
.columns.no-bottom-padding .column {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
.columns.no-top-padding .column {
margin-top: 0 !important;
padding-top: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
}
</style>
<div class="navbar">
<div class="navbar-menu">
<a class="navbar-item is-expanded button is-success"
onclick="downloadImage();"
style="border-radius:0!important;">Click!</a>
</div>
</div>
<div class="section" id="main">
<!-- Top Row -->
<div class="columns is-multiline no-bottom-padding">
<!-- Top Left -->
<div class="column is-6">
<table class="table is-bordered is-fullwidth">
<tr style="border-bottom: 2px solid black !important;">
<td class="has-text-centered has-background-grey-light" colspan="12">
Please write all card names <b>completely</b> and <b>legibly</b>.
<br>
Please include the quantity for each card.
</td>
</tr>
<tr>
<td class="has-background-grey-lighter" style="width: 30% !important">First & Middle Name(s):</td>
<td class="has-background-info-light" colspan="10"></td>
</tr>
<tr>
<td class="has-background-grey-lighter">Last Name(s):</td>
<td class="has-background-info-light" colspan="10"></td>
</tr>
<tr>
<td class="has-background-grey-lighter">CARD GAME ID:</td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
<td class="has-background-info-light"></td>
</tr>
</table>
</div>
<!-- Top Mid -->
<div class="column is-5">
<table class="table is-bordered is-fullwidth">
<tr style="border-bottom: 2px solid black !important;">
<td class="has-text-centered has-background-grey-lighter" colspan="4">Judge Use Only:</td>
<th class="has-text-centered">M</th>
<td></td>
<td></td>
<td></td>
<th class="has-text-centered">S</th>
<td></td>
<td></td>
</tr>
<tr>
<td class="has-background-grey-lighter">Event Date:</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">M</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">M</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">/</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">D</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">D</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">/</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">Y</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">Y</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">Y</td>
<td class="has-text-weight-bold has-text-centered has-background-info-light" style="opacity:25%">Y</td>
</tr>
<tr>
<td class="has-background-grey-lighter">Country of Residency:</td>
<td class="has-background-info-light" colspan="10"></td>
</tr>
<tr>
<td class="has-background-grey-lighter" style="margin:0;padding-bottom:0;padding-top:0">Event Name:</td>
<td class="has-background-info-light" colspan="10"></td>
</tr>
</table>
</div>
<!-- Top Right -->
<div class="column is-1">
<table class="table is-bordered is-fullwidth">
<tr>
<td class="has-text-weight-bold has-text-justified">E</td>
<td class="has-min-column-width"></td>
<td class="has-min-column-width"></td>
</tr>
<tr style="border-bottom:0!important">
<td colspan="3" class="is-size-10 has-text-centered" style="border-bottom:0!important">
Last Name Initial
</td>
</tr>
<tr style="border-top:0!important">
<td colspan="3" class="has-background-info-light" style="border-top:0!important">
&nbsp;<br>
</td>
</tr>
<tr>
<td colspan="3" class="has-text-centered">
<p class="is-size-10">Main Deck Total</p>
<p>{{ main-deck | length }}</p>
</td>
</tr>
</table>
</div>
</div>
<div class="columns no-top-padding">
<div class="column is-fullwidth">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-background-grey-lighter" width="150px">Team Name:</th>
<td class="has-background-info-light"></td>
</tr>
</table>
</div>
</div>
<!-- Middle Row -->
<div class="columns is-gapless">
<div class="column is-one-third">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-text-centered has-background-grey-light" colspan="2">MONSTER CARDS</th>
</tr>
{% for (count . card) in monster-cards-rle %}
<tr class="{{ card.frame-type | default:"has-background-info-light" }}">
<th class="has-text-centered has-min-column-width">{{ count }}</th>
<td class="textfit">{{ card.name | default:"&nbsp;"| safe }}</td>
</tr>
{% endfor %}
<tr>
<th class="has-text-centered">{{ monster-cards | length }}</th>
<th>&laquo; TOTAL MONSTER CARDS</th>
</tr>
</table>
</div>
<div class="column is-one-third">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-text-centered has-background-grey-light" colspan="2">SPELL CARDS</th>
</tr>
{% for (count . card) in spell-cards-rle %}
<tr class="{{ card.frame-type | default:"has-background-info-light" }}">
<th class="has-text-centered has-min-column-width">{{ count }}</th>
<td class="textfit">{{ card.name | default:"&nbsp;"| safe }}</td>
</tr>
{% endfor %}
<tr>
<th class="has-text-centered">{{ spell-cards | length }}</th>
<th>&laquo; TOTAL SPELL CARDS</th>
</tr>
</table>
</div>
<div class="column is-one-third">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-text-centered has-background-grey-light" colspan="2">TRAP CARDS</th>
</tr>
{% for (count . card) in trap-cards-rle %}
<tr class="{{ card.frame-type | default:"has-background-info-light" }}">
<th class="has-text-centered has-min-column-width">{{ count }}</th>
<td class="textfit">{{ card.name | default:"&nbsp;"| safe }}</td>
</tr>
{% endfor %}
<tr>
<th class="has-text-centered has-min-column-width">{{ trap-cards | length }}</th>
<th>&laquo; TOTAL TRAP CARDS</th>
</tr>
</table>
</div>
</div>
<div class="columns is-gapless">
<div class="column is-one-third side">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-text-centered has-background-grey-light" colspan="2">SIDE DECK</th>
</tr>
{% for (count . card) in side-deck-rle %}
<tr class="{{ card.frame-type | default:"has-background-info-light" }}">
<th class="has-text-centered has-min-column-width">{{ count }}</th>
<td class="textfit">{{ card.name | default:"&nbsp;"| safe }}</td>
</tr>
{% endfor %}
<tr>
<th class="has-text-centered">{{ side-deck | length }}</th>
<th>&laquo; TOTAL SIDE DECK</th>
</tr>
</table>
</div>
<div class="column is-one-third extra">
<table class="table is-bordered is-fullwidth">
<tr>
<th class="has-text-centered has-background-grey-light" colspan="2">EXTRA DECK</th>
</tr>
{% for (count . card) in extra-deck-rle %}
<tr class="{{ card.frame-type | default:"has-background-info-light" }}">
<th class="has-text-centered has-min-column-width">{{ count }}</th>
<td class="textfit">{{ card.name | default:"&nbsp;"| safe }}</td>
</tr>
{% endfor %}
<tr>
<th class="has-text-centered">{{ extra-deck | length }}</th>
<th>&laquo; TOTAL EXTRA DECK</th>
</tr>
</table>
</div>
<div class="column is-one-third" style="padding-left:1rem!important">
<div class="table-container">
<table class="table is-bordered is-fullwidth has-background-grey-lighter">
<tr><th class="has-text-centered" colspan="2">For Judge Use Only</th></tr>
<tr><td colspan="2 ">Deck List Checked?</td></tr>
<tr>
<td>Judge Initials</td>
<td>Infraction:</td>
</tr>
<tr><td colspan="2" style="height:100px !important">Description:</td></tr>
<tr><td colspan="2">Deck Check Round:</td></tr>
<tr>
<td>Judge Initials</td>
<td>Infraction:</td>
</tr>
<tr><td colspan="2" style="height:100px !important">Description:</td></tr>
<tr><td colspan="2">Deck Check Round:</td></tr>
<tr>
<td>Judge Initials</td>
<td>Infraction:</td>
</tr>
<tr><td colspan="2" style="height:100px !important">Description:</td></tr>
</table>
</div>
</div>
</div>
</div>
{% endblock %}