<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
html {
scroll-behavior: smooth;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 2px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
cursor: pointer;
padding: 15px;
border-radius: 4px;
color: #fff!important;
background-color: #305342!important;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
/*position: absolute;
right: 25px;
top: 0;*/
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
.modal-content {
max-height: 80vh;
overflow: auto;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.modal-content {
width: 80%;
}
/* .iframe_holder {
height: calc(100vh - 153px);
} */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.modal-content {
width: 80%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.modal-content {
width: 60%;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.modal-content {
width: 40%;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.modal-content {
width: 30%;
}
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
#buy_power_confirm_button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 20%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto !important;
padding: 10px 18px !important;
background-color: #f44336 !important;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
</style>
<body >
<button class="w3-hover-opacity" onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Top</button>
<div class="w3-sidebar w3-bar-block w3-animate-left w3-collapse" style="display:none;left:0;width: 300px; z-index: 3; overflow: -moz-hidden-unscrollable;" id="leftMenu">
<!-- <button onclick="closeLeftMenu()" class="w3-bar-item w3-button w3-hide-large">Close ×</button> -->
<div class="w3-container w3-display-container w3-padding-16 ">
<div >
<i onclick="closeLeftMenu()" class="fa fa-remove w3-hide-large w3-button w3-transparent w3-display-topright"></i>
<h3> <i class="fa fa-filter" aria-hidden="true"></i> Filters</h3>
<hr>
<form action="/action_page.php" target="_blank">
<p><label><i class="fas fa-user"></i> User</label></p>
<input style = "color: #244848;" class="w3-input w3-border" type="text" placeholder="User Name" name="user_name" required>
<p><label><i class="fa fa-calendar-check-o"></i> Period</label></p>
<!--<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="from_date" required> -->
<div id="datetimepicker_data_tables" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: fit-content; color: #244848;">
<span></span> <i class="fa fa-caret-down"></i>
</div>
<!--<p><label><i class="fa fa-calendar-o"></i> To</label></p>
<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY" name="to_date" required> -->
<p><label><i class="fas fa-coins"></i> Min bank Tokens</label></p>
<input style = "color: #244848;" class="w3-input w3-border" type="number" placeholder="Min bank Tokens" value="0" name="min_bank_tokens" min="0">
<p><label><i class="fas fa-coins"></i> Max bank Tokens</label></p>
<input style = "color: #244848;" class="w3-input w3-border" type="number" placeholder="Min bank Tokens" value="0" name="capacity" min="0">
<p><label><i class="fas fa-charging-station"></i> Capacity</label></p>
<input style = "color: #244848;" class="w3-input w3-border" type="number" placeholder="Min bank Tokens" value="0" name="selling" min="0">
<p><label><i class="fas fa-battery-half"></i> Selling</label></p>
<input style = "color: #244848;" class="w3-input w3-border" type="number" placeholder="Max bank Tokens" value="0" name="max_bank_tokens" min="0">
<p><button class="w3-button w3-block w3-teal w3-left-align" type="submit"><i class="fa fa-search w3-margin-right"></i> Apply Filter</button></p>
</form>
</div>
</div>
</div>
<div class="w3-sidebar w3-bar-block w3-animate-right w3-collapse" style="display:none;right:0; width: 300px;z-index: 3;overflow: -moz-hidden-unscrollable;" id="rightMenu">
<button onclick="closeRightMenu()" class="w3-bar-item w3-button w3-hide-large">Close ×</button>
<div class="w3-row">
<!-- Left Column -->
<div class="">
<!-- Profile -->
<div class=" w3-round w3-white">
<div class="w3-container">
<div class="w3-card" style="padding: 20px; margin-top: 2vh; margin-left: -2px;" >
<h4 class="w3-center"><img src="/images/anand.jpg" class="w3-circle" style="height:50px;width:50px" alt="Avatar"> <span class = "welcome_user_span" style="width:auto;" ><strong><span class="session_user_name">Anand </span></strong></span></h4>
<!-- <p class="w3-center"><img src="/images/anand.jpg" class="w3-circle" style="height:50px;width:50px" alt="Avatar"></p> -->
<hr>
<p><i class="fas fa-coins fa-fw w3-margin-right w3-text-theme"></i>Balance : <span class="user_wallet">23</span></p>
<p style="width: 100%;">
<button style="width: max-content;" class="w3-right w3-button w3-block w3-teal " type="submit"><i class="fas fa-pencil-alt w3-margin-right"></i> Refill</button>
</p><br> <br>
<hr>
<footer class="w3-container " style="color: #244848;">
<h5 class="w3-right"><i class="fas fa-clock"></i> <strong style="font-size: 15px;"></strong><span id="price_updated_timestamp" style="font-size: 13px;color: #244848;">Fri Jan 24 2020 19:25:15</span></h5>
</footer>
</div>
</div>
</div>
<br>
<!-- Interests -->
<div class=" w3-round w3-white w3-hide-small">
<div class="w3-container">
<div class="w3-card" style="" >
<div style="box-shadow: none !important;padding: 3px;" >
<div style="" >
<header class="w3-container ">
<div class="w3-row w3-center" style="padding-top: 2vh;color: #244848;">
<strong class="w3-center"><i class="fas fa-chart-pie"></i> Average Selling Price</strong>
</div>
<hr>
</header>
<div class="w3-container">
<p class="w3-center"><label >Price / kWh : </label> <span > 6 <i class="fas fa-coins"></i></span></p>
<hr>
</div>
<!-- <footer class="w3-container " style="color: #244848;">
<h5 class="w3-right"><i class="fas fa-clock"></i> <strong style="font-size: 15px;">Last Updated : </strong><span id="price_updated_timestamp" style="font-size: 13px;color: #244848;"></span></h5>
</footer> -->
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Interests -->
<div class=" w3-round w3-white w3-hide-small">
<div class="w3-container">
<div class="w3-card" style="" >
<div style="box-shadow: none !important;padding: 3px;" >
<div style="" >
<header class="w3-container ">
<div class="w3-row w3-center" style="padding-top: 2vh;color: #244848;">
<strong class="w3-center"><i class="fas fa-chart-pie"></i> Average Buying Price</strong>
</div>
<hr>
</header>
<div class="w3-container">
<p class="w3-center"><label >Price / kWh : </label> <span > 5 <i class="fas fa-coins"></i></span></p>
<hr>
</div>
<!-- <footer class="w3-container " style="color: #244848;">
<h5 class="w3-right"><i class="fas fa-clock"></i> <strong style="font-size: 15px;">Last Updated : </strong><span id="price_updated_timestamp" style="font-size: 13px;color: #244848;"></span></h5>
</footer> -->
</div>
</div>
</div>
</div>
</div>
<br>
<!-- End Left Column -->
</div>
</div>
</div>
<div class="w3-main w3-animate-opacity" style="margin-left: 300px; margin-right: 300px;">
<div class="sticky w3-hide-large" style="color: #fff!important; background-color: #305342!important;z-index: 2;">
<button class="w3-button w3-large w3-left w3-hide-large" onclick="openLeftMenu()"><i class="fa fa-filter" aria-hidden="true"></i> Filters</button>
<button class="w3-button w3-large w3-right w3-hide-large" onclick="openRightMenu()"><i class="fas fa-user-circle" aria-hidden="true"> My Profile</i></button>
<div class="w3-container ">
<h2 class="w3-hide-small w3-hide-medium"><i class='fas fa-solar-panel' aria-hidden="true"></i> Smart bank <i class="fas fa-house-day"></i></h2>
</div>
</div>
<div id = "adv_container" class="w3-container" style="padding: 0px;">
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/rus.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Russel</h4><br>
<hr class="w3-clear">
<p>bank at affordable price</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br class="w3-hide_small">
<span>2 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br class="w3-hide_small">
<span>350 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source(s)</span><br class="w3-hide_small">
<span><label><i class="fas fa-sun"></i> Solar</label> <label><i class="fas fa-fan"></i> Wind</label></span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br class="w3-hide_small">
<span >1050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<!-- <img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;"> -->
<i class="fas fa-chart-line w3-xxxlarge w3-circle w3-left" aria-hidden="true"></i>
<span class="w3-text-dark-gray"> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/chum.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Chumming</h4><br>
<hr class="w3-clear">
<p>Cheapest price . Grab it soon !!!!</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br>
<span>1 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br>
<span>3500 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source</span><br>
<span>Solar Panel, Turbine </span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br>
<span >5050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;">
<span class="w3-text-dark-gray"><i class="fas fa-chart-line w3-xlarge" aria-hidden="true"></i> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/long.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Long</h4><br>
<hr class="w3-clear">
<p>bank at affordable price</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br>
<span>2 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br>
<span>350 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source</span><br>
<span>Solar Panel </span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br>
<span >1050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;">
<span class="w3-text-dark-gray"><i class="fas fa-chart-line w3-xlarge" aria-hidden="true"></i> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/anto.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Antorweep</h4><br>
<hr class="w3-clear">
<p>bank at affordable price</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br>
<span>2 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br>
<span>350 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source</span><br>
<span>Solar Panel </span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br>
<span >1050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;">
<span class="w3-text-dark-gray"><i class="fas fa-chart-line w3-xlarge" aria-hidden="true"></i> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/magnus.jpg" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Magnus</h4><br>
<hr class="w3-clear">
<p>bank at affordable price</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br>
<span>2 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br>
<span>350 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source</span><br>
<span>Solar Panel </span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br>
<span >1050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;">
<span class="w3-text-dark-gray"><i class="fas fa-chart-line w3-xlarge" aria-hidden="true"></i> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
<div class="add_container w3-row w3-padding-24 w3-animate-bottom">
<div class="w3-twothird w3-container">
<div class="w3-container w3-card w3-white w3-round "><br>
<img src="/images/anand.jpg" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> 1 min</span>
<h4>Anand</h4><br>
<hr class="w3-clear">
<p>bank at affordable price</p>
<div class="w3-row-padding " >
<div class="w3-quarter w3-center w3-right">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-coins" aria-hidden="true"></i> Price</span><br>
<span>2 per kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-half" aria-hidden="true"></i> Selling</span><br>
<span>350 kWh</span>
</p>
</div>
<div class="w3-quarter w3-center w3-right ">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-charging-station" aria-hidden="true"></i> Source</span><br>
<span>Solar Panel </span>
</p>
</div>
<div class="w3-quarter w3-center w3-right w3-hide-small w3-hide-medium">
<p >
<span class="w3-text-dark-gray"><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity</span><br>
<span >1050 kWh </span>
</p>
</div>
</div><hr class="w3-clear">
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> Like <span>26</span></button>
<!-- <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> Comment <span>16</span></button> -->
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom w3-right w3-teal w3-hover-opacity"><i class="fa fa-shopping-cart"></i> Buy</button>
</div>
</div>
<div class="w3-third w3-container w3-hide-small " style="margin-top: 25px;">
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-right">
<img src="/images/profile_rating_icon.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-text-dark-gray"><i class="fas fa-star-half-alt" aria-hidden="true"></i> Seller Rating</span><br>
<span>86% <i class="far fa-heart" aria-hidden="true"></i></span>
</p>
<p class="w3-card w3-padding-large w3-padding-32 w3-center w3-animate-left">
<img src="/images/bitcoin2.png" aria-hidden="true" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px;margin-top: -7px;height: 60px;">
<span class="w3-text-dark-gray"><i class="fas fa-chart-line w3-xlarge" aria-hidden="true"></i> Price Meter </span><br>
<span>20% <i class="far fa-arrow-alt-circle-down" aria-hidden="true"></i> </span>
</p>
</div>
</div>
</div>
<div id="buy_power_confirm" class="w3-modal" style="overflow:visible;">
<form id="buy_form" action="/buy_confirm_invoke_chaincode" enctype="multipart/form-data" method="POST" class="modal-content" >
<div class="imgcontainer">
<span onclick="document.getElementById('buy_power_confirm').style.display='none'" class="close w3-right" title="Close Modal" style="margin-top: -17px; margin-right: 10px;">×</span>
<strong><span class="w3-text-dark-gray"><i class="fa fa-shopping-cart aria-hidden="true"></i> CONFIRM PURCHASE</span></strong>
<!-- <img src="images/avatar2.png" alt="Avatar" class="avatar"> -->
</div>
<hr>
<div class="container w3-text-dark-gray">
<label class="w3-left" for="seller_user"><b><i class="fas fa-user-circle" aria-hidden="true"></i> From</b></label>
<label class="w3-right" id="seller_user_label" for="seller_user">Anand</label>
<input type="hidden" name="seller_user_input" id="seller_user_input">
<label class="w3-right" id="seller_user_id" for="seller_user" style="display: none;">93</label>
<br><br>
<label class="w3-left" for="capacity"><b><i class="fas fa-battery-full" aria-hidden="true"></i> Capacity (kwh)</b></label>
<label class="w3-right" id="capacity" for="capacity"> 1500</label>
<br><br>
<label class="w3-left" for="bank_source"><b><i class="fas fa-solar-panel" aria-hidden="true"></i> bank Source(s)</b></label>
<label class="w3-right" id="bank_source" for="bank_source"><span><label><i class="fas fa-sun"></i> Solar ,</label> <label><i class="fas fa-fan"></i> Wind</label></span></label>
<br><br>
<label class="w3-left" for="selling"><b><i class="fas fa-battery-half" aria-hidden="true"></i> Selling (kwh)</b></label>
<label class="w3-right" id="selling" for="selling">300</label>
<br><br>
<label class="w3-left" for="power_price"><b><i class="fas fa-coins" aria-hidden="true"></i> Price (bank Tokens / kWh)</b></label>
<label class="w3-right" id="power_price" for="power_price">50</label>
<input type="hidden" name="seller_user_price" id="seller_user_price">
<br><br>
<label class="w3-left" for="power_to_buy"><b><i class="fas fa-charging-station" aria-hidden="true"></i> Power to Buy (kWh)</b></label>
<input onchange="set_total_price(this.value)" class = "w3-right" type="number" min="1" placeholder="Enter Power to Buy (kWh)" name="power_to_buy" id = "power_to_buy" value="1" required>
<br><br>
<label class="w3-left" for="total_power_price"><b><i class="fas fa-coins" aria-hidden="true"></i> Total Price (bank Tokens / kWh)</b></label>
<label class="w3-right" id="total_power_price" for="total_power_price">50</label>
<input type="hidden" name="total_power_price_input" id="total_power_price_input">
<br><br>
<div id="buy_power_confirm_loader" class="loader w3-center" style="display: none; width: 50px;height: 50px;margin-left: 45%;margin-right: 45%;"></div>
<br><br>
<button id = "buy_power_confirm_button" class ="w3-right" type="submit">Confirm</button>
<br> <br> <br>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('buy_power_confirm').style.display='none'" class="cancelbtn">Cancel</button>
<span class="w3-right w3-opacity"><i class="far fa-clock" aria-hidden="true"></i> Posted at: <span id="ad_posted_timestamp"> Feb 16 2020 17:18:31</span> </span>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="js/double_menu.js"> </script>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script type="text/javascript">
function update_datatable_date_range_data(start, end) {
//console.log(start,end);
$('#datetimepicker_data_tables span').html(start.format('MMMM D, YYYY HH:mm') + ' - ' + end.format('MMMM D, YYYY HH:mm'));
}
function initialise_data_table_time_handler_functions() {
var start = moment().subtract(30, 'minutes');
var end = moment();
$('#datetimepicker_data_tables').daterangepicker({
showWeekNumbers: true,
showDropdowns: true,
timePicker: true,
timePicker24Hour: true,
startDate: start,
endDate: end,
alwaysShowCalendars: true,
showCustomRangeLabel: true,
autoApply: true,
maxSpan: {
"days": 6
},
autoUpdateInput:true,
ranges: {
'Today': [moment().startOf('days'), moment().endOf('days')],
'Yesterday': [moment().subtract(1, 'days').startOf('days'), moment().subtract(1, 'days').endOf('days')],
'Last 7 Days': [moment().subtract(6, 'days').startOf('days'), moment().endOf('days')],
'Last 30 Days': [moment().subtract(29, 'days').startOf('days'), moment().endOf('days')],
'This Week': [moment().startOf('week'), moment().endOf('week')],
'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, update_datatable_date_range_data);
update_datatable_date_range_data(start, end);
}
initialise_data_table_time_handler_functions();
</script>
<script type="text/javascript" src="js/send_ajax_request.js"> </script>
<script type="text/javascript">
//alert("home_page.html");
if ( window.location !== window.parent.location ) {
// The page is in an iframe
console.log("in iframe");
get_session_details();
} else {
// The page is not in an iframe
console.log("out iframe");
check_iframe_session();
}
</script>
<script type="text/javascript">
get_advertisements();
</script>
<script>
var buy_button_clicked= function buy_button_clicked(){
//console.log(this);
var ad_content_div_class = $(this).parent();
console.log(ad_content_div_class.find('.ad_user_id').text());
$("#seller_user_label").text(ad_content_div_class.find('.ad_user_name').text());
$("#seller_user_input").val(ad_content_div_class.find('.ad_user_name').text());
$("#seller_user_id").text(ad_content_div_class.find('.ad_user_id').text());
$("#capacity").text(ad_content_div_class.find('.ad_capacity').text());
$("#selling").text(ad_content_div_class.find('.ad_bank_to_sell').text());
$("#ad_posted_timestamp").text(ad_content_div_class.find('.ad_time_stamp').text());
$("#power_price").text(ad_content_div_class.find('.ad_cost').text());
$("#seller_user_price").val(ad_content_div_class.find('.ad_cost').text());
var price_per_kwh = Number($("#seller_user_price").val());
var buying_kwh = Number($("#power_to_buy").val());
var total_price_string = String(price_per_kwh * buying_kwh);
$("#total_power_price").text(total_price_string);
$("#total_power_price_input").val(total_price_string);
document.getElementById('buy_power_confirm').style.display='block';
//console.log($(this).prevAll());
};
function set_total_price(value){
var price_per_kwh = Number($("#seller_user_price").val());
var buying_kwh = Number(value);
var total_price_string = String(price_per_kwh * buying_kwh);
$("#total_power_price").text(total_price_string);
$("#total_power_price_input").val(total_price_string);
}
</script>
</body>
</html>