Add files via upload

MitchTJones · Apr 9, 2018 · ab41e1c · ab41e1c
1 parent e0bddc1
commit ab41e1c
Show file tree

Hide file tree

Showing 7 changed files with 498 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,144 @@
+@import url('https://fonts.googleapis.com/css?family=Hind|Monda|Montserrat|Oswald|Oxygen|PT+Sans+Caption|Questrial|Source+Sans+Pro|Ubuntu');
+
+* {
+	margin:0;
+	padding:0;
+	font-family: 'Questrial', sans-serif;
+}
+
+p, h1, h2, h3 {
+	margin:0;
+	padding:0;
+}
+
+.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
+	padding:0;
+	margin:0;
+
+}
+
+#particles-js{
+	position:absolute;
+	top:0;
+	left:0;
+	width: 100%;
+	height: 100%;
+}
+
+.invert {
+	filter:invert(100%);
+}
+
+#logo {
+	height:95px;
+	margin:20px;
+}
+
+#topbar {
+	width:100%;
+	background-color:#222;
+}
+
+#title {
+	margin:0;
+	padding:20px;
+	color:#f1f1f1;
+}
+
+#main {
+	margin-top:20px;
+}
+
+.section {
+	margin-top:30px;
+	box-shadow: 1px 3px 15px 0px rgba(0, 0, 0, 0.14);
+	background-color:white;
+}
+
+.section .inner {
+	padding:20px;
+}
+
+.wide {
+	width:100%;
+}
+
+#address {
+	font-size:1vw;
+}
+
+.txDiv {
+	display:flex;
+	display:-webkit-flex;
+}
+
+#txList {
+	width:100%;
+	margin-top:0;
+}
+
+.tx {
+	display:flex;
+	display:-webkit-flex;
+	flex-direction:row;
+	justify-content:space-between;
+	color:black;
+}
+
+.tx > p:nth-of-type(1) { width:60%; }
+.tx > p:nth-of-type(2) { width:20%; }
+.tx > p:nth-of-type(3) { width:20%; text-align:right; }
+
+
+.txInput {
+	margin-left:20px;
+	flex-grow:1;
+	-webkit-flex-grow:1;
+}
+
+#send {
+	margin-left:15px;
+	padding:0px 10px 0px 10px;
+}
+
+.button {
+	border:none;
+	background-color:#222;
+	color:#f1f1f1;
+	text-align:center;
+	text-decoration:none;
+	cursor:pointer;
+}
+
+#balance {
+	font-size:60px;
+}
+
+#qr-address {
+	margin-top:10px;
+	width:60%;
+}
+
+.section-title {
+	width:100%;
+	padding:5px;
+	text-align:center;
+	background-color:#222;
+	color:#f1f1f1;
+}
+
+.locke {
+	background-color:#222;
+	color:white;
+}
+
+#resources {
+	display:flex;
+	flex-direction:column;
+}
+
+.resource {
+	flex-grow:1;
+	background-color:#dddddd;
+	color:black;
+}
diff --git a/img/browser-metamask.png b/img/browser-metamask.png
diff --git a/img/dl-metamask.png b/img/dl-metamask.png
diff --git a/img/login-metamask.png b/img/login-metamask.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv='content-type' content='text/html; charset=utf-8'>
+	<link rel='icon' type='image/png' href='/favicos/favicon.png'/>
+	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
+	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+	<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
+	<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>
+	<script src='https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js'></script>
+	<link rel='stylesheet' href='/css/main.css'>
+	<title>ERC-20 Wallet Template</title>
+</head>
+<body>
+	<div id='topbar'>
+		<center><a href=''><img src='/img/logo.png' id='logo'></a></center>
+	</div>
+	<div id='wallet' class='container' style='display:none'>
+		<div class='container'>
+			<div class='row'>
+				<div class='section wide col'>
+					<h3 class='section-title'>Send</h3> 
+					<div class='inner'>
+						<div class='txDiv' style='margin-bottom:15px'>Address: <input class='txInput' type='text' id='txAddress'><br></div>
+						<div class='txDiv'>Amount: <input class='txInput' type='text' id='txAmount'><br><button class='btn' id='send'>Send Tokens</button></div>
+					</div>
+				</div>
+			</div>
+			<div class='row justify-content-between'>
+				<div class='col-7'>
+					<div class='section'>
+					<h3 class='section-title'>Receive</h3>
+						<div class='inner'>
+							<center><p><b>Public address:</b> <span id='eth-address'></span></p></center>
+							<center><img id='qr-address'></center>
+						</div>
+					</div>
+				</div>
+				<div class='col-4'>
+					<div class='section'>
+						<h3 class='section-title'>Balance</h3>
+						<div class='inner'>
+							<center><h1 id='balance'></h1></center>
+							<center><h3>TOKENS</h3></center>
+						</div>
+					</div>
+					<div class='section'>
+						<h3 class='section-title'>Resources</h3>
+						<div class='inner' id='resources'>
+							<a role='button' class='btn resource' id='blockexplorer'>Block Explorer</a>
+							<a role='button' class='btn resource disabled' href='' style='margin-top:10px'>FAQ</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class='row'>
+				<div class='section wide col'>
+				<h3 class='section-title'>Transaction History</h3> 
+					<div id='txList' class='list-group'></div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div id='no-metamask' class='container' style='display:none'>
+		<center><div style='margin:20px;'>
+			<h1>This wallet requires MetaMask</h1>
+		</div>
+		<div>
+			<a id='dl-mm' href='#'>
+				<img src='/img/dl-metamask.png'>
+			</a>
+			<div style='margin:20px;'>
+				<div style='margin:10px;'>
+					<h1>What is MetaMask?</h1>
+					<p>MetaMask is an extension for Chrome, Opera, and Firefox that allows the browser to interact with the Ethereum blockchain. MetaMask also has a built in Ethereum wallet - this is the wallet that your tokens must be stored in to use this wallet.</p>
+				</div>
+				<div style='margin:10px;'>
+					<h1>Why do I need MetaMask?</h1>
+					<p>*token* is an ERC-20 token built on the Ethereum blockchain. This means that, in order to interact with the token, your browser must be able to interact with the Ethereum blockchain. The incredible security of the MetaMask wallet also ensures that your tokens will be as safe as possible.</p>
+				</div>
+				<div style='margin:10px;'>
+					<h1>Is MetaMask safe?</h1>
+					<p>MetaMask is extremely trusted and widely used by the Ethereum community. Your private keys are stored on your machine and encrypted with your MetaMask password, ensuring the security of your MetaMask Ethereum wallet. Many of the Ethereum community's most trusted Ethereum web applications use MetaMask for its ease-of-use and security, including <a href='https://www.myetherwallet.com/'>MyEtherWallet</a>. If you have any reservations about the security of MetaMask, feel free to review their <a href='https://github.com/MetaMask/metamask-plugin'>GitHub</a>. MetaMask is open source!</p>
+					<p>For more information, check out <a href='https://metamask.io/'>the MetaMask website</a>.</p>
+				</div>
+
+			</div>
+		</div></center>
+	</div>
+	<div id='not-logged-in' class='container' style='display:none;'>
+		<center><div style='margin:20px;'>
+			<h1>You must be logged in to MetaMask</h1>
+		</div>
+		<div>
+			<img src='/img/login-metamask.png'>
+			<div style='margin:20px;'>
+				<div style='margin:10px;'>
+					<p>You have MetaMask installed, but you're not logged in. You need to be logged in to your MetaMask Ethereum wallet in order to use Locke Pocket. If you're not sure how to use MetaMask, check out <a href='https://www.cryptocompare.com/wallets/guides/how-to-use-metamask/'>this tutorial</a>. For more information, check out <a href='https://metamask.io/'>the MetaMask website</a>.</p>
+				</div>
+			</div>
+		</div></center>
+	</div>
+	<div id='wrong-browser' class='container' style='display:none'>
+		<center><div style='margin:20px;'>
+			<h1>Locke Pocket requires MetaMask</h1>
+		</div>
+		<div>
+			<img src='/img/browser-metamask.png'>
+			<div style='margin:10px;'>
+				<h2>Get a Browser that Supports MetaMask</h2>
+				<p><a href='https://www.google.com/chrome/'>Google Chrome</a> | <a href='https://www.mozilla.org/en-US/firefox/new/'>Mozilla Firefox</a> | <a href='http://www.opera.com/download'>Opera</a> | <a href='https://brave.com/'>Brave</a></p>
+			</div>
+			<div style='margin:20px;'>
+				<div style='margin:10px;'>
+					<h1>What is MetaMask?</h1>
+					<p>MetaMask is an extension for Google Chrome that allows the Chrome browser to interact with the Ethereum blockchain. MetaMask also has a built in Ethereum wallet - this is the wallet that your Locke tokens must be stored in to use the Locke Pocket Wallet.</p>
+				</div>
+				<div style='margin:10px;'>
+					<h1>Why does Locke Pocket need MetaMask?</h1>
+					<p>Locke is an ERC-20 token built on the Ethereum blockchain. This means that, in order to interact with the Locke token, your browser must be able to interact with the Ethereum blockchain. The incredible security of the MetaMask wallet also ensures that your Locke tokens will be as safe as possible.</p>
+				</div>
+				<div style='margin:10px;'>
+					<h1>Is MetaMask safe?</h1>
+					<p>MetaMask is extremely trusted and widely used by the Ethereum community. Your private keys are stored on your machine and encrypted with your MetaMask password, ensuring the security of your MetaMask Ethereum wallet. Many of the Ethereum community's most trusted Ethereum web applications use MetaMask for its ease-of-use and security, including <a href='https://www.myetherwallet.com/'>MyEtherWallet</a>. If you have any reservations about the security of MetaMask, feel free to review their <a href='https://github.com/MetaMask/metamask-plugin'>GitHub</a>. MetaMask is open source!</p>
+					<p>For more information, check out <a href='https://metamask.io/'>the MetaMask website</a>.</p>
+				</div>
+
+			</div>
+		</div></center>
+	</div>
+	<script src='/js/index.js?v1.0'></script>
+</body>
+</html>