feat: initial commit - Band Management application

This commit is contained in:
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions

View File

@@ -0,0 +1,133 @@
<!-- Add New Address Modal -->
<div class="modal fade" id="addNewAddress" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-add-new-address">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="address-title mb-2">Add New Address</h4>
<p class="address-subtitle">Add new address for express delivery</p>
</div>
<form id="addNewAddressForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<div class="row">
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioHome">
<span class="custom-option-body">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M16.625 23.625V16.625H11.375V23.625H4.37501V12.6328C4.37437 12.5113 4.39937 12.391 4.44837 12.2798C4.49737 12.1686 4.56928 12.069 4.65939 11.9875L13.4094 4.03592C13.5689 3.88911 13.7778 3.80762 13.9945 3.80762C14.2113 3.80762 14.4202 3.88911 14.5797 4.03592L23.3406 11.9875C23.4287 12.0706 23.4992 12.1706 23.548 12.2814C23.5969 12.3922 23.6231 12.5117 23.625 12.6328V23.625H16.625Z" />
<path
d="M23.625 23.625V12.6328C23.623 12.5117 23.5969 12.3922 23.548 12.2814C23.4992 12.1706 23.4287 12.0706 23.3406 11.9875L14.5797 4.03592C14.4202 3.88911 14.2113 3.80762 13.9945 3.80762C13.7777 3.80762 13.5689 3.88911 13.4094 4.03592L4.65937 11.9875C4.56926 12.069 4.49736 12.1686 4.44836 12.2798C4.39936 12.391 4.37436 12.5113 4.375 12.6328V23.625M1.75 23.625H26.25M16.625 23.625V17.5C16.625 17.2679 16.5328 17.0454 16.3687 16.8813C16.2046 16.7172 15.9821 16.625 15.75 16.625H12.25C12.0179 16.625 11.7954 16.7172 11.6313 16.8813C11.4672 17.0454 11.375 17.2679 11.375 17.5V23.625"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title">Home</span>
<small> Delivery time (9am 9pm) </small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioHome" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioOffice">
<span class="custom-option-body">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625" />
<path
d="M1.75 23.625H26.25M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625M24.5 23.625V11.375C24.5 11.1429 24.4078 10.9204 24.2437 10.7563C24.0796 10.5922 23.8571 10.5 23.625 10.5H15.75M7 7.875H10.5M8.75 14.875H12.25M7 19.25H10.5M19.25 19.25H21M19.25 14.875H21"
stroke-opacity="0.9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title"> Office </span>
<small> Delivery time (9am 5pm) </small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioOffice" />
</label>
</div>
</div>
</div>
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressFirstName">First Name</label>
<input type="text" id="modalAddressFirstName" name="modalAddressFirstName" class="form-control" placeholder="John" />
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressLastName">Last Name</label>
<input type="text" id="modalAddressLastName" name="modalAddressLastName" class="form-control" placeholder="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressCountry">Country</label>
<select id="modalAddressCountry" name="modalAddressCountry" class="select2 form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress1">Address Line 1</label>
<input type="text" id="modalAddressAddress1" name="modalAddressAddress1" class="form-control" placeholder="12, Business Park" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress2">Address Line 2</label>
<input type="text" id="modalAddressAddress2" name="modalAddressAddress2" class="form-control" placeholder="Mall Road" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">Landmark</label>
<input type="text" id="modalAddressLandmark" name="modalAddressLandmark" class="form-control" placeholder="Nr. Hard Rock Cafe" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressCity">City</label>
<input type="text" id="modalAddressCity" name="modalAddressCity" class="form-control" placeholder="Los Angeles" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">State</label>
<input type="text" id="modalAddressState" name="modalAddressState" class="form-control" placeholder="California" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressZipCode">Zip Code</label>
<input type="text" id="modalAddressZipCode" name="modalAddressZipCode" class="form-control" placeholder="99950" />
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="billingAddress" />
<label for="billingAddress" class="form-switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Address Modal -->

View File

@@ -0,0 +1,50 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="addNewCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered1 modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Add New Card</h4>
<p>Add new card to complete payment</p>
</div>
<form id="addNewCCForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalAddCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="modalAddCard" name="modalAddCard" class="form-control credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="modalAddCard2" />
<span class="input-group-text cursor-pointer p-1" id="modalAddCard2"><span class="card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddCardName">Name</label>
<input type="text" id="modalAddCardName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardExpiryDate">Exp. Date</label>
<input type="text" id="modalAddCardExpiryDate" class="form-control expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="modalAddCardCvv" class="form-control cvv-code-mask pe-0" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer ps-0" id="modalAddCardCvv2"><i class="text-body-secondary icon-base ti tabler-help" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="futureAddress" />
<label for="futureAddress" class="switch-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary btn-reset" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,32 @@
<!-- Add Permission Modal -->
<div class="modal fade" id="addPermissionModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h3>Add New Permission</h3>
<p class="text-body-secondary">Permissions you may use and assign to your users.</p>
</div>
<form id="addPermissionForm" class="row" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation mb-4">
<label class="form-label" for="modalPermissionName">Permission Name</label>
<input type="text" id="modalPermissionName" name="modalPermissionName" class="form-control" placeholder="Permission Name" autofocus />
</div>
<div class="col-12 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="corePermission" />
<label class="form-check-label" for="corePermission"> Set as core permission </label>
</div>
</div>
<div class="col-12 text-center demo-vertical-spacing">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Create Permission</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Discard</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add Permission Modal -->

View File

@@ -0,0 +1,224 @@
<!-- Add Role Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="role-title">Add New Role</h4>
<p class="text-body-secondary">Set role permissions</p>
</div>
<!-- Add role form -->
<form id="addRoleForm" class="row g-3" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation mb-3">
<label class="form-label" for="modalRoleName">Role Name</label>
<input type="text" id="modalRoleName" name="modalRoleName" class="form-control" placeholder="Enter a role name" tabindex="-1" />
</div>
<div class="col-12">
<h5 class="mb-6">Role Permissions</h5>
<!-- Permission table -->
<div class="table-responsive">
<table class="table table-flush-spacing">
<tbody>
<tr>
<td class="text-nowrap fw-medium">
Administrator Access
<i class="icon-base ti tabler-info-circle icon-xs" data-bs-toggle="tooltip" data-bs-placement="top" title="Allows a full access to the system"></i>
</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="selectAll" />
<label class="form-check-label" for="selectAll"> Select All </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">User Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementRead" />
<label class="form-check-label" for="userManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementWrite" />
<label class="form-check-label" for="userManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="userManagementCreate" />
<label class="form-check-label" for="userManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Content Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementRead" />
<label class="form-check-label" for="contentManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementWrite" />
<label class="form-check-label" for="contentManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="contentManagementCreate" />
<label class="form-check-label" for="contentManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Disputes Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementRead" />
<label class="form-check-label" for="dispManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementWrite" />
<label class="form-check-label" for="dispManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dispManagementCreate" />
<label class="form-check-label" for="dispManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Database Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementRead" />
<label class="form-check-label" for="dbManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementWrite" />
<label class="form-check-label" for="dbManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dbManagementCreate" />
<label class="form-check-label" for="dbManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Financial Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementRead" />
<label class="form-check-label" for="finManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementWrite" />
<label class="form-check-label" for="finManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="finManagementCreate" />
<label class="form-check-label" for="finManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Reporting</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingRead" />
<label class="form-check-label" for="reportingRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingWrite" />
<label class="form-check-label" for="reportingWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="reportingCreate" />
<label class="form-check-label" for="reportingCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">API Control</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiRead" />
<label class="form-check-label" for="apiRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiWrite" />
<label class="form-check-label" for="apiWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="apiCreate" />
<label class="form-check-label" for="apiCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Repository Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoRead" />
<label class="form-check-label" for="repoRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoWrite" />
<label class="form-check-label" for="repoWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="repoCreate" />
<label class="form-check-label" for="repoCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Payroll</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollRead" />
<label class="form-check-label" for="payrollRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollWrite" />
<label class="form-check-label" for="payrollWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="payrollCreate" />
<label class="form-check-label" for="payrollCreate"> Create </label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Permission table -->
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
<!--/ Add role form -->
</div>
</div>
</div>
</div>
<!--/ Add Role Modal -->

View File

@@ -0,0 +1,308 @@
<!-- Create App Modal -->
<div class="modal fade" id="createApp" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple modal-upgrade-plan">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center">
<h4 class="mb-2">Create App</h4>
<p class="mb-5">Provide data with this form to create your app.</p>
</div>
<div id="wizard-create-app" class="bs-stepper vertical mt-2 shadow-none">
<div class="bs-stepper-header border-0 p-1">
<div class="step" data-target="#details">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-file-text icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Details</span>
<span class="bs-stepper-subtitle">Enter Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#frameworks">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-box icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Frameworks</span>
<span class="bs-stepper-subtitle">Select Framework</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#database">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-database icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Database</span>
<span class="bs-stepper-subtitle">Select Database</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#billing">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Billing</span>
<span class="bs-stepper-subtitle">Payment Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#submit">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-check icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Submit</span>
<span class="bs-stepper-subtitle">Submit</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content p-1">
<form onSubmit="return false">
{% csrf_token %}
<!-- Details -->
<div id="details" class="content pt-4 pt-lg-0">
<div class="mb-6">
<label for="exampleInputEmail1" class="form-label">Application Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Application Name" />
</div>
<h5>Category</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-file-text icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">CRM Application</h6>
<small>Scales with any business</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-success p-2 me-3 rounded"><i class="icon-base ti tabler-shopping-cart icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">eCommerce Platforms</h6>
<small>Grow Your Business With App</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-device-laptop icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Online Learning platform</h6>
<small>Start learning today</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<button class="btn btn-label-secondary btn-prev" disabled>
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- Frameworks -->
<div id="frameworks" class="content pt-4 pt-lg-0">
<h5>Select Framework</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-brand-react-native icon-30px"></i></div>
<div class="d-flex justify-content-between w-100">
<div class="me-2">
<h6 class="mb-1">React Native</h6>
<small>Create truly native apps</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-brand-angular icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Angular</h6>
<small>Most suited for your application</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" checked="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-warning p-2 me-3 rounded"><i class="icon-base ti tabler-brand-html5 icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">HTML</h6>
<small>Progressive Framework</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-success p-2 me-3 rounded"><i class="icon-base ti tabler-brand-vue icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">VueJs</h6>
<small>JS web frameworks</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<button class="btn btn-label-secondary btn-prev"><i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i> <span class="align-middle d-sm-inline-block d-none">Previous</span></button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- Database -->
<div id="database" class="content pt-4 pt-lg-0">
<div class="mb-6">
<label for="exampleInputEmail2" class="form-label">Database Name</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Database Name" />
</div>
<h5>Select Database Engine</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-brand-firebase icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Firebase</h6>
<small>Cloud Firestone</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-warning p-2 me-3 rounded"><i class="icon-base ti tabler-brand-amazon icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">AWS</h6>
<small>Amazon Fast NoSQL Database</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-database icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">MySQL</h6>
<small>Basic MySQL database</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<button class="btn btn-label-secondary btn-prev"><i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i> <span class="align-middle d-sm-inline-block d-none">Previous</span></button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- billing -->
<div id="billing" class="content">
<h5 class="mb-6">Payment Details</h5>
<div id="AppNewCCForm" class="row g-6 pt-3 pt-lg-0 mb-6" onsubmit="return false">
<div class="col-12">
<label for="modalAppCardNumber" class="form-label">Card Number</label>
<div class="input-group input-group-merge">
<input class="form-control app-credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="modalAppAddCard" id="modalAppCardNumber" />
<span class="input-group-text cursor-pointer p-1" id="modalAppAddCard"><span class="app-card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label for="modalAppUserName" class="form-label">Name on Card</label>
<input type="text" class="form-control" placeholder="John Doe" id="modalAppUserName" />
</div>
<div class="col-6 col-md-3">
<label for="modalAppExpiry" class="form-label">Expiry</label>
<input type="text" class="form-control app-expiry-date-mask" placeholder="MM/YY" id="modalAppExpiry" />
</div>
<div class="col-6 col-md-3">
<label for="modalAppAddCardCvv" class="form-label">CVV</label>
<div class="input-group input-group-merge">
<input type="text" id="modalAppAddCardCvv" class="form-control app-cvv-code-mask pe-0" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer ps-0" id="modalAppAddCardCvv2"><i class="text-body-secondary icon-base ti tabler-help" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="appFutureAddress" />
<label for="appFutureAddress" class="form-label">Save card for future billing?</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-between mt-6">
<button class="btn btn-label-secondary btn-prev"><i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i> <span class="align-middle d-sm-inline-block d-none">Previous</span></button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- submit -->
<div id="submit" class="content text-center pt-4 pt-lg-0">
<h5 class="mb-1">Submit</h5>
<p class="small">Submit to kick start your project.</p>
<!-- image -->
<img src="{% static 'img/illustrations/girl-with-laptop.png' %}" class="img-fluid" alt="Create App img" width="175" />
<div class="col-12 d-flex justify-content-between mt-6">
<button class="btn btn-label-secondary btn-prev"><i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i> <span class="align-middle d-sm-inline-block d-none">Previous</span></button>
<button class="btn btn-success btn-next btn-submit" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Create App Modal -->

View File

@@ -0,0 +1,50 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="editCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Edit Card</h2>
<p class="text-body-secondary">Edit your saved card details</p>
</div>
<form id="editCCForm" class="row g-3" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalEditCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="modalEditCard" name="modalEditCard" class="form-control credit-card-mask-edit" type="text" placeholder="4356 3215 6548 7898" value="4356 3215 6548 7898" aria-describedby="modalEditCard2" />
<span class="input-group-text cursor-pointer" id="modalEditCard2"><span class="card-type-edit"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditName">Name</label>
<input type="text" id="modalEditName" class="form-control" placeholder="John Doe" value="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditExpiryDate">Exp. Date</label>
<input type="text" id="modalEditExpiryDate" class="form-control expiry-date-mask-edit" placeholder="MM/YY" value="08/28" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="modalEditCvv" class="form-control cvv-code-mask-edit" maxlength="3" placeholder="654" value="XXX" />
<span class="input-group-text cursor-pointer" id="modalEditCvv2"><i class="icon-base ti tabler-help-circle text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editPrimaryCard" />
<label for="editPrimaryCard">Set as primary card</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Update</button>
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="modal" aria-label="Close">Remove</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,36 @@
<!-- Edit Permission Modal -->
<div class="modal fade" id="editPermissionModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h3>Edit Permission</h3>
<p class="text-body-secondary">Edit permission as per your requirements.</p>
</div>
<div class="alert alert-warning" role="alert">
<h6 class="alert-heading mb-2">Warning</h6>
<p class="mb-0">By editing the permission name, you might break the system permissions functionality. Please ensure you're absolutely certain before proceeding.</p>
</div>
<form id="editPermissionForm" class="row" onsubmit="return false">
{% csrf_token %}
<div class="col-sm-9 form-control-validation">
<label class="form-label" for="editPermissionName">Permission Name</label>
<input type="text" id="editPermissionName" name="editPermissionName" class="form-control" placeholder="Permission Name" tabindex="-1" />
</div>
<div class="col-sm-3 mb-4">
<label class="form-label invisible d-none d-sm-inline-block">Button</label>
<button type="submit" class="btn btn-primary mt-1 mt-sm-0">Update</button>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editCorePermission" />
<label class="form-check-label" for="editCorePermission"> Set as core permission </label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Edit Permission Modal -->

View File

@@ -0,0 +1,108 @@
<!-- Edit User Modal -->
<div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-edit-user">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Edit User Information</h4>
<p>Updating user details will receive a privacy audit.</p>
</div>
<form id="editUserForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserFirstName">First Name</label>
<input type="text" id="modalEditUserFirstName" name="modalEditUserFirstName" class="form-control" placeholder="John" value="John" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLastName">Last Name</label>
<input type="text" id="modalEditUserLastName" name="modalEditUserLastName" class="form-control" placeholder="Doe" value="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalEditUserName">Username</label>
<input type="text" id="modalEditUserName" name="modalEditUserName" class="form-control" placeholder="johndoe007" value="johndoe007" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserEmail">Email</label>
<input type="text" id="modalEditUserEmail" name="modalEditUserEmail" class="form-control" placeholder="example@domain.com" value="example@domain.com" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserStatus">Status</label>
<select id="modalEditUserStatus" name="modalEditUserStatus" class="select2 form-select" aria-label="Default select example">
<option selected>Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
<option value="3">Suspended</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditTaxID">Tax ID</label>
<input type="text" id="modalEditTaxID" name="modalEditTaxID" class="form-control modal-edit-tax-id" placeholder="123 456 7890" value="123 456 7890" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserPhone">Phone Number</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input type="text" id="modalEditUserPhone" name="modalEditUserPhone" class="form-control phone-number-mask" placeholder="202 555 0111" value="202 555 0111" />
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLanguage">Language</label>
<select id="modalEditUserLanguage" name="modalEditUserLanguage" class="select2 form-select" multiple>
<option value="">Select</option>
<option value="english" selected>English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="dutch">Dutch</option>
<option value="hebrew">Hebrew</option>
<option value="sanskrit">Sanskrit</option>
<option value="hindi">Hindi</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserCountry">Country</label>
<select id="modalEditUserCountry" name="modalEditUserCountry" class="select2 form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India" selected>India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editBillingAddress" />
<label for="editBillingAddress" class="switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Edit User Modal -->

View File

@@ -0,0 +1,30 @@
<!-- Enable OTP Modal -->
<div class="modal fade" id="enableOTP" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Enable One Time Password</h4>
<p>Verify Your Mobile Number for SMS</p>
</div>
<p>Enter your mobile phone number with country code and we will send you a verification code.</p>
<form id="enableOTPForm" class="row g-5" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label" for="modalEnableOTPPhone">Phone Number</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input type="text" id="modalEnableOTPPhone" name="modalEnableOTPPhone" class="form-control phone-number-otp-mask" placeholder="202 555 0111" />
</div>
</div>
<div class="col-12 d-flex gap-4 flex-wrap">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Enable OTP Modal -->

View File

@@ -0,0 +1,138 @@
{% load static %}
<!-- Pricing Modal -->
<div class="modal fade" id="pricingModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-simple modal-pricing">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!-- Pricing Plans -->
<div class="rounded-top">
<h4 class="text-center mb-2">Pricing Plans</h4>
<p class="text-center mb-0">All plans include 40+ advanced tools and features to boost your product. Choose the best plan to fit your needs.</p>
<div class="d-flex align-items-center justify-content-center flex-wrap gap-2 pt-12 pb-4">
<label class="switch switch-sm ms-sm-12 ps-sm-12 me-0">
<span class="switch-label fs-6 text-body">Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label fs-6 text-body">Annually</span>
</label>
<div class="mt-n5 ms-n10 ml-2 mb-12 d-none d-sm-flex align-items-center gap-1">
<i class="icon-base ti tabler-corner-left-down icon-lg text-body-secondary scaleX-n1-rtl"></i>
<span class="badge badge-sm bg-label-primary rounded-1 mb-2 ">Save up to 10%</span>
</div>
</div>
<div class="row gy-6">
<!-- Basic -->
<div class="col-xl mb-md-0">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 p-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-basic.png' %}" alt="Basic Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Basic</h4>
<p class="text-center mb-5">A simple start for everyone</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="mb-0 text-primary">0</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">100 responses a month</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Unlimited fields</li>
<li class="mb-4">Basic form creation tools</li>
<li class="mb-0">Up to 2 subdomains</li>
</ul>
<button type="button" class="btn btn-label-success d-grid w-100" data-bs-dismiss="modal">Your Current Plan</button>
</div>
</div>
</div>
<!-- Pro -->
<div class="col-xl mb-md-0">
<div class="card border-primary border shadow-none">
<div class="card-body position-relative pt-4 p-5">
<div class="position-absolute end-0 me-5 top-0 mt-4">
<span class="badge bg-label-primary rounded-1">Popular</span>
</div>
<div class="my-5 pt-6 text-center">
<img src="{% static 'img/illustrations/page-pricing-standard.png' %}" alt="Standard Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Standard</h4>
<p class="text-center mb-5">For small to medium businesses</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">7</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">9</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 480 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">Unlimited responses</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Instagram profile page</li>
<li class="mb-4">Google Docs integration</li>
<li class="mb-0">Custom “Thank you” page</li>
</ul>
<button type="button" class="btn btn-primary d-grid w-100" data-bs-dismiss="modal">Upgrade</button>
</div>
</div>
</div>
<!-- Enterprise -->
<div class="col-xl">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 p-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-enterprise.png' %}" alt="Enterprise Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Enterprise</h4>
<p class="text-center mb-5">Solution for big organizations</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">16</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">19</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 960 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">PayPal payments</li>
<li class="mb-4">Logic Jumps</li>
<li class="mb-4">File upload with 5GB storage</li>
<li class="mb-4">Custom domain support</li>
<li class="mb-0">Stripe integration</li>
</ul>
<button type="button" class="btn btn-label-primary d-grid w-100" data-bs-dismiss="modal">Upgrade</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Pricing Plans -->
</div>
</div>
</div>
</div>
<!--/ Pricing Modal -->
{% block page_js %}
<script src="{% static 'js/pages-pricing.js' %}"></script>
{% endblock page_js %}

View File

@@ -0,0 +1,107 @@
<!-- Refer & Earn Modal -->
<div class="modal fade" id="referAndEarn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Refer & Earn</h4>
<p class="text-center mb-12 m-auto">Invite your friend to {% get_theme_variables 'template_name' %}, if they sign up, you and your friend will get 30 days free trial.</p>
</div>
<div class="row row-gap-6">
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M32.8594 5.60945L3.73443 13.8126C3.4865 13.8804 3.2655 14.0229 3.10152 14.2208C2.93754 14.4188 2.83857 14.6624 2.81807 14.9186C2.79757 15.1748 2.85655 15.4311 2.98698 15.6526C3.11741 15.8741 3.31293 16.05 3.54693 16.1563L16.9219 22.4844C17.1839 22.6058 17.3943 22.8162 17.5157 23.0782L23.8438 36.4532C23.9501 36.6872 24.126 36.8827 24.3475 37.0131C24.569 37.1436 24.8253 37.2026 25.0815 37.1821C25.3377 37.1616 25.5814 37.0626 25.7793 36.8986C25.9772 36.7346 26.1198 36.5136 26.1876 36.2657L34.3907 7.1407C34.4528 6.92816 34.4567 6.70282 34.4018 6.48829C34.3469 6.27375 34.2354 6.07794 34.0788 5.92135C33.9222 5.76477 33.7264 5.6532 33.5118 5.59832C33.2973 5.54344 33.072 5.54729 32.8594 5.60945Z"
fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.7595 4.62951C33.3731 4.53065 32.9672 4.53707 32.5841 4.64806L3.47059 12.848L3.46635 12.8491C3.0218 12.9716 2.62557 13.2277 2.33135 13.5829C2.03619 13.9391 1.85803 14.3777 1.82113 14.8389C1.78424 15.3001 1.89041 15.7614 2.12517 16.1601C2.35845 16.5562 2.70742 16.8713 3.12507 17.0631L16.4941 23.3884L16.4941 23.3884L16.5016 23.3919C16.5486 23.4136 16.5864 23.4514 16.6081 23.4984L16.6081 23.4984L16.6116 23.5059L22.9369 36.8749C23.1287 37.2926 23.4438 37.6416 23.8399 37.8748C24.2386 38.1096 24.6999 38.2158 25.1611 38.1789C25.6223 38.142 26.0609 37.9638 26.4171 37.6687C26.7723 37.3744 27.0284 36.9782 27.1509 36.5337L27.152 36.5294L35.3503 7.42141L35.3521 7.41553C35.4629 7.03254 35.4693 6.62681 35.3705 6.24047C35.2712 5.85214 35.0692 5.49768 34.7858 5.21425C34.5023 4.93082 34.1479 4.72885 33.7595 4.62951ZM33.1304 6.572L32.8593 5.60954L33.14 6.56924C33.1804 6.55744 33.2232 6.55671 33.2639 6.56713C33.3046 6.57754 33.3418 6.59873 33.3715 6.62846C33.4013 6.65819 33.4225 6.69537 33.4329 6.73611C33.4433 6.77684 33.4426 6.81963 33.4308 6.85998L33.4307 6.85997L33.428 6.86959L25.2249 35.9946L25.2249 35.9946L25.2228 36.002C25.2093 36.0516 25.1808 36.0958 25.1412 36.1285C25.1016 36.1613 25.0529 36.1811 25.0016 36.1852C24.9504 36.1893 24.8991 36.1775 24.8548 36.1515C24.8105 36.1254 24.7754 36.0863 24.7541 36.0395L24.7476 36.0255L18.53 22.8842L25.0977 16.3166C25.4882 15.926 25.4882 15.2929 25.0977 14.9023C24.7072 14.5118 24.074 14.5118 23.6835 14.9023L17.1158 21.47L3.97449 15.2524L3.96054 15.2459C3.91374 15.2247 3.87463 15.1895 3.84854 15.1452C3.82246 15.1009 3.81066 15.0496 3.81476 14.9984C3.81886 14.9471 3.83866 14.8984 3.87145 14.8588C3.90425 14.8192 3.94845 14.7907 3.99803 14.7772L3.99804 14.7772L4.00541 14.7751L33.1304 6.572Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Send Invitation 👍🏻</h5>
<p class="mb-lg-0">Send your referral link to your friend</p>
</div>
</div>
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M34.9219 8.75H5.07812C4.34462 8.75 3.75 9.34462 3.75 10.0781V29.9219C3.75 30.6554 4.34462 31.25 5.07812 31.25H34.9219C35.6554 31.25 36.25 30.6554 36.25 29.9219V10.0781C36.25 9.34462 35.6554 8.75 34.9219 8.75Z" fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.75 10.0781C4.75 9.89691 4.89691 9.75 5.07812 9.75H34.9219C35.1031 9.75 35.25 9.89691 35.25 10.0781V29.9219C35.25 30.1031 35.1031 30.25 34.9219 30.25H5.07812C4.89691 30.25 4.75 30.1031 4.75 29.9219V10.0781ZM5.07812 7.75C3.79234 7.75 2.75 8.79234 2.75 10.0781V29.9219C2.75 31.2077 3.79234 32.25 5.07812 32.25H34.9219C36.2077 32.25 37.25 31.2077 37.25 29.9219V10.0781C37.25 8.79234 36.2077 7.75 34.9219 7.75H5.07812ZM8.75 14C8.19772 14 7.75 14.4477 7.75 15C7.75 15.5523 8.19772 16 8.75 16H31.25C31.8023 16 32.25 15.5523 32.25 15C32.25 14.4477 31.8023 14 31.25 14H8.75ZM8.75 19C8.19772 19 7.75 19.4477 7.75 20C7.75 20.5523 8.19772 21 8.75 21H31.25C31.8023 21 32.25 20.5523 32.25 20C32.25 19.4477 31.8023 19 31.25 19H8.75ZM7.75 25C7.75 24.4477 8.19772 24 8.75 24H10C10.5523 24 11 24.4477 11 25C11 25.5523 10.5523 26 10 26H8.75C8.19772 26 7.75 25.5523 7.75 25ZM15 24C14.4477 24 14 24.4477 14 25C14 25.5523 14.4477 26 15 26H25C25.5523 26 26 25.5523 26 25C26 24.4477 25.5523 24 25 24H15ZM29 25C29 24.4477 29.4477 24 30 24H31.25C31.8023 24 32.25 24.4477 32.25 25C32.25 25.5523 31.8023 26 31.25 26H30C29.4477 26 29 25.5523 29 25Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Registration 😎</h5>
<p class="mb-lg-0">Let them register to our services</p>
</div>
</div>
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.2656 23.1875L28.3594 17.2969C28.5469 20.9062 27.6562 25.1094 24.9062 29.9062L29.5937 33.6562C29.7604 33.7886 29.9581 33.8762 30.1682 33.9108C30.3782 33.9453 30.5936 33.9257 30.7939 33.8537C30.9942 33.7817 31.1728 33.6598 31.3128 33.4995C31.4527 33.3391 31.5495 33.1457 31.5937 32.9375L33.5156 24.25C33.562 24.0658 33.5634 23.8732 33.5199 23.6883C33.4764 23.5034 33.3892 23.3317 33.2656 23.1875ZM6.64061 23.2813L11.5469 17.4062C11.3594 21.0156 12.25 25.2188 15 30L10.3125 33.75C10.1469 33.8823 9.95029 33.9704 9.74127 34.0058C9.53225 34.0413 9.31764 34.023 9.11764 33.9527C8.91763 33.8824 8.73879 33.7623 8.59794 33.6039C8.4571 33.4454 8.35887 33.2537 8.31249 33.0469L6.39061 24.3438C6.34428 24.1596 6.3428 23.967 6.3863 23.7821C6.4298 23.5972 6.51701 23.4255 6.64061 23.2813Z"
fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.5868 2.31872C18.9844 1.99031 19.484 1.81055 19.9999 1.81055C20.5174 1.81055 21.0185 1.99141 21.4166 2.32172C22.9521 3.57204 26.2759 6.67263 28.1129 11.4477C28.7422 13.0835 29.1922 14.9038 29.3415 16.8978L34.1239 22.6367C34.3488 22.9011 34.5076 23.2152 34.5871 23.5532C34.666 23.8883 34.6646 24.2372 34.5832 24.5716L32.664 33.2626L32.6633 33.2657C32.5798 33.6381 32.403 33.9831 32.1495 34.2684C31.8959 34.5536 31.574 34.7696 31.214 34.8962C30.854 35.0228 30.4677 35.0557 30.0915 34.9919C29.7152 34.928 29.3614 34.7696 29.0633 34.5314L29.0628 34.531L24.6492 31.0001H15.3508L10.9372 34.531L10.9367 34.5314C10.6386 34.7696 10.2847 34.928 9.90851 34.9919C9.53227 35.0557 9.14598 35.0228 8.78597 34.8962C8.42596 34.7696 8.10406 34.5536 7.85053 34.2684C7.597 33.9831 7.42019 33.6381 7.33671 33.2657L7.33601 33.2626L5.4168 24.5716C5.33541 24.2372 5.33403 23.8883 5.41289 23.5532C5.49245 23.215 5.65141 22.9007 5.87655 22.6362L10.5662 17.0205C10.7036 14.9754 11.1625 13.1108 11.8119 11.4389C13.667 6.66274 17.0333 3.56278 18.5868 2.31872ZM27.372 17.4408C27.3612 17.3736 27.3574 17.3057 27.3603 17.2381C27.2407 15.3587 26.8236 13.6664 26.2463 12.1658C24.585 7.84765 21.5539 5.01206 20.15 3.86949L20.1401 3.86146L20.1401 3.8614C20.1008 3.82855 20.0512 3.81055 19.9999 3.81055C19.9487 3.81055 19.899 3.82855 19.8597 3.8614L19.8434 3.87475C18.4249 5.00948 15.3534 7.84484 13.6762 12.163C13.0763 13.7076 12.6489 15.4559 12.5469 17.4027C12.547 17.4384 12.5453 17.4741 12.5416 17.5098C12.3904 20.7895 13.1636 24.6279 15.5833 29.0001H24.4106C26.7972 24.5972 27.5428 20.7358 27.372 17.4408ZM32.5912 23.9216L29.326 20.0033C29.081 22.9478 28.1679 26.2039 26.2812 29.7444L30.3117 32.9689L30.312 32.9691C30.3451 32.9954 30.3843 33.013 30.426 33.02C30.4678 33.0271 30.5107 33.0235 30.5507 33.0094C30.5907 32.9953 30.6265 32.9713 30.6546 32.9396C30.6826 32.9082 30.7021 32.8702 30.7115 32.8292L30.7117 32.8282L32.6329 24.1282C32.635 24.1188 32.6372 24.1093 32.6396 24.0999C32.6469 24.0708 32.6471 24.0404 32.6403 24.0112C32.6334 23.982 32.6196 23.9549 32.6001 23.9322L32.5911 23.9216L32.5912 23.9216ZM10.6056 20.0936L7.40817 23.9224L7.39994 23.9322L7.39987 23.9322C7.38036 23.9549 7.36659 23.982 7.35972 24.0112C7.35285 24.0404 7.35309 24.0708 7.3604 24.0999C7.36277 24.1093 7.365 24.1188 7.36709 24.1282L9.28827 32.8282L9.28849 32.8292C9.29786 32.8702 9.31741 32.9082 9.34536 32.9397C9.37353 32.9713 9.40929 32.9953 9.4493 33.0094C9.4893 33.0235 9.53222 33.0271 9.57403 33.02C9.61574 33.013 9.65498 32.9954 9.68806 32.969L9.68827 32.9689L13.7131 29.749C11.8077 26.2443 10.8721 23.0167 10.6056 20.0936ZM16.5 35.0001C16.5 34.4478 16.9477 34.0001 17.5 34.0001H22.5C23.0523 34.0001 23.5 34.4478 23.5 35.0001C23.5 35.5524 23.0523 36.0001 22.5 36.0001H17.5C16.9477 36.0001 16.5 35.5524 16.5 35.0001ZM21.875 15.0001C21.875 16.0357 21.0355 16.8751 20 16.8751C18.9645 16.8751 18.125 16.0357 18.125 15.0001C18.125 13.9646 18.9645 13.1251 20 13.1251C21.0355 13.1251 21.875 13.9646 21.875 15.0001Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Free Trial 🎉</h5>
<p class="mb-0">Your friend will get 30 days free trial</p>
</div>
</div>
</div>
<hr class="mt-12 mb-6" />
<h5 class="mb-6">Invite your friends</h5>
<form class="row g-4" onsubmit="return false">
<div class="col-lg-10">
<label class="form-label" for="modalRnFEmail">Enter your friends email address and invite them to join {% get_theme_variables 'template_name' %} 😍</label>
<input type="text" id="modalRnFEmail" class="form-control" placeholder="example@domain.com" aria-label="example@domain.com" />
</div>
<div class="col-lg-2 d-flex align-items-end justify-content-end">
<button type="button" class="btn btn-primary w-100">Send</button>
</div>
</form>
<h5 class="my-6">Share the referral link</h5>
<form class="row g-4" onsubmit="return false">
<div class="col-lg-9">
<label class="form-label" for="modalRnFLink">You can also copy and send it or share it on your social media. 🚀</label>
<div class="input-group input-group-merge">
<input type="text" id="modalRnFLink" class="form-control" readonly value="{% get_theme_variables 'creator_url' %}" />
<span class="input-group-text text-primary cursor-pointer" id="basic-addon33">Copy link</span>
</div>
</div>
<div class="col-lg-3 d-flex align-items-end">
<div class="btn-social d-flex justify-content-between w-100">
<button type="button" class="btn btn-icon btn-facebook"><i class="icon-base ti tabler-brand-facebook icon-22px"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i class="icon-base ti tabler-brand-twitter icon-22px"></i></button>
<button type="button" class="btn btn-icon btn-linkedin"><i class="icon-base ti tabler-brand-linkedin icon-22px"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Refer & Earn Modal -->

View File

@@ -0,0 +1,55 @@
{% load static %}
<!-- Payment Methods modal -->
<div class="modal fade" id="paymentMethods" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select payment methods</h4>
<p>Supported payment methods</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom py-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<h6 class="m-0">Visa</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-sm-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<h6 class="m-0">American Express</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<h6 class="m-0">Mastercard</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<h6 class="m-0">JCB</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center pb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
<h6 class="m-0">Diners Club</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
</div>
</div>
</div>
</div>
<!-- / Payment Methods modal -->

View File

@@ -0,0 +1,92 @@
{% load static %}
<!-- Payment provider modal -->
<div class="modal fade" id="paymentProvider" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select payment providers</h4>
<p>Third-party payment providers</p>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom py-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0 me-12">Adyen</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">2Checkout</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Airpay</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Authorize.net</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Bambora</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Cayan</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Chase Paymentech (Orbital)</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between pb-4">
<h6 class="m-0 mb-2 mb-md-0">Checkout.com</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- / Payment provider modal -->

View File

@@ -0,0 +1,260 @@
{% load static %}
<!-- Share Project Modal -->
<div class="modal fade" id="shareProject" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-share-project modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center">
<h4 class="mb-2">Share Project</h4>
<p>Share project with a team member</p>
</div>
</div>
<div class="mb-6 mx-4 mx-md-0">
<label for="select2Basic" class="form-label">Add Members</label>
<select id="select2Basic" class="form-select form-select-lg share-project-select" data-allow-clear="true">
<option data-name="Adelaide Nichols" data-image="img/avatars/13.png" selected>Adelaide Nichols</option>
<option data-name="Julian Murphy" data-image="img/avatars/9.png">Julian Murphy</option>
<option data-name="Sophie Gilbert" data-image="img/avatars/10.png">Sophie Gilbert</option>
<option data-name="Marvin Wheeler" data-image="img/avatars/7.png">Marvin Wheeler</option>
</select>
</div>
<h5 class="ms-4 ms-md-0">8 Members</h5>
<ul class="p-0 m-0 mx-4 mx-md-0">
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/1.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Lester Palmer</p>
<p class="small mb-0">pe&#64;vogeiz.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/2.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Mattie Blair</p>
<p class="small mb-0">peromak&#64;zukedohik.gov</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Owner</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/3.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Marvin Wheeler</p>
<p class="small mb-0">rumet&#64;jujpejah.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/4.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Nannie Ford</p>
<p class="small mb-0">negza&#64;nuv.io</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Comment</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/5.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Julian Murphy</p>
<p class="small mb-0">lunebame&#64;umdomgu.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can View</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/6.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Sophie Gilbert</p>
<p class="small mb-0">ha&#64;sugit.gov</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can View</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/7.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Chris Watkins</p>
<p class="small mb-0">zokap&#64;mak.org</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Comment</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap">
<div class="avatar me-4">
<img src="{% static 'img/avatars/8.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Adelaide Nichols</p>
<p class="small mb-0">ujinomu&#64;jigo.com</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="d-flex align-items-start mt-6 align-items-sm-center mx-4 mx-md-0 mb-4 mb-md-0">
<i class="icon-base ti tabler-users me-2 text-heading"></i>
<div class="d-flex justify-content-between flex-grow-1 align-items-center flex-wrap gap-2">
<h6 class="mb-0">Public to {% get_theme_variables 'template_name' %} - {% get_theme_variables 'creator_name' %}</h6>
<button class="btn btn-primary"><i class="icon-base ti tabler-link icon-xs me-2"></i>Copy Project Link</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Share Project Modal -->

View File

@@ -0,0 +1,100 @@
<!-- Two Factor Auth Modal -->
<div class="modal fade" id="twoFactorAuth" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select Authentication Method</h4>
<p>You also need to select a method by which the proxy authenticates to the directory serve.</p>
</div>
<div class="row">
<div class="col-12 mb-6">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp1" data-bs-target="#twoFactorAuthOne" data-bs-toggle="modal">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp1" checked />
<span class="custom-option-header">
<span class="h6 mb-0 d-flex align-items-center"><i class="icon-base ti tabler-settings me-1"></i>Authenticator Apps</span>
</span>
<span class="custom-option-body">
<small>Get code from an app like Google Authenticator or Microsoft Authenticator.</small>
</span>
</label>
</div>
</div>
<div class="col-12">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp2" data-bs-target="#twoFactorAuthTwo" data-bs-toggle="modal">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp2" />
<span class="custom-option-header">
<span class="h6 mb-0 d-flex align-items-center"><i class="icon-base ti tabler-message me-1"></i>SMS</span>
</span>
<span class="custom-option-body">
<small>We will send a code via SMS if you need to use your backup login method.</small>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Authentication App -->
<div class="modal fade" id="twoFactorAuthOne" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-0">Add Authenticator App</h4>
</div>
<h5 class="mb-2 text-break">Authenticator Apps</h5>
<p class="mb-6">Using an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password, scan the QR code. It will generate a 6-digit code for you to enter below.</p>
<div class="text-center">
<img src="{% static 'img/icons/misc/authentication-QR.png' %}" alt="QR Code" width="150" />
</div>
<div class="alert alert-warning alert-dismissible mb-4 mt-6" role="alert">
<h5 class="alert-heading mb-1 text-break">ASDLKNASDA9AHS678dGhASD78AB</h5>
<p class="mb-0">If you're having trouble using the QR code, select manual entry on your app</p>
</div>
<div class="mb-6">
<label for="twoFactorAuthInput" class="form-label">Enter Authentication Code</label>
<input type="email" class="form-control" id="twoFactorAuthInput" name="twoFactorAuthInput" placeholder="123 456" />
</div>
<div class="text-end">
<button type="button" class="btn btn-label-secondary me-3" data-bs-toggle="modal" data-bs-target="#twoFactorAuth"><span class="align-middle">Cancel</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span><i class="icon-base ti tabler-check icon-xs ms-2"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Authentication via SMS -->
<div class="modal fade" id="twoFactorAuthTwo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="mb-2">Verify Your Mobile Number for SMS</h5>
<p class="mb-6">Enter your mobile phone number with country code, and we will send you a verification code.</p>
<div class="mb-6">
<label for="twoFactorAuthInputSms" class="form-label">Phone number</label>
<input type="text" class="form-control" id="twoFactorAuthInputSms" name="twoFactorAuthInputSms" placeholder="202 555 0111" />
</div>
<div class="text-end">
<button type="button" class="btn btn-label-secondary me-3" data-bs-toggle="modal" data-bs-target="#twoFactorAuth"><span class="align-middle">Cancel</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span><i class="icon-base ti tabler-check ms-2"></i></button>
</div>
</div>
</div>
</div>
</div>
<!--/ Two Factor Auth Modal -->
<script>
// Check selected custom option
window.Helpers.initCustomOptionCheck();
</script>

View File

@@ -0,0 +1,42 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="upgradePlanModal" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
<div class="modal-content">
<div class="modal-body p-4">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Upgrade Plan</h2>
<p class="text-body-secondary">Choose the best plan for user.</p>
</div>
<form id="upgradePlanForm" class="row g-4" onsubmit="return false">
{% csrf_token %}
<div class="col-sm-9">
<label class="form-label" for="choosePlan">Choose Plan</label>
<select id="choosePlan" name="choosePlan" class="form-select" aria-label="Choose Plan">
<option selected>Choose Plan</option>
<option value="standard">Standard - $99/month</option>
<option value="exclusive">Exclusive - $249/month</option>
<option value="Enterprise">Enterprise - $499/month</option>
</select>
</div>
<div class="col-sm-3 d-flex align-items-end">
<button type="submit" class="btn btn-primary">Upgrade</button>
</div>
</form>
</div>
<hr class="mx-md-n5 mx-n3" />
<div class="modal-body">
<h6 class="mb-0">User current plan is standard plan</h6>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex justify-content-center me-2 mt-1">
<sup class="h6 pricing-currency pt-1 mt-2 mb-0 me-1 text-primary">$</sup>
<h1 class="mb-0 text-primary">99</h1>
<sub class="pricing-duration mt-auto mb-5 pb-1 small text-body">/month</sub>
</div>
<button class="btn btn-label-danger cancel-subscription">Cancel Subscription</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,46 @@
<!-- Add Payment Sidebar -->
<div class="offcanvas offcanvas-end" id="addPaymentOffcanvas" aria-modal="true" role="dialog">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Add Payment</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body flex-grow-1">
<div class="d-flex justify-content-between bg-lighter p-2 mb-4">
<p class="mb-0">Invoice Balance:</p>
<p class="fw-medium mb-0">$5000.00</p>
</div>
<form>
<div class="mb-6">
<label class="form-label" for="invoiceAmount">Payment Amount</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" id="invoiceAmount" name="invoiceAmount" class="form-control invoice-amount" placeholder="100" />
</div>
</div>
<div class="mb-6">
<label class="form-label" for="payment-date">Payment Date</label>
<input id="payment-date" class="form-control invoice-date" type="text" />
</div>
<div class="mb-6">
<label class="form-label" for="payment-method">Payment Method</label>
<select class="form-select" id="payment-method">
<option value="" selected disabled>Select payment method</option>
<option value="Cash">Cash</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Debit Card">Debit Card</option>
<option value="Credit Card">Credit Card</option>
<option value="Paypal">Paypal</option>
</select>
</div>
<div class="mb-6">
<label class="form-label" for="payment-note">Internal Payment Note</label>
<textarea class="form-control" id="payment-note" rows="2"></textarea>
</div>
<div class="mb-6 d-flex flex-wrap">
<button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</form>
</div>
</div>
<!-- /Add Payment Sidebar -->

View File

@@ -0,0 +1,43 @@
<!-- Send Invoice Sidebar -->
<div class="offcanvas offcanvas-end" id="sendInvoiceOffcanvas" aria-hidden="true">
<div class="offcanvas-header mb-6 border-bottom">
<h5 class="offcanvas-title">Send Invoice</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-0 flex-grow-1">
<form>
<div class="mb-6">
<label for="invoice-from" class="form-label">From</label>
<input type="text" class="form-control" id="invoice-from" value="shelbyComapny@email.com" placeholder="company@email.com" />
</div>
<div class="mb-6">
<label for="invoice-to" class="form-label">To</label>
<input type="text" class="form-control" id="invoice-to" value="qConsolidated@email.com" placeholder="company@email.com" />
</div>
<div class="mb-6">
<label for="invoice-subject" class="form-label">Subject</label>
<input type="text" class="form-control" id="invoice-subject" value="Invoice of purchased Admin Templates" placeholder="Invoice regarding goods" />
</div>
<div class="mb-6">
<label for="invoice-message" class="form-label">Message</label>
<textarea class="form-control" name="invoice-message" id="invoice-message" cols="3" rows="8">
Dear Queen Consolidated,
Thank you for your business, always a pleasure to work with you!
We have generated a new invoice in the amount of $95.59
We would appreciate payment of this invoice by 05/11/2021</textarea
>
</div>
<div class="mb-6">
<span class="badge bg-label-primary">
<i class="icon-base ti tabler-link icon-xs"></i>
<span class="align-middle">Invoice Attached</span>
</span>
</div>
<div class="mb-6 d-flex flex-wrap">
<button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</form>
</div>
</div>
<!-- /Send Invoice Sidebar -->

View File

@@ -0,0 +1,8 @@
<span class="text-primary">
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z" fill="currentColor" />
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z" fill="currentColor" />
</svg>
</span>

View File

@@ -0,0 +1,592 @@
{% load static %}
<!-- Checkout Wizard -->
<div id="wizard-checkout" class="bs-stepper wizard-icons wizard-icons-example">
<div class="bs-stepper-header m-lg-auto border-0">
<div class="step" data-target="#checkout-cart">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-cart.svg' %}#wizardCart"></use>
</svg>
</span>
<span class="bs-stepper-label">Cart</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-address">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-address.svg' %}#wizardCheckoutAddress"></use>
</svg>
</span>
<span class="bs-stepper-label">Address</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-payment">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-payment.svg' %}#wizardPayment"></use>
</svg>
</span>
<span class="bs-stepper-label">Payment</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-confirmation">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-confirmation.svg' %}#wizardConfirm"></use>
</svg>
</span>
<span class="bs-stepper-label">Confirmation</span>
</button>
</div>
</div>
<div class="bs-stepper-content border-top">
<form id="wizard-checkout-form" onSubmit="return false">
<!-- Cart -->
<div id="checkout-cart" class="content">
<div class="row">
<!-- Cart left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Offer alert -->
<div class="alert alert-success alert-dismissible mb-4" role="alert">
<div class="d-flex gap-4">
<div class="alert-icon flex-shrink-0 rounded me-0">
<i class="icon-base ti tabler-percentage"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">Available Offers</h5>
<ul class="list-unstyled mb-0">
<li>- 10% Instant Discount on Bank of America Corp Bank Debit and Credit cards</li>
<li>- 25% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA</li>
</ul>
</div>
</div>
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Shopping bag -->
<h5>My Shopping Bag (2 Items)</h5>
<ul class="list-group mb-4">
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0 d-flex align-items-center">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-100" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<p class="me-3 mb-2">
<a href="javascript:void(0)" class="fw-medium"> <span class="text-heading">Google - Google Home - White</span></a>
</p>
<div class="text-body-secondary mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-4">Apple</a> <span class="badge bg-label-success">In Stock</span></div>
<div class="read-only-ratings raty mb-2" data-read-only="true" data-score="4" data-number="5"></div>
<input type="number" class="form-control form-control-sm w-px-100" value="1" min="1" max="5" />
</div>
<div class="col-md-4">
<div class="text-md-end">
<button type="button" class="btn-close btn-pinned" aria-label="Close"></button>
<div class="my-2 mt-md-6 mb-md-4"><span class="text-primary">$299/</span><s class="text-body">$359</s></div>
<button type="button" class="btn btn-sm btn-label-primary">Move to wishlist</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0 d-flex align-items-center">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-100" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<p class="me-3 mb-2">
<a href="javascript:void(0)" class="fw-medium"><span class="text-heading">Apple iPhone 11 (64GB, Black)</span></a>
</p>
<div class="text-body-secondary mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-4">Apple</a> <span class="badge bg-label-success">In Stock</span></div>
<div class="read-only-ratings raty mb-2" data-read-only="true" data-score="4" data-number="5"></div>
<input type="number" class="form-control form-control-sm w-px-100" value="1" min="1" max="5" />
</div>
<div class="col-md-4">
<div class="text-md-end">
<button type="button" class="btn-close btn-pinned" aria-label="Close"></button>
<div class="my-2 mt-md-6 mb-md-4"><span class="text-primary">$299/</span><s class="text-body">$359</s></div>
<button type="button" class="btn btn-sm btn-label-primary">Move to wishlist</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Wishlist -->
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item text-primary border-primary d-flex justify-content-between">
<span class="fw-medium">Add More Products From Wishlist</span>
<i class="icon-base ti tabler-arrow-right icon-xs scaleX-n1-rtl mt-50"></i>
</a>
</div>
</div>
<!-- Cart right -->
<div class="col-xl-4">
<div class="border rounded p-6 mb-4">
<!-- Offer -->
<h6>Offer</h6>
<div class="row g-4 mb-4">
<div class="col-8 col-xxl-8 col-xl-12">
<input type="text" class="form-control" placeholder="Enter Promo Code" aria-label="Enter Promo Code" />
</div>
<div class="col-4 col-xxl-4 col-xl-12">
<div class="d-grid">
<button type="button" class="btn btn-label-primary">Apply</button>
</div>
</div>
</div>
<!-- Gift wrap -->
<div class="bg-lighter rounded p-6">
<h6 class="mb-2">Buying gift for a loved one?</h6>
<p class="mb-2">Gift wrap and personalized message on card, Only for $2.</p>
<a href="javascript:void(0)" class="fw-medium">Add a gift wrap</a>
</div>
<hr class="mx-n6 my-6" />
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Bag Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Coupon Discount</dt>
<dd class="col-6 text-end"><a href="javascript:void(0)">Apply Coupon</a></dd>
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-1">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-next">Place Order</button>
</div>
</div>
</div>
</div>
<!-- Address -->
<div id="checkout-address" class="content">
<div class="row">
<!-- Address left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Select address -->
<p class="fw-medium text-heading">Select your preferable address</p>
<div class="row mb-6 g-6">
<div class="col-md">
<div class="form-check custom-option custom-option-basic checked">
<label class="form-check-label custom-option-content" for="customRadioAddress1">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioAddress1" checked="" />
<span class="custom-option-header mb-2">
<span class="fw-medium text-heading mb-0">John Doe (Default)</span>
<span class="badge bg-label-primary">Home</span>
</span>
<span class="custom-option-body">
<small
>4135 Parkway Street, Los Angeles, CA, 90017.<br />
Mobile : 1234567890 Card / Cash on delivery available</small
>
<span class="my-3 border-bottom d-block"></span>
<span class="d-flex"> <a class="me-4" href="javascript:void(0)">Edit</a> <a href="javascript:void(0)">Remove</a> </span>
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioAddress2">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioAddress2" />
<span class="custom-option-header mb-2">
<span class="fw-medium text-heading mb-0">ACME Inc.</span>
<span class="badge bg-label-success">Office</span>
</span>
<span class="custom-option-body">
<small>87 Hoffman Avenue, New York, NY, 10016.<br />Mobile : 1234567890 Card / Cash on delivery available</small>
<span class="my-3 border-bottom d-block"></span>
<span class="d-flex"> <a class="me-4" href="javascript:void(0)">Edit</a> <a href="javascript:void(0)">Remove</a> </span>
</span>
</label>
</div>
</div>
</div>
<button type="button" class="btn btn-label-primary mb-6" data-bs-toggle="modal" data-bs-target="#addNewAddress">Add new address</button>
<!-- Choose Delivery -->
<p class="fw-medium text-heading">Choose Delivery Speed</p>
<div class="row mt-2">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon position-relative checked">
<label class="form-check-label custom-option-content" for="customRadioDelivery1">
<span class="custom-option-body">
<i class="icon-base ti tabler-user icon-lg"></i>
<span class="custom-option-title mb-2">Standard</span>
<span class="badge bg-label-success btn-pinned">FREE</span>
<small>Get your product in 1 Week.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery1" checked="" />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon position-relative">
<label class="form-check-label custom-option-content" for="customRadioDelivery2">
<span class="custom-option-body">
<i class="icon-base ti tabler-star icon-lg"></i>
<span class="custom-option-title mb-2">Express</span>
<span class="badge bg-label-secondary btn-pinned">$10</span>
<small>Get your product in 3-4 days.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon position-relative">
<label class="form-check-label custom-option-content" for="customRadioDelivery3">
<span class="custom-option-body">
<i class="icon-base ti tabler-crown icon-lg"></i>
<span class="custom-option-title mb-2">Overnight</span>
<span class="badge bg-label-secondary btn-pinned">$15</span>
<small>Get your product in 0-1 days.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery3" />
</label>
</div>
</div>
</div>
</div>
<!-- Address right -->
<div class="col-xl-4">
<div class="border rounded p-6 mb-4">
<!-- Estimated Delivery -->
<h6>Estimated Delivery Date</h6>
<ul class="list-unstyled">
<li class="d-flex gap-4 align-items-center py-2 mb-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-50" />
</div>
<div class="flex-grow-1">
<p class="mb-0"><a class="text-body" href="javascript:void(0)">Google - Google Home - White</a></p>
<p class="fw-medium mb-0">18th Nov 2021</p>
</div>
</li>
<li class="d-flex gap-4 align-items-center py-2">
<div class="flex-shrink-0">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-50" />
</div>
<div class="flex-grow-1">
<p class="mb-0"><a class="text-body" href="javascript:void(0)">Apple iPhone 11 (64GB, Black)</a></p>
<p class="fw-medium mb-0">20th Nov 2021</p>
</div>
</li>
</ul>
<hr class="mx-n6 my-6" />
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-2">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-next">Place Order</button>
</div>
</div>
</div>
</div>
<!-- Payment -->
<div id="checkout-payment" class="content">
<div class="row">
<!-- Payment left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Offer alert -->
<div class="alert alert-success alert-dismissible mb-6" role="alert">
<div class="d-flex gap-4">
<div class="alert-icon flex-shrink-0 rounded me-0">
<i class="icon-base ti tabler-percentage"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">Available Offers</h5>
<ul class="list-unstyled mb-0">
<li>- 10% Instant Discount on Bank of America Corp Bank Debit and Credit cards</li>
<li>- 25% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA</li>
</ul>
</div>
</div>
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Payment Tabs -->
<div class="col-xxl-6 col-lg-8">
<div class="nav-align-top">
<ul class="nav nav-pills card-header-pills row-gap-2 flex-wrap" id="paymentTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-cc-tab" data-bs-toggle="pill" data-bs-target="#pills-cc" type="button" role="tab" aria-controls="pills-cc" aria-selected="true">Card</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-cod-tab" data-bs-toggle="pill" data-bs-target="#pills-cod" type="button" role="tab" aria-controls="pills-cod" aria-selected="false">Cash On Delivery</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-gift-card-tab" data-bs-toggle="pill" data-bs-target="#pills-gift-card" type="button" role="tab" aria-controls="pills-gift-card" aria-selected="false">Gift Card</button>
</li>
</ul>
</div>
<div class="tab-content px-0 pb-0" id="paymentTabsContent">
<!-- Credit card -->
<div class="tab-pane fade show active" id="pills-cc" role="tabpanel" aria-labelledby="pills-cc-tab">
<div class="row g-6">
<div class="col-12">
<label class="form-label w-100" for="paymentCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="paymentCard" name="paymentCard" class="form-control credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="paymentCard2" />
<span class="input-group-text cursor-pointer p-1" id="paymentCard2"><span class="card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-4">
<label class="form-label" for="paymentCardName">Name</label>
<input type="text" id="paymentCardName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-4">
<label class="form-label" for="paymentCardExpiryDate">Exp. Date</label>
<input type="text" id="paymentCardExpiryDate" class="form-control expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-4">
<label class="form-label" for="paymentCardCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="paymentCardCvv" class="form-control cvv-code-mask" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer" id="paymentCardCvv2"><i class="icon-base ti tabler-help text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch mt-2">
<input type="checkbox" class="form-check-input" id="cardFutureBilling" />
<label for="cardFutureBilling" class="form-check-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary btn-next me-3">Save Changes</button>
<button type="reset" class="btn btn-label-secondary">Reset</button>
</div>
</div>
</div>
<!-- COD -->
<div class="tab-pane fade" id="pills-cod" role="tabpanel" aria-labelledby="pills-cod-tab">
<p>Cash on Delivery is a type of payment method where the recipient make payment for the order at the time of delivery rather than in advance.</p>
<button type="button" class="btn btn-primary btn-next">Pay On Delivery</button>
</div>
<!-- Gift card -->
<div class="tab-pane fade" id="pills-gift-card" role="tabpanel" aria-labelledby="pills-gift-card-tab">
<h6>Enter Gift Card Details</h6>
<div class="row g-5">
<div class="col-12">
<label for="giftCardNumber" class="form-label">Gift card number</label>
<input type="number" class="form-control" id="giftCardNumber" placeholder="Gift card number" />
</div>
<div class="col-12">
<label for="giftCardPin" class="form-label">Gift card pin</label>
<input type="number" class="form-control" id="giftCardPin" placeholder="Gift card pin" />
</div>
<div class="col-12">
<button type="button" class="btn btn-primary btn-next">Redeem Gift Card</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Address right -->
<div class="col-xl-4">
<div class="border rounded p-6">
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-1">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row">
<dt class="col-6 text-heading mb-3">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
<dt class="col-6 fw-medium text-heading">Deliver to:</dt>
<dd class="col-6 fw-medium text-end mb-0"><span class="badge bg-label-primary">Home</span></dd>
</dl>
<!-- Address Details -->
<address>
<span class="text-heading fw-medium"> John Doe (Default),</span><br />
4135 Parkway Street, <br />
Los Angeles, CA, 90017. <br />
Mobile : +1 906 568 2332
</address>
<a href="javascript:void(0)" class="fw-medium">Change address</a>
</div>
</div>
</div>
</div>
<!-- Confirmation -->
<div id="checkout-confirmation" class="content">
<div class="row mb-6">
<div class="col-12 col-lg-8 mx-auto text-center mb-2">
<h4>Thank You! 😇</h4>
<p>Your order <a href="javascript:void(0)" class="text-heading fw-medium">#1536548131</a> has been placed!</p>
<p>We sent an email to <a href="mailto:john.doe@example.com" class="text-heading fw-medium">john.doe@example.com</a> with your order confirmation and receipt. If the email hasn't arrived within two minutes, please check your spam folder to see if the email was routed there.</p>
<p>
<span><i class="icon-base ti tabler-clock me-1 text-heading"></i> Time placed:&nbsp;</span> 25/05/2020 13:35pm
</p>
</div>
<!-- Confirmation details -->
<div class="col-12">
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-map-pin"></i> Shipping</h6>
<address class="mb-0">
John Doe <br />
4135 Parkway Street,<br />
Los Angeles, CA 90017,<br />
USA
</address>
<p class="mb-0 mt-4">+123456789</p>
</li>
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-credit-card"></i> Billing Address</h6>
<address class="mb-0">
John Doe <br />
4135 Parkway Street,<br />
Los Angeles, CA 90017,<br />
USA
</address>
<p class="mb-0 mt-4">+123456789</p>
</li>
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-ship"></i> Shipping Method</h6>
<p class="fw-medium mb-4">Preferred Method:</p>
Standard Delivery<br />
(Normally 3-4 business days)
</li>
</ul>
</div>
</div>
<div class="row">
<!-- Confirmation items -->
<div class="col-xl-9 mb-6 mb-xl-0">
<ul class="list-group">
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-80" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<a href="javascript:void(0)">
<h6 class="mb-2">Google - Google Home - White</h6>
</a>
<div class="text-body mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-3">Google</a> <span class="badge bg-label-success">In Stock</span></div>
</div>
<div class="col-md-4">
<div class="text-md-end">
<div class="my-2 my-lg-6"><span class="text-primary">$299/</span><s class="text-body-secondary">$359</s></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-80" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<a href="javascript:void(0)">
<h6 class="mb-2">Apple iPhone 11 (64GB, Black)</h6>
</a>
<div class="text-body mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)">Apple</a></div>
</div>
<div class="col-md-4">
<div class="text-md-end">
<div class="my-2 my-lg-6"><span class="text-primary">$299/</span><s class="text-body-secondary">$359</s></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Confirmation total -->
<div class="col-xl-3">
<div class="border rounded p-6">
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-sm-6 text-heading fw-normal">Charges</dt>
<dd class="col-sm-6 text-end text-body-secondary">$5.00<span class="badge bg-label-success ms-2">FREE</span></dd>
</dl>
<hr class="mx-n6 mb-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!--/ Checkout Wizard -->