app.html

---
layout: default
---

<div id="busy">
  <div id="spinner"></div>
</div>

<div id="content">

  <div class="splat-background">
    <b class="decoration splat-orange-light"></b>
    <b class="decoration splat-yellow"></b>
    <b class="decoration splat-pink"></b>
  </div>

  <div class="app-container">

    <div id="canvas-main" class="canvas-container">
      <div class="sizer">
        <div id="Pcanvas">
        </div>
      </div>
    </div>

    <div class="footer">

      <div class="slider js_slider">
        <div class="slider-background-up"></div>
        <div class="slider-background-down"></div>
        <div class="frame js_frame">
          <ul id="icons" class="slides js_slides">
          </ul>
        </div>
        <div class="js_prev prev">
          <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <circle fill="#1BBEBF" fill-rule="nonzero" cx="40" cy="40" r="30"></circle>
                <polyline stroke="#FFFFFF" stroke-width="7.3" stroke-linecap="square" transform="translate(37.000000, 40.000000) scale(-1, 1) translate(-37.000000, -40.000000) " points="31 29 43 40 31 51"></polyline>
            </g>
          </svg>
        </div>
        <div class="js_next next">
          <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <circle fill="#1BBEBF" fill-rule="nonzero" cx="40" cy="40" r="30"></circle>
                <polyline stroke="#FFFFFF" stroke-width="7.3" stroke-linecap="square" points="36 29 48 40 36 51"></polyline>
            </g>
          </svg>
        </div>
      </div>

      <div class="menu columns is-gapless is-mobile">
        <button id="undo-btn" class="button is-danger column">{% t app.undo %}</button>
        <button id="print-btn" class="button is-success column">{% t app.print %}</button>
      </div>

    </div>

  </div>

</div>

<div id="indicator">
  <img class="indicatorImg" id="finger" src="{{ "/assets/img/web/finger.png" | prepend: site.baseurl_root }}">
  <img class="indicatorImg" id="mouse" src="{{ "/assets/img/web/mouse.png" | prepend: site.baseurl_root }}">
</div>

<div id="fader" class="fade-bk hidden">

  <div id="print-modal" class="modal hidden">
    <div class="modal-cancel-button back-do">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </div>

    <div class="modal-contents">

      <div class="content-group-a">
        <div class="print-blurb">
          <h2>{% t app.modaltitle %}</h2>
          <p>{% t app.modalblurb %}</p>
        </div>
      </div>

      <div class="content-group-b">
        <div class="preview">
          <img src="" id="preview-output">
          <div id="img-indicator" class="hidden"><span>{% t app.saveimage %}</span></div>
        </div>
      </div>

    </div>

    <div class="modal-menu">
      <div class="name-input-wrap">
        <label for="text_field">{% t app.namefield %}</label>
        <input type="text" placeholder="{% t app.nameplaceholder %}" id="text-field">
      </div>

      <div class="options-wrap-desktop">
        <button class="button is-warning print-do {{ site.lang }}">{% t app.print %}</button>
        <button class="button is-info save-do {{ site.lang }}">{% t app.save %}</button>
      </div>

      <div class="options-wrap-mobile columns is-gapless is-mobile">
        <button class="button is-danger column back-do">{% t app.back %}</button>
        <button class="button is-success column print-do">{% t app.print %}</button>
        <button class="button is-info column save-do">{% t app.save %}</button>
      </div>

    </div>
  </div>

  <div id="advice-modal" class="modal hidden">
    <div class="modal-contents">
      <div class="print-blurb">
        <h2>{% t printadvice.maintitle %}</h2>
        <p>{% t printadvice.adviceblurb %}</p>
        <ul class="bulleted">
          <li>{% t printadvice.li1 %}</li>
          <li>{% t printadvice.li2 %}</li>
          <li>{% t printadvice.li3 %}</li>
          <li>{% t printadvice.li4 %}</li>
        </ul>
      </div>
    </div>
    <button id="advice-back-do" class="button is-info">{% t app.back %}</button>
  </div>

</div>

<script src="{{ "/assets/js/bundle.js" | prepend: site.baseurl_root }}"></script>