computation.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 href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/computation.css">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"
integrity="sha512-aPhrlLlp7Mr8g+MVw6/wMD8PjqqzRNhSM8pHDyyJPmUTJMzKxMmxrjauzQforOaAegN3CIKUTKXJyLwFD57RtA=="
crossorigin="anonymous"></script>
<title>Wizdwarfs</title>
</head>
<body>
<div class='main-dashboard-div'>
<nav class="navbar navbar-expand-md navbar-light custom-navbar" style=" background-color: #ededed;display: flex;">
<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 Conversation"><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="Edit Profile"><i class="fa fa-sliders" aria-hidden="true"></i>
Edit Your Profile
</a>
<a class="dropdown-item" href="/dashbaord/setting" title="Custom Settings "><i class="fa fa-cogs" aria-hidden="true"></i>
Preferences
</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>
</div>
<div class="risk-div">
<div class="line"></div>
</div>
<div class="window" style="position: relative; top: 2px; width: 100%; height: 100%;">
<canvas></canvas>
</div>
<div class="card text-center" style="position: relative; left: 1px; width:204%; border-radius: 18px; border:2px silver dotted; z-index:2; top:-210px; display:contents;">
<div class="card-header">
Calculation Completed within seconds...
</div>
<div class="card-body">
<h5 class="card-title"> Genetica Sequel's </h5>
<p class="card-text">
<div class="progress">
<div class="progress-done" data-done="100">
<span> <small> Initial Genome Trace Value of your body (GTV) </small> {{.Probab_Event}}. <small>
Results are calculate within a seconds....
</small> </span>
</div>
</div>
<div class="list-groups">
<ul class="list-group">
<li class="list-group-item">
DNA Analysis
<p>
<button class="btn btn-dark process" data-toggle="collapse" href="#background" role="button" aria-expanded="false" aria-controls="background">
<span class="fa fa-flask" aria-hidden="true">
</span>
</button>
</p>
<div class="collapse" id="background">
<div class="card card-body">
Standard Computation Genetics <a href="/analysis"> Automated-Report </a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<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>
// create animated spiral beads
var t = 0;
var c = document.querySelector("canvas");
var $ = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
$.fillStyle = 'hsla(0,0%,0%,1)';
window.addEventListener('resize', function () {
c.width = window.innerWidth;
c.height = window.innerHeight;
}, false);
function draw() {
$.globalCompositeOperation = 'source-over';
$.fillStyle = 'hsla(0,0%,0%,.1)';
$.fillRect(0, 0, c.width, c.height);
var foo, i, j, r;
foo = Math.sin(t) * 2 * Math.PI;
for (i = 0; i < 400; ++i) {
r = 400 * Math.sin(i * foo);
$.globalCompositeOperation = '';
$.fillStyle = 'hsla(' + i + 12 + ',100%, 60%,1)';
$.beginPath();
$.arc(Math.sin(i) * r + (c.width / 2),
Math.cos(i) * r + (c.height / 2),
1.5, 0, Math.PI * 2);
$.fill();
}
t += 0.000005;
return t %= 2 * Math.PI;
};
function run() {
window.requestAnimationFrame(run);
x = draw();
// const process = document.querySelector('.btn-success');
setInterval(() => {
if (x == 0.0017950000000000043) {
}
}, 500);
}
run();
// html attributes
const processBtn = document.getElementsByClassName('process')[0];
const progress = document.querySelector('.progress-done');
let i = 1;
// progress bar
setTimeout(() => {
progress.style.opacity = 1;
progress.style.width = progress.getAttribute('data-done') + '%';
// while(i != 10){
// let intv = setInterval(inc, 1000, Math.ceil(Math.random()* 100));
// if (intv === 100){
// clearInterval(intv);
// }
// i++;
// }
}, 200);
// further processing timeframe 30000
setTimeout(() => {
processBtn.style.visibility = "visible";
}, 10000 * 3.0);
// function inc(index){
// setTimeout(() => {
// progress.style.width = (parseInt(progress.style.width)) + '%';
// progress.innerHTML = index + '%';
// }, 20);
// progress.style.width = ' ' + '%';
// progress.style.width = 100 + '%';
// }
</script>
</body>
</html>