cashbac-component
Version:
Front End depedencies for CB Merchant Webapp
443 lines (433 loc) • 16.2 kB
HTML
<div id="formTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
<h1>Form</h1>
</div>
<div class="form pushToBottom30">
<div class="form__header">
<div>
<h3 class="title">Outlet Information</h3>
<span class="sub-title">Fill below form of your detail outlet</span>
</div>
<div style="display:flex;">
<div style="margin-right:20px;">
<label class="switch">
<input type="checkbox">
<span class="slider">
<span class="idle" id="idleOutletInformation">
Public
</span>
<span class="active d-none" id="activeOutletInformation">
Private
</span>
</span>
</label>
</div>
<div>
<label class="switch">
<input type="checkbox">
<span class="slider round">
<span class="idle" id="idleOutletInformation">
Invisible
</span>
<span class="active d-none" id="activeOutletInformation">
Visible
</span>
</span>
</label>
</div>
</div>
</div>
<div class="form__body">
<div class="row column--2">
<div class="horizontal">
<div class="form__label--horizontal">
<label>First Name</label>
</div>
<div class="form__input--error">
<input type="text" class="error__field" placeholder="example: Andrew" />
<span class="error__text">
First Name should be filled in
</span>
</div>
</div>
<div class="horizontal">
<div class="form__label--horizontal">
<label>Last Name</label>
</div>
<div class="form__input--success">
<input type="text" class="success__field" placeholder="example: Condolha" />
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="form__label--vertical">
<label>Outlet Name</label>
</div>
<div class="form__input--error">
<input type="text" class="error__field" placeholder="example: Sinarmas" />
<span class="error__text">
Outlet should be filled in
</span>
</div>
</div>
<div class="vertical">
<div class="form__label--vertical">
<label>Phone Number</label>
</div>
<div>
<input type="text" placeholder="example: 08123455432"/>
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="form__label--vertical">
<label>Number of POS</label>
</div>
<div>
<input type="text" placeholder="example: 17181"/>
</div>
</div>
<div class="vertical">
<div class="form__label--vertical">
<label>Postal Code</label>
</div>
<div>
<input type="text" placeholder="example: 17181"/>
</div>
</div>
</div>
<div class="row column--1">
<div>
<div>
<strong>
Do you want to use the same bank account that you set in the merchant section ?
</strong>
<label class="radio-container" style="margin-top:10px;">
<span class="text">Yes</span>
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="radio-container">
<span class="text">No</span>
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="row column--1">
<div>
<strong>
Your hobi ?
</strong>
<label class="checkbox-container" style="margin-top:10px;">
<span class="text">Yes</span>
<input type="checkbox" checked="checked" name="checkbox">
<span class="checkmark"></span>
</label>
<label class="checkbox-container">
<span class="text">No</span>
<input type="checkbox" name="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="text-vertical__title">
Bank Name
</div>
<div class="text-vertical__content">
Bank Central Asia
</div>
</div>
<div class="vertical">
<div class="text-vertical__title">
Account Name
</div>
<div class="text-vertical__content">
PT. Hari & Maemunah Bersatu
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="text-vertical__title">
Bank Branch
</div>
<div class="text-vertical__content">
Padalarang, Bandung
</div>
</div>
<div class="vertical">
<div class="text-vertical__title">
Account Number
</div>
<div class="text-vertical__content">
198237563
</div>
</div>
</div>
<div class="row column--1">
<div class="vertical">
<div class="text-vertical__title">
Email for Payment Report
</div>
<div class="text-vertical__content">
haandma@haandma.com
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="form__label--vertical">
<label>Name</label>
</div>
<div>
<input type="text"/>
</div>
</div>
<div class="vertical">
<div class="form__label--vertical">
<label>Password</label>
</div>
<div>
<input type="password"/>
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="form__label--vertical">
<label>Phone Number</label>
</div>
<div>
<input type="text"/>
</div>
</div>
<div class="vertical">
<div class="form__label--vertical">
<label>Password Confirm</label>
</div>
<div>
<input type="password"/>
</div>
</div>
</div>
<div class="row column--2">
<div class="vertical">
<div class="form__group">
<div class="form__label--vertical">
<label>Latitude</label>
</div>
<div>
<input type="text">
</div>
</div>
<div>
<div class="form__label--vertical">
<label>Longitude</label>
</div>
<div>
<input type="text">
</div>
</div>
</div>
<div class="vertical">
<div class="form__label--vertical">
<label>Address</label>
</div>
<div>
<textarea style="height:126px;">
</textarea>
</div>
</div>
</div>
<div class="list" style="margin-top:30px;">
<div class="list__header">
<h3>
Operation Hours
</h3>
</div>
<div class="list__body">
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Sunday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Monday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Tuesday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Wednesday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Thursday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Friday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
<div class="time">
<div class="day">
<input type="checkbox"/>
<span class="day__name">Saturday</span>
</div>
<div class="hours">
<div class="hours__from">
<input type="time">
</div>
<div class="hours__separator">
<span>-</span>
</div>
<div class="hours__to">
<input type="time">
</div>
</div>
</div>
</div>
</div>
<div class="list" style="margin-top:30px;">
<div class="list__header">
<h3>Operation Hours</h3>
</div>
<div class="list__body">
<div class="list__item">
<div class="text">
<strong>
Sunday - Monday
</strong>
</div>
<div class="icon">
<span>Add</span>
<span>Delete</span>
</div>
</div>
<div class="list__item">
<div class="text">
<strong>
Tuesday - Wednesday
</strong>
</div>
<div class="icon">
<span>Add</span>
<span>Delete</span>
</div>
</div>
<div class="list__item">
<div class="text">
<strong>
Thursday - Friday
</strong>
</div>
<div class="icon">
<span>Add</span>
<span>Delete</span>
</div>
</div>
</div>
<div class="list__footer">
<div>
Add Other Operation Hour
</div>
</div>
</div>
</div>
<div class="form__footer">
<Button class="button--large button--primary button--spinner">
<span>
Save
</span>
</Button>
<Button class="button--large button--secondary">
Cancel
</Button>
</div>
</div>
</div>