diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml new file mode 100644 index 0000000..1421ac7 --- /dev/null +++ b/.github/workflows/tests.yml @@ -0,0 +1,34 @@ +name: Tests + +on: + push: + branches: + - '**' + tags: + - '**' + + +jobs: + tests: + runs-on: ubuntu-latest + steps: + - name: Set up GitHub Actions + uses: actions/checkout@v3 + - name: Use Node.js 14.x + uses: actions/setup-node@v3 + with: + node-version: 14.x + - name: Check if the repository is private + run: exit 1 + if: ${{github.event.repository.private}} + - name: Get testing lib + run: set -eu && git clone --branch main --single-branch --depth 1 https://github.com/Yandex-Practicum/tests-selfmade-project-6-public.git + - name: Run the tests + run: bash tests-selfmade-project-6-public/run.sh + - name: Upload layout-compare + uses: actions/upload-artifact@v3 + with: + name: layout-compare + path: tests-selfmade-project-6-public/outputs/ + - name: Show test results + run: bash tests-selfmade-project-6-public/result.sh diff --git a/fonts/IBMPlexMono-Bold.woff b/fonts/IBMPlexMono-Bold.woff new file mode 100644 index 0000000..0bca0c4 Binary files /dev/null and b/fonts/IBMPlexMono-Bold.woff differ diff --git a/fonts/IBMPlexMono-Regular.woff b/fonts/IBMPlexMono-Regular.woff new file mode 100644 index 0000000..7eb68c0 Binary files /dev/null and b/fonts/IBMPlexMono-Regular.woff differ diff --git a/fonts/fonts.css b/fonts/fonts.css new file mode 100644 index 0000000..741e3ed --- /dev/null +++ b/fonts/fonts.css @@ -0,0 +1,13 @@ +@font-face { + font-family: 'IBM Plex mono'; + src: url(./IBMPlexMono-Regular.woff) format('woff'); + font-weight: normal; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex mono'; + src: url(./IBMPlexMono-Bold.woff) format('woff'); + font-weight: bold; + font-display: swap; +} diff --git a/images/books.png b/images/books.png new file mode 100644 index 0000000..b89fa5c Binary files /dev/null and b/images/books.png differ diff --git a/images/cover-image-dark.png b/images/cover-image-dark.png new file mode 100644 index 0000000..7c55c0e Binary files /dev/null and b/images/cover-image-dark.png differ diff --git a/images/cover-image-light.png b/images/cover-image-light.png new file mode 100644 index 0000000..2b07ea0 Binary files /dev/null and b/images/cover-image-light.png differ diff --git a/images/cover-image.png b/images/cover-image.png new file mode 100644 index 0000000..1133e82 Binary files /dev/null and b/images/cover-image.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..cc5309b Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/favicon.svg b/images/favicon.svg new file mode 100644 index 0000000..cdca3e4 --- /dev/null +++ b/images/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/images/ice-cream.png b/images/ice-cream.png new file mode 100644 index 0000000..3a547a0 Binary files /dev/null and b/images/ice-cream.png differ diff --git a/images/mobile-icon.png b/images/mobile-icon.png new file mode 100644 index 0000000..603f643 Binary files /dev/null and b/images/mobile-icon.png differ diff --git a/images/street.png b/images/street.png new file mode 100644 index 0000000..5402430 Binary files /dev/null and b/images/street.png differ diff --git a/images/sunset.png b/images/sunset.png new file mode 100644 index 0000000..f7670ae Binary files /dev/null and b/images/sunset.png differ diff --git a/images/tape.png b/images/tape.png new file mode 100644 index 0000000..58be9f7 Binary files /dev/null and b/images/tape.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..23944e8 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + Сложно сосредоточиться + + +
+ +
+ + + diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..0675bec --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,48 @@ +const themeButtons = document.querySelectorAll('.header__theme-menu-button'); + +themeButtons.forEach((button) => { + button.addEventListener('click', () => { + themeButtons.forEach((btn) => { + btn.classList.remove('header__theme-menu-button_active'); + btn.removeAttribute('disabled'); + }); + if ( + [...button.classList].includes('header__theme-menu-button_type_light') + ) { + changeTheme('light'); + } else if ( + [...button.classList].includes('header__theme-menu-button_type_dark') + ) { + changeTheme('dark'); + } else { + changeTheme('auto'); + } + button.classList.add('header__theme-menu-button_active'); + button.setAttribute('disabled', true); + }); +}); + +function changeTheme(theme) { + document.body.className = 'page'; + document.body.classList.add(`theme_${theme}`); + localStorage.setItem('theme', theme); +} + +function initTheme() { + const theme = localStorage.getItem('theme'); + if (theme) { + changeTheme(theme); + themeButtons.forEach((btn) => { + btn.classList.remove('header__theme-menu-button_active'); + btn.removeAttribute('disabled'); + }); + document + .querySelector(`.header__theme-menu-button_type_${theme}`) + .classList.add('header__theme-menu-button_active'); + document + .querySelector(`.header__theme-menu-button_type_${theme}`) + .setAttribute('disabled', true); + } +} + +initTheme(); diff --git a/styles/dark.css b/styles/dark.css new file mode 100644 index 0000000..eb9daf6 --- /dev/null +++ b/styles/dark.css @@ -0,0 +1,12 @@ +/* + Специально для тёмной темы при наличии класса, + здесь окажутся стили, которые нужно переопределить принудительно, + переключая тему +*/ + +.page.theme_dark { + /* сохраните этот селектор в приведённом виде. + Так стили написанные ниже будут иметь больший вес, + чем стили в медиазапросе предпочтений пользователя + */ +} diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..012220c --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,42 @@ +/* Глобальные стили для проекта, их можно дополнять и менять по желанию */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + min-inline-size: 375px; + max-inline-size: 1440px; + margin: 0 auto; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +picture { + margin: 0; + padding: 0; +} + +button, +a { + color: currentColor; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} diff --git a/styles/light.css b/styles/light.css new file mode 100644 index 0000000..f3d55e7 --- /dev/null +++ b/styles/light.css @@ -0,0 +1,12 @@ +/* + Специально для светлой темы при наличии класса. + Здесь окажутся стили, которые нужно переопределить принудительно, + переключая тему +*/ + +.page.theme_light { + /* сохраните этот селектор в приведённом виде. + Так стили написанные ниже будут иметь больший вес, + чем стили в медиазапросе предпочтений пользователя + */ +} diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..d0e2027 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,5 @@ +/* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */ + +.page { + /* сохраните в разметке и стилях класс page. На его основе работает скрипт. */ +} diff --git a/styles/variables.css b/styles/variables.css new file mode 100644 index 0000000..9cef8ca --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,4 @@ +/* + Переменные для вашего проекта + и их переопределение под различные устройства +*/