{{ block content }}

<style>
h3 {
  text-align: center;
}
</style>

<div class="card bg-light m-3">
    <div class="card-body">

    <h3>
        Let's do a Practice
    </h3>

    <link rel="stylesheet" type="text/css"
          href="{{ static 'global/matrix.css' }}"/>

<p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;—— —— —— —— ——<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;/&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;&thinsp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;&thinsp;/&emsp;&emsp;&emsp;&emsp;<strong>Lottery</strong>&emsp;&emsp;&emsp;&emsp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;/&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;&thinsp;/&emsp;&emsp;&emsp;20%&emsp;Chance&emsp;&emsp;/  <br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;/&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;&thinsp;/&emsp;&emsp;Win 50 Tokens!&emsp;&emsp;&thinsp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;/&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;/<br>
   &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;—— —— —— —— ——</p>

        <p> In average for this lottery, you will win 1 time when you buy 5 lotteries</p>

        <p> The threshold number of pity system is 8</p>

        <p>Pity system with threshold number of 8 works like this:<br>
    &emsp;&emsp;If you buy a lottery and <strong>LOSE</strong>, the <strong>pity number</strong> will increase by <mark>1</mark>; <br>
    &emsp;&emsp;If your <strong>pity number</strong> is <mark>8</mark>, you must win next lottery and your pity number will be set back to 0;<br>
    &emsp;&emsp;If you buy a lottery and <strong>WIN </strong>, <strong>your pity number</strong> will be set back to 0 anyway.<br>
        </p>
    </div>
</div>

<div class="card bg-light m-3">
    <div class="card-body">

<p>Your remaining tokens are 990. <------- <i>You purchase 1 lottery, which cost your 10 tokens, so you only have 990.</i></p>

<p>You have bought 1 lotteries up to now.</p>

<p>You have won 0 times up to now.<------- <i>Unfortunately, you lose.</i></p>

<p>Your accumulative pity number is 1. <------- <i>Since you losing, your pity number increase by 1.</i></p>

<p><button class="btn btn-primary btn-large" disabled>Buy 1</button> </p>
<p><button class="btn btn-primary btn-large">Buy 10</button> <------- <i>This time let's click 'Buy 10' and see what will happen!</i></p>

<p></p>
<p>If you feel enough and want to stop buying lottery and skip,please click <button name="wish" value="0" class="btn btn-primary btn-large" disabled>skip</button></p>

        <p><i><mark>The practice will cost you nothing.</mark></i></p>

    </div>
</div>




{{ endblock }}