MarseyWorld/files/templates/lottery.html

<div>
  <div class="lottery-page--wrapper">
    <div class="lottery-page--image">
      <img src="/i/{{SITE_NAME}}/lottery.webp?v=2000" />
      <img
        id="lotteryTicketPulled"
        src="/i/{{SITE_NAME}}/lottery_active.webp?v=2000"
        style="display: none"
      />
    </div>
    <div class="lottery-page--stats">
      {% if v.admin_level > 2 %}
      <div
        class="lottery-page--stat"
        style="position: relative; padding-top: 1rem; overflow: hidden"
      >
        <i
          class="fas fa-broom"
          style="
            position: absolute;
            bottom: -4px;
            right: -4px;
            font-size: 50px;
            color: var(--gray-600);
          "
        >
        </i>
        <button
          type="button"
          class="btn btn-danger"
          id="endLotterySession"
          style="display: none"
          onclick="endLotterySession()"
        >
          End Current Session
        </button>
        <button
          type="button"
          class="btn btn-success"
          id="startLotterySession"
          style="display: none"
          onclick="startLotterySession()"
        >
          Start New Session
        </button>
      </div>
      {% endif %}
      <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="{{asset_siteimg('coins.webp')}}"
              aria-label="coins"
              title="coins"
              style="display: none; position: relative; top: -2px"
            />
            <span id="prize">-</span>
          </div>
          <div id="timeLeft">-</div>
          <div id="ticketsSoldThisSession">-</div>
          <div id="participantsThisSession">-</div>
        </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"
              aria-label="Quantity"
              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"
        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="{{asset_siteimg('coins.webp')}}"
          aria-label="coins"
          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"
      aria-live="assertive"
      aria-atomic="true"
      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"
      aria-live="assertive"
      aria-atomic="true"
      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 src="{{asset('js/lottery.js')}}"></script>
</div>