-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
110 lines (98 loc) · 4.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Colourable</title>
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" type="image/png" href="about:blank" />
<script src="prefixfree.min.js"></script>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jquery.wheelcolorpicker.js"></script>
<link type="text/css" rel="stylesheet" href="wheelcolorpicker.css">
<script type="text/javascript" src="jquery.ddslick.js"></script>
</head>
<body>
<h1><a href="#"><span>Colour</span> <strong>able</strong></a></h1>
<section class="color-display" id="backgroundDisplay">
<div class="display-info">
<output tabindex="0">
<strong>?</strong>
<span class="error"></span>
</output>
<div class="input-display">
<label class="background">
<span>Background:</span>
<input id="background" value="white" autofocus />
</label>
<div id="myDropdown0">
<select name="suggestion-bg" class="sug-bg">
<option>Suggestions</option>
<option value="0" data-imagesrc="Suggestions/score21.0.png" >21.0</option>
<option value="0" data-imagesrc="Suggestions/score18.3.png" >18.3</option>
<option value="0" data-imagesrc="Suggestions/score16.7.png" >16.7</option>
<option value="0" data-imagesrc="Suggestions/score15.1.png" >15.1</option>
</select>
</div>
<script>
jQuery('#myDropdown0').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
<input type ="image" src="swap.png" class="swap" id="swap">
<label class="foreground">
<span>Text colour:</span>
<input id="foreground" value="black" />
</label>
<div id="myDropdown1">
<select name="suggestion-bg" class="sug-fg">
<option>Suggestions</option>
<option value="0" data-imagesrc="Suggestions/score21.0.png" >21.0</option>
<option value="0" data-imagesrc="Suggestions/score18.3.png" >18.3</option>
<option value="0" data-imagesrc="Suggestions/score16.7.png" >16.7</option>
<option value="0" data-imagesrc="Suggestions/score15.1.png" >15.1</option>
</select>
</div>
<script>
jQuery('#myDropdown1').ddslick({
onSelected: function(selectedData){
}
});
</script>
</div>
<input type="image" src = "Color picker.png" class="wheel" id="wheel-bg" data-wheelcolorpicker=""/>
<script type="text/javascript">
jQuery(function() {
jQuery('#wheel-bg').on('slidermove', function() {
jQuery('#background').val(jQuery(this).wheelColorPicker('getValue', 'rgb'));
jQuery('#background').trigger("input");
});
});
</script>
<input type="image" src = "Color picker.png" class="wheel2" id="wheel-fg" data-wheelcolorpicker=""/>
<script type="text/javascript">
jQuery(function() {
jQuery('#wheel-fg').on('slidermove', function() {
jQuery('#foreground').val(jQuery(this).wheelColorPicker('getValue', 'rgb'));
jQuery('#foreground').trigger("input");
});
});
</script>
</div>
<div class="text-display">
<div><h2 class = "score" id=results></h2></div>
<!-- <h1>Usage</h1> -->
<p>Choose background and text colour by name, rgb combination, hex code, or colour wheel. Press suggestions for optimized colours based on opposing colour. Scores based on WCAG 2.0 contrast guidelines. High scores have better contrast and readability, with 21 being the best possible score. Click on Colourable title to reset colours. When background is a semi-transparent colour, contrast ratio will provide error margin to accounts for colours that they may be over. </p>
<P>Suggestions do not currently work, the value shown is just an image. Look for functional suggestions in the next version!
</p>
<!--<p>Press up and down keyboard arrows while over a number and inside a functional colour notation to make it increment/decrement. Use Shift or Alt to change the increment/decrement amount.</p> -->
</div>
</section>
<section id="foregroundDisplay">
</section>
<script src="incrementable.js" id="incrementable" async></script>
<script src="color.js"></script>
<script src="contrast-ratio.js"></script>
</body>
</html>