{{ 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 3</p>

        <p>Pity system with threshold number of 3 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>3</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 880.</p>

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

<p>You have won 4 times up to now.<------- <i>Pity system works! You win one more time!</i></p>

<p>Your accumulative pity number is 0 <------- <i>Your pity number is set to 0 again.</i></p>

<p><button class="btn btn-primary btn-large" disabled>Buy 1</button> </p>
<p><button class="btn btn-primary btn-large" disabled>Buy 10</button></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" >skip</button> <-------<i>Let's jump the practice!</i></p>

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

    </div>
</div>




{{ endblock }}