first commit
This commit is contained in:
benjibennn
@@ -0,0 +1,155 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="bk-checkout-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-title-wrapper">
|
||||
<h2 class="card-main-title">Checkout</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body mx-auto">
|
||||
<form action="#" class="theme-form">
|
||||
<p class="card-body-title">Cart Summary</p>
|
||||
<div class="cart-summary-wrapper mx-auto">
|
||||
<div class="summary-computations-wrapper">
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Company Secretary subscription packages</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title fs-20">Company Secretary service</span>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<ul>
|
||||
<li class="summary-row-title fs-20">Monthly</li>
|
||||
</ul>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
|
||||
</div>
|
||||
<hr class="summary-row-separator">
|
||||
<div class="summary-row mb-0">
|
||||
<span class="summary-row-title fs-32 fw-600">Total</span>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK$422</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-form-box">
|
||||
<h3 class="summary-form-box-title">Your contact details</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">First name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="TAI MING">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Last name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="CHAN">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Email</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="email" class="form-control" value="taiming@gmail.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Phone</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" value="56894786">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-form-box">
|
||||
<h3 class="summary-form-box-title">Payment details</h3>
|
||||
<h3 class="summary-form-box-title d-flex align-items-center">
|
||||
<span class="mr-3">Credit Card</span>
|
||||
<div class="d-flex">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/mastercard.png') }}">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/visacard.png') }}">
|
||||
</div>
|
||||
</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Cardholders name</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="TAI MING">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Card number</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="0000 0000 0000 0000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">Expiration</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" value="09 / 24">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row mb-30 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label class="col-form-label">CVC</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="number" class="form-control" value="CVC">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{{ route('wave.user.payment-flow.index') }}" class="btn gray-btn py-20">Previous</a>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<a href="{{ route('wave.user.payment-flow.index') }}" class="btn blue-btn py-20 mr-5">Save and Leave</a>
|
||||
<a href="{{ route('wave.user.payment-flow.payment-success') }}" class="btn yellow-btn py-20">Pay</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,95 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
|
||||
<div class="bk-checkout-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-title-wrapper d-flex justify-content-end align-items-center">
|
||||
<div>
|
||||
<svg width="100" height="26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="13" cy="13" r="12" fill="#F3CF5D" stroke="#F3CF5D" stroke-width="1.5"/>
|
||||
<circle cx="13" cy="13" r="7" fill="white"/>
|
||||
<circle cx="87" cy="13" r="12" fill="#F4F7FA" stroke="#F4F7FA" stroke-width="1.5"/>
|
||||
<path d="M35 13H64" stroke="#F4F7FA" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-body mx-auto">
|
||||
<form action="#" class="theme-form">
|
||||
<p class="card-body-title">Company Secretary subscription packages</p>
|
||||
|
||||
<div class="bk-packages-page" style="width: 100%; margin: 0 auto;">
|
||||
<div class="row package-list">
|
||||
<div class="col-md-12 flex justify-center">
|
||||
<div class="package-box" style="width: 70%;">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">Company Secretary service</h3>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="subscriptionType" />
|
||||
<span class="slider"></span>
|
||||
<span class="labels" data-on="Monthly" data-off="Annually"></span>
|
||||
</label>
|
||||
|
||||
<div class="package-box-price" style="width: 40%; margin-left: 30%;">
|
||||
<div class="package-box-price-inner" data-price-type="annually">HK<span class="bigger-text">$4,600</span></div>
|
||||
<div class="package-box-price-inner" data-price-type="monthly" style="display: none;">HK<span class="bigger-text">$422</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="package-box-body" style="text-align: center; align-self: center;">
|
||||
<span class="package-box-body-title">Service include</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Corporate Secretary essentials</li>
|
||||
<li>Personal support by your Corporate Secretary via chat</li>
|
||||
<li>Annual General Meeting papers</li>
|
||||
<li>Annual Returns Filing</li>
|
||||
<li>Forever free documents e‑storage</li>
|
||||
<li>Automated and timely reminders on filing deadlines</li>
|
||||
<li>Online shares distribution management & capital table</li>
|
||||
</ul>
|
||||
<span class="package-box-body-title">Government & Tax Filings</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Unaudited Financial Statements</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="{{ route('wave.user.payment-flow.index') }}" class="btn gray-btn py-20">Previous</a>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<a href="{{ route('wave.user.payment-flow.index') }}" class="btn blue-btn py-20 mr-5">Save and Leave</a>
|
||||
<a href="{{ route('wave.user.payment-flow.cart-summary') }}" class="btn blue-btn py-20">Checkout</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
setPrice();
|
||||
|
||||
$('#subscriptionType').click(function() {
|
||||
setPrice();
|
||||
});
|
||||
|
||||
function setPrice() {
|
||||
$('.package-list .package-box-price-inner').hide();
|
||||
|
||||
if ($('#subscriptionType').is(':checked')) {
|
||||
$('.package-list .package-box-price-inner[data-price-type="monthly"]').show();
|
||||
}
|
||||
else {
|
||||
$('.package-list .package-box-price-inner[data-price-type="annually"]').show();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,45 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="bk-checkout-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-title-wrapper">
|
||||
<h2 class="card-main-title">Checkout</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body mx-auto">
|
||||
<p class="card-body-title d-flex align-items-center justify-content-center">
|
||||
<img class="img-fluid mr-50" src="{{ asset('themes/tailwind/images/tick-circle-blue.png') }}">
|
||||
<span>Payment successful</span>
|
||||
</p>
|
||||
<div class="cart-summary-wrapper mx-auto">
|
||||
<div class="summary-computations-wrapper" style="margin-bottom: 92px;">
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Total amount paid</span>
|
||||
<span class="summary-row-desc sky-blue-text">HK$422</span>
|
||||
</div>
|
||||
<hr class="summary-row-separator">
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Payment method</span>
|
||||
<span class="summary-row-desc sky-blue-text">Credit card</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Transaction date</span>
|
||||
<span class="summary-row-desc sky-blue-text">2023/05/25 18:28</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Transaction number</span>
|
||||
<span class="summary-row-desc sky-blue-text">254678943</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<a href="{{ route('wave.user.payment-flow.cart-summary') }}" class="btn py-20 blue-btn mr-5">Back</a>
|
||||
<button type="button" class="btn py-20 yellow-btn">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user