{% extends "base.html" %}

{% block title %} papertracker {% endblock %}

{% block content %}
<!-- instruction step -->
<div id="instructions">
  welcome to
  <h1><img src="static/theme/logo.svg" width="300" /></h1>
  <p>place the tiles on the board, then:</p>
  <p>01. take a photo of your board</p>
  <p>02. play or step-through the simulation</p>
  <br />
  <button type="button" id="fullscreen">[ ] go fullscreen</button>
  <button type="button" id="letsgo" class="hide">&gt;&gt; cool, let's go!</button>
</div>
<!-- snap/re-snap step -->
<div id="snap" class="hide">
  <video id="video" autoplay="true" class="frame"></video>
  <div class="ui">
    <button type="button" id="snapfirst">snap a pic</button>
    <button type="button" id="snapagain" class="hide">oops, try snap another pic</button>
  </div>
</div>
<!-- board step -->
<div id="board" class="frame hide">
  <div class="ui">
    <div class="controls">
      <button type="button" id="run"><!-- labels defined in Init.js using bt_label... --></button>
      <button type="button" id="step">&gt;| step</button>
      <button type="button" id="resnap">X resnap</button>
    </div>
  </div>
</div>

<script src="./static/Init.js" type="module"></script>
{% endblock %}