diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/images/countries/china.svg b/assets/images/countries/china.svg new file mode 100644 index 0000000..79dbe27 --- /dev/null +++ b/assets/images/countries/china.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/countries/russia.svg b/assets/images/countries/russia.svg new file mode 100644 index 0000000..14bdb4d --- /dev/null +++ b/assets/images/countries/russia.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/countries/usa.svg b/assets/images/countries/usa.svg new file mode 100644 index 0000000..2e98d29 --- /dev/null +++ b/assets/images/countries/usa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/images/photos/Payment Method.svg b/assets/images/photos/Payment Method.svg new file mode 100644 index 0000000..2c7dea5 --- /dev/null +++ b/assets/images/photos/Payment Method.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/dist/output.css b/dist/output.css index 5f0de0a..772d519 100644 --- a/dist/output.css +++ b/dist/output.css @@ -1225,6 +1225,11 @@ input:checked + .toggle-bg { margin-bottom: auto; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .mb-0 { margin-bottom: 0px; } @@ -1265,6 +1270,10 @@ input:checked + .toggle-bg { margin-top: 1.5rem; } +.-mr-1 { + margin-right: -0.25rem; +} + .block { display: block; } @@ -1357,6 +1366,26 @@ input:checked + .toggle-bg { height: 100%; } +.h-12 { + height: 3rem; +} + +.h-20 { + height: 5rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-28 { + height: 7rem; +} + +.min-h-full { + min-height: 100%; +} + .\!w-12 { width: 3rem !important; } @@ -1430,6 +1459,34 @@ input:checked + .toggle-bg { width: 100%; } +.w-56 { + width: 14rem; +} + +.w-12 { + width: 3rem; +} + +.w-screen { + width: 100vw; +} + +.w-80 { + width: 20rem; +} + +.w-\[\] { + width: ; +} + +.w-20 { + width: 5rem; +} + +.w-28 { + width: 7rem; +} + .max-w-full { max-width: 100%; } @@ -1446,6 +1503,10 @@ input:checked + .toggle-bg { flex-shrink: 1; } +.flex-shrink-0 { + flex-shrink: 0; +} + .shrink { flex-shrink: 1; } @@ -1470,6 +1531,10 @@ input:checked + .toggle-bg { flex-basis: 50%; } +.origin-top-right { + transform-origin: top right; +} + .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1525,6 +1590,16 @@ input:checked + .toggle-bg { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.translate-y-0 { + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.translate-y-4 { + --tw-translate-y: 1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .-rotate-3 { --tw-rotate: -3deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1541,6 +1616,12 @@ input:checked + .toggle-bg { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + .-scale-x-100 { --tw-scale-x: -1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1646,6 +1727,11 @@ input:checked + .toggle-bg { gap: 1.5rem; } +.gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -1666,6 +1752,10 @@ input:checked + .toggle-bg { overflow: hidden; } +.overflow-y-auto { + overflow-y: auto; +} + .rounded { border-radius: 0.25rem; } @@ -1889,10 +1979,34 @@ input:checked + .toggle-bg { background-color: rgb(255 255 255 / 0.5); } +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} + +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(253 232 232 / var(--tw-bg-opacity)); +} + +.bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(224 36 36 / var(--tw-bg-opacity)); +} + .bg-opacity-20 { --tw-bg-opacity: 0.2; } +.bg-opacity-75 { + --tw-bg-opacity: 0.75; +} + .to-black { --tw-gradient-to: #000000 var(--tw-gradient-to-position); } @@ -1933,6 +2047,10 @@ input:checked + .toggle-bg { padding: 1.5rem; } +.p-7 { + padding: 1.75rem; +} + .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; @@ -2018,6 +2136,11 @@ input:checked + .toggle-bg { padding-bottom: 2rem; } +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + .pb-0\.5 { padding-bottom: 0.125rem; } @@ -2058,6 +2181,14 @@ input:checked + .toggle-bg { padding-left: 1rem; } +.pb-4 { + padding-bottom: 1rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + .text-left { text-align: left; } @@ -2314,6 +2445,16 @@ input:checked + .toggle-bg { color: rgb(194 120 3 / var(--tw-text-opacity)); } +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(224 36 36 / var(--tw-text-opacity)); +} + .line-through { text-decoration-line: line-through; } @@ -2338,10 +2479,46 @@ input:checked + .toggle-bg { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .outline { outline-style: solid; } +.ring-1 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.ring-inset { + --tw-ring-inset: inset; +} + +.ring-black { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity)); +} + +.ring-gray-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.ring-opacity-5 { + --tw-ring-opacity: 0.05; +} + .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -2391,10 +2568,26 @@ input:checked + .toggle-bg { transition-duration: 500ms; } +.duration-100 { + transition-duration: 100ms; +} + +.duration-75 { + transition-duration: 75ms; +} + +.duration-200 { + transition-duration: 200ms; +} + .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + /* CSS Code */ .swiper-wrapper { @@ -2508,6 +2701,16 @@ input:checked + .toggle-bg { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.hover\:bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(240 82 82 / var(--tw-bg-opacity)); +} + .hover\:\!text-black:hover { --tw-text-opacity: 1 !important; color: rgb(0 0 0 / var(--tw-text-opacity)) !important; @@ -2696,6 +2899,16 @@ input:checked + .toggle-bg { margin-bottom: 0px; } + .sm\:mx-0 { + margin-left: 0px; + margin-right: 0px; + } + + .sm\:my-8 { + margin-top: 2rem; + margin-bottom: 2rem; + } + .sm\:ml-\[100px\] { margin-left: 100px; } @@ -2704,14 +2917,100 @@ input:checked + .toggle-bg { margin-right: 100px; } + .sm\:ml-3 { + margin-left: 0.75rem; + } + + .sm\:ml-4 { + margin-left: 1rem; + } + + .sm\:mt-0 { + margin-top: 0px; + } + .sm\:flex { display: flex; } + .sm\:h-10 { + height: 2.5rem; + } + + .sm\:w-10 { + width: 2.5rem; + } + + .sm\:w-auto { + width: auto; + } + + .sm\:w-full { + width: 100%; + } + + .sm\:max-w-lg { + max-width: 32rem; + } + + .sm\:max-w-sm { + max-width: 24rem; + } + + .sm\:translate-y-0 { + --tw-translate-y: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .sm\:scale-100 { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + + .sm\:scale-95 { + --tw-scale-x: .95; + --tw-scale-y: .95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .sm\:flex-row { flex-direction: row; } + .sm\:flex-row-reverse { + flex-direction: row-reverse; + } + + .sm\:items-start { + align-items: flex-start; + } + + .sm\:items-center { + align-items: center; + } + + .sm\:p-0 { + padding: 0px; + } + + .sm\:p-6 { + padding: 1.5rem; + } + + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:pb-4 { + padding-bottom: 1rem; + } + + .sm\:text-left { + text-align: left; + } + .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; diff --git a/package-lock.json b/package-lock.json index 09696dc..c6c2371 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "dependencies": { + "alpinejs": "^3.14.3", "flowbite": "^2.5.2", "pagedone": "^1.2.2", "swiper": "^11.1.14" @@ -214,6 +215,30 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "license": "MIT" }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "license": "MIT", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==", + "license": "MIT" + }, + "node_modules/alpinejs": { + "version": "3.14.3", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.14.3.tgz", + "integrity": "sha512-cL8JBEDAm4UeVjTN5QnFl8QgMGUwxFn1GvQvu3RtfAHUrAPRahGihrsWpKnEK9L0QMqsAPk/R8MylMWKHaK33A==", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", diff --git a/package.json b/package.json index 7313538..15179c6 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "tailwindcss": "^3.4.13" }, "dependencies": { + "alpinejs": "^3.14.3", "flowbite": "^2.5.2", "pagedone": "^1.2.2", "swiper": "^11.1.14" diff --git a/src/index.html b/src/index.html index 6f61ed7..f477e11 100644 --- a/src/index.html +++ b/src/index.html @@ -7,16 +7,38 @@ Document - + + - + + + - -
+ + + + + + + + + + + + +
@@ -52,8 +74,39 @@

Friday

-
@@ -262,7 +314,7 @@

New Google Pixel 6 Pro

- +
@@ -393,10 +445,6 @@

Best Deals

- - - -
@@ -1418,7 +1466,7 @@

- + diff --git a/src/index.js b/src/index.js index 0a03abb..472e841 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -var swiper = new Swiper(".default-carousel", { +var HeaderSwiper = new Swiper(".default-carousel", { loop: true, pagination: { el: ".swiper-pagination", @@ -8,7 +8,7 @@ var swiper = new Swiper(".default-carousel", { }); - var swiper2 = new Swiper(".multiple-slide-carousel", { +var CategorysSwiper2 = new Swiper(".multiple-slide-carousel", { loop: true, slidesPerView: 2, spaceBetween: 10, @@ -31,4 +31,35 @@ var swiper = new Swiper(".default-carousel", { }, } - }); \ No newline at end of file + }); + + ProductDetailsSwiper= new Swiper(".multiple-slide-carousel-ProductDetails", { + loop: true, + slidesPerView: 2, + spaceBetween: 10, + navigation: { + nextEl: " .swiper-button-next-ProductDetails", + prevEl: " .swiper-button-prev-ProductDetails", + }, + breakpoints: { + 1920: { + slidesPerView: 6, + spaceBetween: 10 + }, + 1028: { + slidesPerView: 6, + spaceBetween: 10 + }, + 550: { + slidesPerView: 3, + spaceBetween: 0 + }, + + } + }) + +// +document.getElementById('countries-button').addEventListener('click', function() { + const dropdown = document.getElementById('dropdown-countries'); + dropdown.classList.toggle('hidden'); + }); \ No newline at end of file diff --git a/src/js/script.js b/src/js/script.js index 0e796e6..e9c59e8 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -4,6 +4,42 @@ document.addEventListener("DOMContentLoaded", function() { .then(response => response.text()) .then(data => { document.getElementById('navbar').innerHTML = data; + + const loginButton = document.getElementById('login-button'); + const dropdownLogin = document.getElementById('dropdown-login'); + const cartButton = document.getElementById('cart-button'); + const dropdownCart = document.getElementById('dropdown-cart'); + + // Login dropdown + + loginButton.addEventListener('click', function(event) { + event.stopPropagation(); // Prevent click from bubbling up + dropdownLogin.classList.toggle('hidden'); + // Close cart dropdown if it's open + if (!dropdownCart.classList.contains('hidden')) { + dropdownCart.classList.add('hidden'); + } + }); + + // Cart dropdown + cartButton.addEventListener('click', function(event) { + event.stopPropagation(); // Prevent click from bubbling up + dropdownCart.classList.toggle('hidden'); + // Close login dropdown if it's open + if (!dropdownLogin.classList.contains('hidden')) { + dropdownLogin.classList.add('hidden'); + } + }); + + // Close both dropdowns when clicking outside + document.addEventListener('click', function() { + if (!dropdownLogin.classList.contains('hidden')) { + dropdownLogin.classList.add('hidden'); + } + if (!dropdownCart.classList.contains('hidden')) { + dropdownCart.classList.add('hidden'); + } + }); }) .catch(error => console.log('Error loading the navbar:', error)); }); @@ -16,4 +52,5 @@ document.addEventListener("DOMContentLoaded", function() { document.getElementById('footer').innerHTML = data; }) .catch(error => console.log('Error loading the footer:', error)); -}); \ No newline at end of file + +}); diff --git a/src/offer&nav.html b/src/offer&nav.html index 50d0f4b..82c81cf 100644 --- a/src/offer&nav.html +++ b/src/offer&nav.html @@ -5,6 +5,7 @@ Navbar + @@ -32,20 +33,60 @@
+ +

welcome

-
- - - - -
+
+ + + +
+
@@ -58,14 +99,51 @@

- +
+ + + +

cart

@@ -97,7 +175,7 @@

cart

-
+ diff --git a/tailwind.config.js b/tailwind.config.js index 17412c8..cdd1a3b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,7 +5,11 @@ module.exports = { // Adjust this based on where your files are located ], theme: { - extend: {}, + extend: { + screens:{ + + } + }, }, plugins: [ require('flowbite/plugin')