forked from Adetona/keepthechange
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (146 loc) · 6.71 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
<!doctype>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Keep the change</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="assets/animate.css">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="stylesheet" href="assets/app.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="The MMM for dates. Find out how much you can get back as change for every date you go to #keepthechangebruh">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@keepdchangebruh">
<meta name="twitter:title" content="#KeepTheChangeBruh #5kBae">
<meta name="twitter:description" content="The MMM for dates. Find out how much you can get back as change for every date you go to #keepthechangebruh">
<meta name="twitter:creator" content="@keepdchangebruh">
<meta name="twitter:image" content="http://www.keepthechangebruh.com.ng/image/logo.png">
<meta name="twitter:domain" content="www.keepthechangebruh.com.ng">
<!-- Og data for facebook -->
<meta property="og:site_name" content="#KeepTheChangeBruh #5kBae""/>
<meta property="og:type" content="website" />
<meta property="og:title" content="#KeepTheChangeBruh #5kBae" />
<meta property="og:url" content="www.keepthechangebruh.com.ng" />
<meta property="og:image" content="http://www.keepthechangebruh.com.ng/image/logo.png" />
<meta name="og:description" content="The MMM for dates. Find out how much you can get back as change for every date you go to #keepthechangebruh">
<!-- End og data -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96571593-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<div class="row step stepminusone" ng-show="step==-1">
<div class="col-md-12 animated fadeInDown">
<p class="text-center title"> Leave here please. For twitter boys only!!! </p>
<p class="text-center next-btn" style="margin-top: 50px"> <button ng-click="reloadPage()" type="button" class="btn btn-secondary" style="width : 140px">Start All Over </button> </p>
</div>
</div>
<div class="row step stepzero" ng-show="step==0">
<div class="col-md-12 animated fadeInDown">
<p class="text-center title"> Find out how much change you can get from a date </p>
<p class="text-center next-btn"> <button type="button" ng-click="nextStep(step)" class="btn btn-secondary">Start</button> </p>
</div>
<a href="About.html" class="btn btn-secondary about-btn" id="button">About</a>
</div>
<div class="row step stepone" ng-show="step==1">
<div class="col-md-12 animated slideInLeft">
<p class="text-center title"> Which one are you?</p>
<p class="text-center options" ng-init="gender='guy'">
<label>
<i class="em em-man"></i>
<input type="radio" class="gender" ng-model="gender" value="guy" ng-selected="true"> GUY
</label>
       
<label>
<i class="em em-woman"></i>
<input type="radio" class="gender" ng-model="gender" value="babe"> BABE
</label>
</p>
<p class="text-center next-btn"> <button ng-click="nextStep(step)" type="button" class="btn btn-secondary" style="width : 120px">Next</button></p>
</div>
</div>
<div class="row step steptwo" ng-show="step==2">
<div class="col-md-12 animated slideInLeft">
<p class="text-center title"> What bank do you use?</p>
<select class="form-control" id="select" ng-model="bank" ng-options="x for x in banks">
</select>
<p class="text-center next-btn" ng-show="bank!='Choose'"> <button ng-click="nextStep(step)" type="button" class="btn btn-secondary">Next</button></p>
</div>
</div>
<div class="row step stepthree" ng-show="step==3">
<div class="col-md-12 animated slideInLeft">
<p class="text-center title" id="text"> Oshey! Bahd guy! So how much did you spend on the date? </p>
<p class="text-center subtitle"><label>Enter Value in Naira</label>
</p>
<input type="number" class="form-control amount-input text-center" ng-model="dateCost" placeholder="Example : ₦ 3800" id="Value" required>
<p class="text-center next-btn">
<button type="button" ng-click="endCalc()" class="btn btn-secondary">
Next
</button>
</p>
</div>
</div>
<div class="row step stepfour" ng-show="step==4">
<div class="col-md-12 animated slideInLeft">
<p class="text-center title">Based on our calculations, your refund is</p>
<p class="text-center refund">
{{refund | currency:"₦"}}
</p>
<p class="text-center change">*whispers* with {{change | currency:"₦"}} change.</p>
<p class="text-center keepthechange">#KeepTheChangeBruh</p>
<p class="text-center share">
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Lol!%20I%20can%20keep%20₦{{change | currency:'':0}}%20change%20on%20a%20₦{{dateCost | currency:'':0}}%20date.%20Check%20yours%20now%20www.keepthechangebruh.com.ng&hashtags=KeepTheChangeBruh,5kBae&via=keepdchangebruh"
data-size="large"><span class="twitter-t">T</span>
<button type="button" class="twitter-btn btn btn-secondary" id="button">
SHARE ON TWITTER
</button>
</a>
</p>
</div>
<button type="button" ng-click="reloadPage()" class="btn btn-secondary next-btn" id="button">RESTART</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.step = 0;
$scope.gender = "";
$scope.dateCost;
$scope.banks = ['Choose', 'Wema Bank', 'Wema Bank', 'Wema Bank', 'Wema Bank'];
$scope.bank = $scope.banks[0];
$scope.refund = 0;
$scope.change;
$scope.nextStep = function(step)
{
// if(step == 1)
// {
// if($scope.gender == 'babe')
// {
// $scope.fail();
// return;
// }
// }
$scope.step += 1;
}
$scope.fail = function()
{
$scope.step = -1;
}
$scope.endCalc = function()
{
$scope.refund = parseInt($scope.dateCost * 1.3158);
$scope.change = parseInt($scope.refund - $scope.dateCost);
$scope.step = 4;
}
$scope.reloadPage = function(){window.location.reload();}
});
</script>
</body>
</html>