e-leaflet/index.html at main · SMSOSS/e-leaflet · 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
<html>
<head>
    <link rel="stylesheet" href="font.css">
    <link rel="stylesheet" href="style.css">
    <title>PH17 St.Mark's School - DeStress</title>
</head>
<body>
    <div class="page white">
        <div class="title left main-title">DeStress.</div>
        <div class="subtitle left main-subtitle">Solving Stress Problems for young people<br>through <span class="blue">Sounds</span> and <span class="blue">Music</span>.</div>
        <div class="text-left left main-text">St.Mark’s School - PH17</div>
    </div>
    <div class="page black">
        <div class="title right">People<br>face stress.</div>
        <div class="subtitle right">...and it can have a huge impact on people <br>by causing various harmful effects,<br>including <span style="color: #5291FF">psychiatric disorders</span>.¹</div>
        <div class="text-right right text1">¹ Stansfeld et al., 1999.</div>
    </div>
    <div class="page white">
        <div class="title left">Sounds are <br> a way out.</div>
        <div class="subtitle left">Sounds can <span class="blue">alter</span> one’s emotions<br>by <span class="blue">stimulating</span> the nervous system<br>to secrete various hormones. ²</div>
        <div class="text-left left text2">² CJ Murrock, 2005.</div>
    </div>
    <div class="page black">
        <div class="title right">It’s easy<br>to use.</div>
        <div class="subtitle right">With a mobile device, anyone can enjoy<br>the benefits DeStress can bring.</div>
    </div>
    <div class="page white">
        <div class = "title left">There are<br>five modes.</div>
        <div class="subtitle left">All of them are <span class="blue">backed</span> by researches<br>conducted by various universities.<br>Tap on the cards to learn more.</div>
        <div class="dropdown">
            <div class="box box-first">
                <div>Focus Mode</div>
                <div class="box-content hidden">
                    <div class="info">Plays light jazz music with around 130BPM.<br>
                    Increases work efficiency.</div>
                    <div class="cite">(Park et al., 2020)</div>
                </div>
            </div>
            <div class="box">
                <div>Relax Mode</div>
                <div class="box-content hidden">
                    <div class="info">Plays quiet sounds of nature.<br>
                        Gives one a feel of calmness.</div>
                    <div class="cite">(Kang & Zhang, 2010)</div>
                </div>
            </div>
            <div class="box">
                <div>Sleep Mode</div>
                <div class="box-content hidden">
                    <div class="info">Plays sedative classical music.<br>
                        Eases the effects of insomnia.</div>
                    <div class="cite">(Braun & Clarke, 2013)</div>
                </div>
            </div>
            <div class="box">
                <div>Happiness Mode</div>
                <div class="box-content hidden">
                    <div class="info">Plays songs with >140BPM.<br>
                        Helps improve mood when one is down.</div>
                    <div class="cite">(North, A. C., Hargreaves, D. J., & McKendrick, J., 1999) </div>
                </div>
            </div>
            <div class="box box-last">
                <div>Sport Mode</div>
                <div class="box-content hidden">
                    <div class="info">Play music that matches the tempo of the sport.<br>
                        Improves sustained performance.</div>
                    <div class="cite">(Terry, Karageorghis, & Sallis, 1999)</div>
                </div>
            </div>
        </div>
    </div>
    <div class="page black">
        <div class="title right">Try it out<br>for yourself.</div>
        <div class="subtitle right">Stop waiting and swipe down<br>in order to view a live demo of Destress.</div>
    </div>
    <div class="page white">

    </div>
    <div class="swipe">
        <div class="swipe-text">Swipe to continue</div>
        <img class="arrow" src="src/arrow.svg">
    </div>

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