cashbac-component
Version:
Front End depedencies for CB Merchant Webapp
194 lines (185 loc) • 5.78 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>{{ title }}</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>
{% block content %}{% endblock %}
</div>
</div>
<button onclick="topFunction()" id="backToTop" title="Go to top">Top</button>
</body>
</html>