-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
176 lines (173 loc) · 9.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Marriage Smart Contract on Ethereum</title>
<!-- Bootstrap/JQuery/SweetAlert -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/sweetalert.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="js/sweetalert.min.js">
</script>
<!-- My JS -->
<!-- <script src='js/bignumber.js'></script> -->
<script src="ethjs/web3.js">
</script>
<script src="ethjs/network.js">
</script>
<script src="ethjs/contracts.js">
</script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Marriage on Ethereum</a> </div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li> <a href="https://www.gitbook.com/book/souptacular/ethereum-tutorials-and-tips-by-hudson/details" target="_blank"> My Ethereum Tutorials and Resources GitBook</a> </li>
<li> <a href="http://www.hudsonjameson.com" target="_blank">HudsonJameson.com</a> </li>
<li class="active"> <a href="https://github.com/Souptacular/marriage-dapp" target="_blank"> Source<span class="sr-only">(current)</span></a> </li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>My Marriage Information via the Ethereum Blockchain</h1>
<hr> </div>
</div>
<div class="row">
<div class="col-md-5">
<h3>Connect to Ethereum</h3>
<input id="web3Endpoint" type="text" value="http://localhost:8545">
<br>
<br>
<!-- Trigger the modal with a button -->
<button class="btn btn-default" onclick="connectToEth();" type="button">Connect to Geth</button>
<button class="btn btn-info" data-target="#help" data-toggle="modal" type="button">Need Help?</button>
<!-- Modal -->
<div class="modal fade" id="help" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Connecting to Ethereum</h4> </div>
<div class="modal-body">
<p>To connect to Ethereum, you need an Ethereum client running with permissions to view this webpage. Here is an example of a way to start the geth CLI client in order to properly use this site.</p>
<br>
<p><code>geth --rpc --rpcport "8545" --rpcapi "db,eth,net,web3" --rpccorsdomain "http://hudsonjameson.com" console</code> </p>
<br>
<p>The above command will open geth and enable the RPC interface to allow connections to hudsonjameson.com.</p>
<p>Make sure you have the right address to connect once you open your client and allow cross origin requests for this site. Common ones include "http://localhost:8545" for Geth/Eth, "http://localhost:4000" for Pyeth, and "ipc" for IPC connections.</p> <a href="https://github.com/ethereum/go-ethereum/wiki/Command-Line-Options" target="_blank">For more information on geth command line options click here.</a> </div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<br>
<br>
<h3>The Story</h3>
<p>I got the inspiration to make this page because of <a href="https://twitter.com/hudsonjameson/status/676275617722077186" target="_blank">a tweet from Joseph Lubin</a> after I posted about my 1 year wedding anniversary.</p>
<br>
<h3>Why Is This Important?</h3>
<p>I am storing data immutably to the Ethereum blockchain. This is an example of a proof-of-existence application of blockchains that is very important. Blockchains, when properly designed, provide a way to permanently store data with an un-hackable audit trail. On the Ethereum blockchain, users create smart contracts to store and manipulate data. Smart contracts are permanently on the Ethereum blockchain and contain their own storage. Whenever the internal contract storage is changed, the blockchain updates the smart contract data, while still maintaining a history of the previous data. Cool, huh?</p>
</script>
<button id="viewContractOnChain" class="btn btn-primary" type="button" onclick="getBlockchainURL();">View smart contract on the Ethereum blockchain</button>
<br>
<br>
<h3><a href="" target="_blank">Make Your Own Marriage Contract and Test It!</a></h3> </div>
<div class="col-md-7">
<div>
<h2>Hudson and Laura Marriage Details</h2>
<br>
<button class="btn btn-success" onclick="checkOnHudsonsMarriage();" type="button">Get Latest Marriage Details from Ethereum Blockchain</button>
<br>
<br>
<h3>Marriage Information</h3>
<table class="table table-striped table-hover" id="eventTable">
<thead>
<tr>
<th>Contract Address</th>
<th>
<input id="contract" size="40" type="text"> </th>
</tr>
<tr>
<th>ABI</th>
<th>
<input id="ABI" size="40" type="text"> </th>
</tr>
<tr>
<td>Marriage Status</td>
<td>
<input id="mStatus" readonly="true" size="15" type="text"> </td>
</tr>
<tr>
<td>Partner 1</td>
<td>
<input id="partner1" readonly="true" size="25" type="text"> </td>
</tr>
<tr>
<td>Partner 2</td>
<td>
<input id="partner2" readonly="true" size="25" type="text"> </td>
</tr>
<tr>
<td>Marriage Date</td>
<td>
<input id="mDate" readonly="true" size="25" type="text"> </td>
</tr>
<tr>
<td>IPFS Hash to Marriage Image</td>
<td>
<p id="mImage"></p>
</tr>
<tr>
<td>IPFS Hash to Marriage Proof</td>
<td>
<p id="mProof"></p>
</tr>
</thead>
<tbody> </tbody>
</table>
<br>
<h3>Major Events</h3>
<table class="table table-striped table-hover" id="aTable">
<thead>
<tr>
<th>Event Name</th>
<th>Event Time</th>
<th>Description</th>
<th>Time Submitted</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- My JS -->
<script src="ethjs/ethFunctions.js">
</script>
<script>
document.getElementById("contract").value = contractAddress;
document.getElementById("ABI").value = JSON.stringify(contractABI);
</script>
</body>
</html>