index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Banka | Home</title>
<link rel="icon" type="image/x-icon" href="./client/assets/img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./client/assets/css/main.css">
<link rel="stylesheet" type="text/css" href="./client/assets/css/responsive.css">
</head>
<style>
#app {
display: none;
}
.loader {
border: 3px solid #f3f3f3;
border-top: 3px solid teal;
border-radius: 50%;
width: 35px;
height: 35px;
animation: spin 1s linear infinite;
position: absolute;
top: 40%;
left: 48%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media only screen and (max-width : 768px) {
.loader {
left: 45%;
}
}
</style>
<body>
<div id="app">
<div class="hero hero-landing">
<nav id="nav">
<div id="logo">
<a href="index.html">
<img src="./client/assets/img/logo.png" alt="logo">
</a>
</div>
<div class="nav-links">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="./client/views/contact-us.html">Contact</a></li>
<li><a href="./client/views/about.html">About</a></li>
<li><a href="./client/views/help.html">Help</a></li>
<a href="./client/views/login.html"><li class="button button-green">Login</li></a>
</ul>
<!-- Hamburger links -->
<a href="#" onclick="event.preventDefault();openSlideMenu(this)">
<span class="open-slide">
<i class="fas fa-align-right fa-2x"></i>
</span>
</a>
<!-- Toast -->
<div class="toast success">
<img src="./client/assets/img/check-mark.gif" alt="check-mark">
</div>
<div class="toast error">
<img src="./client/assets/img/cross-mark.jpg" alt="cross-mark">
</div>
<!-- Side nav -->
<div id="side-menu" class="side-nav">
<li class="active"><a href="index.html">Home</a></li>
<li id="account-link"><a href="#">My account</a></li>
<li><a href="./client/views/contact-us.html">Contact</a></li>
<li><a href="./client/views/about.html">About</a></li>
<li><a href="./client/views/help.html">Help</a></li>
<li id="login-link"><a href="./client/views/login.html">Login</a></li>
<li id="logout-link"><a href="#">Logout</a></li>
<br />
<hr />
<div style="text-align: center">
<a href="./client/views/new-account.html">
<button
class="button button-green"
style="padding: 0.4em 1.5em;font-size: 1.2em;font-weight: 200"
>
Create account
</button>
</a>
</div>
</div>
</div>
</nav>
<div class="hero-copy">
<h1>We've got you...</h1>
<p>Open a secure account today with Banka.</p>
<div>
<a
href="./client/views/new-account.html"
class="button button-green"
style="padding: 0.3em 1em;font-weight: 200;"
>
Create account
</a>
</div>
</div>
</div> <!-- end hero -->
<div class="main">
<section>
<div class="justify-center">
<div class="main-content header">
<header>
<h2 class="center">Let's bank</h2>
</header>
</div>
</div>
<div class="main-content landing">
<article>
<h2>Get an account that suits you!</h2>
<p>We believe that the beauty of life lies in the little things that give us a better expression of ourselves, make us more social and connect emotionally.</p>
<a href="./client/views/new-account.html">
<button class="button button-brown">GET STARTED TODAY</button>
</a>
</article>
</div>
</section>
<section class="main-showcase container">
<header>
<h2 class="center">Why choose Banka?</h2>
</header>
<div class="main-showcase-content three-equal-sized-columns grid">
<div class="why-us center">
<span style="color: #3f4446">
<i class="fas fa-tachometer-alt fa-3x"></i>
</span>
<article>
<h3>Quick & Easy</h3>
<p>Get an account in the shortest amount of time in just two steps.
<em>Banka</em> provides an elegant
user interface that makes it all simple.</p>
</article>
</div>
<div class="why-us center">
<span style="color: #3f4446">
<i class="fas fa-universal-access fa-3x"></i>
</span>
<article>
<h3>Accessible</h3>
<p>Manage your account from anywhere, at anytime.
You are in full control.</p>
</article>
</div>
<div class="why-us center">
<span style="color: #3f4446">
<i class="fas fa-shield-alt fa-3x"></i>
</span>
<article>
<h3>Secure <i class="fas fa-percent"></i></h3>
<p>With <em style="color: rgb(0, 124, 195)"><b>Banka</b></em> customers' confidentiality is not taken lightly. Our concern about security is topnotch.</p>
</article>
</div>
</div>
<div class="final-cta center">
<a href="./client/views/new-account.html">
<button class="button button-brown">GET STARTED TODAY</button>
</a>
</div>
</section>
</div> <!-- end main-->
<div class="footer">
<footer class="container">
<p>© 2019 All rights reserved.</p>
</footer>
</div>
</div>
<script>
let linkHref = 'user/profile';
const pageContent = document.querySelector('#app')
document.addEventListener("DOMContentLoaded", function() {
let hero = document.querySelector('.hero');
hero.style.height = `${window.innerHeight}px`;
renderLoader(pageContent, "block")
// Check if user is logged in
const token = localStorage.getItem('token');
if (token) {
// side nav link
const accountLink = document.querySelector('#account-link');
accountLink.style.display = 'list-item';
const loginLink = document.querySelector('#login-link');
loginLink.style.display = 'none';
const logoutLink = document.querySelector('#logout-link');
logoutLink.style.display = 'list-item';
logoutLink.addEventListener('click', (e) => {
closeSlideMenu();
return logout(e);
});
const nav = document.querySelector('#nav');
const list = nav.children[1].children[0].children;
const url = new URL(env.url());
fetch(`${url.href}/user/type/`, {
headers: {
'Content-Type': 'application/json',
'x-access-token': token
}
})
.then(response => response.json())
.then(json => {
if (!json.error) {
switch(json.data.type) {
case 'admin':
linkHref = 'admin/home';
break;
case 'staff':
linkHref = 'staff/home';
break;
default: linkHref = 'user/profile';
}
}
})
.catch(error => showToast(false, 'Please log in again.'));
list[list.length - 1].addEventListener("click", () => {
console.log(linkHref)
location.assign(`${ghPagesUrlRedirect(location.origin)}/client/views/${linkHref}.html`);
});
list[list.length - 1].attributes.href.textContent = '#';
list[list.length - 1].firstChild.innerHTML = 'my account';
// Add url path to side nav
accountLink.firstChild.addEventListener("click", (e) => {
e.preventDefault();
location.assign(`${ghPagesUrlRedirect(location.origin)}/client/views/${linkHref}.html`);
});
// Add logout button
const element = document.createElement('li');
const children = document.createElement('div');
children.innerHTML = `
<img id="avatar"
onclick="openDropDown(true)"
class="dropbtn"
src="./client/assets/img/avatar.png"
/>
<!-- Dropdown content -->
<div class="dropdown-content" id="dropdown">
<a href="#" onclick="event.preventDefault();return logout();">
<i class="fas fa-info-circle"></i>
Logout
</a>
</div>
`;
children.style.position = 'absolute';
children.style.top = 0;
element.appendChild(children);
element.id = 'logout';
document.querySelector('.nav-links').children[0].appendChild(element);
// end session after 15mins
let timer = setTimeout(() => {
localStorage.removeItem('token');
redirect.home();
}, 900000);
clearTimeout(timer);
}
});
</script>
<script src="./client/assets/js/main.js"></script>
<script src="./client/assets/js/utils.js"></script>
<script src="./client/assets/js/middleware.js"></script>
<script src="./client/assets/js/partials.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
</body>
</html>