Skip to content

Commit

Permalink
checkout, shoppingcart, and wishlist
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Oct 27, 2024
1 parent 7faedd9 commit d211284
Show file tree
Hide file tree
Showing 15 changed files with 413 additions and 7 deletions.
5 changes: 5 additions & 0 deletions assets/images/CheckCircle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/images/MinusW.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/images/ShoppingCartwh.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions assets/images/bArrowLeft.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/images/closeIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/images/rcloseIcon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/wishlistimg1.webp
View file
Binary file not shown.
Binary file added assets/images/wishlistimg2.webp
View file
Binary file not shown.
Binary file added assets/images/wishlistimg3.webp
View file
Binary file not shown.
Binary file added assets/images/wishlistimg4.webp
View file
Binary file not shown.
Binary file added assets/images/wishlistimg5.webp
View file
Binary file not shown.
64 changes: 64 additions & 0 deletions src/checkoutSuccess.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="ar" dir="ltr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Alrawda">
<title>Checkout Success</title>
<link href="./../dist/output.css" rel="stylesheet">
<link rel="stylesheet" href="./../dist/all.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
<style>
.accordion-button.active {
background-color: #FA8232;
color: white;
}
</style>
</head>

<body>
<!-- Start Navbar -->
<div id="navbar"></div>
<!-- End Navbar -->
<hr>

<!-- Start Location -->
<section class="w-full h-[72px] bg-[#F2F4F5] mt-[13px]">
<div class="flex items-center gap-2 ltr:md:ml-[300px] rtl:md:mr-[300px] ltr:ml-10 rtl:mr-10 pt-[26px]">
<img src="../assets/images/House.svg" alt="Home Icon">
<p class="text-[#5F6C72] font-normal text-sm">Home</p>
<img src="../assets/images/arrow.svg" alt="Arrow Icon">
<p class="text-[#5F6C72] font-normal text-sm">Shopping Card</p>
<img src="../assets/images/arrow.svg" alt="Arrow Icon">
<p class="text-[#2DA5F3] text-sm font-medium">Checkout</p>
</div>
</section>
<!-- End Location -->

<!-- Start Content -->
<section class="container flex flex-col justify-center items-center mx-auto mt-[72px] mb-24 px-2 md:px-0">
<img src="../assets/images/CheckCircle.svg" class="w-[88px] h-[88px]" alt="Check Circle">
<h1 class="text-[#191C1F] text-2xl leading-[32px] font-semibold">Your order is successfully place</h1>
<p class="md:w-[424px] text-[#5F6C72] text-center mt-3">Pellentesque sed lectus nec tortor tristique accumsan quis dictum risus. Donec volutpat mollis nulla non facilisis.</p>
<div class="flex items-center justify-center gap-3 mt-[32px]">
<a href="#" class="md:w-[215px] w-[180px] h-[48px] flex items-center justify-center gap-2 border border-[#FFE7D6] rounded-[2px]">
<img src="../assets/images/Stack.svg" alt="Stack">
<span class="text-[#FA8232] font-bold text-sm">Go to Dashboard</span>
</a>
<a href="#" class="md:w-[215px] w-[140px] h-[48px] flex items-center justify-center gap-2 border border-[#FA8232] bg-[#FA8232] rounded-[2px]">
<span class="text-white font-bold text-sm">View Order</span>
<img src="../assets/images/ArrowRight.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
</a>
</div>
</section>
<!-- Start Content -->

<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->

</body>
</html>
8 changes: 1 addition & 7 deletions src/orderDetails.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,6 @@
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
<style>
.accordion-button.active {
background-color: #FA8232;
color: white;
}
</style>
</head>

<body>
Expand Down Expand Up @@ -243,7 +237,7 @@ <h1 class="pt-6 pl-[32px] text-[#191C1F] font-medium text-lg">Product <span clas
<div class="overflow-x-auto pt-[20px]">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-200">
<tr class="bg-[#E4E7E9]">
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">PRODUCTS</th>
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">PRICE</th>
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">QUANTITY</th>
Expand Down
171 changes: 171 additions & 0 deletions src/shoppingCard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="ar" dir="ltr">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Alrawda">
<title>Shopping Card</title>
<link href="./../dist/output.css" rel="stylesheet">
<link rel="stylesheet" href="./../dist/all.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
</head>

<body>
<!-- Start Navbar -->
<div id="navbar"></div>
<!-- End Navbar -->
<hr>

<!-- Start Content -->
<section class="container mx-auto flex justify-center gap-6 mt-[40px] mb-[72px]">
<div class="w-[872px]">
<div class="bg-white border border-[#E4E7E9] rounded-[4px] overflow-hidden">
<h1 class="pt-6 ltr:pl-[32px] rtl:pr-[32px] text-[#191C1F] font-medium text-lg">Shopping Cart</h1>
<div class="overflow-x-auto pt-[20px]">
<table class="w-full table-auto">
<thead>
<tr class="bg-[#E4E7E9]">
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium uppercase">PRODUCTS</th>
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium uppercase">PRICE</th>
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium uppercase">Quantity</th>
<th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium uppercase">Sub-Total</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-3 flex items-center gap-2">
<img src="../assets/images/closeIcon.svg" class="cursor-pointer" alt="Close Icon">
<img src="../assets/images/wishlistimg1.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
<p class="w-[260px] text-[#475156]">4K UHD LED Smart TV with Chromecast Built-in</p>
</td>
<td class="p-3 text-black">
<span class="text-[#929FA5] line-through">$99</span>
<span class="text-[#475156]">$70</span>
</td>
<td class="p-3">
<div class="flex items-center border border-[#E4E7E9] rounded-[3px] w-[148px] p-2 justify-between">
<button onclick="decrement('counter1')" class="text-lg focus:outline-none">
<img src="../assets/images/MinusW.svg" alt="Minus">
</button>
<span id="counter1" class="text-[#475156] font-medium">01</span>
<button onclick="increment('counter1')" class="text-lg focus:outline-none">
<img src="../assets/images/Plus.svg" alt="Plus">
</button>
</div>
</td>
<td class="trContent relative p-3 text-[#191C1F] font-medium items-center">
<p>$70</p>
</td>
</tr>
<tr class="border-b">
<td class="p-3 flex items-center gap-2">
<img src="../assets/images/rcloseIcon.svg" class="cursor-pointer" alt="Close Icon">
<img src="../assets/images/wishlistimg2.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
<p class="w-[260px] text-[#475156]">Wired Over-Ear Gaming Headphones with USB</p>
</td>
<td class="p-3 text-black">
<span class="text-[#475156]">$70</span>
</td>
<td class="p-3">
<div class="flex items-center border border-[#E4E7E9] rounded-[3px] w-[148px] p-2 justify-between">
<button onclick="decrement('counter2')" class="text-lg focus:outline-none">
<img src="../assets/images/MinusW.svg" alt="Minus">
</button>
<span id="counter2" class="text-[#475156] font-medium">01</span>
<button onclick="increment('counter2')" class="text-lg focus:outline-none">
<img src="../assets/images/Plus.svg" alt="Plus">
</button>
</div>
</td>

<td class="trContent relative p-3 text-[#191C1F] font-medium items-center">
<p>$250</p>
</td>
</tr>
</tbody>
</table>
<div class="flex justify-between p-6">
<a href="#" class="flex items-center justify-center gap-2 w-[203px] border-2 border-[#2DA5F3] h-[48px] text-[#2DA5F3] font-bold uppercase">
<img src="../assets/images/bArrowLeft.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
<span>Return to Shop</span>
</a>
<a href="#" class="flex items-center justify-center gap-2 w-[197px] border-2 border-[#2DA5F3] h-[48px] text-[#2DA5F3] font-bold uppercase">Update cart</a>
</div>
</div>
</div>
</div>

<div>
<!-- Apply Coupon -->
<div class="flex items-center gap-4 rounded-[4px] px-[10px] w-[424px] border border-[#E4E7E9] h-[97px]">
<input type="text" class="w-[228px] border border-[#E4E7E9] focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<a href="#" class="text-white bg-[#2DA5F3] uppercase w-[159px] h-[48px] flex items-center justify-center rounded-[2px]">Apply Coupon</a>
</div>
<!-- Card Totals -->
<div class="w-[424px] h-[344px] border border-[#E4E7E9] mt-[14px] rounded-[4px] p-6">
<h2 class="text-[#191C1F] text-lg font-semibold mb-4">Card Totals</h2>

<div class="flex justify-between text-gray-700 mb-2">
<span class="text-[#5F6C72]">Sub-total</span>
<span class="text-[#191C1F] font-medium">$320</span>
</div>

<div class="flex justify-between text-gray-700 mb-2">
<span class="text-[#5F6C72]">Shipping</span>
<span class="text-[#191C1F] font-medium">Free</span>
</div>

<div class="flex justify-between text-gray-700 mb-2">
<span class="text-[#5F6C72]">Discount</span>
<span class="text-[#191C1F] font-medium">$24</span>
</div>

<div class="flex justify-between text-gray-700 mb-4">
<span class="text-[#5F6C72]">Tax</span>
<span class="text-[#191C1F] font-medium">$61.99</span>
</div>

<hr class="border-t border-gray-300 mb-4">

<div class="flex justify-between items-center text-gray-900 font-semibold text-xl mb-4">
<span class="text-[#191C1F] text-base">Total</span>
<span class="text-[#191C1F] font-semibold">$357.99 USD</span>
</div>

<button class="w-[376px] h-14 bg-[#FA8232] text-white font-bold text-base py-3 rounded-[3px] flex items-center justify-center gap-2">
PROCEED TO CHECKOUT
<img src="../assets/images/ArrowRight.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
</button>
</div>

</div>
</section>
<!-- End Content -->

<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->

<script>
let counters = {
counter1: 1,
counter2: 1
};

function increment(counterId) {
counters[counterId]++;
document.getElementById(counterId).innerText = counters[counterId].toString().padStart(2, '0');
}

function decrement(counterId) {
if (counters[counterId] > 1) {
counters[counterId]--;
document.getElementById(counterId).innerText = counters[counterId].toString().padStart(2, '0');
}
}
</script>
</body>
</html>
Loading

0 comments on commit d211284

Please sign in to comment.