{% extends "mnfapp/base.html" %} {% 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%}