Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

final-year-project-/index.html

Go to file
 
 
Cannot retrieve contributors at this time
318 lines (301 sloc) 13.8 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html>
<head>
<title>Blockchain Bank</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.2.7-rc.0/web3.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Css Styles -->
<link rel="stylesheet" href="http://localhost:3000/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/themify-icons.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/nice-select.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/transfer.css" type="text/css">
<link rel="stylesheet" href="http://localhost:3000/css/animate.min.css" type="text/css">
<script src="./node_modules/web3/dist/web3.min.js"></script>
<style>
button {
background-color: #88C417;
width: 25vw;
font-size: 33px;
padding: 5px;
font-family: Impact;
}
input {
width: 25vw;
height: 30px;
font-size: 25px;
font-family: tahoma;
outline: none;
}
#readArea {
flex-basis: 50%;
}
#writeArea {
flex-basis: 50%;
}
button:hover {
background-color: whitesmoke;
}
</style>
</head>
<body>
<section>
<!-- Header Section Begin -->
<header class="header-section">
<div class="top-nav">
<div class="container-fluid">
<div class="row">
<div class="col-lg-7">
<nav class="main-menu">
<ul>
<li class="active"><a href="file:///Users/dhruv_rko/Documents/Blockchain/Home.html">Home</a></li>
<li><a href="">Accounts</a></li>
<li><a href="">Payment</a></li>
<li><a href="">Services</a></li>
<li><a href="">Investments</a></li>
</ul>
</nav>
</div>
<div class="col-lg-5">
<div class="top-right">
<a href="localhost:3000/login.html" class="property-sub" style="background: transparent;">SignOut</a>
</div>
</div>
</div>
</div>
</div>
<div class="nav-logo">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="logo">
<a href="./index.html"><img style="margin-top: -1rem; height:4rem;" alt=""></a>
</div>
</div>
<div class="col-lg-9">
<div class="nav-logo-right">
<ul>
<li>
<i class="icon_phone"></i>
<div class="info-text">
<span>Phone:</span>
<p class="p1">07798686617</p>
</div>
</li>
<li>
<i class="icon_map"></i>
<div class="info-text">
<span>Address:</span>
<p class="p1">13 15 Edward Road, <span>UK</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</section>
<section class="hero set-bg" data-setbg="img/hero-bg.jpg" style="background-image: url(img/hero-bg.jpg);">
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="hero__text">
<h2>Find The Best Monthly Payment</h2>
<p>Apply for our business loan in minutes, without painful</p>
<button onclick="connectMetamask()" class="primary-btn">CONNECT METAMASK</button>
<button onclick="connectContract()"class="primary-btn howit-btn">CONTRACT</button>
<button onclick="getContractAccount()"class="primary-btn howit-btn"> GET ACCOUNT </button>
<button onclick="getBalanceApple()" class="primary-btn">GET BALANCE</button>
</div>
</div>
<div class="col-lg-5 offset-lg-2">
<div class="hero__form">
<h3>Connected Account and Contract</h3>
<p id="userArea">Account Status: </p>
<p id="contractArea">Contract State: </p>
<p id="contractAccount">Account Number: </p>
<p id="balanceArea">Balance:</p>
<h3>How much you want to transfer</h3>
<form action="#">
<div class="input-full-width">
<p>Amount:</p>
<input type="number" id="amountInput" class="form-control" style=" width: -webkit-fill-available;
height: 3vw;" placeholder="Enter Amount">
</div>
<div class="input-full-width">
<p>address_to:</p>
<input type="text" id="addressInput" class="form-control" style=" width: -webkit-fill-available;
height: 3vw;" placeholder="Enter Address"> <br>
</div>
<button onclick="withdraw()" class="site-btn"> Transfer Ether</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- footer start -->
<footer class="footer">
<div class="footer_top">
<div class="container">
<div class="row">
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="footer_widget">
<h3 class="footer_title">
Services
</h3>
<ul>
<li><a href="#">Home Loan</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Car Loan</a></li>
<li><a href="#">Investment & Insurance</a></li>
<li><a href="#">Money Transfer</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="footer_widget">
<h3 class="footer_title">
Useful Links
</h3>
<ul>
<li><a href="#">Interest Rates % Service Charges</a></li>
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="footer_widget">
<h3 class="footer_title">
Subscribe
</h3>
<form action="#" class="newsletter_form">
<input type="text" placeholder="Enter your mail">
<button type="submit" style="width: auto;">Subscribe</button>
</form>
<p class="newsletter_text">Please mention your email-id to get notifications about our offers. </p>
</div>
</div>
</div>
</div>
</div>
<div class="copy-right_text">
<div class="container">
<div class="footer_border"></div>
<div class="row">
<div class="col-xl-12">
<p class="copy_right text-center">
Copyright &copy;
<script>
</script> Bank of Blockchain. All rights reserved
</p>
</div>
</div>
</div>
</div>
</footer>
<script>
let account;
const connectMetamask = async () => {
if(window.ethereum !== "undefined") {
const accounts = await ethereum.request({method: "eth_requestAccounts"});
account = accounts[0];
document.getElementById("userArea").innerHTML = `User Account: ${account}`;
}
}
const connectContract = async () => {
const ABI = [
{
"inputs": [],
"name": "deposit",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address payable",
"name": "_to",
"type": "address"
},
{
"internalType": "uint256",
"name": "_amount",
"type": "uint256"
}
],
"name": "withdraw",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
},
{
"inputs": [],
"name": "getAddress",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "getBalance",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
}
];
const Address = "0xe843CC1f291fF66ABc4DEaE1FB8D1Ff7E4735226";
window.web3 = await new Web3(window.ethereum);
window.contract = await new window.web3.eth.Contract(ABI, Address);
document.getElementById("contractArea").innerHTML = "Connected to Contract";
}
const getContractAccount = async () => {
const data = await window.contract.methods.getAddress().call();
document.getElementById("contractAccount").innerHTML = `Contract Account: ${data}`;
}
const getBalanceApple = async () => {
const data = await window.contract.methods.getBalance().call();
document.getElementById("balanceArea").innerHTML = `Contract Balance: ${data}`;
}
const depositContract = async () => {
const amount = document.getElementById("depositInput").value;
await window.contract.methods.deposit().send({from: account, value: amount});
}
const withdraw = async () => {
const amount = document.getElementById("amountInput").value;
const address = document.getElementById("addressInput").value;
await window.contract.methods.withdraw(address, amount).send({from: account});
}
</script>
</body>
</html>