nopanic-app/index.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="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>No Panic — Calm, in your pocket</title>
  <meta name="description" content="No Panic is a self-help wellness app with a one-tap panic button, breathing, grounding, body scan, visualization, stretching, journaling, affirmations, and meditation.">
  <link rel="canonical" href="https://denid88.github.io/nopanic-app/index.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 — Calm, in your pocket">
  <meta property="og:description" content="A self-help wellness app for moments of panic, anxiety, or stress.">
  <meta property="og:image" content="./assets/logo.png">
  <meta property="og:url" content="https://denid88.github.io/nopanic-app/index.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.html">
        <img src="./assets/logo.png" alt="">
        <span>No Panic</span>
      </a>
      <nav class="site-header__lang" aria-label="Language">
        <span class="is-active" aria-current="true">EN</span>
        <span aria-hidden="true">|</span>
        <a href="./index.uk.html" hreflang="uk">UK</a>
        <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 logo">
      <h1 class="hero__title">Calm, in your pocket — for when panic hits.</h1>
      <p class="hero__sub">A self-help wellness app with a one-tap panic button, breathing, grounding, body scan, visualization, stretching, journaling, affirmations, and meditation.</p>
      <div class="hero__cta">
        <a class="store-btn" href="https://apps.apple.com/us/app/no-panic-attack/id6762794408" aria-label="Download on the 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="Get it on Google Play">
          <span class="store-btn__icon" aria-hidden="true">▶</span>
          <span>Google Play</span>
        </a>
      </div>
      <p class="hero__footnote">Free to start. No account. No ads. Analytics is opt-in.</p>
    </section>

    <section class="section" aria-labelledby="features-title">
      <div class="container">
        <h2 id="features-title" style="text-align:center;">What's inside</h2>
        <section class="slider" role="region" aria-roledescription="carousel" aria-label="App features">
          <div class="slider__viewport">
            <div class="slider__track">
              <article class="slider__slide" aria-label="Emergency Panic Button">
                <div class="slider__icon" aria-hidden="true">🚨</div>
                <h3>Emergency Panic Button</h3>
                <p>One tap opens a guided 10-step panic flow with short tips and optional audio — for the moment you need help right now.</p>
              </article>
              <article class="slider__slide" aria-label="Breathing">
                <div class="slider__icon" aria-hidden="true">🌬️</div>
                <h3>Breathing</h3>
                <p>Relaxing Breath and Square Breathing, with adjustable session length to fit the moment.</p>
              </article>
              <article class="slider__slide" aria-label="Grounding">
                <div class="slider__icon" aria-hidden="true">🌿</div>
                <h3>Grounding</h3>
                <p>5-4-3-2-1 sensory exercise to bring you back from overwhelm.</p>
              </article>
              <article class="slider__slide" aria-label="Body Scan">
                <div class="slider__icon" aria-hidden="true">🧘</div>
                <h3>Body Scan</h3>
                <p>A 10-zone progressive relaxation at the pace that suits you.</p>
              </article>
              <article class="slider__slide" aria-label="Visualization">
                <div class="slider__icon" aria-hidden="true">🏞️</div>
                <h3>Visualization</h3>
                <p>10 themed guided visualizations with ambient audio — ocean, forest, meadow, and more.</p>
              </article>
              <article class="slider__slide" aria-label="Stretching">
                <div class="slider__icon" aria-hidden="true">🤸</div>
                <h3>Stretching</h3>
                <p>8 gentle poses with configurable pacing to release physical tension.</p>
              </article>
              <article class="slider__slide" aria-label="Journaling">
                <div class="slider__icon" aria-hidden="true">📓</div>
                <h3>Journaling</h3>
                <p>Private, on-device notes with an optional mood emoji. Your words never leave your phone.</p>
              </article>
              <article class="slider__slide" aria-label="Affirmations">
                <div class="slider__icon" aria-hidden="true">✨</div>
                <h3>Affirmations</h3>
                <p>A daily affirmation card, plus favorites you can revisit.</p>
              </article>
              <article class="slider__slide" aria-label="Reading">
                <div class="slider__icon" aria-hidden="true">📖</div>
                <h3>Reading</h3>
                <p>Short, calming articles about panic and anxiety. Open one any time you want to understand what’s happening and feel less alone.</p>
              </article>
              <article class="slider__slide" aria-label="Medication">
                <div class="slider__icon" aria-hidden="true">💊</div>
                <h3>Medication</h3>
                <p>Keep track of your medication. Add names, doses and schedules, then tick each dose — all stored privately on your phone.</p>
              </article>
              <article class="slider__slide" aria-label="Book a doctor">
                <div class="slider__icon" aria-hidden="true">🩺</div>
                <h3>Book a doctor</h3>
                <p>Find a psychologist, psychiatrist or psychotherapist. Browse profiles, filter by specialization and city, then reach out directly — no in-app booking step.</p>
              </article>
              <article class="slider__slide" aria-label="Self-check">
                <div class="slider__icon" aria-hidden="true">📋</div>
                <h3>Self-check</h3>
                <p>Quick, gentle self-assessments to see how you’re doing. Answer a few questions and follow your results over time.</p>
              </article>
              <article class="slider__slide" aria-label="Survivor Wall">
                <div class="slider__icon" aria-hidden="true">🛡️</div>
                <h3>Survivor Wall</h3>
                <p>Every attack you survive is logged here. Add one when it passes and watch the count grow — proof you always make it through.</p>
              </article>
              <article class="slider__slide" aria-label="Anxiety Coach">
                <div class="slider__icon" aria-hidden="true">🧠</div>
                <h3>Anxiety Coach</h3>
                <p>Psychologist-curated guidance for anxious moments. Ask what’s on your mind and get calm, practical advice for how you feel.</p>
              </article>
              <article class="slider__slide" aria-label="Sleep">
                <div class="slider__icon" aria-hidden="true">🌙</div>
                <h3>Sleep</h3>
                <p>Soft soundscapes and music to help you drift off. Pick a track, set a timer, and let it play you to sleep.</p>
              </article>
              <article class="slider__slide" aria-label="Games">
                <div class="slider__icon" aria-hidden="true">🎮</div>
                <h3>Games</h3>
                <p>Light, relaxing mini-games to gently distract a racing mind. Pick one and play for a few minutes until the wave passes.</p>
              </article>
              <article class="slider__slide" aria-label="Healthy habits">
                <div class="slider__icon" aria-hidden="true">✅</div>
                <h3>Healthy habits</h3>
                <p>Build small, calming daily habits. Tick off what you managed today — quiet progress, never pressure.</p>
              </article>
              <article class="slider__slide" aria-label="Meditation">
                <div class="slider__icon" aria-hidden="true">🧘‍♀️</div>
                <h3>Meditation</h3>
                <p>Guided meditation sessions — <em>coming soon</em>.</p>
              </article>
            </div>
          </div>
          <button class="slider__prev" type="button" aria-label="Previous feature">‹</button>
          <button class="slider__next" type="button" aria-label="Next feature">›</button>
          <div class="slider__dots" role="tablist" aria-label="Feature navigation"></div>
        </section>
      </div>
    </section>

    <section class="section promise" aria-labelledby="promise-title">
      <div class="container">
        <h2 id="promise-title" style="text-align:center;">Privacy-respecting by default</h2>
        <div class="promise__grid">
          <div class="promise__card">
            <h3>No account, opt-in analytics</h3>
            <p>The app is fully anonymous. No sign-up, no ads, no crash-reporting SDK. Firebase Analytics is disabled by default — it only turns on after you explicitly agree, and you can disable it again anytime in Settings → Privacy.</p>
          </div>
          <div class="promise__card">
            <h3>Your journal stays with you</h3>
            <p>Journal entries and favorites live on your device. They are never uploaded.</p>
          </div>
          <div class="promise__card">
            <h3>Open about third parties</h3>
            <p>We disclose every third-party service the app talks to — in plain language.</p>
          </div>
        </div>
        <p class="promise__more"><a href="./privacy-policy.html">Read the full Privacy Policy →</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="Legal and contact">
        <a href="./index.html">Home</a>
        <a href="./privacy-policy.html">Privacy Policy</a>
        <a href="./terms-of-use.html">Terms of Use</a>
        <a href="mailto:denysdubov88@gmail.com">Contact</a>
      </nav>
      <nav class="site-header__lang" aria-label="Language">
        <span class="is-active" aria-current="true">EN</span>
        <span aria-hidden="true">|</span>
        <a href="./index.uk.html" hreflang="uk">UK</a>
        <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>