diff --git a/source/404.html b/source/404.html index f391505ad..2edb1de21 100644 --- a/source/404.html +++ b/source/404.html @@ -2,10 +2,15 @@ - 404 + Страница не найдена + + + + + + - diff --git a/source/favicon.ico b/source/favicon.ico new file mode 100644 index 000000000..2091582ff Binary files /dev/null and b/source/favicon.ico differ diff --git a/source/favicons/favicon-180.png b/source/favicons/favicon-180.png new file mode 100644 index 000000000..5b1ba7647 Binary files /dev/null and b/source/favicons/favicon-180.png differ diff --git a/source/favicons/favicon-32.png b/source/favicons/favicon-32.png new file mode 100644 index 000000000..41b57c4ba Binary files /dev/null and b/source/favicons/favicon-32.png differ diff --git a/source/favicons/icon.svg b/source/favicons/icon.svg new file mode 100644 index 000000000..a3bcb71e0 --- /dev/null +++ b/source/favicons/icon.svg @@ -0,0 +1 @@ + diff --git a/source/fonts/montserrat-bold.woff b/source/fonts/montserrat-bold.woff new file mode 100644 index 000000000..9ceb6443e Binary files /dev/null and b/source/fonts/montserrat-bold.woff differ diff --git a/source/fonts/montserrat-bold.woff2 b/source/fonts/montserrat-bold.woff2 new file mode 100644 index 000000000..5c136d763 Binary files /dev/null and b/source/fonts/montserrat-bold.woff2 differ diff --git a/source/fonts/montserrat-medium.woff b/source/fonts/montserrat-medium.woff new file mode 100644 index 000000000..d0e539bb6 Binary files /dev/null and b/source/fonts/montserrat-medium.woff differ diff --git a/source/fonts/montserrat-medium.woff2 b/source/fonts/montserrat-medium.woff2 new file mode 100644 index 000000000..1cb9c5752 Binary files /dev/null and b/source/fonts/montserrat-medium.woff2 differ diff --git a/source/fonts/montserrat-regular.woff b/source/fonts/montserrat-regular.woff new file mode 100644 index 000000000..3c2c3f08c Binary files /dev/null and b/source/fonts/montserrat-regular.woff differ diff --git a/source/fonts/montserrat-regular.woff2 b/source/fonts/montserrat-regular.woff2 new file mode 100644 index 000000000..d13c06aa5 Binary files /dev/null and b/source/fonts/montserrat-regular.woff2 differ diff --git a/source/fonts/montserrat-ruble-regular.woff b/source/fonts/montserrat-ruble-regular.woff new file mode 100644 index 000000000..5dd666173 Binary files /dev/null and b/source/fonts/montserrat-ruble-regular.woff differ diff --git a/source/fonts/montserrat-ruble-regular.woff2 b/source/fonts/montserrat-ruble-regular.woff2 new file mode 100644 index 000000000..682290b20 Binary files /dev/null and b/source/fonts/montserrat-ruble-regular.woff2 differ diff --git a/source/fonts/montserrat-ruble-semibold.woff b/source/fonts/montserrat-ruble-semibold.woff new file mode 100644 index 000000000..f859d05ce Binary files /dev/null and b/source/fonts/montserrat-ruble-semibold.woff differ diff --git a/source/fonts/montserrat-ruble-semibold.woff2 b/source/fonts/montserrat-ruble-semibold.woff2 new file mode 100644 index 000000000..e61c1e837 Binary files /dev/null and b/source/fonts/montserrat-ruble-semibold.woff2 differ diff --git a/source/fonts/montserrat-semibold.woff b/source/fonts/montserrat-semibold.woff new file mode 100644 index 000000000..0031a3c6c Binary files /dev/null and b/source/fonts/montserrat-semibold.woff differ diff --git a/source/fonts/montserrat-semibold.woff2 b/source/fonts/montserrat-semibold.woff2 new file mode 100644 index 000000000..9528cb3b7 Binary files /dev/null and b/source/fonts/montserrat-semibold.woff2 differ diff --git a/source/icons/address.svg b/source/icons/address.svg new file mode 100644 index 000000000..dfed3be61 --- /dev/null +++ b/source/icons/address.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/burger.svg b/source/icons/burger.svg new file mode 100644 index 000000000..55e7890f4 --- /dev/null +++ b/source/icons/burger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cart-plus.svg b/source/icons/cart-plus.svg new file mode 100644 index 000000000..b38a8367c --- /dev/null +++ b/source/icons/cart-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/cart.svg b/source/icons/cart.svg new file mode 100644 index 000000000..1a6993dc4 --- /dev/null +++ b/source/icons/cart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/close.svg b/source/icons/close.svg new file mode 100644 index 000000000..7e213717a --- /dev/null +++ b/source/icons/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features-eco.svg b/source/icons/features-eco.svg new file mode 100644 index 000000000..b7b7e505f --- /dev/null +++ b/source/icons/features-eco.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features-energy.svg b/source/icons/features-energy.svg new file mode 100644 index 000000000..55d3d3329 --- /dev/null +++ b/source/icons/features-energy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features-pocket.svg b/source/icons/features-pocket.svg new file mode 100644 index 000000000..c1c15a909 --- /dev/null +++ b/source/icons/features-pocket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/features-speed.svg b/source/icons/features-speed.svg new file mode 100644 index 000000000..134a0365d --- /dev/null +++ b/source/icons/features-speed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/html-academy-logo.svg b/source/icons/html-academy-logo.svg new file mode 100644 index 000000000..70598e485 --- /dev/null +++ b/source/icons/html-academy-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/htmlacademy-logo.svg b/source/icons/htmlacademy-logo.svg deleted file mode 100644 index a317e376d..000000000 --- a/source/icons/htmlacademy-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/icons/ok.svg b/source/icons/ok.svg new file mode 100644 index 000000000..c20ef973e --- /dev/null +++ b/source/icons/ok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/pagination-arrow.svg b/source/icons/pagination-arrow.svg new file mode 100644 index 000000000..2d4a4c053 --- /dev/null +++ b/source/icons/pagination-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/phone.svg b/source/icons/phone.svg new file mode 100644 index 000000000..d3a15e674 --- /dev/null +++ b/source/icons/phone.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/pinterest.svg b/source/icons/pinterest.svg new file mode 100644 index 000000000..263dd51af --- /dev/null +++ b/source/icons/pinterest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/select-arrow.svg b/source/icons/select-arrow.svg new file mode 100644 index 000000000..4ac788480 --- /dev/null +++ b/source/icons/select-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/slider-arrow.svg b/source/icons/slider-arrow.svg new file mode 100644 index 000000000..7c67850fb --- /dev/null +++ b/source/icons/slider-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/user.svg b/source/icons/user.svg new file mode 100644 index 000000000..246e07adf --- /dev/null +++ b/source/icons/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/icons/vk.svg b/source/icons/vk.svg new file mode 100644 index 000000000..60f2273a4 --- /dev/null +++ b/source/icons/vk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/catalog-product-beige@1x.png b/source/images/catalog-product-beige@1x.png new file mode 100644 index 000000000..0d099f36d Binary files /dev/null and b/source/images/catalog-product-beige@1x.png differ diff --git a/source/images/catalog-product-beige@1x.webp b/source/images/catalog-product-beige@1x.webp new file mode 100644 index 000000000..9a0ca4805 Binary files /dev/null and b/source/images/catalog-product-beige@1x.webp differ diff --git a/source/images/catalog-product-beige@2x.png b/source/images/catalog-product-beige@2x.png new file mode 100644 index 000000000..0a2d314c8 Binary files /dev/null and b/source/images/catalog-product-beige@2x.png differ diff --git a/source/images/catalog-product-beige@2x.webp b/source/images/catalog-product-beige@2x.webp new file mode 100644 index 000000000..c1d9a68c6 Binary files /dev/null and b/source/images/catalog-product-beige@2x.webp differ diff --git a/source/images/catalog-product-black@1x.png b/source/images/catalog-product-black@1x.png new file mode 100644 index 000000000..39bc3e27f Binary files /dev/null and b/source/images/catalog-product-black@1x.png differ diff --git a/source/images/catalog-product-black@1x.webp b/source/images/catalog-product-black@1x.webp new file mode 100644 index 000000000..89ed8d816 Binary files /dev/null and b/source/images/catalog-product-black@1x.webp differ diff --git a/source/images/catalog-product-black@2x.png b/source/images/catalog-product-black@2x.png new file mode 100644 index 000000000..904d596a1 Binary files /dev/null and b/source/images/catalog-product-black@2x.png differ diff --git a/source/images/catalog-product-black@2x.webp b/source/images/catalog-product-black@2x.webp new file mode 100644 index 000000000..0eb3f6931 Binary files /dev/null and b/source/images/catalog-product-black@2x.webp differ diff --git a/source/images/catalog-product-brown@1x.png b/source/images/catalog-product-brown@1x.png new file mode 100644 index 000000000..c9fabfb49 Binary files /dev/null and b/source/images/catalog-product-brown@1x.png differ diff --git a/source/images/catalog-product-brown@1x.webp b/source/images/catalog-product-brown@1x.webp new file mode 100644 index 000000000..a5cfbffc0 Binary files /dev/null and b/source/images/catalog-product-brown@1x.webp differ diff --git a/source/images/catalog-product-brown@2x.png b/source/images/catalog-product-brown@2x.png new file mode 100644 index 000000000..eb9de1738 Binary files /dev/null and b/source/images/catalog-product-brown@2x.png differ diff --git a/source/images/catalog-product-brown@2x.webp b/source/images/catalog-product-brown@2x.webp new file mode 100644 index 000000000..d2e7d3c8b Binary files /dev/null and b/source/images/catalog-product-brown@2x.webp differ diff --git a/source/images/catalog-product-pink@1x.png b/source/images/catalog-product-pink@1x.png new file mode 100644 index 000000000..16e3f3270 Binary files /dev/null and b/source/images/catalog-product-pink@1x.png differ diff --git a/source/images/catalog-product-pink@1x.webp b/source/images/catalog-product-pink@1x.webp new file mode 100644 index 000000000..ed2fbe9bc Binary files /dev/null and b/source/images/catalog-product-pink@1x.webp differ diff --git a/source/images/catalog-product-pink@2x.png b/source/images/catalog-product-pink@2x.png new file mode 100644 index 000000000..7b8b06f89 Binary files /dev/null and b/source/images/catalog-product-pink@2x.png differ diff --git a/source/images/catalog-product-pink@2x.webp b/source/images/catalog-product-pink@2x.webp new file mode 100644 index 000000000..1b49832d3 Binary files /dev/null and b/source/images/catalog-product-pink@2x.webp differ diff --git a/source/images/catalog-product-purple@1x.png b/source/images/catalog-product-purple@1x.png new file mode 100644 index 000000000..98dac203b Binary files /dev/null and b/source/images/catalog-product-purple@1x.png differ diff --git a/source/images/catalog-product-purple@1x.webp b/source/images/catalog-product-purple@1x.webp new file mode 100644 index 000000000..7f224e6aa Binary files /dev/null and b/source/images/catalog-product-purple@1x.webp differ diff --git a/source/images/catalog-product-purple@2x.png b/source/images/catalog-product-purple@2x.png new file mode 100644 index 000000000..6ae0fa5f6 Binary files /dev/null and b/source/images/catalog-product-purple@2x.png differ diff --git a/source/images/catalog-product-purple@2x.webp b/source/images/catalog-product-purple@2x.webp new file mode 100644 index 000000000..cb3e5a7dc Binary files /dev/null and b/source/images/catalog-product-purple@2x.webp differ diff --git a/source/images/catalog-product-yellow@1x.png b/source/images/catalog-product-yellow@1x.png new file mode 100644 index 000000000..e850d14cc Binary files /dev/null and b/source/images/catalog-product-yellow@1x.png differ diff --git a/source/images/catalog-product-yellow@1x.webp b/source/images/catalog-product-yellow@1x.webp new file mode 100644 index 000000000..48f9d5406 Binary files /dev/null and b/source/images/catalog-product-yellow@1x.webp differ diff --git a/source/images/catalog-product-yellow@2x.png b/source/images/catalog-product-yellow@2x.png new file mode 100644 index 000000000..d9bd37bb8 Binary files /dev/null and b/source/images/catalog-product-yellow@2x.png differ diff --git a/source/images/catalog-product-yellow@2x.webp b/source/images/catalog-product-yellow@2x.webp new file mode 100644 index 000000000..2b075c04d Binary files /dev/null and b/source/images/catalog-product-yellow@2x.webp differ diff --git a/source/images/logo-desktop.svg b/source/images/logo-desktop.svg new file mode 100644 index 000000000..7bd0597e0 --- /dev/null +++ b/source/images/logo-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/logo-mobile.svg b/source/images/logo-mobile.svg new file mode 100644 index 000000000..58075719e --- /dev/null +++ b/source/images/logo-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/logo-tablet.svg b/source/images/logo-tablet.svg new file mode 100644 index 000000000..05b276f5f --- /dev/null +++ b/source/images/logo-tablet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/images/map-desktop@1x.jpg b/source/images/map-desktop@1x.jpg new file mode 100644 index 000000000..b7d7f9985 Binary files /dev/null and b/source/images/map-desktop@1x.jpg differ diff --git a/source/images/map-desktop@1x.webp b/source/images/map-desktop@1x.webp new file mode 100644 index 000000000..42266496f Binary files /dev/null and b/source/images/map-desktop@1x.webp differ diff --git a/source/images/map-desktop@2x.jpg b/source/images/map-desktop@2x.jpg new file mode 100644 index 000000000..3d2b80bcf Binary files /dev/null and b/source/images/map-desktop@2x.jpg differ diff --git a/source/images/map-desktop@2x.webp b/source/images/map-desktop@2x.webp new file mode 100644 index 000000000..dbce91078 Binary files /dev/null and b/source/images/map-desktop@2x.webp differ diff --git a/source/images/map-mobile@1x.jpg b/source/images/map-mobile@1x.jpg new file mode 100644 index 000000000..0404b5b4b Binary files /dev/null and b/source/images/map-mobile@1x.jpg differ diff --git a/source/images/map-mobile@1x.webp b/source/images/map-mobile@1x.webp new file mode 100644 index 000000000..88a28f81b Binary files /dev/null and b/source/images/map-mobile@1x.webp differ diff --git a/source/images/map-mobile@2x.jpg b/source/images/map-mobile@2x.jpg new file mode 100644 index 000000000..19f2f6ea5 Binary files /dev/null and b/source/images/map-mobile@2x.jpg differ diff --git a/source/images/map-mobile@2x.webp b/source/images/map-mobile@2x.webp new file mode 100644 index 000000000..b62640e0e Binary files /dev/null and b/source/images/map-mobile@2x.webp differ diff --git a/source/images/map-tablet@1x.jpg b/source/images/map-tablet@1x.jpg new file mode 100644 index 000000000..b5943561c Binary files /dev/null and b/source/images/map-tablet@1x.jpg differ diff --git a/source/images/map-tablet@1x.webp b/source/images/map-tablet@1x.webp new file mode 100644 index 000000000..398f10c04 Binary files /dev/null and b/source/images/map-tablet@1x.webp differ diff --git a/source/images/map-tablet@2x.jpg b/source/images/map-tablet@2x.jpg new file mode 100644 index 000000000..0a712fd22 Binary files /dev/null and b/source/images/map-tablet@2x.jpg differ diff --git a/source/images/map-tablet@2x.webp b/source/images/map-tablet@2x.webp new file mode 100644 index 000000000..5d5a1fdf6 Binary files /dev/null and b/source/images/map-tablet@2x.webp differ diff --git a/source/images/slider-decaf-desktop@1x.png b/source/images/slider-decaf-desktop@1x.png new file mode 100644 index 000000000..79d77a9fb Binary files /dev/null and b/source/images/slider-decaf-desktop@1x.png differ diff --git a/source/images/slider-decaf-desktop@1x.webp b/source/images/slider-decaf-desktop@1x.webp new file mode 100644 index 000000000..ff62ab6a1 Binary files /dev/null and b/source/images/slider-decaf-desktop@1x.webp differ diff --git a/source/images/slider-decaf-desktop@2x.png b/source/images/slider-decaf-desktop@2x.png new file mode 100644 index 000000000..55d00d099 Binary files /dev/null and b/source/images/slider-decaf-desktop@2x.png differ diff --git a/source/images/slider-decaf-desktop@2x.webp b/source/images/slider-decaf-desktop@2x.webp new file mode 100644 index 000000000..68df0834a Binary files /dev/null and b/source/images/slider-decaf-desktop@2x.webp differ diff --git a/source/images/slider-decaf-mobile@1x.png b/source/images/slider-decaf-mobile@1x.png new file mode 100644 index 000000000..096aa1c0d Binary files /dev/null and b/source/images/slider-decaf-mobile@1x.png differ diff --git a/source/images/slider-decaf-mobile@1x.webp b/source/images/slider-decaf-mobile@1x.webp new file mode 100644 index 000000000..b2f02e0de Binary files /dev/null and b/source/images/slider-decaf-mobile@1x.webp differ diff --git a/source/images/slider-decaf-mobile@2x.png b/source/images/slider-decaf-mobile@2x.png new file mode 100644 index 000000000..13b236c86 Binary files /dev/null and b/source/images/slider-decaf-mobile@2x.png differ diff --git a/source/images/slider-decaf-mobile@2x.webp b/source/images/slider-decaf-mobile@2x.webp new file mode 100644 index 000000000..e30696660 Binary files /dev/null and b/source/images/slider-decaf-mobile@2x.webp differ diff --git a/source/images/slider-decaf-tablet@1x.png b/source/images/slider-decaf-tablet@1x.png new file mode 100644 index 000000000..235ec17cc Binary files /dev/null and b/source/images/slider-decaf-tablet@1x.png differ diff --git a/source/images/slider-decaf-tablet@1x.webp b/source/images/slider-decaf-tablet@1x.webp new file mode 100644 index 000000000..863cf64d7 Binary files /dev/null and b/source/images/slider-decaf-tablet@1x.webp differ diff --git a/source/images/slider-decaf-tablet@2x.png b/source/images/slider-decaf-tablet@2x.png new file mode 100644 index 000000000..351e136b1 Binary files /dev/null and b/source/images/slider-decaf-tablet@2x.png differ diff --git a/source/images/slider-decaf-tablet@2x.webp b/source/images/slider-decaf-tablet@2x.webp new file mode 100644 index 000000000..7d6b672e2 Binary files /dev/null and b/source/images/slider-decaf-tablet@2x.webp differ diff --git a/source/images/slider-espresso-desktop@1x.png b/source/images/slider-espresso-desktop@1x.png new file mode 100644 index 000000000..e574cde1c Binary files /dev/null and b/source/images/slider-espresso-desktop@1x.png differ diff --git a/source/images/slider-espresso-desktop@1x.webp b/source/images/slider-espresso-desktop@1x.webp new file mode 100644 index 000000000..ccb189a98 Binary files /dev/null and b/source/images/slider-espresso-desktop@1x.webp differ diff --git a/source/images/slider-espresso-desktop@2x.png b/source/images/slider-espresso-desktop@2x.png new file mode 100644 index 000000000..e97fd5c9d Binary files /dev/null and b/source/images/slider-espresso-desktop@2x.png differ diff --git a/source/images/slider-espresso-desktop@2x.webp b/source/images/slider-espresso-desktop@2x.webp new file mode 100644 index 000000000..b319e78fb Binary files /dev/null and b/source/images/slider-espresso-desktop@2x.webp differ diff --git a/source/images/slider-espresso-mobile@1x.png b/source/images/slider-espresso-mobile@1x.png new file mode 100644 index 000000000..947baa976 Binary files /dev/null and b/source/images/slider-espresso-mobile@1x.png differ diff --git a/source/images/slider-espresso-mobile@1x.webp b/source/images/slider-espresso-mobile@1x.webp new file mode 100644 index 000000000..28f6bfa29 Binary files /dev/null and b/source/images/slider-espresso-mobile@1x.webp differ diff --git a/source/images/slider-espresso-mobile@2x.png b/source/images/slider-espresso-mobile@2x.png new file mode 100644 index 000000000..b6090c92a Binary files /dev/null and b/source/images/slider-espresso-mobile@2x.png differ diff --git a/source/images/slider-espresso-mobile@2x.webp b/source/images/slider-espresso-mobile@2x.webp new file mode 100644 index 000000000..b1cd56ac1 Binary files /dev/null and b/source/images/slider-espresso-mobile@2x.webp differ diff --git a/source/images/slider-espresso-tablet@1x.png b/source/images/slider-espresso-tablet@1x.png new file mode 100644 index 000000000..992e13c80 Binary files /dev/null and b/source/images/slider-espresso-tablet@1x.png differ diff --git a/source/images/slider-espresso-tablet@1x.webp b/source/images/slider-espresso-tablet@1x.webp new file mode 100644 index 000000000..11eeb292d Binary files /dev/null and b/source/images/slider-espresso-tablet@1x.webp differ diff --git a/source/images/slider-espresso-tablet@2x.png b/source/images/slider-espresso-tablet@2x.png new file mode 100644 index 000000000..9405ba90a Binary files /dev/null and b/source/images/slider-espresso-tablet@2x.png differ diff --git a/source/images/slider-espresso-tablet@2x.webp b/source/images/slider-espresso-tablet@2x.webp new file mode 100644 index 000000000..047014333 Binary files /dev/null and b/source/images/slider-espresso-tablet@2x.webp differ diff --git a/source/images/slider-lavender-desktop@1x.png b/source/images/slider-lavender-desktop@1x.png new file mode 100644 index 000000000..55b36b40c Binary files /dev/null and b/source/images/slider-lavender-desktop@1x.png differ diff --git a/source/images/slider-lavender-desktop@1x.webp b/source/images/slider-lavender-desktop@1x.webp new file mode 100644 index 000000000..ba32171ef Binary files /dev/null and b/source/images/slider-lavender-desktop@1x.webp differ diff --git a/source/images/slider-lavender-desktop@2x.png b/source/images/slider-lavender-desktop@2x.png new file mode 100644 index 000000000..9566d5c89 Binary files /dev/null and b/source/images/slider-lavender-desktop@2x.png differ diff --git a/source/images/slider-lavender-desktop@2x.webp b/source/images/slider-lavender-desktop@2x.webp new file mode 100644 index 000000000..062294952 Binary files /dev/null and b/source/images/slider-lavender-desktop@2x.webp differ diff --git a/source/images/slider-lavender-mobile@1x.png b/source/images/slider-lavender-mobile@1x.png new file mode 100644 index 000000000..bfa0ece2e Binary files /dev/null and b/source/images/slider-lavender-mobile@1x.png differ diff --git a/source/images/slider-lavender-mobile@1x.webp b/source/images/slider-lavender-mobile@1x.webp new file mode 100644 index 000000000..45fa5230d Binary files /dev/null and b/source/images/slider-lavender-mobile@1x.webp differ diff --git a/source/images/slider-lavender-mobile@2x.png b/source/images/slider-lavender-mobile@2x.png new file mode 100644 index 000000000..b9d7aef00 Binary files /dev/null and b/source/images/slider-lavender-mobile@2x.png differ diff --git a/source/images/slider-lavender-mobile@2x.webp b/source/images/slider-lavender-mobile@2x.webp new file mode 100644 index 000000000..06bca4362 Binary files /dev/null and b/source/images/slider-lavender-mobile@2x.webp differ diff --git a/source/images/slider-lavender-tablet@1x.png b/source/images/slider-lavender-tablet@1x.png new file mode 100644 index 000000000..787f5046c Binary files /dev/null and b/source/images/slider-lavender-tablet@1x.png differ diff --git a/source/images/slider-lavender-tablet@1x.webp b/source/images/slider-lavender-tablet@1x.webp new file mode 100644 index 000000000..c4b05a492 Binary files /dev/null and b/source/images/slider-lavender-tablet@1x.webp differ diff --git a/source/images/slider-lavender-tablet@2x.png b/source/images/slider-lavender-tablet@2x.png new file mode 100644 index 000000000..61c638bf2 Binary files /dev/null and b/source/images/slider-lavender-tablet@2x.png differ diff --git a/source/images/slider-lavender-tablet@2x.webp b/source/images/slider-lavender-tablet@2x.webp new file mode 100644 index 000000000..3827b6289 Binary files /dev/null and b/source/images/slider-lavender-tablet@2x.webp differ diff --git a/source/index.html b/source/index.html index 2365c2f30..4aca5b3f6 100644 --- a/source/index.html +++ b/source/index.html @@ -2,17 +2,445 @@ - Название проекта + Drink2Go — интернет-магазин кофейных напитков - + + + + + + + -
Шапка
-
-

Страница для старта

- Логотип HTML Academy +
+
+ +

Интернет-магазин кофейных напитков

+ + + +
+
+
+

Drink2Go — интернет-магазин кофейных напитков

+
+ +
    +
  • +
    + + + + + + + Банка напитка Декаф Флэт Уайт. + +
    +

    Новинка!

    +

    Декаф Флэт Уайт

    +

    Свежесваренный кофе без кофеина из Эфиопии
    с натуральным фермерским молоком — то, что нужно
    для расслабления после тяжёлого рабочего дня

    +
    +

    + 295₽ + 225₽ +

    + +
    +
    +
    +
    • +
  • +
    + + + + + + + Банка напитка Лавандовый Латте. + +
    +

    Новинка!

    +

    Лавандовый Латте

    +

    Невероятное сочетание перуанской высокогорной
    арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор

    +
    +

    + 285₽ + 265₽ +

    + +
    +
    +
    +
    • +
  • +
    + + + + + + + Банка напитка Тройной Эспрессо. + +
    +

    Новинка!

    +

    Тройной Эспрессо

    +

    Мощнее укола адреналина, чернее самой тёмной ночи,
    этот тройной эспрессо из Колумбии покажет вам, что такое настоящая бодрость

    +
    +

    + 395₽ + 375₽ +

    + +
    +
    +
    +
    • +
+
+ + +
+ + + +
+
+
+
+
+

Преимущества

+

Главные причины выбрать Drink2Go

+
    +
  • +

    Скорость

    +

    Готовый напиток всегда под рукой —
    просто открой банку

    +
    • +
  • +

    Удобство

    +

    Легко помещается и в карман,
    и в маленькую сумочку

    +
    • +
  • +

    Бодрость

    +

    Сбалансированная доза кофеина
    даст мощный заряд энергии

    +
    • +
  • +

    Экологичность

    +

    Вся упаковка сделана
    из перерабатываемых материалов

    +
    • +
+
+
+
+
+

Каталог

+

Каталог кофейных напитков

+
+
+ Цена +
+
+
+
+ + +
+
+
+ Наличие молока +
+ + + + +
+
+
+ Страна произрастания +
+ + + + + +
+
+
+ + +
+
+
+ + + + +
+
    +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
  • +
    + + + + +

    Декаф Флэт Уайт

    +

    Кофе без кофеина из Эфиопии
    с натуральным фермерским молоком

    +
    +

    225₽

    + +
    +
    +
    • +
+ +
+
+
+ + + + + + + + Карта: расположение магазина Drink2Go. + +
+ diff --git a/source/scripts/index.js b/source/scripts/index.js index 7a738ceaa..3232b0dd6 100644 --- a/source/scripts/index.js +++ b/source/scripts/index.js @@ -1 +1,7 @@ -/* в этот файл добавляет скрипты*/ +import {initMenu} from './menu.js'; +import {initSlider} from './slider.js'; +import {initPriceRange} from './price-range.js'; + +initMenu(); +initSlider(); +initPriceRange(); diff --git a/source/scripts/menu.js b/source/scripts/menu.js new file mode 100644 index 000000000..84af27388 --- /dev/null +++ b/source/scripts/menu.js @@ -0,0 +1,41 @@ +const initMenu = () => { + const toggle = document.querySelector('.header__toggle'); + const nav = document.querySelector('.main-nav'); + + if (!toggle || !nav) { + return; + } + + const toggleText = toggle.querySelector('.visually-hidden'); + + const onToggleClick = () => { + const isOpened = nav.classList.toggle('main-nav--opened'); + + toggle.classList.toggle('header__toggle--opened', isOpened); + toggle.setAttribute('aria-expanded', String(isOpened)); + toggleText.textContent = isOpened ? 'Закрыть меню' : 'Открыть меню'; + }; + + const onNavClick = (evt) => { + const link = evt.target.closest('.main-nav__link'); + + if (!link) { + return; + } + + const currentLink = nav.querySelector('.main-nav__link--current'); + + if (currentLink) { + currentLink.classList.remove('main-nav__link--current'); + currentLink.removeAttribute('aria-current'); + } + + link.classList.add('main-nav__link--current'); + link.setAttribute('aria-current', 'page'); + }; + + toggle.addEventListener('click', onToggleClick); + nav.addEventListener('click', onNavClick); +}; + +export {initMenu}; diff --git a/source/scripts/price-range.js b/source/scripts/price-range.js new file mode 100644 index 000000000..f50486be2 --- /dev/null +++ b/source/scripts/price-range.js @@ -0,0 +1,54 @@ +export function initPriceRange() { + const slider = document.querySelector('.filter__slider'); + + if (!slider) { + return; + } + + const form = slider.closest('form'); + const [minInput, maxInput] = form.querySelectorAll('.filter__input'); + + noUiSlider.create(slider, { + start: [0, 900], + connect: true, + step: 1, + range: { + min: 0, + max: 1000, + }, + format: { + to: (value) => Math.round(value), + from: (value) => Number(value), + }, + handleAttributes: [ + {'aria-label': 'Минимальная цена'}, + {'aria-label': 'Максимальная цена'}, + ], + }); + + slider.noUiSlider.on('update', (values, handle) => { + if (handle === 0) { + minInput.value = values[0] === 0 ? '' : values[0]; + } else { + maxInput.value = values[1]; + } + }); + + minInput.addEventListener('change', () => { + slider.noUiSlider.set([minInput.value || 0, null]); + }); + + maxInput.addEventListener('change', () => { + slider.noUiSlider.set([null, maxInput.value]); + }); + + form.addEventListener('reset', () => { + slider.noUiSlider.reset(); + }); + + form.addEventListener('submit', () => { + if (!minInput.value) { + minInput.value = 0; + } + }); +} diff --git a/source/scripts/slider.js b/source/scripts/slider.js new file mode 100644 index 000000000..0cfc2bdea --- /dev/null +++ b/source/scripts/slider.js @@ -0,0 +1,45 @@ +const initSlider = () => { + const slider = document.querySelector('.slider'); + + if (!slider) { + return; + } + + const slides = slider.querySelectorAll('.slider__item'); + const prevButton = slider.querySelector('.slider__button--prev'); + const nextButton = slider.querySelector('.slider__button--next'); + const paginationButtons = slider.querySelectorAll('.slider__pagination-button'); + + let currentIndex = [...slides].findIndex((slide) => slide.classList.contains('slider__item--current')); + + const showSlide = (index) => { + slides[currentIndex].classList.remove('slider__item--current'); + paginationButtons[currentIndex].classList.remove('slider__pagination-button--current'); + paginationButtons[currentIndex].removeAttribute('aria-current'); + + currentIndex = index; + + slides[currentIndex].classList.add('slider__item--current'); + paginationButtons[currentIndex].classList.add('slider__pagination-button--current'); + paginationButtons[currentIndex].setAttribute('aria-current', 'true'); + + prevButton.disabled = currentIndex === 0; + nextButton.disabled = currentIndex === slides.length - 1; + }; + + prevButton.addEventListener('click', () => { + showSlide(currentIndex - 1); + }); + + nextButton.addEventListener('click', () => { + showSlide(currentIndex + 1); + }); + + paginationButtons.forEach((button, index) => { + button.addEventListener('click', () => { + showSlide(index); + }); + }); +}; + +export {initSlider}; diff --git a/source/styles/blocks/button.scss b/source/styles/blocks/button.scss new file mode 100644 index 000000000..6f1dbefba --- /dev/null +++ b/source/styles/blocks/button.scss @@ -0,0 +1,50 @@ +.button { + display: inline-block; + padding: 8px 20px; + font-family: inherit; + font-size: 16px; + line-height: 24px; + text-align: center; + text-decoration: none; + overflow-wrap: anywhere; + color: $color-white; + background-color: $color-primary; + border: none; + border-radius: 4px; + cursor: pointer; + + &:hover, + &:focus-visible { + background-color: $color-primary-lighter; + } + + &:active { + background-color: $color-primary-darker; + } + + &:disabled { + background-color: $color-grey; + cursor: default; + } + + &--secondary { + color: $color-primary; + background-color: $color-white; + + &:hover, + &:focus-visible { + color: $color-white; + background-color: $color-primary-lighter; + } + + &:active { + color: $color-white; + background-color: $color-primary-darker; + } + + &:disabled { + color: $color-white; + background-color: $color-light-grey; + } + } +} diff --git a/source/styles/blocks/catalog.scss b/source/styles/blocks/catalog.scss new file mode 100644 index 000000000..d386dbd87 --- /dev/null +++ b/source/styles/blocks/catalog.scss @@ -0,0 +1,98 @@ +.catalog { + padding: 50px 0 44px; + color: $color-black; + background-color: $color-lightest-grey; + + @media (min-width: $tablet-width) { + padding: 80px 0 90px; + } + + @media (min-width: $desktop-width) { + padding: 100px 0 120px; + } +} + +.catalog__container { + @media (min-width: $desktop-width) { + display: grid; + grid-template-columns: 318px 1fr; + column-gap: 30px; + align-items: start; + } +} + +.catalog__label { + margin: 0 0 4px; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.04em; + text-align: center; + text-transform: uppercase; + overflow-wrap: anywhere; + color: $color-primary; + + @media (min-width: $desktop-width) { + grid-column: 1 / -1; + } +} + +.catalog__title { + margin: 0 0 20px; + font-size: 24px; + font-weight: 700; + line-height: 36px; + text-align: center; + overflow-wrap: anywhere; + + @media (min-width: $tablet-width) { + font-size: 42px; + line-height: 64px; + } + + @media (min-width: $desktop-width) { + grid-column: 1 / -1; + margin-bottom: 36px; + } +} + +.catalog__filter { + margin-bottom: 40px; + + @media (min-width: $desktop-width) { + grid-row: 3 / span 3; + margin: 4px 0 0; + } +} + +.catalog__sort { + margin-bottom: 16px; + + @media (min-width: $tablet-width) { + margin-bottom: 26px; + } +} + +.catalog__list { + display: grid; + gap: 20px; + margin: 0 0 40px; + padding: 0; + list-style: none; + + @media (min-width: $tablet-width) { + grid-template-columns: repeat(2, 1fr); + gap: 30px; + margin-bottom: 70px; + } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(3, 1fr); + margin-bottom: 60px; + } +} + +.catalog__item { + display: flex; + min-width: 0; +} diff --git a/source/styles/blocks/container.scss b/source/styles/blocks/container.scss new file mode 100644 index 000000000..303f6648d --- /dev/null +++ b/source/styles/blocks/container.scss @@ -0,0 +1,14 @@ +.container { + width: $mobile-width; + margin: 0 auto; + padding: 0 20px; + + @media (min-width: $tablet-width) { + width: $tablet-width; + } + + @media (min-width: $desktop-width) { + width: $desktop-width; + padding: 0 40px; + } +} diff --git a/source/styles/blocks/features.scss b/source/styles/blocks/features.scss new file mode 100644 index 000000000..ad411eade --- /dev/null +++ b/source/styles/blocks/features.scss @@ -0,0 +1,147 @@ +.features { + padding: 50px 0 60px; + text-align: center; + color: $color-black; + background-color: $color-white; + + @media (min-width: $tablet-width) { + padding: 60px 0 100px; + } + + @media (min-width: $desktop-width) { + padding: 100px 0 120px; + } +} + +.features__label { + margin: 0 0 4px; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.04em; + text-transform: uppercase; + color: $color-primary; +} + +.features__title { + margin: 0 0 36px; + font-size: 24px; + font-weight: 700; + line-height: 36px; + + @media (min-width: $tablet-width) { + margin-bottom: 60px; + font-size: 42px; + line-height: 64px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 80px; + } +} + +.features__list { + display: grid; + gap: 32px; + margin: 0; + padding: 0; + list-style: none; + + @media (min-width: $tablet-width) { + grid-template-columns: repeat(2, 1fr); + gap: 50px 30px; + margin: 0 10px; + text-align: left; + } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + gap: 30px; + margin: 0; + text-align: center; + } +} + +.features__item { + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: 52px 1fr; + column-gap: 20px; + align-content: start; + } + + @media (min-width: $desktop-width) { + display: block; + } + + &::before { + display: block; + width: 52px; + height: 56px; + margin: 0 auto 10px; + content: ""; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + @media (min-width: $tablet-width) { + grid-column: 1; + grid-row: 1 / 3; + margin: 4px 0 0; + } + + @media (min-width: $desktop-width) { + margin: 0 auto 20px; + } + } + + &--speed::before { + background-image: url("../../icons/features-speed.svg"); + } + + &--pocket::before { + background-image: url("../../icons/features-pocket.svg"); + } + + &--energy::before { + background-image: url("../../icons/features-energy.svg"); + } + + &--eco::before { + background-image: url("../../icons/features-eco.svg"); + } +} + +.features__item-title { + margin: 0 0 4px; + font-size: 18px; + font-weight: 700; + line-height: 32px; + + @media (min-width: $tablet-width) { + margin-bottom: 10px; + font-size: 24px; + line-height: 36px; + } +} + +.features__text { + margin: 0; + font-size: 14px; + line-height: 20px; + + @media (min-width: $tablet-width) { + font-size: 16px; + line-height: 24px; + } +} + +.features__break { + @media (min-width: $tablet-width) { + display: none; + } + + @media (min-width: $desktop-width) { + display: inline; + } +} diff --git a/source/styles/blocks/filter.scss b/source/styles/blocks/filter.scss new file mode 100644 index 000000000..738aaf470 --- /dev/null +++ b/source/styles/blocks/filter.scss @@ -0,0 +1,176 @@ +.filter { + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px 30px; + } + + @media (min-width: $desktop-width) { + display: block; + } +} + +.filter__group { + min-width: 0; + margin: 0 0 30px; + padding: 0; + border: none; + + @media (min-width: $tablet-width) { + margin-bottom: 0; + } + + @media (min-width: $desktop-width) { + margin-bottom: 30px; + } +} + +.filter__legend { + margin-bottom: 20px; + padding: 0; + font-size: 16px; + font-weight: 600; + line-height: 24px; + overflow-wrap: anywhere; +} + +.filter__range { + position: relative; + height: 24px; + margin-bottom: 24px; + + @media (min-width: $tablet-width) { + margin-bottom: 20px; + } + + @media (min-width: $desktop-width) { + margin-bottom: 22px; + } + + &::before { + position: absolute; + top: 11px; + right: 0; + left: 0; + height: 2px; + content: ""; + background-color: $color-light-grey; + } +} + +.filter__slider { + position: absolute; + top: 10px; + right: 6px; + left: 12px; + height: 4px; + background-color: transparent; + border: none; + border-radius: 0; + box-shadow: none; + + @media (min-width: $desktop-width) { + right: 3px; + } +} + +.filter__price { + display: grid; + grid-template-columns: 1fr 44px 1fr; + align-items: center; + + @media (min-width: $tablet-width) { + grid-template-columns: 1fr 50px 1fr; + } + + &::before { + grid-column: 2; + grid-row: 1; + justify-self: center; + width: 8px; + height: 2px; + content: ""; + background-color: $color-grey; + + @media (min-width: $desktop-width) { + width: 10px; + } + } +} + +.filter__field { + display: block; +} + +.filter__input { + width: 100%; + height: 40px; + padding: 0 10px; + font-family: inherit; + font-size: 16px; + font-weight: 500; + line-height: 24px; + text-align: center; + color: $color-black; + background-color: $color-white; + border: 2px solid $color-primary-lighter; + border-radius: 4px; + appearance: textfield; + + &::placeholder { + color: $color-grey; + } + + &:focus-visible { + border-color: $color-primary-darker; + outline: none; + } + + &:disabled { + color: $color-grey; + background-color: $color-lightest-grey; + border-color: $color-light-grey; + cursor: default; + } + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + margin: 0; + appearance: none; + } +} + +.filter__options { + display: grid; + gap: 20px; +} + +.filter__buttons { + display: grid; + gap: 20px; + + @media (min-width: $tablet-width) { + display: flex; + flex-wrap: wrap; + grid-column: 1 / -1; + justify-content: center; + } + + @media (min-width: $desktop-width) { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-top: 10px; + } +} + +.filter__button { + width: 100%; + + @media (min-width: $tablet-width) { + width: auto; + } + + @media (min-width: $desktop-width) { + width: 100%; + } +} diff --git a/source/styles/blocks/footer.scss b/source/styles/blocks/footer.scss new file mode 100644 index 000000000..a7065c4d4 --- /dev/null +++ b/source/styles/blocks/footer.scss @@ -0,0 +1,222 @@ +.footer { + color: $color-black; + background-color: $color-white; +} + +.footer__container { + padding: 0; + + @media (min-width: $tablet-width) { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + padding: 40px 20px; + } + + @media (min-width: $desktop-width) { + grid-template-columns: repeat(4, 1fr); + row-gap: 0; + padding: 40px; + } +} + +.footer__brand { + display: flex; + gap: 20px; + align-items: center; + justify-content: space-between; + min-height: 80px; + padding: 10px 20px; + + @media (min-width: $tablet-width) { + grid-column: 1 / -1; + min-height: 0; + padding: 0; + } + + @media (min-width: $desktop-width) { + display: block; + grid-column: auto; + } +} + +.footer__logo { + display: block; + flex-shrink: 0; +} + +.footer__logo-image { + display: block; +} + +.footer__description { + display: none; + + @media (min-width: $desktop-width) { + display: block; + margin: 10px 0 0; + font-size: 14px; + line-height: 20px; + } +} + +.footer__social { + justify-content: flex-end; + + @media (min-width: $desktop-width) { + justify-content: flex-start; + margin-top: 50px; + } +} + +.footer__column { + min-width: 0; + padding: 20px; + border-top: 1px solid $color-secondary; + + @media (min-width: $tablet-width) { + padding: 0; + border-top: none; + } + + @media (min-width: $desktop-width) { + margin-top: 9px; + } +} + +.footer__title { + margin: 0 0 12px; + font-size: 14px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0.02em; + overflow-wrap: anywhere; + color: $color-primary; +} + +.footer__list { + display: grid; + gap: 4px; + margin: 0; + padding: 0; + list-style: none; +} + +.footer__link { + display: inline-block; + padding: 8px 0; + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-decoration: none; + text-transform: uppercase; + overflow-wrap: anywhere; + color: inherit; + + &:hover, + &:focus-visible { + color: $color-primary-lighter; + } + + &:active { + color: $color-primary-darker; + } +} + +.footer__address { + display: grid; + gap: 16px; + justify-items: start; + margin-top: 20px; + font-style: normal; +} + +.footer__contact { + display: flex; + gap: 6px; + margin: 0; + font-size: 14px; + line-height: 20px; + text-decoration: none; + overflow-wrap: anywhere; + color: inherit; + + &::before { + flex-shrink: 0; + width: 13px; + height: 16px; + margin-top: 2px; + content: ""; + background-color: $color-primary; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + } + + &--address::before { + mask-image: url("../../icons/address.svg"); + } + + &--phone::before { + mask-image: url("../../icons/phone.svg"); + } + + &--phone:hover, + &--phone:focus-visible { + color: $color-primary-lighter; + } + + &--phone:active { + color: $color-primary-darker; + } +} + +.footer__developed { + margin: 0; + padding: 20px 0 30px; + font-size: 12px; + line-height: 16px; + text-align: center; + color: $color-grey; + border-top: 1px solid $color-secondary; + + @media (min-width: $tablet-width) { + grid-column: 1 / -1; + padding: 0; + border-top: none; + } + + @media (min-width: $desktop-width) { + margin-top: 19px; + } +} + +.footer__academy { + display: inline-flex; + gap: 4px; + align-items: center; + text-decoration: none; + vertical-align: top; + color: inherit; + + &::after { + width: 12px; + height: 16px; + content: ""; + background-color: currentcolor; + mask-image: url("../../icons/html-academy-logo.svg"); + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + } + + &:hover, + &:focus-visible { + color: $color-primary; + } + + &:active { + color: $color-primary-darker; + } +} diff --git a/source/styles/blocks/header.scss b/source/styles/blocks/header.scss index 2e045fc5c..2336f5656 100644 --- a/source/styles/blocks/header.scss +++ b/source/styles/blocks/header.scss @@ -1,5 +1,91 @@ .header { - padding: 10px 15px; - color: #ffffff; - background-color: #663399; + background-color: $color-white; +} + +.header__wrapper { + position: relative; + display: flex; + align-items: center; + min-height: 60px; + + @media (min-width: $tablet-width) { + min-height: 80px; + } +} + +.header__logo { + display: block; + flex-shrink: 0; +} + +.header__logo-image { + display: block; +} + +.header__description { + display: none; + + @media (min-width: $desktop-width) { + display: block; + width: 126px; + margin: 0 0 0 20px; + font-size: 12px; + line-height: 16px; + } +} + +.header__nav { + @media (min-width: $tablet-width) { + margin-left: 67px; + } + + @media (min-width: $desktop-width) { + margin-left: auto; + } +} + +.header__user-nav { + margin-left: auto; +} + +.header__toggle { + flex-shrink: 0; + width: 60px; + height: 60px; + margin-right: -20px; + padding: 0; + color: $color-black; + background-color: transparent; + border: none; + cursor: pointer; + + @media (min-width: $tablet-width) { + display: none; + } + + &::before { + display: block; + width: 16px; + height: 16px; + margin: 0 auto; + content: ""; + background-color: currentcolor; + mask-image: url("../../icons/burger.svg"); + mask-position: center; + mask-repeat: no-repeat; + } + + &:hover, + &:focus { + color: $color-primary; + } + + &:active { + color: $color-black; + background-color: $color-secondary; + } + + &--opened::before { + mask-image: url("../../icons/close.svg"); + } } diff --git a/source/styles/blocks/main-nav.scss b/source/styles/blocks/main-nav.scss new file mode 100644 index 000000000..468281436 --- /dev/null +++ b/source/styles/blocks/main-nav.scss @@ -0,0 +1,76 @@ +.main-nav { + position: absolute; + top: 100%; + left: 0; + z-index: 10; + display: none; + width: 100%; + background-color: $color-white; + + @media (min-width: $tablet-width) { + position: static; + display: block; + width: auto; + background-color: transparent; + } + + &--opened { + display: block; + } +} + +.main-nav__list { + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid $color-secondary; + + @media (min-width: $tablet-width) { + display: flex; + border-top: none; + } + + @media (min-width: $desktop-width) { + gap: 20px; + } +} + +.main-nav__link { + display: block; + padding: 20px; + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + color: $color-black; + border-bottom: 1px solid $color-secondary; + + @media (min-width: $tablet-width) { + padding: 32px 20px; + border-bottom: none; + } + + &:hover, + &:focus { + color: $color-primary; + } + + &:active { + color: $color-black; + background-color: $color-secondary; + + @media (min-width: $tablet-width) { + color: $color-primary; + } + } + + &--current { + @media (min-width: $tablet-width) { + color: $color-primary; + box-shadow: inset 0 -2px 0 $color-primary; + } + } +} diff --git a/source/styles/blocks/map.scss b/source/styles/blocks/map.scss new file mode 100644 index 000000000..86d867e5d --- /dev/null +++ b/source/styles/blocks/map.scss @@ -0,0 +1,18 @@ +.map { + background-color: $color-light-grey; +} + +.map__image { + display: block; + object-fit: cover; + width: 100%; + height: 420px; + + @media (min-width: $tablet-width) { + height: 480px; + } + + @media (min-width: $desktop-width) { + height: 540px; + } +} diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss new file mode 100644 index 000000000..0f815c07a --- /dev/null +++ b/source/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page__body { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.page__main { + flex-grow: 1; +} diff --git a/source/styles/blocks/pagination.scss b/source/styles/blocks/pagination.scss new file mode 100644 index 000000000..de242302d --- /dev/null +++ b/source/styles/blocks/pagination.scss @@ -0,0 +1,85 @@ +.pagination__list { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + margin: 0; + padding: 0; + list-style: none; + + @media (min-width: $tablet-width) { + justify-content: flex-end; + } +} + +.pagination__link { + display: flex; + align-items: center; + justify-content: center; + min-width: 40px; + height: 40px; + padding: 0 10px; + font-size: 16px; + line-height: 24px; + text-decoration: none; + color: $color-primary; + background-color: $color-white; + border-radius: 4px; + + &:not(&--current, &--disabled):hover, + &:focus-visible { + color: $color-white; + background-color: $color-primary-lighter; + } + + &:not(&--current, &--disabled):active { + color: $color-white; + background-color: $color-primary-darker; + } + + &--current { + font-weight: 600; + color: $color-black; + background-color: transparent; + } + + &--disabled { + color: $color-white; + background-color: $color-light-grey; + cursor: default; + } + + &--prev, + &--next { + @media (min-width: $tablet-width) { + padding: 0 20px; + } + } + + &--prev::before, + &--next::before { + width: 6px; + height: 10px; + content: ""; + background-color: currentcolor; + mask-image: url("../../icons/pagination-arrow.svg"); + mask-repeat: no-repeat; + mask-size: contain; + + @media (min-width: $tablet-width) { + display: none; + } + } + + &--next::before { + transform: rotate(180deg); + } +} + +.pagination__text { + display: none; + + @media (min-width: $tablet-width) { + display: inline; + } +} diff --git a/source/styles/blocks/product-card.scss b/source/styles/blocks/product-card.scss new file mode 100644 index 000000000..4152695b0 --- /dev/null +++ b/source/styles/blocks/product-card.scss @@ -0,0 +1,85 @@ +.product-card { + display: flex; + flex-direction: column; + width: 100%; + padding: 40px 20px 20px; + background-color: $color-white; + + @media (min-width: $tablet-width) { + padding: 50px 30px 30px; + } +} + +.product-card__image { + display: block; + object-fit: contain; + width: 130px; + height: 188px; + margin: 0 auto 24px; + + @media (min-width: $tablet-width) { + margin-bottom: 30px; + } +} + +.product-card__title { + margin: 0 0 4px; + font-size: 18px; + font-weight: 700; + line-height: 32px; + overflow-wrap: anywhere; + + @media (min-width: $tablet-width) { + margin-bottom: 10px; + font-size: 24px; + line-height: 36px; + } +} + +.product-card__description { + margin: 0 0 16px; + font-size: 14px; + line-height: 20px; + overflow-wrap: anywhere; + + @media (min-width: $tablet-width) { + margin-bottom: 20px; + } +} + +.product-card__footer { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; + justify-content: space-between; + margin-top: auto; +} + +.product-card__price { + margin: 0; + font-size: 20px; + font-weight: 600; + line-height: 32px; + overflow-wrap: anywhere; +} + +.product-card__button { + display: inline-flex; + gap: 6px; + align-items: center; + padding: 8px 20px; + font-size: 14px; + line-height: 20px; + + &::before { + flex-shrink: 0; + width: 20px; + height: 16px; + content: ""; + background-color: currentcolor; + mask-image: url("../../icons/cart-plus.svg"); + mask-repeat: no-repeat; + mask-size: contain; + } +} diff --git a/source/styles/blocks/radio.scss b/source/styles/blocks/radio.scss new file mode 100644 index 000000000..edf9b2235 --- /dev/null +++ b/source/styles/blocks/radio.scss @@ -0,0 +1,54 @@ +.radio { + display: block; +} + +.radio__label { + display: flex; + gap: 10px; + align-items: flex-start; + font-size: 16px; + line-height: 24px; + cursor: pointer; + + &::before { + flex-shrink: 0; + width: 24px; + height: 24px; + content: ""; + background-color: $color-white; + border: 2px solid $color-grey; + border-radius: 50%; + } +} + +.radio__input:not(:checked, :disabled) + .radio__label:hover::before, +.radio__input:not(:checked):focus-visible + .radio__label::before { + background-image: linear-gradient($color-primary-opacity, $color-primary-opacity); + border-color: $color-primary-lighter; + box-shadow: inset 0 0 0 2px $color-white; +} + +.radio__input:checked + .radio__label::before { + background-color: $color-primary; + border-color: $color-primary; + box-shadow: inset 0 0 0 2px $color-white; +} + +.radio__input:checked:focus-visible + .radio__label::before { + outline: 2px solid $color-primary-lighter; + outline-offset: 2px; +} + +.radio__input:disabled + .radio__label { + color: $color-grey; + cursor: default; +} + +.radio__input:disabled + .radio__label::before { + background-color: $color-white; + border-color: $color-light-grey; +} + +.radio__input:disabled:checked + .radio__label::before { + background-color: $color-light-grey; +} diff --git a/source/styles/blocks/slide.scss b/source/styles/blocks/slide.scss new file mode 100644 index 000000000..a75091c06 --- /dev/null +++ b/source/styles/blocks/slide.scss @@ -0,0 +1,151 @@ +.slide { + background-color: var(--slide-color); + + @media (min-width: $tablet-width) { + background-color: $color-white; + background-image: linear-gradient(var(--slide-color), var(--slide-color)); + background-repeat: no-repeat; + background-size: 100% 640px; + } + + @media (min-width: $desktop-width) { + background-color: var(--slide-color); + background-image: none; + } + + &--decaf { + --slide-color: #{$color-flat-white}; + } + + &--lavender { + --slide-color: #{$color-lavender-latte}; + } + + &--espresso { + --slide-color: #{$color-espresso}; + } +} + +.slide__wrapper { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 20px; + padding-bottom: 60px; + + @media (min-width: $tablet-width) { + padding-top: 60px; + padding-bottom: 0; + } + + @media (min-width: $desktop-width) { + flex-direction: row; + align-items: flex-start; + padding-top: 30px; + padding-bottom: 84px; + } +} + +.slide__image { + display: block; + + @media (min-width: $desktop-width) { + margin-left: 65px; + } +} + +.slide__content { + width: 100%; + margin-top: 10px; + text-align: center; + + @media (min-width: $tablet-width) { + order: -1; + width: 608px; + margin: 0 0 20px; + } + + @media (min-width: $desktop-width) { + order: 0; + width: 625px; + margin: 150px 0 0 30px; + text-align: left; + } +} + +.slide__badge { + margin: 0; + font-size: 12px; + font-weight: 700; + line-height: 16px; + letter-spacing: 0.04em; + text-transform: uppercase; + color: $color-primary; +} + +.slide__title { + margin: 4px 0 0; + font-size: 36px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0.02em; + + @media (min-width: $tablet-width) { + font-size: 56px; + line-height: 80px; + } +} + +.slide__description { + min-height: 100px; + margin: 10px 0 0; + font-size: 14px; + line-height: 20px; + + @media (min-width: $tablet-width) { + min-height: 0; + margin-top: 16px; + font-size: 20px; + line-height: 32px; + } +} + +.slide__break { + display: none; + + @media (min-width: $tablet-width) { + display: inline; + } +} + +.slide__buy { + display: flex; + gap: 20px; + align-items: center; + justify-content: center; + margin-top: 20px; + + @media (min-width: $desktop-width) { + justify-content: flex-start; + margin-top: 40px; + } +} + +.slide__price { + display: flex; + gap: 6px; + align-items: center; + margin: 0; +} + +.slide__old-price { + font-size: 16px; + line-height: 32px; + color: $color-primary; +} + +.slide__new-price { + font-size: 20px; + font-weight: 600; + line-height: 32px; +} diff --git a/source/styles/blocks/slider.scss b/source/styles/blocks/slider.scss new file mode 100644 index 000000000..7b7159670 --- /dev/null +++ b/source/styles/blocks/slider.scss @@ -0,0 +1,129 @@ +.slider { + position: relative; +} + +.slider__list { + display: grid; + margin: 0; + padding: 0; + list-style: none; +} + +.slider__item { + grid-area: 1 / 1; + visibility: hidden; + + &--current { + visibility: visible; + } +} + +.slider__controls { + position: absolute; + inset: 0; + padding: 0; + pointer-events: none; +} + +.slider__button { + position: absolute; + top: 0; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 100%; + padding: 0; + color: $color-primary; + background-color: transparent; + border: none; + cursor: pointer; + pointer-events: auto; + + @media (min-width: $tablet-width) { + width: 80px; + height: 640px; + } + + @media (min-width: $desktop-width) { + height: 100%; + } + + &::before { + width: 11px; + height: 20px; + content: ""; + background-color: currentcolor; + mask-image: url("../../icons/slider-arrow.svg"); + mask-position: center; + mask-repeat: no-repeat; + } + + &:hover, + &:focus-visible { + background-image: linear-gradient(90deg, $color-white 0%, rgb(255 255 255 / 0%) 100%); + } + + &:active { + background-image: linear-gradient(90deg, $color-primary-opacity 0%, rgb(120 89 207 / 0%) 100%); + } + + &:disabled { + color: $color-grey; + background-image: none; + cursor: default; + } + + &--prev { + left: 0; + } + + &--next { + right: 0; + transform: scaleX(-1); + } +} + +.slider__pagination { + display: none; + + @media (min-width: $desktop-width) { + position: absolute; + top: 630px; + left: 50%; + display: flex; + gap: 8px; + transform: translateX(-50%); + pointer-events: auto; + } +} + +.slider__pagination-button { + display: flex; + align-items: center; + width: 62px; + height: 24px; + padding: 0; + background-color: transparent; + border: none; + cursor: pointer; + + &::before { + width: 100%; + height: 4px; + content: ""; + background-color: $color-white; + } + + &:hover::before, + &:focus-visible::before { + background-color: $color-primary-opacity; + } + + &:active::before, + &--current::before, + &--current:hover::before, + &--current:focus-visible::before { + background-color: $color-primary; + } +} diff --git a/source/styles/blocks/social.scss b/source/styles/blocks/social.scss new file mode 100644 index 000000000..68dff76bf --- /dev/null +++ b/source/styles/blocks/social.scss @@ -0,0 +1,53 @@ +.social { + display: flex; + flex-wrap: wrap; + gap: 20px; + margin: 0; + padding: 0; + list-style: none; +} + +.social__link { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + color: $color-grey; + border-radius: 4px; + + &::before { + width: 20px; + height: 20px; + content: ""; + background-color: currentcolor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + } + + &:hover, + &:focus-visible { + color: $color-primary; + background-color: $color-secondary; + } + + &:active { + color: $color-primary; + background-color: $color-primary-opacity; + } + + &--vk::before { + mask-image: url("../../icons/vk.svg"); + } + + &--pinterest::before { + width: 22px; + height: 22px; + mask-image: url("../../icons/pinterest.svg"); + } + + &--ok::before { + mask-image: url("../../icons/ok.svg"); + } +} diff --git a/source/styles/blocks/sort.scss b/source/styles/blocks/sort.scss new file mode 100644 index 000000000..f1b6baeae --- /dev/null +++ b/source/styles/blocks/sort.scss @@ -0,0 +1,68 @@ +.sort { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; + justify-content: flex-end; + + @media (min-width: $tablet-width) { + gap: 10px; + } +} + +.sort__label { + font-size: 16px; + font-weight: 600; + line-height: 24px; + overflow-wrap: anywhere; +} + +.sort__field { + position: relative; + + &::after { + position: absolute; + top: 14px; + right: 10px; + width: 10px; + height: 6px; + content: ""; + background-color: $color-primary; + mask-image: url("../../icons/select-arrow.svg"); + mask-repeat: no-repeat; + mask-size: contain; + pointer-events: none; + } +} + +.sort__select { + width: 165px; + height: 32px; + padding: 4px 30px 4px 10px; + font-family: inherit; + font-size: 16px; + font-weight: 600; + line-height: 24px; + text-align: right; + text-align-last: right; + color: $color-primary; + background-color: transparent; + border: none; + border-radius: 4px; + outline: none; + appearance: none; + cursor: pointer; + + &:hover, + &:focus-visible { + background-color: $color-secondary; + } +} + +.sort__field:has(.sort__select:active)::after { + transform: rotate(180deg); +} + +.sort__field:has(.sort__select:open)::after { + transform: rotate(180deg); +} diff --git a/source/styles/blocks/toggle.scss b/source/styles/blocks/toggle.scss new file mode 100644 index 000000000..ca5cab348 --- /dev/null +++ b/source/styles/blocks/toggle.scss @@ -0,0 +1,71 @@ +.toggle { + display: block; +} + +.toggle__label { + position: relative; + display: flex; + gap: 10px; + align-items: flex-start; + font-size: 16px; + line-height: 24px; + cursor: pointer; + + &::before { + flex-shrink: 0; + width: 42px; + height: 24px; + content: ""; + background-color: $color-grey; + border-radius: 12px; + transition: background-color 0.2s; + } + + &::after { + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + content: ""; + background-color: $color-white; + border-radius: 50%; + transition: transform 0.2s; + } +} + +.toggle__input:not(:checked, :disabled) + .toggle__label:hover::before, +.toggle__input:not(:checked):focus-visible + .toggle__label::before { + background-color: $color-primary-opacity; + box-shadow: inset 0 0 0 2px $color-primary-lighter; +} + +.toggle__input:checked + .toggle__label::before { + background-color: $color-primary; +} + +.toggle__input:checked + .toggle__label::after { + transform: translateX(18px); +} + +.toggle__input:checked:focus-visible + .toggle__label::before { + outline: 2px solid $color-primary-lighter; + outline-offset: 2px; +} + +.toggle__input:disabled + .toggle__label { + color: $color-grey; + cursor: default; +} + +.toggle__input:disabled + .toggle__label::before { + background-color: $color-light-grey; +} + +.toggle__input:disabled + .toggle__label::after { + background-color: $color-lightest-grey; +} + +.toggle__input:disabled:checked + .toggle__label::after { + background-color: $color-grey; +} diff --git a/source/styles/blocks/user-nav.scss b/source/styles/blocks/user-nav.scss new file mode 100644 index 000000000..10455cabd --- /dev/null +++ b/source/styles/blocks/user-nav.scss @@ -0,0 +1,89 @@ +.user-nav { + display: flex; + margin: 0; + padding: 0; + list-style: none; + + @media (min-width: $desktop-width) { + gap: 20px; + } +} + +.user-nav__link { + display: flex; + align-items: center; + justify-content: center; + width: 60px; + height: 60px; + font-size: 12px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-decoration: none; + text-transform: uppercase; + color: $color-black; + + @media (min-width: $tablet-width) { + height: 80px; + } + + @media (min-width: $desktop-width) { + gap: 8px; + width: auto; + padding: 0 20px; + } + + &::before { + flex-shrink: 0; + width: 16px; + height: 16px; + content: ""; + background-color: currentcolor; + mask-position: center; + mask-repeat: no-repeat; + } + + &:hover, + &:focus { + color: $color-primary; + } + + &:active { + color: $color-black; + background-color: $color-secondary; + + @media (min-width: $desktop-width) { + color: $color-primary; + } + } + + &--login::before { + mask-image: url("../../icons/user.svg"); + } + + &--cart::before { + mask-image: url("../../icons/cart.svg"); + } +} + +.user-nav__text { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip-path: inset(100%); + white-space: nowrap; + border: 0; + + @media (min-width: $desktop-width) { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip-path: none; + white-space: normal; + } +} diff --git a/source/styles/blocks/visually-hidden.scss b/source/styles/blocks/visually-hidden.scss new file mode 100644 index 000000000..d1637b070 --- /dev/null +++ b/source/styles/blocks/visually-hidden.scss @@ -0,0 +1,11 @@ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip-path: inset(100%); + white-space: nowrap; + border: 0; +} diff --git a/source/styles/common/fonts.scss b/source/styles/common/fonts.scss index 6bb897da1..d6cab1c0a 100644 --- a/source/styles/common/fonts.scss +++ b/source/styles/common/fonts.scss @@ -1 +1,61 @@ -/* здесь подключите шрифты */ +@font-face { + font-family: "Montserrat"; + font-weight: 400; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-regular.woff2") format("woff2"), + url("../../fonts/montserrat-regular.woff") format("woff"); +} + +@font-face { + font-family: "Montserrat"; + font-weight: 500; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-medium.woff2") format("woff2"), + url("../../fonts/montserrat-medium.woff") format("woff"); +} + +@font-face { + font-family: "Montserrat"; + font-weight: 600; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-semibold.woff2") format("woff2"), + url("../../fonts/montserrat-semibold.woff") format("woff"); +} + +@font-face { + font-family: "Montserrat"; + font-weight: 700; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-bold.woff2") format("woff2"), + url("../../fonts/montserrat-bold.woff") format("woff"); +} + +@font-face { + font-family: "Montserrat"; + font-weight: 400; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-ruble-regular.woff2") format("woff2"), + url("../../fonts/montserrat-ruble-regular.woff") format("woff"); + unicode-range: u+20bd; +} + +@font-face { + font-family: "Montserrat"; + font-weight: 600; + font-style: normal; + font-display: swap; + src: + url("../../fonts/montserrat-ruble-semibold.woff2") format("woff2"), + url("../../fonts/montserrat-ruble-semibold.woff") format("woff"); + unicode-range: u+20bd; +} diff --git a/source/styles/common/global.scss b/source/styles/common/global.scss index ac721bd7a..b9da728b5 100644 --- a/source/styles/common/global.scss +++ b/source/styles/common/global.scss @@ -1 +1,20 @@ -/* здесь используйте глобальные селекторы img, body, html и так далее */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +img { + object-fit: contain; + max-width: 100%; + height: auto; +} + +body { + min-width: $mobile-width; + margin: 0; + font-family: "Montserrat", "Arial", sans-serif; + font-weight: 400; + color: $color-black; + background-color: $color-white; +} diff --git a/source/styles/common/variables.scss b/source/styles/common/variables.scss index 8bcd34bfc..2d7437579 100644 --- a/source/styles/common/variables.scss +++ b/source/styles/common/variables.scss @@ -1 +1,19 @@ -/* здесь используйте глобальные переменные */ +$mobile-width: 320px; +$tablet-width: 768px; +$desktop-width: 1440px; + +$color-white: #ffffff; +$color-grey: #bdbdbd; +$color-black: #333333; +$color-primary: #7859cf; +$color-secondary: #f0ebff; + +$color-primary-opacity: rgb(120 89 207 / 25%); +$color-primary-lighter: #9070ec; +$color-primary-darker: #593cac; +$color-light-grey: #e2e2e2; + +$color-lightest-grey: #f8f8f8; +$color-flat-white: #f3ebe1; +$color-lavender-latte: #eae6fc; +$color-espresso: #e5e6e8; diff --git a/source/styles/styles.scss b/source/styles/styles.scss index 76101881a..0ab12b548 100644 --- a/source/styles/styles.scss +++ b/source/styles/styles.scss @@ -2,6 +2,27 @@ @import "./common/variables.scss"; @import "./common/global.scss"; @import "./common/fonts.scss"; +@import "../vendor/nouislider/nouislider.min"; +@import "../vendor/nouislider/nouislider-custom"; /* BLOCKS */ +@import "./blocks/page.scss"; +@import "./blocks/visually-hidden.scss"; +@import "./blocks/container.scss"; +@import "./blocks/main-nav.scss"; +@import "./blocks/user-nav.scss"; @import "./blocks/header.scss"; +@import "./blocks/button.scss"; +@import "./blocks/slider.scss"; +@import "./blocks/slide.scss"; +@import "./blocks/features.scss"; +@import "./blocks/catalog.scss"; +@import "./blocks/filter.scss"; +@import "./blocks/radio.scss"; +@import "./blocks/toggle.scss"; +@import "./blocks/sort.scss"; +@import "./blocks/product-card.scss"; +@import "./blocks/pagination.scss"; +@import "./blocks/map.scss"; +@import "./blocks/social.scss"; +@import "./blocks/footer.scss"; diff --git a/source/vendor/nouislider/nouislider-custom.scss b/source/vendor/nouislider/nouislider-custom.scss new file mode 100644 index 000000000..66999a89a --- /dev/null +++ b/source/vendor/nouislider/nouislider-custom.scss @@ -0,0 +1,50 @@ +.filter__slider .noUi-connects { + border-radius: 0; +} + +.filter__slider .noUi-connect { + background-color: $color-primary-lighter; +} + +.filter__slider .noUi-handle { + top: -10px; + width: 24px; + height: 24px; + background-color: $color-white; + border: 2px solid $color-primary-lighter; + border-radius: 50%; + box-shadow: none; + cursor: pointer; + transform: translateX(-5px); +} + +.filter__slider .noUi-handle::before, +.filter__slider .noUi-handle::after { + display: none; +} + +.filter__slider .noUi-handle:hover, +.filter__slider .noUi-handle:focus-visible { + background-image: linear-gradient($color-primary-opacity, $color-primary-opacity); + outline: none; + box-shadow: inset 0 0 0 3px $color-white; +} + +.filter__slider .noUi-handle:active, +.filter__slider .noUi-active { + background-color: $color-primary; + background-image: none; + box-shadow: inset 0 0 0 3px $color-white; +} + +.filter__slider[disabled] .noUi-handle { + background-color: $color-lightest-grey; + background-image: none; + border-color: $color-grey; + box-shadow: none; + cursor: default; +} + +.filter__slider[disabled] .noUi-connect { + background-color: $color-grey; +} diff --git a/source/vendor/nouislider/nouislider.min.css b/source/vendor/nouislider/nouislider.min.css new file mode 100644 index 000000000..60f217c09 --- /dev/null +++ b/source/vendor/nouislider/nouislider.min.css @@ -0,0 +1 @@ +.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px} \ No newline at end of file diff --git a/source/vendor/nouislider/nouislider.min.js b/source/vendor/nouislider/nouislider.min.js new file mode 100644 index 000000000..978a4a351 --- /dev/null +++ b/source/vendor/nouislider/nouislider.min.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).noUiSlider={})}(this,function(ut){"use strict";function n(t){return"object"==typeof t&&"function"==typeof t.to}function ct(t){t.parentElement.removeChild(t)}function pt(t){return null!=t}function ft(t){t.preventDefault()}function i(t){return"number"==typeof t&&!isNaN(t)&&isFinite(t)}function dt(t,e,r){0=e[r];)r+=1;return r}function r(t,e,r){if(r>=t.slice(-1)[0])return 100;var n=l(r,t),i=t[n-1],o=t[n],t=e[n-1],n=e[n];return t+(r=r,a(o=[i,o],o[0]<0?r+Math.abs(o[0]):r-o[0],0)/s(t,n))}function o(t,e,r,n){if(100===n)return n;var i=l(n,t),o=t[i-1],s=t[i];return r?(s-o)/2this.xPct[n+1];)n++;else t===this.xPct[this.xPct.length-1]&&(n=this.xPct.length-2);r||t!==this.xPct[n+1]||n++;for(var i,o=1,s=(e=null===e?[]:e)[n],a=0,l=0,u=0,c=r?(t-this.xPct[n])/(this.xPct[n+1]-this.xPct[n]):(this.xPct[n+1]-t)/(this.xPct[n+1]-this.xPct[n]);0= 2) required for mode 'count'.");for(var e=t.values-1,r=100/e,n=[];e--;)n[e]=e*r;return n.push(100),U(n,t.stepped)}(d),m={},t=S.xVal[0],e=S.xVal[S.xVal.length-1],g=!1,v=!1,b=0;return(h=h.slice().sort(function(t,e){return t-e}).filter(function(t){return!this[t]&&(this[t]=!0)},{}))[0]!==t&&(h.unshift(t),g=!0),h[h.length-1]!==e&&(h.push(e),v=!0),h.forEach(function(t,e){var r,n,i,o,s,a,l,u,t=t,c=h[e+1],p=d.mode===ut.PipsMode.Steps,f=(f=p?S.xNumSteps[e]:f)||c-t;for(void 0===c&&(c=t),f=Math.max(f,1e-7),r=t;r<=c;r=Number((r+f).toFixed(7))){for(a=(o=(i=S.toStepping(r))-b)/(d.density||1),u=o/(l=Math.round(a)),n=1;n<=l;n+=1)m[(s=b+n*u).toFixed(5)]=[S.fromStepping(s),0];a=-1ut.PipsType.NoValue&&((t=P(a,!1)).className=p(n,f.cssClasses.value),t.setAttribute("data-value",String(r)),t.style[f.style]=e+"%",t.innerHTML=String(s.to(r))))}),a}function L(){s&&(ct(s),s=null)}function T(t){L();var e=D(t),r=t.filter,t=t.format||{to:function(t){return String(Math.round(t))}};return s=d.appendChild(O(e,r,t))}function j(){var t=i.getBoundingClientRect(),e="offset"+["Width","Height"][f.ort];return 0===f.ort?t.width||i[e]:t.height||i[e]}function z(n,i,o,s){function e(t){var e,r=function(e,t,r){var n=0===e.type.indexOf("touch"),i=0===e.type.indexOf("mouse"),o=0===e.type.indexOf("pointer"),s=0,a=0;0===e.type.indexOf("MSPointer")&&(o=!0);if("mousedown"===e.type&&!e.buttons&&!e.touches)return!1;if(n){var l=function(t){t=t.target;return t===r||r.contains(t)||e.composed&&e.composedPath().shift()===r};if("touchstart"===e.type){n=Array.prototype.filter.call(e.touches,l);if(1=r[e-1]});if(x!==!e)return x=!x,xt(f,f.connect.map(function(t){return!t})),void at()}rt(t),rt(t+1),x&&(rt(t-1),rt(t+2))}function tt(){g.forEach(function(t){var e=50r.stepAfter.startValue&&(i=r.stepAfter.startValue-n),t=n>r.thisStep.startValue?r.thisStep.step:!1!==r.stepBefore.step&&n-r.stepBefore.highestStep,100===e?i=null:0===e&&(t=null);e=S.countStepDecimals();return null!==i&&!1!==i&&(i=Number(i.toFixed(e))),[t=null!==t&&!1!==t?Number(t.toFixed(e)):t,i]}function at(){for(;n.firstChild;)n.removeChild(n.firstChild);for(var t=0;t<=f.handles;t++)u[t]=N(n,f.connect[t]),rt(t);Y({drag:f.events.drag,fixed:!0})}gt(t=d,f.cssClasses.target),0===f.dir?gt(t,f.cssClasses.ltr):gt(t,f.cssClasses.rtl),0===f.ort?gt(t,f.cssClasses.horizontal):gt(t,f.cssClasses.vertical),gt(t,"rtl"===getComputedStyle(t).direction?f.cssClasses.textDirectionRtl:f.cssClasses.textDirectionLtr),i=P(t,f.cssClasses.base),function(t,e){n=P(e,f.cssClasses.connects),l=[],(u=[]).push(N(n,t[0]));for(var r=0;r