{% load static %} {% block content %}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>claim your gift</title>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<style>
    .sample-container {
        width: 60vw;
        margin: auto;
        margin-top: 10vh;
        border-radius: 10px;
        padding: 1em;
        display: grid;
        grid-template-columns: auto auto;
        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .sample-container input {
        margin: auto;
        width: 35vw;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .sample-container button {
        width: 20vw;
        margin: auto;
        text-align: center;
    }
    
    @media screen and (min-width:900px) {
        .tn {
            text-align: left;
            margin-top: 1em;
            margin-left: 9em;
            color: #ee3c4d;
        }
        .tnn {
            text-align: left;
            margin-top: 1em;
            margin-left: 15em;
            font-size: 16px;
        }
        .cnn {
            width: 60%;
            justify-content: center;
        }
        .clam {
            display: flex;
            margin-left: 30em;
        }
        .btnn {
            width: 250px;
            height: 30px;
          
            border-radius: 15px;
            justify-content: center;
            font-size: 18px;
            padding: 0px 3px;
        }
    }
    
    @media screen and (max-width:900px) {
        .tn {
            text-align: left;
            margin-top: 1em;
            margin-left: 1em;
            color: #ee3c4d;
        }
        .tnn {
            text-align: left;
            margin-top: 0.3em;
            margin-left: 1.5em;
            font-size: 16px;
        }
        .cnn {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .clam {
            display: flex;
            justify-content: center;
        }
        .btnn {
            width: 200px;
            height: 30px;
            margin-top: 1rem;
            border-radius: 15px;
            justify-content: center;
            font-size: 10px;
            padding: 0px 3px;
        }
    }
    
    #h1 {
        text-align: center;
        /* color: linear-gradient(#ee364d , rgb(0, 89, 255)); */
        background: -webkit-linear-gradient(#ee364d, rgb(56, 109, 206));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    #font-size{
        font-size: 1.5em !important;
    }
</style>

<div class="body-con">

    <div class="mb-5 mt-2 container width mx-auto rounded shadow p-5">
        <h1 class="" >Welcome!</h1>
        <div class="mx-3 mb-5" id="font-size">
            <p>You are at the doorstep of incredible facilities and fascinating opportunities.</p>
            <p>To open the door, please enter the coupon code in the box below.</p>
        </div>



    </form>

    <div class="col-sm-12 cnn">

        <form action="" method="POST" class="form-group">
            {% csrf_token %}
            <div class="row Text-center">
                <div class="col-sm-6 ">
                    <input  type="text" placeholder="Enter Coupon Code" class="form-control border border-dark" name="token" required>
                    
                </div>
                <div class="col-sm-6 ">
                    <button type="submit" class="btn btn-primary btnn onSubmit" id="refer " ><b>Claim Your Privileges</b></button>
                </div>
            </div>
    </div>
    <div style="width: 50vw; margin:auto;text-align: center;">
        <span>
            {% if message %}
            <script>
                window.alert(`{{ message }}`);
            </script>
            <span style="color: green;">{{ message }}</span> 
        {% endif %}
        {% if message2 %}
            <script>
                window.alert("The token you've entered is invalid. Please enter a valid one.");
            </script>
            {% comment %} <span style="color: red;">{{ message2 }}</span> {% endcomment %}
        {% endif %}
        
    </div>

    </form>
</div>
<div>
    {% if tokens %} {% for i in tokens %} {%endfor%} {%endif%}
</div>
<script>
    



</script>

{%endblock%}