-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
169 lines (145 loc) · 5.52 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html><html lang="en">
<head><title>darth-fader</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link id="luckiestFont" href="https://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet">
<link id="demoStyles" rel="stylesheet" type="text/css" href="demoStyles.css">
<script src="darth-fader.js"></script>
</head>
<body>
<div id="holder">
<div id="intro" class="qr" style="text-align: center;"><hr>
<i style="font-size:27px;font-family:'luckiest guy'">
How do you feel<br class="mobr"> about surveys?
</i><br>
<svg id="svg0"
viewbox="0 0 220 340"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g
transform="scale(2.2) translate(-50 -25)"
fill-rule="evenOdd"
>
<path
id="boxPath"
d="M50 50Q45 100 50 150Q100 155 150 150Q155 100 150 50Q100 45 50 50Z"
style="
stroke: rgb(102,102,102);
stroke-width: 10;
stroke-linejoin: miter;
stroke-miterlimit: 10;
fill: rgb(255,255,255);
"
/>
<path
id="mouthPath"
d="M72 80q30 5 63 0q-8 20 0 22q-30 3 -64 0q0 -9 -3 -18l-8 4q5 -3 14 -14Z"
style="
fill: rgb(102,102,102);
"
/>
</g>
</svg>
<div style="text-align:center;">
<input
id="faceFader"
style="width:300px;"
type="range"
data-fade="
colors : [
'rgb(128, 0, 128)', 0.0,
'rgb(128, 0, 128)', 0.35,
'rgb(255, 255, 255)', 0.5,
'rgb(255, 180, 0)', 0.6,
'rgb(255, 180, 0)', 1.0
],
facePaths : [
'M0 40Q72 100 0 160Q100 122 200 160Q128 100 200 40Q100 72 0 40Z', 0,
'M50 50Q45 100 50 150Q100 155 150 150Q155 100 150 50Q100 45 50 50Z', 0.5,
'M50 0Q72 100 50 180Q100 220 150 180Q128 100 150 0Q100 20 50 0Z', 1
],
mouthPaths : [
'M52 75q35 37 88 0q26 23 0 46q-28 -50 -86 0q-20 -20 -3 -43l-10 8q6 -18 18 -13Z', 0,
'M52 75q47 30 88 0q24 23 0 46q-43 -43 -86 0q-15 -20 -3 -43l-10 8q6 -18 18 -13Z', 0.05,
'M72 80q30 5 63 0q-8 20 0 22q-30 3 -64 0q0 -9 -3 -18l-8 4q5 -3 14 -14Z', 0.5,
'M75 50q20 5 57 0q-20 60 0 92q-30 30 -60 0q4 -60 0 -88l-12 2q10 -2 18 -14Z', 1
],
strokeColors : [
'rgb( 80, 0, 80)', 0.0,
'rgb( 80, 0, 80)', 0.4,
'rgb(102,102,102)', 0.5,
'rgb(208,111, 15)', 0.6,
'rgb(208,111, 15)', 1.0
]
"
data-fade-opts="snap:'facePaths',thumb:'colors'"
/>
<hr>
</div>
</div>
<div id="description" class="qr">
<b>darth-fader</b>, the master of all faders,
adds a customizable <i>onfade event</i>
to any specified <i><input></i> element in a page;
they can be listened for, and handled,
in the same way as any event -
<a href="use.html"><i>learn more about it here</i></a>
</div>
<div id="survey" class="qr" style="padding:10px;"><hr>
<div>
<div id="ques0" class="survQue">
How satisfied were you wolf your service?
</div>
<div id="notSat" class="survArr left">Not Satisfied</div>
<div id="yesSat" class="survArr rite">Satisfied</div>
<br>
</div>
<div class="qr" style="text-align:center;">
<input
type="range"
id="df0" class="rat"
data-fade="
notSatCol : [
'rgb(128, 0, 128)', 0,
'rgb(100, 100, 100)', 0.5,
'rgb(100, 100, 100)', 1
],
yesSatCol : [
'rgb(100, 100, 100)', 0,
'rgb(100, 100, 100)', 0.5,
'rgb(255, 180, 0)', 1
]
"
data-fade-opts="thumb:true",
/>
</div>
</div>
<div class="signature qr">~queviva</div>
</div>
</body>
<script>
(() => {
const Q = Object.fromEntries(
`faceFader svg0 boxPath mouthPath df0 notSat yesSat ques0`
.trim().split(/\s+/)
.map(obj => [obj, document.getElementById(obj)])
);
Q.faceFader.addEventListener('fade', (e, vals=e.detail) => {
Q.boxPath.setAttribute('d', vals.facePaths);
Q.boxPath.style.fill = vals.colors;
Q.boxPath.style.stroke = vals.strokeColors;
Q.mouthPath.style.fill = vals.strokeColors;
Q.mouthPath.setAttribute('d', vals.mouthPaths);
});
Q.df0.addEventListener('fade', (e, vals=e.detail) => {
Q.notSat.style.color = vals.notSatCol;
Q.yesSat.style.color = vals.yesSatCol;
});
Q.ques0.addEventListener('dblclick', () => {
Q.df0.value=50;
Q.df0.dispatchEvent(new Event('input'));
});
})();
</script>
</html>