7 |
8 |
9 |
10 | Checkout
11 |
12 |
13 |
29 |
30 |
33 |
36 |
37 |
38 |
39 | );
40 | };
41 |
42 | export default CheckoutPopup;
43 |
--------------------------------------------------------------------------------
/Ecommerce-Backend/src/main/java/com/cart/ecom_proj/service/ProductService.java:
--------------------------------------------------------------------------------
1 | package com.cart.ecom_proj.service;
2 |
3 | import com.cart.ecom_proj.model.Product;
4 | import com.cart.ecom_proj.repo.ProductRepo;
5 | import org.springframework.beans.factory.annotation.Autowired;
6 | import org.springframework.stereotype.Service;
7 | import org.springframework.web.multipart.MultipartFile;
8 |
9 | import java.io.IOException;
10 | import java.util.List;
11 |
12 | @Service
13 | public class ProductService {
14 |
15 | @Autowired
16 | private ProductRepo repo;
17 |
18 |
19 | public List
14 | {cartItems.map((item) => (
15 |
28 |
16 | 
17 |
23 | ))}
24 |
18 |
22 | {item.name}
19 |Quantity: {item.quantity}
20 |Price: ${item.price * item.quantity}
21 |
25 |
27 | Total: ${totalPrice}
26 |65 | Loading... 66 |
67 | ); 68 | } 69 | return ( 70 | <> 71 |
72 | 
78 |
79 |
169 |
170 | );
171 | };
172 |
173 | export default Product;
--------------------------------------------------------------------------------
/Ecommerce-Frontend/src/components/Home.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { Link } from "react-router-dom";
3 | import axios from "axios";
4 | import AppContext from "../Context/Context";
5 | import unplugged from "../assets/unplugged.png"
6 |
7 | const Home = ({ selectedCategory }) => {
8 | const { data, isError, addToCart, refreshData } = useContext(AppContext);
9 | const [products, setProducts] = useState([]);
10 | const [isDataFetched, setIsDataFetched] = useState(false);
11 |
12 | useEffect(() => {
13 | if (!isDataFetched) {
14 | refreshData();
15 | setIsDataFetched(true);
16 | }
17 | }, [refreshData, isDataFetched]);
18 |
19 | useEffect(() => {
20 | if (data && data.length > 0) {
21 | const fetchImagesAndUpdateProducts = async () => {
22 | const updatedProducts = await Promise.all(
23 | data.map(async (product) => {
24 | try {
25 | const response = await axios.get(
26 | `http://localhost:8080/api/product/${product.id}/image`,
27 | { responseType: "blob" }
28 | );
29 | const imageUrl = URL.createObjectURL(response.data);
30 | return { ...product, imageUrl };
31 | } catch (error) {
32 | console.error(
33 | "Error fetching image for product ID:",
34 | product.id,
35 | error
36 | );
37 | return { ...product, imageUrl: "placeholder-image-url" };
38 | }
39 | })
40 | );
41 | setProducts(updatedProducts);
42 | };
43 |
44 | fetchImagesAndUpdateProducts();
45 | }
46 | }, [data]);
47 |
48 | const filteredProducts = selectedCategory
49 | ? products.filter((product) => product.category === selectedCategory)
50 | : products;
51 |
52 | if (isError) {
53 | return (
54 |
80 |
168 |
81 |
100 |
101 |
82 |
83 | {product.category}
84 |
85 |
91 |
92 |
93 | 86 | 87 |
Listed : {new Date(product.releaseDate).toLocaleDateString()}
88 | {/* {new Date(product.releaseDate).toLocaleDateString()} */} 89 | 90 |94 | {product.name} 95 |
96 | {product.brand} 97 |PRODUCT DESCRIPTION :
98 |{product.description}
99 |
102 |
103 | {"$" + product.price}
104 |
105 |
124 |
132 | 125 | Stock Available :{" "} 126 | 127 | {product.stockQuantity} 128 | 129 |
130 | 131 |
133 |
149 | {/*
167 |
55 | 
56 |
57 | );
58 | }
59 | return (
60 | <>
61 |
71 | {filteredProducts.length === 0 ? (
72 |
177 |
178 | );
179 | };
180 |
181 | export default Home;
182 |
--------------------------------------------------------------------------------
/Ecommerce-Frontend/src/components/AddProduct.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import axios from "axios";
3 |
4 | const AddProduct = () => {
5 | const [product, setProduct] = useState({
6 | name: "",
7 | brand: "",
8 | description: "",
9 | price: "",
10 | category: "",
11 | stockQuantity: "",
12 | releaseDate: "",
13 | productAvailable: false,
14 | });
15 | const [image, setImage] = useState(null);
16 |
17 | const handleInputChange = (e) => {
18 | const { name, value } = e.target;
19 | setProduct({ ...product, [name]: value });
20 | };
21 |
22 | const handleImageChange = (e) => {
23 | setImage(e.target.files[0]);
24 | // setProduct({...product, image: e.target.files[0]})
25 | };
26 |
27 | const submitHandler = (event) => {
28 | event.preventDefault();
29 | const formData = new FormData();
30 | formData.append("imageFile", image);
31 | formData.append(
32 | "product",
33 | new Blob([JSON.stringify(product)], { type: "application/json" })
34 | );
35 |
36 | axios
37 | .post("http://localhost:8080/api/product", formData, {
38 | headers: {
39 | "Content-Type": "multipart/form-data",
40 | },
41 | })
42 | .then((response) => {
43 | console.log("Product added successfully:", response.data);
44 | alert("Product added successfully");
45 | })
46 | .catch((error) => {
47 | console.error("Error adding product:", error);
48 | alert("Error adding product");
49 | });
50 | };
51 |
52 | return (
53 | 80 | No Products Available 81 |
82 | ) : ( 83 | filteredProducts.map((product) => { 84 | const { id, brand, name, price, productAvailable, imageUrl } = 85 | product; 86 | const cardStyle = { 87 | width: "18rem", 88 | height: "12rem", 89 | boxShadow: "rgba(0, 0, 0, 0.24) 0px 2px 3px", 90 | backgroundColor: productAvailable ? "#fff" : "#ccc", 91 | }; 92 | return ( 93 |
109 |
113 |
125 |
173 | );
174 | })
175 | )}
176 |
135 |
150 |
171 |
172 |
136 |
149 | 140 | {name.toUpperCase()} 141 |
142 | 146 | {"~ " + brand} 147 | 148 |150 |
151 |
159 |
170 | 155 | 156 | {price} 157 |
158 |
54 |
200 | );
201 | };
202 |
203 | export default AddProduct;
204 |
--------------------------------------------------------------------------------
/Ecommerce-Backend/mvnw.cmd:
--------------------------------------------------------------------------------
1 | <# : batch portion
2 | @REM ----------------------------------------------------------------------------
3 | @REM Licensed to the Apache Software Foundation (ASF) under one
4 | @REM or more contributor license agreements. See the NOTICE file
5 | @REM distributed with this work for additional information
6 | @REM regarding copyright ownership. The ASF licenses this file
7 | @REM to you under the Apache License, Version 2.0 (the
8 | @REM "License"); you may not use this file except in compliance
9 | @REM with the License. You may obtain a copy of the License at
10 | @REM
11 | @REM https://www.apache.org/licenses/LICENSE-2.0
12 | @REM
13 | @REM Unless required by applicable law or agreed to in writing,
14 | @REM software distributed under the License is distributed on an
15 | @REM "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 | @REM KIND, either express or implied. See the License for the
17 | @REM specific language governing permissions and limitations
18 | @REM under the License.
19 | @REM ----------------------------------------------------------------------------
20 |
21 | @REM ----------------------------------------------------------------------------
22 | @REM Apache Maven Wrapper startup batch script, version 3.3.2
23 | @REM
24 | @REM Optional ENV vars
25 | @REM MVNW_REPOURL - repo url base for downloading maven distribution
26 | @REM MVNW_USERNAME/MVNW_PASSWORD - user and password for downloading maven
27 | @REM MVNW_VERBOSE - true: enable verbose log; others: silence the output
28 | @REM ----------------------------------------------------------------------------
29 |
30 | @IF "%__MVNW_ARG0_NAME__%"=="" (SET __MVNW_ARG0_NAME__=%~nx0)
31 | @SET __MVNW_CMD__=
32 | @SET __MVNW_ERROR__=
33 | @SET __MVNW_PSMODULEP_SAVE=%PSModulePath%
34 | @SET PSModulePath=
35 | @FOR /F "usebackq tokens=1* delims==" %%A IN (`powershell -noprofile "& {$scriptDir='%~dp0'; $script='%__MVNW_ARG0_NAME__%'; icm -ScriptBlock ([Scriptblock]::Create((Get-Content -Raw '%~f0'))) -NoNewScope}"`) DO @(
36 | IF "%%A"=="MVN_CMD" (set __MVNW_CMD__=%%B) ELSE IF "%%B"=="" (echo %%A) ELSE (echo %%A=%%B)
37 | )
38 | @SET PSModulePath=%__MVNW_PSMODULEP_SAVE%
39 | @SET __MVNW_PSMODULEP_SAVE=
40 | @SET __MVNW_ARG0_NAME__=
41 | @SET MVNW_USERNAME=
42 | @SET MVNW_PASSWORD=
43 | @IF NOT "%__MVNW_CMD__%"=="" (%__MVNW_CMD__% %*)
44 | @echo Cannot start maven from wrapper >&2 && exit /b 1
45 | @GOTO :EOF
46 | : end batch / begin powershell #>
47 |
48 | $ErrorActionPreference = "Stop"
49 | if ($env:MVNW_VERBOSE -eq "true") {
50 | $VerbosePreference = "Continue"
51 | }
52 |
53 | # calculate distributionUrl, requires .mvn/wrapper/maven-wrapper.properties
54 | $distributionUrl = (Get-Content -Raw "$scriptDir/.mvn/wrapper/maven-wrapper.properties" | ConvertFrom-StringData).distributionUrl
55 | if (!$distributionUrl) {
56 | Write-Error "cannot read distributionUrl property in $scriptDir/.mvn/wrapper/maven-wrapper.properties"
57 | }
58 |
59 | switch -wildcard -casesensitive ( $($distributionUrl -replace '^.*/','') ) {
60 | "maven-mvnd-*" {
61 | $USE_MVND = $true
62 | $distributionUrl = $distributionUrl -replace '-bin\.[^.]*$',"-windows-amd64.zip"
63 | $MVN_CMD = "mvnd.cmd"
64 | break
65 | }
66 | default {
67 | $USE_MVND = $false
68 | $MVN_CMD = $script -replace '^mvnw','mvn'
69 | break
70 | }
71 | }
72 |
73 | # apply MVNW_REPOURL and calculate MAVEN_HOME
74 | # maven home pattern: ~/.m2/wrapper/dists/{apache-maven-
55 |
198 |
199 |
102 |
243 | );
244 | };
245 |
246 | export default UpdateProduct;
--------------------------------------------------------------------------------
/Ecommerce-Frontend/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Home from "./Home"
3 | import axios from "axios";
4 | // import { json } from "react-router-dom";
5 | // import { BiSunFill, BiMoon } from "react-icons/bi";
6 |
7 | const Navbar = ({ onSelectCategory, onSearch }) => {
8 | const getInitialTheme = () => {
9 | const storedTheme = localStorage.getItem("theme");
10 | return storedTheme ? storedTheme : "light-theme";
11 | };
12 | const [selectedCategory, setSelectedCategory] = useState("");
13 | const [theme, setTheme] = useState(getInitialTheme());
14 | const [input, setInput] = useState("");
15 | const [searchResults, setSearchResults] = useState([]);
16 | const [noResults, setNoResults] = useState(false);
17 | const [searchFocused, setSearchFocused] = useState(false);
18 | const [showSearchResults,setShowSearchResults] = useState(false)
19 | useEffect(() => {
20 | fetchData();
21 | }, []);
22 |
23 | const fetchData = async (value) => {
24 | try {
25 | const response = await axios.get("http://localhost:8080/api/products");
26 | setSearchResults(response.data);
27 | console.log(response.data);
28 | } catch (error) {
29 | console.error("Error fetching data:", error);
30 | }
31 | };
32 |
33 | const handleChange = async (value) => {
34 | setInput(value);
35 | if (value.length >= 1) {
36 | setShowSearchResults(true)
37 | try {
38 | const response = await axios.get(
39 | `http://localhost:8080/api/products/search?keyword=${value}`
40 | );
41 | setSearchResults(response.data);
42 | setNoResults(response.data.length === 0);
43 | console.log(response.data);
44 | } catch (error) {
45 | console.error("Error searching:", error);
46 | }
47 | } else {
48 | setShowSearchResults(false);
49 | setSearchResults([]);
50 | setNoResults(false);
51 | }
52 | };
53 |
54 |
55 | // const handleChange = async (value) => {
56 | // setInput(value);
57 | // if (value.length >= 1) {
58 | // setShowSearchResults(true);
59 | // try {
60 | // let response;
61 | // if (!isNaN(value)) {
62 | // // Input is a number, search by ID
63 | // response = await axios.get(`http://localhost:8080/api/products/search?id=${value}`);
64 | // } else {
65 | // // Input is not a number, search by keyword
66 | // response = await axios.get(`http://localhost:8080/api/products/search?keyword=${value}`);
67 | // }
68 |
69 | // const results = response.data;
70 | // setSearchResults(results);
71 | // setNoResults(results.length === 0);
72 | // console.log(results);
73 | // } catch (error) {
74 | // console.error("Error searching:", error.response ? error.response.data : error.message);
75 | // }
76 | // } else {
77 | // setShowSearchResults(false);
78 | // setSearchResults([]);
79 | // setNoResults(false);
80 | // }
81 | // };
82 |
83 | const handleCategorySelect = (category) => {
84 | setSelectedCategory(category);
85 | onSelectCategory(category);
86 | };
87 | const toggleTheme = () => {
88 | const newTheme = theme === "dark-theme" ? "light-theme" : "dark-theme";
89 | setTheme(newTheme);
90 | localStorage.setItem("theme", newTheme);
91 | };
92 |
93 | useEffect(() => {
94 | document.body.className = theme;
95 | }, [theme]);
96 |
97 | const categories = [
98 | "Laptop",
99 | "Headphone",
100 | "Mobile",
101 | "Electronics",
102 | "Toys",
103 | "Fashion",
104 | ];
105 | return (
106 | <>
107 |
103 |
242 | Update Product
104 | 241 |
161 | // setShowModal(false)}
246 | // cartItems={cartItems}
247 | // totalPrice={totalPrice}
248 | // handleCheckout={handleCheckout}
249 | // />
250 | //
251 |
252 | // );
253 | // };
254 |
255 | // export default Cart;
256 |
257 |
258 |
259 |
260 |
261 | import React, { useContext, useState, useEffect } from "react";
262 | import AppContext from "../Context/Context";
263 | import axios from "axios";
264 | import CheckoutPopup from "./CheckoutPopup";
265 | import { Button } from 'react-bootstrap';
266 |
267 | const Cart = () => {
268 | const { cart, removeFromCart , clearCart } = useContext(AppContext);
269 | const [cartItems, setCartItems] = useState([]);
270 | const [totalPrice, setTotalPrice] = useState(0);
271 | const [cartImage, setCartImage] = useState([]);
272 | const [showModal, setShowModal] = useState(false);
273 |
274 | useEffect(() => {
275 | const fetchImagesAndUpdateCart = async () => {
276 | console.log("Cart", cart);
277 | try {
278 | const response = await axios.get("http://localhost:8080/api/products");
279 | const backendProductIds = response.data.map((product) => product.id);
280 |
281 | const updatedCartItems = cart.filter((item) => backendProductIds.includes(item.id));
282 | const cartItemsWithImages = await Promise.all(
283 | updatedCartItems.map(async (item) => {
284 | try {
285 | const response = await axios.get(
286 | `http://localhost:8080/api/product/${item.id}/image`,
287 | { responseType: "blob" }
288 | );
289 | const imageFile = await converUrlToFile(response.data, response.data.imageName);
290 | setCartImage(imageFile)
291 | const imageUrl = URL.createObjectURL(response.data);
292 | return { ...item, imageUrl };
293 | } catch (error) {
294 | console.error("Error fetching image:", error);
295 | return { ...item, imageUrl: "placeholder-image-url" };
296 | }
297 | })
298 | );
299 | console.log("cart",cart)
300 | setCartItems(cartItemsWithImages);
301 | } catch (error) {
302 | console.error("Error fetching product data:", error);
303 | }
304 | };
305 |
306 | if (cart.length) {
307 | fetchImagesAndUpdateCart();
308 | }
309 | }, [cart]);
310 |
311 | useEffect(() => {
312 | const total = cartItems.reduce(
313 | (acc, item) => acc + item.price * item.quantity,
314 | 0
315 | );
316 | setTotalPrice(total);
317 | }, [cartItems]);
318 |
319 | const converUrlToFile = async (blobData, fileName) => {
320 | const file = new File([blobData], fileName, { type: blobData.type });
321 | return file;
322 | }
323 |
324 | const handleIncreaseQuantity = (itemId) => {
325 | const newCartItems = cartItems.map((item) => {
326 | if (item.id === itemId) {
327 | if (item.quantity < item.stockQuantity) {
328 | return { ...item, quantity: item.quantity + 1 };
329 | } else {
330 | alert("Cannot add more than available stock");
331 | }
332 | }
333 | return item;
334 | });
335 | setCartItems(newCartItems);
336 | };
337 |
338 |
339 | const handleDecreaseQuantity = (itemId) => {
340 | const newCartItems = cartItems.map((item) =>
341 | item.id === itemId
342 | ? { ...item, quantity: Math.max(item.quantity - 1, 1) }
343 | : item
344 | );
345 | setCartItems(newCartItems);
346 | };
347 |
348 | const handleRemoveFromCart = (itemId) => {
349 | removeFromCart(itemId);
350 | const newCartItems = cartItems.filter((item) => item.id !== itemId);
351 | setCartItems(newCartItems);
352 | };
353 |
354 | const handleCheckout = async () => {
355 | try {
356 | for (const item of cartItems) {
357 | const { imageUrl, imageName, imageData, imageType, quantity, ...rest } = item;
358 | const updatedStockQuantity = item.stockQuantity - item.quantity;
359 |
360 | const updatedProductData = { ...rest, stockQuantity: updatedStockQuantity };
361 | console.log("updated product data", updatedProductData)
362 |
363 | const cartProduct = new FormData();
364 | cartProduct.append("imageFile", cartImage);
365 | cartProduct.append(
366 | "product",
367 | new Blob([JSON.stringify(updatedProductData)], { type: "application/json" })
368 | );
369 |
370 | await axios
371 | .put(`http://localhost:8080/api/product/${item.id}`, cartProduct, {
372 | headers: {
373 | "Content-Type": "multipart/form-data",
374 | },
375 | })
376 | .then((response) => {
377 | console.log("Product updated successfully:", (cartProduct));
378 | })
379 | .catch((error) => {
380 | console.error("Error updating product:", error);
381 | });
382 | }
383 | clearCart();
384 | setCartItems([]);
385 | setShowModal(false);
386 | } catch (error) {
387 | console.log("error during checkout", error);
388 | }
389 | };
390 |
391 | return (
392 |
162 | //
171 | //
231 | // ))}
232 | //
243 | // Shopping Bag
163 | // {cartItems.length === 0 ? (
164 | //
165 | //
167 | // ) : (
168 | // <>
169 | // {cartItems.map((item) => (
170 | // Your cart is empty
166 | //
176 | //
230 | //
177 | //
181 | //
178 | //
179 | //
180 | //
182 | // 
188 | //
189 | //
190 | // {item.brand}
191 | // {item.name}
192 | //
193 |
194 | //
195 | //
203 | //
209 | //
218 | //
219 |
220 | //
221 | // ${item.price * item.quantity}
222 | //
223 | //
229 | // Total: ${totalPrice}
233 | //
240 | //
241 | // )}
242 | //
393 | setShowModal(false)}
472 | cartItems={cartItems}
473 | totalPrice={totalPrice}
474 | handleCheckout={handleCheckout}
475 | />
476 |
477 |
478 | );
479 | };
480 |
481 | export default Cart;
482 |
--------------------------------------------------------------------------------
/Ecommerce-Frontend/src/App.css:
--------------------------------------------------------------------------------
1 |
2 | /* Navbar Styles */
3 |
4 | .light-theme{
5 | --root_background: #1f1f1f;
6 | --body_background: white;
7 | --navbar_background: white;
8 | --navbar_text : black;
9 | /* --body_color : rgb(47, 45, 45); */
10 | --body_color : white;
11 | --link_color : rgb(0, 0, 0);
12 | --link_hover_color : rgb(35, 35, 35);
13 | --link_visited_color : purple;
14 | --para-clr:black;
15 | --cart_body_color: white;
16 | --quantity-clr: rgb(0, 0, 0);
17 | --button-clr: black;
18 | --card-bg-clr: white;
19 | --btn-bg: var(--navbar_background);
20 | --btn-clr: black;
21 | --category-hvr: rgb(200, 200, 200);
22 | --search_result-bg: rgb(239, 239, 239);
23 | --hr_line_card: black
24 | }
25 | .dark-theme{
26 | --root_background: white;
27 | --body_background: #1f1f1f;
28 | --navbar_background: black;
29 | --navbar_text : white;
30 | /* --body_color : white; */
31 | --body_color : black;
32 | --link_color : rgb(255, 255, 255);
33 | --link_hover_color : rgb(137, 137, 137);
34 | --link_visited_color : purple;
35 | --para-clr:white;
36 | --cart_body_color: rgb(36, 35, 35);
37 | --quantity-clr: rgb(255, 255, 255);
38 | --button-clr: white;
39 | --card-bg-clr: #2c2b2b;
40 | --btn-bg: var(--navbar_background);
41 | --btn-clr: white;
42 | --category-hvr: rgb(115, 115, 115);
43 | --search_result-bg: rgb(49, 49, 49);
44 | --hr_line_card: rgb(255, 255, 255)
45 | }
46 |
47 | #root {
48 | max-width: 100%;
49 | max-height: 100%;
50 | margin: 0 auto;
51 | background-color: var(--root_background) !important;
52 | }
53 |
54 | /* <.............................................NAVBAR DROPDOWN......................................> */
55 | .navbar-brand {
56 | font-size: 1.5rem;
57 | font-weight: bold;
58 | }
59 |
60 | .theme-btn {
61 | background-color: transparent;
62 | border: none;
63 | cursor: pointer;
64 | font-size: 1.5rem;
65 | color: inherit;
66 | border-radius: 50%;
67 | }
68 |
69 | .cart {
70 | position: relative;
71 | }
72 |
73 | /* .navbar-nav .nav-link {
74 | color: black;
75 | } */
76 |
77 | /* .navbar-nav .nav-link:hover {
78 | color: #007bff;
79 | } */
80 |
81 | .list-group {
82 | position: absolute;
83 | top: 100%;
84 | left: 0;
85 | width: calc(100% - 1rem);
86 | background-color: var(--body_color);
87 | border: 1px solid #ced4da;
88 | border-radius: 0.25rem;
89 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
90 | z-index: 1000;
91 | }
92 |
93 | .list-group-item {
94 | padding: 0.5rem 1rem;
95 | cursor: pointer;
96 | background-color: var(--search_result-bg) !important;
97 | }
98 |
99 | .list-group-item:hover {
100 | background-color: #f8f9fa;
101 | }
102 |
103 |
104 | .no-results-message {
105 | margin-top: 0.5rem;
106 | color: #dc3545;
107 | display: flex;
108 | justify-content: center;
109 | }
110 | .search-result-link {
111 | text-decoration: none;
112 | color: inherit;
113 | }
114 |
115 | .search-result-link:hover {
116 | text-decoration: underline;
117 | }
118 |
119 | /* <..........................................................................................................> */
120 | h1{
121 | color: var(--para-clr);
122 | }
123 | h2{
124 | color: var(--para-clr);
125 | }
126 | h3{
127 | color: var(--para-clr);
128 | }
129 | /* h4{
130 | color: var(--para-clr);
131 | } */
132 | h5{
133 | color: var(--para-clr);
134 | }
135 | h6{
136 | color: var(--para-clr);
137 | }
138 | p{
139 | color: var(--para-clr);
140 | }
141 |
142 | a {
143 | color: var(--link_color);
144 | }
145 | .theme-btn{
146 | background-color: var(--btn-bg);
147 | color: var(--btn-clr);
148 | border: 1px solid var(--button-clr);
149 | margin: 10px;
150 | }
151 | .navbar {
152 | position: fixed;
153 | top: 0;
154 | left: 0;
155 | width: 100%;
156 | background-color: var(--navbar_background);
157 | /* color: var(--navbar_text); */
158 | padding: 10px 0;
159 |
160 | /* z-index: 1000; */
161 | }
162 | .text-center{
163 | color: var(--navbar_text) !important;
164 | }
165 | .navbar a,span,li,i,button {
166 | color: var(--navbar_text) !important;
167 | }
168 | .navbar a:hover {
169 | color: var(--link_hover_color);
170 | }
171 | .content {
172 | padding-top: 500px;
173 | }
174 |
175 | .card{
176 | padding-top: 500px;
177 | width: 40px;
178 | padding: 1rem;
179 | height: 13rem;
180 | border-radius: 5%;
181 | background-color: var(--card-bg-clr) !important;
182 |
183 |
184 | }
185 | .card h5,h3,i{
186 | color: var(--para-clr) !important;
187 | }
188 | .dropdown-item{
189 | color: var(--para-clr) !important;
190 | }
191 |
192 | .dropdown-menu{
193 | background-color: var(--card-bg-clr) !important;
194 | }
195 | .dropdown-item:hover {
196 | color: var(--bs-dropdown-link-hover-color);
197 | background-color: var(--category-hvr) !important;
198 | }
199 | .grid{
200 | margin: 0 auto;
201 | max-width: 90%;
202 | width: 100%;
203 | height: 100%;
204 | display: grid;
205 | place-items: flex-start;
206 | padding: 3rem;
207 | grid-template-columns: 0.5fr 0.5fr 0.5fr;
208 | grid-template-rows: 1fr 1fr 1fr;
209 | /* grid-column-gap: 2rem;
210 | grid-row-gap: 2rem; */
211 | background: var(--body_background);
212 | align-items: stretch;
213 | padding-top: 100px;
214 | /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
215 | border-radius: .5rem;
216 |
217 | }
218 | .container{
219 | margin-top: 11%;
220 | max-width: 120rem;
221 | display: grid;
222 | grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
223 | grid-template-rows: 1fr 1fr 1fr;
224 | margin: 0 auto;
225 | }
226 | /* grid-template-columns: 1fr 1fr 1fr;
227 | gap: 1.6rem;
228 | padding-top: 100px;
229 | } */
230 | .card-brand{
231 | font-size: 1.2rem;
232 | font-weight: 350;
233 | color: #524c4c;
234 |
235 | }
236 | .btn-primary{
237 | border-radius: 5px;
238 | cursor: pointer;
239 | transition: all .3s ease;
240 | font-size: 1rem;
241 | }
242 | .card-button-container {
243 | position: absolute;
244 | bottom: 10px;
245 | left: 55%;
246 | /* transform: translateX(-50%); */
247 | width: 100%;
248 | }
249 |
250 | .product-card{
251 | padding-top: 500px;
252 | width: 40px;
253 | padding: 1rem;
254 | height: 13rem;
255 | border-radius: 5%;
256 | margin: 100px;
257 | }
258 |
259 | /* <---------------------------------------Product CSS--------------------------------------------------------------> */
260 |
261 |
262 | .containers {
263 | width: 100%;
264 | height: 150vh;
265 | margin: 0 auto;
266 | padding: 15px;
267 | display: flex;
268 | justify-content: center;
269 | align-items: flex-start;
270 | background-color: var(--body_background);
271 | }
272 | .containers h1,h2,h3,h4,h5,h6,p,span{
273 | color: var(--para-clr);
274 | }
275 | .left-column-img{
276 | vertical-align: middle;
277 | max-width: 30rem;
278 | max-height: 30rem;
279 | padding-top: 6rem;
280 | margin: 20px;
281 | }
282 | .left-column {
283 | width: 40%;
284 | position: relative;
285 | }
286 |
287 | .right-column {
288 | width: 40%;
289 | margin-top: 60px;
290 | margin-left: 60px;
291 | }
292 | /* Left Column */
293 | .left-column img {
294 | width: 100%;
295 | position: absolute;
296 | left: 0;
297 | top: 0;
298 | opacity: 0;
299 | transition: all 0.3s ease;
300 | }
301 |
302 | .left-column img.active {
303 | opacity: 1;
304 | }
305 | /* Product Description */
306 | .product-description {
307 | border-bottom: 1px solid #E1E8EE;
308 | margin-bottom: 10px;
309 | margin-top: 60px;
310 | }
311 | .product-description h5{
312 | color: var(--para-clr);
313 | }
314 | .product-description span {
315 | font-size: 12px;
316 | color: #358ED7 !important;
317 | letter-spacing: 1px;
318 | text-transform: uppercase;
319 | text-decoration: none;
320 | }
321 |
322 |
323 | .product-description h5 {
324 | font-weight: 400;
325 | font-size: 24px;
326 | /* color: #43484D; */
327 | letter-spacing: -2px;
328 | }
329 | .product-description p {
330 | font-size: 16px;
331 | font-weight: 400;
332 | /* color: #86939E; */
333 | line-height: 24px;
334 | }
335 | .release-date{
336 | font-weight: 300;
337 |
338 | }
339 | /* Cable Configuration */
340 |
341 | .cable-config a {
342 | color: #358ED7;
343 | text-decoration: none;
344 | font-size: 12px;
345 | position: relative;
346 | margin: 10px 0;
347 | display: inline-block;
348 | }
349 |
350 | .cable-config a:before {
351 | content: "?";
352 | height: 15px;
353 | width: 15px;
354 | border-radius: 50%;
355 | border: 2px solid rgba(53, 142, 215, 0.5);
356 | display: inline-block;
357 | text-align: center;
358 | line-height: 16px;
359 | opacity: 0.5;
360 | margin-right: 5px;
361 | }
362 | /* Product Price */
363 | .product-price {
364 | display: grid;
365 | justify-items: start;
366 | color: var(--para-clr);
367 | grid-gap: 10px 4px;
368 |
369 | }
370 | .update-button{
371 | display: flex;
372 | width: 10rem;
373 | justify-content: space-around;
374 | }
375 |
376 | .product-price span {
377 | font-size: 26px;
378 | font-weight: 400;
379 | /* color: #43474D; */
380 | margin-right: 20px;
381 | }
382 |
383 | .cart-btn {
384 | display: inline-block;
385 | background-color: #0d6efd;
386 | border-radius: 6px;
387 | font-size: 16px;
388 | color: #FFFFFF;
389 | text-decoration: none;
390 | padding: 12px 30px;
391 | transition: all .5s;
392 | }
393 | .cart-btn:hover {
394 | background-color: #64af3d;
395 | }
396 | .disabled-btn {
397 | background-color: #ccc; /* Grey background */
398 | color: #666; /* Dark grey text color */
399 | cursor: not-allowed; /* Show cursor as not-allowed */
400 | }
401 |
402 | /* Responsive */
403 | @media (max-width: 940px) {
404 | .container {
405 | flex-direction: column;
406 | margin-top: 60px;
407 | }
408 |
409 | .left-column,
410 | .right-column {
411 | width: 100%;
412 | }
413 |
414 | .left-column img {
415 | width: 300px;
416 | right: 0;
417 | top: -65px;
418 | left: initial;
419 | }
420 | }
421 |
422 | @media (max-width: 535px) {
423 | .left-column img {
424 | width: 220px;
425 | top: -85px;
426 | }
427 | }
428 | /* <....................................Add Product................................................> */
429 |
430 |
431 | .container{
432 | background-color: var(--body_background) !important;
433 | color: var(--body_color) !important;
434 | width: 100%;
435 | height: 100vh;
436 | display: flex;
437 | justify-content: center;
438 | align-items: center;
439 | }
440 | .center-container {
441 | position: absolute;
442 | top: 50%;
443 | left: 50%;
444 | color: var(--para-clr);
445 | transform: translate(-50%, -50%);
446 | background-color: var(--body_background) !important;
447 | /* padding-top: 12%; */
448 | }
449 |
450 | .center-container .image-control {
451 | display: block;
452 | margin: 0 auto;
453 | padding-top: 2rem;
454 | background-color: var(--body_background);
455 | }
456 |
457 | /* <......................................CART....................................................> */
458 |
459 | .shopping-cart {
460 | width: 70%;
461 | height: auto;
462 | padding: 80px;
463 | margin: 0 auto;
464 | font-family: Arial, Helvetica, sans-serif;
465 | background: var(--cart_body_color);
466 | box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.2);
467 | border-radius: 6px;
468 | display: flex;
469 | flex-direction: column;
470 | /* width: 100vh;
471 | height: 100vh; */
472 | }
473 |
474 | .shopping-cart h1 {
475 | background-color: #f8f9fa;
476 | }
477 |
478 | .title {
479 | height: 60px;
480 | border-bottom: 1px solid #E1E8EE;
481 | padding: 20px 30px;
482 | color: var(--para-clr);
483 | font-size: 18px;
484 | font-weight: 400;
485 | }
486 |
487 | .empty h4 {
488 | color: var(--para-clr);
489 | }
490 |
491 | .item {
492 | padding: 10px 10px;
493 | width: 800px;
494 | display: flex;
495 | justify-content: space-between;
496 | align-items: center;
497 | /* margin-bottom: 10px; */
498 | }
499 |
500 | .item:nth-child(3) {
501 | border-top: 1px solid #E1E8EE;
502 | border-bottom: 1px solid #E1E8EE;
503 | }
504 |
505 | .buttons {
506 | position: relative;
507 | display: flex;
508 | /* padding-top: 30px; */
509 | margin-right: 60px;
510 | }
511 |
512 | .delete-btn,
513 | .like-btn {
514 | display: inline-block;
515 | Cursor: pointer;
516 | }
517 |
518 | .delete-btn {
519 | width: 18px;
520 | height: 17px;
521 | background: url("delete-icn.svg") no-repeat center;
522 | /* color: var(--body_color); */
523 | }
524 |
525 | .like-btn {
526 | position: absolute;
527 | top: 9px;
528 | left: 15px;
529 | background: url("twitter-heart.png");
530 | width: 60px;
531 | height: 60px;
532 | background-size: 2900%;
533 | background-repeat: no-repeat;
534 | }
535 |
536 | .is-active {
537 | animation-name: animate;
538 | animation-duration: 0.8s;
539 | animation-iteration-count: 1;
540 | animation-timing-function: steps(28);
541 | animation-fill-mode: forwards;
542 | }
543 |
544 | @keyframes animate {
545 | 0% {
546 | background-position: left;
547 | }
548 | 50% {
549 | background-position: right;
550 | }
551 | 100% {
552 | background-position: right;
553 | }
554 | }
555 |
556 | .image img {
557 | margin-right: 80px;
558 | height: 100px;
559 | }
560 |
561 | .description {
562 | color: var(--para-clr);
563 | padding-top: 10px;
564 | /* margin-right: 60px; */
565 | padding-left: 10px;
566 | flex-grow: 1;
567 | }
568 |
569 | .description span {
570 | display: block;
571 | /* padding-left: 20px; */
572 | font-size: 14px;
573 | color: var(--para-clr);
574 | font-weight: 400;
575 | }
576 |
577 | .description span:first-child {
578 | margin-bottom: 5px;
579 | }
580 |
581 | .description span:last-child {
582 | font-weight: 300;
583 | margin-top: 8px;
584 | color: var(--quantity-clr);
585 | }
586 |
587 | .quantity {
588 | /* padding-top: 20px; */
589 | /* margin-right: 60px; */
590 | display: flex;
591 | align-items: center;
592 | color: var(--cart_body_color);
593 | background-color: var(--body_background);
594 | }
595 |
596 | .quantity input {
597 | /* -webkit-appearance: none; */
598 | border: none;
599 | text-align: center;
600 | width: 32px;
601 | font-size: 16px;
602 | /* color: var(--quantity-clr); */
603 | font-weight: 400;
604 | }
605 |
606 | .buttons[class*=btn] {
607 | /* width: 30px;
608 | height: 30px; */
609 | /* background-color: var(--body_color); */
610 | border-radius: 6px;
611 | border: none;
612 | cursor: pointer;
613 | }
614 |
615 | .minus-btn {
616 | border: none;
617 | color: var(--button-clr);
618 | background-color: var(--cart_body_color);
619 | font-weight: 500;
620 | }
621 |
622 | .plus-btn {
623 | border: none;
624 | color: var(--button-clr);
625 | background-color: var(--cart_body_color);
626 | }
627 |
628 | .remove-btn {
629 | border: none;
630 | color: var(--button-clr);
631 | background-color: var(--cart_body_color);
632 | }
633 |
634 | .buttons:focus,
635 | input:focus {
636 | outline: 0;
637 | }
638 |
639 | .total-price {
640 | width: 83px;
641 | /* padding-top: 27px; */
642 | text-align: center;
643 | font-size: 16px;
644 | color: var(--quantity-clr);
645 | font-weight: 300;
646 | }
647 |
648 | @media (max-width: 800px) {
649 | .shopping-cart {
650 | width: 100%;
651 | height: auto;
652 | overflow: hidden;
653 | }
654 |
655 | .item {
656 | height: auto;
657 | flex-wrap: wrap;
658 | justify-content: center;
659 | }
660 |
661 | .image img {
662 | width: 50%;
663 | }
664 |
665 | .image,
666 | .quantity,
667 | .description {
668 | width: 100%;
669 | text-align: center;
670 | margin: 6px 0;
671 | }
672 |
673 | .buttons {
674 | margin-right: 20px;
675 | }
676 | }
677 |
678 | .buttons-liked {
679 | padding-left: 10px;
680 | }
681 |
682 | .total {
683 | display: flex;
684 | justify-content: center;
685 | font-weight: 700;
686 | color: var(--quantity-clr);
687 | margin-top: 40px; }
688 |
689 | .cart-items {
690 | list-style: none;
691 | padding: 0;
692 | }
693 |
694 | .cart-item {
695 | display: flex;
696 | align-items: center;
697 | border-bottom: 1px solid #ccc;
698 | /* margin-bottom: 20px;
699 | padding-bottom: 20px; */
700 | }
701 |
702 | .cart-item-image {
703 | width: 80px;
704 | height: 80px;
705 | margin: 10px;
706 | border-radius: 5px;
707 | object-fit: cover;
708 | }
709 |
710 | .cart-container {
711 | width: 100%;
712 | height: 100%;
713 | background-color: var(--body_background);
714 | }
715 |
716 | .checkout-button {
717 | /* width: 100%;
718 | height: 100%; */
719 | display: flex;
720 | justify-content: center;
721 | align-items: center;
722 | }
723 |
724 | .checkout-button button {
725 | background-color: var(--button-clr);
726 | }
727 | /* <........................................Checkout Popup...........................................> */
728 | .checkout-item p{
729 | color: black;
730 |
731 | }
732 | .checkout-items{
733 | display: column;
734 | }
735 | .checkoutPopup {
736 | background-color: var(--body_background) !important;
737 | }
738 |
739 |
740 | /* <........................................Update Product.......................................> */
741 |
742 | .update-product-container {
743 | background-color: var(--body_background);
744 | width: 100%;
745 | min-height: 150vh;
746 | box-sizing: border-box;
747 | }
748 | /* <...............................Button...............................> */
749 | .buttons {
750 | -webkit-box-sizing: border-box;
751 | -moz-box-sizing: border-box;
752 | box-sizing: border-box;
753 | }
754 |
755 | .buttons {
756 | margin: 10%;
757 | text-align: center;
758 | }
759 |
760 | .btn-hover {
761 | width: 150px;
762 | font-size: 16px;
763 | font-weight: 600;
764 | color: #fff;
765 | cursor: pointer;
766 | margin: 10px;
767 | height: 45px;
768 | text-align:center;
769 | border: none;
770 | background-size: 300% 100%;
771 |
772 | border-radius: 50px;
773 | -moz-transition: all .4s ease-in-out;
774 | -o-transition: all .4s ease-in-out;
775 | -webkit-transition: all .4s ease-in-out;
776 | transition: all .4s ease-in-out;
777 | }
778 |
779 | .btn-hover:hover {
780 | background-position: 100% 0;
781 | -moz-transition: all .4s ease-in-out;
782 | -o-transition: all .4s ease-in-out;
783 | -webkit-transition: all .4s ease-in-out;
784 | transition: all .4s ease-in-out;
785 | }
786 |
787 | .btn-hover:focus {
788 | outline: none;
789 | }
790 |
791 | .btn-hover.color-9 {
792 | background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
793 | box-shadow: 0 3px 5px 0 rgba(65, 132, 234, 0.75);
794 | }
795 |
796 | /* .home-cart-price{
797 | display: flex;
798 |
799 | align-items: center;
800 | font-weight: 500;
801 | } */
802 | /* <..........................................Product-Cart..................................> */
803 | .bt {
804 | width: 100px;
805 | cursor: pointer;
806 | position: relative;
807 | font-family: "Roboto";
808 | text-transform: uppercase;
809 | color: #503af6;
810 | letter-spacing: 0.5px;
811 | -webkit-user-select: none;
812 | -moz-user-select: none;
813 | -ms-user-select: none;
814 | user-select: none;
815 | outline: none;
816 | text-decoration: none;
817 | text-align: center;
818 |
819 | }
820 |
821 | .more-bt {
822 | border-right: 2px solid #503af6;
823 | border-bottom: 2px solid #503af6;
824 | padding: 17px 29px 15px 31px;
825 | border-color: #503af6;
826 | }
827 |
828 | .more-bt p {
829 | font-size: 14px;
830 | }
831 |
832 | #wrapper.smooth section.smoothy.show {
833 | visibility: visible;
834 | }
835 |
836 | .more-bt:before {
837 | left: 0;
838 | bottom: 0;
839 | height: -webkit-calc(100% - 17px);
840 | height: calc(100% - 17px);
841 | width: 2px;
842 | }
843 |
844 | .more-bt:after, .more-bt:before {
845 | content: " ";
846 | display: block;
847 | background: #503af6;
848 | position: absolute;
849 | -webkit-transition: .5s;
850 | transition: .5s;
851 | z-index: 10;
852 | }
853 |
854 | .more-bt:after {
855 | top: 0;
856 | right: 0;
857 | width: -webkit-calc(100% - 17px);
858 | width: calc(100% - 17px);
859 | height: 2px;
860 | }
861 |
862 | .more-bt:after, .more-bt:before {
863 | content: " ";
864 | display: block;
865 | background: #503af6;
866 | position: absolute;
867 | -webkit-transition: .5s;
868 | transition: .5s;
869 | z-index: 10;
870 | }
871 |
872 | ::selection {
873 | background: #503af6;
874 | color: #FFFFFF;
875 | text-shadow: none;
876 | }
877 |
878 | .more-bt:before {
879 | left: 0;
880 | bottom: 0;
881 | height: -webkit-calc(100% - 17px);
882 | height: calc(100% - 17px);
883 | width: 2px;
884 | }
885 |
886 | .more-bt:after, .more-bt:before {
887 | content: " ";
888 | display: block;
889 | background: #503af6;
890 | position: absolute;
891 | -webkit-transition: .5s;
892 | transition: .5s;
893 | z-index: 10;
894 | }
895 |
896 | .more-bt .fl, .more-bt .sfl {
897 | position: absolute;
898 | right: 0;
899 | height: 100%;
900 | width: 0;
901 | z-index: 2;
902 | background: #503af6;
903 | top: 0;
904 | -webkit-transition: .5s;
905 | transition: .5s;
906 | -webkit-transition-delay: .1s;
907 | transition-delay: .1s;
908 | }
909 |
910 | .more-bt .fl, .more-bt .sfl {
911 | position: absolute;
912 | right: 0;
913 | height: 100%;
914 | width: 0;
915 | z-index: 2;
916 | background: #503af6;
917 | top: 0;
918 | -webkit-transition: .5s;
919 | transition: .5s;
920 | -webkit-transition-delay: .1s;
921 | transition-delay: .1s;
922 | }
923 |
924 | .more-bt .sfl {
925 | z-index: 1;
926 | background: #4431D1;
927 | -webkit-transition: .7s;
928 | transition: .7s;
929 | }
930 |
931 | .more-bt .cross {
932 | position: absolute;
933 | z-index: 15;
934 | width: 18px;
935 | height: 18px;
936 | top: -webkit-calc(50% - 8px);
937 | top: calc(50% - 8px);
938 | left: -webkit-calc(50% - 8px);
939 | left: calc(50% - 8px);
940 | }
941 |
942 | #wrapper.smooth section.smoothy {
943 | visibility: hidden;
944 | }
945 |
946 | .more-bt .cross:before {
947 | width: 100%;
948 | height: 2px;
949 | top: 8px;
950 | left: 0px;
951 | -webkit-transform: translateX(50px) scaleX(0);
952 | -ms-transform: translateX(50px) scaleX(0);
953 | transform: translateX(50px) scaleX(0);
954 | }
955 |
956 | .more-bt .cross:before, .more-bt .cross:after {
957 | content: " ";
958 | background: #fff;
959 | display: block;
960 | position: absolute;
961 | opacity: 0;
962 | -webkit-transition-duration: .3s;
963 | transition-duration: .3s;
964 | -webkit-transition-delay: 0s;
965 | transition-delay: 0s;
966 | -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
967 | transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
968 | }
969 |
970 | .more-bt .cross:after {
971 | width: 2px;
972 | height: 100%;
973 | left: 8px;
974 | top: 0;
975 | -webkit-transform: translateY(20px) scaleY(0);
976 | -ms-transform: translateY(20px) scaleY(0);
977 | transform: translateY(20px) scaleY(0);
978 | -webkit-transition-duration: .4s;
979 | transition-duration: .4s;
980 | }
981 |
982 | .more-bt .cross:before, .more-bt .cross:after {
983 | content: " ";
984 | background: #fff;
985 | display: block;
986 | position: absolute;
987 | opacity: 0;
988 | -webkit-transition-duration: .3s;
989 | transition-duration: .3s;
990 | -webkit-transition-delay: 0s;
991 | transition-delay: 0s;
992 | -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
993 | transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
994 | }
995 |
996 | .more-bt i {
997 | position: absolute;
998 | display: block;
999 | top: 1px;
1000 | left: 1px;
1001 | -webkit-transition: .5s;
1002 | transition: .5s;
1003 | z-index: 10;
1004 | }
1005 |
1006 | .more-bt i:before {
1007 | -webkit-transform: rotate(90deg);
1008 | -ms-transform: rotate(90deg);
1009 | transform: rotate(90deg);
1010 | }
1011 |
1012 | .more-bt i:after, .more-bt i:before {
1013 | content: " ";
1014 | display: block;
1015 | width: 2px;
1016 | height: 20px;
1017 | background: #503af6;
1018 | position: absolute;
1019 | margin: -10px -1px;
1020 | left: 50%;
1021 | top: 50%;
1022 | transition: 0.3s;
1023 | }
1024 |
1025 | .more-bt:hover i:after {
1026 | content: " ";
1027 | display: block;
1028 | width: 2px;
1029 | height: 20px;
1030 | background: #503af6;
1031 | position: absolute;
1032 | margin: 0px -1px;
1033 | left: 50%;
1034 | top: 50%;
1035 | }
1036 |
1037 | .more-bt:hover i:before {
1038 | content: " ";
1039 | display: block;
1040 | width: 2px;
1041 | height: 20px;
1042 | background: #503af6;
1043 | position: absolute;
1044 | margin: -10px 0px -10px 8px;
1045 | left: 50%;
1046 | top: 50%;
1047 | }
1048 |
1049 | .more-bt p {
1050 | -webkit-transition: .5s;
1051 | transition: .5s;
1052 | position: relative;
1053 | z-index: 1;
1054 | }
1055 |
1056 | .more-bt:hover:before, .more-bt:before {
1057 | height: 100%;
1058 | }
1059 |
1060 | .more-bt:before {
1061 | left: 0;
1062 | bottom: 0;
1063 | height: -webkit-calc(100% - 17px);
1064 | height: calc(100% - 17px);
1065 | width: 2px;
1066 | }
1067 |
1068 | .more-bt:hover .fl, .more-bt .fl {
1069 | -webkit-transition: .7s;
1070 | transition: .7s;
1071 | }
1072 |
1073 | .more-bt:hover .fl, .more-bt:hover .sfl, .more-bt .fl, .more-bt .sfl {
1074 | -webkit-transition-delay: 0s;
1075 | transition-delay: 0s;
1076 | width: 100%;
1077 | }
1078 |
1079 | .more-bt .fl, .more-bt .sfl {
1080 | position: absolute;
1081 | right: 0;
1082 | height: 100%;
1083 | width: 0;
1084 | z-index: 2;
1085 | background: #503af6;
1086 | top: 0;
1087 | -webkit-transition: .5s;
1088 | transition: .5s;
1089 | -webkit-transition-delay: .1s;
1090 | transition-delay: .1s;
1091 | }
1092 |
1093 | .more-bt:hover .sfl, .more-bt.sfl {
1094 | -webkit-transition: .5s;
1095 | transition: .5s;
1096 | }
1097 |
1098 | .more-bt:hover .fl, .more-bt:hover .sfl, .more-bt.hvd .fl, .more-bt.hvd .sfl {
1099 | -webkit-transition-delay: 0s;
1100 | transition-delay: 0s;
1101 | width: 100%;
1102 | }
1103 |
1104 | .more-bt .sfl {
1105 | z-index: 1;
1106 | background: #4431D1;
1107 | -webkit-transition: .7s;
1108 | transition: .7s;
1109 | }
1110 |
1111 | .more-bt .cross {
1112 | position: absolute;
1113 | z-index: 15;
1114 | width: 18px;
1115 | height: 18px;
1116 | top: -webkit-calc(50% - 8px);
1117 | top: calc(50% - 8px);
1118 | left: -webkit-calc(50% - 8px);
1119 | left: calc(50% - 8px);
1120 | }
1121 |
1122 | .more-bt:hover .cross:before, .more-bt .cross:before {
1123 | -webkit-transition-duration: .5s;
1124 | transition-duration: .5s;
1125 | }
1126 |
1127 | .more-bt:hover .cross:after, .more-bt:hover .cross:before, .more-bt .cross:after, .more-bt .cross:before {
1128 | -webkit-transform: none;
1129 | -ms-transform: none;
1130 | transform: none;
1131 | opacity: 1;
1132 | -webkit-transition-delay: .2s;
1133 | transition-delay: .2s;
1134 | }
1135 |
1136 | .more-bt .cross:after {
1137 | width: 2px;
1138 | height: 100%;
1139 | left: 8px;
1140 | top: 0;
1141 | -webkit-transform: translateY(20px) scaleY(0);
1142 | -ms-transform: translateY(20px) scaleY(0);
1143 | transform: translateY(20px) scaleY(0);
1144 | -webkit-transition-duration: .4s;
1145 | transition-duration: .4s;
1146 | }
1147 |
1148 | .more-bt .cross:before, .more-bt .cross:after {
1149 | content: " ";
1150 | background: #fff;
1151 | display: block;
1152 | position: absolute;
1153 | opacity: 0;
1154 | -webkit-transition-duration: .3s;
1155 | transition-duration: .3s;
1156 | -webkit-transition-delay: 0s;
1157 | transition-delay: 0s;
1158 | -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
1159 | transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
1160 | }
1161 |
1162 | .more-bt:hover .cross:after, .more-bt:hover .cross:before, .more-bt.hvd .cross:after, .more-bt.hvd .cross:before {
1163 | -webkit-transform: none;
1164 | -ms-transform: none;
1165 | transform: none;
1166 | opacity: 1;
1167 | -webkit-transition-delay: .2s;
1168 | transition-delay: .2s;
1169 | }
1170 |
1171 | .more-bt:hover .cross:after, .more-bt.hvd .cross:after {
1172 | -webkit-transition-duration: .6s;
1173 | transition-duration: .6s;
1174 | }
1175 | /* <................................HR line..................> */
1176 |
1177 | .hr-line {
1178 | width: 100%;
1179 | height: 1px;
1180 | background: var(--hr_line_card)
1181 | }
1182 |
--------------------------------------------------------------------------------
394 |
403 |
457 | ))}
458 |
469 | Shopping Bag
395 | {cartItems.length === 0 ? (
396 |
397 |
399 | ) : (
400 | <>
401 | {cartItems.map((item) => (
402 | Your cart is empty
398 |
408 |
409 |
456 |
410 |
415 |
416 |
417 | {item.brand}
418 | {item.name}
419 |
420 |
421 |
422 |
430 |
436 |
444 |
445 |
446 |
447 | ${item.price * item.quantity}
448 |
449 |
455 | Total: ${totalPrice}
459 |
466 |
467 | )}
468 |