-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (216 loc) · 14 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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!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>Login</title>
<link rel="stylesheet" href="./resources/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<script src="./tailwind-dev.txt"></script>
</head>
<body class="text-gray-800" style="font-family: Montserrat !important; background-color: #F4F4FC;">
<header navbar--global class="z-50 bg-white fixed left-0 top-0 w-full h-16 border border-transparent border-b-gray-200 flex justify-between items-center px-4">
<div class="flex items-center">
<img class="w-10" src="resources/images/logo--centrex--gradient.png" alt="centrex logo">
<p class="font-semibold text-gray-800 ml-2">Centrex</p>
</div>
<div class="w-fit h-fit flex items-center relative">
<input placeholder="What are you looking for?" class="w-[30rem] border
h-10 ml-4 px-3 rounded-md items-center hidden text-sm bg-slate-100 text-center
lg:flex relative outline-none font-medium text-gray-800 placeholder:font-normal">
</input>
<img class="w-8 absolute right-2" src="resources/images/logo--centrex.svg" alt="">
</div>
<div class="flex items-center">
<img class="lg:hidden" src="resources/images/menu--mobile.svg" alt="mobile menu">
<img class="w-8 mr-4 hidden lg:block" src="resources/images/logo--centrex.svg" alt="">
<img class="w-8 mr-4 hidden lg:block" src="resources/images/logo--centrex.svg" alt="">
<img class="w-8 mr-4 hidden lg:block" src="resources/images/logo--centrex.svg" alt="">
<img class="w-11 h-11 rounded-[100%] bg-black object-cover hidden lg:block" src="resources/images/graph--example.png" alt="">
</div>
</header>
<nav mobile--second--nav class="z-40 lg:shadow-none shadow-md scrollbar-hide bg-white
fixed top-16 lg:top-0 lg:w-60 lg:h-full left-0 w-full h-16 border border-transparent lg:border-r-gray-200 lg:border-b-transparent border-b-gray-200
border flex lg:flex-col lg:pt-16 lg:items-start items-center px-4 overflow-x-scroll text-sm">
<p class="hidden lg:block mt-12 mb-4 text-sm font-semibold">Dashboard</p>
<a href="<?php echo base_url(); ?>en/centrex/simple/onramping2" class="min-w-fit font-medium flex items-center lg:no-underline selected "><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/p2p.png"> Buy Crypto</a>
<a href="<?php echo base_url(); ?>en/centrex/swap" class="ml-6 lg:ml-0 lg:mt-1 min-w-fit whitespace-nowrap font-medium flex items-center lg:no-underline"><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/swap.png"> Swap</a>
<a href="<?php echo base_url(); ?>en/centrex/earn/overview" class="ml-6 lg:ml-0 lg:mt-1 min-w-fit whitespace-nowrap font-medium flex items-center lg:no-underline"><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/stake.png"> Savings</a>
<a href="<?php echo base_url(); ?>en/centrex/wallet/overview" class="ml-6 lg:ml-0 lg:mt-1 min-w-fit whitespace-nowrap font-medium flex items-center lg:no-underline"><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/wallet.png"> Wallet</a>
<a href="<?php echo base_url(); ?>en/centrex/payment/dashboard" class="ml-6 lg:ml-0 lg:mt-1 min-w-fit whitespace-nowrap font-medium flex items-center lg:no-underline"><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/Brand Black.png"> Centrex Pay</a>
<a href="<?php echo base_url(); ?>/watchlist" class="ml-6 lg:ml-0 lg:mt-1 min-w-fit whitespace-nowrap font-medium flex items-center lg:no-underline"><img class="mr-2" src="<?php echo userassets(); ?>custom_theme3/images/news.png"> Watchlist & News</a>
<div class="absolute bottom-4 left-4 font-medium lg:block hidden">© 2018-2022 Centrex.ai</div>
</nav>
<main class="w-full pt-[9rem] px-4 pb-[6rem] lg:pt-[5rem] 2xl:px-0 2xl:justify-center 2xl:flex lg:pl-[16rem] ">
<section class="flex flex-col lg:flex-row max-w-[1200px] 2xl:w-[1000px] ">
<div class="w-full lg:min-w-2/3">
<div box class="w-full bg-white p-4 rounded-t-xl flex flex-col">
<div class="flex items-start justify-between">
<p class="text-xs font-medium">Estimated Balance</p>
<div class="flex items-center w-fit">
<button class="font-semibold text-xs text-gray-600 px-2">6m</button>
<button class="font-semibold text-xs text-gray-600 px-2">1m</button>
<button class="font-semibold text-xs text-gray-600 px-2">7d</button>
<button class="font-semibold text-xs mx-2 border-transparent border-2 border-b-gray-800">24h</button>
</div>
</div>
<div class="flex items-center mt-2">
<img class="w-6 h-6 rounded-3xl object-cover object-left" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" alt="">
<p class="ml-2 text-3xl text-black italic font-medium">$324,774.16</p>
<p class="flex items-center bg-gray-100 px-2 py-1 text-xs font-semibold text-buy rounded-md ml-4">
<img class="svg-buy w-3 mr-1" src="resources/images/trend-up.svg" alt="" class="w-4 h-4 mr-1">
4.2%
</p>
</div>
<canvas id="main-line-chart" height="200"></canvas>
</div>
<div box-bottom class="w-full px-4 py-2 flex bg-white items-center justify-between border border-transparent border-t-gray-200 rounded-b-xl">
<p class="text-sm text-gray-600 font-medium">Operations</p>
<div class="flex items-center">
<a class="text-sm py-3 flex items-center justify-center font-semibold mr-4 text-special hover:opacity-90 duration-300" href="">Deposit</a>
<a class="text-sm py-2 rounded-lg px-4
bg-special text-white flex items-center justify-center
font-semibold hover:opacity-90 group duration-300" href=""><img class="invert w-4 rotate-180 mr-2 group-hover:mr-4 duration-300" src="resources/images/arrow-circle-broken-up.svg" alt=""> Buy</a>
</div>
</div>
<p class="mt-6 text-xl font-semibold text-gray-600 lg:hidden">Investments</p>
<div class="w-full lg:mt-4 flex flex-col md:flex-row md:justify-between">
<div class="w-full md:w-[calc(50%_-_0.625rem)] mt-2 md:mt-0">
<div box class="w-full flex flex-col">
<div class="w-full bg-white p-4 flex flex-col rounded-t-xl">
<p class="font-semibold text-gray-800 text-sm flex items-center justify-between">Locked Savings <span class="text-green-600 text-sm font-semibold ml-2">+ %4.03</span></p>
<div class="flex items-center">
<img class="" src="resources/images/graph--example.png">
</div>
</div>
</div>
<div box-bottom class="w-full flex bg-white items-center border border-transparent border-t-gray-200 px-4 rounded-b-xl">
<a class="w-full h-12 flex items-center justify-center font-medium" href="">Overview</a>
</div>
</div>
<div class="w-full md:w-[calc(50%_-_0.625rem)] mt-4 md:mt-0">
<div box class="w-full flex flex-col">
<div class="w-full bg-white p-4 flex flex-col rounded-t-xl">
<p class="font-semibold text-gray-800 text-sm flex items-center justify-between">Flexible Savings <span class="text-green-600 text-sm font-semibold ml-2">+ %4.03</span></p>
<div class="flex items-center">
<img class="" src="resources/images/graph--example.png">
</div>
</div>
</div>
<div box-bottom class="w-full flex bg-white items-center border border-transparent border-t-gray-200 px-4 rounded-b-xl">
<a class="w-full h-12 flex items-center justify-center font-medium" href="">Overview</a>
</div>
</div>
</div>
</div>
<p class="mt-6 text-xl font-semibold text-gray-600 lg:hidden">Fast Payments</p>
<div class="w-full lg:h-auto lg:w-[calc(45.3%_-_1rem)] lg:min-w-[250px] lg:ml-4 bg-white p-4 flex flex-col justify-between rounded-xl lg:mt-0 mt-2">
<div class="w-full">
<div class="w-full relative flex justify-between h-[50px] p-1 rounded-lg bg-slate-100">
<button class="w-1/2 z-10 font-semibold">Pay</button>
<button class="w-1/2 z-10 font-medium text-gray-600">Receive</button>
<div class="bg-white rounded-md w-[calc(50%_-_4px)] absolute left-1 h-[42px] "></div>
</div>
<label class="text-xs font-medium mb-1">You pay</label>
<div class="w-full relative h-[50px] mb-2">
<input type="text" placeholder="0" class="h-[50px] rounded-lg px-4 border outline-violet-700 font-semibold placeholder:font-normal caret-violet-500 w-full bg-slate-100 text-end">
<div class="h-[42px] absolute min-w-[120px] bg-white top-1 left-1 rounded-lg flex justify-between px-2 items-center">
<img src="resources/images/logo--centrex.svg" alt="" class="w-8">
<p class="font-semibold">BTC</p>
<img src="resources/images/logo--centrex.svg" alt="" class="w-6">
</div>
</div>
<label class="text-xs font-medium mb-1">Centrex ID</label>
<input type="text" placeholder="Enter Centrex ID" class="h-[50px] rounded-lg px-4 border outline-violet-700 font-semibold placeholder:font-normal caret-violet-500 w-full bg-slate-100">
<div class="w-full flex justify-center mt-4">
<input type="text" placeholder="2 Factor Code" class="h-[50px] box-border inline px-2 border-transparent border-2 border-b-purple-700 outline-violet-700 font-semibold placeholder:font-normal caret-violet-500 w-40 text-center">
</div>
</div>
<button class="w-full py-3 rounded-lg text-white font-medium bg-special mt-8">Pay</button>
</div>
</section>
</main>
<div class="absolute lg:hidden bottom-0 left-0 border w-full p-4 flex justify-center text-sm">© 2018-2022 Centrex.ai</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById("main-line-chart").getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(191, 138, 254, .20)');
gradient.addColorStop(0.8, 'rgba(191, 138, 254, 0)');
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "Balance",
backgroundColor: gradient,
fill:true,
tension: 0.4,
borderColor: "#C08BFF",
pointColor: "#C08BFF",
pointRadius: [0, 4, 4, 4, 4, 4, 4],
pointHighlightColor: "#28AFFA",
data: [0, 65, 59, 72, 75, 62, 65, 75]
}
]
};
var options = {
responsive: true,
plugins: {
legend: {
display: false,
},
tooltip: {
backgroundColor: 'rgba(28, 28, 33, 0.8)',
padding: 10,
displayColors: false,
titleFont:{
family: 'Montserrat',
weight: '500'
},
bodyFont:{
family: 'Montserrat',
weight: '400'
},
},
},
scales: {
x: {
beforeUpdate(axis) {
const labels = axis.chart.data.labels;
for (let i=0; i<labels.length; i++) {
const lbl = labels[i];
if (typeof lbl === 'string' && lbl.length > 3) {
labels[i] = lbl.substring(0, 3); // cutting
}
}
},
grid: {
drawBorder: false,
display: false,
zeroLineColor: 'transparent',
},
ticks: {
align: 'inner',
color: '#303547',
font: {
size: 12,
family: 'Montserrat',
weight: 600
}
},
},
y: {
display: false,
},
},
};
var myLineChart = new Chart(ctx, {
type: "line",
data: data,
options: options,
});
</script>
</body>
</html>