rDrama/files/templates/lottery.html

156 lines
3.7 KiB
HTML

{% extends "default.html" %}
{% block pagetype %}lottery{% endblock %}
{% block pagetitle %}Lottershe{% endblock %}
{% block content %}
<div class="lottery-page--wrapper">
<div class="lottery-page--image">
<img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/{{SITE_NAME}}/lottery.webp?x=8">
<img
id="lotteryTicketPulled"
src="{{SITE_FULL_IMAGES}}/i/lottery_active.webp?x=8"
style="display: none"
>
</div>
<div class="lottery-page--stats">
<div class="lottery-page--stat">
<div class="lottery-page--stat-keys">
<div>Prize</div>
<div>Time Left</div>
<div>Tickets Sold</div>
<div>Participants</div>
</div>
<div class="lottery-page--stat-values">
<div>
<img
id="prize-image"
alt="coins"
class="mr-1 ml-1"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
height="13"
src="{{SITE_FULL_IMAGES}}/i/coins.webp?x=8"
title="Coins"
style="display: none; position: relative; top: -2px"
>
<span id="prize">-</span>
</div>
<div id="timeLeft">-</div>
<div id="ticketsSoldThisSession">-</div>
{% if v.admin_level >= PERMS['LOTTERY_VIEW_PARTICIPANTS'] %}
<a href="/admin/lottery/participants">
<div id="participantsThisSession">-</div>
</a>
{% else %}
<div id="participantsThisSession">-</div>
{% endif %}
</div>
</div>
<div class="lottery-page--stat">
<div class="lottery-page--stat-keys">
<div>Your Held Tickets</div>
<div>Lifetime Held Tickets</div>
<div>Lifetime Winnings</div>
</div>
<div class="lottery-page--stat-values">
<div id="ticketsHeldCurrent">-</div>
<div id="ticketsHeldTotal">-</div>
<div id="winnings">-</div>
</div>
</div>
<div class="lottery-page--stat">
<div class="lottery-page--stat-keys">
<div>Purchase Quantity</div>
</div>
<div class="lottery-page--stat-values">
<div>
<input
id="ticketPurchaseQuantity"
class="form-control"
autocomplete="off"
value="1"
min="1"
step="1"
name="ticketPurchaseQuantity"
type="number"
style="flex: 1; max-width: 100px; text-align: center"
>
</div>
</div>
</div>
<button
type="button"
class="btn btn-success lottery-page--action"
id="purchaseTicket"
data-nonce="{{g.nonce}}"
data-onclick="purchaseLotteryTicket()"
>
Purchase <span id="totalQuantityOfTickets">1</span> for
<img
alt="coins"
class="mr-1 ml-1"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
height="13"
src="{{SITE_FULL_IMAGES}}/i/coins.webp?x=8"
title="Coins"
>
<span id="totalCostOfTickets">12</span>
</button>
</div>
{# Success #}
<div
class="toast"
id="lottery-post-success"
style="
position: fixed;
bottom: 1.5rem;
margin: 0 auto;
left: 0;
right: 0;
width: unset;
z-index: 1000;
height: auto !important;
"
role="alert"
data-bs-animation="true"
data-bs-autohide="true"
data-bs-delay="5000"
>
<div class="toast-body bg-success text-center text-white">
<i class="fas fa-comment-alt-smile mr-2"></i
><span id="lottery-post-success-text"></span>
</div>
</div>
{# Error #}
<div
class="toast"
id="lottery-post-error"
style="
position: fixed;
bottom: 1.5rem;
margin: 0 auto;
left: 0;
right: 0;
width: unset;
z-index: 1000;
height: auto !important;
"
role="alert"
data-bs-animation="true"
data-bs-autohide="true"
data-bs-delay="5000"
>
<div class="toast-body bg-danger text-center text-white">
<i class="fas fa-exclamation-circle mr-2"></i
><span id="lottery-post-error-text"></span>
</div>
</div>
</div>
<script defer src="{{'js/lottery.js' | asset}}"></script>
{% endblock %}