sleepback/nfuo.html at main · wappsystem/sleepback · 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>SleepFix</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link href="assets/css/style0.css" rel="stylesheet" />
  </head>

  <body class="body bg-light" >
    <div class="wrapper" id="layout">
      <div id="header">
        <header class="header" >
          <div class="container">
            <div class="header-inner">
              <div class="logo">
                <a href="#">
                  <img src="assets/images/logo-brand-01-dark.png" alt="Woolcock" />
                </a>
              </div>
              <div class="logo">
                <a href="#">
                  <img src="assets/images/logo-brand-02-dark.png" alt="The University of Wydney" />
                </a>
              </div>
            </div>
          </div>
        </header>
      </div>

      <main class="main" id="content">
        <section class="module-header" style="background-image: url(assets/images/bg-05.png)">
          <div class="container">
            <strong class="subtitle">Module 1</strong>
            <h1>What is Sleep?</h1>
          </div>
        </section>

        <section class="intro intro-lg" style="background-image: url(assets/images/bg-06.png)">
          <div class="container">
            <div class="intro-inner">
              <div class="intro-img">
                <img src="assets/images/img-04.png" alt="image description" />
              </div>
              <div class="intro-text">
                <h3>Learning about sleep helps us to dispel inaccurate information, especially about insomnia, which is a difficulty for 1 in 5 adults.</h3>
                <p>Understanding what can help to get back into a good sleeping pattern is the key even when it’s unclear what a good sleeping pattern is!</p>
                <p>
                  Here at the Woolcock Institute of Medical Research we have compiled three modules on sleep based on decades of research into sleep and sleep disorders. The
                  modules help to explain what sleep is, why we need it and how to optimise it.
                </p>
              </div>
            </div>
          </div>
        </section>

        <section class="accordion-block size-spacing" >
          <div class="container container-sm">
            <div class="heading-block">
              <h2>Sleep</h2>
              <div class="help-text">
                <img src="assets/images/help-text-01.png" alt="Tap each heading to learn more" />
              </div>
            </div>
            <ul class="accordion">
              <li class="accordion-item active">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">1</span>
                  <span>What is sleep?</span>
                </a>
                <div class="accordion-slide">
                  <p class="text-center">
                    Sleep is a complex active process that all living organisms need. It is an interplay of biological and behavioural processes that are essential for normal
                    bodily functioning. We are all learning more about sleep every day but there are some important points to consider:
                  </p>
                  <div class="img img-center">
                    <img src="assets/images/img-05.png" alt="image description" />
                  </div>
                  <ol class="numbered-list">
                    <li>
                      <strong>1.</strong>
                      <p>
                        Sleep has different stages that are important for these different functions. Most of our sleep is relatively ‘light’, some is ‘deeper’ and there is a type
                        of sleep that is similar to a wake-like state where we have most of our dreams. We move through these different stages regularly throughout the night often
                        in 90-minute cycles.
                      </p>
                    </li>
                    <li>
                      <strong>2.</strong>
                      <p>Sleep is <b>not</b> simply an absence of wakefulness. It is an important time when different functions take place in both our minds and our bodies.</p>
                    </li>
                    <li>
                      <strong>3.</strong>
                      <p>Sleep follows a natural rhythm that also aligns with body temperature and hormonal patterns.</p>
                    </li>
                  </ol>
                </div>
              </li>
              <li class="accordion-item">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">2</span>
                  <span>Why do we sleep?</span>
                </a>
                <div class="accordion-slide js-acc-hidden">
                  <p>
                    Sleep is a natural need, associated with many vital functions, including rest for the brain and the body. During the day there is a build-up of substances in
                    the body, known as metabolic waste, which is cleared during sleep.
                  </p>
                  <p>
                    Think about how aching and tired muscles and a worn-out brain from working overtime at work both feel suddenly better when you wake up from a good sleep. Other
                    important functions are optimised with good sleeping habits including emotional regulation, consolidation of learning and memories, and hormone regulation.
                  </p>
                  <div class="img img-bottom">
                    <img src="assets/images/img-08.png" alt="image description" />
                  </div>
                </div>
              </li>
              <li class="accordion-item">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">3</span>
                  <span>How do we sleep and how much?</span>
                </a>
                <div class="accordion-slide js-acc-hidden">
                  <p>
                    There is no magic number when it comes to the perfect amount of sleep. Generally, most adults will need sleep for anywhere between 6.5-8.5 hours but this
                    differs amongst everyone. There are also multiple factors that can temporarily influence the length of sleep including pain, menopausal symptoms, bladder
                    issues, life changes and life stressors (money, bereavement, health issues etc.).
                  </p>
                  <p>
                    The ideal amount of sleep changes across the lifetime. Older adults, for example, normally have reduced amounts of deep sleep and wake more frequently while
                    newborn babies will sleep for 14-18 hours, though not all at once.
                  </p>
                  <div class="text-group">
                    <div class="img img-left">
                      <img src="assets/images/img-09.png" alt="image description" />
                    </div>
                    <div class="text">
                      <p>
                        We cycle through different stages of sleep approximately every 90 minutes. These cycles are made up of Non-Rapid Eye Movement (NREM) sleep, where our brain
                        is resting, and the body is active and Rapid Eye Movement (REM) when we have most of our dreams.
                      </p>
                      <h3>We spend most of our time in light sleep (45-55%) where we can move and are easily woken.</h3>
                      <p>
                        We can also have very light sleep, between awakenings, for 5% of the night. We only spend 20% of the night in deep sleep (NREM) and during this period,
                        growth hormones are secreted.
                      </p>
                      <p>This is why teenagers need more sleep than the rest of us!</p>
                    </div>
                  </div>
                  <p>In REM sleep, the brain is active and almost awake, whilst the body is semi-paralysed.</p>
                  <p>
                    As mentioned before, it is believed that most of our dreaming occurs during this type of sleep, whether we remember them or not! We spend 75% of the night in
                    NREM sleep, especially earlier in the night and the remaining 25% in REM sleep.
                  </p>
                </div>
              </li>
              <li class="accordion-item">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">4</span>
                  <span>When do we need sleep?</span>
                </a>
                <div class="accordion-slide js-acc-hidden">
                  <p>
                    We are familiar with the feeling of needing sleep, or times when we don’t feel particularly tired either. To enable sleep, we need to build up a ‘sleep debt’
                    which occurs after being awake for at least 8 hours and is the trigger for sleep. This needs to be at the right time of day, which relates to our circadian
                    rhythms. Simply put, individuals need to sleep at night and be awake and alert during the day.
                  </p>
                  <div class="text-group">
                    <div class="img">
                      <img src="assets/images/img-10.png" alt="image description" />
                    </div>
                    <div class="text">
                      <p>
                        Darkness is a natural trigger for sleep in humans. Once there is a lack of natural light, our body releases Melatonin, the “sleep” hormone which has an
                        hypnotic effect on the body and drops the body temperature.
                      </p>
                      <p>
                        In the morning, light messages supress the release of melatonin and reverses this hypnotic effect, increases body temperature rendering us more “alert”.
                      </p>
                    </div>
                  </div>
                  <h3>Fun fact: A typical room light is only around 0.002% of the intensity of the sun, highlighting how much the sun’s light can impact our wakefulness.</h3>
                  <p>This finding exemplifies how tough shift work and especially night shifts to maintain a reasonable sleep pattern.</p>
                </div>
              </li>
            </ul>
          </div>
        </section>

        <section class="video-block" style="background-image: url(assets/images/bg-07.png)">
          <div class="container container-xs">
            <div class="heading-block">
              <h2>Insomnia</h2>
              <p>Insomnia is a very common sleep disorder that most adults will experience at some point across their lifetime.</p>
            </div>
            <div class="video-holder">
              <video src="assets/media/Sleep_Health_Module_Video 1_Prof Grunstein.mp4" poster="assets/images/video.jpg" controls="controls"></video>
              <div class="help-text">
                <img src="assets/images/help-text-02.png" alt="Watch video & learn from a sleep expert" />
              </div>
            </div>
          </div>
        </section>

        <section class="accordion-block accordion-block-sm bg-gray" >
          <div class="container container-sm">
            <ul class="accordion">
              <li class="accordion-item active">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">
                    <span class="icon icon-question"></span>
                  </span>
                  <span>What is Insomnia?</span>
                </a>
                <div class="accordion-slide">
                  <p>
                    By definition, insomnia means “difficulty initiating (getting to sleep) or maintaining sleep (staying asleep)” and usually requires these sleep problems to be
                    disruptive for at least 3 out of 7 nights per week and be persistent for six months or more. Individuals with insomnia report a racing mind, tossing and turning
                    as well as physical tension whilst in bed. Recent research supports how many individuals with insomnia have overactive brains during sleep and the brain is in a
                    wake-like state contributing to poor sleep quality which is a central feature of insomnia. Many individuals wake up feeling unrefreshed in the morning and are
                    tired during the day – being “wired & tired”.
                  </p>
                  <p>
                    Experiencing difficulties getting to sleep or staying asleep at some point is also normal. However, when this occurs every night, it is a symptom of insomnia
                    and can negatively impacting on day-to-day life.
                  </p>
                  <h3>
                    This is the reality for approximately 20% of adults <br />
                    (that’s 1 in 5 people!) and may increase with age.
                  </h3>
                  <div class="img img-center-2">
                    <img src="assets/images/img-06.png" alt="image description" />
                  </div>
                </div>
              </li>
              <li class="accordion-item">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">
                    <span class="icon icon-question"></span>
                  </span>
                  <span>What causes Insomnia?</span>
                </a>
                <div class="accordion-slide js-acc-hidden">
                  <p>
                    Insomnia is complex and different for each person. There can be obvious reasons as to why insomnia started such as medical conditions that affect sleep but
                    there are often other factors that maintain the poor cycle. Some people may be more likely to have insomnia based on predisposing factors like their family
                    history and the environmental factors.
                  </p>
                  <div class="text-group">
                    <div class="img img-left">
                      <img src="assets/images/img-11.png" alt="image description" />
                    </div>
                    <div class="text">
                      <p>
                        More often, insomnia stems from a sleep disruption followed by the development of poor sleep habits as a compensatory adaptation. Life changes and
                        stressors, relationship/family issues, discomfort and illness including pain, depression and anxiety, shiftwork, diet, bedroom factors and sleeping pills
                        are just some of the precipitating factors that can throw a normal sleeping routine out of whack.
                      </p>
                      <p>
                        Recognising if insomnia symptoms have a clear causal factor which can be easily remedied is important such another sleep disorder or night-time pain. Other
                        investigations may also be necessary to uncover deeper issues contributing to the insomnia such as anxious thoughts which are cued to being in bed.
                      </p>
                    </div>
                  </div>
                </div>
              </li>
              <li class="accordion-item">
                <a href="#" class="accordion-opener">
                  <span class="accordion-number">
                    <span class="icon icon-question"></span>
                  </span>
                  <span>Is insomnia dangerous?</span>
                </a>
                <div class="accordion-slide js-acc-hidden">
                  <h3>Research suggests that insomnia is not a mortality risk, but it can greatly affect our quality of life.</h3>
                  <p>
                    The impacts of insomnia are not just night-based but appear as very real daytime problems including poor concentration, daytime tiredness, irritability and
                    moodiness, and can easily effect the entire household.
                  </p>
                  <p>Each of these issues can then result in difficulties maintaining work performance and/or fatigue related accidents.</p>
                  <div class="img img-bottom">
                    <img src="assets/images/img-12.png" alt="image description" />
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </section>

        <section class="congratulations bg-gray" >
          <div class="container container-sm">
            <div class="congratulations-content" style="background-image: url(assets/images/img-07.png)">
              <h2>Congratulations!</h2>
              <p>You have completed Module 1</p>
            </div>
          </div>
        </section>
      </main>

      <div id="footer">
        <footer class="footer" >
          <div class="container">
            <div class="footer-inner">
              <div class="footer-logos">
                <div class="logo">
                  <a href="#">
                    <img src="assets/images/logo.png" alt="SleepFix" />
                  </a>
                </div>
                <div class="logo">
                  <a href="#">
                    <img src="assets/images/woolcock.png" alt="Woolcock" />
                  </a>
                </div>
                <div class="logo">
                  <a href="#">
                    <img src="assets/images/logo-brand-02.png" alt="The University of Sydney" />
                  </a>
                </div>
              </div>
              <p>Woolcock Institute of Medical Research Copyright © 2021.</p>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <script defer src="assets/js/app.js"></script>
  </body>
</html>