dvault.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/dvault.css">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script src="https://js.pusher.com/7.0/pusher-with-encryption.min.js"></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="wallet-container" style="width: 107pc;height: 51pc; background: midnightblue;">
<div class="info-bar" style="width:107pc;height:5pc;">
<span class="info" style="position: absolute;left: 26pc;top: 8pc;color: gold;font-size: large;"> Peer ID : </span>
<button type="button" class="refresh" style="position: absolute;left: 74pc;top: 17pc;border: none;background: transparent;color: gold;">
<i class="fa fa-refresh fa-spin" aria-hidden="true"></i>
</button>
</div>
<div class="info-window" style="width:107pc; height:50pc;">
<span style="position: absolute;left: 5pc;color: silver;"> CDR-LINK </span>
<span style="position: absolute;left: 41pc;color: silver;"> Size </span>
<span style="position: absolute;left: 51pc;color:silver;"> Access </span>
<span style="position: absolute;left: 65pc;color: silver;"> View </span>
<div class="info-content-1" style="width:107pc; height:5pc;">
<span style="width:10pc;position: absolute;top: 17pc;left: 5pc; color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 17pc;left: 41pc;color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 17pc;left: 52pc; color:gold;"> </span>
<button type="button" class="view" style="position: absolute;top: 17pc;left: 65pc; border:none; background:transparent; color:gold; display:none;">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</button>
<div class="content" style="width: 107pc;height: 21pc;position: absolute;top: 18pc;overflow: scroll; display:none;">
<img src=" "alt="img" class="content"style="position: absolute;left: 6pc;width: 20pc;height:20pc;top: 1pc;border-radius: 10pc;border: 2px slategray dashed;">
<!-- <span style="position: absolute;left: 30pc;width: 76pc;height:20pc;"></span> -->
</div>
</div>
<div class="info-content-2" style="width:107pc; height:5pc; position:absolute;top: 19pc;">
<span style="width:10pc;position: absolute;top: 1pc;left: 5pc; color:gold;"></span>
<span style="width:10pc;position: absolute;top: 1pc;left: 41pc; color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 1pc;left: 52pc; color:gold;"> </span>
<button type="button" class="view" style="position: absolute;top: 1pc;left: 65pc; border:none; background:transparent; color:gold; display:none;">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</button>
<div class="content" style="width:107pc;height: 20pc;position: absolute;top: 3pc;display: none; overflow: scroll;">
<img src="" alt="img" class="content"style="position: absolute;left: 6pc;width: 20pc;height:20pc;top: 1pc;border-radius: 10pc;border: 2px slategray dashed;">
<!-- <span style="position: absolute;left: 30pc;width: 76pc;height:20pc;"></span> -->
</div>
</div>
<div class="info-content-3" style="width:107pc; height:5pc; position:absolute;top: 23pc;">
<span style="width:10pc;position: absolute;top: 1pc;left: 5pc; color:gold;"></span>
<span style="width:10pc;position: absolute;top: 1pc;left: 41pc; color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 1pc;left: 52pc; color:gold;"> </span>
<button type="button" class="view" style="position: absolute;top: 1pc;left: 65pc; border:none; background:transparent; color:gold; display:none;">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</button>
<div class="content" style="width:107pc;height: 20pc;position: absolute;top: 3pc;display: none; overflow: scroll;">
<img src="" alt="img" class="content"style="position: absolute;left: 6pc;width: 20pc;height:20pc;top: 1pc;border-radius: 10pc;border: 2px slategray dashed;">
<!-- <span style="position: absolute;left: 30pc;width: 76pc;height:20pc;"></span> -->
</div>
</div>
<div class="info-content-4" style="width:107pc; height:5pc; position:absolute;top: 27pc;">
<span style="width:10pc;position: absolute;top: 1pc;left: 5pc; color:gold;"></span>
<span style="width:10pc;position: absolute;top: 1pc;left: 41pc; color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 1pc;left: 52pc; color:gold;"> </span>
<button type="button" class="view" style="position: absolute;top: 1pc;left: 65pc; border:none; background:transparent; color:gold; display:none;">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</button>
<div class="content" style="width:107pc;height: 20pc;position: absolute;top: 3pc;display: none; overflow: scroll;">
<img src="" alt="img" class="content"style="position: absolute;left: 6pc;width: 20pc; height:20pc;">
<!-- <span style="position: absolute;left: 30pc;width: 76pc;height:20pc;"></span> -->
</div>
</div>
<div class="info-content-5" style="width:107pc; height:5pc; position:absolute;top:31pc;">
<span style="width:10pc;position: absolute;top: 1pc;left: 5pc; color:gold;"></span>
<span style="width:10pc;position: absolute;top: 1pc;left: 41pc; color:gold;"> </span>
<span style="width:10pc;position: absolute;top: 1pc;left: 52pc; color:gold;"> </span>
<button type="button" class="view" style="position: absolute;top: 1pc;left: 65pc; border:none; background:transparent; color:gold; display:none;">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</button>
<div class="content" style="width:107pc;height: 20pc;position: absolute;top: 3pc;display: none; overflow: scroll;">
<img src="" alt="img" class="content"style="position: absolute;left: 6pc;width: 20pc;height:20pc;top: 1pc;border-radius: 10pc;border: 2px slategray dashed;">
<!-- <span style="position: absolute;left: 30pc;width: 76pc;height:20pc;"></span> -->
</div>
</div>
<div class="objects" style="position: absolute;top: 44pc;left: 34pc;font-size: medium;">
<span style="color:gold;"></span> <span style="color: slategray;"> 🎉 are created & </span> <span></span> <span style="color: goldenrod;">hidden objects display </span>
</div>
</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>
document.getElementsByClassName('info-content-1')[0].children[3].addEventListener('click', (event)=>{
document.getElementsByClassName('info-content-1')[0].children[3].children[0].className = 'fa fa-eye fa-spin';
document.getElementsByClassName('info-content-1')[0].children[4].style.display = '';
document.getElementsByClassName('info-content-2')[0].style.top = '40pc';
document.getElementsByClassName('info-content-3')[0].style.top = '44pc';
document.getElementsByClassName('info-content-4')[0].style.top = '48pc';
document.getElementsByClassName('info-content-5')[0].style.top = '53pc';
});
document.getElementsByClassName('info-content-2')[0].children[3].addEventListener('click', (event)=>{
document.getElementsByClassName('info-content-2')[0].children[3].children[0].className = 'fa fa-eye fa-spin';
document.getElementsByClassName('info-content-2')[0].children[4].style.display = '';
document.getElementsByClassName('info-content-3')[0].style.top = '44pc';
document.getElementsByClassName('info-content-4')[0].style.top = '48pc';
document.getElementsByClassName('info-content-5')[0].style.top = '53pc';
});
document.getElementsByClassName('info-content-3')[0].children[3].addEventListener('click', (event)=>{
document.getElementsByClassName('info-content-3')[0].children[3].children[0].className = 'fa fa-eye fa-spin';
document.getElementsByClassName('info-content-3')[0].children[4].style.display = '';
document.getElementsByClassName('info-content-4')[0].style.top = '48pc';
document.getElementsByClassName('info-content-5')[0].style.top = '53pc';
});
document.getElementsByClassName('info-content-4')[0].children[3].addEventListener('click', (event)=>{
document.getElementsByClassName('info-content-4')[0].children[3].children[0].className = 'fa fa-eye fa-spin';
document.getElementsByClassName('info-content-4')[0].children[4].style.display = '';
document.getElementsByClassName('info-content-5')[0].style.top = '53pc';
});
document.getElementsByClassName('info-content-5')[0].children[3].addEventListener('click', (event)=>{
document.getElementsByClassName('info-content-5')[0].children[3].children[0].className = 'fa fa-eye fa-spin';
document.getElementsByClassName('info-content-5')[0].children[4].style.display = '';
});
document.getElementsByClassName('refresh')[0].addEventListener('click',(event)=>{
if (document.getElementsByClassName('info-content-1')[0].children[3].children[0].className === 'fa fa-eye fa-spin'){
document.getElementsByClassName('info-content-1')[0].children[3].children[0].className = 'fa fa-eye-slash';
document.getElementsByClassName('info-content-1')[0].children[4].style.display = 'none';
document.getElementsByClassName('info-content-2')[0].style.top = '19pc';
document.getElementsByClassName('info-content-3')[0].style.top = '23pc';
document.getElementsByClassName('info-content-4')[0].style.top = '27pc';
document.getElementsByClassName('info-content-5')[0].style.top = '31pc';
}else if(document.getElementsByClassName('info-content-2')[0].children[3].children[0].className === 'fa fa-eye fa-spin'){
document.getElementsByClassName('info-content-2')[0].children[3].children[0].className = 'fa fa-eye-slash';
document.getElementsByClassName('info-content-2')[0].children[4].style.display = 'none';
document.getElementsByClassName('info-content-3')[0].style.top = '23pc';
document.getElementsByClassName('info-content-4')[0].style.top = '27pc';
document.getElementsByClassName('info-content-5')[0].style.top = '31pc';
}else if(document.getElementsByClassName('info-content-3')[0].children[3].children[0].className === 'fa fa-eye fa-spin'){
document.getElementsByClassName('info-content-3')[0].children[3].children[0].className = 'fa fa-eye-slash';
document.getElementsByClassName('info-content-3')[0].children[4].style.display = 'none';
document.getElementsByClassName('info-content-4')[0].style.top = '27pc';
document.getElementsByClassName('info-content-5')[0].style.top = '31pc';
}else if(document.getElementsByClassName('info-content-4')[0].children[3].children[0].className === 'fa fa-eye fa-spin'){
document.getElementsByClassName('info-content-4')[0].children[3].children[0].className = 'fa fa-eye-slash';
document.getElementsByClassName('info-content-4')[0].children[4].style.display = 'none';
document.getElementsByClassName('info-content-5')[0].style.top = '31pc';
}else if(document.getElementsByClassName('info-content-5')[0].children[3].children[0].className === 'fa fa-eye fa-spin'){
document.getElementsByClassName('info-content-5')[0].children[3].children[0].className = 'fa fa-eye-slash';
document.getElementsByClassName('info-content-5')[0].children[4].style.display = 'none';
}
});
</script>
<script type="text/javascript" src="/js/dvault.js"></script>
<!-- <script></script> -->
</body>
</html>