diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/about.html b/about.html new file mode 100644 index 0000000..bf71600 --- /dev/null +++ b/about.html @@ -0,0 +1,382 @@ + + + + + + + JavaScript eCommerce + + + + + + + + + + + + +
+
+
+
+

Free shipping, 30-day return or refund guarantee.

+
+
+ SIGN IN + SIGN UP +
+
+
+
+
+ + + +
+ +
+
+ + +
+
+
+
+

Explore the Latest in Tech Industries

+

+ Your Destination for Cutting-Edge Gadgets! +

+

+ Welcome to Thapa eComStore, your ultimate destination for + cutting-edge gadgets! Explore the latest in tech innovation and + style with us. Shop now and discover a world of possibilities! +

+
+ Explore Our Products +
+
+
+
+ coding languages using html css js +
+
+
+
+
+ + + + + +
+
+ + + +
+
+
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+ +
+
+

new year sale

+

40% discount on speakers

+ Show now +
+
+ +
+
+
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+
+
+ + + + +
+
+
+
+ +
+
+

worldwide shipping

+

order above $100

+
+
+ +
+
+ +
+
+

Easy 30 Day Returns

+

Back Returns in 7 Days

+
+
+ +
+
+ +
+
+

money back guarantee

+

guarantee with in 30-Days

+
+
+ +
+
+ +
+
+

Easy Online Support

+

24/7 Any time support

+
+
+
+
+ + + + +
+
+

Why Choose Thapa Store

+

+ Choose Thapa EduHub for a holistic, enriching learning experience that + empowers you to achieve your goals. +

+
+ +
+
+
+

1

+

Wide Selection

+

+ Thapa Store offers a diverse range of gadgets, from smartphones to + smart home devices, ensuring you find what you need to elevate + your lifestyle and meet your tech requirements. +

+
+ +
+

2

+

Quality Assurance

+

+ Every gadget at Thapa Store undergoes rigorous quality checks, + guaranteeing reliability and performance, so you can shop with + confidence knowing you're getting the best. +

+
+ +
+

3

+

Competitive Prices

+

+ Enjoy great value with Thapa Store's competitive prices on + high-quality gadgets, making top-of-the-line technology accessible + to all without compromising on quality or performance. +

+
+
+
+
+ thapa technical home page +
+
+
+
+

4

+

Expert Guidance

+

+ Our knowledgeable staff provides expert guidance, helping you + choose the right gadget to meet your needs and preferences, + ensuring you make informed decisions every step of the way. +

+
+ +
+

5

+

Convenient Shopping

+

+ With Thapa Store, shopping for gadgets is easy and convenient. Our + user-friendly website and secure payment options ensure a seamless + experience from browsing to checkout, all from the comfort of your + home. +

+
+ +
+

6

+

Excellent Service

+

+ Thapa Store is committed to providing excellent service to our + customers. From prompt assistance with inquiries to efficient + handling of orders and deliveries, we prioritize your satisfaction + every step of the way. +

+
+
+
+
+ + + + + + + + + + + + + + + diff --git a/addToCart.html b/addToCart.html new file mode 100644 index 0000000..9677764 --- /dev/null +++ b/addToCart.html @@ -0,0 +1,184 @@ + + + + + + + JavaScript eCommerce + + + + + + + + + + + +
+
+
+
+

Free shipping, 30-day return or refund guarantee.

+
+
+ SIGN IN + SIGN UP +
+
+
+
+
+ + + +
+ +
+
+ + +
+
+
+
+
+ +
+
+

Selected Offer Summary

+
+
+

Sub Total:

+

0

+
+
+

Tax:

+

₹50

+
+
+
+

Final Total:

+

0

+
+
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/addTocart.js b/addTocart.js new file mode 100644 index 0000000..9fb2289 --- /dev/null +++ b/addTocart.js @@ -0,0 +1,56 @@ +import { getCartProductFromLS } from "./getCartProducts"; +import { showToast } from "./showToast"; +import { updateCartValue } from "./updateCartValue"; + + +getCartProductFromLS(); + + +export const addToCart = (event, id, stock) => { + let arrLocalStorageProduct = getCartProductFromLS(); + + const currentProdElem = document.querySelector(`#card${id}`); + let quantity = currentProdElem.querySelector(".productQuantity").innerText; + let price = currentProdElem.querySelector(".productPrice").innerText; + + price = price.replace("₹", ""); + + let existingProd = arrLocalStorageProduct.find( + (curProd) => curProd.id === id + ); + + console.log(existingProd); + + if (existingProd && quantity > 1) { + quantity = Number(existingProd.quantity) + Number(quantity); + price = Number(price * quantity); + let updatedCart = { id, quantity, price }; + + updatedCart = arrLocalStorageProduct.map((curProd) => { + return curProd.id === id ? updatedCart : curProd; + }); + console.log(updatedCart); + + localStorage.setItem("cartProductLS", JSON.stringify(updatedCart)); + + showToast("add", id); + } + + if (existingProd) { + + return false; + } + + + + price = Number(price * quantity); + quantity = Number(quantity); + + arrLocalStorageProduct.push({ id, quantity, price }); + localStorage.setItem("cartProductLS", JSON.stringify(arrLocalStorageProduct)); + + + updateCartValue(arrLocalStorageProduct); + + showToast("add", id); +}; \ No newline at end of file diff --git a/api/products.json b/api/products.json new file mode 100644 index 0000000..b36968b --- /dev/null +++ b/api/products.json @@ -0,0 +1,62 @@ +[ + { + "id": 1, + "name": "Laptop", + "category": "Computers", + "brand": "ExampleBrand", + "price": 99999.99, + "stock": 50, + "description": "Powerful laptop with a quad-core i5 processor, 8GB RAM, 256GB SSD, and a 14-inch FHD display.", + "image": "../images/lapi.png" + }, + { + "id": 2, + "name": "Smartphone", + "category": "Mobiles", + "brand": "TechGadget", + "price": 9499.99, + "stock": 100, + "image": "../images/iphone.png", + "description": "Feature-rich smartphone with a 6.2-inch screen, 12MP dual camera, 128GB storage, and a 4000mAh battery." + }, + { + "id": 3, + "name": "Headphones", + "category": "Audio", + "brand": "SoundBeats", + "price": 9149.99, + "stock": 30, + "image": "../images/headphone.png", + "description": "High-quality wireless headphones with over-ear design, 20 hours of battery life, and a sleek black color." + }, + { + "id": 4, + "name": "Watches", + "category": "Wearables", + "brand": "FitTech", + "price": 9199.99, + "stock": 20, + "image": "../images/watch.png", + "description": "Smartwatch with a 1.3-inch AMOLED display, water-resistant design, fitness tracking features, and a stylish silver color." + }, + { + "id": 5, + "name": "Speakers", + "category": "Audio", + "brand": "SoundBeats", + "price": 9149.99, + "stock": 30, + "image": "../images/speakers.png", + "description": "High-quality wireless headphones with over-ear design, 20 hours of battery life, and a sleek black color." + }, + { + "id": 6, + "name": "Television", + "category": "Video", + "brand": "Samsung", + "price": 99199.99, + "stock": 20, + "image": "../images/tv.png", + "description": "Smartwatch with a 1.3-inch AMOLED display, water-resistant design, fitness tracking features, and a stylish silver color." + } + ] \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..cf223b6 --- /dev/null +++ b/contact.html @@ -0,0 +1,174 @@ + + + + + + + + + Contact Page + + + + +
+
+
+
+

Free shipping, 30-day return or refund guarantee.

+
+
+ SIGN IN + SIGN UP +
+
+
+ +
+
+ + + +
+ +
+
+ + +
+
+

contact us

+

+ Get in touch with us. We are always here to help you. +

+
+ +
+
+
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + diff --git a/fetchQuantityFromCartLS.js b/fetchQuantityFromCartLS.js new file mode 100644 index 0000000..2a52590 --- /dev/null +++ b/fetchQuantityFromCartLS.js @@ -0,0 +1,15 @@ +import { getCartProductFromLS } from "./getCartProducts"; + +export const fetchQuantityFromCartLS = (id, price) => { + let cartProducts = getCartProductFromLS(); + + let existingProduct = cartProducts.find((curProd) => curProd.id === id); + let quantity = 1; + + if (existingProduct) { + quantity = existingProduct.quantity; + price = existingProduct.price; + } + + return { quantity, price }; +}; diff --git a/footer.js b/footer.js new file mode 100644 index 0000000..448ca70 --- /dev/null +++ b/footer.js @@ -0,0 +1,50 @@ +const footerHTML = ` + `; + +const footerElem = document.querySelector(".section-footer"); +footerElem.insertAdjacentHTML("afterbegin", footerHTML); diff --git a/getCartProducts.js b/getCartProducts.js new file mode 100644 index 0000000..4b21f36 --- /dev/null +++ b/getCartProducts.js @@ -0,0 +1,13 @@ +import { updateCartValue } from "./updateCartValue"; + +export const getCartProductFromLS = () => { + let cartProducts = localStorage.getItem("cartProductLS"); + if (!cartProducts) { + return []; + } + cartProducts = JSON.parse(cartProducts); + + updateCartValue(cartProducts); + + return cartProducts; +}; \ No newline at end of file diff --git a/homeProductsCards.js b/homeProductsCards.js new file mode 100644 index 0000000..64beba2 --- /dev/null +++ b/homeProductsCards.js @@ -0,0 +1,46 @@ + +import { addToCart } from "./addTocart"; +import { homeQuantityToggle } from "./homeQuantityToggle"; + +const productContainer = document.querySelector("#productContainer"); +const productTemplate = document.querySelector("#productTemplate"); + +export const showProductContainer = (products) => { + if (!products) { + return false; + } + + products.forEach((curProd) => { + const { brand, category, description, id, image, name, price, stock } = + curProd; + + const productClone = document.importNode(productTemplate.content, true); + + productClone.querySelector("#cardValue").setAttribute("id", `card${id}`); + + productClone.querySelector(".category").textContent = category; + productClone.querySelector(".productName").textContent = name; + productClone.querySelector(".productImage").src = image; + productClone.querySelector(".productImage").alt = name; + productClone.querySelector(".productStock").textContent = stock; + productClone.querySelector(".productDescription").textContent = description; + productClone.querySelector(".productPrice").textContent = `₹${price}`; + productClone.querySelector(".productActualPrice").textContent = `₹${ + price * 4 + }`; + + productClone + .querySelector(".stockElement") + .addEventListener("click", (event) => { + homeQuantityToggle(event, id, stock); + }); + + productClone + .querySelector(".add-to-cart-button") + .addEventListener("click", (event) => { + addToCart(event, id, stock); + }); + + productContainer.append(productClone); + }); +}; \ No newline at end of file diff --git a/homeQuantityToggle.js b/homeQuantityToggle.js new file mode 100644 index 0000000..170a6a1 --- /dev/null +++ b/homeQuantityToggle.js @@ -0,0 +1,26 @@ +export const homeQuantityToggle = (event, id,stock) =>{ + const currentCardElement = document.querySelector(`#card${id}`); + + const productQuantity = currentCardElement.querySelector(".productQuantity"); + + let quantity = parseInt(productQuantity.getAttribute("date-quantity")) || 1; + + if(event.target.className === "cartIncrement"){ + if(quantity < stock){ + quantity += 1; + + }else if (quantity === stock){ + quantity = stock + } + } + + if(event.target.className === "cartDecrement"){ + if(quantity > 1){ + quantity -= 1; + } + } + + productQuantity.innerText = quantity; + productQuantity.setAttribute("date-quantity", quantity.toString()) + return quantity; +}; \ No newline at end of file diff --git a/incrementDecrement.js b/incrementDecrement.js new file mode 100644 index 0000000..2ccf997 --- /dev/null +++ b/incrementDecrement.js @@ -0,0 +1,56 @@ +import { getCartProductFromLS } from "./getCartProducts"; +import { updateCartProductTotal } from "./updateCartProductTotal"; + +export const incrementDecrement = (event, id, stock, price) => { + const currentCardElement = document.querySelector(`#card${id}`); + const productQuantity = currentCardElement.querySelector(".productQuantity"); + const productPrice = currentCardElement.querySelector(".productPrice"); + + let quantity = 1; + let localStoragePrice = 0; + + let localCartProducts = getCartProductFromLS(); + let existingProd = localCartProducts.find((curProd) => curProd.id === id); + + if (existingProd) { + quantity = existingProd.quantity; + localStoragePrice = existingProd.price; + } else { + localStoragePrice = price; + price = price; + } + + if (event.target.className === "cartIncrement") { + if (quantity < stock) { + quantity += 1; + } else if (quantity === stock) { + quantity = stock; + localStoragePrice = price * stock; + } + } + + if (event.target.className === "cartDecrement") { + if (quantity > 1) { + quantity -= 1; + } + } + + + localStoragePrice = price * quantity; + localStoragePrice = Number(localStoragePrice.toFixed(2)); + + let updatedCart = { id, quantity, price: localStoragePrice }; + + updatedCart = localCartProducts.map((curProd) => { + return curProd.id === id ? updatedCart : curProd; + }); + + localStorage.setItem("cartProductLS", JSON.stringify(updatedCart)); + + + productQuantity.innerText = quantity; + productPrice.innerText = localStoragePrice; + + + updateCartProductTotal(); +}; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c0931f7 --- /dev/null +++ b/index.html @@ -0,0 +1,422 @@ + + + + + + Ecom Website + + + + +
+
+
+
+

Free shipping, 30-day return or refund guarantee.

+
+
+ SIGN IN + SIGN UP +
+
+
+ + +
+
+ + + +
+ +
+ +
+
+ +
+ + +
+
+
+
+

Explore the Latest in Tech Industries

+

+ Your Destination for Cutting-Edge Gadgets! +

+

+ Welcome to Thapa eComStore, your ultimate destination for + cutting-edge gadgets! Explore the latest in tech innovation and + style with us. Shop now and discover a world of possibilities! +

+
+ Explore Our Products +
+
+
+
+ coding languages using html css js +
+
+
+
+ + + + + +
+
+
+ + + +
+
+
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+ +
+
+

new year sale

+

40% discount on speakers

+ Show now +
+
+ +
+
+ +
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+
+
+ + + +
+
+
+
+ +
+
+

worldwide shipping

+

order above $100

+
+
+ +
+
+ +
+
+

Easy 30 Day Returns

+

Back Returns in 7 Days

+
+
+ +
+
+ +
+
+

money back guarantee

+

guarantee with in 30-Days

+
+
+ +
+
+ +
+
+

Easy Online Support

+

24/7 Any time support

+
+
+
+
+ + + +
+
+
+

Check Out Satya Store

+
+
+ +
+
+
+
+ + + + + + + + + + +
+
+

Why Choose Thapa Store

+

+ Choose Thapa EduHub for a holistic, enriching learning experience that + empowers you to achieve your goals. +

+
+ +
+
+
+

1

+

Wide Selection

+

+ Thapa Store offers a diverse range of gadgets, from smartphones to + smart home devices, ensuring you find what you need to elevate + your lifestyle and meet your tech requirements. +

+
+ +
+

2

+

Quality Assurance

+

+ Every gadget at Thapa Store undergoes rigorous quality checks, + guaranteeing reliability and performance, so you can shop with + confidence knowing you're getting the best. +

+
+ +
+

3

+

Competitive Prices

+

+ Enjoy great value with Thapa Store's competitive prices on + high-quality gadgets, making top-of-the-line technology accessible + to all without compromising on quality or performance. +

+
+
+
+
+ thapa technical home page +
+
+
+
+

4

+

Expert Guidance

+

+ Our knowledgeable staff provides expert guidance, helping you + choose the right gadget to meet your needs and preferences, + ensuring you make informed decisions every step of the way. +

+
+ +
+

5

+

Convenient Shopping

+

+ With Thapa Store, shopping for gadgets is easy and convenient. Our + user-friendly website and secure payment options ensure a seamless + experience from browsing to checkout, all from the comfort of your + home. +

+
+ +
+

6

+

Excellent Service

+

+ Thapa Store is committed to providing excellent service to our + customers. From prompt assistance with inquiries to efficient + handling of orders and deliveries, we prioritize your satisfaction + every step of the way. +

+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..232ea96 --- /dev/null +++ b/main.js @@ -0,0 +1,5 @@ +import './style.css' + +import products from "./api/products.json" +import {showProductContainer} from "./homeProductsCards" +showProductContainer(products); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8f945fe --- /dev/null +++ b/package-lock.json @@ -0,0 +1,800 @@ +{ + "name": "ecommerce-website", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "ecommerce-website", + "version": "0.0.0", + "devDependencies": { + "vite": "^5.2.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", + "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", + "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz", + "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", + "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz", + "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz", + "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz", + "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz", + "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz", + "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz", + "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz", + "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz", + "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", + "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz", + "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz", + "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz", + "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz", + "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/esbuild": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/rollup": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/vite": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz", + "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==", + "dev": true, + "dependencies": { + "esbuild": "^0.21.3", + "postcss": "^8.4.38", + "rollup": "^4.13.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..ecc67e2 --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "ecommerce-website", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^5.2.0" + } +} diff --git a/products.html b/products.html new file mode 100644 index 0000000..7a37ab9 --- /dev/null +++ b/products.html @@ -0,0 +1,229 @@ + + + + + + + + + + js ecom website + + +
+
+
+
+

Free shipping, 30-day return or refund guarantee.

+
+
+ SIGN IN + SIGN UP +
+
+
+
+
+ + + +
+ + +
+
+ + +
+
+
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+ +
+
+

new year sale

+

40% discount on speakers

+ Show now +
+
+ +
+
+ +
+
+

new year sale

+

get and extra 50% off

+ Show now +
+
+ +
+
+
+
+ + + +
+
+
+
+ +
+
+

worldwide shipping

+

order above $100

+
+
+ +
+
+ +
+
+

Easy 30 Day Returns

+

Back Returns in 7 Days

+
+
+ +
+
+ +
+
+

money back guarantee

+

guarantee with in 30-Days

+
+
+ +
+
+ +
+
+

Easy Online Support

+

24/7 Any time support

+
+
+
+
+ + + + +
+
+

Checkout Thapa Store

+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + diff --git a/public/images/ecompost.png b/public/images/ecompost.png new file mode 100644 index 0000000..9cfb9bb Binary files /dev/null and b/public/images/ecompost.png differ diff --git a/public/images/headphone.png b/public/images/headphone.png new file mode 100644 index 0000000..1198ea6 Binary files /dev/null and b/public/images/headphone.png differ diff --git a/public/images/headphoneEcom.png b/public/images/headphoneEcom.png new file mode 100644 index 0000000..f800a01 Binary files /dev/null and b/public/images/headphoneEcom.png differ diff --git a/public/images/heroImage.png b/public/images/heroImage.png new file mode 100644 index 0000000..5b51eb4 Binary files /dev/null and b/public/images/heroImage.png differ diff --git a/public/images/heroSection.svg b/public/images/heroSection.svg new file mode 100644 index 0000000..0fe599b --- /dev/null +++ b/public/images/heroSection.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/iphone.png b/public/images/iphone.png new file mode 100644 index 0000000..71b7a76 Binary files /dev/null and b/public/images/iphone.png differ diff --git a/public/images/lapi.png b/public/images/lapi.png new file mode 100644 index 0000000..6266b4f Binary files /dev/null and b/public/images/lapi.png differ diff --git a/public/images/laptop.png b/public/images/laptop.png new file mode 100644 index 0000000..60be030 Binary files /dev/null and b/public/images/laptop.png differ diff --git a/public/images/log.png b/public/images/log.png new file mode 100644 index 0000000..baa4ecf Binary files /dev/null and b/public/images/log.png differ diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..7d7adac Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/mobiles.png b/public/images/mobiles.png new file mode 100644 index 0000000..5ba02be Binary files /dev/null and b/public/images/mobiles.png differ diff --git a/public/images/speakers.png b/public/images/speakers.png new file mode 100644 index 0000000..dd094d3 Binary files /dev/null and b/public/images/speakers.png differ diff --git a/public/images/tv.png b/public/images/tv.png new file mode 100644 index 0000000..260fbc0 Binary files /dev/null and b/public/images/tv.png differ diff --git a/public/images/watch.png b/public/images/watch.png new file mode 100644 index 0000000..001c08f Binary files /dev/null and b/public/images/watch.png differ diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/removeProdFromCart.js b/removeProdFromCart.js new file mode 100644 index 0000000..5b4d98b --- /dev/null +++ b/removeProdFromCart.js @@ -0,0 +1,24 @@ +import { getCartProductFromLS } from "./getCartProducts"; +import { showToast } from "./showToast"; +import { updateCartProductTotal } from "./updateCartProductTotal"; +import { updateCartValue } from "./updateCartValue"; + +export const removeProdFromCart = (id) => { + let cartProducts = getCartProductFromLS(); + cartProducts = cartProducts.filter((curProd) => curProd.id !== id); + + + localStorage.setItem("cartProductLS", JSON.stringify(cartProducts)); + + + let removeDiv = document.getElementById(`card${id}`); + if (removeDiv) { + removeDiv.remove(); + + showToast("delete", id); + } + + updateCartProductTotal(); + + updateCartValue(cartProducts); +}; \ No newline at end of file diff --git a/showAddToCartCards.js b/showAddToCartCards.js new file mode 100644 index 0000000..fea0de2 --- /dev/null +++ b/showAddToCartCards.js @@ -0,0 +1,56 @@ +import products from "./api/products.json"; +import { fetchQuantityFromCartLS } from "./fetchQuantityFromCartLS"; +import { getCartProductFromLS } from "./getCartProducts"; +import { incrementDecrement } from "./incrementDecrement"; +import { removeProdFromCart } from "./removeProdFromCart"; +import { updateCartProductTotal } from "./updateCartProductTotal"; + +let cartProducts = getCartProductFromLS(); + +let filterProducts = products.filter((curProd) => { + return cartProducts.some((curElem) => curElem.id === curProd.id); +}); + +console.log(filterProducts); + + +const cartElement = document.querySelector("#productCartContainer"); +const templateContainer = document.querySelector("#productCartTemplate"); + +const showCartProduct = () => { + filterProducts.forEach((curProd) => { + const { category, id, image, name, stock, price } = curProd; + + let productClone = document.importNode(templateContainer.content, true); + + const lSActualData = fetchQuantityFromCartLS(id, price); + + productClone.querySelector("#cardValue").setAttribute("id", `card${id}`); + productClone.querySelector(".category").textContent = category; + productClone.querySelector(".productName").textContent = name; + productClone.querySelector(".productImage").src = image; + + productClone.querySelector(".productQuantity").textContent = + lSActualData.quantity; + productClone.querySelector(".productPrice").textContent = + lSActualData.price; + + + productClone + .querySelector(".stockElement") + .addEventListener("click", (event) => { + incrementDecrement(event, id, stock, price); + }); + + productClone + .querySelector(".remove-to-cart-button") + .addEventListener("click", () => removeProdFromCart(id)); + + cartElement.appendChild(productClone); + }); +}; + + +showCartProduct(); + +updateCartProductTotal(); \ No newline at end of file diff --git a/showToast.js b/showToast.js new file mode 100644 index 0000000..85b2c11 --- /dev/null +++ b/showToast.js @@ -0,0 +1,18 @@ +export function showToast(operation, id) { + const toast = document.createElement("div"); + toast.classList.add("toast"); + + + if (operation === "add") { + toast.textContent = `Product with ID ${id} has been added.`; + } else { + toast.textContent = `Product with ID ${id} has been deleted.`; + } + + document.body.appendChild(toast); + + + setTimeout(() => { + toast.remove(); + }, 2000); + } \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dd5d5d5 --- /dev/null +++ b/style.css @@ -0,0 +1,1223 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + font-family: "Urbanist", sans-serif; + line-height: 1.5; + font-weight: 400; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + --buttonColor: #2a2c30; + --secondaryColor: #4b4f56; + --borderColor: #e3eaf0; + --backgroundColor: #f7f7f7; + --backgroundSecondary: #fefefe; + --textColor: #1e1f23; + --anchorColor: #535bf2; + --main-color: #535bf2; + --supporting-color: #ebf3fe; + --glow-color: hsl(186, 91%, 4%); +} + +html { + font-size: 62.5%; + color: var(--textColor); +} + +/* have a look into body once after we done with rest of the styling */ +body { + margin: 0 auto; + padding: 0 32px; + min-width: 320px; + background-color: var(--backgroundColor); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.1; + color: var(--textColor); +} + +h1 { + font-size: 3.2rem; +} +h2 { + font-size: 3.2rem; +} + +p, +li, +a, +label { + font-size: 1.8rem; + letter-spacing: 0.1rem; + color: var(--para-color); + line-height: 1.5; + font-weight: 400; +} + +li { + list-style: none; +} + +a { + color: #646cff; + text-decoration: none; + &:hover { + color: #535bf2; + } +} + +::placeholder { + font-family: "Urbanist", sans-serif; + line-height: 1.5; + font-weight: 400; +} + +/*! layout */ +.container { + max-width: 142rem; + margin: 0 auto; + padding: 9.6rem 2.4rem; +} + +:is( + .section-extra-product, + .section-blog, + .section-policy, + .section-contact--homepage, + .section-why--choose, + .section-contact, + footer + ) + .container:first-child { + padding: 6.4rem 0 2.4rem 0; +} + +.grid { + display: grid; +} + +.grid-two--cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid-three--cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid-three-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid-four--cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid-four-cols { + grid-template-columns: repeat(4, 1fr); +} + +/*! module / reusable */ + +.btn { + display: inline-block; + padding: 1.2rem 3.2rem; + background-color: var(--main-color); + color: var(--white-color); + text-transform: capitalize; + border-radius: 0.6rem; + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + -ms-border-radius: 0.6rem; + -o-border-radius: 0.6rem; +} + +.section-common--title { + font-size: 2rem; + margin: 2.4rem 0 1.2rem 0; +} + +/* states */ + +.btn:hover { + background-color: var(--bnt-hover-bg-color); + box-shadow: var(--btn-box-shadow); + cursor: pointer; +} + +.btn:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 2px solid var(--para-color); +} + +/** CSS for toast notifications */ +.toast { + position: fixed; + top: 2rem; + right: 1.4rem; + background-color: var(--buttonColor); + color: #fff; + padding: 10px 20px; + border-radius: 5px; + border-bottom: 0; + border-color: red; + font-size: 1.6rem; + z-index: 1000; + font-family: "urbanist"; + animation: toastAnimation 2s linear; + -webkit-animation: toastAnimation 2s linear; + box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), + 0px 0px 0.5em 0px var(--glow-color); +} + +@keyframes toastAnimation { + 0% { + transform: translateX(100%); + opacity: 0; + -webkit-transform: translateX(100%); + -moz-transform: translateX(100%); + -ms-transform: translateX(100%); + -o-transform: translateX(100%); + } + 20% { + transform: translateX(0); + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + } + 100% { + transform: translateX(0); + opacity: 1; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + } +} + +/***** Navbar Section *****/ + +.top_txt { + background-color: var(--buttonColor); + color: var(--backgroundColor); + + & .head_txt p { + font-size: 1.5rem; + } + + & .sing_in_up { + display: flex; + gap: 3.2rem; + } +} + +.section-navbar { + width: 100%; + box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, + rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; +} + +.section-navbar .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.8rem; /* we override the main container padding property */ +} + +.section-navbar img { + width: 25%; +} + +.section-navbar .navbar ul { + display: flex; + gap: 3.2rem; + text-transform: capitalize; + align-items: center; + + & li a { + color: var(--heading-color); + font-weight: 600; + text-transform: uppercase; + font-size: 1.6rem; + display: inline-block; + position: relative; + + &:after { + content: ""; + position: absolute; + bottom: -0.3rem; + left: 0; + width: 0%; + border-bottom: 0.1rem solid var(--main-color); + transition: all 0.3s linear; + } + } + & li a:hover { + color: var(--main-color); + } + + & li a:hover:after { + width: 100%; + } +} + +/***** Navbar End Section *****/ + +/***** Hero Section *****/ + +main { + height: 120vh; + position: relative; + background-color: #d9e9ff; + + background-image: linear-gradient( + to top right, + #3d86fa, + #4484fb, + #679eff, + #b3d2ff, + #ebf3fe + ); +} + +.custom-shape-divider-bottom-1696038172 { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + overflow: hidden; + line-height: 0; + transform: rotate(180deg); +} + +.custom-shape-divider-bottom-1696038172 svg { + position: relative; + display: block; + width: calc(100% + 1.3px); + height: 12rem; +} + +.custom-shape-divider-bottom-1696038172 .shape-fill { + fill: #ffffff; +} + +main .section-hero { + height: 90vh; + display: flex; + justify-content: center; + align-items: center; + /* background-color: var(--supporting-color); */ +} + +.section-hero .grid { + align-items: center; + gap: 6.4rem; +} + +.section-hero { + & .hero-subheading { + text-transform: uppercase; + letter-spacing: 0.2rem; + font-size: 1.7rem; + word-spacing: 0.2rem; + color: #003b99; + font-weight: 700; + } + + & .hero-heading { + font-size: 5.8rem; + line-height: 1.5; + initial-letter: -0.2rem; + text-transform: capitalize; + color: #003b99; + font-family: "Jost"; + } + + & .hero-para { + margin: 2rem 0 4.2rem 0; + color: white; + } +} + +.section-hero img { + width: 100%; + height: auto; + transform: scaleX(-1); +} + +/***** End Hero Section *****/ + +/***** Extra Section *****/ +.div-extra { + padding: 3.2rem 2.4rem; + background-color: var(--backgroundSecondary); + position: relative; + /* box-shadow: inset 0 0 0 4rem #000; */ + /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; */ + + &::after { + content: ""; + position: absolute; + right: 0; + bottom: 0; + width: 15rem; + height: 15rem; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + border-radius: 100% 0% 0% 100% / 100% 0% 100% 0%; + background-color: var(--borderColor); + z-index: 1; + } + + & p { + text-transform: uppercase; + font-size: 1.4rem; + color: #1f36b9; + } + + & h3 { + font-size: 2.4rem; + text-transform: capitalize; + margin: 0.6rem 0 1.6rem 0; + } + + & a { + text-transform: uppercase; + color: var(--buttonColor); + border-bottom: 0.1rem solid var(--secondaryColor); + font-size: 17px; + } + + & .extra-img { + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + + & img { + width: 18rem; + filter: drop-shadow(5px 8px 24px rgba(25, 76, 127, 0.2)); + -webkit-filter: drop-shadow(5px 8px 24px rgba(25, 76, 127, 0.2)); + } + } + + & img { + max-width: 100%; + width: 30%; + height: auto; + } + + &:last-child img { + transform: rotate(5deg); + -moz-transform: rotate(5deg); + -ms-transform: rotate(5deg); + -o-transform: rotate(5deg); + -webkit-transform: rotate(5deg); + } + + & .extra-laptop img { + width: 28rem; + height: auto; + } +} + +.grid-three-cols { + gap: 6.4rem; + + & :div { + justify-self: left; + } +} + +.div-extra { + border-radius: 0.5rem; + -webkit-border-radius: 0.5rem; + -moz-border-radius: 0.5rem; + -ms-border-radius: 0.5rem; + -o-border-radius: 0.5rem; +} + +/***** End Extra Div Section *****/ + +/***** Policy Section *****/ + +.section-policy { + & .container { + padding: 3.2rem 0; + background-color: #fefefe; + border-radius: 0.5rem; + } +} + +.div-policy { + padding: 3.2rem; + display: flex; + align-items: center; + gap: 3.2rem; + border-right: 0.1rem solid var(--backgroundColor); + + &:last-child { + border-right: none; + } + + & .icons { + font-size: 3.2rem; + color: #576ef0; + } + + p { + text-transform: capitalize; + } + + & p:last-child { + font-size: 1.4rem; + } +} + +/***** End Policy Section *****/ + +/***** why choose Section *****/ + +.section-why--choose .grid { + gap: 9.6rem; + align-items: center; +} + +.why-choose--div { + margin-bottom: 3.2rem; +} + +.section-why--choose .text-align--right .why-choose--div { + display: flex; + flex-direction: column; + align-items: end; +} + +.section-why--choose .text-align--left .why-choose--div { + align-items: start; +} + +.common-text--highlight { + color: var(--main-color); + width: 6rem; + height: 6rem; + background-color: var(--supporting-color); + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + font-size: 2.4rem; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.why-choose--div .section-common--title { + margin-top: 1.2rem; +} + +.choose-center-div, +.choose-center-div figure { + display: flex; + justify-content: center; + align-items: center; + position: relative; + transform-origin: center; +} + +.choose-center-div figure::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 45rem; + height: 45rem; + border-radius: 50%; + background-color: var(--main-color); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + z-index: -1; + animation: circle 5s linear infinite; + -webkit-animation: circle 5s linear infinite alternate; +} + +@keyframes circle { + 0% { + background-color: #b3d0ff; + } + 25% { + background-color: #80b1ff; + } + 50% { + background-color: #4d91ff; + } + 75% { + background-color: #99c0ff; + } + 100% { + background-color: #3381ff; + } +} + +.choose-center-div figure::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 50rem; + height: 50rem; + border-radius: 50%; + background-color: transparent; + border: 0.5rem solid var(--supporting-color); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + z-index: -1; +} + +.choose-center-div img { + width: 90%; + height: auto; +} + +/***** End why choose Section *****/ + +/***** Start contact Section *****/ + +.section-contact .grid { + gap: 6.4rem; +} + +.mb-3 { + margin-bottom: 3.2rem; +} + +.contact-content { + & .grid { + gap: 6.4rem; + } +} + +label { + text-transform: capitalize; + display: block; +} + +input, +textarea { + width: 100%; + padding: 1.4rem 2.4rem; + font-size: 1.6rem; + letter-spacing: 0.1rem; +} + +.btn-submit { + font-size: 1.8rem; + border: none; +} + +.contact-map { + display: flex; + justify-content: flex-end; +} + +::placeholder { + text-transform: capitalize; +} + +/***** End contact Section *****/ + +/***** Start Footer Section *****/ +footer { + width: 100%; + background: var(--buttonColor); + color: var(--backgroundColor); + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + margin-top: 6.4rem; +} + +.footer-container .content_1 img { + height: auto; + width: 15rem; +} + +.footer-container { + display: flex; + justify-content: space-between; + padding: 7rem 0; + margin-left: 40px; + margin-right: 40px; + gap: 20px; +} + +.footer-container h4 { + color: var(--white); + font-weight: 500; + letter-spacing: 0.1rem; + margin-bottom: 2.5rem; + font-size: 1.8rem; +} + +.footer-container a { + display: block; + text-decoration: none; + color: #cccccc; + margin-bottom: 1.5rem; + font-size: 1.4rem; +} + +.footer-container .content_1 p, +.footer-container .content_4 p { + color: #cccccc; + margin: 2.5rem 0; + font-size: 1.4rem; +} + +.footer-container .content_4 input[type="email"] { + background-color: var(--textColor); + border: none; + color: var(--backgroundColor); + outline: none; + padding: 1.4rem 0.8rem; + width: 100%; +} + +.footer-container .content_4 .f-mail { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-container .content_4 .bx { + color: var(--white); +} + +.f-design { + width: 100%; + color: var(--white); + text-align: center; +} + +.f-design .f-design-txt { + border-top: 1px solid var(--secondaryColor); + padding: 1.6rem 0; + color: var(--secondaryColor); +} + +/***** End Footer Section *****/ + +/**** Our Home product section Starts ***/ +#productContainer { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4.8rem; + + & .information { + display: flex; + flex-direction: column; + align-items: start; + gap: 1rem; + } +} + +.cards { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 2.5rem; + width: 36rem; + padding: 1.6rem; + /* max-width: 1000px; */ + margin: 1.8vh auto; + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; + border-radius: 0.3rem; + /*border: 0.1rem solid #ccc; + */ + -webkit-border-radius: 0.2rem; + -moz-border-radius: 0.3rem; + -ms-border-radius: 0.3rem; + -o-border-radius: 0.3rem; + -webkit-border-radius: 0.3rem; +} + +.category { + background-color: #e7d6d6; + padding: 0.3rem 1.2rem; + font-size: 1.2rem; + letter-spacing: 0.1rem; + border-radius: 10rem; + -webkit-border-radius: 10rem; + -moz-border-radius: 10rem; + -ms-border-radius: 10rem; + -o-border-radius: 10rem; +} + +.productImage { + max-width: 100%; + width: 32rem; + height: auto; +} + +.productPriceElement, +.productQuantityElement, +.productStockElement { + display: flex; + gap: 2rem; + align-items: center; + text-align: center; +} + +.productPriceElement { + margin: 0.8rem 0; +} + +.productProperty, +.productDescription { + font-size: 1.6rem; +} + +.stockElement { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + border: 0.2rem solid var(--borderColor); + border-radius: 0.8rem; + margin: 0.8rem 0; + + & button { + background-color: transparent; + color: var(--buttonColor); + font-size: 2rem; + padding: 0.6rem 2rem; + font-weight: bold; + border: none; + + &:hover { + cursor: pointer; + } + + &:first-child { + border-right: 0.1rem solid var(--borderColor); + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + } + + &:last-child { + border-left: 0.1rem solid var(--borderColor); + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + } + } + + .productQuantity { + padding: 0rem 3rem; + margin: 0; + font-weight: bold; + } +} +/**** Our Home product section Ends ****/ + +#cartValue { + background-color: var(--buttonColor); + color: #fff; + padding: 1rem 2rem; +} + +.add-to-cart-button, +.contact-btn, +.hero-btn a { + font-weight: 500; + font: inherit; + border-radius: 6px; + border: 0; + padding: 1rem 2.8rem; + background-color: var(--buttonColor); + color: #fff; + font-size: 1.6rem; + /* margin-top: 1.2rem; */ + + &:hover { + box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.16), + inset 0px 0px 0px 3px rgb(51, 51, 51); + background-color: var(--backgroundColor); + color: var(--buttonColor); + cursor: pointer; + } + + .fa-cart-shopping { + padding-right: 1rem; + } +} + +/***** Add to Cart page starts *****/ + +#productCartContainer { + display: flex; + flex-direction: column; + + & .cards { + width: 100%; + max-width: 100%; + margin: 0; + box-shadow: 0 0; + border-top: 0.1rem solid #d8d8d8; + border-right: 0.1rem solid #d8d8d8; + border-left: 0.1rem solid #d8d8d8; + border-radius: 0; + &:last-child { + border-bottom: 0.1rem solid #d8d8d8; + } + } + + & .card { + width: 100%; + display: grid; + grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr 1fr 1fr; + align-items: center; /* margin: auto; */ + gap: 3.2rem; + } + + & .productImage { + width: 16rem; + } + + & .productName { + font-size: 2rem; + } + + & .productPrice { + font-size: 1.6rem; + } + + & .productActualPrice { + font-size: 1.6rem; + } +} + +.category { + background-color: #e7d6d6; + padding: 0.3rem 1.2rem; + font-size: 1.2rem; + letter-spacing: 0.1rem; + border-radius: 10rem; + -webkit-border-radius: 10rem; + -moz-border-radius: 10rem; + -ms-border-radius: 10rem; + -o-border-radius: 10rem; +} + +.productRating { + color: #e9db16; +} + +.productPrice, +.productActualPrice { + font-size: 2.2rem; +} + +.productActualPrice { + text-decoration: line-through; +} + +.productCartTotalElem { + display: flex; + justify-content: end; + width: 100%; + margin-top: 3.2rem; +} + +.productCartTotalElement { + padding: 2.4rem; + background-color: var(--backgroundSecondary); + height: auto; + width: 32rem; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px; +} + +.productOrderTotal { + /* background-color: rgb(60, 60, 60); */ + max-width: 30rem; + + & div { + display: flex; + justify-content: space-between; + margin-top: 3.2rem; + + p { + color: #8c9299; + } + + .productSubTotal, + .productFinalTotal, + .productTax { + color: var(--textColor); + font-weight: bold; + } + } +} + +/***** Add to Cart page ends *****/ + +/***** media queries Section *****/ + +/* https://getbootstrap.com/docs/5.0/layout/breakpoints/ */ + +@media (width <= 1380px) { + html { + font-size: 56.25%; + } + + .section-hero img { + width: 90%; + } +} + +@media (width <= 1220px) { + html { + font-size: 54%; + } + + :is( + .section-about, + .section-blog, + .section-course, + .section-contact--homepage, + .section-why--choose + ) + .grid { + gap: 6.4rem; + } + + .choose-center-div figure::after { + width: 46rem; + height: 46rem; + } +} + +@media (width <= 1100px) { + .grid-four--cols { + grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); + } + + .custom-shape-divider-bottom-1696038172 svg { + position: relative; + display: block; + width: calc(100% + 1.3px); + height: 8rem; + } + + .section-why--choose { + & .choose-left-div { + order: 2; + } + & .choose-center-div { + order: 1; + + & figure::before { + width: 0; + height: 0; + background-color: transparent; + display: none; + } + + & figure::after { + width: 0; + height: 0; + background-color: transparent; + display: none; + } + } + & .choose-right-div { + order: 3; + } + } + + .contact-title { + font-size: 2.4rem; + } + + .section-contact .grid-two--cols { + grid-template-columns: 2fr 1.5fr; + gap: 3.2rem; + } +} + +@media (width <= 980px) { + body { + padding: 0 0.6rem; + } + + .section-products #productContainer { + grid-template-columns: repeat(2, minmax(33%, 1fr)); + } + + .section-hero .hero-heading { + font-size: 4.4rem; + } + + footer { + padding: 0 1.6rem; + } + + .footer-container { + display: grid; + grid-template-columns: repeat(2, minmax(33%, 1fr)); + + & .content_1 { + grid-column: 1 / -1; + margin-bottom: 3.2rem; + } + + & .content_4 { + margin-top: 3.2rem; + } + } + + main .section-hero { + height: auto; + + & .grid-two--cols { + grid-template-columns: 1fr; + } + } + + .section-hero .section-hero--content { + order: 2; + } + + .section-hero .section-hero-image { + display: grid; + place-items: center; + & figure { + display: grid; + place-items: center; + } + } + + .section-hero img { + width: 40%; + } + + .section-about .about-div { + text-align: left; + padding: 0; + } +} + +@media (width <= 768px) { + .grid-two--cols { + grid-template-columns: 1fr; + } + + .section-contact .grid-two--cols { + grid-template-columns: 1fr; + } + + .grid-three--cols { + grid-template-columns: 1fr; + } + + .section-hero .hero-heading { + font-size: 4.2rem; + } + + .section-products #productContainer { + grid-template-columns: repeat(1, minmax(33%, 1fr)); + } + + #productCartContainer .card { + width: 100%; + display: grid; + /* grid-template-columns: 0.5fr 0.5fr 1fr 0.5fr 1fr 1fr; */ + grid-template-columns: 0.5fr 0.1fr repeat(2, 1fr); + align-items: center; + /* margin: auto; */ + gap: 3.2rem; + } + + .productQuantity { + text-align: center; + } + + .stockElement { + grid-column: 1 / 4; + } + + .remove-to-cart-button { + grid-column: 4 / -1; + } + + /* footer .grid-four--cols { + grid-template-columns: repeat(1, minmax(100%, 1fr)); + text-align: center; + } */ + + .section-navbar .container { + flex-direction: column; + gap: 3.2rem; + } + + .section-why--choose { + & img { + width: 30%; + } + + & .grid { + gap: 1.4rem; + } + + & .text-align--right .why-choose--div { + align-items: flex-start; + } + + & .choose-left-div { + text-align: left; + } + } + + .section-contact--homepage .btn { + display: block; + text-align: center; + } + + :is(.section-contact--homepage) .container:first-child { + padding: 6.4rem 0rem 2.4rem 0rem; + } +} diff --git a/updateCartProductTotal.js b/updateCartProductTotal.js new file mode 100644 index 0000000..e893f00 --- /dev/null +++ b/updateCartProductTotal.js @@ -0,0 +1,16 @@ +import { getCartProductFromLS } from "./getCartProducts"; + +export const updateCartProductTotal = () => { + let productSubTotal = document.querySelector(".productSubTotal"); + let productFinalTotal = document.querySelector(".productFinalTotal"); + + let localCartProducts = getCartProductFromLS(); + let initialValue = 0; + let totalProductPrice = localCartProducts.reduce((accum, curElem) => { + let productPrice = parseInt(curElem.price) || 0; + return accum + productPrice; + }, initialValue); + + productSubTotal.textContent = `₹${totalProductPrice}`; + productFinalTotal.textContent = `₹${totalProductPrice + 50}`; +}; \ No newline at end of file diff --git a/updateCartValue.js b/updateCartValue.js new file mode 100644 index 0000000..2011b7a --- /dev/null +++ b/updateCartValue.js @@ -0,0 +1,5 @@ +const cartValue = document.querySelector("#cartValue"); + +export const updateCartValue = (cartProducts) => { + return (cartValue.innerHTML = ` ${cartProducts.length} `); +}; \ No newline at end of file diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..fc53d7c --- /dev/null +++ b/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; + +export default defineConfig({ + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + about: resolve(__dirname, "about.html"), + contact: resolve(__dirname, "contact.html"), + products: resolve(__dirname, "products.html"), + addToCart: resolve(__dirname, "addToCart.html"), + + }, + }, + }, +}); \ No newline at end of file