Skip to content

Commit 5c7bcb1

Browse files
mohamedhayibormohamedhayibor
committed
Revamp UI, then delete shitty image
1 parent 82aa36d commit 5c7bcb1

File tree

5 files changed

+160
-85
lines changed

5 files changed

+160
-85
lines changed

Diff for: ‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ I have noticed a common scheme for event organizers and venues.
1111
Usage:
1212
=========
1313

14-
![vault image](vault1.jpg)
15-
1614
Just tell the attendees the address of your contract, then they can donate whatever amount they wish using metamask.
1715

1816
* Assumption: The organizer will make sure of the conversion to fiat to be given to non-profits.

Diff for: ‎ethereumLogo.svg

+11
Loading

Diff for: ‎index.html

+149-83
Original file line numberDiff line numberDiff line change
@@ -5,102 +5,168 @@
55
<title>Split Donations front-end</title>
66
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
77
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
9+
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
810
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
911
<!-- web3.js from: https://github.com/ethereum/web3.js/blob/1.0/dist/web3.min.js -->
1012
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
1113
<style>
1214
input {
1315
margin: 0 auto;
1416
}
17+
* {
18+
font-family: 'Teko', cursive;
19+
}
20+
.ethSection {
21+
padding: 100px 0;
22+
}
23+
.ethLogo {
24+
width: 400px;
25+
max-width: 80%;
26+
}
1527
</style>
1628
</head>
17-
<body class="container">
18-
19-
<!-- create new splitDonation contract section -->
20-
<div class="jumbotron pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
21-
<div id="notUsingMetamask" rol="alert"></div>
22-
<h1 class="display-4">Split Donations between the organizer and the house.</h1>
23-
24-
<!-- lazy spacing -->
25-
<br>
26-
27-
<form>
28-
<div class="form-group">
29-
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="organizerAddress" placeholder="Enter Organizer's public address" required>
30-
</div>
31-
32-
<div class="form-group">
33-
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="venueAddress" placeholder="Enter Venue's public address" required>
34-
</div>
35-
36-
<button type="submit" class="btn btn-primary" onClick="startApp().createSplitContract();">Deploy new SplitDonations contract</button>
37-
</form>
29+
<body>
30+
<div class="container">
31+
<!-- create new splitDonation contract section -->
32+
<div class="jumbotron pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
33+
<div id="notUsingMetamask" rol="alert"></div>
34+
<h1 class="display-4">Split Donations between the organizer and the house.</h1>
35+
36+
<!-- lazy spacing -->
37+
<br>
38+
39+
<form>
40+
<div class="form-group">
41+
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="organizerAddress" placeholder="Enter Organizer's public address" required>
42+
</div>
43+
44+
<div class="form-group">
45+
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="venueAddress" placeholder="Enter Venue's public address" required>
46+
</div>
47+
48+
<button type="submit" class="btn btn-lg btn-primary" onClick="startApp().createSplitContract();">
49+
<img height="31" src="ethereumLogo.svg">
50+
<strong>Deploy new SplitDonations contract</strong>
51+
</button>
52+
</form>
53+
</div>
54+
55+
<!-- donate section -->
56+
<div id="donate" class="jumbotron">
57+
58+
<form class="text-center">
59+
<h2>Donate</h2>
60+
<div class="form-group">
61+
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="contractAddress" placeholder="Enter contract's address" required>
62+
</div>
63+
64+
<br>
65+
66+
<!-- Alert the user of the organizer and venue owner -->
67+
<!-- <div class="alert alert-warning" role="alert"></div> -->
68+
<!-- A simple warning alert—check it out! -->
69+
<div id="fetchOrgAddr" rol="alert"></div>
70+
<div id="fetchVenAddr" rol="alert"></div>
71+
72+
<div>
73+
<div class="card-deck mb-3 text-center">
74+
<div class="card mb-4 box-shadow">
75+
<div class="card-header">
76+
<h4 class="my-0 font-weight-normal">Gold</h4>
77+
</div>
78+
<div class="card-body">
79+
<h1 class="card-title pricing-card-title">Ξ 0.1 <small class="text-muted">ether</small></h1>
80+
81+
<button type="button" class="btn btn-lg btn-block btn-outline-primary" onClick="startApp().submitDeposit(0.1);">
82+
<img height="31" src="ethereumLogo.svg">
83+
<strong>Donate</strong>
84+
</button>
85+
</div>
86+
</div>
87+
<div class="card mb-4 box-shadow">
88+
<div class="card-header">
89+
<h4 class="my-0 font-weight-normal">Bronze</h4>
90+
</div>
91+
<div class="card-body">
92+
<h1 class="card-title pricing-card-title">Ξ 0.01 <small class="text-muted">ether</small></h1>
93+
94+
<button type="button" class="btn btn-lg btn-block btn-primary" onClick="startApp().submitDeposit(0.01);">
95+
<img height="31" src="ethereumLogo.svg">
96+
<strong>Donate</strong>
97+
</button>
98+
</div>
99+
</div>
100+
<div class="card mb-4 box-shadow">
101+
<div class="card-header">
102+
<h4 class="my-0 font-weight-normal">Custom</h4>
103+
</div>
104+
<div class="card-body">
105+
<input type="number" class="form-control card-title pricing-card-title" id="donationAmount" placeholder="Enter ether amount" required>
106+
107+
<button type="button" class="btn btn-lg btn-block btn-dark" onClick="startApp().submitDeposit();">
108+
<img height="31" src="ethereumLogo.svg">
109+
<strong>Donate</strong>
110+
</button>
111+
</div>
112+
</div>
113+
</div>
114+
115+
<!-- lazy spacing -->
116+
<br>
117+
118+
<!-- Withdraw section -->
119+
<h2>Withdraw</h2>
120+
<button type="submit" class="btn btn-lg btn-primary" onClick="startApp().withdraw();">
121+
<img height="31" src="ethereumLogo.svg">
122+
<strong>Withdraw donations</strong>
123+
</button>
124+
</form>
125+
</div>
126+
</form>
38127
</div>
39-
40-
<!-- donate section -->
41-
<div id="donate" class="jumbotron">
42-
43-
<form class="text-center">
44-
<h2>Donate</h2>
45-
<div class="form-group">
46-
<input type="text" class="form-control col-md-6 col-md-offset-3 text-center" id="contractAddress" placeholder="Enter contract's address" required>
128+
<!-- end of main container -->
129+
130+
<!-- Dapp Features -->
131+
<section class="dapp_features">
132+
<div class="container">
133+
134+
<div class="row text-center">
135+
<div class="col-sm-4 col-md-4">
136+
<i class="fas fa-lock fa-4x"></i>
137+
<br>
138+
<h1 class="text-uppercase">Utmost Security</h1>
139+
<p class="lead" style="color:#888;">The only way someone could steal the eth in the smart contract is by stealing the organizer's or venue onwer's private key</p>
47140
</div>
48-
49-
<br>
50-
51-
<!-- Alert the user of the organizer and venue owner -->
52-
<!-- <div class="alert alert-warning" role="alert"></div> -->
53-
<!-- A simple warning alert—check it out! -->
54-
<div id="fetchOrgAddr" rol="alert"></div>
55-
<div id="fetchVenAddr" rol="alert"></div>
56-
57-
<div>
58-
<div class="card-deck mb-3 text-center">
59-
<div class="card mb-4 box-shadow">
60-
<div class="card-header">
61-
<h4 class="my-0 font-weight-normal">Gold</h4>
62-
</div>
63-
<div class="card-body">
64-
<h1 class="card-title pricing-card-title">Ξ 0.1 <small class="text-muted">ether</small></h1>
65-
66-
<button type="button" class="btn btn-lg btn-block btn-outline-primary" onClick="startApp().submitDeposit(0.1);">Donate</button>
67-
</div>
68-
</div>
69-
<div class="card mb-4 box-shadow">
70-
<div class="card-header">
71-
<h4 class="my-0 font-weight-normal">Bronze</h4>
72-
</div>
73-
<div class="card-body">
74-
<h1 class="card-title pricing-card-title">Ξ 0.01 <small class="text-muted">ether</small></h1>
75-
76-
<button type="button" class="btn btn-lg btn-block btn-primary" onClick="startApp().submitDeposit(0.01);">Donate</button>
77-
</div>
78-
</div>
79-
<div class="card mb-4 box-shadow">
80-
<div class="card-header">
81-
<h4 class="my-0 font-weight-normal">Custom</h4>
82-
</div>
83-
<div class="card-body">
84-
<input type="number" class="form-control card-title pricing-card-title" id="donationAmount" placeholder="Enter ether amount" required>
85-
86-
<button type="button" class="btn btn-lg btn-block btn-dark" onClick="startApp().submitDeposit();">Donate</button>
87-
</div>
88-
</div>
89-
</div>
90-
91-
<!-- lazy spacing -->
92-
<br>
93-
94-
<!-- Withdraw section -->
95-
<h2>Withdraw</h2>
96-
<button type="submit" class="btn btn-primary" onClick="startApp().withdraw();">Withdraw donations from contract</button>
97-
</form>
98-
99-
<!-- Dimissible transaction confirmation footer alert -->
100-
<footer id="txStatus" class="fixed-bottom container">
101-
</footer>
141+
<div class="col-sm-4 col-md-4">
142+
<i class="fas fa-pen-nib fa-4x"></i>
143+
<h1 class="text-uppercase">Ease</h1>
144+
<p class="lead" style="color:#888;">Get donations from anybody as a simple Eth transfer transaction</p>
145+
</div>
146+
<div class="col-sm-4 col-md-4">
147+
<i class="fas fa-piggy-bank fa-4x"></i>
148+
<h1 class="text-uppercase">It's own bank</h1>
149+
<p class="lead" style="color:#888;">Each contract retains received Eth as a vault.</p>
150+
</div>
151+
</div>
102152

103153
</div>
154+
</section>
155+
156+
157+
<!-- powered by Eth -->
158+
<section class="ethSection container text-center"><a href="https://ethereum.org" target="_blank" rel="noopener noreferrer"><img src="powered-by-ethereum.png" class="ethLogo" alt=""></a></section>
159+
160+
<!-- contact -->
161+
<div class="mastfoot text-center">
162+
<div class="inner">
163+
<p>Built with love by <a target="_blank" href="https://twitter.com/mohamedhayibor">Mo</a></p>
164+
</div>
165+
</div>
166+
167+
<!-- Dimissible transaction confirmation footer alert -->
168+
<footer id="txStatus" class="fixed-bottom container">
169+
</footer>
104170

105171
<script>
106172
window.addEventListener('load', function() {

Diff for: ‎powered-by-ethereum.png

67.5 KB
Loading

Diff for: ‎vault1.jpg

-117 KB
Binary file not shown.

0 commit comments

Comments
 (0)