Initial commit

VitalyChy · Feb 6, 2024 · be706f6 · be706f6
commit be706f6
Show file tree

Hide file tree

Showing 22 changed files with 217 additions and 0 deletions.
diff --git a/.github/workflows/tests.yml 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
diff --git a/fonts/IBMPlexMono-Regular.woff b/fonts/IBMPlexMono-Regular.woff
diff --git a/fonts/fonts.css 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
diff --git a/images/cover-image-dark.png b/images/cover-image-dark.png
diff --git a/images/cover-image-light.png b/images/cover-image-light.png
diff --git a/images/cover-image.png b/images/cover-image.png
diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/favicon.svg b/images/favicon.svg
diff --git a/images/ice-cream.png b/images/ice-cream.png
diff --git a/images/mobile-icon.png b/images/mobile-icon.png
diff --git a/images/street.png b/images/street.png
diff --git a/images/sunset.png b/images/sunset.png
diff --git a/images/tape.png b/images/tape.png
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Сложно сосредоточиться</title>
+  </head>
+  <body class="page">
+    <header class="header decorated-zone">
+      <nav class="header__theme-menu">
+        <ul class="header__theme-menu-list">
+          <li class="header__theme-menu-item">
+            <button
+              class="header__theme-menu-button header__theme-menu-button_type_light"
+            >
+              День
+            </button>
+          </li>
+          <li class="header__theme-menu-item">
+            <button
+              class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_auto"
+              disabled
+            >
+              Авто
+            </button>
+          </li>
+          <li class="header__theme-menu-item">
+            <button
+              class="header__theme-menu-button header__theme-menu-button_type_dark"
+            >
+              Неон
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <script src="./scripts/script.js"></script>
+  </body>
+</html>
diff --git a/scripts/script.js 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
@@ -0,0 +1,12 @@
+/*
+  Специально для тёмной темы при наличии класса,
+  здесь окажутся стили, которые нужно переопределить принудительно,
+  переключая тему
+*/
+
+.page.theme_dark {
+  /* сохраните этот селектор в приведённом виде.
+    Так стили написанные ниже будут иметь больший вес,
+    чем стили в медиазапросе предпочтений пользователя
+  */
+}
diff --git a/styles/globals.css 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
@@ -0,0 +1,12 @@
+/*
+  Специально для светлой темы при наличии класса.
+  Здесь окажутся стили, которые нужно переопределить принудительно,
+  переключая тему
+*/
+
+.page.theme_light {
+  /* сохраните этот селектор в приведённом виде.
+    Так стили написанные ниже будут иметь больший вес,
+    чем стили в медиазапросе предпочтений пользователя
+  */
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,5 @@
+/* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */
+
+.page {
+  /* сохраните в разметке и стилях класс page. На его основе работает скрипт. */
+}
diff --git a/styles/variables.css b/styles/variables.css
@@ -0,0 +1,4 @@
+/*
+  Переменные для вашего проекта
+  и их переопределение под различные устройства
+*/