Skip to content

Commit

Permalink
Upd
Browse files Browse the repository at this point in the history
  • Loading branch information
Nickolay.Vinokurov committed Oct 31, 2023
1 parent 6a18c7a commit 354526b
Show file tree
Hide file tree
Showing 6 changed files with 321 additions and 31 deletions.
180 changes: 179 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<title>Сложно сосредоточиться</title>
</head>
<body class="page">
<header class="header decorated-zone">
<header class="header decorated-zone corner">
<nav class="header__theme-menu">
<ul class="header__theme-menu-list">
<li class="header__theme-menu-item">
Expand Down Expand Up @@ -48,7 +48,185 @@
<h1 class="title">
no focus
</h1>
<div class="header__content title-decore">
<p class="header__content__text">Что делать, когда не можешь делать ничего</p>
<p class="header__content__text">Или почему нам так сложно сконцентрироваться, особенно когда очень надо</p>
</div>
</header>
<main class="main">
<section class="section section__two-columns">
<h2 class="section-title">
Почему сосредоточиться так сложно
</h2>
<article class="article">
<h3 class="article-title title-decore">
Многозадачность
</h3>
<p class="article-text">
Особенно сложно сосредоточиться, когда задач много и все они — важные.
Где же легендарная многозадачность, когда она так нужна вам (и всем нанимающим
менеджерам этого мира)? А дело в том, что её просто не существует. Исследователи выяснили,
что мозгу тяжело концентрироваться даже на двух делах одновременно. А когда в поле внимания
попадает несколько важных задач, организм паникует и выделяет кортизол и адреналин
— «гормоны стресса». Из-за этого мы работаем невнимательно: ошибаемся и быстро устаём.
</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Дофамин
</h3>
<p class="article-text">
С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей невозможности
сосредоточиться замешана и полная противоположность стрессу — дофамин. Это вещество
участвует в системе вознаграждения мозга. Причём тут он? Мы часто отвлекаемся от
важной задачи на что-то более «приятное» для мозгов. Например, смотрим лайки в
соцсетях. В это время и выделяется дофамин — и мы чувствуем удовольствие. Получается
замкнутый круг: чем больше отвлекаешься, тем больше удовольствия получаешь.
</p>
</article>
</section>
<section class="section section__three-columns">
<h2 class="section-title">
Что снижает концентрацию внимания?
</h2>
<article class="article">
<h3 class="article-title title-decore">
Многозадачность
</h3>
<p class="article-text">
Как концентрация может снижаться из-за… концентрации? Любая стрессовая ситуация
(и резко меняющийся мир в целом) заставляет наш мозг постоянно «сканировать»
окружающую среду на предмет опасности. Например, читать новости вместо работы.
Но быть собранными всё время — невозможно. Концентрация — мышца, и она может не
выдержать, если не давать ей отдохнуть.</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Еда
</h3>
<p class="article-text">
«Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно доставляют в мозг
энергию и помогают ему лучше работать. Но уходит эта энергия также быстро, как и
приходит. А мы в результате попадаем на «углеводные качели»: как только действие
«быстрых углеводов» заканчивается, мы чувствуем усталость и сонливость. И хотим
ещё больше быстрых углеводов.</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Гаджеты
</h3>
<p class="article-text">
Да-да, это та самая ситуация, когда на экране ноутбука — код, в наушниках —
подкаст, а на компьютере фоном — ещё и видео с забавными утятами. В результате
мозг пытается переключиться с одной задачи на другую — и просто не может. А чтобы
вернуться к состоянию полной концентрации, человеку в среднем нужно 20 минут. Вот
и получается, что чем больше времени мы проводим в гаджетах, тем больше времени
затем нужно, чтобы вернуться к работе.
</article>
</section>
<section class="section section__two-columns">
<h2 class="section-title">
Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх секунд)
</h2>
<article class="article">
<h3 class="article-title title-decore">
5 простых (на самом деле не очень) советов
</h3>
<h3 class="article-title title-decore">
Представьте небо и облака
</h3>
<p class="article-text">
Или листья в ручье. Тут дело в лёгкой медитации, которая помогает успокоиться.
Ведь часто именно тревожные мысли о сложных задачах как раз и мешают эти сложные
задачи делать. В такие моменты можно закрыть глаза и представить, что чистое небо —
это вы, а облака — тревожные мысли. И сколько бы их ни было — ясное небо всегда будет
где-то там, за тучами, и никуда не денется. Это упражнение поможет вернуться в настоящий
момент, а не волноваться о потенциальных проблемах из будущего.
</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Включите музыку
</h3>
<p class="article-text">
Но не любую, и не любимую. Любимая может быть связана с сильными положительными эмоциями,
которые тоже очень сильно отвлекают. Подойдёт тихая, спокойная, умеренно-ритмичная. Можно
вообще попробовать включить плейлист в «белым шумом» или нейромузыкой.
</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Прогуляйтесь
</h3>
<p class="article-text">
Или даже пробегитесь. Лучше найти парк или лес: один эксперимент показал, что созерцание природы
повышает концентрацию, в то время как после просмотра городских пейзажей она наоборот понижается.
Можно совместить прогулку с физическими упражнениями или бегом — так в мозг поступит ещё больше
кислорода и он будет лучше работать. Но и простая двадцатиминутная прогулка — тоже отличный вариант.
</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Хорошо ешьте
</h3>
<p class="article-text">
Мы — не ваша бабушка, но это правда важно. Выбирайте продукты, которые препятствуют резким скачкам
сахара в крови. Например, с высоким содержанием клетчатки: овощи, ягоды, бобовые (нут, чечевица,
фасоль), коричневый рис, хлеб из цельнозерновой пшеницы.
</p>
</article>
<article class="article">
<h3 class="article-title title-decore">
Читайте
</h3>
<p class="article-text">
Настоящие бумажные книги. Это правда помогает с концентрацией: чтобы прочитать пост в соцсети,
достаточно нескольких минут или даже секунд. А вот интересная книга способна затянуть и на
несколько часов и круто тренирует направленное внимание.
</p>
</article>
</section>
<section class="section section__gallery">
<h3 class="article-title title-decore">
А можно в картинках?
</h3>
<img
src="./images/sunset.png"
alt="Закат"
class="gallery__image"
loading="lazy"
/>
<img
src="./images/ice-cream.png"
alt="Мороженное"
class="gallery__image"
loading="lazy"
/>
<img
src="./images/tape.png"
alt="Касета"
class="gallery__image"
loading="lazy"
/>
<img
src="./images/books.png"
alt="Книги"
class="gallery__image"
loading="lazy"
/>
<img
src="./images/street.png"
alt="Улица"
class="gallery__image"
loading="lazy"
/>
</section>
</main>
<footer class="footer corner">
<h2 class="title">
focus
</h2>
</footer>
<script src="./scripts/script.js"></script>
</body>
</html>
20 changes: 0 additions & 20 deletions styles/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,4 @@
Так стили написанные ниже будут иметь больший вес,
чем стили в медиазапросе предпочтений пользователя
*/
}

.header {
background-image: var(--background_image);
}

.header__theme-menu-button {
color: var(--accent-color);
}

.header__theme-menu-button_active {
border: 1px solid var(--accent-color);
}

.rec {
color: var(--accent-color);
}

.dot {
background-color: var(--accent-color);
}
2 changes: 1 addition & 1 deletion styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
body {
min-inline-size: 375px;
max-inline-size: 1440px;
margin: 0 auto;
margin: 0 auto !important;
}

h1,
Expand Down
10 changes: 10 additions & 0 deletions styles/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,13 @@
чем стили в медиазапросе предпочтений пользователя
*/
}

/* Остальные стили */

@media (prefers-color-scheme: light) {
:root {
/* Дублируем переменные светлой темы */
}
}

/* Остальные стили */
Loading

0 comments on commit 354526b

Please sign in to comment.