cl-deck-builder2/templates/kde-team.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 %}