nopanic-app/index.uk.html at main · denid88/nopanic-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No Panic — Спокій у твоїй кишені</title>
  <meta name="description" content="No Panic — застосунок для самодопомоги з кнопкою паніки, дихальними практиками, заземленням, сканом тіла, візуалізаціями, розтяжкою, щоденником, афірмаціями та медитаціями.">
  <link rel="canonical" href="https://denid88.github.io/nopanic-app/index.uk.html">
  <link rel="alternate" hreflang="en" href="https://denid88.github.io/nopanic-app/index.html">
  <link rel="alternate" hreflang="uk" href="https://denid88.github.io/nopanic-app/index.uk.html">
  <link rel="alternate" hreflang="de" href="https://denid88.github.io/nopanic-app/index.de.html">
  <link rel="alternate" hreflang="es" href="https://denid88.github.io/nopanic-app/index.es.html">
  <link rel="alternate" hreflang="fr" href="https://denid88.github.io/nopanic-app/index.fr.html">
  <link rel="alternate" hreflang="pl" href="https://denid88.github.io/nopanic-app/index.pl.html">
  <link rel="alternate" hreflang="pt-BR" href="https://denid88.github.io/nopanic-app/index.pt-br.html">
  <link rel="icon" type="image/png" href="./assets/favicon.png">
  <meta property="og:title" content="No Panic — Спокій у твоїй кишені">
  <meta property="og:description" content="Застосунок для самодопомоги у моменти паніки, тривоги чи стресу.">
  <meta property="og:image" content="./assets/logo.png">
  <meta property="og:url" content="https://denid88.github.io/nopanic-app/index.uk.html">
  <meta property="og:type" content="website">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body>
  <header class="site-header">
    <div class="container site-header__inner">
      <a class="site-header__brand" href="./index.uk.html">
        <img src="./assets/logo.png" alt="">
        <span>No Panic</span>
      </a>
      <nav class="site-header__lang" aria-label="Мова">
        <a href="./index.html" hreflang="en">EN</a>
        <span aria-hidden="true">|</span>
        <span class="is-active" aria-current="true">UK</span>
        <span aria-hidden="true">|</span>
        <a href="./index.de.html" hreflang="de">DE</a>
        <span aria-hidden="true">|</span>
        <a href="./index.es.html" hreflang="es">ES</a>
        <span aria-hidden="true">|</span>
        <a href="./index.fr.html" hreflang="fr">FR</a>
        <span aria-hidden="true">|</span>
        <a href="./index.pl.html" hreflang="pl">PL</a>
        <span aria-hidden="true">|</span>
        <a href="./index.pt-br.html" hreflang="pt-BR">PT</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <img class="hero__logo" src="./assets/logo.png" alt="Логотип No Panic">
      <h1 class="hero__title">Спокій у твоїй кишені — коли приходить паніка.</h1>
      <p class="hero__sub">Застосунок для самодопомоги: кнопка паніки в один дотик, дихальні практики, заземлення, скан тіла, візуалізації, розтяжка, щоденник, афірмації та медитації.</p>
      <div class="hero__cta">
        <a class="store-btn" href="https://apps.apple.com/us/app/no-panic-attack/id6762794408" aria-label="Завантажити в App Store">
          <span class="store-btn__icon" aria-hidden="true">🍎</span>
          <span>App Store</span>
        </a>
        <a class="store-btn" href="https://play.google.com/store/apps/details?id=app.nopanic" aria-label="Завантажити у Google Play">
          <span class="store-btn__icon" aria-hidden="true">▶</span>
          <span>Google Play</span>
        </a>
      </div>
      <p class="hero__footnote">Безкоштовний старт. Без акаунтів. Без реклами. Аналітика — лише за згодою.</p>
    </section>

    <section class="section" aria-labelledby="features-title">
      <div class="container">
        <h2 id="features-title" style="text-align:center;">Що всередині</h2>
        <section class="slider" role="region" aria-roledescription="carousel" aria-label="Функції застосунку">
          <div class="slider__viewport">
            <div class="slider__track">
              <article class="slider__slide" aria-label="Кнопка екстреної допомоги">
                <div class="slider__icon" aria-hidden="true">🚨</div>
                <h3>Кнопка екстреної допомоги</h3>
                <p>Один дотик — і запускається 10-кроковий потік підказок і звукових сигналів для миті, коли допомога потрібна прямо зараз.</p>
              </article>
              <article class="slider__slide" aria-label="Дихальні практики">
                <div class="slider__icon" aria-hidden="true">🌬️</div>
                <h3>Дихальні практики</h3>
                <p>Розслабляюче дихання та квадратне дихання з налаштовуваною тривалістю сесії.</p>
              </article>
              <article class="slider__slide" aria-label="Заземлення">
                <div class="slider__icon" aria-hidden="true">🌿</div>
                <h3>Заземлення</h3>
                <p>Техніка 5-4-3-2-1 допоможе повернутись до тут-і-зараз.</p>
              </article>
              <article class="slider__slide" aria-label="Скан тіла">
                <div class="slider__icon" aria-hidden="true">🧘</div>
                <h3>Скан тіла</h3>
                <p>Прогресивне розслаблення по 10 зонах у зручному для тебе темпі.</p>
              </article>
              <article class="slider__slide" aria-label="Візуалізація">
                <div class="slider__icon" aria-hidden="true">🏞️</div>
                <h3>Візуалізація</h3>
                <p>10 тематичних сцен з атмосферним звуком — океан, ліс, лука та інші.</p>
              </article>
              <article class="slider__slide" aria-label="Розтяжка">
                <div class="slider__icon" aria-hidden="true">🤸</div>
                <h3>Розтяжка</h3>
                <p>8 м'яких поз з налаштовуваним темпом, щоб зняти фізичне напруження.</p>
              </article>
              <article class="slider__slide" aria-label="Щоденник">
                <div class="slider__icon" aria-hidden="true">📓</div>
                <h3>Щоденник</h3>
                <p>Приватні записи на твоєму пристрої з опціональним смайлом настрою. Твої слова не залишають телефон.</p>
              </article>
              <article class="slider__slide" aria-label="Афірмації">
                <div class="slider__icon" aria-hidden="true">✨</div>
                <h3>Афірмації</h3>
                <p>Картка афірмації дня та улюблені, до яких можна повертатись.</p>
              </article>
              <article class="slider__slide" aria-label="Читання">
                <div class="slider__icon" aria-hidden="true">📖</div>
                <h3>Читання</h3>
                <p>Короткі заспокійливі статті про паніку й тривогу. Відкрий будь-коли, щоб зрозуміти, що відбувається, і не почуватися самотньо.</p>
              </article>
              <article class="slider__slide" aria-label="Ліки">
                <div class="slider__icon" aria-hidden="true">💊</div>
                <h3>Ліки</h3>
                <p>Стеж за прийомом ліків. Додай назви, дози й розклад, а потім відмічай кожен прийом — усе зберігається приватно на телефоні.</p>
              </article>
              <article class="slider__slide" aria-label="Запис до фахівця">
                <div class="slider__icon" aria-hidden="true">🩺</div>
                <h3>Запис до фахівця</h3>
                <p>Знайди психолога, психіатра чи психотерапевта. Переглядай профілі, фільтруй за спеціалізацією та містом і звертайся напряму — без запису в застосунку.</p>
              </article>
              <article class="slider__slide" aria-label="Самоперевірка">
                <div class="slider__icon" aria-hidden="true">📋</div>
                <h3>Самоперевірка</h3>
                <p>Швидкі делікатні самоперевірки, щоб побачити свій стан. Дай відповідь на кілька запитань і відстежуй результати в часі.</p>
              </article>
              <article class="slider__slide" aria-label="Стіна вижилих">
                <div class="slider__icon" aria-hidden="true">🛡️</div>
                <h3>Стіна вижилих</h3>
                <p>Кожен напад, який ти пережив, фіксується тут. Додай його, коли він мине, і дивись, як росте лічильник — доказ, що ти завжди витримуєш.</p>
              </article>
              <article class="slider__slide" aria-label="Помічник при тривозі">
                <div class="slider__icon" aria-hidden="true">🧠</div>
                <h3>Помічник при тривозі</h3>
                <p>Поради на основі рекомендацій психологів для тривожних моментів. Запитай про те, що турбує, і отримай спокійну практичну пораду.</p>
              </article>
              <article class="slider__slide" aria-label="Сон">
                <div class="slider__icon" aria-hidden="true">🌙</div>
                <h3>Сон</h3>
                <p>М’які звуки й музика, щоб легше заснути. Обери трек, постав таймер і дозволь музиці заколисати тебе.</p>
              </article>
              <article class="slider__slide" aria-label="Ігри">
                <div class="slider__icon" aria-hidden="true">🎮</div>
                <h3>Ігри</h3>
                <p>Легкі розслабливі міні-ігри, щоб м’яко відволікти збуджений розум. Обери одну й пограй кілька хвилин, поки хвиля мине.</p>
              </article>
              <article class="slider__slide" aria-label="Корисні звички">
                <div class="slider__icon" aria-hidden="true">✅</div>
                <h3>Корисні звички</h3>
                <p>Формуй маленькі заспокійливі щоденні звички. Відмічай те, що вдалося сьогодні — тихий прогрес, без жодного тиску.</p>
              </article>
              <article class="slider__slide" aria-label="Медитації">
                <div class="slider__icon" aria-hidden="true">🧘‍♀️</div>
                <h3>Медитації</h3>
                <p>Керовані медитації — <em>скоро</em>.</p>
              </article>
            </div>
          </div>
          <button class="slider__prev" type="button" aria-label="Попередня функція">‹</button>
          <button class="slider__next" type="button" aria-label="Наступна функція">›</button>
          <div class="slider__dots" role="tablist" aria-label="Навігація функцій"></div>
        </section>
      </div>
    </section>

    <section class="section promise" aria-labelledby="promise-title">
      <div class="container">
        <h2 id="promise-title" style="text-align:center;">Приватність за замовчуванням</h2>
        <div class="promise__grid">
          <div class="promise__card">
            <h3>Без акаунтів, аналітика — за згодою</h3>
            <p>Застосунок повністю анонімний. Немає реєстрації, реклами, звітів про збої. Firebase Analytics вимкнено за замовчуванням — вмикається лише після вашої явної згоди, і ви можете вимкнути його будь-коли в Налаштуваннях → Приватність.</p>
          </div>
          <div class="promise__card">
            <h3>Щоденник лишається з тобою</h3>
            <p>Записи та обрані афірмації зберігаються на пристрої. Вони ніколи не завантажуються до нас.</p>
          </div>
          <div class="promise__card">
            <h3>Прозорість щодо сервісів</h3>
            <p>Ми відкрито перелічуємо кожен сторонній сервіс, з яким спілкується застосунок.</p>
          </div>
        </div>
        <p class="promise__more"><a href="./privacy-policy.uk.html">Повна Політика конфіденційності →</a></p>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container site-footer__inner">
      <p>© 2026 No Panic Labs</p>
      <nav class="site-footer__links" aria-label="Юридичне та контакти">
        <a href="./index.uk.html">Головна</a>
        <a href="./privacy-policy.uk.html">Політика конфіденційності</a>
        <a href="./terms-of-use.uk.html">Умови використання</a>
        <a href="mailto:denysdubov88@gmail.com">Контакт</a>
      </nav>
      <nav class="site-header__lang" aria-label="Мова">
        <a href="./index.html" hreflang="en">EN</a>
        <span aria-hidden="true">|</span>
        <span class="is-active" aria-current="true">UK</span>
        <span aria-hidden="true">|</span>
        <a href="./index.de.html" hreflang="de">DE</a>
        <span aria-hidden="true">|</span>
        <a href="./index.es.html" hreflang="es">ES</a>
        <span aria-hidden="true">|</span>
        <a href="./index.fr.html" hreflang="fr">FR</a>
        <span aria-hidden="true">|</span>
        <a href="./index.pl.html" hreflang="pl">PL</a>
        <span aria-hidden="true">|</span>
        <a href="./index.pt-br.html" hreflang="pt-BR">PT</a>
      </nav>
    </div>
  </footer>

  <script src="./scripts/slider.js"></script>
</body>
</html>