-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
135 lines (120 loc) · 5.67 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
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
<!DOCTYPE html>
<html>
<head>
<title>Color Vision Deficiency PDF Viewer</title>
<link href="https://fonts.googleapis.com/css?family=Karma" rel="stylesheet">
<link href="pdf-viewer.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<h1>Color Vision Deficiency PDF Viewer</h1>
<div class="border-box border-box--green space-items">
<h3>Select a PDF to get started.</h3>
<input id="fileInput" type="file" accept=".pdf">
</div>
<!-- Where PDF content will be rendered. -->
<div id="container"></div>
<h3 class="divider">Other Resources</h3>
<ul>
<li><a href="http://www.color-blindness.com/">Colblinder</a>, an educational site about color-blindness and color vision deficiency</li>
<li><a href="http://wearecolorblind.com/">We are Colorblind.com</a>, dedicated to making the web a better place for the color blind</li>
<li><a href="http://www.colourblindawareness.org/">Colour Blind Awareness</a>, U.K. based community interest organization</li>
<li><a href="https://accessibility.18f.gov/index.html">18F Accessibility Guide</a>, resources and tools to help develop accessible products</li>
<li><a href="https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/">Improving The Color Accessibility For Color-Blind Users</a>, article in Smashing Magazine</li>
<li><a href="https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb?hl=en">Spectrum</a>, a free color vision deficiency simulator for Chrome</li>
<li><a href="http://colororacle.org/">Color Oracle</a>, a free color blindness simulator for Windows, Mac, and Linux</li>
</ul>
<h3 class="divider">FAQ</h3>
<p><strong>Does this upload my PDF anywhere?</strong></p>
<p>
No, your files stay on your own computer! This site just displays them for
you in the browser, and applies a color mask to each page to simulate different kinds of
color vision deficiency.
</p>
<p><strong>Who made this site?</strong></p>
<p>
That would be me — <a href="http://mariechatfield.com">Marie Chatfield</a>.
This project was built using the <a href="https://mozilla.github.io/pdf.js/">PDF.js</a>
platform (created by Mozilla) and the color blind SVG filters found in the
<a href="https://github.com/Altreus/colourblind">colourblind</a> bookmarklet
(created by <a href="https://github.com/Altreus">Alastair Douglas</a>).
View the source code of this project and contribute on <a href="https://github.com/mariechatfield/simple-pdf-viewer">GitHub</a>.
</p>
<!--
Define SVG filters for each variant of color vision deficiency.
Source: https://raw.githubusercontent.com/Altreus/colourblind/master/colourblind.svg
-->
<svg id="colorblind-filters">
<defs>
<filter id="protanopia">
<feColorMatrix
type="matrix"
values="0.567,0.433,0,0,0 0.558,0.442,0,0,0 0 0.242,0.758,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="protanomaly">
<feColorMatrix
type="matrix"
values="0.817,0.183,0,0,0 0.333,0.667,0,0,0 0,0.125,0.875,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
type="matrix"
values="0.625,0.375,0,0,0 0.7,0.3,0,0,0 0,0.3,0.7,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
type="matrix"
values="0.8,0.2,0,0,0 0.258,0.742,0,0,0 0,0.142,0.858,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="tritanopia">
<feColorMatrix
type="matrix"
values="0.95,0.05,0,0,0 0,0.433,0.567,0,0 0,0.475,0.525,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
type="matrix"
values="0.967,0.033,0,0,0 0,0.733,0.267,0,0 0,0.183,0.817,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
type="matrix"
values="0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
type="matrix"
values="0.618,0.320,0.062,0,0 0.163,0.775,0.062,0,0 0.163,0.320,0.516,0,0 0,0,0,1,0"
in="SourceGraphic"
/>
</filter>
</defs>
</svg>
<!-- Load the PDF.js source code. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.428/pdf.min.js"></script>
<!-- Load the site source code. -->
<script src="pdf-viewer.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-54073560-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-54073560-5');
</script>
</body>
</html>