-
Notifications
You must be signed in to change notification settings - Fork 1
/
stimpage.html
99 lines (83 loc) · 5.08 KB
/
stimpage.html
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
<!DOCTYPE html>
<html class="stimpage" lang = "en">
<!-- the stim page -->
<head>
<meta charset="utf-8"/>
<script src="stimpage.js"></script>
<link rel="stylesheet" href="site.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa%7CHind%7CLobster+Two%7COpen+Sans+Condensed:300" rel="stylesheet">
<link rel="icon" href="Images/compass-37840_1280.png">
<title>Compass Stims</title>
</head>
<body>
<!-- The navigation sidebar -->
<div class="sidenav">
<a href="index.html">Home</a>
<a href="Infopage.html">Learn more</a>
<a href="stimpage.html"> Stims</a>
<a href="supportpage.html">Support</a>
<a href="comment_page.html"> Comments</a>
<a href="Aboutpage.html">About</a>
</div>
<!-- the main text on the page -->
<div class = "bodytext">
<h1>Stims</h1>
<h4><em>breathe.</em></h4>
<h4><em>you are going to be okay.</em></h4>
<!-- The modal effect when you click on an image in the gallery -->
<div id="myModal" class="modal">
<span class="close" onclick="change()">×</span>
<img class="modal-content" id="img01" src="Images/stills/jellyfish_still.gif" alt="stimimgS">
</div>
<!-- the gallery of stim images -->
<div class = "gallery">
<img src="Images/stills/jellyfish_still.gif" alt="stimjelly" id ="jelly" onclick="displaygif('jelly');" onmouseover="differentimg('jelly', 'Images/gifs/jellyfish.gif');" onmouseout="differentimg('jelly','Images/stills/jellyfish_still.gif');">
<p>Jellyfish</p>
</div>
<div class = "gallery">
<img src="Images/stills/shapes_still.gif" alt="shapes" id ="shapes" onclick="displaygif('shapes');" onmouseover ="differentimg('shapes','Images/gifs/shapes.gif');" onmouseout = "differentimg('shapes', 'Images/stills/shapes_still.gif');">
<p>Shapes breathing exercise</p>
</div>
<div class = "gallery">
<img src="Images/stills/leaf_still.gif" alt="leaf" id ="leaf" onclick="displaygif('leaf');" onmouseover ="differentimg('leaf','Images/gifs/leaf.gif');" onmouseout = "differentimg('leaf','Images/stills/leaf_still.gif');">
<p>Leaf breathing exercise</p>
</div>
<div class = "gallery">
<img src="Images/stills/123_still.gif" alt="123" id ="123" onclick="displaygif('123');" onmouseover ="differentimg('123', 'Images/gifs/123.gif');" onmouseout = "differentimg('123','Images/stills/123_still.gif');">
<p>Breathing counter</p>
</div>
<div class = "gallery">
<img src="Images/stills/sky_still.gif" alt="sky" id ="sky" onclick="displaygif('sky');" onmouseover ="differentimg('sky','Images/gifs/sky.gif');" onmouseout = "differentimg('sky','Images/stills/sky_still.gif');">
<p>Sky stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/spiral_still.gif" alt="spiral" id ="spiral" onclick="displaygif('spiral');" onmouseover ="differentimg('spiral','Images/gifs/spiral.gif');" onmouseout = "differentimg('spiral','Images/stills/spiral_still.gif');">
<p>Spiral stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/open_still.gif" alt="open" id ="open" onclick="displaygif('open');" onmouseover ="differentimg('open', 'Images/gifs/open.gif');" onmouseout = "differentimg('open','Images/stills/open_still.gif');">
<p>Rolling spiral stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/square_still.gif" alt="square" id ="square" onclick="displaygif('square');" onmouseover ="differentimg('square','Images/gifs/square.gif');" onmouseout = "differentimg('square','Images/stills/square_still.gif');">
<p>Square stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/roll_still.gif" alt="roll" id ="roll" onclick="displaygif('roll');" onmouseover ="differentimg('roll','Images/gifs/roll.gif');" onmouseout = "differentimg('roll', 'Images/stills/roll_still.gif');">
<p>Rolling stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/circle_still.gif" alt="circle" id ="circle" onclick="displaygif('circle');" onmouseover ="differentimg('circle', 'Images/gifs/circle.gif');" onmouseout = "differentimg('circle', 'Images/stills/circle_still.gif');">
<p>Circle breathing stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/balloon_still.gif" alt="balloon" id ="balloon" onclick="displaygif('balloon');" onmouseover ="differentimg('balloon','Images/gifs/balloon.gif');" onmouseout = "differentimg('balloon', 'Images/stills/balloon_still.gif');">
<p>Balloon breathing stim</p>
</div>
<div class = "gallery">
<img src="Images/stills/jellyfish2_still.gif" alt="jelly2" id ="jelly2" onclick="displaygif('jelly2');" onmouseover ="differentimg('jelly2','Images/gifs/jellyfish2.gif');" onmouseout = "differentimg('jelly2', 'Images/stills/jellyfish2_still.gif');">
<p>Jellyfish stim 2</p>
</div>
</div>
</body>
</html>