-
Notifications
You must be signed in to change notification settings - Fork 1
/
otp-saving.html
129 lines (119 loc) · 6.49 KB
/
otp-saving.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LUBUS | AlpineTrails - OTP Saving</title>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="./build/style.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body class="bg-indigo-50">
<div class="flex flex-col items-center justify-start min-w-full min-h-screen px-4 py-8">
<!-- Header -->
<div class="flex flex-col items-center justify-center mb-14">
<a href="./index.html"
class="flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide bg-indigo-800 rounded-md hover:bg-indigo-900 text-indigo-50">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
Browse All
</a>
</div>
<!-- Trail-->
<div class="container max-w-3xl mx-auto mt-auto mb-12">
<!-- Title -->
<h1 class="mb-8 text-2xl font-medium text-center text-gray-500">Calculate OTP Saving</h1>
<div x-data="savings()">
<div class="esc-otp-count">
<input type="range" min="5000" max="998000" step="1000" x-model="savings.value"
x-on:input="getSavings()" value="5000" />
<span class="block text-center text-gray-400"
x-text="`OTP verification's ${savings.value.toLocaleString()}`"></span>
</div>
<div class="flex flex-col items-center justify-center mt-2 md:flex-row">
<div class="w-full mt-4 text-center md:w-1/2">
<div class="text-5xl text-indigo-500 font-extralight"
x-text="`₹.${savings.cost.otp.toLocaleString()}`"></div>
<span class="block mt-2 font-thin text-center text-gray-500">Cost for OTP</span>
</div>
<div class="w-full mt-4 text-center md:w-1/2">
<div class="text-5xl text-indigo-500 font-extralight"
x-text="`₹.${savings.cost.notp.toLocaleString()}`"></div>
<span class="block mt-2 font-thin text-center text-gray-500">Cost for nOTP</span>
</div>
</div>
<div class="flex justify-center mt-6 border-t-2 border-indigo-100">
<div class="w-full mt-4 text-center md:w-1/2">
<div class="text-5xl text-indigo-500 font-extralight"
x-text="`₹.${savings.amount.toLocaleString()}`"></div>
<span class="block mt-2 font-thin text-center text-gray-500">Savings on verification's</span>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="flex flex-col items-center mt-auto">
<!-- Source Code -->
<div
class="inline-block mx-auto my-4 text-sm text-gray-500 border border-gray-300 rounded hover:bg-gray-600 hover:text-white">
<a class="flex items-center px-2 py-1 "
href="https://github.com/lubusIN/alpinetrails/blob/main/otp-saving.html" target="_new">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
source code
</a>
</div>
<!-- Work with us -->
<div
class="relative flex px-4 py-2 mx-auto overflow-hidden text-sm text-indigo-100 bg-indigo-800 border border-gray-200 rounded-md shadow-2xl">
<span class="flex items-center">
<svg class="w-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd" />
</svg>
Work With Us
</span>
<svg class="w-10 h-10 -my-2 -mr-8 text-indigo-800 transform" fill="currentColor" viewBox="0 0 100 100"
preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<a class="flex items-center px-8 ml-3 -my-2 -mr-4 italic bg-indigo-500 hover:underline"
href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<!-- Component Data -->
<script>
function savings() {
return {
savings: {
value: 5000, // Verifications per month
rate: {
otp: 0.21,
notp: 0.09,
},
cost: {
otp: 1050,
notp: 450,
},
amount: 600, // Savings per month
},
getSavings() {
this.savings.cost.otp = parseFloat(this.savings.value * this.savings.rate.otp);
this.savings.cost.notp = parseFloat(this.savings.value * this.savings.rate.notp);
this.savings.amount = parseFloat(this.savings.cost.otp - this.savings.cost.notp);
return this.savings.amount;
},
}
}
</script>
</body>
</html>