dashboard.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/dashboard.css">
<title>Wizdwarfs</title>
</head>
<body>
<div class='main-dashboard-div'>
<nav class="navbar navbar-expand-md navbar-light custom-navbar">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" alt="Logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown" style="position: absolute;left: 37pc;">
<ul class="navbar-nav">
<li class="nav-item active pl-3">
<a class="nav-link" href="/dashboard">
<i class="fa fa-home icon-light" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-envelope" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/messages" title="Private. These message will dispear after few seconds."><i class="fa fa-envelope-o" aria-hidden="true"></i> Private </a>
<a class="dropdown-item" href="/messages" title="Gossips"> <i class="fa fa-comments-o" aria-hidden="true"></i> Public </a>
</div>
</li>
<li class="nav-item dropdown pl-3">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item active" href="/dashboard/profile" title="User will edit any information in the profile"><i class="fa fa-sliders" aria-hidden="true"></i>
Edit Your Profile
</a>
<a class="dropdown-item" href="/dashbaord/setting" title="User Preferences "><i class="fa fa-cogs" aria-hidden="true"></i>
Preferences
</a>
<a class="dropdown-item" href="/dashboard/dvault" title="All your content store hereby"><i class="fa fa-lock" aria-hidden="true"></i>
Keygen Manger
</a>
<a class="dropdown-item" href="/logout" title="Lock the account"><i class="fa fa-sign-out icon icon-light"
aria-hidden="true"></i>Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<form enctype="multipart/form-data" action="/dashboard" method="post" class="dashboard-form">
<div class="container main-container">
<div class="infection-field">
<h4>Choose the type of infection</h4>
<select class="custom-select" id="inputGroupSelect01" name="choose" required>
<option selected> Genome Tracer </option>
<option value="1"> COVID-19 </option>
<option value="2"> Flvi Dengue </option>
<option value="3"> Bambli Ebola </option>
<option value="4"> Zika Virus </option>
<option value="5"> MERSS </option>
</select>
</div>
<div class="file-upload-field">
<input type="file" id="file" id="exampleFormControlFile1" name="fileSeq" />
<label for="file" class="btn-3">
<span class="selected-file">
<i class="fa fa-file-text-o icon" aria-hidden="true"></i>
Upload Your Gnome
</span>
</label>
</div>
<div class="sign">
<label>
<input type="checkbox" id="signed" data-toggle="toggle" data-on="<i class='fa fa-user' aria-hidden='true'></i>" data-off="<i class='fa fa-user-secret' aria-hidden='true'></i>"data-onstyle="success" data-offstyle="danger" data-style="mode" name="signed"/>
Signed Message?
</label>
<input class="signed_message" name="status" />
<button class="btn btn-light verified" type="button"></button>
<input class="public_address" name="address"/>
</div>
<div class="location-div">
<button class="btn btn-light" type="button" title="press marker if you want to activate your current location">
<i class="fa fa-map-marker" aria-hidden="true"></i>
</button>
<input type="text" class="small-div" name="geo-marker" id="geo-marker" readonly/>
</div>
<button type="submit" class="btn btn-success mb-2 submit-button" data-toggle="popover"
title="submit your genetic file " disabled>
<i class="fa fa-check-circle" aria-hidden="true"></i>
</button>
</form>
</div>
<!-- <div class="search-container" style="display: flex;position: absolute;top: 6pc;left: 68pc;">
<form class="search-form" id="search-form" action="" method="post">
<button type="submit" class="searched" style="position: absolute;left: 9pc;border: none;background: transparent;color: slategray;z-index: 2;visibility: hidden;">
<i class="fa fa-check"></i>
</button>
<input type="text" placeholder="Search..." id="searched" autocomplete="on" class="peers" style="position: inherit;border: none;border-radius: 10pc;color: slategray;">
</form>
</div> -->
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fortmatic@latest/dist/fortmatic.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.min.js"></script>
<script src="/js/dashboard.js"></script>
<script src="/js/additional.js"></script>
<script type="text/javascript">
const parent_div = document.getElementsByClassName('sign')[0];
const para_div = document.getElementsByClassName('signed_message')[0];
const verifiedBtn = document.getElementsByClassName('verified')[0];
const submitBtn = document.getElementsByClassName('submit-button')[0];
let price = 0;
$('#signed').on('change', () =>{
console.log("props:" , ($('#signed').prop('checked')));
if ($('#signed').prop('checked', true)){
// create div, icon and button
const div = document.createElement('div');
const icon = document.createElement('i');
const _bs0 = document.createElement('button');
const bicon = document.createElement('i');
const star1 = document.createElement('i');
const star2 = document.createElement('i');
const star3 = document.createElement('i');
// adjust button props
verifiedBtn.id = 'fortmatic';
verifiedBtn.style.visibility = 'visible';
verifiedBtn.style.position ='relative';
verifiedBtn.style.top = '-3px';
verifiedBtn.style.left = '-222px';
verifiedBtn.style.color = 'lawngreen';
verifiedBtn.style.boxShadow = '1px 1px whitesmoke';
verifiedBtn.style.transformStyle = 'preserve-3d';
verifiedBtn.style.zIndex = '2';
//adjust icon properties
icon.className = 'fa fa-check-circle';
icon.ariaHidden = true;
// icon render
verifiedBtn.appendChild(icon);
// submit button props
submitBtn.style.marginTop = '17px';
// user action message
para_div.style.visibility = 'visible';
para_div.value = 'The message have been signed. Please verify your message.';
para_div.style.position = 'relative';
para_div.style.width = '433px';
para_div.style.left = '41px';
para_div.style.border = '2px whitesmoke none';
para_div.style.borderRadius = '13px';
para_div.style.top = '-31px';
_bs0.className = 'low';
_bs0.style.position = 'absolute';
_bs0.style.top = '79px';
_bs0.style.left = '3pc';
_bs0.style.border = 'none';
_bs0.style.cursor = 'pointer';
_bs0.type = 'button';
bicon.className = 'fa fa-star';
bicon.ariaHidden = true;
bicon.style.color = 'slategray';
star1.className = 'fa fa-star';
star1.ariaHidden = true;
star1.style.color = 'slategray';
star1.style.position = 'absolute';
star1.style.top = '84px';
star1.style.left = '10pc';
star2.className = 'fa fa-star';
star2.ariaHidden = true;
star2.style.color = 'slategray';
star2.style.position = 'absolute';
star2.style.top = '84px';
star2.style.left = '18pc';
star3.className = 'fa fa-star';
star3.ariaHidden = true;
star3.style.color = 'slategray';
star3.style.position = 'absolute';
star3.style.top = '84px';
star3.style.left = '26pc';
// newly created div render
div.className = 'actions';
div.appendChild(para_div);
div.appendChild(verifiedBtn);
_bs0.appendChild(bicon);
div.appendChild(_bs0);
div.appendChild(star1);
div.appendChild(star2);
div.appendChild(star3);
// message props
parent_div.style.position = 'relative';
parent_div.style.left = '15px';
parent_div.style.width = '500px';
parent_div.style.boxShadow = '5px 5px whitesmoke';
parent_div.style.zIndex = '2';
parent_div.style.borderRadius = '48px';
parent_div.style.top = '-24px';
parent_div.style.display = 'grid';
// message box render
parent_div.appendChild(div);
document.getElementsByClassName('low')[0].addEventListener('click', (event) =>{
document.getElementsByClassName('fa fa-star')[0].style.color = 'yellow';
price = 20;
alert('Congratulations ! cupons active');
});
let stars = document.getElementsByClassName('fa fa-star')[0];
let blink = null;
clearTimeout(blink);
blink = setInterval(twlight, 1000);
function twlight() {
if(star1.style.color === 'slategray'){
star1.style.color = 'yellow';
}else if (star1.style.color === 'yellow'){
star1.style.color = 'slategray';
}
if (star2.style.color === 'slategray' && star1.style.color === 'slategray') {
star2.style.color = 'yellow';
}else if (star1.style.color === 'yellow'){
star2.style.color = 'slategray';
}
if (star3.style.color === 'slategray' && star2.style.color === 'slategray') {
star3.style.color = 'yellow';
}else if (star2.style.color === 'yellow'){
star3.style.color = 'slategray';
}
}
}
if ($('#signed').prop('checked', false)) {
parent_div.children[0].style.visibility = 'hidden';
console.log("checked false");
}
});
</script>
<script type="text/javascript">
// verified button
const vbtn = document.getElementsByClassName('verified')[0];
const address = document.getElementsByClassName('public_address')[0];
// Keys
const FORTMATIC_API_KEY = 'pk_test_7B12425D6845E31A';
const FORTMATIC_API_Prod = 'pk_live_FB9BC8CDD0A5884D';
const ToAddress = '0x13428695c639da47bfef6dd7238dc8d8a675aba6';
// verified button event
vbtn.addEventListener('click', ()=>{
// additional params and objects such as fortmatic and web3js
let fsdk = new Fortmatic(FORTMATIC_API_Prod);
let web3eth = new Web3(fsdk.getProvider());
if(price === 0){ console.log("new price:", price); price = 70;}
// ether balance pay for signed message
let Tovalue = web3eth.utils.toWei(price.toString(), 'ether');
let accountLogin;
// if user have fortmatic access
if(fsdk.getProvider().isFortmatic){
// then active fortmatic api
// web3eth.currentProvider.enable = true;
fsdk.user.login().then(()=>{
// user login credentials
accountLogin = fsdk.user.isLoggedIn();
// user fortmatic account created from user 'email address'
fsdk.configure({
primaryLoginOption: 'email'
}).then(()=>{
// if user have email account created and also login then verified button props
if (accountLogin){
vbtn.style.visibility = 'hidden';
// input props
address.style.visibility = 'visible';
address.style.position = 'absolute';
address.style.zIndex = '2';
address.style.top = '44px';
address.style.left = '74px';
address.style.borderRadius = '12px';
address.style.border = '2px whitesmoke none';
address.style.boxShadow = '5px 5px whitesmoke';
address.style.transformStyle = 'preserve-3d';
address.style.top = '79px';
address.style.width = '416px';
address.readOnly = true;
// get user account and open wallet for transaction
web3eth.eth.getAccounts().then((account)=>{
// transact request object
let tnxParam = {
from: account[0],
to : ToAddress,
value : Tovalue,
};
web3eth.eth.getBalance(account[0]).then((balance)=>{
let tnx = balance < Tovalue ? true : false;
if (!tnx){ alert('Transaction is not possible , because you have low balance'); return}
})
// get coinbase addresss for market and other transact activities
web3eth.eth.getCoinbase().then((coinbase)=>{
address.value = tnxParam.from;
fsdk.user.deposit().then(()=>{
web3eth.eth.sendTransaction(tnxParam).once('transactionHash', (hash) => {}).once('receipt', (receipt) => {
alert(' Congratulations , Transaction is almost completed. ');
submitBtn.removeAttribute('disabled');
});
}).catch(()=>{
alert("Transaction is not completed because of low balance");
});
}).catch((error)=>{
alert('Make sure your address linked with coinbase', coinbase);
});
}).catch(()=>{
alert(" Wrong Credentials submitted ");
});
}
});
}).catch(()=>{
alert("No Credentials submitted !");
});
}
});
</script>
<!-- <script>
const _p01 = document.getElementsByClassName('search-container')[0];
const _b01 = document.getElementsByClassName('searched')[0];
_p01.addEventListener('change', (event)=>{
_b01.style.visibility = 'visible';
});
</script> -->
</body>
</html>