-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindexOld.html
157 lines (145 loc) · 6.79 KB
/
indexOld.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
<!DOCTYPE html>
<html>
<title>Soup Kitchen Coding</title>
<meta charset="UTF-8">
<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://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size: 16px;}
img {margin-bottom: -8px;}
.mySlides {display: none;}
</style>
<body class="w3-content w3-black" style="max-width:1500px;">
<!-- The App Section -->
<div class="w3-padding-64" style="background-color:#57BD91;">
<div class="w3-row-padding">
<div class="w3-col l8 m6">
<h1 class="w3-jumbo"><b>Gratzi</b></h1>
<h1 class="w3-xxxlarge w3-text-white"><b>The Smart Tip Calculator</b></h1>
<p><span class="w3-xlarge w3-text-dark-grey">Never worry about tipping again.</span> No matter what country you're in, Gratzi has your back. Our research team has done the heavy lifting and pre programmed over 100 individual tipping trends. Since gratuity is based on how much people generally give, Gratzi can help pull these trends together to make knowing how much to tip so much easier.</p>
<button class="w3-button w3-light-grey w3-padding-large w3-section w3-hide-small" onclick="document.getElementById('download').style.display='block'">
<i class="fa fa-download"></i> Download Application
</button>
<p>Available for <i class="fa fa-android w3-xlarge w3-text-white"></i> <i class="fa fa-apple w3-xlarge"></i></p>
</div>
<div class="w3-col l4 m6">
<img src="https://user-images.githubusercontent.com/25086506/59888741-d0d88280-938e-11e9-95d9-b356ee3734cc.png" class="w3-image w3-right w3-hide-small" width="335" height="471">
<div class="w3-center w3-hide-large w3-hide-medium">
<button class="w3-button w3-block w3-padding-large" onclick="document.getElementById('download').style.display='block'">
<i class="fa fa-download"></i> Download Application
</button>
<img src="/img_app.jpg" class="w3-image w3-margin-top" width="335" height="471">
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="download" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content" style="padding:32px">
<div class="w3-container w3-white">
<i onclick="document.getElementById('download').style.display='none'" class="fa fa-remove w3-xlarge w3-button w3-transparent w3-right w3-xlarge"></i>
<h2 class="w3-wide">DOWNLOAD</h2>
<p>Download the app in AppStore or Google Play.</p>
<i class="fa fa-android w3-large"></i> <i class="fa fa-apple w3-large"></i> <i class="fa fa-windows w3-large"></i>
<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"></p>
<button type="button" class="w3-button w3-block w3-padding-large w3-red w3-margin-bottom" onclick="document.getElementById('download').style.display='none'">Fake Download</button>
</div>
</div>
</div>
<!-- Clarity Section -->
<div class="w3-padding-64 w3-white">
<div class="w3-row-padding">
<div class="w3-col l4 m6">
<img class="w3-image w3-round-large w3-hide-small" src="https://user-images.githubusercontent.com/25086506/59888897-64aa4e80-938f-11e9-9d8e-a9015af19318.png" alt="App" width="335" height="471">
</div>
<div class="w3-col l8 m6">
<h1 class="w3-jumbo"><b>Machine Learning</b></h1>
<h1 class="w3-xxxlarge" style="color:#57BD91;"><b>Gratzi is always getting smarter.</b></h1>
<p><span class="w3-xlarge">More data means more accurate predictions.</span> As you use Gratzi, we hope you will send your suggestions over to us so that we can learn from them. We make this super easy, just tap a button and your tip is on its way to improving Gratzi's algorithms. With more data we can implement advanced ML to give hyperlocal suggestions, and bring Gratzi to even more countries.</p>
</div>
</div>
</div>
<!-- Features Section -->
<div class="w3-container w3-padding-64 w3-center" style="background-color:#57BD91;">
<h1 class="w3-jumbo"><b>Features</b></h1>
<p>What makes Gratzi so special.</p>
<div class="w3-row" style="margin-top:64px">
<div class="w3-col s3">
<i class="fa fa-user w3-text-white w3-jumbo"></i>
<p>Easy</p>
</div>
<div class="w3-col s3">
<i class="fa fa-shield w3-text-white w3-jumbo"></i>
<p>Safe</p>
</div>
<div class="w3-col s3">
<i class="fa fa-globe w3-text-white w3-jumbo"></i>
<p>Global</p>
</div>
<div class="w3-col s3">
<i class="fa fa-heart w3-text-white w3-jumbo"></i>
<p>Free</p>
</div>
</div>
</div>
<!-- Pricing Section -->
<div class="w3-padding-64 w3-center w3-white">
<h1 class="w3-jumbo" style="color:#57BD91;"><b>How it Works</b></h1>
<p class="w3-large">Data is everything.</p>
<div class="w3-row-padding" style="margin-top:64px">
<div class="w3-half w3-section">
<ul class="w3-ul w3-card w3-hover-shadow">
<li class="w3-black w3-xlarge w3-padding-32">At Launch</li>
<li class="w3-padding-16"><b>Research normal tipping rates from accross the world</b></li>
<li class="w3-padding-16"><b>Tipping suggestion made based on research and user location</b></li>
<li class="w3-padding-16"><b>User tweaks/gives feedback on tip</b></li>
<li class="w3-padding-16">
<h2 class="w3-opacity">Educated Tip Calculated</h2>
</li>
</ul>
</div>
<div class="w3-half w3-section">
<ul class="w3-ul w3-card w3-hover-shadow">
<li class="w3-xlarge w3-text-white w3-padding-32" style="background-color:#57BD91;">Over Time</li>
<li class="w3-padding-16"><b>Data collected based on user tips and feedback</b></li>
<li class="w3-padding-16"><b>ML Model trained previous tips</b></li>
<li class="w3-padding-16"><b>Tipping suggestion made based on ML prediction</b></li>
<li class="w3-padding-16">
<h2 class="w3-opacity">Smart Tip Calculated</h2>
</li>
</ul>
</div>
</div>
<br>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-light-grey w3-center w3-xlarge">
<div class="w3-section">
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
</footer>
<script>
// Slideshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>