{{ block title }}
<h1><b>SLOTS</b></h1>
{{ endblock }}

{{ block content }}

 <img src="{% static player.slot_shown %}" alt="slot output">

<p>{{player.message}}</p>

<p>You have: <b>{{player.tokens}} tokens</b>
    <br>
</p>

<p>Plums = 10 tokens<br>
    Watermelons = 20 tokens<br>
    Lucky 7s = 50 tokens<br>
</p>

<style>

    body {
  background-color: darkred;
}

    small {
        font-size: x-small;
    }

h1 {
  color: antiquewhite;
  text-align: center;
    font-size: xxx-large;
}

p {
  color: antiquewhite;
  font-family: Verdana, serif;
  font-size: x-large;
  text-align: center;
}

img {
  width: 350px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 8px solid black;
}

ul {
  font-family: Verdana, serif;
  font-size: medium;
}

</style>


<div style="text-align:center" class="button">
<button name="slot_spun" value="True">SPIN</button>
</div>

<br>
<p class="small">Exit the tab whenever you wish to bank your current tokens for the raffle draw.<br> They will be automatically saved to the database.</p>

{{ endblock }}