You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
3.3 KiB
HTML
75 lines
3.3 KiB
HTML
{% extends "customer_main.html" %}
|
|
{%load static%}
|
|
|
|
{% block modules_section %}
|
|
<!-- This block is intentionally left empty to exclude the modules section -->
|
|
{% endblock modules_section %}
|
|
|
|
{% block content %}
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<p id="itemId" class="hidden">{{item.id}}</p>
|
|
|
|
|
|
<div class="w-full px-5 s:px-9 flex flex-col gap-5 mt-5 font-poppinsLight">
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md">
|
|
<div class="grid grid-cols-1 xxlg1:grid-cols-2">
|
|
<div
|
|
class="w-full flex flex-col items-center justify-center rounded-l-md h-full p-9 gap-8 overflow-hidden relative bg-gradient-to-b from-gray-400 via-gray-500 to-blue-950">
|
|
<div
|
|
class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
<div
|
|
class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 filter blur-xl opacity-70 animate-blob animation-delay-2000">
|
|
</div>
|
|
|
|
|
|
<div class="hidden s:flex z-10">
|
|
<img src="{% static 'images/ositcom_logos/full-logo-white.png' %}" class="w-[150px]">
|
|
</div>
|
|
|
|
<div class="w-full s:w-fit flex flex-col justify-center items-center gap-5 text-center border border-white border-opacity-10 rounded-md py-10 px-10 s:px-20 shadow-md bg-white z-10">
|
|
<p class="text-secondosiblue font-poppinsExtraBold uppercase text-xl s:text-2xl">{{item.title}}</p>
|
|
<p class="text-secondosiblue text-xl s:text-2xl">${{item.amount}}</p>
|
|
|
|
<select class="w-full s:w-[300px] bg-white border border-gray-200 rounded-md px-3 py-3 text-secondosiblue outline-none flex justify-center items-center text-center cursor-pointer" id="cycle">
|
|
{% for cycle in cycles %}
|
|
<option value="{{cycle.id}}">{{cycle.months}} {% if cycle.months == 1 %}month {% else %}months{% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- EMBEDDED PAYMENT FORM -->
|
|
<div class="p-5">
|
|
<div id="paymentContent">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!---------------------- JS SCRIPTS -------------------->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
|
|
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://creditlibanais-netcommerce.gateway.mastercard.com/static/checkout/checkout.min.js"></script>
|
|
|
|
<script type="text/javascript" src='{% static "js/customer_dashboard/payment.js" %}'></script>
|
|
|
|
|
|
{% endblock %} |