-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (82 loc) · 4.99 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
<!doctype html>
<html class="scroll-smooth" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>E-Card</title>
<link rel="icon" href="./public/img/fav.png">
</head>
<body>
<main id="app" >
<header class="fixed left-0 right-0 z-50 w-full md:w-4/5 mx-auto px-3 md:px-0 py-4 flex justify-between border-b-2 border-neutral-600 bg-white">
<div class="brand font-heading">
<h3 class="font-bold text-2xl">MMS Solutions</h3>
<p class="text-neutral-400">E-commerce by<b>TZK</b></p>
</div>
<div class="">
<button id="searchBtn" class="border border-neutral-700 p-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-neural-700 stroke-2 ">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</button>
<button id="cartBtn" class="border animate__animated border-neutral-700 p-3 bg-neutral-700 relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
<span id="cartBtnCount" class="border-2 border-white rounded-full absolute top-0 text-white text-sm translate-x-1/2 -translate-y-1/2 bg-red-500 px-2 py-1">0</span>
</button>
</div>
</header>
<div id="headerSpacer" class="h-28"></div>
<div class=" w-full md:w-4/5 mx-auto px-3 md:px-0">
<section class="mb-10">
<p class="mb-2 text-lg text-neutral-700">Product Categories</p>
<div id="categoryLists" class="flex max-w-full overflow-scroll gap-2 justify-stretch ">
<button class="category-badge active">All</button>
</div>
</section>
<section id="cartUi" class="w-[380px] translate-x-full h-screen bg-white fixed right-0 top-0 z-50 border-s-2 border-neutral-700">
<div class="h-full flex flex-col">
<div class="cart-header px-3 py-4 flex justify-between border-b-2 bg-white border-neutral-700">
<div class="">
<h3 class="font-bold text-2xl">Shopping Cart</h3>
<p class="text-neutral-400">Your Items <span id="cartCount" class="bg bg-red-500 px-2 rounded-full py-1 text-white">0</span></p>
</div>
<button id="closeCart" class="border border-neutral-700 p-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div id="cartItems" class="cart-items flex-grow p-4 h-auto overflow-scroll">
<div class="h-full hidden last:flex flex-col justify-center items-center">
<img class="w-3/4" src="./public/img/empty-card.svg" alt="">
<p>There is no item yet!</p>
</div>
</div>
<div class="cart-footer px-3 py-4 flex flex-col border-t-2 bg-white border-neutral-700">
<div class="mb-3 text-end">
<p class="text-neutral-500">Total Amount</p>
<p class="text-3xl">
$ <span id="calculateTotalAmount">0</span>
</p>
</div>
<button id="orderNow" class="block w-full bg-neutral-700 text-white py-3">Order Now</button>
</div>
</div>
</section>
<section id="poroductSection" class="mb-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">
</section>
<footer class="bg-neutral-700 text-white flex justify-between items-center p-3">
<p>Copyright ©2023 <a class="underline" href="">Special Web Design</a> </p>
<a href="#headerSpacer" id="scrollToTop" class="border border-white p-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stoke-neutral-700 stoke-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
</svg>
</a>
</footer>
</div>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>