diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /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/.linthtmlignore b/.linthtmlignore new file mode 100644 index 000000000..1a0315372 --- /dev/null +++ b/.linthtmlignore @@ -0,0 +1,3 @@ +src/components/**/*.html +src/dist/**/*.html +dist/**/*.html diff --git a/.stylelintignore b/.stylelintignore index f1d4bd275..cf2405d6e 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,2 +1,3 @@ /backstop_data/ /dist +/src/dist diff --git a/README.md b/README.md index 302783df5..909ef5585 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://Olena7202.github.io/layout_KateVR/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html deleted file mode 100644 index d339e6856..000000000 --- a/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - Title - - - -

Hello Mate Academy

- - - diff --git a/package-lock.json b/package-lock.json index 87fcefd81..0c3902642 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", @@ -8721,20 +8722,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 7149ff15d..754178035 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/components/AboutProduct/about-product.html b/src/components/AboutProduct/about-product.html new file mode 100644 index 000000000..4f1de2384 --- /dev/null +++ b/src/components/AboutProduct/about-product.html @@ -0,0 +1,76 @@ + +
+
+
+
1/5
+

+ ABOUT +
PRODUCT
+

+
+
+
+
+
+
+
+
+
+

+ ABOUT +
PRODUCT
+

+

+ 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. +

+ +
+ +
+ + Previous + + + Next + +
+
+
+
+
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 +
+
+
+
diff --git a/src/components/AboutProduct/about-product.scss b/src/components/AboutProduct/about-product.scss new file mode 100644 index 000000000..d12db1264 --- /dev/null +++ b/src/components/AboutProduct/about-product.scss @@ -0,0 +1,274 @@ +.about { + margin: 0; + background: linear-gradient(146.86deg, #191536 -0.5%, #000 99.5%); + + &__image { + width: 100%; + height: 100%; + position: relative; + padding-bottom: 62%; + background-image: url('images/gadget.png'); + background-repeat: no-repeat; + background-size: 100%; + margin-bottom: 15px; + transition: transform 0.3s; + + &:hover { + transform: scale(105%); + } + + @include on-tablet { + margin-bottom: 0; + background-size: 130%; + background-position-x: 50%; + } + + @include on-desktop { + grid-column: 2 / 7; + background-size: 105%; + background-position-x: 80%; + } + + &-side { + @include on-tablet { + display: block; + width: 244px; + height: 230px; + background-image: url('images/about-us.svg'); + background-repeat: no-repeat; + background-size: 100%; + background-position: top center; + } + + @include on-desktop { + grid-column: 7 / 13; + background-size: 100%; + width: 334px; + height: 230px; + } + } + } + + &__container-image { + @include on-tablet { + grid-column: 3; + position: relative; + box-sizing: border-box; + width: 100%; + max-height: 650px; + overflow: hidden; + &::after { + content: ''; + display: block; + } + } + @include on-desktop { + grid-column: 7 / 13; + } + } + + &__image-bottom { + display: none; + @include on-tablet { + display: block; + width: 100%; + height: 100%; + } + } + + &__links { + display: none; + @include on-desktop { + display: flex; + justify-content: space-between; + margin-top: 12px; + border-bottom: 1px solid #212121; + grid-column: 2 / 4; + height: 35px; + } + } + + &__swipes { + display: flex; + justify-content: center; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 1 / 2; + grid-row: 2 / 3; + margin-bottom: 0; + margin-top: 15px; + } + + @include on-desktop { + display: none; + } + } + + &__swipe { + background-image: url('images/Ellipse-active.svg'); + background-repeat: no-repeat; + height: 4px; + width: 4px; + margin-right: 6px; + + &:last-of-type { + margin: 0; + } + + &--active { + background-image: url('images/Ellipse.svg'); + } + } + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + margin-bottom: 32px; + padding-top: 50px; + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + + @include on-tablet { + display: none; + } + + &.about__title--bottom { + display: none; + @include on-tablet { + display: block; + padding-top: 0; + } + + @include on-desktop { + display: block; + font-size: 36px; + line-height: 44px; + } + } + } + + &__title--tablet { + display: none; + + @include on-tablet { + display: block; + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + margin-bottom: 32px; + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + } + } + + &__title:nth-child(1) { + @include on-tablet { + display: none; + } + } + + &__paragraph { + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $colorGrey; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &__undertitle { + margin: 80px 0 12px; + font-weight: 400; + font-size: 12px; + line-height: 15px; + color: $colorBlue; + + @include on-tablet { + margin: 20px 0 12px; + } + + @include on-desktop { + font-size: 14px; + line-height: 17px; + } + } + + &__meet { + grid-column: 1 / 3; + @include on-desktop { + grid-column: 1 / 6; + } + } + + &__top { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; + padding-top: 70px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 20px; + padding-top: 70px; + } + } + + &__bottom { + @include on-tablet { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin: 90px auto auto; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; + padding-bottom: 100px; + } + } + + &__count { + display: none; + @include on-desktop { + display: block; + color: $colorBlue; + font-size: 14px; + line-height: 17px; + grid-column: 1 / 2; + text-align: right; + } + } + + &__desktop { + @include on-desktop { + display: inline-block; + } + } + + &__info-product { + @include on-tablet { + grid-column: 2 / 3; + } + + @include on-desktop { + grid-column: 8 / 13; + } + } +} diff --git a/src/components/Benefits/benefits.html b/src/components/Benefits/benefits.html new file mode 100644 index 000000000..9640239c6 --- /dev/null +++ b/src/components/Benefits/benefits.html @@ -0,0 +1,46 @@ +
+
+

+ WHY +
KAT LOCO?
+

+
+
+
+

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/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. +

+
+
+
+

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! +

+
+ + Buy Now + +
+
+
diff --git a/src/components/Benefits/benefits.scss b/src/components/Benefits/benefits.scss new file mode 100644 index 000000000..37d229fa3 --- /dev/null +++ b/src/components/Benefits/benefits.scss @@ -0,0 +1,105 @@ +.benefits { + background: linear-gradient(108.62deg, #191536 0%, #000 77.34%); + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + padding: 70px 0 32px; + + @include on-desktop { + padding: 100px 0 32px; + text-align: center; + font-size: 36px; + line-height: 44px; + } + } + + &__paragraph { + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $colorGrey; + margin-bottom: 20px; + + @include on-tablet { + text-align: center; + } + } + + &__grid { + @include on-tablet { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 20px; + } + } + + &__picture { + @extend %hover-scale; + @include on-tablet { + width: 100%; + position: relative; + left: 0; + padding-bottom: 50%; + background-repeat: no-repeat; + background-size: 40%; + background-position: 50%; + margin-bottom: 20px; + + &--compatible { + background-image: url('images/compatible.svg'); + } + + &--control { + background-image: url('images/control.svg'); + } + + &--sensors { + background-image: url('images/sensors.svg'); + } + } + } + + &__button { + display: none; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 56px; + border: 1px solid transparent; + border-radius: 4px; + background-color: $colorBlue; + text-decoration: none; + cursor: pointer; + font-family: inherit; + font-weight: 500; + font-size: 14px; + color: #fff; + + &:hover { + background-color: #fff; + color: $colorBlue; + transition: 0.5s; + } + + &:active { + background-color: #191536; + color: #2f2f2f; + } + + @include on-tablet { + display: flex; + grid-column: 2 / 3; + } + + @include on-desktop { + display: flex; + grid-row: 2 / 3; + grid-column: 2 / 3; + margin: 100px 0; + } + } +} diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss new file mode 100644 index 000000000..26b570bbc --- /dev/null +++ b/src/components/Button/button.scss @@ -0,0 +1,19 @@ +.button { + @extend %button; + &__buy { + @include on-tablet { + grid-column: 1 / 3; + height: 48px; + } + @include on-desktop { + grid-column: 1 / 2; + } + } +} + +.header.container.button { + @include on-tablet { + position: sticky; + bottom: 20px; + } +} diff --git a/src/components/BuyPanel/buy-panel.html b/src/components/BuyPanel/buy-panel.html new file mode 100644 index 000000000..4bd69a65d --- /dev/null +++ b/src/components/BuyPanel/buy-panel.html @@ -0,0 +1,179 @@ + + diff --git a/src/components/BuyPanel/buy-panel.scss b/src/components/BuyPanel/buy-panel.scss new file mode 100644 index 000000000..1742f4b3b --- /dev/null +++ b/src/components/BuyPanel/buy-panel.scss @@ -0,0 +1,256 @@ +@import '../../styles/utils/extends'; +@import 'place-order'; + +.buy { + position: absolute; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + color: #fff; + height: 100vh; + overflow: hidden; + z-index: 3; + + &__link { + display: block; + text-decoration: none; + color: #545454; + padding: 0 0 17px; + + &:hover { + color: $colorBlue; + } + + @include on-desktop { + text-align: left; + } + + &--place::after { + @extend %after; + + @include on-desktop { + display: block; + left: 297px; + } + } + + &--pay::after { + @extend %after; + + @include on-desktop { + display: block; + left: 539px; + } + } + + &--complete::after { + @extend %after; + + @include on-desktop { + display: block; + left: 822px; + } + } + } + + &__top { + position: relative; + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 34px; + margin: 20px 20px 38px; + + @include on-tablet { + margin: 20px 34px 0; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + margin: 65px 110px 15px; + } + } + + &__icon { + position: relative; + display: block; + height: 20px; + text-decoration: none; + + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + @include on-desktop { + display: none; + } + } + + &__item { + display: block; + border-bottom: 1px solid #2f2f2f; + font-weight: 500; + font-size: 12px; + line-height: 130%; + + @include on-desktop { + border-bottom: none; + } + + &--place { + @include on-desktop { + grid-column: 1 / 2; + } + } + + &--pay { + @include on-desktop { + grid-column: 4 / 5; + } + } + + &--complete { + @include on-desktop { + grid-column: 7 / 8; + } + } + + &:hover { + border-bottom: 1px solid $colorBlue; + + @include on-desktop { + border-bottom: none; + } + } + + &-place { + display: block; + border-bottom: 1px solid $colorBlue; + font-weight: 500; + font-size: 12px; + line-height: 130%; + + @include on-desktop { + border-bottom: none; + } + + & .buy__link { + color: $colorBlue; + } + + &-pay { + display: block; + font-weight: 500; + font-size: 12px; + line-height: 130%; + border-bottom: 1px solid #2f2f2f; + + @include on-desktop { + border-bottom: none; + } + + & .buy__link { + color: #fff; + } + + &:hover { + color: $colorBlue; + border-bottom: 1px solid $colorBlue; + + @include on-desktop { + border-bottom: none; + } + } + } + } + + &-active { + display: block; + border-bottom: 1px solid $colorBlue; + font-weight: 500; + font-size: 12px; + line-height: 130%; + + @include on-desktop { + border-bottom: none; + } + + & .buy__link { + color: $colorBlue; + } + } + } + + &__list { + display: grid; + grid-template-columns: repeat(3, 1fr); + box-sizing: border-box; + color: #fff; + text-align: center; + list-style: none; + justify-content: space-around; + margin: 0; + padding: 0; + grid-column: 1 / 3; + + @include on-desktop { + grid-column: 4 / 13; + grid-template-columns: repeat(9, 1fr); + } + } + + &__info { + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; + padding: 50px 110px 40px; + } + + &-place { + padding: 0 20px 20px; + + @include on-tablet { + padding: 0 35px 48px; + } + + @include on-desktop { + grid-column: 1 / 7; + padding: 0; + } + } + } + + &__menu { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + + transform: translate(100%); + transition: transform 0.5s; + + &:target { + transform: translate(0); + } + } + + &__image { + @extend %hover-scale; + @include on-tablet { + width: 100%; + position: relative; + left: 0; + padding-bottom: 36%; + background-image: url('images/header.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: 50%; + } + + @include on-desktop { + padding-bottom: 75%; + background-size: 135%; + background-position: 75%; + } + } +} diff --git a/src/components/BuyPanel/place-order.scss b/src/components/BuyPanel/place-order.scss new file mode 100644 index 000000000..f4831ce16 --- /dev/null +++ b/src/components/BuyPanel/place-order.scss @@ -0,0 +1,127 @@ +.place { + &__top { + display: flex; + justify-content: space-between; + color: $colorGrey; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(6, 1fr); + padding-top: 55px; + grid-gap: 20px; + } + } + + &__subtitle { + text-align: center; + + @include on-desktop { + text-align: left; + } + } + + &__price { + font-weight: 500; + font-size: 26px; + line-height: 31px; + color: $colorBlue; + + @include on-desktop { + margin-top: 10px; + } + } + + &__customer-info { + padding: 0 20px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding: 0 34px; + grid-gap: 20px; + } + + @include on-desktop { + grid-column: 7 / 13; + padding: 0; + } + } + + &__input { + width: 100%; + background: none; + outline: none; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 130%; + letter-spacing: 0.2em; + padding-left: 5px; + + &-date { + display: inline-block; + width: 90px; + margin-top: 18px; + background: none; + outline: none; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 130%; + letter-spacing: normal; + + @include on-desktop { + font-size: 20px; + line-height: 130%; + width: 95px; + } + + &::placeholder { + color: #2f2f2f; + } + } + + &-cvv { + display: inline-block; + width: 42px; + margin-top: 18px; + background: none; + outline: none; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 130%; + letter-spacing: 0.2em; + + @include on-desktop { + font-size: 20px; + line-height: 130%; + } + + &::placeholder { + color: #2f2f2f; + } + } + } + + &__amount { + @include on-desktop { + grid-column: 3 / 4; + } + } + + &__card-info { + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include on-desktop { + margin-bottom: 50px; + } + } +} diff --git a/src/components/ContactForm/contact-form.html b/src/components/ContactForm/contact-form.html new file mode 100644 index 000000000..338599a72 --- /dev/null +++ b/src/components/ContactForm/contact-form.html @@ -0,0 +1,87 @@ +
+
+
Have any questions?
+

+ GET IN +
TOUCH
+

+
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+ Our manager will reply you within 15 minutes +
+
+ + +86-0571-86105373 + + + global@katvr.com + + + overseas@katvr.com + +
+
+
diff --git a/src/components/ContactForm/contact-form.js b/src/components/ContactForm/contact-form.js new file mode 100644 index 000000000..b996a27e9 --- /dev/null +++ b/src/components/ContactForm/contact-form.js @@ -0,0 +1,60 @@ +'use strict'; + +const prices = { + 1: 1200, + 2: 2400, +}; + +function updatePrice(selectElement, priceElement) { + const selectedAmount = parseInt(selectElement.value, 10); + const price = prices[selectedAmount]; + + if (price) { + priceElement.textContent = `${price}$`; + } +} + +export function initContactForm() { + const form = document.querySelector('#form'); + + if (form) { + form.addEventListener('submit', (event) => { + event.preventDefault(); + form.reset(); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + } +} + +export function initBuyPanel() { + const selectElement = document.querySelector('select[name="amount"]'); + const priceElement = document.querySelector('.place__price'); + + if (selectElement && priceElement) { + selectElement.addEventListener('change', () => { + updatePrice(selectElement, priceElement); + }); + } + + const selectPayElement = document.querySelector('select[name="amount-pay"]'); + const pricePayElement = document.querySelector('.pay__price'); + + if (selectPayElement && pricePayElement) { + selectPayElement.addEventListener('change', () => { + updatePrice(selectPayElement, pricePayElement); + }); + } + + const formSubmit = document.querySelector('.place__customer-info'); + const countrySelect = document.querySelector('select[name="countries"]'); + const citySelect = document.querySelector('select[name="cities"]'); + + if (formSubmit && countrySelect && citySelect) { + formSubmit.addEventListener('submit', (event) => { + if (countrySelect.value.trim() === '' || citySelect.value.trim() === '') { + event.preventDefault(); + alert('Please select a country and a city.'); + } + }); + } +} diff --git a/src/components/ContactForm/contact-form.scss b/src/components/ContactForm/contact-form.scss new file mode 100644 index 000000000..ef9a898e0 --- /dev/null +++ b/src/components/ContactForm/contact-form.scss @@ -0,0 +1,148 @@ +.contact { + background: #05040b; + + &__textarea { + outline: none; + border: none; + border-bottom: 1px solid #2f2f2f; + background: none; + color: #fff; + height: 60px; + width: 100%; + font-family: inherit; + font-size: 16px; + resize: none; + } + + &__reply { + font-weight: 400; + font-size: 12px; + line-height: 150%; + color: $colorGrey; + margin-top: 30px; + + @include on-tablet { + margin: 0; + font-size: 16px; + line-height: 150%; + } + } + + &__undertitle { + margin: 0 0 12px; + font-weight: 400; + font-size: 12px; + line-height: 15px; + color: $colorBlue; + + @include on-tablet { + margin: auto 0 0; + } + + @include on-tablet { + font-size: 14px; + line-height: 17px; + } + } + + &__link { + display: none; + + @include on-tablet { + display: block; + margin-bottom: 20px; + text-decoration: none; + color: #929292; + font-weight: 400; + font-size: 13px; + line-height: 150%; + } + } + + &__fieldset { + border: none; + margin-bottom: 30px; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + margin-bottom: 40px; + } + } + + &__form { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 65px; + grid-column: 2 / 3; + grid-row: 1 / 5; + } + } + + &__arrow { + @extend %hover-scale; + + @include on-tablet { + grid-column: 2 / 3; + place-self: center end; + width: 48px; + height: 48px; + box-sizing: border-box; + background: 50% url('images/arrow-home.svg') no-repeat; + border-radius: 50%; + border: 1px solid $colorBlue; + transition: + transform 0.3s, + background-color 0.3s; + } + + &:hover { + background-color: $colorBlue; + } + } + + &__grid { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 20px; + grid-auto-rows: repeat(4, 1fr); + } + } + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + margin-bottom: 32px; + + @include on-tablet { + margin: 20px 0 auto; + } + + @include on-desktop { + font-size: 36px; + line-height: 44px; + margin: auto 0; + } + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + } + + &__button { + @extend %button; + + @include on-tablet { + width: 100%; + display: block; + } + } +} diff --git a/src/components/Container/container.scss b/src/components/Container/container.scss new file mode 100644 index 000000000..bb7fe5b7c --- /dev/null +++ b/src/components/Container/container.scss @@ -0,0 +1,30 @@ +.container { + margin: 0 auto; + max-width: 1280px; + padding: 0 20px 50px; + + @include on-tablet { + padding: 0 34px 70px; + } + + @include on-desktop { + padding: 0 110px; + } +} + +.container__menu { + margin: 0 auto; + max-width: 1280px; +} + +.container.footer { + @include on-tablet { + padding: 0 25px 25px 34px; + } +} + +.container.contact__grid { + @include on-tablet { + padding: 0 34px 130px; + } +} diff --git a/src/components/CustomSelect/custom-select.scss b/src/components/CustomSelect/custom-select.scss new file mode 100644 index 000000000..6c0077d37 --- /dev/null +++ b/src/components/CustomSelect/custom-select.scss @@ -0,0 +1,85 @@ +.custom-select select { + background-color: #191536; + background-image: url('images/Polygon.svg'); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: auto 20%; + border-radius: 2px; + border: none; + color: #fff; + padding: 10px 40px; + font-size: 20px; + outline: none; + appearance: none; + + &::-ms-expand { + display: none; + } +} + +.country-select select { + background-color: #191536; + background-image: url('images/Polygon.svg'); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: auto 20%; + border-radius: 2px; + border: none; + color: #fff; + width: 100%; + padding: 15px; + margin-top: 14px; + font-size: 20px; + outline: none; + appearance: none; + + &::-ms-expand { + display: none; + } +} + +.city-select select { + background-color: #191536; + background-image: url('images/Polygon.svg'); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: auto 20%; + border-radius: 2px; + border: none; + color: #fff; + width: 100%; + padding: 15px; + margin-top: 14px; + font-size: 20px; + outline: none; + appearance: none; + + &::-ms-expand { + display: none; + } +} + +.header__language select { + display: none; + + @include on-desktop { + display: block; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + background-image: url('images/Polygon.svg'); + background-position: right 10px center; + background-repeat: no-repeat; + background-size: auto 20%; + border-radius: 2px; + border: none; + color: $colorBlue; + padding: 0 20px 5px 10px; + font-size: 16px; + outline: none; + appearance: none; + grid-column: 2 / 3; + + &::-ms-expand { + display: none; + } + } +} diff --git a/src/components/FaqPanel/faq-panel.html b/src/components/FaqPanel/faq-panel.html new file mode 100644 index 000000000..ef9a27394 --- /dev/null +++ b/src/components/FaqPanel/faq-panel.html @@ -0,0 +1,72 @@ + + diff --git a/src/components/FaqPanel/faq-panel.scss b/src/components/FaqPanel/faq-panel.scss new file mode 100644 index 000000000..334113241 --- /dev/null +++ b/src/components/FaqPanel/faq-panel.scss @@ -0,0 +1,56 @@ +.faq { + position: absolute; + background-color: #191536; + color: #fff; + height: 100vh; + + @include on-tablet { + z-index: 3; + } + + @include on-desktop { + margin: 50px; + height: 90vh; + } + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 130%; + margin-bottom: 20px; + } + + &__title-blue { + font-weight: 400; + color: $colorBlue; + } + + &__content { + margin: 20px 34px 0; + } + + &__section { + color: $colorBlue; + font-size: 14px; + } + + &__paragraph { + color: #929292; + padding: 20px 0; + font-size: 13px; + } + + &__update { + font-size: 12px; + line-height: 150%; + color: #545454; + padding: 0 2px; + } + + &__info { + border: 1px solid $colorBlue; + border-radius: 4px; + padding: 10px; + margin-bottom: 14px; + } +} diff --git a/src/components/Footer/footer.html b/src/components/Footer/footer.html new file mode 100644 index 000000000..019262d5d --- /dev/null +++ b/src/components/Footer/footer.html @@ -0,0 +1,132 @@ + diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss new file mode 100644 index 000000000..5eac060fe --- /dev/null +++ b/src/components/Footer/footer.scss @@ -0,0 +1,145 @@ +.footer { + @include on-tablet { + background: #000; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 60px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + } + + &__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + display: none; + } + } + + &__link { + display: block; + margin-bottom: 20px; + text-decoration: none; + color: #fff; + font-weight: 400; + font-size: 13px; + line-height: 150%; + + &:last-of-type { + margin-bottom: 0; + } + + &:hover { + color: $colorBlue; + } + + @include on-tablet { + margin: 0; + } + + &-grey { + display: block; + margin-bottom: 20px; + text-decoration: none; + color: #929292; + font-weight: 400; + font-size: 13px; + line-height: 150%; + } + } + + &__logo { + position: relative; + display: block; + height: 20px; + width: 68px; + text-decoration: none; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + background-image: url('images/logo.png'); + margin-bottom: 15px; + + @include on-tablet { + margin: 0; + } + } + + &__socials { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 20px; + grid-gap: 20px; + + &--grid { + display: none; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 20px; + grid-gap: 20px; + grid-column: 6 / 7; + } + + @include on-desktop { + grid-column: 10 / 13; + } + } + } + + &__icon { + position: relative; + display: block; + width: 20px; + height: 20px; + text-decoration: none; + + background-size: contain; + background-position: bottom; + background-repeat: no-repeat; + + transition: transform 0.5s; + + &:hover { + transform: scale(150%); + } + + &--yt { + background-image: url('images/yt.svg'); + } + + &--fb { + background-image: url('images/fb.svg'); + } + &--tw { + background-image: url('images/tw.svg'); + } + &--red { + background-image: url('images/red.svg'); + } + } + + &__links { + @include on-tablet { + display: none; + } + } + + &__nav--grid { + display: none; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column: 3 / 6; + } + + @include on-desktop { + grid-column: 4 / 10; + } + } +} diff --git a/src/components/HelpPanel/help-panel.html b/src/components/HelpPanel/help-panel.html new file mode 100644 index 000000000..79bbf9ad0 --- /dev/null +++ b/src/components/HelpPanel/help-panel.html @@ -0,0 +1,92 @@ + + diff --git a/src/components/HelpPanel/help-panel.scss b/src/components/HelpPanel/help-panel.scss new file mode 100644 index 000000000..a7c1a40bf --- /dev/null +++ b/src/components/HelpPanel/help-panel.scss @@ -0,0 +1,75 @@ +.help { + position: absolute; + background-color: #191536; + color: #fff; + height: 100vh; + overflow: hidden; + z-index: 3; + + @include on-desktop { + margin: 50px; + height: 90vh; + } + + &__grid { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 130%; + + @include on-tablet { + margin-top: 12px; + } + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + } + + &__content { + padding: 0 20px; + + @include on-tablet { + padding: 0 34px; + } + } + + &__paragraph { + color: #929292; + padding: 30px 0; + } + + &__link { + text-decoration: none; + color: $colorBlue; + display: block; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 25px; + } + + &:last-child { + margin-bottom: 30px; + } + } + + &__contact { + display: block; + color: #929292; + margin-bottom: 10px; + text-decoration: none; + + @include on-tablet { + margin-bottom: 25px; + } + } +} diff --git a/src/components/Icon/icon.scss b/src/components/Icon/icon.scss new file mode 100644 index 000000000..8bf21e400 --- /dev/null +++ b/src/components/Icon/icon.scss @@ -0,0 +1,34 @@ +.icon { + position: relative; + display: block; + height: 20px; + text-decoration: none; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + &--menu { + background-image: url('images/menu.svg'); + width: 20px; + + @include on-desktop { + display: none; + } + } + + &--cross { + background-image: url('images/cross.svg'); + width: 20px; + margin: 0 0 0 auto; + } + + &--logo { + background-image: url('images/logo.png'); + width: 58px; + } + + &--arrow { + background-image: url('images/arrow.svg'); + width: 20px; + } +} diff --git a/src/components/LangMenu/lang-menu.html b/src/components/LangMenu/lang-menu.html new file mode 100644 index 000000000..2b971304e --- /dev/null +++ b/src/components/LangMenu/lang-menu.html @@ -0,0 +1,99 @@ + + diff --git a/src/components/LangMenu/lang-menu.scss b/src/components/LangMenu/lang-menu.scss new file mode 100644 index 000000000..3aa35dafb --- /dev/null +++ b/src/components/LangMenu/lang-menu.scss @@ -0,0 +1,22 @@ +.lang { + position: absolute; + z-index: 3; + background-color: #191536; + color: #fff; + height: 100vh; + overflow: hidden; + + &__top { + position: relative; + box-sizing: border-box; + display: flex; + justify-content: left; + + margin: 20px 20px 38px; + z-index: 2; + + @include on-tablet { + margin: 30px 34px 47px; + } + } +} diff --git a/src/components/MoreThanGaming/more-than-gaming.html b/src/components/MoreThanGaming/more-than-gaming.html new file mode 100644 index 000000000..1676e6d3e --- /dev/null +++ b/src/components/MoreThanGaming/more-than-gaming.html @@ -0,0 +1,60 @@ +
+
+

+ MORE THAN +
GAMING!
+
+ This also made for people who are interested in... +
+

+
+
+
+

EDUCATION

+

+ Create educational simulations, trainings and much more with... +

+

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

+
+
+
+

REAL ESTATE

+

+ Design architectural projects in a deeply realistic environment... +

+

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

+
+
+
+

FITNESS

+

+ Combine business with pleasure, and discover countless ways... +

+

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

+
+
+ +

SOCIAL INTERACTIONS

+

+ Hang out with your friends in the virtual world when you can’t... +

+

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

+
+
+
+
diff --git a/src/components/MoreThanGaming/more-than-gaming.scss b/src/components/MoreThanGaming/more-than-gaming.scss new file mode 100644 index 000000000..83cd8e234 --- /dev/null +++ b/src/components/MoreThanGaming/more-than-gaming.scss @@ -0,0 +1,131 @@ +.more { + @include on-tablet { + background-color: #05040b; + } + &__undertitle { + margin-top: 12px; + font-weight: 400; + font-size: 12px; + line-height: 15px; + color: $colorBlue; + + @include on-desktop { + font-size: 14px; + line-height: 17px; + } + } + + &__subtitle { + font-weight: 900; + font-size: 18px; + line-height: 22px; + color: #fff; + margin-bottom: 10px; + + @include on-tablet { + text-align: center; + margin-bottom: 20px; + font-size: 16px; + line-height: 19px; + } + } + + &__paragraph { + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $colorGrey; + margin-bottom: 20px; + + @include on-tablet { + display: none; + } + + &--tablet { + display: none; + + @include on-tablet { + display: block; + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: $colorGrey; + margin-bottom: 20px; + text-align: center; + } + } + } + + &__swap { + &:nth-of-type(1) { + @include on-desktop { + grid-column: 6 / 8; + } + } + @include on-tablet { + background-image: url('images/more-clear.svg'); + position: relative; + display: block; + height: 35px; + width: 40px; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin: 0 auto; + } + } + + &__info { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 20px; + padding-top: 18px; + } + + @include on-desktop { + grid-template-columns: repeat(4, 1fr); + grid-template-rows: none; + padding-bottom: 100px; + } + } + + &__section:first-child { + @include on-tablet { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + } + + &__picture { + @extend %hover-scale; + + @include on-tablet { + width: 100%; + position: relative; + left: 0; + padding-bottom: 50%; + background-repeat: no-repeat; + background-size: 40%; + background-position: 50%; + margin-bottom: 20px; + + &--education { + background-image: url('images/education.svg'); + } + + &--estate { + background-image: url('images/house.svg'); + } + + &--fitness { + background-image: url('images/fitness.svg'); + } + + &--social { + background-image: url('images/social.svg'); + } + } + } +} diff --git a/src/components/NavBar/navbar.html b/src/components/NavBar/navbar.html new file mode 100644 index 000000000..deae5e42c --- /dev/null +++ b/src/components/NavBar/navbar.html @@ -0,0 +1,127 @@ +
+
+
+ +
+ +
+
+ + About + + + Tech + + + Benefits + + + Contact + +
+ + + Buy Now + +
+ +
+
+
+
+ THE NEW START OF +
+
VR LOCOMOTION
+
+
+
+ Discover the most comprehensive VR Locomotion system, and unlock + infinite motion in any games on any platforms! +
+
1200$
+ +
+
+
+ + Buy Now + +
+
+
+ + FAQ + + + Help + +
+ +
+ + Previous + + + Next + +
+
+
+
+
diff --git a/src/components/NavBar/navbar.scss b/src/components/NavBar/navbar.scss new file mode 100644 index 000000000..e490f5f16 --- /dev/null +++ b/src/components/NavBar/navbar.scss @@ -0,0 +1,189 @@ +.header { + margin: auto; + + &__top { + box-sizing: border-box; + padding-top: 20px; + display: flex; + justify-content: space-between; + + @include on-tablet { + padding-top: 30px; + margin-bottom: 55px; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; + align-items: center; + padding-top: 50px; + margin-bottom: 110px; + } + } + + &__image { + width: 100%; + position: relative; + left: 0; + padding-bottom: 50%; + background-image: url('images/header.png'); + background-repeat: no-repeat; + background-size: 150%; + background-position: 50%; + @extend %hover-scale; + + @include on-tablet { + grid-column: 2 / 3; + } + } + + &__title { + color: #fff; + font-size: 26px; + font-weight: 900; + line-height: 130%; + margin: 0 0 17px; + + &-blue { + font-weight: 400; + color: $colorBlue; + } + + @include on-desktop { + font-size: 46px; + line-height: 130%; + } + } + + &__info { + font-weight: 500; + color: $colorGrey; + margin: 0 0 8px; + + &-block { + @include on-desktop { + padding: 0 100px; + } + } + } + + &__price { + font-size: 18px; + line-height: 22px; + font-weight: 500; + text-align: center; + color: #fff; + margin: 0 0 16px; + + @include on-tablet { + text-align: left; + margin: 0 0 24px; + } + } + + &__main { + @include on-tablet { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + } + + &__grid-tablet { + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-bottom: 20px; + } + } + + &__nav--grid { + display: none; + + @include on-tablet { + display: none; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-column: 7 / 11; + } + } + + &__nav--grid:nth-of-type(1) { + display: none; + @include on-tablet { + display: none; + } + + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + padding: 80px 0 100px; + } + } + + &__links { + display: flex; + justify-content: space-between; + grid-column: 1 / 2; + + &:nth-of-type(2) { + display: flex; + justify-content: space-between; + box-sizing: border-box; + border-bottom: 1px solid #212121; + grid-column: 11 / 13; + } + } + + &__link:hover { + @include on-desktop { + border-bottom: 1px solid $colorBlue; + } + } + + &__button { + @extend %button; + + @include on-tablet { + width: 50%; + justify-content: center; + margin: auto; + } + + &:nth-of-type(1) { + @include on-tablet { + display: block; + width: 50%; + height: 48px; + position: fixed; + right: 25%; + bottom: 0%; + z-index: 1; + text-align: center; + padding: 10px; + margin: 30px auto; + } + + @include on-desktop { + display: none; + } + } + + &:nth-of-type(3) { + display: none; + + @include on-desktop { + display: flex; + grid-column: 11 / 13; + } + } + @include on-desktop { + display: none; + height: 48px; + width: 100%; + } + } +} diff --git a/src/components/OrderComplete/order-complete.html b/src/components/OrderComplete/order-complete.html new file mode 100644 index 000000000..c34a75ff5 --- /dev/null +++ b/src/components/OrderComplete/order-complete.html @@ -0,0 +1,65 @@ + + diff --git a/src/components/OrderComplete/order-complete.scss b/src/components/OrderComplete/order-complete.scss new file mode 100644 index 000000000..85e3312fd --- /dev/null +++ b/src/components/OrderComplete/order-complete.scss @@ -0,0 +1,58 @@ +.complete { + position: absolute; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + color: #fff; + height: 100vh; + overflow: hidden; + z-index: 3; + + &__button { + @extend %button; + + @include on-desktop { + width: 25%; + margin: auto; + } + } + + &__content { + padding: 0 20px; + + @include on-tablet { + padding: 0 34px; + } + + @include on-desktop { + padding: 0 200px; + } + } + + &__title { + font-weight: 900; + font-size: 26px; + line-height: 130%; + text-align: center; + text-transform: uppercase; + margin: 90px 0 18px; + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + + @include on-tablet { + font-size: 46px; + margin: 180px 30px 20px; + } + } + + &__paragraph { + text-align: center; + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 50px; + } + } +} diff --git a/src/components/Page/page.scss b/src/components/Page/page.scss new file mode 100644 index 000000000..eb0c4077e --- /dev/null +++ b/src/components/Page/page.scss @@ -0,0 +1,207 @@ +.page { + background: linear-gradient(100.83deg, #191536 0.67%, #000 100%); + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + overflow-x: hidden; + + &__home { + @extend %hover-scale; + + display: none; + z-index: 2; + cursor: pointer; + opacity: 1; + text-decoration: none; + transition: + transform 0.3s, + background-color 0.3s; + + @include on-tablet { + display: block; + background-image: url('images/arrow-home.svg'); + background-repeat: no-repeat; + background-position: 50%; + border: 1px solid #05c2df; + background-color: transparent; + width: 48px; + height: 48px; + border-radius: 50%; + font-size: 38px; + position: fixed; + right: 5%; + bottom: 20%; + opacity: 0; + } + + &:hover { + background-color: $colorBlue; + } + } + + &__legend { + font-weight: 400; + font-size: 14px; + line-height: 130%; + color: $colorGrey; + } + + &__fieldset { + border: none; + margin-bottom: 30px; + + @include on-desktop { + margin-bottom: 40px; + } + } + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + margin-bottom: 32px; + + &-blue { + display: inline; + font-weight: 400; + color: $colorBlue; + } + + @include on-tablet { + padding-top: 70px; + text-align: center; + } + + @include on-tablet { + padding-top: 100px; + text-align: center; + font-size: 36px; + line-height: 44px; + } + } + + &__body { + margin: 0; + + &--with { + &-menu { + overflow: hidden; + } + &-lang { + overflow: hidden; + } + &-help { + overflow: hidden; + } + &-buy { + overflow: hidden; + } + &-pay { + overflow: hidden; + } + &-complete { + overflow: hidden; + } + &-faq { + overflow: hidden; + } + } + } + + &__link { + display: block; + margin-bottom: 20px; + text-decoration: none; + color: #fff; + font-weight: 400; + font-size: 13px; + line-height: 150%; + + &:last-of-type { + margin-bottom: 0; + } + + &:hover { + color: $colorBlue; + } + + &-grey { + display: block; + margin-bottom: 20px; + text-decoration: none; + color: #929292; + font-weight: 400; + font-size: 13px; + line-height: 150%; + } + + @include on-tablet { + margin: 0; + } + } + + &__menu { + display: block; + position: fixed; + top: 0; + left: 0; + right: 0; + + transform: translateX(100%); + transition: transform 0.3s; + + &:target { + transform: translateX(0); + } + } + + &__menu--lang { + display: none; + } + + &__menu.page__menu--lang { + display: block; + } + + &__menu--faq { + display: none; + } + + &__menu.page__menu--faq { + display: block; + } + + &__menu--help { + display: none; + } + + &__menu.page__menu--help { + display: block; + } + + &__menu--buy { + display: none; + } + + &__menu.page__menu--buy { + display: block; + } + + &__menu--pay { + display: none; + } + + &__menu.page__menu--pay { + display: block; + } + + &__menu--complete { + display: none; + } + + &__menu.page__menu--complete { + display: block; + } +} diff --git a/src/components/Page/resets.scss b/src/components/Page/resets.scss new file mode 100644 index 000000000..90daba732 --- /dev/null +++ b/src/components/Page/resets.scss @@ -0,0 +1,30 @@ +html { + scroll-behavior: smooth; +} + +body { + position: relative; +} + +body, +a, +h1, +h2, +h3, +p, +fieldset, +input { + margin: 0; + padding: 0; +} + +*, +::after, +::before { + box-sizing: border-box; +} + +img { + max-width: 100%; + display: block; +} diff --git a/src/components/PayPanel/pay-panel.html b/src/components/PayPanel/pay-panel.html new file mode 100644 index 000000000..122574f97 --- /dev/null +++ b/src/components/PayPanel/pay-panel.html @@ -0,0 +1,151 @@ + + diff --git a/src/components/PayPanel/pay-panel.js b/src/components/PayPanel/pay-panel.js new file mode 100644 index 000000000..fa77dd011 --- /dev/null +++ b/src/components/PayPanel/pay-panel.js @@ -0,0 +1,26 @@ +'use strict'; + +export function initPayPanel() { + const expDate = document.getElementById('exp-date'); + + if (!expDate) { + return; + } + + expDate.addEventListener('input', () => { + const digits = expDate.value.replace(/\D/g, '').slice(0, 4); + let formatted = digits; + + if (digits.length > 2) { + formatted = `${digits.slice(0, 2)}/${digits.slice(2)}`; + } + + expDate.value = formatted; + }); + + expDate.addEventListener('keydown', (event) => { + if (event.key === 'Backspace' && expDate.value.endsWith('/')) { + expDate.value = expDate.value.slice(0, -1); + } + }); +} diff --git a/src/components/PayPanel/pay-panel.scss b/src/components/PayPanel/pay-panel.scss new file mode 100644 index 000000000..07f49dbef --- /dev/null +++ b/src/components/PayPanel/pay-panel.scss @@ -0,0 +1,136 @@ +.pay { + position: absolute; + background: linear-gradient(107.56deg, #191536 0%, #000 100%); + color: #fff; + height: 100vh; + overflow: hidden; + z-index: 3; + + &__card { + display: grid; + grid-template-columns: repeat(4, 1fr); + align-items: center; + align-content: center; + + @include on-tablet { + grid-template-columns: repeat(5, 1fr); + padding-top: 20px; + } + } + + &__input { + font-weight: 400; + font-size: 18px; + line-height: 130%; + letter-spacing: 0.2em; + display: block; + margin: auto; + width: 54px; + padding: 20px 0 10px; + background: none; + border: none; + outline: none; + color: #fff; + border-bottom: 2px solid #2f2f2f; + + &:hover { + border-bottom: 2px solid $colorBlue; + } + + &:target { + border-bottom: 2px solid $colorBlue; + } + + &::placeholder { + color: #2f2f2f; + } + + @include on-tablet { + padding: 0 0 10px; + } + + @include on-desktop { + font-size: 20px; + line-height: 130%; + width: 55px; + } + } + + &__price { + font-weight: 500; + font-size: 26px; + line-height: 31px; + color: $colorBlue; + + @include on-desktop { + margin-top: 10px; + } + } + + &__customer-info { + padding: 0 20px; + + @include on-tablet { + padding: 0 154px; + } + + @include on-desktop { + padding: 80px 0 0; + grid-column: 7 / 12; + } + } + + &__info { + @include on-desktop { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-gap: 20px; + padding: 20px 110px; + } + + &-place { + padding: 0 20px 20px; + + @include on-tablet { + padding: 0 154px 60px; + } + @include on-desktop { + padding: 0; + grid-column: 1 / 7; + } + } + } + + &__top { + display: flex; + justify-content: space-between; + color: $colorGrey; + + @include on-desktop { + display: grid; + grid-template-columns: repeat(6, 1fr); + padding-top: 30px; + grid-gap: 20px; + } + } + + &__subtitle { + text-align: center; + + @include on-tablet { + text-align: left; + } + } + + &__plastic-card { + @include on-tablet { + display: inline; + background-image: url('images/visa.svg'); + background-repeat: no-repeat; + background-size: 60%; + background-position: right center; + width: 100%; + padding-bottom: 40%; + } + } +} diff --git a/src/components/ScrollTop/scroll-top.html b/src/components/ScrollTop/scroll-top.html new file mode 100644 index 000000000..3c9449e7b --- /dev/null +++ b/src/components/ScrollTop/scroll-top.html @@ -0,0 +1,5 @@ + + diff --git a/src/components/ScrollTop/scroll-top.js b/src/components/ScrollTop/scroll-top.js new file mode 100644 index 000000000..4804342e2 --- /dev/null +++ b/src/components/ScrollTop/scroll-top.js @@ -0,0 +1,10 @@ +'use strict'; + +export function initScrollTop() { + document.querySelectorAll('.contact__arrow, .page__home').forEach((element) => { + element.addEventListener('click', (event) => { + event.preventDefault(); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + }); +} diff --git a/src/components/SideMenu/side-menu.html b/src/components/SideMenu/side-menu.html new file mode 100644 index 000000000..d84f17dfa --- /dev/null +++ b/src/components/SideMenu/side-menu.html @@ -0,0 +1,79 @@ + + diff --git a/src/components/SideMenu/side-menu.js b/src/components/SideMenu/side-menu.js new file mode 100644 index 000000000..6631eade4 --- /dev/null +++ b/src/components/SideMenu/side-menu.js @@ -0,0 +1,45 @@ +'use strict'; + +const bodyClassMap = { + '#menu': 'page__body--with-menu', + '#lang': 'page__body--with-lang', + '#help': 'page__body--with-help', + '#buy': 'page__body--with-buy', + '#pay': 'page__body--with-pay', + '#complete': 'page__body--with-complete', + '#faq': 'page__body--with-faq', +}; + +const menuClassMap = { + '#lang': '.lang', + '#faq': '.faq', + '#help': '.help', + '#buy': '.buy', + '#pay': '.pay', + '#complete': '.complete', +}; + +function updatePageState() { + const hash = window.location.hash; + + Object.values(bodyClassMap).forEach((className) => { + document.body.classList.remove(className); + }); + + Object.values(menuClassMap).forEach((selector) => { + document.querySelector(selector)?.classList.remove('page__menu'); + }); + + if (bodyClassMap[hash]) { + document.body.classList.add(bodyClassMap[hash]); + } + + if (menuClassMap[hash]) { + document.querySelector(menuClassMap[hash])?.classList.add('page__menu'); + } +} + +export function initSideMenu() { + window.addEventListener('hashchange', updatePageState); + window.addEventListener('load', updatePageState); +} diff --git a/src/components/SideMenu/side-menu.scss b/src/components/SideMenu/side-menu.scss new file mode 100644 index 000000000..150090052 --- /dev/null +++ b/src/components/SideMenu/side-menu.scss @@ -0,0 +1,76 @@ +.menu { + position: absolute; + background-color: #191536; + color: #fff; + height: 100vh; + z-index: 3; + + &__top { + position: relative; + box-sizing: border-box; + display: flex; + justify-content: space-between; + margin: 20px 20px 38px; + + @include on-tablet { + margin: 30px 34px 38px; + } + } + + &__list { + margin: 0 0 30px; + padding: 0; + list-style: none; + + @include on-desktop { + margin: 0 0 48px; + } + } + + &__link { + display: block; + padding: 11px 20px; + color: inherit; + font-weight: 500; + font-size: 21px; + line-height: 130%; + text-decoration: none; + letter-spacing: 2px; + text-transform: uppercase; + + &:hover { + color: $colorBlue; + background-color: #110e25; + } + + @include on-tablet { + padding: 11px 154px; + } + } + + &__call { + display: block; + width: max-content; + font-weight: bold; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + text-transform: uppercase; + color: #fff; + text-decoration: none; + margin-bottom: 8px; + + &:nth-child(2n) { + margin-bottom: 16px; + } + + &:last-child { + margin-bottom: 0; + } + + &--action { + padding-bottom: 8px; + border-bottom: 1px solid #fff; + } + } +} diff --git a/src/components/TechSpecs/tech-specs.html b/src/components/TechSpecs/tech-specs.html new file mode 100644 index 000000000..3ce024044 --- /dev/null +++ b/src/components/TechSpecs/tech-specs.html @@ -0,0 +1,106 @@ + +
+
+

+ TECH +
SPECS
+

+
+
+ device + + × + + + × + + + × + +
+
+

SENSOR

+

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

+
+ +
+
+
+

CONNECTION

+

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

+
+ +
+
+
+

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 +
+

+
+ +
+
+
+
+
+
+
+
+
diff --git a/src/components/TechSpecs/tech-specs.scss b/src/components/TechSpecs/tech-specs.scss new file mode 100644 index 000000000..3674cc7dc --- /dev/null +++ b/src/components/TechSpecs/tech-specs.scss @@ -0,0 +1,258 @@ +.tech { + background: #05040b; + + &__title { + font-weight: 900; + font-size: 21px; + line-height: 25px; + color: #fff; + margin-bottom: 32px; + padding-top: 50px; + + @include on-tablet { + padding-top: 80px; + } + + @include on-desktop { + font-size: 36px; + line-height: 44px; + text-align: right; + padding-top: 100px; + margin-bottom: 140px; + } + } + + &__image { + width: 195px; + height: 195px; + position: relative; + background-image: url('images/device.png'); + background-repeat: no-repeat; + background-size: 100%; + margin: auto; + + @include on-tablet { + width: 352px; + height: 352px; + } + + @include on-desktop { + width: 294px; + height: 294px; + } + } + + &__close { + margin: 0; + align-self: flex-start; + width: 15px; + height: 15px; + } + + &__info { + max-width: 360px; + margin: 0 auto; + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 0 40px; + } + + &__main { + @extend %hover-scale; + + @include on-desktop { + padding-bottom: 80px; + } + } + + &__button { + text-decoration: none; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + border-radius: 50%; + background-color: #05c2df; + font-size: 20px; + color: #fff; + font-weight: 100; + transform: rotate(45deg); + + &--sensor { + top: 0%; + left: 35%; + } + + &--batterries { + left: 65%; + } + + &--connection { + bottom: 0; + left: 5%; + } + + @include on-desktop { + display: none; + } + } + + &--cross { + position: relative; + display: block; + height: 20px; + text-decoration: none; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + align-self: flex-start; + width: 20px; + background-image: url('images/cross.svg'); + margin: 0 0 0 auto; + + @include on-desktop { + display: none; + } + } + + &__description { + display: none; + position: absolute; + top: -10%; + left: 0; + padding: 20px; + max-width: 270px; + background-color: rgba(25, 21, 54, 0.9); + + &:target { + display: flex; + } + + &-name { + font-style: normal; + font-weight: 900; + font-size: 15px; + line-height: 22px; + color: #fff; + margin-bottom: 10px; + + @include on-desktop { + font-size: 18px; + } + } + + &-text { + color: #929292; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + @include on-desktop { + font-size: 16px; + } + } + + @include on-tablet { + width: 300px; + } + + @include on-desktop { + display: flex; + background-color: rgba(25, 21, 54, 0); + } + + &--batterries { + @include on-tablet { + top: 30%; + left: 60%; + } + + @include on-desktop { + top: -35%; + left: 104%; + } + } + + &--sensor { + @include on-tablet { + top: -10%; + left: -30%; + } + + @include on-desktop { + top: -28%; + left: -95%; + } + } + + &--connection { + @include on-tablet { + top: 70%; + left: -55%; + } + + @include on-desktop { + top: 57%; + left: -75%; + } + } + } + + &__vectore { + display: none; + position: absolute; + + &--1 { + @include on-desktop { + top: -20%; + right: 36%; + display: block; + background: url('images/Vector.svg') no-repeat; + background-position: 50%; + width: 500px; + height: 80px; + } + } + + &--2 { + @include on-desktop { + top: 20%; + left: -30%; + display: block; + background: url('images/Vector-2.svg') no-repeat; + background-position: 50%; + width: 150px; + height: 150px; + } + } + + &--3 { + @include on-desktop { + top: -25%; + left: 50%; + display: block; + background: url('images/Vector-3.svg') no-repeat; + background-position: 50%; + width: 200px; + height: 250px; + } + } + + &--4 { + @include on-desktop { + top: 4%; + left: -14%; + display: block; + background: url('images/Ellipse-2.svg') no-repeat; + background-position: 50%; + width: 200px; + height: 250px; + } + } + } +} diff --git a/src/components/VideoModal/video-modal.html b/src/components/VideoModal/video-modal.html new file mode 100644 index 000000000..bfb2f1d7c --- /dev/null +++ b/src/components/VideoModal/video-modal.html @@ -0,0 +1,24 @@ +
+
+ × + +
+
diff --git a/src/components/VideoModal/video-modal.js b/src/components/VideoModal/video-modal.js new file mode 100644 index 000000000..191b07bd3 --- /dev/null +++ b/src/components/VideoModal/video-modal.js @@ -0,0 +1,81 @@ +'use strict'; + +/* eslint-disable no-undef */ + +let videoplayer; + +function initYouTubePlayer() { + if (typeof YT !== 'undefined' && YT.Player) { + videoplayer = new YT.Player('videoPlayer', { + events: { + onReady: onYouTubePlayerReady, + }, + }); + } +} + +function onYouTubePlayerReady() { + if (videoplayer && videoplayer.playVideo) { + videoplayer.playVideo(); + } +} + +function openVideo(event) { + event.preventDefault(); + + const video = document.getElementById('video-source'); + const videoScreen = document.getElementById('videoPlayer'); + + if (!video || !videoScreen) { + return; + } + + video.style.display = 'flex'; + videoScreen.src = 'https://www.youtube.com/embed/26nx1zTAthw?enablejsapi=1&autoplay=1'; + initYouTubePlayer(); +} + +function closeVideo() { + const video = document.getElementById('video-source'); + const videoScreen = document.getElementById('videoPlayer'); + + if (!video || !videoScreen) { + return; + } + + video.style.display = 'none'; + videoScreen.src = ''; + + if (videoplayer && videoplayer.stopVideo) { + videoplayer.stopVideo(); + } +} + +export function initVideoModal() { + const video = document.getElementById('video-source'); + const btnOpen = document.getElementById('video-link'); + const btnOpen2 = document.getElementById('video-link-2'); + const btnClose = document.querySelector('.close'); + + if (btnOpen) { + btnOpen.addEventListener('click', openVideo); + } + + if (btnOpen2) { + btnOpen2.addEventListener('click', openVideo); + } + + if (btnClose) { + btnClose.addEventListener('click', closeVideo); + } + + if (video) { + window.addEventListener('click', (event) => { + if (event.target === video) { + closeVideo(); + } + }); + } + + window.onYouTubeIframeAPIReady = initYouTubePlayer; +} diff --git a/src/components/VideoModal/video-modal.scss b/src/components/VideoModal/video-modal.scss new file mode 100644 index 000000000..5f4bfef45 --- /dev/null +++ b/src/components/VideoModal/video-modal.scss @@ -0,0 +1,65 @@ +.video { + display: none; + justify-content: center; + align-items: center; + position: fixed; + z-index: 9999; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.8); + &__link { + display: block; + height: 70px; + background-image: url('images/play_button.svg'); + background-repeat: no-repeat; + background-position: center; + margin: 0 0 24px; + transition: transform 0.5s; + + &:hover { + transform: scale(110%); + background-image: url('images/play_button-hover.svg'); + } + + @include on-tablet { + margin-bottom: 0; + background-position: left; + } + } + &-content { + display: flex; + flex-direction: column; + margin: auto; + padding: 20px; + width: 80%; + height: 50%; + max-width: 800px; + background-color: #fefefe; + border-radius: 5px; + text-align: center; + } + &__iframe { + width: 100%; + height: 100%; + } +} + +.close { + position: absolute; + top: 10px; + right: 20px; + color: #aaa; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: $colorBlue; + text-decoration: none; + cursor: pointer; +} diff --git a/src/images/Ellipse-2.svg b/src/images/Ellipse-2.svg new file mode 100644 index 000000000..86595c33e --- /dev/null +++ b/src/images/Ellipse-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Ellipse-active.svg b/src/images/Ellipse-active.svg new file mode 100644 index 000000000..6564bb55a --- /dev/null +++ b/src/images/Ellipse-active.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Ellipse.svg b/src/images/Ellipse.svg new file mode 100644 index 000000000..8ce25b68c --- /dev/null +++ b/src/images/Ellipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Polygon.svg b/src/images/Polygon.svg new file mode 100644 index 000000000..1782f2a77 --- /dev/null +++ b/src/images/Polygon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-2.svg b/src/images/Vector-2.svg new file mode 100644 index 000000000..f3a22af45 --- /dev/null +++ b/src/images/Vector-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector-3.svg b/src/images/Vector-3.svg new file mode 100644 index 000000000..f6cbafffb --- /dev/null +++ b/src/images/Vector-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Vector.svg b/src/images/Vector.svg new file mode 100644 index 000000000..f407e1dfd --- /dev/null +++ b/src/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/about-us.svg b/src/images/about-us.svg new file mode 100644 index 000000000..b568064d9 --- /dev/null +++ b/src/images/about-us.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/arrow-home.svg b/src/images/arrow-home.svg new file mode 100644 index 000000000..c70db0128 --- /dev/null +++ b/src/images/arrow-home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrow.svg b/src/images/arrow.svg new file mode 100644 index 000000000..6d4ea0730 --- /dev/null +++ b/src/images/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/compatible.svg b/src/images/compatible.svg new file mode 100644 index 000000000..bdeab25ab --- /dev/null +++ b/src/images/compatible.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/control.svg b/src/images/control.svg new file mode 100644 index 000000000..b2c125b74 --- /dev/null +++ b/src/images/control.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/cross.svg b/src/images/cross.svg new file mode 100644 index 000000000..1d3853ef7 --- /dev/null +++ b/src/images/cross.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/device.png b/src/images/device.png new file mode 100644 index 000000000..5f34e1ee2 Binary files /dev/null and b/src/images/device.png differ diff --git a/src/images/education.svg b/src/images/education.svg new file mode 100644 index 000000000..890e94ae6 --- /dev/null +++ b/src/images/education.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/images/fb.svg b/src/images/fb.svg new file mode 100644 index 000000000..e4de883e6 --- /dev/null +++ b/src/images/fb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/fitness.svg b/src/images/fitness.svg new file mode 100644 index 000000000..6c42bb400 --- /dev/null +++ b/src/images/fitness.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/gadget.png b/src/images/gadget.png new file mode 100644 index 000000000..210ab2eed Binary files /dev/null and b/src/images/gadget.png differ diff --git a/src/images/header.png b/src/images/header.png new file mode 100644 index 000000000..f63ced28a Binary files /dev/null and b/src/images/header.png differ diff --git a/src/images/house.svg b/src/images/house.svg new file mode 100644 index 000000000..eb0b07280 --- /dev/null +++ b/src/images/house.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/icon.svg b/src/images/icon.svg new file mode 100644 index 000000000..61cb0d549 --- /dev/null +++ b/src/images/icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/link-circle-center.be026755.png b/src/images/link-circle-center.be026755.png new file mode 100644 index 000000000..62f6b374f Binary files /dev/null and b/src/images/link-circle-center.be026755.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..89871ed33 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/mastercard.svg b/src/images/mastercard.svg new file mode 100644 index 000000000..67e199b82 --- /dev/null +++ b/src/images/mastercard.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/menu.svg b/src/images/menu.svg new file mode 100644 index 000000000..12fad17f9 --- /dev/null +++ b/src/images/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/more-clear.svg b/src/images/more-clear.svg new file mode 100644 index 000000000..5cbb538d0 --- /dev/null +++ b/src/images/more-clear.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/more-icon.svg b/src/images/more-icon.svg new file mode 100644 index 000000000..a27045fda --- /dev/null +++ b/src/images/more-icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/network.svg b/src/images/network.svg new file mode 100644 index 000000000..3ed3402f8 --- /dev/null +++ b/src/images/network.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/play_button-hover.svg b/src/images/play_button-hover.svg new file mode 100644 index 000000000..39b113b6c --- /dev/null +++ b/src/images/play_button-hover.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/play_button.svg b/src/images/play_button.svg new file mode 100644 index 000000000..fbdf596c1 --- /dev/null +++ b/src/images/play_button.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/red.svg b/src/images/red.svg new file mode 100644 index 000000000..53bade5b8 --- /dev/null +++ b/src/images/red.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/sensors.svg b/src/images/sensors.svg new file mode 100644 index 000000000..7b5dfbfef --- /dev/null +++ b/src/images/sensors.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/images/social.svg b/src/images/social.svg new file mode 100644 index 000000000..3ed3402f8 --- /dev/null +++ b/src/images/social.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/tw.svg b/src/images/tw.svg new file mode 100644 index 000000000..084900b8e --- /dev/null +++ b/src/images/tw.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/visa.svg b/src/images/visa.svg new file mode 100644 index 000000000..0a97fb763 --- /dev/null +++ b/src/images/visa.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/yt.svg b/src/images/yt.svg new file mode 100644 index 000000000..2d24eb43b --- /dev/null +++ b/src/images/yt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/index.html b/src/index.html new file mode 100644 index 000000000..0f150e1a2 --- /dev/null +++ b/src/index.html @@ -0,0 +1,58 @@ + + + + + + KatVR + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2af7d38e2 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,12 @@ -'use strict'; +import { initSideMenu } from '../components/SideMenu/side-menu.js'; +import { initContactForm, initBuyPanel } from '../components/ContactForm/contact-form.js'; +import { initVideoModal } from '../components/VideoModal/video-modal.js'; +import { initScrollTop } from '../components/ScrollTop/scroll-top.js'; +import { initPayPanel } from '../components/PayPanel/pay-panel.js'; + +initSideMenu(); +initContactForm(); +initBuyPanel(); +initVideoModal(); +initScrollTop(); +initPayPanel(); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 619b8c52b..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/FontFont_FF.Mark.Pro.otf') format('otf'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..1a4543f43 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import '../components/Page/resets'; +@import '../components/Container/container'; +@import '../components/Page/page'; +@import '../components/Icon/icon'; +@import '../components/Button/button'; +@import '../components/CustomSelect/custom-select'; +@import '../components/NavBar/navbar'; +@import '../components/SideMenu/side-menu'; +@import '../components/LangMenu/lang-menu'; +@import '../components/FaqPanel/faq-panel'; +@import '../components/HelpPanel/help-panel'; +@import '../components/BuyPanel/buy-panel'; +@import '../components/PayPanel/pay-panel'; +@import '../components/OrderComplete/order-complete'; +@import '../components/VideoModal/video-modal'; +@import '../components/MoreThanGaming/more-than-gaming'; +@import '../components/AboutProduct/about-product'; +@import '../components/TechSpecs/tech-specs'; +@import '../components/Benefits/benefits'; +@import '../components/ContactForm/contact-form'; +@import '../components/Footer/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..3d960dda1 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,56 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; +@import 'vars'; + +%bar { + background-color: #fff; + transition: 0.4s; + height: 1px; +} + +%button { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 56px; + border: 1px solid transparent; + border-radius: 4px; + background-color: $colorBlue; + text-decoration: none; + cursor: pointer; + font-family: inherit; + font-weight: 500; + font-size: 14px; + color: #fff; + transition: 0.3s; + + &:hover { + background-color: #fff; + color: $colorBlue; + } + + &:active { + background-color: #191536; + color: #2f2f2f; + } +} + +%after { + display: none; + content: ''; + position: absolute; + bottom: 0; + height: 4px; + width: 0.4%; + background-color: #00acdc; + border-radius: 8px; +} + +%hover-scale { + transition: transform 0.3s; + cursor: pointer; + + &:hover { + transform: scale(1.1); + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..b7f6c4a66 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,5 +1,24 @@ +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-design { + @media (min-width: 1440px) { + @content; + } +} + @mixin hover($_property, $_toValue) { transition: #{$_property} 0.3s; + &:hover { #{$_property}: $_toValue; } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..682f6ee36 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,2 @@ -$c-gray: #eee; +$colorBlue: #05c2df; +$colorGrey: #929292; diff --git a/tools/extract-html-partials.mjs b/tools/extract-html-partials.mjs new file mode 100644 index 000000000..becd76416 --- /dev/null +++ b/tools/extract-html-partials.mjs @@ -0,0 +1,40 @@ +import fs from 'fs'; +import { dirname, resolve } from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const root = resolve(__dirname, '../src'); +const indexPath = resolve(root, 'index.html'); +const lines = fs.readFileSync(indexPath, 'utf-8').split(/\r?\n/); + +function slice(start, end) { + return lines.slice(start - 1, end).join('\n'); +} + +const partials = [ + ['components/NavBar/navbar.html', 37, 163], + ['components/SideMenu/side-menu.html', 165, 242], + ['components/LangMenu/lang-menu.html', 244, 341], + ['components/FaqPanel/faq-panel.html', 343, 417], + ['components/HelpPanel/help-panel.html', 419, 509], + ['components/BuyPanel/buy-panel.html', 511, 688], + ['components/PayPanel/pay-panel.html', 690, 837], + ['components/OrderComplete/order-complete.html', 839, 902], + ['components/MoreThanGaming/more-than-gaming.html', 905, 966], + ['components/AboutProduct/about-product.html', 968, 1044], + ['components/TechSpecs/tech-specs.html', 1046, 1150], + ['components/Benefits/benefits.html', 1152, 1199], + ['components/ContactForm/contact-form.html', 1201, 1288], + ['components/ScrollTop/scroll-top.html', 1291, 1294], + ['components/Footer/footer.html', 1296, 1427], + ['components/VideoModal/video-modal.html', 1428, 1451], +]; + +partials.forEach(([filePath, start, end]) => { + const fullPath = resolve(root, filePath); + + fs.mkdirSync(dirname(fullPath), { recursive: true }); + fs.writeFileSync(fullPath, `${slice(start, end)}\n`); +}); + +console.log(`Extracted ${partials.length} HTML partials.`); diff --git a/vite.config.mjs b/vite.config.mjs new file mode 100644 index 000000000..cce84292f --- /dev/null +++ b/vite.config.mjs @@ -0,0 +1,49 @@ +import fs from 'fs'; +import { defineConfig } from 'vite'; +import { dirname, resolve } from 'path'; +import { fileURLToPath } from 'url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const srcRoot = resolve(__dirname, 'src'); + +function processIncludes(html, root) { + return html.replace(//g, (_, includePath) => { + const fullPath = resolve(root, includePath.trim()); + const content = fs.readFileSync(fullPath, 'utf-8'); + + return processIncludes(content, root); + }); +} + +function htmlInclude() { + return { + name: 'html-include', + transformIndexHtml: { + order: 'pre', + handler(html) { + return processIncludes(html, srcRoot); + }, + }, + }; +} + +export default defineConfig({ + root: 'src', + plugins: [htmlInclude()], + resolve: { + alias: { + images: resolve(__dirname, 'src/images'), + }, + }, + css: { + preprocessorOptions: { + scss: { + loadPaths: [srcRoot], + }, + }, + }, + build: { + outDir: '../dist', + emptyOutDir: true, + }, +});