cost calculator design
This commit is contained in:
@@ -131,9 +131,10 @@
|
||||
|
||||
<section class="lqd-section pb-160">
|
||||
<div class="container">
|
||||
<div class="row" id="interactiveSection">
|
||||
<form id="cost-calculator">
|
||||
<div class="row" id="interactiveSection">
|
||||
|
||||
<div class="col col-lg-12">
|
||||
{{-- <div class="col col-lg-7">
|
||||
|
||||
<div class="wizard-container">
|
||||
<div class="nav" id="step-nav">
|
||||
@@ -248,36 +249,243 @@
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-1"></div>
|
||||
|
||||
{{-- <div class="col col-lg-4">
|
||||
<div class="total-cost">
|
||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-bold">S.N.</th>
|
||||
<th class="font-bold">Select</th>
|
||||
<th class="font-bold">Max Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="totalCostBody">
|
||||
<!-- Filled dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> --}}
|
||||
|
||||
</div>
|
||||
<div class="col col-lg-7">
|
||||
<div class="cost-choosing">
|
||||
|
||||
<div class="step-content active" id="step1">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Where do you want to study</h5>
|
||||
|
||||
<div class="row flex flex-wrap py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="country" type="radio" id="country1">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country1">UK</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="country" type="radio" id="country2">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country2">Australia</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="country" type="radio" id="country3">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country3">USA</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="country" type="radio" id="country4">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="country4">Newzealand</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step2">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Are you going alone or with a dependent?
|
||||
</h5>
|
||||
|
||||
<div class="row flex flex-wrap py-20">
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="alone">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="alone">Alone</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="spouse">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="spouse">With Spouse</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-6">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="alone" type="radio" id="child">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="child">With Spouse and
|
||||
child</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step3">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Do you want to include other services?
|
||||
</h5>
|
||||
|
||||
<div class="row flex flex-wrap py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="services" type="radio" id="serviceYes">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="serviceYes">Yes</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="services" type="radio" id="serviceNo">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="serviceNo">No</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step4">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Which Level are you applying for?</h5>
|
||||
|
||||
<div class="row flex flex-wrap py-20">
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="level" type="radio" id="bachelors">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="bachelors">Bachelors</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-sm-4">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<input name="level" type="radio" id="masters">
|
||||
|
||||
<label class="text-20 text-ter p-0 m-0" for="masters">Masters</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-content" id="step5">
|
||||
<h3 class="text-20 text-black font-bold pb-20">Choose items to find the total cost</h3>
|
||||
<h5 class="text-ter text-18 font-medium pb-20">Which Program are you applying for?</h5>
|
||||
|
||||
<div class="row flex py-20">
|
||||
<div class="col col-sm-12">
|
||||
<div class="flex items-center gap-10 px-10 py-12 bg-white rounded-30 tabs">
|
||||
<select name="" id="">
|
||||
<option value="">Select Program</option>
|
||||
<option value="">Masters in Information Technology</option>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" flex items-center justify-center next-btn">
|
||||
<button id="prevBtn" type="button"
|
||||
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
<p class="m-0 p-0">Previous</p>
|
||||
</button>
|
||||
<button id="nextBtn" type="button"
|
||||
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center">
|
||||
<p class="m-0 p-0">Next</p> <i class="fa-solid fa-chevron-right"></i>
|
||||
</button>
|
||||
<button type="submit" id="doneBtn" style="display: none;"
|
||||
class="rounded-30 px-20 py-10 text-ter text-16 text-center border-0 flex items-center gap-10 justify-center mr-5">Done</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="progress-line">
|
||||
<div class="progress-track">
|
||||
<span class="banana" id="b1">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b2">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b3">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b4">
|
||||
<div class="dot"
|
||||
style="width:12px;height:12px;background:#999;border-radius:50%;"></div>
|
||||
</span>
|
||||
<span class="banana" id="b5"><img
|
||||
src=" {{ asset('raffles/assets/images/icons/bananas.svg') }}"
|
||||
alt=""></span>
|
||||
</div>
|
||||
<div class="monkey" id="monkey" style="left: 0%;"><img
|
||||
src="{{ asset('raffles\assets\images\icons\monkey.png') }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col col-lg-1"></div>
|
||||
|
||||
<div class="col col-lg-4">
|
||||
<div class="total-cost">
|
||||
<h4>Total <span class="text-black">Cost</span> </h4>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="font-bold">S.N.</th>
|
||||
<th class="font-bold">Select</th>
|
||||
<th class="font-bold">Max Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="totalCostBody">
|
||||
<!-- Filled dynamically -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
@endsection
|
||||
@push('js')
|
||||
<script>
|
||||
{{-- <script>
|
||||
const form = document.getElementById('multiStepForm');
|
||||
const tabs = document.querySelectorAll('.tab-pane');
|
||||
const nextBtns = document.querySelectorAll('.btn-next');
|
||||
@@ -346,5 +554,5 @@
|
||||
yesRadio.addEventListener('change', toggleProficiencySections);
|
||||
noRadio.addEventListener('change', toggleProficiencySections);
|
||||
toggleProficiencySections();
|
||||
</script>
|
||||
</script> --}}
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user