Skip to content

Commit

Permalink
Edits
Browse files Browse the repository at this point in the history
  • Loading branch information
@asmaamostafa74
asmaamostafa74 committed Oct 29, 2024
1 parent fef5052 commit 2376197
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 485 deletions.
8 changes: 4 additions & 4 deletions src/resetPass.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,17 @@ <h1 class="text-[#191C1F] font-semibold text-[20px]">Reset Password</h1>
<label class="blockblock text-[#191C1F] text-sm font-normal mb-2">Password</label>
<div class="relative mt-2">
<input type="password" placeholder="8+ characters" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
<div>
<label class="blockblock text-[#191C1F] text-sm font-normal mb-2">Confirm Password</label>
<div class="relative mt-2">
<input type="password" placeholder="" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-0 focus:border-[#FA8232]">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer">
<img src="../assets/images/Eye.svg" alt="Eye Icon">
<span class="absolute inset-y-0 ltr:right-0 rtl:left-2 flex items-center pr-3 cursor-pointer" onclick="togglePassword(this)">
<i class="fa-regular fa-eye-slash"></i>
</span>
</div>
</div>
Expand Down
242 changes: 2 additions & 240 deletions src/sec_trackorder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,128 +13,7 @@
</head>
<body>
<!-- Start Navbar -->
<div class="w-full">
<div class="w-full bg-[#1B6392] text-white px-4 py-1 border-b border-gray-400">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-sm py-2">
<span>Welcome to Clicon online eCommerce store.</span>
<div class="flex items-center gap-2 mt-2 sm:mt-0">
<span>Follow us:</span>
<div class="flex gap-3">
<a href="#"><img src="../assets/images/navTwitter.svg" alt="Twitter"></a>
<a href="#"><img src="../assets/images/navFacebook.svg" alt="Facebook"></a>
<a href="#"><img src="../assets/images/navPinterest.svg" alt="Pinterest"></a>
<a href="#"><img src="../assets/images/navReddit.svg" alt="Reddit"></a>
<a href="#"><img src="../assets/images/navYoutube.svg" alt="Youtube"></a>
<a href="#"><img src="../assets/images/navInstagram.svg" alt="Instagram"></a>
</div>
<div class="flex items-center gap-5">
<div class="relative">
<div class="ltr:border-l flex items-center gap-2 ltr:pl-5 cursor-pointer" onclick="toggleLanguageMenu(event)">
<span>Eng</span>
<img src="../assets/images/CaretDown.svg" alt="Arrow">
</div>

<div id="languageDropdownMenu" class="absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">English</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Arabic</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">French</li>
</ul>
</div>
</div>

<div class="relative">
<div class="flex items-center gap-2 cursor-pointer" onclick="toggleCurrencyMenu(event)">
<span>USD</span>
<img src="../assets/images/CaretDown.svg" alt="Arrow">
</div>

<div id="currencyDropdownMenu" class="absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">USD</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">EUR</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">GBP</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="bg-[#1B6392] py-4 px-4 border-b">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between">
<!-- Logo -->
<div class="flex items-center mb-4 md:mb-0">
<img src="../assets/images/navLogo.svg" alt="">
</div>

<!-- Search Bar -->
<div class="flex-1 w-full md:max-w-2xl md:mx-8 mb-4 md:mb-0">
<div class="relative">
<input type="text" placeholder="Search for anything..." class="w-full md:w-[646px] h-[48px] rounded-2 focus:outline-none focus:ring-0"/>
<button class="absolute ltr:right-10 rtl:left-10 top-3">
<img src="../assets/images/searchIcon.svg" alt="">
</button>
</div>
</div>

<!-- Right Section -->
<div class="flex items-center gap-4">
<button class="relative hover:text-blue-600">
<img src="../assets/images/whiteCart.svg" alt="Cart">
<span class="absolute -top-2 -right-2 bg-white text-[#1B6392] text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
</button>
<button class="relative hover:text-blue-600">
<img src="../assets/images/whiteHeart.svg" alt="Heart">
</button>
<button class="hover:text-blue-600">
<img src="../assets/images/whiteUser.svg" alt="User">
</button>
</div>
</div>
</div>

<div class="container mx-auto h-auto flex flex-row flex-wrap md:items-center justify-between py-4">
<div class="flex flex-row flex-wrap items-center gap-4 mb-4 md:mb-0">
<div class="relative">
<div class="w-[155px] h-[48px] flex items-center justify-center cursor-pointer gap-2 bg-[#F2F4F5] md:mx-0 mx-2" onclick="toggleCategoryMenu(event)">
<span class="font-medium">All Category</span>
<img src="../assets/images/bCaretDown.svg" alt="Arrow">
</div>
<div id="categoryDropdownMenu" class="w-[155px] absolute hidden bg-white border rounded-md shadow-lg mt-2 left-0 z-10">
<ul class="py-2">
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 1</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 2</li>
<li class="px-4 py-2 hover:bg-gray-100 text-black cursor-pointer">Category 3</li>
</ul>
</div>
</div>
<div class="flex flex-wrap items-center gap-4 text-gray-600 md:px-0 px-2">
<a href="#" class="flex items-center gap-1 font-semibold text-[#FA8232]">
<img src="../assets/images/oMapPinLine.svg" alt="MapPinLine">
<span>Track Order</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/ArrowsCounterClockwise.svg" alt="ClockClockwise">
<span>Compare</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/gHeadphones.svg" alt="Headphones">
<span>Customer Support</span>
</a>
<a href="#" class="flex items-center gap-1 font-normal text-[#5F6C72]">
<img src="../assets/images/Info.svg" alt="Info">
<span>Need Help</span>
</a>
</div>
</div>
<div class="flex items-center gap-1 text-center md:px-0 px-2">
<img src="../assets/images/PhoneCall.svg" alt="Phone Call">
<span>+1-202-555-0104</span>
</div>
</div>
</div>
<nav id="navbar"></nav>
<!-- End Navbar -->
<hr class="mt-2 sm:block hidden">
<!-- Start Location -->
Expand Down Expand Up @@ -177,125 +56,8 @@ <h1 class="text-[#191C1F] text-[32px] font-semibold leading-[40px]">Track Order<
<!-- Start Track -->

<!-- Start Footer -->
<footer class="bg-[#191C1F] pt-12 pb-6">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-5 px-6">
<div>
<img src="../assets/images/footerLogo.svg" alt="Footer Logo">
<div class="mt-6 mb-3">
<p class="text-[#77878F] mb-1">Customer Supports:</p>
<p class="text-[#FFFFFF] text-lg font-medium mb-1">(629) 555-0129</p>
</div>
<p class="text-[#ADB7BC] text-base my-3">4517 Washington Ave. Manchester, Kentucky 39495</p>
<p class="text-[#FFFFFF] text-base">[email protected]</p>
</div>

<div>
<h2 class="text-base font-medium text-white mb-3 uppercase">Top Category</h2>
<ul>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Computers & Laptops</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Smart Phones</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Headphones</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Accessories</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Camera & Photo</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">TV & Home</a></li>
<li class="mt-4"><a href="#" class="flex items-center text-[#EBC80C] gap-2">Browse All Products
<img src="../assets/images/yellowArrowRight.svg" class="transform ltr:scale-x-[-1] rtl:scale-x-100" alt="Arrow">
</a>
</li>
</ul>
</div>

<div>
<h2 class="text-base font-medium text-white mb-4 uppercase">Quick Links</h2>
<ul>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Shop Products</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Shopping Cart</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Wishlist</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Compare</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Track Order</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">Customer Help</a></li>
<li class="mb-2"><a href="#" class="text-[#929FA5] hover:text-[#EBC80C] font-medium mb-[6px]">About Us</a></li>
</ul>
</div>

<div>
<h2 class="text-base font-medium text-white mb-4 uppercase">Download App</h2>
<div class="flex flex-col gap-3">
<a href="#"><img src="../assets/images/googlePlay.svg" alt="Google Play"></a>
<a href="#"><img src="../assets/images/appStore.svg" alt="App Store"></a>
</div>
</div>

<div>
<h2 class="text-base font-medium text-white mb-4 uppercase">Popular Tag</h2>
<div class="flex flex-wrap gap-2">
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Gaming</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">iPhone</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">TV</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Asus Laptops</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Macbook</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">SSD</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Graphics Card</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Power Bank</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Smart TV</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Speaker</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Tablet</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Microwave</span>
<span class="border border-[#303639] text-white font-medium px-3 py-1 rounded-[2px] text-sm cursor-pointer">Samsung</span>
</div>
</div>
</div>

<div class="border-t border-[#303639] mt-8 pt-4 text-center text-sm text-[#ADB7BC]">
Kriho eCommerce Template © 2021. Design by TemplatesJungle
</div>
</footer>
<footer id="footer"></footer>
<!-- End Footer -->

<script>
function closeAllMenus() {
const menus = [
document.getElementById('languageDropdownMenu'),
document.getElementById('currencyDropdownMenu'),
document.getElementById('categoryDropdownMenu'),
];

menus.forEach(menu => menu.classList.add('hidden'));
}

function toggleLanguageMenu(event) {
event.stopPropagation();
const menu = document.getElementById('languageDropdownMenu');
const isHidden = menu.classList.contains('hidden');
closeAllMenus();
if (isHidden) {
menu.classList.remove('hidden');
}
}

function toggleCurrencyMenu(event) {
event.stopPropagation();
const menu = document.getElementById('currencyDropdownMenu');
const isHidden = menu.classList.contains('hidden');
closeAllMenus();
if (isHidden) {
menu.classList.remove('hidden');
}
}

function toggleCategoryMenu(event) {
event.stopPropagation();
const menu = document.getElementById('categoryDropdownMenu');
const isHidden = menu.classList.contains('hidden');
closeAllMenus();
if (isHidden) {
menu.classList.remove('hidden');
}
}

document.addEventListener('click', function(event) {
closeAllMenus();
});
</script>
</body>
</html>
Loading

0 comments on commit 2376197

Please sign in to comment.