-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (85 loc) · 4.35 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="src/dist/css/accessibility-tool.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Accessibility Tool!</title>
</head>
<body>
<div>
<h1>This is a h1 title</h1>
<h2>This is a h2 title</h2>
<h3>This is a h3 title</h3>
<h4>This is a h4 title</h4>
<h5>This is a h5 title</h5>
<h6>This is a h6 title</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat sodales mollis. Maecenas ligula sem, feugiat ut augue vitae, sagittis viverra ipsum. Sed sit amet leo ut purus euismod posuere nec vel tellus. Sed cursus varius ante rhoncus semper. Nunc id vestibulum urna. Fusce nunc nunc, aliquam eu rhoncus sit amet, tincidunt id nisl. Mauris vel diam luctus, gravida nisl nec, hendrerit quam. Etiam nec neque felis. Donec volutpat dignissim orci.
</p>
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit. Donec</a> feugiat sodales mollis. Maecenas ligula sem, feugiat ut augue vitae, sagittis viverra ipsum. Sed sit amet leo ut purus euismod posuere nec vel tellus. Sed cursus varius ante rhoncus semper. Nunc id vestibulum urna. Fusce nunc nunc, aliquam eu rhoncus sit amet, tincidunt id nisl. Mauris vel diam luctus, gravida nisl nec, hendrerit quam. Etiam nec neque felis. Donec volutpat dignissim orci.
</p>
<h2>This is a h2 title</h2>
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit. Donec</a> feugiat sodales mollis. Maecenas ligula sem, feugiat ut augue vitae, sagittis viverra ipsum. Sed sit amet leo ut purus euismod posuere nec vel tellus. Sed cursus varius ante rhoncus semper. Nunc id vestibulum urna. Fusce nunc nunc, aliquam eu rhoncus sit amet, tincidunt id nisl. Mauris vel diam luctus, gravida nisl nec, hendrerit quam. Etiam nec neque felis. Donec volutpat dignissim orci.
</p>
<h3>This is a h3 title</h3>
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit. Donec</a> feugiat sodales mollis. Maecenas ligula sem, feugiat ut augue vitae, sagittis viverra ipsum. Sed sit amet leo ut purus euismod posuere nec vel tellus. Sed cursus varius ante rhoncus semper. Nunc id vestibulum urna. Fusce nunc nunc, aliquam eu rhoncus sit amet, tincidunt id nisl. Mauris vel diam luctus, gravida nisl nec, hendrerit quam. Etiam nec neque felis. Donec volutpat dignissim orci.
</p>
</div>
<div id="accessibility-tool" class="accessibility-tool">
<button class="btn-toggler toggler" type="button" role="button">
<i class="icon icon-toggler"></i>
</button>
<div class="controls">
<ul>
<li>
<button type="button" role="button" class="btn-control" data-font-size="increase">
<i class="icon icon-increase"></i>
Increase Font
</button>
</li>
<li>
<button type="button" role="button" class="btn-control" data-font-size="decrease">
<i class="icon icon-decrease"></i>
Decrease Font
</button>
</li>
<li>
<button type="button" role="button" class="btn-control" data-grayscale-toggler="toggle">
<i class="icon icon-dark"></i>
Black & White
</button>
</li>
<li>
<button type="button" role="button" class="btn-control" data-inverse-toggler="toggle">
<i class="icon icon-inverse"></i>
Inverse Colours
</button>
</li>
<li>
<button type="button" role="button" class="btn-control" data-links-toggler="toggle">
<i class="icon icon-links"></i>
Highlight Links
</button>
</li>
<li>
<button type="button" role="button" class="btn-control" data-reset-toggler="reset">
<i class="icon icon-reset"></i>
Reset Filters
</button>
</li>
</ul>
</div>
</div>
<script src="src/dist/js/accessiblity-tool.js"></script>
<script>
$(function() {
$("#accessibility-tool").accessibilityTool();
});
</script>
</body>
</html>