{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container">

    {% for x in rows %}
    <div class="card2">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img draggable="false" src="{{url_for('user_webview_tarot.static', filename='images/tarot_bg.png')}}"
                    alt="Tarot Card" class="tarot-back">
            </div>
            <div class="flip-card-back">
                <img draggable="false" src="" alt="" class="tarot-back">
            </div>
        </div>
    </div>
    {% endfor %}
    {% for x in rows %}
    <div class="card2 card-sec-row">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                <img draggable="false" src="{{url_for('user_webview_tarot.static', filename='images/tarot_bg.png')}}"
                    alt="Tarot Card" class="tarot-back">
            </div>
            <div class="flip-card-back">
                <img draggable="false" src="" alt="" class="tarot-back">
            </div>
        </div>
    </div>
    {% endfor %}
    <div class="mobile-nav text-white">
        <a href="/back" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{appTitle}}</h4>
    </div>
    <div class="card-cover"></div>
    <div class="name-container">
        <h2></h2>
    </div>
    <!-- <div class="card-gap bg-danger" style="height: 530px;"></div> -->
    <div class="button-container mb-3">
        <div class="d-grid gap-2 col-6 mx-auto">
            <button id="read-result" class="btn btn-primary btn-lg" type="button" qtype="{{qtype}}" card-id="">Read
                Script</button>
        </div>
    </div>
</div>
<div class="preloader">
    <lottie-player src="https://assets4.lottiefiles.com/packages/lf20_t8hs6wpo.json" background="transparent" speed="1"
        style="width: 60px; height: 60px;" loop autoplay></lottie-player>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        setTimeout(() => {
            $('.preloader').fadeOut('slow');
            $('body').css('overflow', 'unset');
        }, 1000)
    })
</script>
{% endblock %}