diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 00000000..8b5743ec --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index 302783df..b85202fb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # KateVR landing page (HARD) -**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** +**⚠️ Attention: this is a hard landing page for development. We highly recommend choosing this landing page only if you didn't have a lot of troubles with previous homework tasks and if you sent all homework in time (didn't miss deadlines).** Implement landing page according to [Figma design](https://www.figma.com/file/Blpg4iapsI7fRqJeSp6DvK/KatVR?node-id=1%3A370) - Use BEM and SCSS @@ -25,7 +25,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/Bl 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/layout_KateVR/). + [DEMO LINK](https://kami2693.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index 05ac5122..b1b8cef4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,9 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", - "@parcel/transformer-sass": "^2.12.0", + "@parcel/transformer-sass": "^2.14.4", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", @@ -1049,16 +1049,18 @@ } }, "node_modules/@lezer/common": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz", - "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==", - "dev": true + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", + "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", + "dev": true, + "license": "MIT" }, "node_modules/@lezer/lr": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.1.tgz", - "integrity": "sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz", + "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==", "dev": true, + "license": "MIT", "dependencies": { "@lezer/common": "^1.0.0" } @@ -1129,10 +1131,12 @@ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@lmdb/lmdb-darwin-x64": { "version": "2.8.5", @@ -1142,10 +1146,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@lmdb/lmdb-linux-arm": { "version": "2.8.5", @@ -1155,10 +1161,12 @@ "arm" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@lmdb/lmdb-linux-arm64": { "version": "2.8.5", @@ -1168,10 +1176,12 @@ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@lmdb/lmdb-linux-x64": { "version": "2.8.5", @@ -1181,10 +1191,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@lmdb/lmdb-win32-x64": { "version": "2.8.5", @@ -1194,10 +1206,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" - ] + ], + "peer": true }, "node_modules/@mate-academy/bemlint": { "version": "0.1.2", @@ -1222,9 +1236,9 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz", + "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==", "dev": true, "dependencies": { "@octokit/rest": "^17.11.2", @@ -1782,6 +1796,7 @@ "resolved": "https://registry.npmjs.org/@mischnic/json-sourcemap/-/json-sourcemap-0.1.1.tgz", "integrity": "sha512-iA7+tyVqfrATAIsIRWQG+a7ZLLD0VaOCKV2Wd/v4mqIU3J9c4jx9p7S0nw1XH3gJCKNBOOwACOPYYSUu9pgT+w==", "dev": true, + "license": "MIT", "dependencies": { "@lezer/common": "^1.0.0", "@lezer/lr": "^1.0.0", @@ -1799,10 +1814,12 @@ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": { "version": "3.0.3", @@ -1812,10 +1829,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm": { "version": "3.0.3", @@ -1825,10 +1844,12 @@ "arm" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm64": { "version": "3.0.3", @@ -1838,10 +1859,12 @@ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": { "version": "3.0.3", @@ -1851,10 +1874,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": { "version": "3.0.3", @@ -1864,10 +1889,12 @@ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" - ] + ], + "peer": true }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", @@ -2239,78 +2266,99 @@ } }, "node_modules/@parcel/cache": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.12.0.tgz", - "integrity": "sha512-FX5ZpTEkxvq/yvWklRHDESVRz+c7sLTXgFuzz6uEnBcXV38j6dMSikflNpHA6q/L4GKkCqRywm9R6XQwhwIMyw==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/cache/-/cache-2.14.4.tgz", + "integrity": "sha512-CTTMySgNSgcSwbNWL4gODU1h9hMjBRyiC8/gcKDFqzw0wC/T+ZwX7wc5zNc/S9aJRTmmgvndcYKoVlds7YV2sg==", "dev": true, + "license": "MIT", + "peer": true, "dependencies": { - "@parcel/fs": "2.12.0", - "@parcel/logger": "2.12.0", - "@parcel/utils": "2.12.0", + "@parcel/fs": "2.14.4", + "@parcel/logger": "2.14.4", + "@parcel/utils": "2.14.4", "lmdb": "2.8.5" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" }, "peerDependencies": { - "@parcel/core": "^2.12.0" + "@parcel/core": "^2.14.4" } }, "node_modules/@parcel/codeframe": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.12.0.tgz", - "integrity": "sha512-v2VmneILFiHZJTxPiR7GEF1wey1/IXPdZMcUlNXBiPZyWDfcuNgGGVQkx/xW561rULLIvDPharOMdxz5oHOKQg==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/codeframe/-/codeframe-2.14.4.tgz", + "integrity": "sha512-fRKkmFGnQIa/X+Kr8csTWjOwRRh2JfJfTpNS8JhbjBSWvOoKsDG9T2U5Ky8akIG7c9WDGwB3ngONauI1vtaInA==", "dev": true, + "license": "MIT", "dependencies": { - "chalk": "^4.1.0" + "chalk": "^4.1.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/codeframe/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@parcel/core": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.12.0.tgz", - "integrity": "sha512-s+6pwEj+GfKf7vqGUzN9iSEPueUssCCQrCBUlcAfKrJe0a22hTUCjewpB0I7lNrCIULt8dkndD+sMdOrXsRl6Q==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.14.4.tgz", + "integrity": "sha512-dtUMmPDXd7CRAWwMlOc6jh6yLRL4wMi/vNMNdX9J/fafCLFgFBmPqWBhQ9tlX015Q8DEcIRWYPumHIn5dzqEbg==", "dev": true, + "license": "MIT", "peer": true, "dependencies": { "@mischnic/json-sourcemap": "^0.1.0", - "@parcel/cache": "2.12.0", - "@parcel/diagnostic": "2.12.0", - "@parcel/events": "2.12.0", - "@parcel/fs": "2.12.0", - "@parcel/graph": "3.2.0", - "@parcel/logger": "2.12.0", - "@parcel/package-manager": "2.12.0", - "@parcel/plugin": "2.12.0", - "@parcel/profiler": "2.12.0", - "@parcel/rust": "2.12.0", + "@parcel/cache": "2.14.4", + "@parcel/diagnostic": "2.14.4", + "@parcel/events": "2.14.4", + "@parcel/feature-flags": "2.14.4", + "@parcel/fs": "2.14.4", + "@parcel/graph": "3.4.4", + "@parcel/logger": "2.14.4", + "@parcel/package-manager": "2.14.4", + "@parcel/plugin": "2.14.4", + "@parcel/profiler": "2.14.4", + "@parcel/rust": "2.14.4", "@parcel/source-map": "^2.1.1", - "@parcel/types": "2.12.0", - "@parcel/utils": "2.12.0", - "@parcel/workers": "2.12.0", - "abortcontroller-polyfill": "^1.1.9", + "@parcel/types": "2.14.4", + "@parcel/utils": "2.14.4", + "@parcel/workers": "2.14.4", "base-x": "^3.0.8", "browserslist": "^4.6.6", "clone": "^2.1.1", - "dotenv": "^7.0.0", - "dotenv-expand": "^5.1.0", + "dotenv": "^16.4.5", + "dotenv-expand": "^11.0.6", "json5": "^2.2.0", "msgpackr": "^1.9.9", "nullthrows": "^1.1.1", "semver": "^7.5.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2318,26 +2366,31 @@ } }, "node_modules/@parcel/core/node_modules/dotenv": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-7.0.0.tgz", - "integrity": "sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==", + "version": "16.5.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz", + "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==", "dev": true, + "license": "BSD-2-Clause", "peer": true, "engines": { - "node": ">=6" + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" } }, "node_modules/@parcel/diagnostic": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.12.0.tgz", - "integrity": "sha512-8f1NOsSFK+F4AwFCKynyIu9Kr/uWHC+SywAv4oS6Bv3Acig0gtwUjugk0C9UaB8ztBZiW5TQZhw+uPZn9T/lJA==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/diagnostic/-/diagnostic-2.14.4.tgz", + "integrity": "sha512-+pElcMMlTnpEIm9MrrSEOh38ylKYYdTYMgv2iZQU7799yzD9sSac9dkGSbbKGDYWhALCuzWQOgdaGG9ExJZw6w==", "dev": true, + "license": "MIT", "dependencies": { "@mischnic/json-sourcemap": "^0.1.0", "nullthrows": "^1.1.1" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2345,12 +2398,27 @@ } }, "node_modules/@parcel/events": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.12.0.tgz", - "integrity": "sha512-nmAAEIKLjW1kB2cUbCYSmZOGbnGj8wCzhqnK727zCCWaA25ogzAtt657GPOeFyqW77KyosU728Tl63Fc8hphIA==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/events/-/events-2.14.4.tgz", + "integrity": "sha512-QzZr291JuENw7BsehKc3z29ukLMApPdjRFcOYXFuMWaHkpC7lzFK/KAY4Mi9HCa3aQe90zCcuxZg+bBsNF9XxQ==", "dev": true, + "license": "MIT", "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/feature-flags": { + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/feature-flags/-/feature-flags-2.14.4.tgz", + "integrity": "sha512-T2HE+lOmlU6PZOUnuXn6UZPXV4higCPgF2c2YXhrzTlSFcLMiAXATyzrylbYY/i/WjiYAlqvmEcaBX5fSaW95g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2358,39 +2426,44 @@ } }, "node_modules/@parcel/fs": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.12.0.tgz", - "integrity": "sha512-NnFkuvou1YBtPOhTdZr44WN7I60cGyly2wpHzqRl62yhObyi1KvW0SjwOMa0QGNcBOIzp4G0CapoZ93hD0RG5Q==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-2.14.4.tgz", + "integrity": "sha512-SQbuW6v1URv871FVj23HoC8+UUwpgkQ7iWmG7EITpp6AV42ojRr/jZ93hLjzkQQfYlRI64jUExn6AQAZDN3bqQ==", "dev": true, + "license": "MIT", + "peer": true, "dependencies": { - "@parcel/rust": "2.12.0", - "@parcel/types": "2.12.0", - "@parcel/utils": "2.12.0", + "@parcel/feature-flags": "2.14.4", + "@parcel/rust": "2.14.4", + "@parcel/types-internal": "2.14.4", + "@parcel/utils": "2.14.4", "@parcel/watcher": "^2.0.7", - "@parcel/workers": "2.12.0" + "@parcel/workers": "2.14.4" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" }, "peerDependencies": { - "@parcel/core": "^2.12.0" + "@parcel/core": "^2.14.4" } }, "node_modules/@parcel/graph": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-3.2.0.tgz", - "integrity": "sha512-xlrmCPqy58D4Fg5umV7bpwDx5Vyt7MlnQPxW68vae5+BA4GSWetfZt+Cs5dtotMG2oCHzZxhIPt7YZ7NRyQzLA==", + "version": "3.4.4", + "resolved": "https://registry.npmjs.org/@parcel/graph/-/graph-3.4.4.tgz", + "integrity": "sha512-AIbJ8d8aCPcKAkqc45LENjAMIrp8nRGlmky5LyY5244qqnR1B+tsvU47XoGymM3OaXLdVjv8knJ4K0ci9/l/4w==", "dev": true, + "license": "MIT", "peer": true, "dependencies": { + "@parcel/feature-flags": "2.14.4", "nullthrows": "^1.1.1" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2398,16 +2471,17 @@ } }, "node_modules/@parcel/logger": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.12.0.tgz", - "integrity": "sha512-cJ7Paqa7/9VJ7C+KwgJlwMqTQBOjjn71FbKk0G07hydUEBISU2aDfmc/52o60ErL9l+vXB26zTrIBanbxS8rVg==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-2.14.4.tgz", + "integrity": "sha512-uqSGeCqraWpbe8gqbb1k9ePrlzdKoOwkdQPcRIv8TTTWZfCt6Qcl08w8didO4iAOz4H5C4Ng82wbVO/ieaMoKg==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/diagnostic": "2.12.0", - "@parcel/events": "2.12.0" + "@parcel/diagnostic": "2.14.4", + "@parcel/events": "2.14.4" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2415,37 +2489,57 @@ } }, "node_modules/@parcel/markdown-ansi": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.12.0.tgz", - "integrity": "sha512-WZz3rzL8k0H3WR4qTHX6Ic8DlEs17keO9gtD4MNGyMNQbqQEvQ61lWJaIH0nAtgEetu0SOITiVqdZrb8zx/M7w==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/markdown-ansi/-/markdown-ansi-2.14.4.tgz", + "integrity": "sha512-B4787HHXHi0wcuYbV4qBibws/yaX4RXoNel5xWdwzn1ZFmeLAXluNjMO2Q6FmII/Lej9OIQEaTppl7/DxJGifg==", "dev": true, + "license": "MIT", "dependencies": { - "chalk": "^4.1.0" + "chalk": "^4.1.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/markdown-ansi/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@parcel/node-resolver-core": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@parcel/node-resolver-core/-/node-resolver-core-3.3.0.tgz", - "integrity": "sha512-rhPW9DYPEIqQBSlYzz3S0AjXxjN6Ub2yS6tzzsW/4S3Gpsgk/uEq4ZfxPvoPf/6TgZndVxmKwpmxaKtGMmf3cA==", + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@parcel/node-resolver-core/-/node-resolver-core-3.5.4.tgz", + "integrity": "sha512-KmmsVD8Ym+19DIbe0Y2SUbdcB+iUfgstR4dBpaogV36DlxV4d0uiia4GCpOO3kG9zlRYMVsfZEwy/NNZHELx3w==", "dev": true, + "license": "MIT", + "peer": true, "dependencies": { "@mischnic/json-sourcemap": "^0.1.0", - "@parcel/diagnostic": "2.12.0", - "@parcel/fs": "2.12.0", - "@parcel/rust": "2.12.0", - "@parcel/utils": "2.12.0", + "@parcel/diagnostic": "2.14.4", + "@parcel/fs": "2.14.4", + "@parcel/rust": "2.14.4", + "@parcel/utils": "2.14.4", "nullthrows": "^1.1.1", "semver": "^7.5.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2453,42 +2547,45 @@ } }, "node_modules/@parcel/package-manager": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.12.0.tgz", - "integrity": "sha512-0nvAezcjPx9FT+hIL+LS1jb0aohwLZXct7jAh7i0MLMtehOi0z1Sau+QpgMlA9rfEZZ1LIeFdnZZwqSy7Ccspw==", - "dev": true, - "dependencies": { - "@parcel/diagnostic": "2.12.0", - "@parcel/fs": "2.12.0", - "@parcel/logger": "2.12.0", - "@parcel/node-resolver-core": "3.3.0", - "@parcel/types": "2.12.0", - "@parcel/utils": "2.12.0", - "@parcel/workers": "2.12.0", - "@swc/core": "^1.3.36", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/package-manager/-/package-manager-2.14.4.tgz", + "integrity": "sha512-chF2rBmLtLPZe0qtbqJtq6hNGCRu0+1wFs2j5sqxr1ZttvvhRpATu/7pD+gKTFmfL7iJkOpGTU485SYmyO1xjg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@parcel/diagnostic": "2.14.4", + "@parcel/fs": "2.14.4", + "@parcel/logger": "2.14.4", + "@parcel/node-resolver-core": "3.5.4", + "@parcel/types": "2.14.4", + "@parcel/utils": "2.14.4", + "@parcel/workers": "2.14.4", + "@swc/core": "^1.11.5", "semver": "^7.5.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" }, "peerDependencies": { - "@parcel/core": "^2.12.0" + "@parcel/core": "^2.14.4" } }, "node_modules/@parcel/plugin": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.12.0.tgz", - "integrity": "sha512-nc/uRA8DiMoe4neBbzV6kDndh/58a4wQuGKw5oEoIwBCHUvE2W8ZFSu7ollSXUGRzfacTt4NdY8TwS73ScWZ+g==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/plugin/-/plugin-2.14.4.tgz", + "integrity": "sha512-EcehbthkBtQ9S2jWAzIiSlodbIMZ0bSsN3PC1q9jVaCM16ueObjZohKkzMjzR6Qot91qL0EJoMLzuNvtryvpHA==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/types": "2.12.0" + "@parcel/types": "2.14.4" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2496,17 +2593,19 @@ } }, "node_modules/@parcel/profiler": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/profiler/-/profiler-2.12.0.tgz", - "integrity": "sha512-q53fvl5LDcFYzMUtSusUBZSjQrKjMlLEBgKeQHFwkimwR1mgoseaDBDuNz0XvmzDzF1UelJ02TUKCGacU8W2qA==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/profiler/-/profiler-2.14.4.tgz", + "integrity": "sha512-oZAdCDW3bYRpBOuL4coq4OQDN6HXADaSd4X8xJCeGsEsbVfJt0Qg5RgxdWC1L86mukyZMQ9ZrQUpC8aU9CAmFg==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/diagnostic": "2.12.0", - "@parcel/events": "2.12.0", + "@parcel/diagnostic": "2.14.4", + "@parcel/events": "2.14.4", + "@parcel/types-internal": "2.14.4", "chrome-trace-event": "^1.0.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", @@ -2514,16 +2613,25 @@ } }, "node_modules/@parcel/rust": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/rust/-/rust-2.12.0.tgz", - "integrity": "sha512-005cldMdFZFDPOjbDVEXcINQ3wT4vrxvSavRWI3Az0e3E18exO/x/mW9f648KtXugOXMAqCEqhFHcXECL9nmMw==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/rust/-/rust-2.14.4.tgz", + "integrity": "sha512-Ti+ZVr8mMTgrSA7UHcFXxG98anD0C8dGzYfP1+DTgxkcU16nywTv5F/VsPqpV2qiDWrHbm06CEWQbOrowjzvVw==", "dev": true, + "license": "MIT", "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" + }, + "peerDependencies": { + "napi-wasm": "^1.1.2" + }, + "peerDependenciesMeta": { + "napi-wasm": { + "optional": true + } } }, "node_modules/@parcel/source-map": { @@ -2531,6 +2639,7 @@ "resolved": "https://registry.npmjs.org/@parcel/source-map/-/source-map-2.1.1.tgz", "integrity": "sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew==", "dev": true, + "license": "MIT", "dependencies": { "detect-libc": "^1.0.3" }, @@ -2539,18 +2648,19 @@ } }, "node_modules/@parcel/transformer-sass": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.12.0.tgz", - "integrity": "sha512-xLLoSLPST+2AHJwFRLl4foArDjjy6P1RChP3TxMU2MVS1sbKGJnfFhFpHAacH8ASjuGtu5rbpfpHRZePlvoZxw==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/transformer-sass/-/transformer-sass-2.14.4.tgz", + "integrity": "sha512-GspG5jYpr4XmO5xa5UFBmf78og9Gx1DLbZo/KKD7hYd9DnuqtwFhvcoWsOB/TPNd4wzMjvg0yP34Kij9Bcs2vQ==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/plugin": "2.12.0", + "@parcel/plugin": "2.14.4", "@parcel/source-map": "^2.1.1", "sass": "^1.38.0" }, "engines": { - "node": ">= 12.0.0", - "parcel": "^2.12.0" + "node": ">= 16.0.0", + "parcel": "^2.14.4" }, "funding": { "type": "opencollective", @@ -2558,48 +2668,78 @@ } }, "node_modules/@parcel/types": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.12.0.tgz", - "integrity": "sha512-8zAFiYNCwNTQcglIObyNwKfRYQK5ELlL13GuBOrSMxueUiI5ylgsGbTS1N7J3dAGZixHO8KhHGv5a71FILn9rQ==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/types/-/types-2.14.4.tgz", + "integrity": "sha512-NL4N9M6IPwBquAo1DKOPqy66nwJLXMX3KPalzAA7ktt3HYr5YNG5h3GeVXPOLNIVVMrSIiodYGPEeEBYy6kyYA==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/cache": "2.12.0", - "@parcel/diagnostic": "2.12.0", - "@parcel/fs": "2.12.0", - "@parcel/package-manager": "2.12.0", + "@parcel/types-internal": "2.14.4", + "@parcel/workers": "2.14.4" + } + }, + "node_modules/@parcel/types-internal": { + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/types-internal/-/types-internal-2.14.4.tgz", + "integrity": "sha512-Y2JnljFG7KcxLrCiYNCqBfjDo12alhRVpNugm0jwz1EQ3OQNO3HYiB0f3djq6pv2clZ5ndpgkNgYsn6L7KR9Nw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@parcel/diagnostic": "2.14.4", + "@parcel/feature-flags": "2.14.4", "@parcel/source-map": "^2.1.1", - "@parcel/workers": "2.12.0", "utility-types": "^3.10.0" } }, "node_modules/@parcel/utils": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.12.0.tgz", - "integrity": "sha512-z1JhLuZ8QmDaYoEIuUCVZlhcFrS7LMfHrb2OCRui5SQFntRWBH2fNM6H/fXXUkT9SkxcuFP2DUA6/m4+Gkz72g==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-2.14.4.tgz", + "integrity": "sha512-icK6QgKjis+UZLyaHJcsKXYOSKYeYr41m8ZB9j20/yEcvrMqj/LMVsNjLz3iWVhLwfgussG2ODxycCdu3M5cvQ==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/codeframe": "2.12.0", - "@parcel/diagnostic": "2.12.0", - "@parcel/logger": "2.12.0", - "@parcel/markdown-ansi": "2.12.0", - "@parcel/rust": "2.12.0", + "@parcel/codeframe": "2.14.4", + "@parcel/diagnostic": "2.14.4", + "@parcel/logger": "2.14.4", + "@parcel/markdown-ansi": "2.14.4", + "@parcel/rust": "2.14.4", "@parcel/source-map": "^2.1.1", - "chalk": "^4.1.0", + "chalk": "^4.1.2", "nullthrows": "^1.1.1" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/utils/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/@parcel/watcher": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", - "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz", + "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==", "dev": true, + "hasInstallScript": true, + "license": "MIT", + "peer": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -2614,32 +2754,35 @@ "url": "https://opencollective.com/parcel" }, "optionalDependencies": { - "@parcel/watcher-android-arm64": "2.4.1", - "@parcel/watcher-darwin-arm64": "2.4.1", - "@parcel/watcher-darwin-x64": "2.4.1", - "@parcel/watcher-freebsd-x64": "2.4.1", - "@parcel/watcher-linux-arm-glibc": "2.4.1", - "@parcel/watcher-linux-arm64-glibc": "2.4.1", - "@parcel/watcher-linux-arm64-musl": "2.4.1", - "@parcel/watcher-linux-x64-glibc": "2.4.1", - "@parcel/watcher-linux-x64-musl": "2.4.1", - "@parcel/watcher-win32-arm64": "2.4.1", - "@parcel/watcher-win32-ia32": "2.4.1", - "@parcel/watcher-win32-x64": "2.4.1" + "@parcel/watcher-android-arm64": "2.5.1", + "@parcel/watcher-darwin-arm64": "2.5.1", + "@parcel/watcher-darwin-x64": "2.5.1", + "@parcel/watcher-freebsd-x64": "2.5.1", + "@parcel/watcher-linux-arm-glibc": "2.5.1", + "@parcel/watcher-linux-arm-musl": "2.5.1", + "@parcel/watcher-linux-arm64-glibc": "2.5.1", + "@parcel/watcher-linux-arm64-musl": "2.5.1", + "@parcel/watcher-linux-x64-glibc": "2.5.1", + "@parcel/watcher-linux-x64-musl": "2.5.1", + "@parcel/watcher-win32-arm64": "2.5.1", + "@parcel/watcher-win32-ia32": "2.5.1", + "@parcel/watcher-win32-x64": "2.5.1" } }, "node_modules/@parcel/watcher-android-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", - "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", + "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "android" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2649,17 +2792,19 @@ } }, "node_modules/@parcel/watcher-darwin-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", - "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", + "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2669,17 +2814,19 @@ } }, "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", - "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", + "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2689,17 +2836,19 @@ } }, "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", - "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", + "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "freebsd" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2709,17 +2858,41 @@ } }, "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", - "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", + "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", "cpu": [ "arm" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", + "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2729,17 +2902,19 @@ } }, "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", - "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", + "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2749,17 +2924,19 @@ } }, "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", - "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", + "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2769,17 +2946,19 @@ } }, "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", - "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", + "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2789,17 +2968,19 @@ } }, "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", - "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", + "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2809,17 +2990,19 @@ } }, "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", - "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", + "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", "cpu": [ "arm64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2829,17 +3012,19 @@ } }, "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", - "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", + "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", "cpu": [ "ia32" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2849,17 +3034,19 @@ } }, "node_modules/@parcel/watcher-win32-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", - "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", + "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==", "cpu": [ "x64" ], "dev": true, + "license": "MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">= 10.0.0" }, @@ -2869,27 +3056,28 @@ } }, "node_modules/@parcel/workers": { - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.12.0.tgz", - "integrity": "sha512-zv5We5Jmb+ZWXlU6A+AufyjY4oZckkxsZ8J4dvyWL0W8IQvGO1JB4FGeryyttzQv3RM3OxcN/BpTGPiDG6keBw==", + "version": "2.14.4", + "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.14.4.tgz", + "integrity": "sha512-OAjW2dJOaRKy4UD5YwnUi7mY+gt/QbjagjrKh2fQDnrvuK8dpr5GrjEOLOe6QsxEE0vpe3jshhGMJTYqLni3kQ==", "dev": true, + "license": "MIT", "dependencies": { - "@parcel/diagnostic": "2.12.0", - "@parcel/logger": "2.12.0", - "@parcel/profiler": "2.12.0", - "@parcel/types": "2.12.0", - "@parcel/utils": "2.12.0", + "@parcel/diagnostic": "2.14.4", + "@parcel/logger": "2.14.4", + "@parcel/profiler": "2.14.4", + "@parcel/types-internal": "2.14.4", + "@parcel/utils": "2.14.4", "nullthrows": "^1.1.1" }, "engines": { - "node": ">= 12.0.0" + "node": ">= 16.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/parcel" }, "peerDependencies": { - "@parcel/core": "^2.12.0" + "@parcel/core": "^2.14.4" } }, "node_modules/@sinclair/typebox": { @@ -2943,14 +3131,16 @@ "dev": true }, "node_modules/@swc/core": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.7.0.tgz", - "integrity": "sha512-d4vMzH6ICllDwlPuhset2h8gu/USHdbyfJim+2hQEdxC0UONtfpmu38XBgNqRjStrji1Q5M10jfeUZL3cu1i8g==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.11.21.tgz", + "integrity": "sha512-/Y3BJLcwd40pExmdar8MH2UGGvCBrqNN7hauOMckrEX2Ivcbv3IMhrbGX4od1dnF880Ed8y/E9aStZCIQi0EGw==", "dev": true, "hasInstallScript": true, + "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/counter": "^0.1.3", - "@swc/types": "^0.1.9" + "@swc/types": "^0.1.21" }, "engines": { "node": ">=10" @@ -2960,19 +3150,19 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.7.0", - "@swc/core-darwin-x64": "1.7.0", - "@swc/core-linux-arm-gnueabihf": "1.7.0", - "@swc/core-linux-arm64-gnu": "1.7.0", - "@swc/core-linux-arm64-musl": "1.7.0", - "@swc/core-linux-x64-gnu": "1.7.0", - "@swc/core-linux-x64-musl": "1.7.0", - "@swc/core-win32-arm64-msvc": "1.7.0", - "@swc/core-win32-ia32-msvc": "1.7.0", - "@swc/core-win32-x64-msvc": "1.7.0" + "@swc/core-darwin-arm64": "1.11.21", + "@swc/core-darwin-x64": "1.11.21", + "@swc/core-linux-arm-gnueabihf": "1.11.21", + "@swc/core-linux-arm64-gnu": "1.11.21", + "@swc/core-linux-arm64-musl": "1.11.21", + "@swc/core-linux-x64-gnu": "1.11.21", + "@swc/core-linux-x64-musl": "1.11.21", + "@swc/core-win32-arm64-msvc": "1.11.21", + "@swc/core-win32-ia32-msvc": "1.11.21", + "@swc/core-win32-x64-msvc": "1.11.21" }, "peerDependencies": { - "@swc/helpers": "*" + "@swc/helpers": ">=0.5.17" }, "peerDependenciesMeta": { "@swc/helpers": { @@ -2981,161 +3171,181 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.0.tgz", - "integrity": "sha512-2ylhM7f0HwUwLrFYZAe/dse8PCbPsYcJS3Dt7Q8NT3PUn7vy6QOMxNcOPPuDrnmaXqQQO3oxdmRapguTxaat9g==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.21.tgz", + "integrity": "sha512-v6gjw9YFWvKulCw3ZA1dY+LGMafYzJksm1mD4UZFZ9b36CyHFowYVYug1ajYRIRqEvvfIhHUNV660zTLoVFR8g==", "cpu": [ "arm64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.7.0.tgz", - "integrity": "sha512-SgVnN4gT1Rb9YfTkp4FCUITqSs7Yj0uB2SUciu5CV3HuGvS5YXCUzh+KrwpLFtx8NIgivISKcNnb41mJi98X8Q==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.11.21.tgz", + "integrity": "sha512-CUiTiqKlzskwswrx9Ve5NhNoab30L1/ScOfQwr1duvNlFvarC8fvQSgdtpw2Zh3MfnfNPpyLZnYg7ah4kbT9JQ==", "cpu": [ "x64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.0.tgz", - "integrity": "sha512-+Z9Dayart1iKJQEJJ9N/KS4z5EdXJE3WPFikY0jonKTo4Dd8RuyVz5yLvqcIMeVdz/SwximATaL6iJXw7hZS9A==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.21.tgz", + "integrity": "sha512-YyBTAFM/QPqt1PscD8hDmCLnqPGKmUZpqeE25HXY8OLjl2MUs8+O4KjwPZZ+OGxpdTbwuWFyMoxjcLy80JODvg==", "cpu": [ "arm" ], "dev": true, + "license": "Apache-2.0", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.0.tgz", - "integrity": "sha512-UnLrCiZ1EI4shznJn0xP6DLgsXUSwtfsdgHhGYCrvbgVBBve3S9iFgVFEB3SPl7Q/TdowNbrN4zHU0oChfiNfw==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.21.tgz", + "integrity": "sha512-DQD+ooJmwpNsh4acrftdkuwl5LNxxg8U4+C/RJNDd7m5FP9Wo4c0URi5U0a9Vk/6sQNh9aSGcYChDpqCDWEcBw==", "cpu": [ "arm64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.0.tgz", - "integrity": "sha512-H724UANA+ptsfwKRr9mnaDa9cb5fw0oFysiGKTgb3DMYcgk3Od0jMTnXVPFSVpo7FlmyxeC9K8ueUPBOoOK6XA==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.21.tgz", + "integrity": "sha512-y1L49+snt1a1gLTYPY641slqy55QotPdtRK9Y6jMi4JBQyZwxC8swWYlQWb+MyILwxA614fi62SCNZNznB3XSA==", "cpu": [ "arm64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.0.tgz", - "integrity": "sha512-SY3HA0K0Dpqt1HIfMLGpwL4hd4UaL2xHP5oZXPlRQPhUDZrbb4PbI3ZJnh66c63eL4ZR8EJ+HRFI0Alx5p69Zw==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.21.tgz", + "integrity": "sha512-NesdBXv4CvVEaFUlqKj+GA4jJMNUzK2NtKOrUNEtTbXaVyNiXjFCSaDajMTedEB0jTAd9ybB0aBvwhgkJUWkWA==", "cpu": [ "x64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.0.tgz", - "integrity": "sha512-cEJ2ebtV1v/5Ilb55E05J6F5SrHKQWzUttIhR5Mkayyo+yvPslcpByuFC3D+J7X1ebziTOBpWuMpUdjLfh3SMQ==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.21.tgz", + "integrity": "sha512-qFV60pwpKVOdmX67wqQzgtSrUGWX9Cibnp1CXyqZ9Mmt8UyYGvmGu7p6PMbTyX7vdpVUvWVRf8DzrW2//wmVHg==", "cpu": [ "x64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "linux" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.0.tgz", - "integrity": "sha512-ecQOOmzEssz+m0pR4xDYCGuvn3E/l0nQ3tk5jp1NA1lsAy4bMV0YbYCHjptYvWL/UjhIerIp3IlCJ8x5DodSog==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.21.tgz", + "integrity": "sha512-DJJe9k6gXR/15ZZVLv1SKhXkFst8lYCeZRNHH99SlBodvu4slhh/MKQ6YCixINRhCwliHrpXPym8/5fOq8b7Ig==", "cpu": [ "arm64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.0.tgz", - "integrity": "sha512-gz81seZkRn3zMnVOc7L5k6F4vQC82gIxmHiL+GedK+A37XI/X26AASU3zxvORnqQbwQYXQ+AEVckxBmFlz3v2g==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.21.tgz", + "integrity": "sha512-TqEXuy6wedId7bMwLIr9byds+mKsaXVHctTN88R1UIBPwJA92Pdk0uxDgip0pEFzHB/ugU27g6d8cwUH3h2eIw==", "cpu": [ "ia32" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">=10" } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.0.tgz", - "integrity": "sha512-b5Fd1xEOw9uqBpj2lqsaR4Iq9UhiL84hNDcEsi6DQA7Y1l85waQAslTbS0E4/pJ1PISAs0jW0zIGLco1eaWBOg==", + "version": "1.11.21", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.21.tgz", + "integrity": "sha512-BT9BNNbMxdpUM1PPAkYtviaV0A8QcXttjs2MDtOeSqqvSJaPtyM+Fof2/+xSwQDmDEFzbGCcn75M5+xy3lGqpA==", "cpu": [ "x64" ], "dev": true, + "license": "Apache-2.0 AND MIT", "optional": true, "os": [ "win32" ], + "peer": true, "engines": { "node": ">=10" } @@ -3144,13 +3354,17 @@ "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", - "dev": true + "dev": true, + "license": "Apache-2.0", + "peer": true }, "node_modules/@swc/types": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.12.tgz", - "integrity": "sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==", + "version": "0.1.21", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.21.tgz", + "integrity": "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==", "dev": true, + "license": "Apache-2.0", + "peer": true, "dependencies": { "@swc/counter": "^0.1.3" } @@ -3344,13 +3558,6 @@ "deprecated": "Use your platform's native atob() and btoa() methods instead", "dev": true }, - "node_modules/abortcontroller-polyfill": { - "version": "1.7.5", - "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz", - "integrity": "sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==", - "dev": true, - "peer": true - }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", @@ -3648,10 +3855,11 @@ "dev": true }, "node_modules/base-x": { - "version": "3.0.10", - "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.10.tgz", - "integrity": "sha512-7d0s06rR9rYaIWHkpfLIFICM/tkSVdoPC9qYAQRpxn9DdKNWNsKC0uk++akckyLq16Tx2WIinnZ6WRriAt6njQ==", + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.11.tgz", + "integrity": "sha512-xz7wQ8xDhdyP7tQxwdteLYeFfS68tSMNCZ/Y37WJ4bhGfKPpqEIlmIyueQHqOyoPhE6xNUqjzRr8ra0eF9VRvA==", "dev": true, + "license": "MIT", "peer": true, "dependencies": { "safe-buffer": "^5.0.1" @@ -3924,6 +4132,7 @@ "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.0" } @@ -4018,6 +4227,7 @@ "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", "dev": true, + "license": "MIT", "peer": true, "engines": { "node": ">=0.8" @@ -4367,6 +4577,7 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "dev": true, + "license": "Apache-2.0", "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -4500,11 +4711,35 @@ } }, "node_modules/dotenv-expand": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", - "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==", + "version": "11.0.7", + "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz", + "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==", "dev": true, - "peer": true + "license": "BSD-2-Clause", + "peer": true, + "dependencies": { + "dotenv": "^16.4.5" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, + "node_modules/dotenv-expand/node_modules/dotenv": { + "version": "16.5.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz", + "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==", + "dev": true, + "license": "BSD-2-Clause", + "peer": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } }, "node_modules/electron-to-chromium": { "version": "1.4.832", @@ -6400,6 +6635,8 @@ "integrity": "sha512-9bMdFfc80S+vSldBmG3HOuLVHnxRdNTlpzR6QDnzqCQtCzGUEAGTzBKYMeIM+I/sU4oZfgbcbS7X7F65/z/oxQ==", "dev": true, "hasInstallScript": true, + "license": "MIT", + "peer": true, "dependencies": { "msgpackr": "^1.9.5", "node-addon-api": "^6.1.0", @@ -6423,7 +6660,9 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz", "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==", - "dev": true + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/locate-path": { "version": "5.0.0", @@ -6694,10 +6933,12 @@ "dev": true }, "node_modules/msgpackr": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.0.tgz", - "integrity": "sha512-I8qXuuALqJe5laEBYoFykChhSXLikZmUhccjGsPuSJ/7uPip2TJ7lwdIQwWSAi0jGZDXv4WOP8Qg65QZRuXxXw==", + "version": "1.11.2", + "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.2.tgz", + "integrity": "sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==", "dev": true, + "license": "MIT", + "peer": true, "optionalDependencies": { "msgpackr-extract": "^3.0.2" } @@ -6708,7 +6949,9 @@ "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==", "dev": true, "hasInstallScript": true, + "license": "MIT", "optional": true, + "peer": true, "dependencies": { "node-gyp-build-optional-packages": "5.2.2" }, @@ -6729,7 +6972,9 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", "dev": true, + "license": "Apache-2.0", "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -6739,7 +6984,9 @@ "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz", "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==", "dev": true, + "license": "MIT", "optional": true, + "peer": true, "dependencies": { "detect-libc": "^2.0.1" }, @@ -6820,7 +7067,9 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "dev": true + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/node-fetch": { "version": "2.7.0", @@ -6869,6 +7118,8 @@ "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz", "integrity": "sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==", "dev": true, + "license": "MIT", + "peer": true, "dependencies": { "detect-libc": "^2.0.1" }, @@ -6883,6 +7134,8 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", "dev": true, + "license": "Apache-2.0", + "peer": true, "engines": { "node": ">=8" } @@ -6939,7 +7192,8 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz", "integrity": "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==", - "dev": true + "dev": true, + "license": "MIT" }, "node_modules/nwsapi": { "version": "2.2.12", @@ -7011,10 +7265,12 @@ } }, "node_modules/ordered-binary": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.5.1.tgz", - "integrity": "sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==", - "dev": true + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.5.3.tgz", + "integrity": "sha512-oGFr3T+pYdTGJ+YFEILMpS3es+GiIbs9h/XQrclBXUtd44ey7XwfsMzM31f64I1SQOawDoDr/D823kNCADI8TA==", + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/os-name": { "version": "3.1.0", @@ -8602,6 +8858,7 @@ "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz", "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==", "dev": true, + "license": "MIT", "engines": { "node": ">= 4" } @@ -8664,7 +8921,9 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz", "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==", - "dev": true + "dev": true, + "license": "MIT", + "peer": true }, "node_modules/webidl-conversions": { "version": "7.0.0", diff --git a/package.json b/package.json index 83c8373c..6d4d1b88 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,13 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^2.1.1", "@mate-academy/stylelint-config": "latest", - "@parcel/transformer-sass": "^2.12.0", + "@parcel/transformer-sass": "^2.14.4", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "prettier": "^3.3.2", diff --git a/src/images/about/about-us.png b/src/images/about/about-us.png new file mode 100644 index 00000000..641784bc Binary files /dev/null and b/src/images/about/about-us.png differ diff --git a/src/images/about/man-dk.png b/src/images/about/man-dk.png new file mode 100644 index 00000000..b19413f4 Binary files /dev/null and b/src/images/about/man-dk.png differ diff --git a/src/images/about/man-mb.png b/src/images/about/man-mb.png new file mode 100644 index 00000000..c8f5c3e4 Binary files /dev/null and b/src/images/about/man-mb.png differ diff --git a/src/images/about/man-tb.png b/src/images/about/man-tb.png new file mode 100644 index 00000000..0ddbddc8 Binary files /dev/null and b/src/images/about/man-tb.png differ diff --git a/src/images/benefits/comp.svg b/src/images/benefits/comp.svg new file mode 100644 index 00000000..43b518d2 --- /dev/null +++ b/src/images/benefits/comp.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/benefits/share.svg b/src/images/benefits/share.svg new file mode 100644 index 00000000..45fd1e34 --- /dev/null +++ b/src/images/benefits/share.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/benefits/vr.svg b/src/images/benefits/vr.svg new file mode 100644 index 00000000..6927580a --- /dev/null +++ b/src/images/benefits/vr.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/buy-mod/kat-dk.png b/src/images/buy-mod/kat-dk.png new file mode 100644 index 00000000..97b630f5 Binary files /dev/null and b/src/images/buy-mod/kat-dk.png differ diff --git a/src/images/buy-mod/kat-sm.png b/src/images/buy-mod/kat-sm.png new file mode 100644 index 00000000..c1aa1408 Binary files /dev/null and b/src/images/buy-mod/kat-sm.png differ diff --git a/src/images/buy-mod/kat-tb.png b/src/images/buy-mod/kat-tb.png new file mode 100644 index 00000000..96608df5 Binary files /dev/null and b/src/images/buy-mod/kat-tb.png differ diff --git a/src/images/gaming/education.svg b/src/images/gaming/education.svg new file mode 100644 index 00000000..ebd73b9d --- /dev/null +++ b/src/images/gaming/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/gaming/estate.svg b/src/images/gaming/estate.svg new file mode 100644 index 00000000..89be44c1 --- /dev/null +++ b/src/images/gaming/estate.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/gaming/fitnes.svg b/src/images/gaming/fitnes.svg new file mode 100644 index 00000000..b84079b4 --- /dev/null +++ b/src/images/gaming/fitnes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/gaming/network.svg b/src/images/gaming/network.svg new file mode 100644 index 00000000..8d37db9c --- /dev/null +++ b/src/images/gaming/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/header/first-dk.png b/src/images/header/first-dk.png new file mode 100644 index 00000000..3c34c0d3 Binary files /dev/null and b/src/images/header/first-dk.png differ diff --git a/src/images/header/first-mb.png b/src/images/header/first-mb.png new file mode 100644 index 00000000..92b7cbba Binary files /dev/null and b/src/images/header/first-mb.png differ diff --git a/src/images/header/first-tb.png b/src/images/header/first-tb.png new file mode 100644 index 00000000..50b4dd51 Binary files /dev/null and b/src/images/header/first-tb.png differ diff --git a/src/images/header/first.png b/src/images/header/first.png new file mode 100644 index 00000000..c3ade846 Binary files /dev/null and b/src/images/header/first.png differ diff --git a/src/images/icons/back.svg b/src/images/icons/back.svg new file mode 100644 index 00000000..6d4ea073 --- /dev/null +++ b/src/images/icons/back.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/btn-play-hover.svg b/src/images/icons/btn-play-hover.svg new file mode 100644 index 00000000..9b21cdf6 --- /dev/null +++ b/src/images/icons/btn-play-hover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/btn-play.svg b/src/images/icons/btn-play.svg new file mode 100644 index 00000000..3220562e --- /dev/null +++ b/src/images/icons/btn-play.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icons/close-mb.svg b/src/images/icons/close-mb.svg new file mode 100644 index 00000000..596131ca --- /dev/null +++ b/src/images/icons/close-mb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 00000000..1e31cd1d --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 00000000..56624e30 --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/go-up.svg b/src/images/icons/go-up.svg new file mode 100644 index 00000000..89b022d2 --- /dev/null +++ b/src/images/icons/go-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/logo-mb.svg b/src/images/icons/logo-mb.svg new file mode 100644 index 00000000..fbb83e34 --- /dev/null +++ b/src/images/icons/logo-mb.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/logo-tb.svg b/src/images/icons/logo-tb.svg new file mode 100644 index 00000000..3f165d69 --- /dev/null +++ b/src/images/icons/logo-tb.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/icons/logo-title.svg b/src/images/icons/logo-title.svg new file mode 100644 index 00000000..61cb0d54 --- /dev/null +++ b/src/images/icons/logo-title.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 00000000..105f9e7f --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/menu.svg b/src/images/icons/menu.svg new file mode 100644 index 00000000..31499720 --- /dev/null +++ b/src/images/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/reddit.svg b/src/images/icons/reddit.svg new file mode 100644 index 00000000..a0ba9b0b --- /dev/null +++ b/src/images/icons/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 00000000..0318bbf1 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/visa.svg b/src/images/icons/visa.svg new file mode 100644 index 00000000..66975d2e --- /dev/null +++ b/src/images/icons/visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/icons/youtube.svg b/src/images/icons/youtube.svg new file mode 100644 index 00000000..0636fcb9 --- /dev/null +++ b/src/images/icons/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/slider/img1.png b/src/images/slider/img1.png new file mode 100644 index 00000000..ef8c837c Binary files /dev/null and b/src/images/slider/img1.png differ diff --git a/src/images/slider/img2-mb.png b/src/images/slider/img2-mb.png new file mode 100644 index 00000000..c3337a04 Binary files /dev/null and b/src/images/slider/img2-mb.png differ diff --git a/src/images/slider/img2-tb.png b/src/images/slider/img2-tb.png new file mode 100644 index 00000000..50b4dd51 Binary files /dev/null and b/src/images/slider/img2-tb.png differ diff --git a/src/images/slider/img2.png b/src/images/slider/img2.png new file mode 100644 index 00000000..3c34c0d3 Binary files /dev/null and b/src/images/slider/img2.png differ diff --git a/src/images/slider/img3.png b/src/images/slider/img3.png new file mode 100644 index 00000000..6deb8379 Binary files /dev/null and b/src/images/slider/img3.png differ diff --git a/src/images/tech/close-bar-hove.svg b/src/images/tech/close-bar-hove.svg new file mode 100644 index 00000000..f7faae22 --- /dev/null +++ b/src/images/tech/close-bar-hove.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/close-bar.svg b/src/images/tech/close-bar.svg new file mode 100644 index 00000000..f3e455cf --- /dev/null +++ b/src/images/tech/close-bar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/tech/hove-bar-mb.svg b/src/images/tech/hove-bar-mb.svg new file mode 100644 index 00000000..84547533 --- /dev/null +++ b/src/images/tech/hove-bar-mb.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech/hove-bar.svg b/src/images/tech/hove-bar.svg new file mode 100644 index 00000000..0f4215aa --- /dev/null +++ b/src/images/tech/hove-bar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech/loco-dk-2.png b/src/images/tech/loco-dk-2.png new file mode 100644 index 00000000..8ce3ad9a Binary files /dev/null and b/src/images/tech/loco-dk-2.png differ diff --git a/src/images/tech/loco-dk.png b/src/images/tech/loco-dk.png new file mode 100644 index 00000000..66f34155 Binary files /dev/null and b/src/images/tech/loco-dk.png differ diff --git a/src/images/tech/loco-mb.png b/src/images/tech/loco-mb.png new file mode 100644 index 00000000..5e0b5e70 Binary files /dev/null and b/src/images/tech/loco-mb.png differ diff --git a/src/images/tech/loco-sm.png b/src/images/tech/loco-sm.png new file mode 100644 index 00000000..54df7614 Binary files /dev/null and b/src/images/tech/loco-sm.png differ diff --git a/src/images/tech/loco-tb.png b/src/images/tech/loco-tb.png new file mode 100644 index 00000000..ef8c837c Binary files /dev/null and b/src/images/tech/loco-tb.png differ diff --git a/src/images/tech/loko-dk.png b/src/images/tech/loko-dk.png new file mode 100644 index 00000000..1fcfa78e Binary files /dev/null and b/src/images/tech/loko-dk.png differ diff --git a/src/images/tech/open-bar-tb.svg b/src/images/tech/open-bar-tb.svg new file mode 100644 index 00000000..9c4a3f56 --- /dev/null +++ b/src/images/tech/open-bar-tb.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/tech/open-bar.svg b/src/images/tech/open-bar.svg new file mode 100644 index 00000000..5f37cde5 --- /dev/null +++ b/src/images/tech/open-bar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83e..3a758b5b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,2089 @@ - + - Title + KatVR + + + + + + + - -

Hello Mate Academy

- + +
+
+
+
+ + +
+ + +
+
    +
  • + English +
    • +
  • + Arabic +
    • +
  • + Chinese (Simplified) +
    • +
  • + Chinese (Traditional) +
    • +
  • + French +
    • +
  • + German +
    • +
  • + Italian +
    • +
  • + Polish +
    • +
  • + Russian +
    • +
  • + Ukrainian +
    • +
+
+
+
+ +
+ + + +
+ + + Menu + +
+ +
+
+
+
+
+ + + + KAT + +
+ +
+ + + KAT locos + +
+ +
+ + + KAT loco + +
+
+
+ + + + + KAT + +
+ +
+

+ THE NEW START OF +
+ VR LOCOMOTION +

+ +
+

+ Discover the most comprehensive VR Locomotion system, and unlock + infinite motion in any games on any platforms! +

+ +

1200$

+ + +
+
+
+ +
+
+ + +
+ + + More + + +
+
+ + +
+
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+

+ MORE THAN + GAMING! +

+ +

+ This also made for people who are interested in... +

+
+ +
+
+ Education +

EDUCATION

+

+ Create aducational simulations, trainings and much more with + unlimited virtual space and minimum physical space +

+
+ +
+ Real estate +

REAL ESTATE

+

+ Desighn architectural projects in a deeply realistic + environment allowing visitors to freely walk around, and feel + their vibe +

+
+ +
+ Fitnes +

FITNESS

+

+ Combine business with pleasure, and discover countless ways to + stay fit while playing your favorite VR Games! +

+
+ +
+ Network +

SOCIAL INTERACTIONS

+

+ Hang out with your friends in the virtual world when you can't + meet space requirements +

+
+
+
+
+
+ +
+
+
+

+ ABOUT + PRODUCT +

+ +
+
+ + / + +
+ +
+ + + + + +
+ +
+
+
+ + + + Kate VR + +
+ +
+ + + KAT locos + +
+ +
+ + + KAT loco + +
+ +
+ + + + Kate VR + +
+ +
+ + + KAT loco + +
+
+
+ +
+
+ + +
+
+
+
+ +

+ KAT loco is a foot-based VR locomotion system that gives complete + physical control over lower-body actions, allowing you to freely + walk, run, and carry out just any other movement in virtual + reality. +

+ + +
+ +
+
+

Hello,

+ +

+ NICE TO MEET + YOU! +

+ +

+ KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and solutions. + Founded in 2013, we have quickly grown to become one of the + world's leading professional suppliers of VR games' & + simulations' equipment +

+
+ + + About-us + +
+
+
+ +
+
+
+

+ TECH + SPECS +

+ +
+
+ + + + + Kate VR loco + + +
+
+
+
+
+
+

+ Weight: 35g/1.23oz each +
+ Dimension: 50mm/1.97in +
+ 24mm/0.94in +
+ Light: LED lights +
+

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

+ Type: Lthium-lon polymer batteries +
+ Capacity: 370mAh +
+ Battery life: 10h of continuous use 150 hours on stand + by +
+ Charging: Fast charging - 1 hour +
+ Charging voltage and current: 5V = 0.5A +
+

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

+ Wireless: Bluetooth 4.2 +
+ Signal range: 5m +
+ Receiver: USB 2.0 and above +
+

+
+
+
+
+ +
+

SENSOR

+ +

+ Weight: 35g/1.23oz each +
+ Dimension: 50mm/1.97in +
+ 24mm/0.94in +
+ Light: LED lights +
+

+
+ +
+

BATTERRIES

+ +

+ Type: Lthium-lon polymer batteries +
+ Capacity: 370mAh +
+ Battery life: 10h of continuous use 150 hours on stand by +
+ Charging: Fast charging - 1 hour +
+ Charging voltage and current: 5V = 0.5A +
+

+
+ +
+

CONNECTION

+ +

+ Wireless: Bluetooth 4.2 +
+ Signal range: 5m +
+ Receiver: USB 2.0 and above +
+

+
+
+
+
+
+ +
+
+
+
+

+ WHY + KAT LOCO? +

+
+ +
+
+ Compatible +

UNIVERSALLY COMPATIBLE

+

+ KAT Loco offers universal compatibility across all major VR + headsets and platforms allowing you to play any VR game with + support for Free Locomotion +

+
+ +
+ Vr +

VR/PC CONTROL PANEL

+

+ Our Multifunctional Software allows for quick access to KAT + Loco's control panel both from a computer desktop, and + directly from your VR headset. +

+
+ +
+ Share +

WIRELESS SENSORS

+

+ What makes it even more advanced, KAT Loco is entirely + wireless, and comes with a complete system of algorithms, + super durable batteries and more! +

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

Have any questions?

+ +

+ GET IN + TOUCH +

+ +

+ Our manager will reply you within 15 minutes +

+ +
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+ +

+ Our manager will reply you within 15 minutes +

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + + + + + +
+
+
+
+
+
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7..56e2841b 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,31 @@ 'use strict'; +import { setupDropdownToggle } from './modules/dropdownToggle.js'; +import { setupLangSelector } from './modules/langSelector.js'; +import { setupMenu } from './modules/menu.js'; +import { setupFaqToggle } from './modules/faqToggle.js'; +import { setupFaqMenu } from './modules/faqMenu.js'; +import { setupHelpToggle } from './modules/helpToggle.js'; +import { setupHeaderSwiper } from './modules/headerSwiper.js'; +import { setupAboutSwiper } from './modules/aboutSwiper.js'; +import { setupTechToggle } from './modules/techToggle.js'; +import { setupForm } from './modules/form.js'; +import { setupBuyToggle } from './modules/buyToggle.js'; +import { setupQuantitySelect } from './modules/quantitySelect.js'; +import { setupFormBuy } from './modules/formBuy.js'; + + +document.addEventListener('DOMContentLoaded', () => { + setupDropdownToggle(); + setupLangSelector(); + setupMenu(); + setupFaqToggle(); + setupFaqMenu(); + setupHelpToggle(); + setupHeaderSwiper(); + setupAboutSwiper(); + setupTechToggle(); + setupForm(); + setupBuyToggle(); + setupQuantitySelect(); + setupFormBuy(); +}); diff --git a/src/scripts/modules/aboutSwiper.js b/src/scripts/modules/aboutSwiper.js new file mode 100644 index 00000000..6fd5e567 --- /dev/null +++ b/src/scripts/modules/aboutSwiper.js @@ -0,0 +1,60 @@ +export const setupAboutSwiper = () => { + const TABLET_MIN_WIDTH = 1280; + let aboutSwiper; + + const initSwiper = () => { + aboutSwiper = new Swiper('.about__swiper', { + loop: false, + grabCursor: true, + pagination: { + el: window.innerWidth < TABLET_MIN_WIDTH ? '.about__bullets' : '.about__fraction', + type: window.innerWidth < TABLET_MIN_WIDTH ? 'bullets' : 'fraction', + clickable: true, + }, + scrollbar: { + el: '.about__scrollbar', + draggable: true, + }, + spaceBetween: 10, + }); + + const prevBtn = document.querySelector('.about__prev-btn'); + const nextBtn = document.querySelector('.about__next-btn'); + + const updateAboutButtons = () => { + prevBtn.disabled = aboutSwiper.isBeginning; + nextBtn.disabled = aboutSwiper.isEnd; + }; + + prevBtn.addEventListener('click', () => { + aboutSwiper.slidePrev(); + }); + + nextBtn.addEventListener('click', () => { + aboutSwiper.slideNext(); + }); + + aboutSwiper.on('slideChange', updateAboutButtons); + aboutSwiper.on('scrollbarDragEnd', updateAboutButtons); + aboutSwiper.on('scrollbarDragMove', updateAboutButtons); + updateAboutButtons(); + }; + + const updateSwiperOnResize = () => { + const isSmallScreen = window.innerWidth < TABLET_MIN_WIDTH; + + if (isSmallScreen && !aboutSwiper.pagination.bullets.length) { + aboutSwiper.destroy(); + initSwiper(); + } else if (!isSmallScreen && aboutSwiper.pagination.bullets.length) { + aboutSwiper.destroy(); + initSwiper(); + } + }; + + initSwiper(); + + window.addEventListener('resize', () => { + updateSwiperOnResize(); + }); +} diff --git a/src/scripts/modules/buyToggle.js b/src/scripts/modules/buyToggle.js new file mode 100644 index 00000000..f5f3b98e --- /dev/null +++ b/src/scripts/modules/buyToggle.js @@ -0,0 +1,113 @@ +export const setupBuyToggle = () => { + const buy = document.querySelector('.buy-module'); + const firstHelpList = buy.querySelector('.buy-module__support'); + const helpServiceBtn = buy.querySelectorAll('.buy-module__service-btn'); + const closeHelpBtn = document.querySelector('.buy-module__close'); + const openBuyBtns = document.querySelectorAll('.buy-btn'); + const orders = document.querySelectorAll('.buy-module__order'); + const orderBars = document.querySelectorAll('.buy-module__order-bar'); + const steps = document.querySelectorAll('.buy-module__step'); + const nextBtn = document.querySelector('.buy-module__btn'); + const frm = document.forms['contact__form-buy']; + + const homeButton = document.querySelector(".complite__button"); + const payButton = document.querySelector(".pay-order__button"); + const stepPay = document.querySelector(".buy-module__step--pay"); + const stepComplete = document.querySelector(".buy-module__step--complete"); + + let currentStep = 0; + + const updateUI = () => { + orders.forEach((order, index) => { + order.classList.toggle('buy-module__order--active', index === currentStep); + }); + + orderBars.forEach((orderBar, index) => { + orderBar.classList.toggle('buy-module__order-bar--active', index === currentStep); + }); + + steps.forEach((step, index) => { + step.classList.toggle('active', index === currentStep); + }); + }; + + const validateForm = () => { + const firstname = frm['firstname']; + const lastname = frm['lastname']; + const emailBuy = frm['email-buy']; + const phoneBuy = frm['phone-buy']; + const shippingAdress = frm['shipping-adress']; + const shippingAdress2 = frm['shipping-adress-2']; + + let err = false; + + if (!firstname.value.trim()) { + firstnameField.setError(firstnameField.msg); + err = true; + } + + if (!lastname.value.trim()) { + lastnameField.setError(lastnameField.msg); + err = true; + } + + if (!emailBuy.value.trim()) { + emailBuyField.setError(emailBuyField.msg); + err = true; + } + + if (!phoneBuy.value.trim()) { + phoneBuyField.setError(phoneBuyField.msg); + err = true; + } + + if (!shippingAdress.value.trim()) { + shippingAdressField.setError(shippingAdressField.msg); + err = true; + } + + if (!shippingAdress2.value.trim()) { + shippingAdress2Field.setError(shippingAdress2Field.msg); + err = true; + } + + return !err; + }; + + const handleNextStep = () => { + if (currentStep === 0 && !validateForm()) { + return; + } + + if (currentStep < steps.length) { + currentStep++; + updateUI(); + } else { + window.location.href = './index.html'; + } + }; + + nextBtn.addEventListener('click', handleNextStep); + updateUI(); + + payButton.addEventListener("click", () => { + stepPay.classList.remove("active"); + stepComplete.classList.add("active"); + currentStep = steps.length - 1; + updateUI(); + }); + + homeButton.addEventListener("click", () => { + window.location.href = 'index.html'; + }); + + // top-bar + const closeHelp = () => buy?.classList.remove('page__aside--active'); + const openHelp = () => buy?.classList.add('page__aside--active'); + + openBuyBtns.forEach(btn => btn.addEventListener('click', openHelp)); + + closeHelpBtn.addEventListener('click', closeHelp); + + helpServiceBtn.forEach(btn => btn.addEventListener('click', closeHelp)); +}; diff --git a/src/scripts/modules/dropdownToggle.js b/src/scripts/modules/dropdownToggle.js new file mode 100644 index 00000000..98fec792 --- /dev/null +++ b/src/scripts/modules/dropdownToggle.js @@ -0,0 +1,44 @@ +export const setupDropdownToggle = () => { + const dropdown = document.querySelector('.dropdown'); + const dropdownTrigger = document.querySelector('.dropdown__trigger'); + const dropdownContent = document.querySelector('.dropdown__content'); + + if (!dropdown || !dropdownTrigger || !dropdownContent) return; + + const closeDropdown = () => { + dropdownTrigger.classList.remove('dropdown__trigger--active'); + dropdownContent.classList.remove('dropdown__content--active'); + } + + const toggleDropdown = () => { + const isActive = dropdownTrigger.classList.toggle('dropdown__trigger--active'); + dropdownContent.classList.toggle('dropdown__content--active', isActive); + } + + dropdownTrigger.addEventListener('click', toggleDropdown); + + document.addEventListener('click', (e) => { + const target = e.target.closest('.dropdown__item'); + + if (target) { + closeDropdown(); + } + }); + + document.addEventListener('click', (e) => { + if ( + dropdownTrigger.classList.contains('dropdown__trigger--active') + && !dropdown.contains(e.target) + ) { + closeDropdown(); + } + }); + + window.addEventListener('resize', () => { + if (window.innerWidth < 1280 && dropdownTrigger.classList.contains('dropdown__trigger--active')) { + closeDropdown(); + } + }) +} + + diff --git a/src/scripts/modules/faqMenu.js b/src/scripts/modules/faqMenu.js new file mode 100644 index 00000000..7acef766 --- /dev/null +++ b/src/scripts/modules/faqMenu.js @@ -0,0 +1,9 @@ +export const setupFaqMenu = () => { + const accordions = document.querySelectorAll('.faq__question'); + + accordions.forEach((accordion) => { + accordion.addEventListener('click', () => { + accordion.classList.toggle('accordion--open'); + }); + }); +} diff --git a/src/scripts/modules/faqToggle.js b/src/scripts/modules/faqToggle.js new file mode 100644 index 00000000..d491ba2e --- /dev/null +++ b/src/scripts/modules/faqToggle.js @@ -0,0 +1,64 @@ +export const setupFaqToggle = () => { + const faq = document.querySelector('.faq-module'); + const faqContent = document.querySelector('.faq-module__content'); + const closeFaqBtn = document.querySelector('.faq-module__close'); + const faqMoreBtn = document.querySelector('.faq-module__more'); + const openFaqBtns = document.querySelectorAll('.faq-module-btn'); + + const resetAccordion = () => { + [...accordions].forEach(accordion => { + console.log(accordion); + + if (accordion.classList.contains('accordion--open')) { + accordion.classList.remove('accordion--open'); + } + }) + } + + const openFaq = () => { + faq.classList.add('page__aside--active'); + } + + const closeFaq = () => { + faq.classList.remove('page__aside--active'); + resetAccordion(); + } + + [...openFaqBtns].forEach(btn => btn.addEventListener('click', openFaq)); + + closeFaqBtn.addEventListener('click', () => { + closeFaq(); + }) + + const articles = document.querySelector('.faq-module__questions'); + const accordions = document.querySelectorAll('.accordion'); + + faqMoreBtn.addEventListener('click', () => { + closeFaq(); + }); + + + articles.addEventListener('click', (e) => { + const article = e.target.closest('article'); + + if (!article.classList.contains('accordion--open')) { + article.classList.add('accordion--open'); + } else { + article.classList.remove('accordion--open'); + } + }); + + document.addEventListener('click', (e) => { + const en = e.target; + + if (!faqContent.contains(en)) { + if (faq.classList.contains('page__aside--active') && [...openFaqBtns].every(btn => btn !== en)) { + closeFaq(); + } + } + }); +} + + + + diff --git a/src/scripts/modules/form.js b/src/scripts/modules/form.js new file mode 100644 index 00000000..1eb031a2 --- /dev/null +++ b/src/scripts/modules/form.js @@ -0,0 +1,124 @@ +export const setupForm = () => { + const frm = document.forms['contact__form']; + + const name = frm['name']; + const nameLabel = document.querySelector('label[for="name"]'); + const nameLabelText = nameLabel.innerText; + + const email = frm['email']; + const emailLabel = document.querySelector('label[for="email"]'); + const emailLabelText = emailLabel.innerText; + + const phone = frm['phone']; + const phoneLabel = document.querySelector('label[for="phone"]'); + const phoneLabelText = phoneLabel.innerText; + + const message = frm['message']; + const messageLabel = document.querySelector('label[for="message"]'); + const messageLabelText = messageLabel.innerText; + + const submitBtn = document.querySelector('.form__button'); + + frm.addEventListener('submit', (e) => { + e.preventDefault(); + let err = false; + + if (!name.value.trim()) { + nameField.setError(nameField.msg); + err = true; + } + + if (!email.value.trim()) { + emailField.setError(emailField.msg); + err = true; + } + + if (!phone.value.trim()) { + phoneField.setError(phoneField.msg); + err = true; + } + + if (!message.value.trim()) { + messageField.setError(messageField.msg); + err = true; + } + + if (err) { + return; + } + + const elements = [...frm.elements]; + + elements.forEach((element) => { + element.disabled = true; + }); + + const btnText = submitBtn.firstElementChild; + const btnLoader = submitBtn.lastElementChild; + + const text = btnText.innerText; + + btnText.innerText = ''; + btnLoader.classList.add('form__loader--active'); + + wait(2000) + .then(() => { + frm.reset(); + }) + .finally(() => { + elements.forEach((element) => { + element.disabled = false; + }); + btnText.innerText = text; + btnLoader.classList.remove('form__loader--active'); + }); + }); + + function wait(delay) { + return new Promise((resolve) => setTimeout(resolve, delay)); + } + + class Field { + constructor(input, label, labelText, msg) { + this.input = input; + this.label = label; + this.labelText = labelText; + this.errMsg = ''; + this.msg = msg; + } + + setError(msg) { + this.label.innerText = msg; + this.label.style.color = '#860404'; + this.input.style.borderBottomColor = '#860404'; + } + + clearError() { + this.label.innerText = this.labelText; + this.label.style.color = ''; + this.input.style.borderBottomColor = ''; + } + } + + const nameField = new Field(name, nameLabel, nameLabelText, 'Please, fill your name*'); + const emailField = new Field(email, emailLabel, emailLabelText, 'Please, fill your email*'); + const phoneField = new Field(phone, phoneLabel, phoneLabelText, 'Please, fill your phone*'); + const messageField = new Field(message, messageLabel, messageLabelText, 'Please, fill your message*'); + + const createHandlers = (field) => { + field.input.addEventListener('blur', (e) => { + if (!e.target.value.trim()) { + field.setError(field.msg); + } + }); + + field.input.addEventListener('input', () => { + field.clearError(); + }); + }; + + createHandlers(nameField); + createHandlers(emailField); + createHandlers(phoneField); + createHandlers(messageField); +}; diff --git a/src/scripts/modules/formBuy.js b/src/scripts/modules/formBuy.js new file mode 100644 index 00000000..f5841df1 --- /dev/null +++ b/src/scripts/modules/formBuy.js @@ -0,0 +1,141 @@ +export const setupFormBuy = () => { + const frm = document.forms['contact__form-buy']; + + const firstname = frm['firstname']; + const firstnameLabel = document.querySelector('label[for="firstname"]'); + const firstnameLabelText = firstnameLabel.innerText; + + const lastname = frm['lastname']; + const lastnameLabel = document.querySelector('label[for="lastname"]'); + const lastnameLabelText = lastnameLabel.innerText; + + const emailBuy = frm['email-buy']; + const emailBuyLabel = document.querySelector('label[for="email-buy"]'); + const emailBuyLabelText = emailBuyLabel.innerText; + + const phoneBuy = frm['phone-buy']; + const phoneBuyLabel = document.querySelector('label[for="phone-buy"]'); + const phoneBuyLabelText = phoneBuyLabel.innerText; + + const shippingAdress = frm['shipping-adress']; + const shippingAdressLabel = document.querySelector('label[for="shipping-adress"]'); + const shippingAdressLabelText = shippingAdressLabel.innerText; + + const shippingAdress2 = frm['shipping-adress-2']; + const shippingAdress2Label = document.querySelector('label[for="shipping-adress-2"]'); + const shippingAdress2LabelText = shippingAdress2Label.innerText; + + + + const submitBtn = document.querySelector('.form-buy__button'); + + frm.addEventListener('submit', (e) => { + e.preventDefault(); + let err = false; + + if (!firstname.value.trim()) { + firstnameField.setError(firstnameField.msg); + err = true; + } + + if (!lastname.value.trim()) { + lastnameField.setError(lastnameField.msg); + err = true; + } + + if (!emailBuy.value.trim()) { + emailBuyField.setError(emailBuyField.msg); + err = true; + } + + if (!phoneBuy.value.trim()) { + phoneBuyField.setError(phoneBuyField.msg); + err = true; + } + + if (!shippingAdress.value.trim()) { + shippingAdressField.setError(shippingAdressField.msg); + err = true; + } + + if (!shippingAdress2.value.trim()) { + shippingAdress2Field.setError(shippingAdress2Field.msg); + err = true; + } + + if (err) { + return; + } + + const elements = [...frm.elements]; + + elements.forEach((element) => { + element.disabled = true; + }); + + const btnText = submitBtn.firstElementChild; + const btnLoader = submitBtn.lastElementChild; + + const text = btnText.innerText; + + btnText.innerText = ''; + btnLoader.classList.add('form-buy__loader--active'); + + + frm.reset(); + + elements.forEach((element) => { + element.disabled = false; + }); + btnText.innerText = text; + btnLoader.classList.remove('form-buy__loader--active'); + }); + + class Field { + constructor(input, label, labelText, msg) { + this.input = input; + this.label = label; + this.labelText = labelText; + this.errMsg = ''; + this.msg = msg; + } + + setError(msg) { + this.label.innerText = msg; + this.label.style.color = '#860404'; + this.input.style.borderBottomColor = '#860404'; + } + + clearError() { + this.label.innerText = this.labelText; + this.label.style.color = ''; + this.input.style.borderBottomColor = ''; + } + } + + const firstnameField = new Field(firstname, firstnameLabel, firstnameLabelText, 'Please, fill your first name*'); + const lastnameField = new Field(lastname, lastnameLabel, lastnameLabelText, 'Please, fill your last name*'); + const emailBuyField = new Field(emailBuy, emailBuyLabel, emailBuyLabelText, 'Please, fill your email*'); + const phoneBuyField = new Field(phoneBuy, phoneBuyLabel, phoneBuyLabelText, 'Please, fill your phone*'); + const shippingAdressField = new Field(shippingAdress, shippingAdressLabel, shippingAdressLabelText, 'Please, fill your shippingAdress*'); + const shippingAdress2Field = new Field(shippingAdress2, shippingAdress2Label, shippingAdress2LabelText, 'Please, fill your shippingAdress 2*'); + + const createHandlers = (field) => { + field.input.addEventListener('blur', (e) => { + if (!e.target.value.trim()) { + field.setError(field.msg); + } + }); + + field.input.addEventListener('input', () => { + field.clearError(); + }); + }; + + createHandlers(firstnameField); + createHandlers(lastnameField); + createHandlers(emailBuyField); + createHandlers(phoneBuyField); + createHandlers(shippingAdressField); + createHandlers(shippingAdress2Field); +}; diff --git a/src/scripts/modules/headerSwiper.js b/src/scripts/modules/headerSwiper.js new file mode 100644 index 00000000..83374953 --- /dev/null +++ b/src/scripts/modules/headerSwiper.js @@ -0,0 +1,66 @@ +export const setupHeaderSwiper = () => { + const TABLET_MIN_WIDTH = 1280; + let swiper; + + const initSwiper = () => { + swiper = new Swiper('.header__swiper', { + loop: false, + grabCursor: true, + + scrollbar: { + el: '.header__scrollbar', + draggable: true, + }, + autoplay: { + delay: 5000, + }, + speed: 600, + }); + + const prevBtn = document.querySelector('.header__prev-btn'); + const nextBtn = document.querySelector('.header__next-btn'); + + const updateHeaderButtons = () => { + prevBtn.disabled = swiper.isBeginning; + nextBtn.disabled = swiper.isEnd; + }; + + nextBtn.addEventListener('click', () => { + swiper.slideNext(); + }); + + prevBtn.addEventListener('click', () => { + swiper.slidePrev(); + }); + + swiper.on('slideChange', updateHeaderButtons); + swiper.on('scrollbarDragEnd', updateHeaderButtons); + swiper.on('scrollbarDragMove', updateHeaderButtons); + updateHeaderButtons(); + } + + const destroySwiper = () => { + if (swiper) { + swiper.destroy(true, true); + swiper = null; + } + }; + + const updateSwiperOnResize = () => { + const isSmallScreen = window.innerWidth < TABLET_MIN_WIDTH; + + if (isSmallScreen) { + destroySwiper(); + } else { + if (!swiper) { + initSwiper(); + } + } + }; + + updateSwiperOnResize(); + + window.addEventListener('resize', () => { + updateSwiperOnResize(); + }); +} diff --git a/src/scripts/modules/helpToggle.js b/src/scripts/modules/helpToggle.js new file mode 100644 index 00000000..58500477 --- /dev/null +++ b/src/scripts/modules/helpToggle.js @@ -0,0 +1,38 @@ +export const setupHelpToggle = () => { + const help = document.querySelector('.help-module'); + const helpContent = document.querySelector('.help-module__content'); + const firstHelpList = help.querySelector('.help-module__support'); + const helpServiceBtn = help.querySelectorAll('.help-module__service-btn'); + const closeHelpBtn = document.querySelector('.help-module__close'); + + const openHelpBtns = document.querySelectorAll('.help-module-btn'); + + const closeHelp = () => help?.classList.remove('page__aside--active'); + const openHelp = () => help?.classList.add('page__aside--active'); + + openHelpBtns.forEach(btn => btn.addEventListener('click', openHelp)); + + closeHelpBtn.addEventListener('click', closeHelp); + + firstHelpList.addEventListener('click', (e) => { + if (e.target.closest('a')) { + closeHelp(); + } + }); + + helpServiceBtn.forEach(btn => btn.addEventListener('click', closeHelp)); + + document.addEventListener('click', (e) => { + const eventOwner = e.target; + + if (help.classList.contains('page__aside--active')) { + + if ( + !helpContent.contains(eventOwner) + && [...openHelpBtns].every(btn => !btn.contains(eventOwner)) + ) { + closeHelp(); + } + } + }) +} diff --git a/src/scripts/modules/langSelector.js b/src/scripts/modules/langSelector.js new file mode 100644 index 00000000..38349db6 --- /dev/null +++ b/src/scripts/modules/langSelector.js @@ -0,0 +1,36 @@ +export const setupLangSelector = () => { + const triggerDropdown = document.querySelector('.dropdown__trigger'); + const dropdownLangList = document.querySelector('.dropdown__list'); + const langMenu = document.querySelector('.menu__lang'); + const langMenuList = langMenu.querySelector('.menu__list'); + + const updateLangSelector = (selectedLang) => { + const prevActiveHeader = dropdownLangList?.querySelector('.dropdown__item--active'); + const prevActiveMenu = langMenuList?.querySelector('.menu__item--active'); + + prevActiveHeader?.classList.remove('dropdown__item--active'); + prevActiveMenu?.classList.remove('menu__item--active'); + + const newActiveHeader = dropdownLangList?.querySelector(`.dropdown__item[data-lang="${selectedLang}"]`); + const newActiveMenu = langMenuList?.querySelector(`.menu__item[data-lang="${selectedLang}"]`); + + if (newActiveHeader) { + triggerDropdown.textContent = selectedLang; + newActiveHeader.classList.add('dropdown__item--active'); + } + + newActiveMenu?.classList.add('menu__item--active'); + } + + const handlLangListClick = (e) => { + const closestLi = e.target.closest('li'); + + if (closestLi) { + const selectedLang = closestLi.dataset.lang; + updateLangSelector(selectedLang); + } + } + + dropdownLangList?.addEventListener('click', handlLangListClick); + langMenuList?.addEventListener('click', handlLangListClick); +} diff --git a/src/scripts/modules/menu.js b/src/scripts/modules/menu.js new file mode 100644 index 00000000..20d176f0 --- /dev/null +++ b/src/scripts/modules/menu.js @@ -0,0 +1,72 @@ +export const setupMenu = () => { + const langButton = document.querySelector('.menu__btn--lang'); + const helpButton = document.querySelector('.menu__btn--help'); + const faqButton = document.querySelector('.menu__btn--faq'); + const langMenu = document.querySelector('.menu__lang'); + const helpMenu = document.querySelector('.menu__help'); + const faqMenu = document.querySelector('.menu__faq'); + const backButton = document.querySelector('.menu__back'); + const navMenu = document.querySelector('.menu__nav'); + const closeIcon = document.querySelector('.menu__link-close'); + + const resetMenu = () => { + langMenu.classList.add('hidden'); + helpMenu.classList.add('hidden'); + faqMenu.classList.add('hidden'); + navMenu.classList.remove('hidden'); + backButton.classList.add('hidden'); + closeIcon.classList.remove('hidden'); + closeIcon.style.order = '1'; + }; + + window.addEventListener('DOMContentLoaded', resetMenu); + + langButton.addEventListener('click', function () { + langMenu.classList.remove('hidden'); + navMenu.classList.add('hidden'); + closeIcon.classList.add('hidden'); + backButton.classList.remove('hidden'); + closeIcon.style.order = '2'; + }); + + helpButton.addEventListener('click', function () { + helpMenu.classList.remove('hidden'); + navMenu.classList.add('hidden'); + backButton.classList.remove('hidden'); + closeIcon.style.order = '2'; + }); + + faqButton.addEventListener('click', function () { + faqMenu.classList.remove('hidden'); + navMenu.classList.add('hidden'); + backButton.classList.remove('hidden'); + closeIcon.style.order = '2'; + }); + + helpMenu.addEventListener('click', (e) => { + if (e.target.closest('a')) { + resetMenu(); + } + }); + + faqMenu.addEventListener('click', (e) => { + if (e.target.closest('a')) { + resetMenu(); + } + }); + + const languageButtons = langMenu.querySelectorAll('.nav__link.menu__link'); + languageButtons.forEach(button => { + button.addEventListener('click', function () { + resetMenu(); + }); + }); + + backButton.addEventListener('click', function () { + resetMenu(); + }); + + closeIcon.addEventListener('click', function () { + resetMenu(); + }); +}; diff --git a/src/scripts/modules/quantitySelect.js b/src/scripts/modules/quantitySelect.js new file mode 100644 index 00000000..ec0701ba --- /dev/null +++ b/src/scripts/modules/quantitySelect.js @@ -0,0 +1,40 @@ +export const setupQuantitySelect = () => { + const orders = document.querySelectorAll('.buy-module__step'); + + const setupQuantity = (orderElement) => { + if (!orderElement) return; + + const price = orderElement.querySelector('.order__price-count'); + const qtySelect = orderElement.querySelector('.select-qty'); + const qtySelectValue = qtySelect?.querySelector('.select-qty__current-value'); + const qtySelectList = qtySelect?.querySelector('.select-qty__list-wrapper'); + const qtyItems = Array.from(qtySelectList?.querySelectorAll('.select-qty__item') || []); + + if (!price || !qtySelect || !qtySelectValue || !qtySelectList) return; + + qtySelect.addEventListener('click', () => { + const selectedValue = qtySelectValue.textContent.trim(); + qtyItems.forEach((item) => { + item.classList.toggle('hidden', item.textContent === selectedValue); + }); + qtySelectList.classList.toggle('select-qty__list-wrapper--visible'); + }); + + qtySelectList.addEventListener('click', (event) => { + const li = event.target.closest('.select-qty__item'); + if (!li || li.classList.contains('hidden')) return; + + const liText = li.textContent.trim(); + qtySelectValue.textContent = liText; + price.textContent = `${+liText * 1200}$`; + + const selectedLi = qtySelect.querySelector('.select-qty__item--selected'); + selectedLi?.classList.remove('select-qty__item--selected'); + li.classList.add('select-qty__item--selected'); + + qtySelectList.classList.remove('select-qty__list-wrapper--visible'); + }); + }; + + orders.forEach(setupQuantity); +}; diff --git a/src/scripts/modules/techToggle.js b/src/scripts/modules/techToggle.js new file mode 100644 index 00000000..12b5e3a6 --- /dev/null +++ b/src/scripts/modules/techToggle.js @@ -0,0 +1,19 @@ +export const setupTechToggle = () => { + const openBars = document.querySelectorAll('.open-bar'); + const openBtns = document.querySelectorAll('.open-bar__circle'); + + openBtns.forEach(openBtn => { + openBtn.addEventListener('click', (e) => { + e.target.closest('.open-bar').classList.toggle('open-bar--active'); + }); + }); + + + window.addEventListener('resize', () => { + if (window.innerWidth >= 1280) { + openBars.forEach(openEl => { + openEl.classList.remove('open-bar--active'); + }); + } + }); +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46..89607e2c 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,47 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +.body { + font-family: $main-ff; + font-size: 16px; + line-height: 150%; + font-weight: 400; + color: $c-text; +} + +.accent { + color: $c-contrast; + font-weight: 400; +} + +.text-second { + font-size: 14px; + color: $c-contrast; +} + +.text-third { + font-size: 12px; +} + +button, +a { + color: $c-white; + font-size: 16px; +} + +.container { + overflow: hidden; + + @include on-tablet { + overflow: unset; + } +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe..f044aad2 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/reset'; diff --git a/src/styles/blocks/_about.scss b/src/styles/blocks/_about.scss new file mode 100644 index 00000000..849e5ef6 --- /dev/null +++ b/src/styles/blocks/_about.scss @@ -0,0 +1,218 @@ +.about { + background: $c-bg-gradient; + + @include section-padding-block; + + @include on-tablet { + padding-block: 70px 50px; + } + + @include on-small-desktop { + padding-block: 100px; + } + + @include on-desktop { + padding-block: 160px; + } + + &__container { + display: flex; + flex-direction: column; + row-gap: 80px; + + @include on-tablet { + row-gap: 83px; + } + + @include on-small-desktop { + row-gap: 183px; + } + + @include on-desktop { + row-gap: 175px; + } + } + + &__top { + @include page-grid; + + row-gap: 20px; + + @include on-tablet { + row-gap: 0; + } + } + + &__wrapper-img { + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 0; + height: 270px; + grid-area: 1 / 1 / 4 / 4; + } + + @include on-small-desktop { + min-height: 290px; + grid-column: 3 / 8; + } + + @include on-desktop { + grid-column: 4 / 11; + } + } + + &__img { + display: block; + object-fit: cover; + object-position: left center; + width: 100%; + height: 100%; + } + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-area: 1 / 4 / 2 / 7; + margin-bottom: 20px; + } + + @include on-small-desktop { + grid-column: 9 / -1; + } + + @include on-desktop { + grid-column: 12 / -1; + } + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + grid-area: 2 / 4 / 3 / 7; + margin-bottom: 15px; + } + + @include on-small-desktop { + grid-column: 9 / -1; + } + + @include on-desktop { + grid-column: 12 / -1; + } + } + + &__play-btn { + grid-column: 1 / -1; + + @include on-tablet { + grid-area: 3 / 4 / 4 / 7; + } + + @include on-small-desktop { + grid-column: 9 / -1; + } + + @include on-desktop { + grid-column: 12 / -1; + } + } + + &__bottom { + @include page-grid; + + place-items: center; + } + + &__greeting { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 6; + } + + @include on-desktop { + grid-column: 2 / 8; + } + } + + &__wrapper-about { + display: none; + + @include on-tablet { + display: block; + width: 100%; + height: 100%; + + min-height: 256px; + grid-column: 5 / -1; + } + + @include on-small-desktop { + min-height: 342px; + grid-column: 7 / -1; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__subtitle { + margin-bottom: 11px; + } + + &__visual { + position: relative; + } + + &__navigation { + display: none; + + @include on-small-desktop { + display: block; + margin-top: 12px; + } + } + + & &__fraction { + display: none; + + @include on-small-desktop { + --swiper-pagination-fraction-color: #{$c-contrast}; + --swiper-pagination-top: 0; + --swiper-pagination-bottom: auto; + --swiper-pagination-left: 0; + + display: block; + transform: translate(calc(-100% - 20px)); + width: fit-content; + font-size: 14px; + line-height: 17px; + letter-spacing: -1px; + } + } + + & &__bullets { + --swiper-pagination-bottom: 0; + --swiper-pagination-color: #ababab; + --swiper-pagination-bullet-inactive-color: #484848; + --swiper-pagination-bullet-horizontal-gap: 3px; + --swiper-pagination-bullet-size: 4px; + --swiper-pagination-bullet-height: 4px; + + transform: translateY(20px); + font-size: 4px; + line-height: 1; + + @include on-small-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/_accordion.scss b/src/styles/blocks/_accordion.scss new file mode 100644 index 00000000..427a1c76 --- /dev/null +++ b/src/styles/blocks/_accordion.scss @@ -0,0 +1,66 @@ +.accordion { + width: 100%; + padding: 17px 26px 17px 30px; + border-radius: 4px; + border: 1px solid $c-contrast; + box-sizing: border-box; + cursor: pointer; + + @include hover(box-shadow, 0 0 5px $c-white); + + &__content { + display: grid; + grid-template-rows: 0fr; + } + + &__title { + font-size: 16px; + font-weight: 400; + line-height: 24px; + + position: relative; + + &::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%) rotate(-90deg); + + @include transition(transform); + + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 6px solid $c-contrast; + } + } + + &--open &__content { + grid-template-rows: 1fr; + } + + &--open &__title::after { + transform: translateY(-50%) rotate(0deg); + } + + &__content-wrapper { + overflow: hidden; + max-height: 0; + transition: max-height 1s ease; + } + + &__text { + margin-top: 18px; + margin-bottom: 20px; + } + + &__date { + color: $c-text-dark; + margin-bottom: 6px; + } +} + +.accordion--open .accordion__content-wrapper { + max-height: 1000px; +} diff --git a/src/styles/blocks/_article.scss b/src/styles/blocks/_article.scss new file mode 100644 index 00000000..a46749a6 --- /dev/null +++ b/src/styles/blocks/_article.scss @@ -0,0 +1,38 @@ +.article { + border-radius: 10px; + padding: 5px; + transition: + box-shadow 0.3s, + transform 0.3s; + + &:hover { + box-shadow: 0 0 10px $c-contrast; + } + + &__img { + display: none; + + @include on-tablet { + display: inline-block; + margin-bottom: 30px; + } + } + + &__title { + margin-bottom: 11px; + text-align: left; + + @include on-tablet { + text-align: center; + margin-bottom: 18px; + } + } + + &__subtitle { + text-align: left; + + @include on-tablet { + text-align: center; + } + } +} diff --git a/src/styles/blocks/_benefits.scss b/src/styles/blocks/_benefits.scss new file mode 100644 index 00000000..55b9063c --- /dev/null +++ b/src/styles/blocks/_benefits.scss @@ -0,0 +1,84 @@ +.benefits { + background: $c-bg-gradient; + + @include section-padding-block; + + &__content { + text-align: center; + display: flex; + flex-direction: column; + gap: 30px; + + @include on-small-desktop { + gap: 80px; + } + } + + &__title { + text-align: left; + + @include on-small-desktop { + text-align: center; + } + } + + &__text { + text-align: left; + + @include on-tablet { + text-align: center; + } + } + + &__articles { + @include page-grid; + + row-gap: 20px; + } + + &__article { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-small-desktop { + grid-column: span 4; + } + + @include on-desktop { + &:nth-child(1) { + grid-column: span 4; + } + + &:nth-child(2) { + grid-column: 7 / 11; + } + + &:nth-child(3) { + grid-column: 13 / -1; + } + } + } + + &__btn-buy { + width: 100%; + + @include on-tablet { + width: 60vw; + } + + @include on-small-desktop { + margin: 0 auto; + } + + @include on-desktop { + display: none; + } + } + + &__container { + overflow: unset; + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 00000000..2d15cf32 --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,51 @@ +.button { + width: 200px; + padding-block: 13px; + text-align: center; + background-color: $c-contrast; + border-radius: 4px; + + @include on-tablet { + display: block; + } + + &:hover { + @include hover(color, $c-contrast); + @include hover(background-color, $c-white); + @include hover(box-shadow, 0 0 15px $c-white); + } + + &:active { + background-color: $hover-bg-color; + } + + &:disabled { + background-color: $hover-bg-color; + color: $c-dark-grey; + box-shadow: none; + cursor: not-allowed; + } +} + +.more-btn { + position: relative; + cursor: pointer; + color: $c-contrast; + + @include hover(color, $c-white); + + &::after { + position: absolute; + bottom: -7px; + left: 50%; + transform: translate(-50%, 100%); + + content: ''; + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 5px solid $c-contrast; + } + + @include hover-after(border-top-color, $c-white); +} diff --git a/src/styles/blocks/_buy-module.scss b/src/styles/blocks/_buy-module.scss new file mode 100644 index 00000000..a9a73a38 --- /dev/null +++ b/src/styles/blocks/_buy-module.scss @@ -0,0 +1,192 @@ +.buy-module { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 100; + display: flex; + background: $c-bg-gradient; + overflow-y: auto; + + &__content { + width: 100%; + } + + &__visual { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / -1; + margin: 0 auto; + } + + @include on-small-desktop { + margin: 0; + grid-column: 1 / 6; + + display: flex; + justify-content: center; + align-items: flex-end; + height: 100%; + } + } + + &__close { + top: 18px; + right: 18px; + + @include on-desktop { + top: 26px; + right: 26px; + } + } + + &__logo-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding-block: 20px 33px; + + @include on-small-desktop { + margin-bottom: 102px; + } + + @include on-desktop { + margin-bottom: 220px; + } + } + + &__logo { + @include hover(transform, scale(1.1)); + } + + &__orders { + display: flex; + justify-content: space-between; + margin-bottom: 30px; + + @include on-small-desktop { + display: none; + } + } + + &__orders-bar { + display: none; + + @include on-small-desktop { + display: block; + display: flex; + justify-content: space-between; + gap: 192px; + } + } + + &__order { + width: 100%; + height: 33px; + text-align: center; + font-weight: 500; + color: $c-text-dark; + border-bottom: 1px solid $c-text-dark; + + &--active { + color: $c-contrast; + border-bottom: 1px solid $c-contrast; + } + } + + &__order-bar { + font-size: 14px; + + &--active { + color: $c-contrast; + position: relative; + + &::after { + content: ''; + position: absolute; + width: 4px; + height: 4px; + background-color: $c-contrast; + left: 50%; + bottom: -7px; + border-radius: 50%; + display: block; + } + } + } + + &__btn { + width: 100%; + margin-top: 40px; + } + + &__container { + @include on-tablet { + overflow: unset; + } + } +} + +.buy-module__step { + display: none; +} + +.buy-module__step.active { + display: flex; + flex-direction: column; + gap: 30px; + + @include on-tablet { + @include page-grid; + } +} + +.buy-module__step--pay.active { + @include page-grid; +} + +.order { + display: flex; + flex-direction: column; + gap: 30px; + + grid-column: 1 / 4; + + &__qty { + text-align: center; + } + + &__qty-price { + display: flex; + justify-content: space-evenly; + gap: 75px; + + @include on-tablet { + justify-content: space-between; + } + + &-title { + margin-bottom: 10px; + + @include on-tablet { + text-align: left; + } + } + } + + &__price { + text-align: center; + + &-count { + font-weight: 500; + color: $c-contrast; + + @include on-tablet { + font-size: 36px; + } + } + } +} diff --git a/src/styles/blocks/_complite.scss b/src/styles/blocks/_complite.scss new file mode 100644 index 00000000..22015bd6 --- /dev/null +++ b/src/styles/blocks/_complite.scss @@ -0,0 +1,42 @@ +.complite { + grid-column: 1 / -1; + flex-direction: column; + margin-top: 90px; + text-align: center; + + &__title { + text-transform: uppercase; + grid-column: 1 / -1; + + @include on-tablet { + font-size: 46px; + } + + @include on-small-desktop { + font-size: 46px; + grid-column: 2 / -2; + } + } + + &__subtitle { + color: $c-white; + grid-column: 1 / -1; + + @include on-small-desktop { + grid-column: 2 / -2; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-small-desktop { + width: 218px; + justify-self: center; + } + } +} diff --git a/src/styles/blocks/_contact.scss b/src/styles/blocks/_contact.scss new file mode 100644 index 00000000..246ca722 --- /dev/null +++ b/src/styles/blocks/_contact.scss @@ -0,0 +1,91 @@ +.contact { + background: $c-bg-black; + + @include section-padding-block; + + &__content { + display: flex; + flex-direction: column; + + @include on-tablet { + @include page-grid; + } + } + + &__info { + @include on-tablet { + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &__form { + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet { + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: 7 / -1; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__title { + margin-bottom: 30px; + } + + &__manager--in { + display: none; + margin: 50px 0 76px; + + @include on-tablet { + display: block; + } + } + + &__manager--out { + margin-top: 30px; + order: 1; + + @include on-tablet { + display: none; + } + } + + &__details { + display: none; + + @include on-tablet { + display: flex; + flex-direction: column; + } + } + + &__detail { + color: $c-text; + + &:hover { + @include hover(color, $c-white); + } + } + + &__container { + @include on-small-desktop { + overflow: unset; + } + } +} diff --git a/src/styles/blocks/_dropdown.scss b/src/styles/blocks/_dropdown.scss new file mode 100644 index 00000000..eb40178d --- /dev/null +++ b/src/styles/blocks/_dropdown.scss @@ -0,0 +1,54 @@ +.dropdown { + position: relative; + + &__trigger { + cursor: pointer; + color: $c-contrast; + + @include hover(color, $c-white); + + &::after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + transform: translate(calc(100% + 3px), -100%); + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 5px solid $c-contrast; + } + + @include hover-after(border-top-color, $c-white); + } + + &__content { + opacity: 0; + position: absolute; + z-index: 3; + transform: translateY(-25px); + border-radius: 4px; + background-color: $bg-menu; + box-shadow: 0 0 10px $c-contrast; + width: max-content; + pointer-events: none; + transition: + transform 0.3s ease, + opacity 0.3s ease; + + &--active { + pointer-events: auto; + transform: translateY(5px); + opacity: 1; + } + } + + &__item { + display: block; + padding: 5px 20px; + color: $c-white; + + @include hover(background-color, $bg-menu-link); + @include hover(color, $c-contrast); + } +} diff --git a/src/styles/blocks/_faq-module.scss b/src/styles/blocks/_faq-module.scss new file mode 100644 index 00000000..573ee1d7 --- /dev/null +++ b/src/styles/blocks/_faq-module.scss @@ -0,0 +1,83 @@ +.faq-module { + display: none; + + @include on-small-desktop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + overflow-y: auto; + z-index: 100; + display: grid; + place-items: center; + } + + &__container { + width: fit-content; + height: fit-content; + + margin-inline: 110px; + + @include page-grid; + } + + &__content { + position: relative; + grid-column: 2 / span 10; + padding-block: 60px 50px; + padding-top: 68px; + background-color: $bg-menu; + + @include page-grid; + + @include on-desktop { + grid-column: 3 / span 12; + padding-block: 70px 50px; + } + } + + &__wrapper { + grid-column: 2 / 12; + + @include on-desktop { + grid-column: 2 / 16; + } + } + + &__close { + position: absolute; + top: 18px; + right: 18px; + + @include on-desktop { + top: 26px; + right: 26px; + } + } + + &__title { + display: flex; + flex-direction: column; + margin-bottom: 50px; + + @include on-small-desktop { + margin-bottom: 64px; + } + } + + &__questions { + @include on-small-desktop { + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 50px; + } + } + + &__more { + grid-column: 1 / -1; + display: flex; + justify-content: center; + } +} diff --git a/src/styles/blocks/_faq.scss b/src/styles/blocks/_faq.scss new file mode 100644 index 00000000..247b8c0c --- /dev/null +++ b/src/styles/blocks/_faq.scss @@ -0,0 +1,98 @@ +.faq { + @include page-grid; + + background-color: #191536b3; + row-gap: 30px; + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__questions { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + gap: 13px; + + @include on-tablet { + gap: 18px; + margin-bottom: 50px; + } + } + + &__text { + margin-block: 18px 15px; + } + + &__more { + grid-column: 1 / -1; + + text-align: center; + + &-link { + position: relative; + color: $c-contrast; + + @include hover(color, $c-white); + + &::after { + content: ''; + border-top: 5px solid $c-contrast; + border-left: 4.5px solid #0000; + border-right: 4.5px solid #0000; + transition: border-top-color 0.3s; + display: block; + position: absolute; + bottom: -7px; + left: 50%; + transform: translate(-50%, 100%); + } + + @include hover-after(border-top-color, $c-white); + } + } +} + +.faq__question { + cursor: pointer; + padding: 18px 12px; + border: 1px solid $c-contrast; + border-radius: 4px; + + @include hover(box-shadow, 0 0 5px $c-white); + + @include on-tablet { + padding: 15px 30px; + } + + overflow: hidden; + max-height: 60px; + transition: max-height 0.3s ease; +} + +.faq__question.accordion--open { + max-height: 600px; +} + +.faq__question-title { + cursor: pointer; + font-weight: 500; + color: $c-contrast; +} + +.faq__text, +.faq__date { + display: none; +} + +.accordion--open .faq__text { + display: block; +} + +.accordion--open .faq__date { + display: block; +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 00000000..addcda2f --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,71 @@ +.footer { + background: $c-black; + + padding-block: 45px 50px; + + @include on-small-desktop { + padding-block: 40px; + } + + &__content { + @include page-grid; + + @include on-tablet { + display: flex; + justify-content: space-between; + } + } + + &__logo { + @include hover(transform, scale(1.1)); + } + + &__logo-img { + display: block; + margin-bottom: 15px; + grid-column: 1 / 2; + + @include on-tablet { + margin: 0; + } + } + + &__nav { + grid-area: 2 / 1 / 4 / 2; + } + + &__list { + display: flex; + flex-direction: column; + gap: 12px; + + @include on-tablet { + align-items: center; + flex-direction: row; + gap: 40px; + } + } + + &__details { + grid-area: 2 / 2 / 3 / 3; + + @include on-tablet { + display: none; + } + } + + &__detail { + color: $c-text; + + &:hover { + @include hover(color, $c-white); + } + } + + &__socials { + grid-area: 3 / 2 / 4 / 3; + display: flex; + align-items: center; + gap: 23px; + } +} diff --git a/src/styles/blocks/_form-buy.scss b/src/styles/blocks/_form-buy.scss new file mode 100644 index 00000000..88d7a135 --- /dev/null +++ b/src/styles/blocks/_form-buy.scss @@ -0,0 +1,103 @@ +.form-buy { + display: flex; + flex-direction: column; + gap: 30px; + + grid-column: 1 / -1; + + margin-bottom: 37px; + + @include on-tablet { + @include page-grid; + } + + @include on-small-desktop { + grid-template-columns: repeat(6, 1fr); + grid-column: 7 / -1; + grid-row: 1 / 3; + } + + @include on-desktop { + grid-column: 9 / -1; + grid-template-columns: repeat(8, 1fr); + } + + &__field { + display: flex; + flex-direction: column; + + @include on-tablet { + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__label { + font-size: 14px; + color: $c-text; + + @include transition(color); + } + + &__input, + &__textarea { + color: $c-white; + font-family: $main-ff; + padding-bottom: 6px; + background-color: transparent; + + outline: none; + border: none; + border-bottom: 1px solid $c-dark-grey; + font-size: 16px; + resize: none; + + @include transition(border-bottom); + + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } + + &:invalid { + border-bottom: 1px solid $c-error; + } + + &:focus { + border-bottom: 1px solid $c-contrast; + } + + &:disabled { + cursor: not-allowed; + } + } + + &__button { + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-small-desktop { + width: 199px; + height: 48px; + padding: 0; + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 4; + } + } +} + +.form-buy__field:focus-within .form-buy__label { + color: $c-contrast; +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 00000000..7921016e --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,110 @@ +.form { + &__field { + display: flex; + flex-direction: column; + } + + &__label { + font-size: 14px; + color: $c-text; + + @include transition(color); + } + + &__field:focus-within .form__label { + color: $c-contrast; + } + + &__input, + &__textarea { + color: $c-white; + font-family: $main-ff; + padding-bottom: 6px; + background-color: transparent; + + outline: none; + border: none; + border-bottom: 1px solid $c-dark-grey; + font-size: 16px; + resize: none; + + @include transition(border-bottom); + + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } + + &:invalid { + border-bottom: 1px solid $c-error; + } + + &:focus { + border-bottom: 1px solid $c-contrast; + } + + &:disabled { + cursor: not-allowed; + } + } + + &__button { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + + @include on-tablet { + width: 200px; + } + } + + &__bottom { + display: flex; + justify-content: space-between; + } + + &__loader { + display: none; + + height: 20px; + width: 20px; + + border: 3px solid $c-text-dark; + border-radius: 50%; + + border-left-color: $c-contrast; + animation: load 1s linear infinite; + + &--active { + display: block; + } + } + + &__up { + display: none; + + @include on-tablet { + cursor: pointer; + display: block; + border-radius: 50%; + + @include hover(box-shadow, 0 6px 8px $c-contrast); + } + + &-img { + display: block; + } + } +} + +@keyframes load { + 0% { + transform: rotateZ(0deg); + } + + 100% { + transform: rotateZ(360deg); + } +} diff --git a/src/styles/blocks/_gaming.scss b/src/styles/blocks/_gaming.scss new file mode 100644 index 00000000..a9de890d --- /dev/null +++ b/src/styles/blocks/_gaming.scss @@ -0,0 +1,51 @@ +.gaming { + background-color: $c-bg-black; + + @include section-padding-block; + + &__content { + text-align: center; + } + + &__wrapper-title { + margin-bottom: 30px; + + @include on-small-desktop { + margin-bottom: 83px; + } + + @include on-desktop { + margin-bottom: 70px; + } + } + + &__title { + margin-bottom: 16px; + } + + &__articles { + @include page-grid; + + row-gap: 20px; + + @include on-tablet { + row-gap: 40px; + } + } + + &__article { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__container { + overflow: unset; + } +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 00000000..85866a6f --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,194 @@ +.header { + background: $c-bg-gradient; + + @include on-tablet { + position: relative; + } + + @include on-desktop { + position: static; + } + + &__hero { + padding-bottom: 46px; + + @include on-tablet { + @include page-grid; + + padding-bottom: 62px; + } + + @include on-small-desktop { + position: relative; + } + } + + &__content { + z-index: 1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 7; + margin-bottom: 84px; + } + + @include on-small-desktop { + margin-bottom: 212px; + } + } + + &__visual { + @include on-tablet { + position: static; + grid-column: span 3; + } + + @include on-small-desktop { + grid-column: span 7; + } + + @include on-desktop { + grid-column: span 10; + } + + display: block; + width: calc(100% + 40px); + margin-left: -20px; + min-width: 320px; + + @include on-tablet { + position: absolute; + object-fit: contain; + object-position: bottom right; + width: 65vw; + height: 100%; + right: 0; + top: 0; + } + + @include on-desktop { + width: 1104px; + height: 595px; + object-fit: cover; + object-position: center; + } + } + + &__image { + display: block; + width: calc(100% + 40px); + + min-width: 320px; + height: auto; + + @include on-tablet { + position: absolute; + object-fit: contain; + object-position: bottom right; + width: 65vw; + height: 100%; + right: 0; + top: 0; + } + + @include on-desktop { + width: 1104px; + height: 595px; + object-fit: cover; + object-position: center; + } + } + + &__title { + margin-bottom: 17px; + } + + &__info { + @include on-small-desktop { + padding-left: 86px; + } + } + + &__text { + margin-bottom: 8px; + + @include on-tablet { + margin-bottom: 10px; + } + + @include on-small-desktop { + width: 336px; + margin-bottom: 10px; + } + + @include on-desktop { + width: 439px; + font-size: 20px; + } + } + + &__price { + text-align: center; + color: $c-white; + font-weight: 500; + font-size: 18px; + line-height: 120%; + margin-bottom: 25px; + + @include on-tablet { + text-align: left; + } + } + + &__bottom { + display: none; + + @include on-small-desktop { + display: flex; + justify-content: space-between; + grid-column: 1 / -1; + padding-bottom: 84px; + } + + @include on-desktop { + padding-bottom: 120px; + } + } + + &__help { + display: flex; + gap: 39px; + } + + &__faq-btn, + &__help-btn { + @include hover(color, $c-contrast); + } + + &__img-mb { + @include on-small-desktop { + display: none; + } + } + + &__swiper { + display: none !important; + + @include on-small-desktop { + display: block !important; + position: absolute; + right: 0; + height: 54vh; + min-height: 430px; + max-height: 700px; + width: 115%; + } + + @include on-desktop { + width: 125%; + } + } +} diff --git a/src/styles/blocks/_help-module.scss b/src/styles/blocks/_help-module.scss new file mode 100644 index 00000000..9c968e09 --- /dev/null +++ b/src/styles/blocks/_help-module.scss @@ -0,0 +1,135 @@ +.help-module { + display: none; + + @include on-small-desktop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: 100; + align-items: center; + display: flex; + } + + &__container { + width: 100%; + + @include page-grid; + } + + &__content { + grid-column: 2 / span 10; + background-color: $bg-menu; + padding-block: 74px; + + position: relative; + + @include on-desktop { + grid-column: 3 / span 12; + padding-block: 60px 82px; + } + } + + &__wrapper { + display: grid; + grid-template-columns: repeat(10, 1fr); + column-gap: 20px; + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + } + + &__close { + position: absolute; + top: 18px; + right: 18px; + + @include on-desktop { + top: 26px; + right: 26px; + } + } + + &__title { + grid-column: 2 / span 8; + margin-bottom: 64px; + + @include on-desktop { + grid-column: 2 / span 10; + } + } + + &__main { + grid-column: 2 / span 8; + margin-bottom: 20px; + + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 30px; + + @include on-desktop { + grid-column: 2 / span 10; + margin-bottom: 30px; + } + } + + &__text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + & a { + color: $c-contrast; + + @include hover(color, $c-white); + } + } + + &__service-btn { + color: $c-contrast; + + @include hover(color, $c-white); + } + + &__bottom { + grid-column: 2 / span 5; + display: grid; + grid-template-columns: repeat(5, 1fr); + column-gap: 20px; + } + + &__support { + display: flex; + flex-direction: column; + grid-column: span 3; + gap: 20px; + + & a { + color: $c-contrast; + + @include hover(color, $c-white); + } + } + + &__details { + display: flex; + flex-direction: column; + grid-column: span 2; + gap: 25px; + } + + &__detail { + color: $c-text; + + @include hover(color, $c-white); + } +} diff --git a/src/styles/blocks/_help.scss b/src/styles/blocks/_help.scss new file mode 100644 index 00000000..c1be6753 --- /dev/null +++ b/src/styles/blocks/_help.scss @@ -0,0 +1,61 @@ +.help { + @include page-grid; + + row-gap: 30px; + + &__title { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__text { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / -1; + } + + & a { + color: $c-contrast; + + @include hover(color, $c-white); + } + } + + &__support { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + gap: 20px; + + @include on-tablet { + grid-column: 1 / 3; + } + + & a { + color: $c-contrast; + + @include hover(color, $c-white); + } + } + + &__details { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + gap: 25px; + + @include on-tablet { + grid-column: 4 / -1; + } + } + + &__detail { + color: $c-text; + + @include hover(color, $c-white); + } +} diff --git a/src/styles/blocks/_icon.scss b/src/styles/blocks/_icon.scss new file mode 100644 index 00000000..3129defd --- /dev/null +++ b/src/styles/blocks/_icon.scss @@ -0,0 +1,41 @@ +.icon { + cursor: pointer; + display: block; + width: 20px; + height: 20px; + background-repeat: no-repeat; + background-size: contain; + background-position: 50%; + + @include hover(transform, scale(1.1)); + + &--back { + background-image: url('../images/icons/back.svg'); + } + + &--close { + background-image: url('../images/icons/close.svg'); + } + + &--close-mb { + width: 14px; + height: 14px; + background-image: url('../images/icons/close-mb.svg'); + } + + &--facebook { + background-image: url('../images/icons/facebook.svg'); + } + + &--twitter { + background-image: url('../images/icons/twitter.svg'); + } + + &--youtube { + background-image: url('../images/icons/youtube.svg'); + } + + &--reddit { + background-image: url('../images/icons/reddit.svg'); + } +} diff --git a/src/styles/blocks/_main.scss b/src/styles/blocks/_main.scss new file mode 100644 index 00000000..ffbe7130 --- /dev/null +++ b/src/styles/blocks/_main.scss @@ -0,0 +1,25 @@ +.main { + background: #050505; + + &__buy { + display: block; + position: sticky; + bottom: 0; + z-index: 1; + + @include on-small-desktop { + display: none; + } + } +} + +.buy { + padding-block: 30px; + background: linear-gradient(#00000036 0%, #04040496 23.44%, #050505 100%); + + &__wrapper { + display: flex; + justify-content: center; + align-items: center; + } +} diff --git a/src/styles/blocks/_media-player.scss b/src/styles/blocks/_media-player.scss new file mode 100644 index 00000000..c52c4833 --- /dev/null +++ b/src/styles/blocks/_media-player.scss @@ -0,0 +1,34 @@ +.media-player { + z-index: 100; + position: fixed; + top: 0; + + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100vh; + + &__content { + position: relative; + } + + &__video { + min-width: 300px; + width: 90vw; + aspect-ratio: 16 / 9; + height: auto; + + @include on-small-desktop { + height: 65vh; + aspect-ratio: 16 / 9; + width: auto; + } + } + + &__close-btn { + position: absolute; + top: 20px; + right: 15px; + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 00000000..bf2493b9 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,96 @@ +.menu { + background: $bg-menu; + height: 100vh; + overflow-y: auto; + padding-bottom: 160px; + + @include on-tablet { + padding-bottom: 140px; + } + + &__top-bar { + display: flex; + justify-content: space-between; + padding-block: 20px; + margin-bottom: 18px; + } + + &__link-close { + margin-left: auto; + + @include hover(transform, scale(1.1)); + } + + &__burger-close { + display: block; + } + + &__content { + @include page-grid; + } + + &__nav, + &__lang { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -1; + } + } + + &__help { + grid-column: 1 / -1; + } + + &__faq { + grid-column: 1 / -1; + } + + &__list { + display: flex; + flex-direction: column; + gap: 0; + } + + &__item { + height: 50px; + position: relative; + } + + &__link { + cursor: pointer; + width: 120vw; + display: block; + position: absolute; + left: -10vw; + height: 100%; + + @include on-tablet { + left: -20vw; + } + + @include hover(background-color, $bg-menu-link); + + &-text { + position: relative; + display: flex; + align-items: center; + height: 100%; + width: 100vw; + left: 10vw; + font-size: 21px; + font-weight: 500; + color: $c-white; + + @include hover(color, $c-contrast); + + @include on-tablet { + left: 20vw; + } + } + } +} + +.hidden { + display: none; +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 00000000..d69576aa --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,15 @@ +.nav { + display: flex; + gap: 37px; + + &__list { + display: flex; + gap: 36px; + } + + &__link { + &:hover { + @include hover(color, $c-contrast); + } + } +} diff --git a/src/styles/blocks/_open-bar.scss b/src/styles/blocks/_open-bar.scss new file mode 100644 index 00000000..e527dcc6 --- /dev/null +++ b/src/styles/blocks/_open-bar.scss @@ -0,0 +1,72 @@ +.open-bar { + &--active { + z-index: 1; + } + + &__circle { + width: 34px; + height: 34px; + cursor: pointer; + background-image: url('../images/tech/open-bar.svg'); + background-repeat: no-repeat; + background-size: cover; + + @include hover(background-image, url('../images/tech/hove-bar-mb.svg')); + + @include on-tablet { + width: 61.68px; + height: 61.68px; + background-image: url('../images/tech/open-bar-tb.svg'); + + @include hover(background-image, url('../images/tech/hove-bar.svg')); + } + + &--active { + background-image: url('../images/tech/close-bar.svg'); + + @include hover( + background-image, + url('../images/tech/close-bar-hove.svg') + ); + } + } + + &__content { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows $hover-duration; + background-color: $bg-menu; + border-radius: 4px; + width: 170px; + + @include on-tablet { + width: max-content; + } + } + + &:is(&--active) &__content { + grid-template-rows: 2fr; + } + + &:is(&--active) &__circle { + background-image: url('../images/tech/close-bar.svg'); + + @include hover(background-image, url('../images/tech/close-bar-hove.svg')); + } + + &__content-wrapper { + overflow: hidden; + } + + &__text { + padding: 12px 10px; + font-size: 12px; + line-height: 18px; + + @include on-tablet { + padding: 17px 10px 22px; + font-size: 16px; + line-height: 24px; + } + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 00000000..73ad8b62 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,68 @@ +.page { + scroll-behavior: smooth; + transition: all 0.3s; + overflow-x: hidden; + box-sizing: border-box; + position: relative; + + &:has(body aside[class*='--active']) { + overflow-y: hidden; + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__aside { + opacity: 0; + pointer-events: none; + transform: translate(-120%); + background-color: transparent; + transition: + opacity $hover-duration, + background-color $hover-duration, + transform $hover-duration $hover-duration; + + &--active { + pointer-events: all; + opacity: 1; + background-color: $box-shadow; + transform: translateX(0); + + transition: + transform $hover-duration, + background-color $hover-duration $hover-duration; + } + } + + &__menu { + position: fixed; + + top: 0; + left: 0; + right: 0; + + z-index: 2; + transition: all 0.5s; + transform: translateX(-100%); + pointer-events: none; + + &::before { + content: ''; + z-index: -1; + background-color: $box-shadow; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + pointer-events: none; + } + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/_pay-order.scss b/src/styles/blocks/_pay-order.scss new file mode 100644 index 00000000..21080147 --- /dev/null +++ b/src/styles/blocks/_pay-order.scss @@ -0,0 +1,168 @@ +.pay-order { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / 5; + } + + @include on-small-desktop { + grid-column: 1 / 5; + } + + &__card-num-inputs-wrapper { + display: flex; + justify-content: space-between; + } + + &__label { + font-size: 14px; + color: $c-text; + + @include transition(color); + } + + &__input { + box-sizing: border-box; + width: 100%; + padding: 0; + line-height: 23.4px; + display: block; + + color: $c-white; + font-family: $main-ff; + padding-bottom: 6px; + background-color: transparent; + + outline: none; + border: none; + border-bottom: 1px solid $c-dark-grey; + font-size: 16px; + resize: none; + letter-spacing: 0.2em; + + @include transition(border-bottom); + + &--expiration-date { + width: 90px; + } + + &--card-num { + letter-spacing: 0.1em; + width: 56px; + height: 32px; + padding-bottom: 9px; + } + + &::placeholder { + text-align: center; + } + + &:-webkit-autofill { + transition: + background-color 5000s ease-in-out 0s, + color 5000s ease-in-out 0s; + } + + &:invalid { + border-bottom: 1px solid $c-error; + } + + &:focus { + border-bottom: 1px solid $c-contrast; + border-color: $c-contrast; + } + + &:disabled { + cursor: not-allowed; + } + } + + &__holder-name-wrapper, + &__card-num-wrapper, + &__expiration-date, + &__cvv { + &:focus-within .pay-order__label { + color: $c-contrast; + } + } + + &__visa-icon { + display: none; + + @include on-tablet { + background-image: url('../images/icons/visa.svg'); + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + align-self: flex-end; + width: 54px; + height: 33.7px; + display: block; + } + } + + &-grid { + @include page-grid; + + grid-column: 1 / -1; + row-gap: 30px; + + @include on-tablet { + grid-template-columns: repeat(4, 1fr); + grid-column: 2 / 6; + row-gap: 40px; + } + + @include on-small-desktop { + grid-template-columns: repeat(5, 1fr); + grid-column: 7 / 12; + grid-row: 1 / 2; + } + + @include on-desktop { + grid-column: 9 / 15; + } + } + + &__card-num-wrapper { + grid-column: 1 / -1; + } + + &__holder-name-wrapper { + grid-column: 1 / -1; + } + + &__expiration-date { + grid-column: 1 / 1; + + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__cvv { + width: 50px; + grid-column: 2 / -1; + + @include on-tablet { + grid-column: 3 / 4; + } + } + + &__button { + grid-column: 1 / -1; + margin-bottom: 43px; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-small-desktop { + grid-column: 7 / 10; + } + + @include on-desktop { + grid-column: 9 / 12; + } + } +} diff --git a/src/styles/blocks/_play-btn.scss b/src/styles/blocks/_play-btn.scss new file mode 100644 index 00000000..d3ce9c8d --- /dev/null +++ b/src/styles/blocks/_play-btn.scss @@ -0,0 +1,15 @@ +.play-button { + display: block; + cursor: pointer; + background-image: url('../images/icons/btn-play.svg'); + background-position: left center; + background-repeat: no-repeat; + width: 235px; + height: 69px; + transition: all 0.3s; + + &:hover { + background-image: url('../images/icons/btn-play-hover.svg'); + transform: scale(1.05); + } +} diff --git a/src/styles/blocks/_select.scss b/src/styles/blocks/_select.scss new file mode 100644 index 00000000..fed91d24 --- /dev/null +++ b/src/styles/blocks/_select.scss @@ -0,0 +1,133 @@ +.select-qty, +.select { + font-size: 20px; + line-height: 26px; + color: $c-white; + + &__content { + position: relative; + height: 47px; + width: 90px; + border-radius: 4px; + background-color: $bg-menu; + } + + &__current-value { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + position: relative; + + @include hover(color, $c-contrast); + + &::after { + content: ''; + position: absolute; + right: 11px; + top: 50%; + transform: translateY(-50%) rotate(-90deg); + + @include transition(transform); + + display: block; + border-left: 4.5px solid transparent; + border-right: 4.5px solid transparent; + border-top: 6px solid $c-white; + } + + @include hover-after(border-top-color, $c-contrast); + } + + &__list-wrapper { + position: absolute; + z-index: 1; + top: 100%; + margin-top: 3px; + + width: 100%; + border-radius: 4px; + background-color: $bg-menu; + + transition: opacity 0.3s; + opacity: 0; + pointer-events: none; + + &--visible { + opacity: 1; + pointer-events: all; + } + + &::before { + content: ''; + position: absolute; + top: 4px; + bottom: 4px; + right: 0; + display: block; + width: 1px; + background-color: $c-contrast; + } + + &::after { + content: ''; + position: absolute; + top: 4px; + right: 0; + display: block; + width: 1px; + height: 22px; + background-color: $c-contrast; + } + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + + box-sizing: border-box; + padding-block: 8px; + + display: flex; + flex-direction: column; + gap: 8px; + } + + &__item { + @include hover(color, $c-contrast); + + &--selected { + display: none; + } + } +} + +.hidden { + display: none; +} + +.select { + &__content { + width: 100%; + } + + &__current-value { + font-size: 16px; + padding-left: 24px; + justify-content: left; + width: auto; + + &::after { + right: 21px; + } + } + + &__item { + padding-left: 24px; + font-size: 16px; + } +} diff --git a/src/styles/blocks/_slider.scss b/src/styles/blocks/_slider.scss new file mode 100644 index 00000000..d23f29dd --- /dev/null +++ b/src/styles/blocks/_slider.scss @@ -0,0 +1,66 @@ +.slider { + width: 100%; + height: 100%; + + &__wrapper { + width: 100%; + height: 100%; + } + + &__slide { + height: 0; + + @include on-tablet { + flex-shrink: 0; + position: relative; + width: 100%; + height: 100%; + } + } + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 20% top; + + &--full { + object-fit: contain; + object-position: 80% 0; + } + } + + &__bottom { + position: relative; + width: max-content; + } + + &__buttons { + display: flex; + gap: 103px; + padding-bottom: 10px; + } + + &__button { + line-height: 150%; + cursor: pointer; + + @include transition(color); + + &:disabled { + cursor: not-allowed; + color: $c-text-dark; + } + + &:not(&:disabled) { + @include hover(color, $c-contrast); + } + } + + &__scrollbar { + --swiper-scrollbar-bg-color: #{$c-text-dark}; + --swiper-scrollbar-drag-bg-color: #{$c-contrast}; + --swiper-scrollbar-size: 2px; + --swiper-scrollbar-bottom: 0; + } +} diff --git a/src/styles/blocks/_tech.scss b/src/styles/blocks/_tech.scss new file mode 100644 index 00000000..d4229d5e --- /dev/null +++ b/src/styles/blocks/_tech.scss @@ -0,0 +1,178 @@ +.tech { + background-color: $c-bg-black; + + @include section-padding-block; + + @include on-desktop { + padding-block: 160px; + } + + &__content { + display: flex; + flex-direction: column; + gap: 30px; + + @include on-small-desktop { + @include page-grid; + + row-gap: 80px; + } + } + + &__title { + @include on-small-desktop { + grid-column: 9 / -1; + } + + @include on-desktop { + grid-column: 12 / -1; + } + } + + &__details { + @include on-small-desktop { + grid-column: 1 / -1; + + @include page-grid; + + max-width: 1060px; + margin-inline: auto; + } + + @include on-desktop { + max-width: 100%; + } + } + + &__img-container { + display: flex; + justify-content: center; + align-items: flex-end; + position: relative; + margin: 0 auto; + width: 214px; + height: 205px; + + @include on-tablet { + width: 414px; + height: 380px; + } + + @include on-small-desktop { + width: 100%; + height: 100%; + + grid-column: 2 / 9; + } + + @include on-desktop { + grid-column: 4 / 12; + } + } + + &__img { + @include on-small-desktop { + position: absolute; + top: 8px; + right: 0; + } + + @include on-desktop { + top: 8px; + right: 0; + } + } + + &__sensor { + display: none; + + @include on-small-desktop { + display: block; + grid-column: 1 / 4; + margin-bottom: 75px; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &__batterries { + display: none; + + @include on-small-desktop { + display: block; + grid-column: 9 / -1; + } + + @include on-desktop { + grid-column: 12 / span 4; + } + } + + &__connection { + display: none; + + @include on-small-desktop { + display: block; + grid-column: 2 / 5; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &__details-title { + font-size: 18px; + margin-bottom: 21px; + } + + &__bar { + position: absolute; + display: flex; + + @include on-small-desktop { + display: none; + } + + &--first { + align-items: flex-start; + top: 0; + left: 31%; + + @include on-tablet { + left: 25%; + } + } + + &--second { + flex-direction: row-reverse; + align-items: center; + top: 50%; + left: 50%; + transform: translate(-70%, -50%); + + @include on-tablet { + top: 42%; + right: 7%; + transform: translateX(33%); + align-items: center; + flex-direction: column; + } + } + + &--thirt { + flex-direction: column-reverse; + top: 90%; + left: 0%; + transform: translate(0, -100%); + } + } + + &__container { + @include on-small-desktop { + overflow: unset; + } + } +} diff --git a/src/styles/blocks/_top-bar.scss b/src/styles/blocks/_top-bar.scss new file mode 100644 index 00000000..06f1ae04 --- /dev/null +++ b/src/styles/blocks/_top-bar.scss @@ -0,0 +1,84 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + padding: 18px 0 14px; + + @include on-tablet { + padding-bottom: 0; + margin-bottom: 55px; + } + + @include on-small-desktop { + margin-bottom: 116px; + } + + @include on-desktop { + margin-bottom: 245px; + } + + &__left { + display: flex; + align-items: center; + gap: 34px; + } + + &__logo { + display: block; + width: 58px; + height: 12px; + background-image: url('../images/icons/logo-mb.svg'); + + @include hover(transform, scale(1.1)); + + @include on-tablet { + width: 67px; + height: 14px; + background-image: url('../images/icons/logo-tb.svg'); + } + + @include on-small-desktop { + width: 77px; + height: 16px; + background-image: url('../images/icons/logo.svg'); + } + } + + &__link-menu { + @include hover(transform, scale(1.1)); + + z-index: 2; + + @include on-small-desktop { + display: none; + } + } + + &__lang { + display: none; + + @include on-small-desktop { + display: block; + } + } + + &__menu { + display: none; + + @include on-small-desktop { + display: flex; + justify-content: space-between; + align-items: center; + gap: 37px; + } + } + + &__btn-buy { + display: none; + + @include on-small-desktop { + display: block; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..68f2b88a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,34 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/button'; +@import 'blocks/play-btn'; +@import 'blocks/gaming'; +@import 'blocks/slider'; +@import 'blocks/nav'; +@import 'blocks/about'; +@import 'blocks/tech'; +@import 'blocks/open-bar'; +@import 'blocks/benefits'; +@import 'blocks/article'; +@import 'blocks/contact'; +@import 'blocks/form'; +@import 'blocks/footer'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/dropdown'; +@import 'blocks/help'; +@import 'blocks/faq'; +@import 'blocks/media-player'; +@import 'blocks/faq-module'; +@import 'blocks/accordion'; +@import 'blocks/help-module'; +@import 'blocks/main'; +@import 'blocks/buy-module'; +@import 'blocks/select'; +@import 'blocks/form-buy'; +@import 'blocks/pay-order'; +@import 'blocks/complite'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b..0104ddaa 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,29 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; +%h1, +%h2, +%h3 { + color: $c-white; + font-family: $main-ff; + font-size: 26px; + line-height: 130%; + font-weight: 900; + + @include on-small-desktop { + font-size: 46px; + } +} + +%h2 { + font-size: 21px; + + @include on-small-desktop { + font-size: 36px; + } +} + +%h3 { + font-size: 16px; + + @include on-small-desktop { + font-size: 12px; + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..034ed4f1 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,90 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $min-width-on-tablet) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: $min-width-on-small-desktop) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $min-width-on-desktop) { + @content; + } +} + +@mixin margin-inline { + margin-inline: 20px; + + @include on-tablet { + margin-inline: 34px; + } + + @include on-small-desktop { + margin-inline: 110px; + } + + @include on-desktop { + margin-inline: auto; + max-width: 1452px; + } +} + +.container { + @include margin-inline; +} + +@mixin page-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-small-desktop { + grid-template-columns: repeat(12, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(16, 1fr); + } +} + +@mixin section-padding-block { + padding-block: 50px; + + @include on-tablet { + padding-block: 70px; + } + + @include on-small-desktop { + padding-block: 100px; + } + + @include on-desktop { + padding-block: 160px; + } +} + +@mixin transition($_property) { + transition: #{$_property} $hover-duration; +} + +@mixin hover-after($_property, $_toValue) { + &::after { + @include transition($_property); + } + + &:hover::after { + #{$_property}: $_toValue; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 00000000..2abfce93 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,106 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; +} + +body { + line-height: 1; +} + +button { + all: unset; + cursor: pointer; +} + +ol, +ul, +li { + list-style: none; +} + +a { + text-decoration: none; + cursor: pointer; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..3560d745 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,18 @@ -$c-gray: #eee; +$min-width-on-tablet: 768px; +$min-width-on-small-desktop: 1280px; +$min-width-on-desktop: 1920px; +$c-bg-gradient: linear-gradient(90deg, #191536, #000); +$c-bg-black: #05040b; +$c-dark-grey: #2f2f2f; +$c-contrast: #05c2df; +$c-text: #929292; +$c-text-dark: #545454; +$c-white: #fff; +$c-black: #000; +$main-ff: Inter; +$hover-duration: 0.3s; +$c-error: #860404; +$hover-bg-color: #191536; +$bg-menu: #191536; +$bg-menu-link: #110e25; +$box-shadow: #000000b3;