cashbac-component
Version:
Front End depedencies for CB Merchant Webapp
892 lines (846 loc) • 31.4 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Cashbac Component</title>
<link rel="stylesheet" href="../../css/stylesheet.css">
<script src="../../js/bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css">
<link rel="icon" href="assets/images/app-icon.ico" type="image/x-icon">
<link rel="shortcut icon" href="assets/images/app-icon.ico" type="image/x-icon">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
<style>
@media screen and (max-width: 480px) {
h1 {
font-size: 25px;
}
}
.navigation {
position: fixed;
left: 0;
top: 0;
background: #26ade4;
width: 200px;
height: 100%;
}
.content {
position: absolute;
left: 200px;
right: 11px;
padding: 30px;
}
@media screen and (max-width: 480px) {
.navigation {
z-index: 2;
left: -200px;
}
.content {
left: 0;
top: 60px;
}
}
ul li {
list-style: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
ul li a {
font-size: 20px;
color: white;
}
ul li:hover {
background: white;
}
ul li:hover a {
color: #26ade4;
}
.pushToTop30 {
margin-top: 30px;
}
.pushToBottom30 {
margin-bottom: 30px;
}
.guideText {
font-size: 18px;
}
@media screen and (max-width: 480px) {
.guideText {
line-height: 28px;
}
.header--mobile {
background: #26ade4;
position: fixed;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
z-index: 2;
text-align: center;
}
.header--mobile h1 {
color: white;
letter-spacing: 1px;
}
code {
font-size: 12px;
}
}
#backToTop {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: #26ade4;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#backToTop:hover {
background-color: #555;
}
</style>
<script>
function ToAnimation() {
document.getElementById("animationTutorial").scrollIntoView();
}
function ToThumbanail() {
document.getElementById("thumbnailTutorial").scrollIntoView();
}
function ToModal() {
document.getElementById("modalTutorial").scrollIntoView();
}
function ToTab() {
document.getElementById("tabTutorial").scrollIntoView();
}
function ToForm() {
document.getElementById("formTutorial").scrollIntoView();
}
</script>
</head>
<body onscroll="scrollFunction()">
<div>
<div class="header--mobile">
<h1>
Cashbac
</h1>
</div>
<div class="navigation">
<ul>
<li>
<a href="#" onclick="ToAnimation()">
Animation
</a>
</li>
<li>
<a href="#" onclick="ToForm()">
Form
</a>
</li>
<li>
<a href="#" onclick="ToModal()">
Modal
</a>
</li>
<li>
<a href="#" onclick="ToTab()">
Tab
</a>
</li>
<li>
<a href="#" onclick="ToThumbanail()">
Thumbnail
</a>
</li>
</ul>
</div>
<div class="content">
<div class="pushToBottom30">
<h1 class="pushToBottom30">
Cashbac Component
</h1>
<div class="pushToBottom30">
<span class="guideText">
A comprehensive UI Module for building website easily. Built with enthusiast and love.
</span>
</div>
<div class="pushToBottom30">
<h1>
Installation
</h1>
</div>
<code >
npm install --save cashbac-component
</code>
</div>
<div id="animationTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
<h1>Animation</h1>
</div>
<div class="form pushToBottom30">
</div>
</div> <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>
<div id="modalTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
<h1>Modal</h1>
</div>
<Button class="button--large button--primary pushToBottom30" onclick="showModal('sampleModal')">
Show Modal
</Button>
</div>
<div class="modal-cashbac" id="sampleModal">
<div class="modal-cashbac__content">
<div class="modal-cashbac__header">
<div class="text">
<div class="title">
<h3>
Populated Data from Zomato
</h3>
</div>
<div class="sub-title">
<span>Give checklist if you think the data is valid</span>
</div>
</div>
<div class="action" onclick="hideModal('sampleModal')">
<span>
close
</span>
</div>
</div>
<div class="modal-cashbac__body">
<div class="tab">
<div class="tablinks active" onclick="openTab(event, 'Small')">Informations</div>
<div class="tablinks" onclick="openTab(event, 'Medium')">Photos</div>
<div class="tablinks" onclick="openTab(event, 'Large')">Menu</div>
</div>
<div class="fill">
<div class="list">
<div class="list__header">
<div class="text">
<h3>
</h3>
</div>
<div class="icon">
</div>
</div>
<div class="list__body">
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="modal-cashbac__footer">
<div class="left">
<span>
Check other tabs before you populate
</span>
</div>
<div class="right">
<Button class="button--large button--primary button--rounded">
Next
</Button>
</div>
</div>
</div>
</div>
<div id="tabTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
<h1>Tab pill</h1>
</div>
<div class="tab--pill--horizontal pill--small" style="margin-bottom: 30px;">
<div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Ambience')" id="defaultPillSmall">Ambience</div>
<div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Food')">Food</div>
<div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Menu')">Menu</div>
</div>
<div class="tab--pill--horizontal pill--medium" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultPillMedium">Ambience</div>
<div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
<div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>
<div class="tab--pill--horizontal pill--large" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultPillLarge">Ambience</div>
<div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
<div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>
<div class="tab--pill--vertical pill--small" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultVerticalPillSmall">Ambience</div>
<div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
<div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>
<div id="Ambience" class="tabcontentfirst">
Ambience
</div>
<div id="Food" class="tabcontentfirst">
Food
</div>
<div id="Menu" class="tabcontentfirst">
Menu
</div>
<script>
</script>
<div class="pushToBottom30 pushToTop30">
<h1>Tab</h1>
</div>
<div class="tab tab--small" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
<div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
<div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>
<div class="tab tab--medium" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
<div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
<div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>
<div class="tab tab--large" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
<div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
<div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>
<div class="tab tab--small tab--around" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
<div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
<div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>
<div class="tab tab--small tab--between" style="margin-bottom: 30px;">
<div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
<div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
<div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>
<div id="Detail" class="tabcontentsecond">
Detail
</div>
<div id="Terminal" class="tabcontentsecond">
Terminal
</div>
<div id="BeaconStore" class="tabcontentsecond">
Beacon Store
</div>
</div>
<div id="thumbnailTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
<h1>Thumbnail</h1>
</div>
<div class="thumbnail" id="thumbnail">
<div class="thumbnail__header">
<span class="photo-total">
Ambien
<span class="number">
(166 Photos)
</span>
</span>
<span class="photo-action">
<span class="arrange-thumbnail" data-target="thumbnail-body">
Arrange
</span>
<span class="edit-thumbnail" data-target="thumbnail-body">
Edit
</span>
<span class="upload-thumbnail" data-target="thumbnail-body">
Upload
</span>
</span>
</div>
<div class="thumbnail__body" id="thumbnail-body">
<div class="image__item">
<img data-src="assets/images/img_forest.jpg"/>
<div class="thumbnail">
<img data-src="assets/images/img_forest.jpg"/>
<span class="text">
Thumbnail
</span>
</div>
<div class="action">
A
</div>
</div>
<div class="image__item">
<img data-src="assets/images/img_forest.jpg"/>
<div class="thumbnail">
<img data-src="assets/images/img_forest.jpg"/>
<span class="text">
Thumbnail
</span>
</div>
</div>
<div class="image__item">
<img data-src="assets/images/img_forest.jpg"/>
<div class="thumbnail">
<img data-src="assets/images/img_forest.jpg"/>
</div>
</div>
<div class="image__item">
<img data-src="assets/images/img_forest.jpg"/>
<div class="thumbnail">
<img data-src="assets/images/img_forest.jpg"/>
<span class="text">
Thumbnail
</span>
</div>
</div>
<div class="scroll-down">
Scroll Down
</div>
</div>
<div class="thumbnail__footer">
<Button class="button--large button--primary" id="id-of-button-to-open-it">
Save
</Button>
<Button class="button--large button--secondary">
cancel
</Button>
</div>
</div>
</div>
<script>
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
</script>
</div>
</div>
<button onclick="topFunction()" id="backToTop" title="Go to top">Top</button>
</body>
</html>