first commit
This commit is contained in:
@@ -0,0 +1,414 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 332px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/refresh-3.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Change Company Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Change of Company Director (Appointment / Cessation)</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Cessation to Act as Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Reason for Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 60px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="formCheck-1" name="reason">
|
||||
<label class="form-check-label" for="formCheck-1">Resignation/Other</label>
|
||||
</div>
|
||||
<div class="form-check" style="margin-left: 42px;">
|
||||
<input class="form-check-input" type="radio" id="formCheck-2" name="reason">
|
||||
<label class="form-check-label" for="formCheck-2">Deceased</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<hr class="new2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Appointment of Director</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alias(English)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alias(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Correspondence Address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Alternate to</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Email address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Appointment</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin: 20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-end align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A;border-top-left-radius: 50px; color: white;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px;border-style: none;">
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}">
|
||||
<button type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px; color: white;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Leave</button></a>
|
||||
</div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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,69 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px; background: linear-gradient(90deg, #7db979, #26bbaa); margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 593px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-27.png" style="width: 80px; margin-left: 10px;">
|
||||
<h1 style="font-size: 20px; color: rgb(0,0,0); margin-bottom: 0px;">Change in Particulars of Company Secretary or Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body" style="overflow: auto; height: 50vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px; margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px; margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px; text-align: center; color: rgb(7,7,7);">Change in Particulars of Company Secretary or Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row" style="margin: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A; border-top-left-radius: 50px; color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px; border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A; border-top-left-radius: 50px; border-top-right-radius: 50px; color: white; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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,393 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px;margin-left: 50px;margin-top: 50px;margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 363px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-26.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Change of Company Secretary </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Change of Company Secretary </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Cessation to Act as Company Secretary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Reason for Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 60px;">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" id="formCheck-1" name="reason">
|
||||
<label class="form-check-label" for="formCheck-1">Resignation/Other</label>
|
||||
</div>
|
||||
<div class="form-check" style="margin-left: 42px;">
|
||||
<input class="form-check-input" type="radio" id="formCheck-2" name="reason">
|
||||
<label class="form-check-label" for="formCheck-2">Deceased</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Cessation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<hr class="new2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Appointment of Company Secretary</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Correspondence Address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Email address</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Company Number</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Appointment</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-end align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A;border-top-left-radius: 50px; color: white;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px;border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px; color: white;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style=" color: white;background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;padding-top: 10px;padding-bottom: 10px;border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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,31 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-checkout-page h-100">
|
||||
<div class="card-wrapper h-100 flex-direction-column d-flex">
|
||||
<div class="card-title-wrapper">
|
||||
<h2 class="card-main-title">Checkout</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body mx-auto h-100 d-flex justify-content-center flex-direction-column">
|
||||
<p class="card-body-title d-flex align-items-center justify-content-center mt-auto">
|
||||
<img class="img-fluid mr-50" src="{{ asset('themes/tailwind/images/tick-circle-failed.png') }}">
|
||||
<span>Payment failed</span>
|
||||
</p>
|
||||
<p class="card-body-desc mb-auto">
|
||||
Your payment was not successfully processed.
|
||||
<br>
|
||||
Please try a different payment method.
|
||||
</p>
|
||||
<div class="cart-summary-wrapper mx-auto">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn py-20 blue-btn mr-5">Back</a>
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn py-20 yellow-btn">Try Again</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,45 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-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$32,500</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.company-secretary.limited-company') }}" 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
|
||||
@@ -0,0 +1,180 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-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">Digital Company Registration fee</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title fs-20">1 year Comp Sec</span>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK$13,500</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<ul>
|
||||
<li class="summary-row-title fs-20">3-5 Shareholders </li>
|
||||
</ul>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">+HK$1,000/year</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title">Digital Bookkeeping fee</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-row-title fs-20">Short</span>
|
||||
<span class="summary-row-desc fs-20 sky-blue-text">HK$18,000/year</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$32,500</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 align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="btn grey-btn py-20 mb-2">Previous</a>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout-payment-success') }}" class="btn yellow-btn py-20 mx-2 mb-2">Pay Now</a>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Saved Draft Modal --}}
|
||||
<div class="modal fade validation-modal" id="saveDraftModal" tabindex="-1" aria-labelledby="saveDraftModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto w-100">
|
||||
<div class="modal-body p-0">
|
||||
<p class="text-center message-title">Data saved successfully</p>
|
||||
<p class="text-center message">You can edit this draft on [Document draft] panel.</p>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn blue-btn mx-2" data-bs-dismiss="modal">Check</button>
|
||||
<button type="button" class="btn red-btn mx-2" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,100 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-main-page">
|
||||
<div class="title-wrapper justify-content-start">
|
||||
<h2 class="page-title">Company Secretary service</h2>
|
||||
</div>
|
||||
<div class="cs-main-page-body">
|
||||
<div class="row button-row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<a href="#" class="btn w-100">
|
||||
<img class="img-fluid mr-5" width="30" src="{{ asset('themes/tailwind/images/document-text.png') }}">
|
||||
<span class="mr-5">Document Queue</span>
|
||||
<span class="count-circle mr-5">10</span>
|
||||
<img class="img-fluid" width="8" src="{{ asset('themes/tailwind/images/chevron-right.png') }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.limited-company') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-company-1716851.png') }}">
|
||||
<span class="box-action-title">Incorporation of Hong Kong Limited Company</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-change-company-name') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-2.png') }}">
|
||||
<span class="box-action-title">Change Company Name</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-change-company-name') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/location2.png') }}">
|
||||
<span class="box-action-title">Change Company Address</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-director') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-3.png') }}">
|
||||
<span class="box-action-title">Change of Company Director (Appointment / Cessation)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-secretary') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-4.png') }}">
|
||||
<span class="box-action-title">Change of Company Secretary (Appointment / Cessation)</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.resignation') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-unemployed-4944356.png') }}">
|
||||
<span class="box-action-title">Resignation of Reserve Director</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('wave.user.company-secretary.change-particulars') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/refresh-5.png') }}">
|
||||
<span class="box-action-title">Change in Particulars of Company Secretary or Director</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-transfer-of-shares') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-transfer-5791219.png') }}">
|
||||
<span class="box-action-title">Transfer of shares</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-action-row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="{{ route('records-service-enquiry') }}" class="box-action-wrapper">
|
||||
<img class="img-fluid mb-4 mx-auto" src="{{ asset('themes/tailwind/images/noun-curious-5576487.png') }}">
|
||||
<span class="box-action-title">Other Requests</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,452 @@
|
||||
@extends('theme::user.layouts.app')
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="cs-limited-company-page">
|
||||
<div class="card-wrapper">
|
||||
<div class="card-header">
|
||||
<div class="card-header-top">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="img-fluid mr-5" width="74" src="{{ asset('themes/tailwind/images/noun-company-1716851.png') }}">
|
||||
<h2 class="top-title">Incorporation of Hong Kong Limited Company</h2>
|
||||
</div>
|
||||
<div class="progress-wrapper">
|
||||
<div class="progress-step active" data-step="1"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="2"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="3"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="4"></div>
|
||||
<div class="progress-step-separator"></div>
|
||||
<div class="progress-step" data-step="5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="1">
|
||||
<h2 class="bottom-title">Please enter your company name</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="2" style="display: none;">
|
||||
<h2 class="bottom-title">Will you be a director of this company?</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="3" style="display: none;">
|
||||
<h2 class="bottom-title">How many shareholders will you have?</h2>
|
||||
</div>
|
||||
<div class="card-header-bottom form-steps-title" data-step="4" style="display: none;">
|
||||
<h2 class="bottom-title">Do you need to set up an Airwallex account and a corporate Visa card?</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form action="#" class="theme-form h-100">
|
||||
<div class="form-steps" data-step="1">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<input type="text" class="form-control">
|
||||
<p class="form-field-desc">*Company name availability subject to final confirmation from the company registry</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-end mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="2">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="2" style="display: none;">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<div class="custom-radio-selection">
|
||||
<label class="radio-select" for="is_director_yes">
|
||||
<input type="radio" id="is_director_yes" name="is_director" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
Yes
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="is_director_no">
|
||||
<input type="radio" id="is_director_no" name="is_director" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
No
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="1">Previous</button>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="3">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="3" style="display: none;">
|
||||
<div class="card-body card-body-l">
|
||||
<div class="w-100 mb-4">
|
||||
<label class="col-form-label">Number of shareholders:</label>
|
||||
<div class="number-input-wrapper">
|
||||
<button type="button" class="btn number-input-btn minus">
|
||||
<i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<input type="number" class="form-control text-center" value="2">
|
||||
<button type="button" class="btn number-input-btn plus">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100">
|
||||
<label class="col-form-label">Are there any corporate shareholders?</label>
|
||||
<div class="custom-radio-selection justify-content-between">
|
||||
<label class="radio-select" for="has_corporate_shareholders_yes">
|
||||
<input type="radio" id="has_corporate_shareholders_yes" name="has_corporate_shareholders" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
I have a corporate shareholder(s)
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="has_corporate_shareholders_no">
|
||||
<input type="radio" id="has_corporate_shareholders_no" name="has_corporate_shareholders" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
I don't have a corporate shareholder
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="2">Previous</button>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="4">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="4" style="display: none;">
|
||||
<div class="card-body card-body-s">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-12">
|
||||
<div class="custom-radio-selection">
|
||||
<label class="radio-select" for="set_up_airwallex_account_yes">
|
||||
<input type="radio" id="set_up_airwallex_account_yes" name="set_up_airwallex_account" value="yes">
|
||||
<i class="fa fa-check fs-20 mr-5"></i>
|
||||
<span>
|
||||
Yes
|
||||
</span>
|
||||
</label>
|
||||
<label class="radio-select" for="set_up_airwallex_account_no">
|
||||
<input type="radio" id="set_up_airwallex_account_no" name="set_up_airwallex_account" value="no">
|
||||
<i class="fa fa-times fs-20 mr-5"></i>
|
||||
<span>
|
||||
No
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="3">Previous</button>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2 change-form-step" data-target="5">Next</button>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-steps" data-step="5" style="display: none;">
|
||||
<div class="card-body card-body-xl">
|
||||
<div class="title-wrapper justify-content-center">
|
||||
<h2 class="page-title">Here are our incorporation packages</h2>
|
||||
</div>
|
||||
<div class="row package-list w-100 mb-3">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="package-box mx-3">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">
|
||||
3 year Comp Sec
|
||||
<span class="d-block">(2 Shareholders)</span>
|
||||
</h3>
|
||||
<div class="package-box-price">
|
||||
<div class="package-box-price-inner">
|
||||
HK<span class="bigger-text">$19,100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body">
|
||||
<div class="package-box-body-content">
|
||||
<span class="package-box-body-title">Annual Support</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Including any govt fees first year</li>
|
||||
<li>Including Hong Kong registered address</li>
|
||||
<li>Including digital company kit set in </li>
|
||||
<li>Numstation app</li>
|
||||
<li>Unlimited CR E-Submission</li>
|
||||
</ul>
|
||||
<p class="package-box-body-desc">*Register fee :HK$ 9,500</p>
|
||||
</div>
|
||||
<hr class="package-box-body-separator">
|
||||
<div class="package-box-body-content">
|
||||
<span class="package-box-body-title">Optional</span>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">3-5 Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
+HK$1,000<span>/year</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional1">
|
||||
<label for="optional1"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">6-10 Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
+HK$2,000<span>/year</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional2">
|
||||
<label for="optional2"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">10+ Shareholders</div>
|
||||
<div class="optional-list-row-price">
|
||||
<span>be discussed</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional3">
|
||||
<label for="optional3"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body-optional-list">
|
||||
<div class="optional-list-row">
|
||||
<div class="optional-list-row-title">Auto payroll</div>
|
||||
<div class="optional-list-row-price">
|
||||
<span>be discussed</span>
|
||||
</div>
|
||||
<div class="toggle-switch2">
|
||||
<input type="checkbox" id="optional4">
|
||||
<label for="optional4"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout') }}" class="btn mx-auto btn-get-started">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="package-box mx-3">
|
||||
<div class="package-box-header">
|
||||
<h3 class="header-title">
|
||||
3 year Comp Sec
|
||||
<span class="d-block">(2 Shareholders)</span>
|
||||
</h3>
|
||||
<div class="package-box-price">
|
||||
<div class="package-box-price-inner">
|
||||
HK<span class="bigger-text">$19,100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="package-box-body first">
|
||||
<span class="package-box-body-title">Annual Support</span>
|
||||
<ul class="package-box-body-list">
|
||||
<li>Including any govt fees first year</li>
|
||||
<li>Including Hong Kong registered address</li>
|
||||
<li>Including digital company kit set in </li>
|
||||
<li>Numstation app</li>
|
||||
<li>Unlimited CR E-Submission</li>
|
||||
</ul>
|
||||
<hr class="package-box-separator">
|
||||
<span class="package-box-body-title">Optional</span>
|
||||
</div>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout') }}" class="btn mx-auto btn-get-started">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="title-wrapper w-100">
|
||||
<h2 class="page-title">Digital Bookkeeping</h2>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section row">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Demi</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$14,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$1,283<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Short</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$18,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$1,650<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Tall</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$22,000<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">HK$2,420<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="digital-bookkeeping-section-box">
|
||||
<span class="digital-bookkeeping-section-box-title">Grange</span>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">Custom<span>/year</span></div>
|
||||
</div>
|
||||
<div class="digital-bookkeeping-section-box-select">
|
||||
<img class="img-fluid" src="{{ asset('themes/tailwind/images/check-black.png') }}">
|
||||
<div class="digital-bookkeeping-section-box-select-title">Custom<span>/month</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between mb-3 mx-4 mobile-flex-column">
|
||||
<button type="button" class="btn grey-btn py-20 mb-2 change-form-step" data-target="4">Previous</button>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-end mobile-flex-column w-100">
|
||||
<button type="button" class="btn blue-btn py-20 mx-2 mb-2" data-bs-toggle="modal" data-bs-target="#saveDraftModal">Save as draft</button>
|
||||
<a href="{{ route('wave.user.company-secretary.checkout') }}" class="btn blue-btn py-20 mx-2 mb-2">Next</a>
|
||||
<a href="{{ route('wave.user.company-secretary.index') }}" class="btn red-btn py-20 mx-2 mb-2">Leave</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Saved Draft Modal --}}
|
||||
<div class="modal fade validation-modal" id="saveDraftModal" tabindex="-1" aria-labelledby="saveDraftModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-740px modal-dialog-centered">
|
||||
<div class="modal-content mx-auto w-100">
|
||||
<div class="modal-body p-0">
|
||||
<p class="text-center message-title">Data saved successfully</p>
|
||||
<p class="text-center message">You can edit this draft on [Document draft] panel.</p>
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn blue-btn mx-2" data-bs-dismiss="modal">Check</button>
|
||||
<button type="button" class="btn red-btn mx-2" data-bs-dismiss="modal">Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('script')
|
||||
<script>
|
||||
$(function() {
|
||||
$('.change-form-step').click(function() {
|
||||
var target = $(this).attr('data-target');
|
||||
|
||||
if (target && $('.form-steps[data-step="' + target + '"]').length) {
|
||||
$('.progress-step').removeClass('active');
|
||||
$('.progress-step').removeClass('done');
|
||||
$('.form-steps-title').hide();
|
||||
$('.form-steps').hide();
|
||||
|
||||
$('.progress-step[data-step="' + target + '"]').addClass('active');
|
||||
$('.form-steps-title[data-step="' + target + '"]').show();
|
||||
$('.form-steps[data-step="' + target + '"]').show();
|
||||
|
||||
$('.progress-step').each(function( index ) {
|
||||
if ($(this).hasClass('active')) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
$(this).addClass('done');
|
||||
}
|
||||
});
|
||||
|
||||
if (target == 5) {
|
||||
$('.card-header').addClass('no-bg-img');
|
||||
$('.card-wrapper').addClass('br-0');
|
||||
}
|
||||
else {
|
||||
$('.card-header').removeClass('no-bg-img');
|
||||
$('.card-wrapper').removeClass('br-0');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.custom-radio-selection .radio-select input[type="radio"]').change(function() {
|
||||
$(this).parents('.custom-radio-selection').find('.radio-select').removeClass('checked');
|
||||
$(this).parent().addClass('checked');
|
||||
});
|
||||
|
||||
$('.number-input-wrapper .number-input-btn.minus').click(function() {
|
||||
var inputValue = parseInt($(this).parents('.number-input-wrapper').find('input').val());
|
||||
if (inputValue !== NaN) {
|
||||
inputValue--;
|
||||
|
||||
if (inputValue <= 0) {
|
||||
$(this).parents('.number-input-wrapper').find('input').val('0');
|
||||
}
|
||||
else {
|
||||
$(this).parents('.number-input-wrapper').find('input').val(inputValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.number-input-wrapper .number-input-btn.plus').click(function() {
|
||||
var inputValue = parseInt($(this).parents('.number-input-wrapper').find('input').val());
|
||||
if (inputValue !== NaN) {
|
||||
inputValue++;
|
||||
$(this).parents('.number-input-wrapper').find('input').val(inputValue);
|
||||
}
|
||||
});
|
||||
|
||||
$('.toggle-switch2 input[type="checkbox"]').change(function() {
|
||||
if ($(this).is(':checked')) {
|
||||
$(this).parents('.optional-list-row').addClass('selected');
|
||||
}
|
||||
else {
|
||||
$(this).parents('.optional-list-row').removeClass('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,317 @@
|
||||
@extends('theme::user.layouts.app') @section('content')
|
||||
<section style="margin-right: 50px;margin-left: 50px;margin-top: 50px;margin-bottom: 50px;">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex justify-content-between align-items-sm-center align-items-md-center align-items-lg-center align-items-xl-center align-items-xxl-center" style="height: 100px;background: linear-gradient(90deg, #7db979, #26bbaa);margin-right: 0px;">
|
||||
<div class="justify-content-start" style="margin-left: 20px;">
|
||||
<div class="col d-sm-flex d-md-flex d-lg-flex d-xl-flex d-xxl-flex align-items-sm-center align-items-md-center align-items-lg-center justify-content-xl-start align-items-xl-center justify-content-xxl-center align-items-xxl-center" style="width: 379px;">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-28.png" style="width: 80px;margin-left: 10px;">
|
||||
<h1 style="font-size: 20px;color: rgb(0,0,0);margin-bottom: 0px;">Resignation of Reserve Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 20px;"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-16.png" style="width: 98px;"></div>
|
||||
</div>
|
||||
<div class="card-body scstyle-15" style="overflow: auto;height: 65vh;">
|
||||
<form>
|
||||
<div style="margin-right: 150px;margin-left: 150px;">
|
||||
<div class="col">
|
||||
<div class="row" style="margin: 0px;">
|
||||
<div class="col-xxl-12" style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<h1 style="font-size: 24px;text-align: center;color: rgb(7,7,7);">Resignation of Reserve Director </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name of Reserve Director(English)</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Name of Reserve Director(Chinese)</h1>
|
||||
</div>
|
||||
<div class="col"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 350px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">HKID / Passport number</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 765px;"><input class="form-control" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 20px;"></div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between justify-content-xxl-start align-items-xxl-center">
|
||||
<div class="d-xxl-flex" style="margin-right: 80px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Date of Resignation</h1>
|
||||
</div>
|
||||
<div class="d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 90px;">
|
||||
<div class="col-xxl-2" style="width: 100px;"><input class="form-control d-xxl-flex" oninput="this.value = this.value.slice(0, 4)" type="number" maxlength="4"style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center; " placeholder="YYYY"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<div>
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xxl-1" style="width: 100px;"><input class="form-control" oninput="this.value = this.value.slice(0, 2)" type="number" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2" placeholder="MM"></div>
|
||||
<div class="col-xxl-1 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: 20px;">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;font-weight: bold;width: auto;">/</h1>
|
||||
</div>
|
||||
<div class="col" style="width: 100px;"><input class="form-control" type="number" oninput="this.value = this.value.slice(0, 2)" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 40px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);padding-left: 12px;width: 100px;text-align: center;" maxlength="2"placeholder="DD"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 0px;margin-top: 20px;">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="background: #F4F7FA;">
|
||||
<div class="container">
|
||||
<div class="row" style="margin-top: 10px;margin-bottom: 10px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Verify documents and identity</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-19.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-21.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 100px;background: url("http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-20.png") center / contain no-repeat;">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-xxl-8">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 20px;">Verification of Director <br>ID / passport</h1>
|
||||
</div>
|
||||
<div class="col d-xxl-flex justify-content-xxl-end"><img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-22.png" style="width: 70px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col">
|
||||
<h1 style="color: rgb(0,0,0);font-size: 24px;">Please upload a copy of the following documents</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="address" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-1">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-1" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257;margin:20px;">Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-1" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center">
|
||||
<div>
|
||||
<h1 id="transferee" style="color: rgb(0,0,0);font-size: 20px;">Proof of address issued within the last three months <br>(Transferee)</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div id="modal-open-2">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-2" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div>
|
||||
<h1 style="text-align: center;font-size: 18px;color: #364257; margin:20px;" >Upload Document</h1>
|
||||
</div>
|
||||
<div class="card" style="border-style: none;">
|
||||
<div class="card-body" style="border-style: none;">
|
||||
<div class="dashed_upload">
|
||||
<div class="wrapper">
|
||||
<div class="drop">
|
||||
<div class="cont">
|
||||
<div class="image-container">
|
||||
<img src="http://127.0.0.1:8000/themes/tailwind/images/clipboard-image-23.png" width="100px" />
|
||||
</div>
|
||||
<div class="tit">
|
||||
Drag and drop files here or choose file.<br>
|
||||
Accepted file types: Doc / PDF / JPG / PNG
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" style="color: #364257; background: #F3CF5D; font-size: 15px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; height: 40px; margin-top: 15px;">Choose File</button>
|
||||
</div>
|
||||
</div>
|
||||
<output id="list"></output>
|
||||
<input id="files" multiple name="files[]" type="file" />
|
||||
</div>
|
||||
</div>
|
||||
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src="js/index.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-between align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Name</h1>
|
||||
</div>
|
||||
<div><input class="form-control" type="text" style="border-color: #364257;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 500px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;margin-bottom: 20px;">
|
||||
<div class="col d-xxl-flex justify-content-start align-items-xxl-center" style="margin-left: 40px;margin-right: 40px;">
|
||||
<div>
|
||||
<h1 style="color: #364257;font-size: 20px;">Document Category</h1>
|
||||
</div>
|
||||
<div style="margin-left: 25px;width: 130.2656px;">
|
||||
<div>
|
||||
<button class="btn btn-primary disabled dropdown-toggle placeholder disabled" aria-expanded="false" data-bs-toggle="dropdown" type="button" style="background: rgba(37,37,37,0);color: var(--bs-gray-dark);border-style: none;width: 129.2656px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;text-align: left;" disabled="">CL </button>
|
||||
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div><button class="btn btn-primary" type="button" style="background: #009B9A;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-right: 10px;" data-bs-dismiss="modal">Save</button></div>
|
||||
<div><button class="btn btn-primary" type="button" style="background: #9B0025;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;border-style: none;width: 200px;margin-left: 10px;" data-bs-dismiss="modal">Cancel</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-2" style="color: #364257;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">UPLOAD</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 30px;">
|
||||
<div class="col d-xxl-flex justify-content-center align-items-xxl-center">
|
||||
<div style="padding-right: 10px;">
|
||||
<div id="modal-open-3">
|
||||
<div class="modal fade" role="dialog" tabindex="-1" id="exampleModal-3" aria-labelledby="exampleModalLabel">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<h6 style="color: #364257;">Your enquiry submitted successfully</h6>
|
||||
</div>
|
||||
<div class="modal-footer d-xxl-flex justify-content-xxl-center align-items-xxl-center"><button style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;" type="button" data-bs-dismiss="modal">Back</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal-3" style="background: #009B9A; border-top-left-radius: 50px; color: white; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Save as draft</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-right: 10px; border-style: none;"><a href="{{ route('wave.user.company-secretary.index') }}"><button type="button" style="background: #009B9A; border-top-left-radius: 50px; border-top-right-radius: 50px; color: white; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Leave</button></a></div>
|
||||
<div><a href="{{ route('wave.user.payment-flow.index') }}"><button type="button" style="color: white; background: #9B0025; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; width: 200px; padding-top: 10px; padding-bottom: 10px; border-style: none;">Next</button></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@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
|
||||
Reference in New Issue
Block a user