diff --git a/catering.html b/catering.html index 4e1b33d2..4d445219 100644 --- a/catering.html +++ b/catering.html @@ -73,8 +73,8 @@ IcyCo
- home - products + Home + Products Delivery Dine In Catering @@ -100,7 +100,7 @@

Tell us about your event

- + Tell us about your event
- +
- +
@@ -123,29 +123,30 @@

Tell us about your event

-
- +
+ + +

+ +

+ +

+ + +
-

- -

- -

- - -
@@ -155,37 +156,34 @@

Tell us about your event

- - + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -315,4 +313,4 @@

Newsletter

- \ No newline at end of file + diff --git a/delivery.html b/delivery.html index 1bed3c22..4b25cd08 100644 --- a/delivery.html +++ b/delivery.html @@ -127,37 +127,40 @@

Enter Your Details

pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6"> -
- - -
+ +
+ + +
+ +
diff --git a/index.html b/index.html index 0a35c968..60ce16c6 100644 --- a/index.html +++ b/index.html @@ -386,7 +386,7 @@

Top Reviews

-
"From the name itself theses Ice Creams here are best in quality and taste of +
"From the name itself,these Ice Creams here are best in quality and taste of course."
diff --git a/script/products.js b/script/products.js index 9449870e..abfbaf91 100644 --- a/script/products.js +++ b/script/products.js @@ -75,8 +75,6 @@ function displayProducts(products) { box.appendChild(addToCartButton); - // Add click event for the quick view icon - box.querySelector(".quick-view-icon").addEventListener("click", () => { showQuickView(product); }); @@ -84,8 +82,8 @@ function displayProducts(products) { productsSection?.appendChild(box); }); - handleQuantityButtonsInProductCard(); } + function displayFlavorFilter() { let flavorFilterSection = document.querySelector(".categories-wrapper"); @@ -291,6 +289,7 @@ function handleQuantityButtonsInProductCard() { } }); } +handleQuantityButtonsInProductCard(); function handleQuantityButtonsInCart() { const cartList = document.querySelector(".cart-list-items"); @@ -348,161 +347,6 @@ function handleQuantityButtonsInCart() { }); } - -// Add items to wishlist - -function addToWishlist(e) { - let wishlistItemId = e.target.closest(".box").getAttribute("id"); - let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - - // Ensure pcs is a valid number - if (isNaN(pcs) || pcs <= 0) { - showToast("Please select the number of cups you want!"); - return; - } - - let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); - let item = products_list.find(item => item.id == wishlistItemId); - let amount = item.price * pcs; - - if (existingWishlistItem) { - existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs - existingWishlistItem.amount = existingWishlistItem.pcs * item.price; - showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); - } else { - wishlistItems.push({ - itemId: wishlistItemId, - pcs: pcs, // Ensure pcs is a number - amount: amount - }); - showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); - } - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); -} - - - - -function handleRemoveButtonInWishlist() { - let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); - removeBtns.forEach(btn => { - btn.addEventListener("click", () => { - let itemId = btn.closest('li').getAttribute("id"); - wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); // Update the wishlist display - - // Reset button text to "Add to Wishlist" if necessary - const productBox = document.querySelector(`.box[id='${itemId}']`); - if (productBox) { - const addToWishlistButton = productBox.querySelector(".wishlist-btn"); - addToWishlistButton.innerHTML = ''; // Reset icon and text - } - }); - }); -} - - -function displayWishlistItems() { - const wishlistUlList = document.querySelector(".wishlist-list-items"); - wishlistUlList.innerHTML = ""; - - if (wishlistItems.length > 0) { - document.querySelector(".empty-wishlist").classList.remove("active"); - document.querySelector(".no-empty-wishlist").classList.add("active"); - } else { - document.querySelector(".empty-wishlist").classList.add("active"); - document.querySelector(".no-empty-wishlist").classList.remove("active"); - } - - wishlistItems.forEach(wi => { - let itemLi = document.createElement("li"); - itemLi.setAttribute("id", wi.itemId); - let product = products_list.find(p => p.id == wi.itemId); - - if (product) { - itemLi.innerHTML = ` - -
- ${product.name}
- - ${ci.pcs} x ${product.price}
-
$${ci.amount}
- -
-
- - - ${ci.pcs} - + - -
- `; - wishlistUlList.appendChild(itemLi); - handleRemoveButtonInWishlist(); // Attach remove functionality - - let moveToCartBtn = itemLi.querySelector(".move-to-cart"); - moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); - } - }); - -} - - -// Function to move item from wishlist to cart -function moveToCart(wishlistItemId) { - // Find the item in wishlist - let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); - if (wishlistItemIndex > -1) { - let wishlistItem = wishlistItems[wishlistItemIndex]; - - // Check if the item already exists in the cart - let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); - if (existingCartItem) { - existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists - existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); - } else { - cartItems.push({ - itemId: wishlistItem.itemId, - pcs: wishlistItem.pcs, - amount: wishlistItem.amount - }); - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); - } - - // Remove the item from the wishlist - wishlistItems.splice(wishlistItemIndex, 1); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - - // Re-display the wishlist and cart items - displayWishlistItems(); - displayCartItems(); - } -} - - -// Scroll animation - - - -document.addEventListener("DOMContentLoaded", () => { - // Apply ScrollReveal to products - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); -}); - function createSearchBar() { const searchBarContainer = document.querySelector(".search-container"); @@ -612,4 +456,4 @@ window.onclick = function (event) { if (event.target === modal) { modal.style.display = "none"; } -}; \ No newline at end of file +}; diff --git a/styles/login-signup.css b/styles/login-signup.css index 46c065db..2b0d5498 100644 --- a/styles/login-signup.css +++ b/styles/login-signup.css @@ -1,259 +1,259 @@ body { - padding: 25px 15px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - min-height: 100dvh; + padding: 25px 15px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + min-height: 100dvh; } #logo { - display: flex; - justify-content: center; - margin-bottom: 10px; + display: flex; + justify-content: center; + margin-bottom: 10px; } form { - width: 100%; - max-width: 450px; + width: 100%; + max-width: 450px; } #name-fields { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 10px; - margin-bottom: 10px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 10px; + margin-bottom: 10px; } #first-name-field, #last-name-field { - flex: 1 1 200px; + flex: 1 1 200px; } #first-name-field input, #last-name-field input { - padding: 15px 12px; - width: 100%; + padding: 15px 12px; + width: 100%; } .input-fields { - margin-bottom: 12px; + margin-bottom: 12px; } .input-fields input { - width: 100%; - padding: 15px 12px; + width: 100%; + padding: 15px 12px; } .input-field-header { - margin-bottom: 7px; - font-weight: 550; + margin-bottom: 7px; + font-weight: 550; +} + +.input-field:focus { + border: 2px solid #d91656; + box-shadow: 0 0 8px rgba(237, 59, 246, 0.6); + transition: box-shadow 0.3s; } .password-container { - position: relative; + position: relative; } .password-container input { - width: 100%; + width: 100%; } /* Style the eye icon */ .password-container i { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - cursor: pointer; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; } -.check-container{ - display: flex; - align-items:center ; - padding-left: 5px; +.check-container { + display: flex; + align-items: center; + padding-left: 5px; } .check-button { - display: flex; - align-items: center; - width: 100%; - height: 15px; + display: flex; + align-items: center; + width: 100%; + height: 15px; } .check-button input { - height: 15px; - width: 15px; - cursor: pointer; + height: 15px; + width: 15px; + cursor: pointer; } .check-button span { - margin-left: 8px; - font-size: 14px; + margin-left: 8px; + font-size: 14px; } -.forget-button{ - width: 50%; +.forget-button { + width: 50%; } .signin-btn button { - width: 100%; - border-radius: auto; - margin-top: 15px; -} -.sep-container{ - margin-top: 20px; - width: 100%; - height: 20px; - display: flex; - justify-content: center; - color: gray; - font-size: 14px; -} -.sep-line{ - height: 1px; - width: 50px; - border: 1px solid rgb(168, 168, 168); - margin: 10px; + width: 100%; + border-radius: auto; + margin-top: 15px; +} +.sep-container { + margin-top: 20px; + width: 100%; + height: 20px; + display: flex; + justify-content: center; + color: gray; + font-size: 14px; +} +.sep-line { + height: 1px; + width: 50px; + border: 1px solid rgb(168, 168, 168); + margin: 10px; } .terms { - margin-top: 10px; - max-width: 450px; - width: 100%; - text-align: center; - margin-bottom: 14px; - font-size: 14px; + margin-top: 10px; + max-width: 450px; + width: 100%; + text-align: center; + margin-bottom: 14px; + font-size: 14px; } .terms a { - text-decoration: none; - color: var(--main-color); + text-decoration: none; + color: var(--main-color); } #line-container { - font-size: 14px; + font-size: 14px; } .register-now-link { - margin-left: 3px; - text-decoration: none; - color: var(--main-color); + margin-left: 3px; + text-decoration: none; + color: var(--main-color); } .register-now-link:hover { - text-decoration: underline; + text-decoration: underline; } .sign-in { - margin-top: 15px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 28px; + margin-top: 15px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 28px; } .social-links { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - margin-top: 20px; - max-width: 450px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin-top: 20px; + max-width: 450px; } .social-links button { - width: 100%; - background-color: transparent; - background-image: none; - border-radius: 7px; - margin-bottom: 15px; - color: black; + width: 100%; + background-color: transparent; + background-image: none; + border-radius: 7px; + margin-bottom: 15px; + color: black; } .social-links img { - margin-right: 5px; + margin-right: 5px; } .social-links img { - margin-right: 8px; - vertical-align: middle; + margin-right: 8px; + vertical-align: middle; } .social-links button span { - line-height: 20px; - padding-top: 4px; + line-height: 20px; + padding-top: 4px; } .input-field::placeholder { - color: gray; - font-size: 16px; - font-weight: bold; - opacity: 1; -} -.input-field{ - margin-top: 10px; - border-radius: 7px; - border: 1px solid black; - font-size: 16px; - letter-spacing: 1px; -} -.social-link-2{ - display: flex; - align-items: center; - justify-content: center; - margin-top: 10px; - gap: 5px; -} -.social-link-2 a{ - background-color: transparent; - color: none; - border: solid 1px black; - padding: 8px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all .38s ease-in-out; - margin-left: 5px; + color: gray; + font-size: 16px; + font-weight: bold; + opacity: 1; +} +.input-field { + margin-top: 10px; + border-radius: 7px; + border: 1px solid black; + font-size: 16px; + letter-spacing: 1px; +} +.social-link-2 { + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; + gap: 5px; +} +.social-link-2 a { + background-color: transparent; + color: none; + border: solid 1px black; + padding: 8px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.38s ease-in-out; + margin-left: 5px; } .social-link-2 a:hover { - transform: scale(1.2); - box-shadow: 1px 1px 6px 1px #D91656; - } - - - - - + transform: scale(1.2); + box-shadow: 1px 1px 6px 1px #d91656; +} /* signup page */ - .error { - border: 2px solid red; + border: 2px solid red; } .error-message { - color: red; - font-size: 12px; - margin-top: 5px; - display: none; + color: red; + font-size: 12px; + margin-top: 5px; + display: none; } .show-message { - display: block; + display: block; } #password-strength-meter { - margin-top: 10px; + margin-top: 10px; } #strength-bar { - height: 8px; - width: 0; - background-color: #ff4d4d; - transition: width 0.3s ease; + height: 8px; + width: 0; + background-color: #ff4d4d; + transition: width 0.3s ease; } #password-strength-text { - margin-top: 5px; - font-size: 14px; - color: #666; + margin-top: 5px; + font-size: 14px; + color: #666; }