{% 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"> <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:" "| safe }}</td> </tr> {% endfor %} <tr> <th class="has-text-centered">{{ monster-cards | length }}</th> <th>« 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:" "| safe }}</td> </tr> {% endfor %} <tr> <th class="has-text-centered">{{ spell-cards | length }}</th> <th>« 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:" "| safe }}</td> </tr> {% endfor %} <tr> <th class="has-text-centered has-min-column-width">{{ trap-cards | length }}</th> <th>« 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:" "| safe }}</td> </tr> {% endfor %} <tr> <th class="has-text-centered">{{ side-deck | length }}</th> <th>« 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:" "| safe }}</td> </tr> {% endfor %} <tr> <th class="has-text-centered">{{ extra-deck | length }}</th> <th>« 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 %}