forked from oele-dev/pos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
174 lines (173 loc) · 17.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="font-base">
<div class="flex">
<nav class="hidden md:block sidebar border border-gray-200 h-screen w-40">
<figure
class="px-4 py-8"
>
<svg width="135" height="20" viewBox="0 0 135 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.75 9.775C13.4 10.55 14.425 12.125 14.425 14.025C14.425 16.875 11.975 19.025 8.75 19.025H0.675V1.525H8.575C11.675 1.525 13.95 3.4 13.95 6C13.95 7.55 13.075 8.95 11.75 9.775ZM9.375 6.8C9.375 5.875 8.75 5.275 7.75 5.275H5.3V8.325H7.75C8.75 8.325 9.375 7.7 9.375 6.8ZM7.925 15.05C8.975 15.05 9.65 14.4 9.65 13.45C9.65 12.525 8.975 11.875 7.925 11.875H5.3V15.05H7.925ZM27.6342 5.5H31.1092V19H27.5092L27.1092 18.05C26.0092 18.95 24.6092 19.45 23.0342 19.45C18.9092 19.45 15.9592 16.45 15.9592 12.25C15.9592 8.075 18.9092 5.1 23.0342 5.1C24.6342 5.1 26.0592 5.625 27.1592 6.55L27.6342 5.5ZM23.6592 15.35C25.4092 15.35 26.6842 14.025 26.6842 12.25C26.6842 10.5 25.4092 9.2 23.6592 9.2C21.9092 9.2 20.6342 10.5 20.6342 12.25C20.6342 14.025 21.9092 15.35 23.6592 15.35ZM42.1938 5.125C45.3188 5.125 47.3938 7.35 47.3938 10.775V19H42.7438V11.425C42.7438 9.85 42.1438 9.075 40.9688 9.075C39.5188 9.075 38.6938 10.075 38.6938 11.8V19H34.0438V5.5H37.3188L37.9438 6.9C38.9438 5.775 40.4438 5.125 42.1938 5.125ZM63.882 19H58.382L55.007 13.3V19H50.357V0.625H55.007V10.8L58.232 5.5H63.457L59.232 11.95L63.882 19ZM72.374 1.5C77.674 1.5 81.424 5.125 81.424 10.25C81.424 15.35 77.674 19 72.374 19H65.299V1.5H72.374ZM72.149 14.6C74.749 14.6 76.474 12.825 76.474 10.25C76.474 7.65 74.749 5.925 72.149 5.925H70.149V14.6H72.149ZM94.602 5.5H98.077V19H94.477L94.077 18.05C92.977 18.95 91.577 19.45 90.002 19.45C85.877 19.45 82.927 16.45 82.927 12.25C82.927 8.075 85.877 5.1 90.002 5.1C91.602 5.1 93.027 5.625 94.127 6.55L94.602 5.5ZM90.627 15.35C92.377 15.35 93.652 14.025 93.652 12.25C93.652 10.5 92.377 9.2 90.627 9.2C88.877 9.2 87.602 10.5 87.602 12.25C87.602 14.025 88.877 15.35 90.627 15.35ZM106.212 19.45C102.537 19.45 100.312 17.5 100.262 14.575H104.737C104.737 15.575 105.437 16.025 106.312 16.025C106.987 16.025 107.637 15.675 107.637 14.975C107.637 14.2 106.612 13.975 105.312 13.775C103.212 13.425 100.437 12.8 100.437 9.525C100.437 6.825 102.762 5.075 106.212 5.075C109.637 5.075 111.887 6.9 111.937 9.625H107.562C107.562 8.775 106.987 8.375 106.162 8.375C105.412 8.375 104.912 8.75 104.912 9.375C104.912 10.125 105.937 10.325 107.212 10.55C109.362 10.925 112.187 11.375 112.187 14.775C112.187 17.6 109.812 19.45 106.212 19.45ZM122.616 5.125C125.716 5.125 127.716 7.375 127.716 10.875V19H123.066V11.425C123.066 9.875 122.516 9.075 121.291 9.075C119.891 9.075 119.016 10.075 119.016 11.8V19H114.366V0.625H119.016V6.4C120.016 5.6 121.266 5.125 122.616 5.125ZM130.304 19V14.7H134.829V19H130.304Z" fill="#343C6A"/>
</svg>
</figure>
<ul class="py-4 px-4 flex flex-col gap-4 text-sm text-gray-400">
<li><a class="hover:text-violet-400 hover:font-bold" href="/index.html">Dashboard</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="/transactions.html">Transactions</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Accounts</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Investments</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Credit cards</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Loans</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Services</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">My Privilegies</a></li>
<li><a class="hover:text-violet-400 hover:font-bold" href="#">Setting</a></li>
</ul>
</nav>
<!-- sidebar -->
<main class="flex-auto h-screen">
<nav class="topbar flex justify-between items-center items-stretch">
<div class="p-4 flex-auto">
<h2 class="font-semibold text-lg text-gray-700">Overview</h2>
</div>
<div class="flex-auto w-1/3 p-2 flex items-center justify-end gap-2">
<input type="search" placeholder="Search for something" class="bg-gray-100 rounded-full px-3 py-2 text-xs font-light font-gray-300">
<button class="bg-gray-100 rounded-full p-2">
<svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_105_443)">
<path d="M13.2845 25H11.7155C10.4465 25 9.41401 23.9676 9.41401 22.6986V22.1678C8.87451 21.9954 8.35034 21.7778 7.84678 21.5172L7.47061 21.8934C6.55952 22.8056 5.1001 22.7789 4.21548 21.8931L3.10654 20.7842C2.22036 19.899 2.19487 18.44 3.10684 17.5291L3.48271 17.1532C3.22212 16.6496 3.00459 16.1255 2.83218 15.5859H2.30142C1.03247 15.5859 0 14.5535 0 13.2845V11.7155C0 10.4465 1.03247 9.41406 2.30146 9.41406H2.83223C3.00464 8.87451 3.22217 8.35039 3.48276 7.84683L3.10659 7.4707C2.19517 6.56025 2.22031 5.10117 3.10688 4.21558L4.21592 3.10659C5.10259 2.2187 6.56167 2.19653 7.471 3.10688L7.84683 3.48271C8.35039 3.22217 8.87456 3.00459 9.41406 2.83218V2.30142C9.41406 1.03242 10.4465 0 11.7155 0H13.2845C14.5535 0 15.5859 1.03242 15.5859 2.30142V2.83223C16.1254 3.00459 16.6496 3.22217 17.1532 3.48276L17.5293 3.10659C18.4404 2.19438 19.8999 2.22114 20.7845 3.10693L21.8934 4.21582C22.7796 5.10103 22.8051 6.55996 21.8931 7.47095L21.5172 7.84683C21.7778 8.35039 21.9954 8.87446 22.1678 9.41406H22.6985C23.9675 9.41406 25 10.4465 25 11.7155V13.2845C25 14.5535 23.9675 15.5859 22.6985 15.5859H22.1678C21.9954 16.1255 21.7778 16.6496 21.5172 17.1532L21.8934 17.5293C22.8048 18.4398 22.7797 19.8989 21.8931 20.7845L20.7841 21.8935C19.8974 22.7813 18.4383 22.8035 17.529 21.8932L17.1532 21.5173C16.6496 21.7779 16.1254 21.9955 15.5859 22.1679V22.6987C15.5859 23.9676 14.5535 25 13.2845 25ZM8.09165 19.979C8.79121 20.3927 9.54414 20.7053 10.3295 20.908C10.6529 20.9914 10.8789 21.2831 10.8789 21.6171V22.6986C10.8789 23.1599 11.2542 23.5352 11.7155 23.5352H13.2845C13.7458 23.5352 14.1211 23.1599 14.1211 22.6986V21.6171C14.1211 21.2831 14.3471 20.9914 14.6706 20.908C15.4559 20.7053 16.2088 20.3927 16.9084 19.979C17.1962 19.8088 17.5627 19.8551 17.7992 20.0916L18.5652 20.8576C18.8955 21.1883 19.4258 21.1806 19.748 20.858L20.8577 19.7483C21.1791 19.4273 21.1898 18.8968 20.858 18.5654L20.0917 17.7991C19.8552 17.5626 19.8089 17.1961 19.9791 16.9083C20.3928 16.2088 20.7053 15.4559 20.908 14.6705C20.9915 14.3471 21.2832 14.1211 21.6172 14.1211H22.6986C23.1599 14.1211 23.5352 13.7458 23.5352 13.2846V11.7155C23.5352 11.2542 23.1599 10.879 22.6986 10.879H21.6172C21.2832 10.879 20.9915 10.653 20.908 10.3296C20.7053 9.54419 20.3928 8.79126 19.9791 8.09175C19.8089 7.80395 19.8552 7.43745 20.0917 7.20103L20.8577 6.43496C21.1889 6.1042 21.1802 5.57393 20.858 5.2521L19.7484 4.14248C19.4268 3.82041 18.8963 3.81099 18.5655 4.14219L17.7992 4.90855C17.5628 5.14502 17.1962 5.19131 16.9084 5.02109C16.2089 4.60737 15.456 4.29482 14.6706 4.09214C14.3472 4.00869 14.1212 3.71699 14.1212 3.38296V2.30142C14.1212 1.84014 13.7458 1.46484 13.2846 1.46484H11.7156C11.2543 1.46484 10.879 1.84014 10.879 2.30142V3.38286C10.879 3.71689 10.653 4.00859 10.3295 4.09204C9.54419 4.29473 8.79126 4.60728 8.0917 5.021C7.80381 5.19116 7.43735 5.14487 7.20093 4.90845L6.43491 4.14238C6.10464 3.81172 5.57422 3.81938 5.2521 4.14204L4.14238 5.25171C3.821 5.57271 3.81025 6.10313 4.14209 6.43457L4.90845 7.20093C5.14487 7.43735 5.19116 7.80386 5.021 8.09165C4.60728 8.79116 4.29478 9.54409 4.09209 10.3295C4.00859 10.6529 3.71689 10.8789 3.38291 10.8789H2.30146C1.84019 10.8789 1.46484 11.2542 1.46484 11.7155V13.2845C1.46484 13.7458 1.84019 14.1211 2.30146 14.1211H3.38286C3.71689 14.1211 4.00854 14.3471 4.09204 14.6705C4.29473 15.4559 4.60728 16.2088 5.02095 16.9083C5.19111 17.1961 5.14482 17.5626 4.9084 17.799L4.14233 18.5651C3.81118 18.8959 3.81982 19.4261 4.14204 19.7479L5.25166 20.8576C5.57329 21.1796 6.10376 21.1891 6.43452 20.8579L7.20083 20.0915C7.37505 19.9173 7.7375 19.7695 8.09165 19.979Z" fill="#718EBF"/>
<path d="M12.5 17.9395C9.50063 17.9395 7.06055 15.4993 7.06055 12.5C7.06055 9.50068 9.50063 7.06055 12.5 7.06055C15.4994 7.06055 17.9395 9.50068 17.9395 12.5C17.9395 15.4993 15.4994 17.9395 12.5 17.9395ZM12.5 8.52539C10.3083 8.52539 8.52539 10.3084 8.52539 12.5C8.52539 14.6916 10.3084 16.4746 12.5 16.4746C14.6916 16.4746 16.4746 14.6916 16.4746 12.5C16.4746 10.3084 14.6917 8.52539 12.5 8.52539Z" fill="#718EBF"/>
</g>
<defs>
<clipPath id="clip0_105_443">
<rect width="25" height="25" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<button class="bg-gray-100 rounded-full p-2">
<svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.442 25C9.289 25 7.53577 23.2479 7.53577 21.0938C7.53577 20.6625 7.88577 20.3125 8.31702 20.3125C8.74827 20.3125 9.09827 20.6625 9.09827 21.0938C9.09827 22.3866 10.1504 23.4375 11.442 23.4375C12.7337 23.4375 13.7858 22.3866 13.7858 21.0938C13.7858 20.6625 14.1358 20.3125 14.567 20.3125C14.9983 20.3125 15.3483 20.6625 15.3483 21.0938C15.3483 23.2479 13.5952 25 11.442 25Z" fill="#FE5C73"/>
<path d="M20.0357 21.875H2.84824C1.84307 21.875 1.02539 21.0573 1.02539 20.0521C1.02539 19.5187 1.25771 19.0136 1.66283 18.6666C1.68896 18.6438 1.717 18.623 1.74618 18.6041C3.2753 17.2697 4.15039 15.35 4.15039 13.3228V10.4166C4.15039 6.39591 7.42226 3.125 11.442 3.125C11.6087 3.125 11.7889 3.12805 11.9556 3.15628C12.3816 3.22704 12.6692 3.63026 12.5982 4.05521C12.5275 4.48017 12.117 4.7678 11.6993 4.69685C11.6159 4.6833 11.5244 4.6875 11.442 4.6875C8.28381 4.6875 5.71289 7.25727 5.71289 10.4166V13.3228C5.71289 15.8396 4.60968 18.2209 2.68898 19.8551C2.67334 19.8677 2.6598 19.8792 2.64301 19.8906C2.61497 19.9261 2.58789 19.9802 2.58789 20.0521C2.58789 20.1937 2.70672 20.3125 2.84824 20.3125H20.0357C20.1775 20.3125 20.2963 20.1937 20.2963 20.0521C20.2963 19.9791 20.2692 19.9261 20.24 19.8906C20.2244 19.8792 20.2108 19.8677 20.1952 19.8551C18.2734 18.2198 17.1713 15.8396 17.1713 13.3228V12.1876C17.1713 11.7563 17.5213 11.4063 17.9525 11.4063C18.3838 11.4063 18.7338 11.7563 18.7338 12.1876V13.3228C18.7338 15.3511 19.6098 17.2718 21.1411 18.6073C21.1691 18.626 21.1962 18.6459 21.2212 18.6678C21.6265 19.0136 21.8588 19.5187 21.8588 20.0521C21.8588 21.0573 21.0411 21.875 20.0357 21.875Z" fill="#FE5C73"/>
<path d="M18.7338 10.4166C15.8619 10.4166 13.5254 8.08029 13.5254 5.2084C13.5254 2.3365 15.8619 0 18.7338 0C21.6057 0 23.942 2.3365 23.942 5.2084C23.942 8.08029 21.6057 10.4166 18.7338 10.4166ZM18.7338 1.5625C16.7233 1.5625 15.0879 3.19786 15.0879 5.2084C15.0879 7.21874 16.7233 8.8541 18.7338 8.8541C20.7441 8.8541 22.3795 7.21874 22.3795 5.2084C22.3795 3.19786 20.7441 1.5625 18.7338 1.5625Z" fill="#FE5C73"/>
</svg>
</button>
<button>
<img class="rounded-full w-8 h-8" src="https://picsum.photos/50" alt="Avatar">
</button>
</div>
</nav>
<!-- topbar -->
<div class="content p-4 bg-gray-100">
<div class="flex flex-col md:flex-row items-stretch gap-2 mb-10">
<div class="flex gap-2">
<div class="flex-auto">
<div class="text-white bg-gradient-to-r from-[#4C49ED] to-[#0A06F4] rounded-3xl overflow-x-hidden border-2">
<div class="flex flex-col gap-8 rounded-lg ">
<div class="flex justify-between px-8 py-4">
<div>
<div class="text-xs">Balance</div>
5,756
</div>
<div>
Icon
</div>
</div>
<!-- Balance -->
<div class="flex justify-between px-8 py-4">
<div>
<div class="text-xs text-gray-400">CARD HOLDER</div>
Eddy Cusuma
</div>
<div>
<div class="text-xs text-gray-400">VALID THRU</div>
12/22
</div>
</div>
<!-- Owner -->
<div class="flex justify-between bg-gradient-to-b from-white-200 to-transparent px-8 py-4">
<div class="text-lg">
3778 **** **** 1234
</div>
<div>
MasterCard
</div>
</div>
<!-- Number -->
</div>
</div>
</div>
<!-- Card -->
<div class="flex-auto">
<div class="bg-white rounded-3xl overflow-x-hidden border-2 border-gray-300">
<div class="flex flex-col gap-8 rounded-lg ">
<div class="flex justify-between px-8 py-4">
<div>
<div class="text-xs">Balance</div>
5,756
</div>
<div>
Icon
</div>
</div>
<!-- Balance -->
<div class="flex justify-between px-8 py-4">
<div>
<div class="text-xs text-gray-400">CARD HOLDER</div>
Eddy Cusuma
</div>
<div>
<div class="text-xs text-gray-400">VALID THRU</div>
12/22
</div>
</div>
<!-- Owner -->
<div class="flex justify-between bg-gradient-to-b from-white-200 to-transparent px-8 py-4 ">
<div class="text-lg">
3778 **** **** 1234
</div>
<div>
MasterCard
</div>
</div>
<!-- Number -->
</div>
</div>
</div>
<!-- Card 2 -->
</div>
<!-- Cards -->
<div class="flex-auto bg-white p-4 rounded-2xl">
<h3>Transactions</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi iusto nihil odit aperiam, id sit
</div>
<!-- Transactions -->
</div>
<!-- First container -->
<div class="flex flex-col md:flex-row gap-4 items-stretch mb-10">
<div class="flex-auto bg-white rounded-2xl p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem quasi reprehenderit! Culpa quo nobis ab expedita, accusamus, voluptatem mollitia, nulla impedit eos iste libero vel obcaecati labore reprehenderit ullam!
</div>
<div class="flex-auto md:w-2/5 bg-white rounded-2xl p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quo adipisci commodi saepe animi mollitia omnis unde dolorem
</div>
</div>
<!-- Second container -->
<div class="flex flex-col md:flex-row gap-4 items-stretch">
<div class="flex-auto md:w-1/2 bg-white rounded-2xl p-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit rem quasi reprehenderit! Culpa quo nobis ab expedita, accusamus, voluptatem mollitia, nulla impedit eos iste libero vel obcaecati labore reprehenderit ullam!
</div>
<div class="flex-auto md:w-1/2 bg-white rounded-2xl p-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quo adipisci commodi saepe animi mollitia omnis unde dolorem
</div>
</div>
</div>
</main>
<!-- content -->
</div>
</body>
</html>