-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtransaction.html
145 lines (139 loc) · 6.88 KB
/
transaction.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
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/app.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=Comfortaa:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<script src="assets/js/jquery-3.6.0.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/common.js"></script>
<script src="assets/js/transaction.js"></script>
<title>SwipSwop</title>
</head>
<body class="antialiased font-confortaa">
<header class="bg-white fixed mx-auto w-screen z-50 shadow-lg">
<div class="flex justify-between nav-header p-4 h-20 items-center mx-auto pr-8">
<a href="index.html" class="cursor-pointer">
<img src="assets/images/logo.svg" alt="logo" class="w-36 h-8" />
</a>
<div class="hidden sm:flex divide-x-2 divide-gray-300 p-2 rounded-full bg-gray-200 gap-4">
<input type="text" class="px-2 py-1 bg-gray-200 outline-none w-64" placeholder="Find accounts" />
<button>
<img src="assets/images/ic_search.svg" alt="serch" class="mx-2 w-5" />
</button>
</div>
<div class="sm:flex items-center gap-4 hidden">
<a href="chat.html">
<img src="assets/images/icons/ic_chat.svg" alt="chat icon" class="w-6 h-6" />
</a>
<a href="notification.html">
<img src="assets/images/icons/ic_notif.svg" alt="chat icon" class="w-6 h-6"/>
</a>
<div class="flex items-center gap-2 relative">
<div class="rounded-full border-red-500 border w-10 h-10 flex-shrink-0">
<img src="assets/images/man3.png" alt="user avatar" />
</div>
<div class="btn-menu flex gap-1 cursor-pointer">
<span class="font-confortaa text-md font-bold">Edshreean</span>
<img src="assets/images/icons/angle_down.svg" alt="down icon" class="icon-menu" />
</div>
<div
class="hidden toggle-menu bg-white absolute right-0 bottom-0 transform translate-y-full px-8 py-2 shadow-xl mt-4 border">
<ul>
<li>
<a href="myprofile.html">Profile</a>
</li>
<li>
<button class="btn-logout">Log out</button>
</li>
</ul>
</div>
</div>
</div>
<!-- <button class="sm:flex px-8 xl:px-16 bg-red-500 rounded-md text-white hover:bg-red-700 py-2">Register</button> -->
<button class="flex sm:hidden absolute right-5 menu-button" id="">
<img src="assets/images/menu.svg" alt="menu icon" id="menu-icon" />
</button>
</div>
<div class="hidden absolute bg-white flex flex-col h-full left-0 min-h-screen items-center right-0 shadow-lg gap-4"
id="menu-mobile">
<div class="category-list flex flex-col gap-4"></div>
<button class="px-8 xl:px-16 bg-red-500 rounded-md text-white hover:bg-red-700 py-2">Register</button>
</div>
</header>
<main class="flex xl:mx-auto md:px-6 bg-white lg:py-0">
<div
class="lg:px-20 hidden sm:flex sm:w-5/12 md:w-4/12 divide-y-2 mt-15 justify-center items-center flex-col gap-10 overflow-y-auto">
<div class="sidebar bottom-0 fixed flex h-3/4 justify-center mt-32 mb-20 overflow-y-auto top-0 ">
<div class="flex items-start flex-col px-10 divide-y-2">
<div id="" class="category-list flex flex-col gap-4 xl:gap-6 pb-10">
</div>
<div class="pt-10 flex flex-col gap-5">
<span class="text-gray-500">Suggest People</span>
<div id="user-list" class="flex flex-col gap-4 xl:gap-5">
</div>
<span class="text-red-500 cursor-pointer">See all</span>
</div>
</div>
</div>
</div>
<div class="w-full sm:w-8/12 min-h-screen ">
<div class="flex flex-col h-max list-container overflow-y-auto pt-5 min-h-screen px-10"
style="max-width: 900px;">
<div class="bg-white h-24"></div>
<div class="flex flex-col bg-white px-3">
<div class="cursor-pointer gap-3 flex py-4">
<img src="assets/images/icons/angle_left.svg" alt="back icon" />
<span class="text-xl font-bold">Transaction history</span>
</div>
<p class="text-sm">This page only shows the recharge transaction history of coin purchases you made on the
web. <strong>View Terms of Purchase for Coins</strong></p>
<div class="overflow-x-auto mt-12">
<table style="min-width: 800px;">
<tr class="">
<th class="pb-4 text-left w-1/12 pr-2">Amount</th>
<th class="pb-4 text-center w-3/12 pr-2 whitespace-nowrap">Payment method</th>
<th class="pb-4 text-center w-1/12 whitespace-nowrap">Payment</th>
<th class="pb-4 text-center w-3/12 whitespace-nowrap">Date</th>
<th class="pb-4 text-center w-3/12 whitespace-nowrap">Order ID</th>
<th class="pb-4 text-right w-1/12">Status</th>
</tr>
<tbody class="transaction-table">
<tr>
<td class="text-left ">30 coins</td>
<td class="text-center flex items-center justify-center">
<img src="assets/images/icons/ic_mastercard.svg" alt="card icon" />
<span>*** *** *** 239</span>
</td>
<td class="text-center ">€ 0.35</td>
<td class="text-center whitespace-nowrap">11/28/2021 0:10 am</td>
<td class="text-center ">10000000017035254546354</td>
<td class="text-right ">completed</td>
</tr>
</tbody>
</table>
<div class="mt-8 ml-auto flex gap-2 items-center justify-end">
<span class="text-sm">Total 1</span>
<button class="border rounded-md w-10 h-10 flex items-center justify-center">
<img src="assets/images/icons/angle_left.svg" alt="previous button" />
</button>
<button class="border border-red-500 rounded-md w-10 h-10 flex items-center justify-center">
1
</button>
<button class="border rounded-md w-10 h-10 flex items-center justify-center">
<img src="assets/images/icons/angle_right.svg" alt="previous button" />
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>