this repo has no description
Update index.html
+1653
-18
+1653
-18
public/index.html
+1653
-18
public/index.html
···
1
1
<!DOCTYPE html>
2
2
<html>
3
-
<head>
4
-
<meta charset="utf-8">
5
-
<meta name="generator" content="GitLab Pages">
6
-
<title>Plain HTML site using GitLab Pages</title>
7
-
<link rel="stylesheet" href="style.css">
8
-
</head>
9
-
<body>
10
-
<div class="navbar">
11
-
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a>
12
-
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
13
-
<a href="https://gitlab.com/pages/">Other Examples</a>
14
-
</div>
3
+
<head>
4
+
<title>Kinklist</title>
5
+
<meta charset="UTF-8">
6
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
8
+
<script src="//cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
9
+
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTV5ehY1AAAAZElEQVQ4jaWTwQ3AIAwDbcT+I9f9hjYQA/mAkO7igKAACWdFAF0A2gb0hP0uCyTATyAJSoaK5xGyEmTC9lktmORUdAQvBQ5cJshktoDk0HkmKRNUEmuE6ztYVXe7bT+jW7z9zi8qYiodCjCHKgAAAABJRU5ErkJggg==">
10
+
<style>
11
+
body {
12
+
font-family: 'Verdana', 'Arial';
13
+
font-size: 12px;
14
+
}
15
+
h2 {
16
+
padding: 0;
17
+
margin: 0;
18
+
margin-top: 10px;
19
+
margin-bottom: 5px;
20
+
font-size: 18px;
21
+
}
22
+
table {
23
+
border-collapse: collapse;
24
+
margin-bottom: 10px;
25
+
width: 100%;
26
+
}
27
+
th {
28
+
border: solid #999 1px;
29
+
border-right: none;
30
+
margin: 0px;
31
+
padding: 4px;
32
+
background-color: #666;
33
+
color: #FFF;
34
+
}
35
+
th.choicesCol {
36
+
box-sizing: border-box;
37
+
width: 146px;
38
+
}
39
+
th + th {
40
+
border-left: none;
41
+
}
42
+
th:last-child {
43
+
border-right: solid #999 1px;
44
+
}
45
+
td {
46
+
border-left: solid #999 1px;
47
+
border-bottom: solid #999 1px;
48
+
border-right: solid #999 1px;
49
+
margin: 0px;
50
+
padding: 4px;
51
+
padding-right: 2px;
52
+
}
53
+
@-moz-document url-prefix() {
54
+
td {
55
+
padding: 3.3px;
56
+
}
57
+
}
58
+
td + td {
59
+
border-left-style: none;
60
+
}
61
+
.choice {
62
+
box-sizing: border-box;
63
+
width: 15px;
64
+
height: 15px;
65
+
opacity: 0.35;
66
+
overflow: hidden;
67
+
text-indent: 100px;
68
+
border: solid #000 1px;
69
+
border-radius: 50%;
70
+
outline-style: none!important;
71
+
vertical-align: middle;
72
+
display: inline-block;
73
+
cursor: pointer;
74
+
font-size: 0;
75
+
padding: 0;
76
+
}
77
+
.choices .choice {
78
+
transition: all 0.3s ease-in-out;
79
+
}
80
+
.choice + .choice {
81
+
margin-left: 5px;
82
+
}
83
+
.choices .choice:hover {
84
+
opacity: 0.75;
85
+
}
86
+
.choice.selected, .selected > .choice {
87
+
opacity: 1;
88
+
border-width: 2px;
89
+
}
90
+
91
+
.legend {
92
+
vertical-align: middle;
93
+
font-size: 14px;
94
+
}
95
+
.legend div {
96
+
display: inline-block;
97
+
}
98
+
.legend .choice {
99
+
opacity: 1;
100
+
cursor: default;
101
+
}
102
+
.legend-text {
103
+
vertical-align: middle;
104
+
}
105
+
106
+
#ExportWrapper {
107
+
width: 460px;
108
+
height: 36px;
109
+
}
110
+
#URL {
111
+
display: none;
112
+
position: absolute;
113
+
top: 3px;
114
+
box-sizing: border-box;
115
+
width: 300px;
116
+
height: 30px;
117
+
border-radius: 4px;
118
+
border: solid #CCC 1px;
119
+
font-size: 16px;
120
+
padding: 10px;
121
+
text-align: center;
122
+
color: #666;
123
+
font-weight: bold;
124
+
}
125
+
#Export {
126
+
position: absolute;
127
+
left: 310px;
128
+
box-sizing: border-box;
129
+
color: #FFF;
130
+
text-transform: uppercase;
131
+
background-color: #4980ae;
132
+
font-size: 18px;
133
+
width: 150px;
134
+
height: 36px;
135
+
border-style: none;
136
+
border-radius: 4px;
137
+
cursor: pointer;
138
+
transition: all 0.3s ease-in-out;
139
+
}
140
+
#Export:hover {
141
+
opacity: 0.85;
142
+
}
143
+
#Loading {
144
+
display: none;
145
+
overflow: visible;
146
+
line-height: 26px;
147
+
font-size: 16px;
148
+
color: #999;
149
+
font-weight: bold;
150
+
position: absolute;
151
+
top: 4px;
152
+
left: 220px;
153
+
}
154
+
#Loading:before {
155
+
content: '';
156
+
position: absolute;
157
+
box-sizing: border-box;
158
+
width: 26px;
159
+
height: 26px;
160
+
border-radius: 50%;
161
+
border: solid #999 2px;
162
+
border-top-color: transparent;
163
+
border-left-color: #CCC;
164
+
border-right-color: #666;
165
+
animation: spin .5s infinite linear;
166
+
margin-left: -40px;
167
+
}
168
+
@media (min-width: 1700px) {
169
+
.legend {
170
+
position: absolute;
171
+
top: 7px;
172
+
left: 160px;
173
+
}
174
+
.legend div {
175
+
width: 130px;
176
+
}
177
+
#ExportWrapper {
178
+
position: absolute;
179
+
top: -3px;
180
+
right: 46px;
181
+
}
182
+
h1 {
183
+
margin-bottom: 0;
184
+
}
185
+
}
186
+
@media (max-width: 1700px) and (min-width: 800px) {
187
+
.legend div {
188
+
width: 130px;
189
+
padding-bottom: 10px;
190
+
}
191
+
#ExportWrapper {
192
+
position: absolute;
193
+
top: -3px;
194
+
right: 46px;
195
+
}
196
+
}
197
+
@media (max-width: 800px) and (min-width: 598px) {
198
+
.legend div {
199
+
width: 180px;
200
+
padding-bottom: 10px;
201
+
padding-left: 10px;
202
+
}
203
+
#ExportWrapper {
204
+
position: relative;
205
+
margin-top: 10px;
206
+
margin-left: 5px;
207
+
}
208
+
#URL {
209
+
left: 155px;
210
+
width: 190px;
211
+
font-size: 10px;
212
+
}
213
+
#Export {
214
+
left: 0px;
215
+
}
216
+
#Loading {
217
+
left: 230px;
218
+
}
219
+
}
220
+
@media (max-width: 597px) {
221
+
body {
222
+
font-size: 10px;
223
+
}
224
+
table {
225
+
min-width: 345px;
226
+
}
227
+
.legend div {
228
+
width: 150px;
229
+
padding-bottom: 10px;
230
+
padding-left: 10px;
231
+
}
232
+
#ExportWrapper {
233
+
position: relative;
234
+
margin-top: 10px;
235
+
margin-left: 0px;
236
+
width: 345px;
237
+
}
238
+
#URL {
239
+
left: 155px;
240
+
width: 190px;
241
+
font-size: 10px;
242
+
}
243
+
#Export {
244
+
left: 0px;
245
+
}
246
+
#Loading {
247
+
left: 230px;
248
+
}
249
+
}
250
+
@keyframes spin {
251
+
0% {transform: rotate(0deg);}
252
+
100% {transform: rotate(-360deg);}
253
+
}
254
+
255
+
#ExportWrapper :last-child:after {
256
+
content: '';
257
+
display: block;
258
+
clear: both;
259
+
}
260
+
.kinkCategory {
261
+
262
+
}
263
+
.col {
264
+
float: left;
265
+
box-sizing: border-box;
266
+
margin: 0;
267
+
padding: 5px;
268
+
}
269
+
.col.col25 { width: 25%; }
270
+
.col.col33 { width: 33.33333%; }
271
+
.col.col50 { width: 50%; }
272
+
.col.col100 { width: 100%; padding: 0px; }
273
+
.widthWrapper {
274
+
max-width: 1700px;
275
+
margin-left: auto;
276
+
margin-right: auto;
277
+
position: relative;
278
+
}
279
+
#Edit {
280
+
width: 18px;
281
+
height: 18px;
282
+
background-color: transparent;
283
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTIvMTUsb8MLAAABaElEQVQ4jZWUvY3jMBCF390mzpQ6I1wBS5A6oDuQOxi4Ap4rUAlqwR1M7IhQBYRCR1To7G1giJBkes/7gElGg4/zK7AgVaWI0FpLAIwxlsJWwtbRdR0BrKzruvw9pUTnHEMIP4NCCC8gay2991TVnGVVVSvYCyil9AJ6Z0sY5nJCCEwp5Rc/NefcE6Sqb4OMMRQRigiNMcWSU0pPkIgUIW3b5gmqKkmybdtVzOwnSZRKMcaQJOu6zr66rklylZn3PoO+7vf7P2x0Op2w2+1wuVyybxxHNE0DALjdbgCAaZrweDyw3+/xN8aIvu9hrd3y/qthGHA+n3E4HJDH773/dWnLpmfQdnqfNHs2EeEfkpymCU3TYBiGVerGGByPRwDA9XrFOI7FElX1WZpz7ldLOO9PCCHfIeb7qqrqY9C8hEvlHi1h1lqqKr33xZPZXv4KNMOcc6sX+77/8bdSBJUUY8xZisjqLJb6Bpjss/W5PAkOAAAAAElFTkSuQmCC');
284
+
background-repeat: no-repeat;
285
+
float: left;
286
+
border-style: none;
287
+
outline-style: none!important;
288
+
margin-top: 6px;
289
+
margin-right: 4px;
290
+
opacity: 0.5;
291
+
cursor: pointer;
292
+
}
293
+
#Edit:hover {
294
+
opacity: 1;
295
+
}
296
+
297
+
.overlay {
298
+
position: fixed;
299
+
top: 0;
300
+
left: 0;
301
+
right: 0;
302
+
bottom: 0;
303
+
background-color: rgba(0, 0, 0, 0.8);
304
+
display: none;
305
+
}
306
+
#EditOverlay #Kinks {
307
+
box-sizing: border-box;
308
+
position: absolute;
309
+
top: 10px;
310
+
bottom: 50px;
311
+
width: 330px;
312
+
left: 50%;
313
+
margin-left: -165px;
314
+
resize: none;
315
+
padding: 10px;
316
+
border-radius: 5px;
317
+
font-family: monospace, 'Courier new', Courier;
318
+
}
319
+
#EditOverlay #KinksOK {
320
+
box-sizing: border-box;
321
+
position: absolute;
322
+
bottom: 10px;
323
+
width: 330px;
324
+
height: 30px;
325
+
left: 50%;
326
+
margin-left: -165px;
327
+
color: #FFF;
328
+
text-transform: uppercase;
329
+
background-color: #4980ae;
330
+
font-size: 18px;
331
+
border-style: none;
332
+
border-radius: 5px;
333
+
cursor: pointer;
334
+
}
335
+
336
+
#InputOverlay {
337
+
text-align: center;
338
+
white-space: nowrap;
339
+
}
340
+
#InputOverlay:before {
341
+
content: '';
342
+
display: inline-block;
343
+
height: 100%;
344
+
vertical-align: middle;
345
+
margin-right: -0.25em;
346
+
}
347
+
#InputOverlay .widthWrapper {
348
+
display: inline-block;
349
+
vertical-align: middle;
350
+
width: 400px;
351
+
text-align: left;
352
+
max-width: 100%;
353
+
}
354
+
#InputOverlay .widthWrapper #InputCurrent, #InputOverlay .widthWrapper .kink-simple {
355
+
display: block;
356
+
box-sizing: border-box;
357
+
padding: 10px;
358
+
background-color: #EEE;
359
+
}
360
+
#InputOverlay .widthWrapper .kink-simple {
361
+
position: relative;
362
+
height: 40px;
363
+
line-height: 20px;
364
+
cursor: pointer;
365
+
}
366
+
#InputOverlay .widthWrapper .kink-simple .choice {
367
+
margin-right: 5px;
368
+
}
369
+
#InputOverlay .widthWrapper .kink-simple .txt-category {
370
+
position: absolute;
371
+
right: 5px;
372
+
top: 5px;
373
+
text-transform: uppercase;
374
+
font-size: 90%;
375
+
font-weight: bold;
376
+
opacity: 0.6;
377
+
line-height: 1em;
378
+
}
379
+
#InputOverlay .widthWrapper .kink-simple .txt-field, #InputOverlay .widthWrapper .kink-simple .txt-kink {
380
+
vertical-align: middle;
381
+
}
382
+
#InputOverlay .widthWrapper .kink-simple .txt-field:empty {
383
+
display: none;
384
+
}
385
+
#InputOverlay .widthWrapper .kink-simple .txt-field:before {
386
+
content: '(';
387
+
}
388
+
#InputOverlay .widthWrapper .kink-simple .txt-field:after {
389
+
content: ') ';
390
+
}
391
+
392
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child,
393
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
394
+
background-color: #BBB;
395
+
font-size: 10px;
396
+
margin-left: 12px;
397
+
margin-right: 12px;
398
+
height: 33px;
399
+
}
400
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2),
401
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
402
+
background-color: #CCC;
403
+
font-size: 11px;
404
+
margin-left: 6px;
405
+
margin-right: 6px;
406
+
height: 37px;
407
+
}
408
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(3),
409
+
#InputOverlay .widthWrapper #InputNext .kink-simple:first-child {
410
+
background-color: #DDD;
411
+
margin-left: 3px;
412
+
margin-right: 3px;
413
+
}
414
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:first-child {
415
+
padding-bottom: 4px;
416
+
padding-top: 7px;
417
+
}
418
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(3) {
419
+
padding-top: 4px;
420
+
}
421
+
#InputOverlay .widthWrapper #InputPrevious .kink-simple:nth-child(2) {
422
+
padding-bottom: 7px;
423
+
padding-top: 9px;
424
+
}
425
+
#InputOverlay .widthWrapper #InputNext .kink-simple:nth-child(2) {
426
+
padding-top: 7px;
427
+
}
428
+
429
+
#InputPrevious .kink-simple {
430
+
border-top-left-radius: 2px;
431
+
border-top-right-radius: 2px;
432
+
}
433
+
#InputNext .kink-simple {
434
+
border-bottom-left-radius: 2px;
435
+
border-bottom-right-radius: 2px;
436
+
}
437
+
438
+
#InputOverlay .widthWrapper #InputCurrent {
439
+
position: relative;
440
+
}
441
+
#InputOverlay .widthWrapper #InputCurrent .closePopup {
442
+
position: absolute;
443
+
top: 0;
444
+
right: 5px;
445
+
border-style: none;
446
+
background-color: transparent;
447
+
font-size: 30px;
448
+
cursor: pointer;
449
+
outline-style: none!important;
450
+
opacity: 0.65;
451
+
}
452
+
#InputOverlay .widthWrapper #InputCurrent .closePopup:hover {
453
+
opacity: 1;
454
+
}
455
+
#InputOverlay .widthWrapper #InputCurrent h2 {
456
+
text-transform: uppercase;
457
+
opacity: 0.6;
458
+
margin: 0;
459
+
}
460
+
#InputOverlay .widthWrapper #InputCurrent h3 {
461
+
margin-top: 3px;
462
+
margin-bottom: 0;
463
+
font-size: 14px;
464
+
}
465
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice {
466
+
padding: 10px;
467
+
background-color: rgba(255,255,255,0.75);
468
+
border-radius: 4px;
469
+
margin-top: 5px;
470
+
cursor: pointer;
471
+
}
472
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected {
473
+
font-weight: bold;
474
+
}
475
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice.selected .choice {
476
+
opacity: 1;
477
+
}
478
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice:hover {
479
+
padding: 8px;
480
+
border: solid #999 2px;
481
+
background-color: rgba(255,255,255,1);
482
+
}
483
+
#InputOverlay .widthWrapper #InputCurrent #InputValues .big-choice .btn-num-text {
484
+
float: right;
485
+
display: inline-block;
486
+
border: solid #CCC 1px;
487
+
text-align: center;
488
+
width: 16px;
489
+
border-radius: 3px;
490
+
}
491
+
#StartBtn {
492
+
position: absolute;
493
+
top: -3px;
494
+
right: 5px;
495
+
box-sizing: border-box;
496
+
width: 36px;
497
+
height: 36px;
498
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMTUvMTWxuPuyAAACcElEQVRYhe3X30tTYRzH8fdz3FYTd1xamAuTLDbM3EwqNMnoQgxydVH0A6Ks/oG6Mvp1n1flVUJE3pjUTVPCCJxmEKTWRAuCApujkmhJoZu57ZwuwsCaOx7nbBf73D2H7/PldfjCc54j6CxXSaNI/xvwdzIgrWRAWsmAtJJ2IIOe4iLzejoqmym1lDAZ+UFEicatC8Vm6A++5Jb/Pm+nxlIHatl2keo8FwJBriGHREe8U7bjyrWz7/m51IHq1lWjqire4AAvJkf5qczGrduUvYHTRQdxyQ5dGN0gg8hCBc4MXyUQnliwbqO5kOO2/ZzyXQagONvGcO0DLrxp5m7As3ygxUZB4aTvEt1fnuGSHQgEnoleKnIdEEi8NymQ6h7555nocvJt9jsPJ3o4XFhHq/MaAkFF/xE+hD5p9kwKJLqccZ+HYjMcs9XTXnkdSUi0BToXhYEUnUM7rFvnYRqHryx6b1Ig1T2C6h4h0uDjqK0eSUi4ZAc9VbeRhMS76XFdGFjmkblkB3277yAbc3g/PY7D69bdc9lGNoexGi10fOzG7nWTb7KuLCh8YJAyy2YEgqE997AaLbQFOjnxqom1JiueXTd190xqZOZHOwFoLDrEVCxMm9/D+dfNSELiSVUrpZaSlQXNpTc4wJrHNX/W+SYr5bKdqBr/45soSxqZQWTNW/tDn+etV0umpbT93VtP8awSwZhl4EZZE/7wwgddsdmGJAQxRUktyPt1gIaCvTQU1Ca8eghAVVX6goO6QULPn2vBqnyatpylJm87RrHwu0TVKE+DQ7SMtSe8FSQNWomk3Z06A9JKBqSVDEgraQf6BTg8uT5wSV/pAAAAAElFTkSuQmCC');
499
+
border-style: none;
500
+
border-radius: 4px;
501
+
cursor: pointer;
502
+
}
503
+
#StartBtn:hover {
504
+
opacity: 0.8;
505
+
}
506
+
@media (max-height: 500px) {
507
+
#InputPrevious, #InputNext {
508
+
display: none;
509
+
}
510
+
}
511
+
</style>
512
+
</head>
513
+
<body>
514
+
<div class="widthWrapper">
515
+
<button id="Edit"></button>
516
+
<h1>Kink list</h1>
517
+
<div class="legend">
518
+
<div><span data-color="#FFFFFF" class="choice notEntered"></span> <span class="legend-text">Not Entered</span></div>
519
+
<div><span data-color="#6DB5FE" class="choice favorite"></span> <span class="legend-text">Favorite</span></div>
520
+
<div><span data-color="#23FD22" class="choice like"></span> <span class="legend-text">Like</span></div>
521
+
<div><span data-color="#FDFD6B" class="choice okay"></span> <span class="legend-text">Okay</span></div>
522
+
<div><span data-color="#DB6C00" class="choice maybe"></span> <span class="legend-text">Maybe</span></div>
523
+
<div><span data-color="#920000" class="choice no"></span> <span class="legend-text">No</span></div>
524
+
<div><span data-color="pattern" class="choice try"></span> <span class="legend-text">Want To Try</span></div>
525
+
</div>
526
+
<div id="ExportWrapper">
527
+
<input type="text" id="URL">
528
+
<button id="Export">Export</button>
529
+
<div id="Loading">Loading</div>
530
+
</div>
531
+
<button id="StartBtn"></button>
532
+
<div id="InputList"></div>
533
+
</div>
534
+
<div id="EditOverlay" class="overlay">
535
+
<textarea id="Kinks">
536
+
#Bodies
537
+
(General)
538
+
* Skinny
539
+
* Chubby
540
+
* Hyper
541
+
* Twink
542
+
* Bear
543
+
* Small breasts
544
+
* Large breasts
545
+
* Hyper breasts
546
+
* Small cocks
547
+
* Large cocks
548
+
* Hyper cocks
549
+
550
+
#Clothing
551
+
(Self, Partner)
552
+
* Clothed sex
553
+
* Skirts
554
+
* Lingerie
555
+
* Stockings
556
+
* Heels
557
+
* Leather
558
+
* Latex
559
+
* Uniform / costume
560
+
* Gothic
561
+
* Bodysuits
562
+
* Cross-dressing
563
+
* Animal ears
564
+
* Piercings
565
+
* Nipple piercings
566
+
567
+
#Interactions
568
+
(General)
569
+
* You and 1 male
570
+
* You and 1 female
571
+
* You and 1 enby
572
+
* You and MtF trans
573
+
* You and FtM trans
574
+
* You and 1 male, 1 female
575
+
* You and 2 males
576
+
* You and 2 females
577
+
* You and 2 enby
578
+
* Group sex
579
+
* ERPing
580
+
* Handholding (intense)
581
+
582
+
#General
583
+
(Giving, Receiving)
584
+
* Romance / Affection
585
+
* Handjob / fingering
586
+
* Blowjob
587
+
* Deep throat
588
+
* Swallowing
589
+
* Facials
590
+
* Cunnilingus
591
+
* Face-sitting
592
+
* Edging
593
+
* Teasing
594
+
* JOI, SI
595
+
596
+
#Butt play
597
+
(Giving, Receiving)
598
+
* Anal sex, pegging
599
+
* Rimming
600
+
* Double penetration
601
+
* Anal fisting
602
+
603
+
#Restrictive
604
+
(Self, Partner)
605
+
* Gag
606
+
* Collar
607
+
* Leash
608
+
* Chastity
609
+
* Bondage (Light)
610
+
* Bondage (Heavy)
611
+
* Encasement
612
+
613
+
#Toys
614
+
(Self, Partner)
615
+
* Dildos
616
+
* Dragon dildo
617
+
* Horse dildo
618
+
* Butt plug
619
+
* Tail plug
620
+
* Anal beads
621
+
* Vibrators
622
+
* Sounding
623
+
624
+
#Domination
625
+
(Dominant, Submissive)
626
+
* Dominant / Submissive
627
+
* Domestic servitude
628
+
* Slavery
629
+
* Pet play
630
+
* Daddy/Mommy
631
+
* Discipline
632
+
* Begging
633
+
* Forced orgasm
634
+
* Orgasm control
635
+
* Orgasm denial
636
+
* Power exchange
637
+
* Neglect play
638
+
* Breath play
639
+
640
+
#Fantasy
641
+
(Self, Partner)
642
+
* Futanari
643
+
* Nekomimi / Cat features
644
+
* Kemonomimi / Animal features
645
+
* Furry
646
+
* Cows
647
+
* Rodents
648
+
* Animal Crossing characters
649
+
* Vore
650
+
* Digestion
651
+
* Transformation
652
+
* Inflation
653
+
* Growth
654
+
* Tentacles
655
+
* Consentacles
656
+
* Monster or Alien
657
+
* Living clothes
658
+
* Force-feeding
659
+
* Hermaphrodite
660
+
661
+
#Fantasy / Noncon
662
+
(Aggressor, Target)
663
+
* Non-con / rape
664
+
* Blackmail / coercion
665
+
* Kidnapping
666
+
* Drugs / alcohol
667
+
* Sleep play
668
+
* Slavery play
669
+
670
+
#Fantasy / Taboo
671
+
(General)
672
+
* Incest
673
+
* Cheating
674
+
* Exhibitionism
675
+
* Voyeurism
676
+
677
+
#Fluids
678
+
(General)
679
+
* Blood
680
+
* Watersports
681
+
* Lactation
682
+
* Diapers
683
+
* Cum play
684
+
685
+
#Degradation
686
+
(Giving, Receiving)
687
+
* Glory hole
688
+
* Name calling
689
+
* Humiliation
690
+
* Cleaning up
691
+
692
+
#Touch & Stimulation
693
+
(Actor, Subject)
694
+
* Cock/Pussy worship
695
+
* Ass worship
696
+
* Foot play
697
+
* Tickling
698
+
* Sensation play
699
+
* Electro stimulation
700
+
701
+
#Misc. Fetish
702
+
(Giving, Receiving)
703
+
* Fisting
704
+
* Gangbang
705
+
* Impregnation
706
+
* Pregnancy
707
+
* Feminization
708
+
* Cuckold / Cuckquean
709
+
710
+
#Pain
711
+
(Giving, Receiving)
712
+
* Light pain
713
+
* Heavy pain
714
+
* Nipple clamps
715
+
* Clothes pins
716
+
* Caning
717
+
* Flogging
718
+
* Beating
719
+
* Spanking
720
+
* Cock/Pussy slapping
721
+
* Cock/Pussy torture
722
+
* Hot Wax
723
+
* Scratching
724
+
* Biting
725
+
* Cutting
726
+
</textarea>
727
+
<button id="KinksOK">Accept</button>
728
+
</div>
729
+
<div id="InputOverlay" class="overlay">
730
+
<div class="widthWrapper">
731
+
<div id="InputPrevious"></div>
732
+
<div id="InputCurrent">
733
+
<h2 id="InputCategory"></h2>
734
+
<h3 id="InputField"></h3>
735
+
<button class="closePopup">×</button>
736
+
<div id="InputValues"></div>
737
+
</div>
738
+
<div id="InputNext"></div>
739
+
</div>
740
+
</div>
741
+
<script>
742
+
var log = function(val, base) {
743
+
return Math.log(val) / Math.log(base);
744
+
};
745
+
var strToClass = function(str){
746
+
var className = "";
747
+
str = str.toLowerCase();
748
+
var validChars = 'abcdefghijklmnopqrstuvwxyz';
749
+
var newWord = false;
750
+
for(var i = 0; i < str.length; i++) {
751
+
var chr = str[i];
752
+
if(validChars.indexOf(chr) >= 0) {
753
+
if(newWord) chr = chr.toUpperCase();
754
+
className += chr;
755
+
newWord = false;
756
+
}
757
+
else {
758
+
newWord = true;
759
+
}
760
+
}
761
+
return className;
762
+
};
763
+
var addCssRule = function(selector, rules){
764
+
var sheet = document.styleSheets[0];
765
+
if("insertRule" in sheet) {
766
+
sheet.insertRule(selector + "{" + rules + "}", 0);
767
+
}
768
+
else if("addRule" in sheet) {
769
+
sheet.addRule(selector, rules, 0);
770
+
}
771
+
};
772
+
773
+
var kinks = {};
774
+
var inputKinks = {};
775
+
var colors = {};
776
+
var level = {};
777
+
778
+
var hatchPattern = function(patCanvas, x1, y1, dx, dy, delta){
779
+
var patContext = patCanvas.getContext('2d');
780
+
patContext.rect(x1, y1, dx, dy);
781
+
patContext.save();
782
+
patContext.clip();
783
+
var majorAxe = _.max([dx, dy]);
784
+
patContext.strokeStyle = 'rgba(0, 0, 0, 0.5)';
785
+
786
+
_.each(_.range(-1*(majorAxe) , majorAxe, delta), function(n, i){
787
+
788
+
patContext.beginPath();
789
+
patContext.moveTo(dy - n + x1 , y1);
790
+
patContext.lineTo(-n + x1, y1+ dy);
791
+
patContext.stroke();
792
+
})
793
+
patContext.restore();
794
+
};
795
+
796
+
$(function(){
797
+
798
+
var imgurClientId = '9db53e5936cd02f';
799
+
800
+
inputKinks = {
801
+
$columns: [],
802
+
createCategory: function(name, fields){
803
+
var $category = $('<div class="kinkCategory">')
804
+
.addClass('cat-' + strToClass(name))
805
+
.data('category', name)
806
+
.append($('<h2>')
807
+
.text(name));
808
+
809
+
var $table = $('<table class="kinkGroup">').data('fields', fields);
810
+
var $thead = $('<thead>').appendTo($table);
811
+
for(var i = 0; i < fields.length; i++) {
812
+
$('<th>').addClass('choicesCol').text(fields[i]).appendTo($thead);
813
+
}
814
+
$('<th>').appendTo($thead);
815
+
$('<tbody>').appendTo($table);
816
+
$category.append($table);
817
+
818
+
return $category;
819
+
},
820
+
createChoice: function(){
821
+
var $container = $('<div>').addClass('choices');
822
+
var levels = Object.keys(level);
823
+
for(var i = 0; i < levels.length; i++) {
824
+
$('<button>')
825
+
.addClass('choice')
826
+
.addClass(level[levels[i]])
827
+
.data('level', levels[i])
828
+
.data('levelInt', i)
829
+
.attr('title', levels[i])
830
+
.appendTo($container)
831
+
.on('click', function(){
832
+
$container.find('button').removeClass('selected');
833
+
$(this).addClass('selected');
834
+
});
835
+
}
836
+
return $container;
837
+
},
838
+
createKink: function(fields, name){
839
+
var $row = $('<tr>').data('kink', name).addClass('kinkRow');
840
+
for(var i = 0; i < fields.length; i++) {
841
+
var $choices = inputKinks.createChoice();
842
+
$choices.data('field', fields[i]);
843
+
$choices.addClass('choice-' + strToClass(fields[i]));
844
+
$('<td>').append($choices).appendTo($row);
845
+
}
846
+
$('<td>').text(name).appendTo($row);
847
+
$row.addClass('kink-' + strToClass(name));
848
+
return $row;
849
+
},
850
+
createColumns: function(){
851
+
var colClasses = ['100', '50', '33', '25'];
852
+
853
+
var numCols = Math.floor((document.body.scrollWidth - 20) / 400);
854
+
if(!numCols) numCols = 1;
855
+
if(numCols > 4) numCols = 4;
856
+
var colClass = 'col' + colClasses[numCols - 1];
857
+
858
+
inputKinks.$columns = [];
859
+
for(var i = 0; i < numCols; i++){
860
+
inputKinks.$columns.push($('<div>').addClass('col ' + colClass).appendTo($('#InputList')));
861
+
}
862
+
},
863
+
placeCategories: function($categories){
864
+
var $body = $('body');
865
+
var totalHeight = 0;
866
+
for(var i = 0; i < $categories.length; i++) {
867
+
var $clone = $categories[i].clone().appendTo($body);
868
+
var height = $clone.height();;
869
+
totalHeight += height;
870
+
$clone.remove();
871
+
}
872
+
873
+
var colHeight = totalHeight / (inputKinks.$columns.length);
874
+
var colIndex = 0;
875
+
for(var i = 0; i < $categories.length; i++) {
876
+
var curHeight = inputKinks.$columns[colIndex].height();
877
+
var catHeight = $categories[i].height();
878
+
if(curHeight + (catHeight / 2) > colHeight) colIndex++;
879
+
while(colIndex >= inputKinks.$columns.length) {
880
+
colIndex--;
881
+
}
882
+
inputKinks.$columns[colIndex].append($categories[i]);
883
+
}
884
+
},
885
+
fillInputList: function(){
886
+
$('#InputList').empty();
887
+
inputKinks.createColumns();
888
+
889
+
var $categories = [];
890
+
var kinkCats = Object.keys(kinks);
891
+
for(var i = 0; i < kinkCats.length; i++) {
892
+
var catName = kinkCats[i];
893
+
var category = kinks[catName];
894
+
var fields = category.fields;
895
+
var kinkArr = category.kinks;
896
+
897
+
var $category = inputKinks.createCategory(catName, fields);
898
+
var $tbody = $category.find('tbody');
899
+
for(var k = 0; k < kinkArr.length; k++) {
900
+
$tbody.append(inputKinks.createKink(fields, kinkArr[k]));
901
+
}
902
+
903
+
$categories.push($category);
904
+
}
905
+
inputKinks.placeCategories($categories);
906
+
907
+
// Make things update hash
908
+
$('#InputList').find('button.choice').on('click', function(){
909
+
location.hash = inputKinks.updateHash();
910
+
});
911
+
},
912
+
init: function(){
913
+
// Set up DOM
914
+
inputKinks.fillInputList();
915
+
916
+
// Read hash
917
+
inputKinks.parseHash();
918
+
919
+
var patCanvas = document.createElement('canvas');
920
+
patCanvas.height = 30;
921
+
patCanvas.width = 30;
922
+
hatchPattern(patCanvas, 0,0,30,30,5);
923
+
patCanvas.toBlob(function(blob) {
924
+
var patternImg = document.createElement('img');
925
+
patternImg.crossOrigin = 'Anonymous';
926
+
var url = URL.createObjectURL(blob);
927
+
928
+
patternImg.onload = function() {
929
+
// no longer need to read the blob so it's revoked
930
+
URL.revokeObjectURL(url);
931
+
};
932
+
933
+
patternImg.src = url;
934
+
patternImg.setAttribute('id', 'patternImg');
935
+
patternImg.setAttribute('hidden','true');
936
+
// var body = document.getElementsByTagName('body')[0]
937
+
document.body.appendChild(patternImg);
938
+
},'image/png');
939
+
940
+
941
+
// Make export button work
942
+
$('#Export').on('click', inputKinks.export);
943
+
$('#URL').on('click', function(){ this.select(); });
944
+
945
+
// On resize, redo columns
946
+
(function(){
947
+
948
+
var lastResize = 0;
949
+
$(window).on('resize', function(){
950
+
var curTime = (new Date()).getTime();
951
+
lastResize = curTime;
952
+
setTimeout(function(){
953
+
if(lastResize === curTime) {
954
+
inputKinks.fillInputList();
955
+
inputKinks.parseHash();
956
+
}
957
+
}, 500);
958
+
});
959
+
960
+
})();
961
+
},
962
+
hashChars: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.=+*^!@",
963
+
maxPow: function(base, maxVal) {
964
+
var maxPow = 1;
965
+
for(var pow = 1; Math.pow(base, pow) <= maxVal; pow++){
966
+
maxPow = pow;
967
+
}
968
+
return maxPow;
969
+
},
970
+
prefix: function(input, len, char){
971
+
while(input.length < len) {
972
+
input = char + input;
973
+
}
974
+
return input;
975
+
},
976
+
drawLegend: function(context){
977
+
context.font = "bold 13px Arial";
978
+
context.fillStyle = '#000000';
979
+
980
+
var levels = Object.keys(colors);
981
+
var x = context.canvas.width - 15 - (120 * levels.length);
982
+
var patternImg = document.getElementById('patternImg');
983
+
var pattern = context.createPattern(patternImg,'repeat');
984
+
for(var i = 0; i < levels.length; i++) {
985
+
context.beginPath();
986
+
context.arc(x + (120 * i), 17, 8, 0, 2 * Math.PI, false);
987
+
if (colors[levels[i]] != 'pattern') {
988
+
context.fillStyle = colors[levels[i]];
989
+
}
990
+
else {
991
+
context.fillStyle = pattern;
992
+
}
993
+
context.fill();
994
+
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
995
+
context.lineWidth = 1;
996
+
context.stroke();
997
+
998
+
context.fillStyle = '#000000';
999
+
context.fillText(levels[i], x + 15 + (i * 120), 22);
1000
+
}
1001
+
},
1002
+
setupCanvas: function(width, height, username){
1003
+
$('#mainCanvas').remove();
1004
+
var canvas = document.createElement('canvas');
1005
+
canvas.setAttribute('id', 'mainCanvas');
1006
+
canvas.width = width;
1007
+
canvas.height = height;
1008
+
1009
+
var $canvas = $('#mainCanvas');
1010
+
$canvas.css({
1011
+
width: width,
1012
+
height: height
1013
+
});
1014
+
// $canvas.insertBefore($('#InputList'));
1015
+
1016
+
var context = canvas.getContext('2d');
1017
+
context.fillStyle = '#FFFFFF';
1018
+
context.fillRect(0, 0, canvas.width, canvas.height);
1019
+
1020
+
context.font = "bold 24px Arial";
1021
+
context.fillStyle = '#000000';
1022
+
context.fillText('Kinklist ' + username, 5, 25);
1023
+
1024
+
inputKinks.drawLegend(context);
1025
+
return { context: context, canvas: canvas };
1026
+
},
1027
+
drawCallHandlers: {
1028
+
simpleTitle: function(context, drawCall){
1029
+
context.fillStyle = '#000000';
1030
+
context.font = "bold 18px Arial";
1031
+
context.fillText(drawCall.data, drawCall.x, drawCall.y + 5);
1032
+
},
1033
+
titleSubtitle: function(context, drawCall){
1034
+
context.fillStyle = '#000000';
1035
+
context.font = "bold 18px Arial";
1036
+
context.fillText(drawCall.data.category, drawCall.x, drawCall.y + 5);
1037
+
1038
+
var fieldsStr = drawCall.data.fields.join(', ');
1039
+
context.font = "italic 12px Arial";
1040
+
context.fillText(fieldsStr, drawCall.x, drawCall.y + 20);
1041
+
},
1042
+
kinkRow: function(context, drawCall){
1043
+
context.fillStyle = '#000000';
1044
+
context.font = "12px Arial";
1045
+
1046
+
var x = drawCall.x + 5 + (drawCall.data.choices.length * 20);
1047
+
var y = drawCall.y - 6;
1048
+
context.fillText(drawCall.data.text, x, y);
1049
+
var patternImg = document.getElementById('patternImg');
1050
+
var pattern = context.createPattern(patternImg,'repeat');
1051
+
// Circles
1052
+
for(var i = 0; i < drawCall.data.choices.length; i++){
1053
+
var choice = drawCall.data.choices[i];
1054
+
var color = colors[choice];
1055
+
1056
+
var x = 10 + drawCall.x + (i * 20);
1057
+
var y = drawCall.y - 10;
1058
+
1059
+
context.beginPath();
1060
+
context.arc(x, y, 8, 0, 2 * Math.PI, false);
1061
+
if (color != 'pattern') {
1062
+
context.fillStyle = color;
1063
+
}
1064
+
else {
1065
+
context.fillStyle = pattern;
1066
+
}
1067
+
context.fill();
1068
+
context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
1069
+
context.lineWidth = 1;
1070
+
context.stroke();
1071
+
}
1072
+
1073
+
}
1074
+
},
1075
+
export: function(){
1076
+
var username = prompt("Please enter your name");
1077
+
if(typeof username !== 'string') return;
1078
+
else if (username.length ) username = '(' + username + ')';
1079
+
1080
+
$('#Loading').fadeIn();
1081
+
$('#URL').fadeOut();
1082
+
1083
+
// Constants
1084
+
var numCols = 6;
1085
+
var columnWidth = 250;
1086
+
var simpleTitleHeight = 35;
1087
+
var titleSubtitleHeight = 50;
1088
+
var rowHeight = 25;
1089
+
var offsets = {
1090
+
left: 10,
1091
+
right: 10,
1092
+
top: 50,
1093
+
bottom: 10
1094
+
};
1095
+
1096
+
// Find out how many we have of everything
1097
+
var numCats = $('.kinkCategory').length;
1098
+
var dualCats = $('.kinkCategory th + th + th').length;
1099
+
var simpleCats = numCats - dualCats;
1100
+
var numKinks = $('.kinkRow').length;
1101
+
1102
+
// Determine the height required for all categories and kinks
1103
+
var totalHeight = (
1104
+
(numKinks * rowHeight) +
1105
+
(dualCats * titleSubtitleHeight) +
1106
+
(simpleCats * simpleTitleHeight)
1107
+
);
1108
+
1109
+
// Initialize columns and drawStacks
1110
+
var columns = [];
1111
+
for(var i = 0; i < numCols; i++){
1112
+
columns.push({ height: 0, drawStack: []});
1113
+
}
1114
+
1115
+
// Create drawcalls and place them in the drawStack
1116
+
// for the appropriate column
1117
+
var avgColHeight = totalHeight / numCols;
1118
+
var columnIndex = 0;
1119
+
$('.kinkCategory').each(function(){
1120
+
var $cat = $(this);
1121
+
var catName = $cat.data('category');
1122
+
var category = kinks[catName];
1123
+
var fields = category.fields;
1124
+
var catKinks = category.kinks;
1125
+
1126
+
var catHeight = 0;
1127
+
catHeight += (fields.length === 1) ? simpleTitleHeight : titleSubtitleHeight;
1128
+
catHeight += (catKinks.length * rowHeight);
1129
+
1130
+
// Determine which column to place this category in
1131
+
if((columns[columnIndex].height + (catHeight / 2)) > avgColHeight) columnIndex++;
1132
+
while(columnIndex >= numCols) columnIndex--;
1133
+
var column = columns[columnIndex];
1134
+
1135
+
// Drawcall for title
1136
+
var drawCall = { y: column.height };
1137
+
column.drawStack.push(drawCall);
1138
+
if(fields.length < 2) {
1139
+
column.height += simpleTitleHeight;
1140
+
drawCall.type = 'simpleTitle';
1141
+
drawCall.data = catName;
1142
+
}
1143
+
else {
1144
+
column.height += titleSubtitleHeight;
1145
+
drawCall.type = 'titleSubtitle';
1146
+
drawCall.data = {
1147
+
category: catName,
1148
+
fields: fields
1149
+
};
1150
+
}
1151
+
1152
+
// Drawcalls for kinks
1153
+
$cat.find('.kinkRow').each(function(){
1154
+
var $kinkRow = $(this);
1155
+
var drawCall = { y: column.height, type: 'kinkRow', data: {
1156
+
choices: [],
1157
+
text: $kinkRow.data('kink')
1158
+
}};
1159
+
column.drawStack.push(drawCall);
1160
+
column.height += rowHeight;
1161
+
1162
+
// Add choices
1163
+
$kinkRow.find('.choices').each(function(){
1164
+
var $selection = $(this).find('.choice.selected');
1165
+
var selection = ($selection.length > 0)
1166
+
? $selection.data('level')
1167
+
: Object.keys(level)[0];
1168
+
1169
+
drawCall.data.choices.push(selection);
1170
+
});
1171
+
});
1172
+
});
1173
+
1174
+
var tallestColumnHeight = 0;
1175
+
for(var i = 0; i < columns.length; i++){
1176
+
if(tallestColumnHeight < columns[i].height) {
1177
+
tallestColumnHeight = columns[i].height;
1178
+
}
1179
+
}
1180
+
1181
+
var canvasWidth = offsets.left + offsets.right + (columnWidth * numCols);
1182
+
var canvasHeight = offsets.top + offsets.bottom + tallestColumnHeight;
1183
+
var setup = inputKinks.setupCanvas(canvasWidth, canvasHeight, username);
1184
+
var context = setup.context;
1185
+
var canvas = setup.canvas;
1186
+
1187
+
for(var i = 0; i < columns.length; i++) {
1188
+
var column = columns[i];
1189
+
var drawStack = column.drawStack;
1190
+
1191
+
var drawX = offsets.left + (columnWidth * i);
1192
+
for(var j = 0; j < drawStack.length; j++){
1193
+
var drawCall = drawStack[j];
1194
+
drawCall.x = drawX;
1195
+
drawCall.y += offsets.top;
1196
+
inputKinks.drawCallHandlers[drawCall.type](context, drawCall);
1197
+
}
1198
+
}
1199
+
1200
+
// return $(canvas).insertBefore($('#InputList'));
1201
+
1202
+
// Send canvas to imgur
1203
+
$.ajax({
1204
+
url: 'https://api.imgur.com/3/image',
1205
+
type: 'POST',
1206
+
headers: {
1207
+
// Your application gets an imgurClientId from Imgur
1208
+
Authorization: 'Client-ID ' + imgurClientId,
1209
+
Accept: 'application/json'
1210
+
},
1211
+
data: {
1212
+
// convert the image data to base64
1213
+
image: canvas.toDataURL().split(',')[1],
1214
+
type: 'base64'
1215
+
},
1216
+
success: function(result) {
1217
+
$('#Loading').hide();
1218
+
var url = 'https://i.imgur.com/' + result.data.id + '.png';
1219
+
$('#URL').val(url).fadeIn();
1220
+
},
1221
+
fail: function(){
1222
+
$('#Loading').hide();
1223
+
alert('Failed to upload to imgur, could not connect');
1224
+
}
1225
+
});
1226
+
},
1227
+
encode: function(base, input){
1228
+
var hashBase = inputKinks.hashChars.length;
1229
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1230
+
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1231
+
1232
+
var output = "";
1233
+
var numChunks = Math.ceil(input.length / inputPow);
1234
+
var inputIndex = 0;
1235
+
for(var chunkId = 0; chunkId < numChunks; chunkId++) {
1236
+
var inputIntValue = 0;
1237
+
for(var pow = 0; pow < inputPow; pow++) {
1238
+
var inputVal = input[inputIndex++];
1239
+
if(typeof inputVal === "undefined") break;
1240
+
var val = inputVal * Math.pow(base, pow);
1241
+
inputIntValue += val;
1242
+
}
1243
+
1244
+
var outputCharValue = "";
1245
+
while(inputIntValue > 0) {
1246
+
var maxPow = Math.floor(log(inputIntValue, hashBase));
1247
+
var powVal = Math.pow(hashBase, maxPow);
1248
+
var charInt = Math.floor(inputIntValue / powVal);
1249
+
var subtract = charInt * powVal;
1250
+
var char = inputKinks.hashChars[charInt];
1251
+
outputCharValue += char;
1252
+
inputIntValue -= subtract;
1253
+
}
1254
+
var chunk = inputKinks.prefix(outputCharValue, outputPow, inputKinks.hashChars[0]);
1255
+
output += chunk;
1256
+
}
1257
+
return output;
1258
+
},
1259
+
decode: function(base, output){
1260
+
var hashBase = inputKinks.hashChars.length;
1261
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1262
+
1263
+
var values = [];
1264
+
var numChunks = Math.max(output.length / outputPow)
1265
+
for(var i = 0; i < numChunks; i++){
1266
+
var chunk = output.substring(i * outputPow, (i + 1) * outputPow);
1267
+
var chunkValues = inputKinks.decodeChunk(base, chunk);
1268
+
for(var j = 0; j < chunkValues.length; j++) {
1269
+
values.push(chunkValues[j]);
1270
+
}
1271
+
}
1272
+
return values;
1273
+
},
1274
+
decodeChunk: function(base, chunk){
1275
+
var hashBase = inputKinks.hashChars.length;
1276
+
var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
1277
+
var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
1278
+
1279
+
var chunkInt = 0;
1280
+
for(var i = 0; i < chunk.length; i++) {
1281
+
var char = chunk[i];
1282
+
var charInt = inputKinks.hashChars.indexOf(char);
1283
+
var pow = chunk.length - 1 - i;
1284
+
var intVal = Math.pow(hashBase, pow) * charInt;
1285
+
chunkInt += intVal;
1286
+
}
1287
+
var chunkIntCopy = chunkInt;
1288
+
1289
+
var output = [];
1290
+
for(var pow = inputPow - 1; pow >= 0; pow--) {
1291
+
var posBase = Math.floor(Math.pow(base, pow));
1292
+
var posVal = Math.floor(chunkInt / posBase);
1293
+
var subtract = posBase * posVal;
1294
+
output.push(posVal);
1295
+
chunkInt -= subtract;
1296
+
}
1297
+
output.reverse();
1298
+
return output;
1299
+
},
1300
+
updateHash: function(){
1301
+
var hashValues = [];
1302
+
$('#InputList .choices').each(function(){
1303
+
var $this = $(this);
1304
+
var lvlInt = $this.find('.selected').data('levelInt');
1305
+
if(!lvlInt) lvlInt = 0;
1306
+
hashValues.push(lvlInt);
1307
+
});
1308
+
return inputKinks.encode(Object.keys(colors).length, hashValues);
1309
+
},
1310
+
parseHash: function(){
1311
+
var hash = location.hash.substring(1);
1312
+
if(hash.length < 10) return;
1313
+
1314
+
var values = inputKinks.decode(Object.keys(colors).length, hash);
1315
+
var valueIndex = 0;
1316
+
$('#InputList .choices').each(function(){
1317
+
var $this = $(this);
1318
+
var value = values[valueIndex++];
1319
+
$this.children().eq(value).addClass('selected');
1320
+
});
1321
+
},
1322
+
saveSelection: function(){
1323
+
var selection = [];
1324
+
$('.choice.selected').each(function(){
1325
+
// .choice selector
1326
+
var selector = '.' + this.className.replace(/ /g, '.');
1327
+
// .choices selector
1328
+
selector = '.' + $(this).closest('.choices')[0].className.replace(/ /g, '.') + ' ' + selector;
1329
+
// .kinkRow selector
1330
+
selector = '.' + $(this).closest('tr.kinkRow')[0].className.replace(/ /g, '.') + ' ' + selector;
1331
+
// .kinkCategory selector
1332
+
selector = '.' + $(this).closest('.kinkCategory')[0].className.replace(/ /g, '.') + ' ' + selector;
1333
+
selector = selector.replace('.selected', '');
1334
+
selection.push(selector);
1335
+
});
1336
+
return selection;
1337
+
},
1338
+
inputListToText: function(){
1339
+
var KinksText = "";
1340
+
var kinkCats = Object.keys(kinks);
1341
+
for(var i = 0; i < kinkCats.length; i++){
1342
+
var catName = kinkCats[i];
1343
+
var catFields = kinks[catName].fields;
1344
+
var catKinks = kinks[catName].kinks;
1345
+
KinksText += '#' + catName + "\r\n";
1346
+
KinksText += '(' + catFields.join(', ') + ")\r\n";
1347
+
for(var j = 0; j < catKinks.length; j++){
1348
+
KinksText += '* ' + catKinks[j] + "\r\n";
1349
+
}
1350
+
KinksText += "\r\n";
1351
+
}
1352
+
return KinksText;
1353
+
},
1354
+
restoreSavedSelection: function(selection){
1355
+
setTimeout(function(){
1356
+
for(var i = 0; i < selection.length; i++){
1357
+
var selector = selection[i];
1358
+
$(selector).addClass('selected');
1359
+
}
1360
+
location.hash = inputKinks.updateHash();
1361
+
}, 300);
1362
+
},
1363
+
parseKinksText: function(kinksText){
1364
+
var newKinks = {};
1365
+
var lines = kinksText.replace(/\r/g, '').split("\n");
1366
+
1367
+
var cat = null;
1368
+
var catName = null;
1369
+
for(var i = 0; i < lines.length; i++){
1370
+
var line = lines[i];
1371
+
if(!line.length) continue;
1372
+
1373
+
if(line[0] === '#') {
1374
+
if(catName){
1375
+
if(!(cat.fields instanceof Array) || cat.fields.length < 1){
1376
+
alert(catName + ' does not have any fields defined!');
1377
+
return;
1378
+
}
1379
+
if(!(cat.kinks instanceof Array) || cat.kinks.length < 1){
1380
+
alert(catName + ' does not have any kinks listed!');
1381
+
return;
1382
+
}
1383
+
newKinks[catName] = cat;
1384
+
}
1385
+
catName = line.substring(1).trim();
1386
+
cat = { kinks: [] };
1387
+
}
1388
+
if(!catName) continue;
1389
+
if(line[0] === '(') {
1390
+
cat.fields = line.substring(1, line.length - 1).trim().split(',');
1391
+
for(var j = 0; j < cat.fields.length; j++){
1392
+
cat.fields[j] = cat.fields[j].trim();
1393
+
}
1394
+
}
1395
+
if(line[0] === '*'){
1396
+
var kink = line.substring(1).trim();
1397
+
cat.kinks.push(kink);
1398
+
}
1399
+
}
1400
+
if(catName && !newKinks[catName]){
1401
+
if(!(cat.fields instanceof Array) || cat.fields.length < 1){
1402
+
alert(catName + ' does not have any fields defined!');
1403
+
return;
1404
+
}
1405
+
if(!(cat.kinks instanceof Array) || cat.kinks.length < 1){
1406
+
alert(catName + ' does not have any kinks listed!');
1407
+
return;
1408
+
}
1409
+
newKinks[catName] = cat;
1410
+
}
1411
+
return newKinks;
1412
+
}
1413
+
};
1414
+
1415
+
$('#Edit').on('click', function(){
1416
+
var KinksText = inputKinks.inputListToText();
1417
+
$('#Kinks').val(KinksText.trim());
1418
+
$('#EditOverlay').fadeIn();
1419
+
});
1420
+
$('#EditOverlay').on('click', function(){
1421
+
$(this).fadeOut();
1422
+
});
1423
+
$('#KinksOK').on('click', function(){
1424
+
var selection = inputKinks.saveSelection();
1425
+
try {
1426
+
var kinksText = $('#Kinks').val();
1427
+
kinks = inputKinks.parseKinksText(kinksText);
1428
+
inputKinks.fillInputList();
1429
+
}
1430
+
catch(e){
1431
+
alert('An error occured trying to parse the text entered, please correct it and try again');
1432
+
return;
1433
+
}
1434
+
inputKinks.restoreSavedSelection(selection);
1435
+
$('#EditOverlay').fadeOut();
1436
+
});
1437
+
$('.overlay > *').on('click', function(e){
1438
+
e.stopPropagation();
1439
+
});
1440
+
1441
+
var stylesheet = document.styleSheets[0];
1442
+
$('.legend .choice').each(function(){
1443
+
var $choice = $(this);
1444
+
var $parent = $choice.parent();
1445
+
var text = $parent.text().trim();
1446
+
var color = $choice.data('color');
1447
+
var cssClass = this.className.replace('choice ', '').trim();
1448
+
1449
+
if (color != 'pattern') {
1450
+
addCssRule('.choice.' + cssClass, 'background-color: ' + color + ';');
1451
+
colors[text] = color;
1452
+
}
1453
+
else {
1454
+
addCssRule('.choice.' + cssClass, 'background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNScgaGVpZ2h0PScxNSc+CiAgPHJlY3Qgd2lkdGg9JzE1JyBoZWlnaHQ9JzE1JyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsNSBsMTUsLTE1CiAgICAgICAgICAgTTAsMTAgbDE1LC0xNQogICAgICAgICAgIE0wLDE1IGwxNSwtMTUKICAgICAgICAgICBNMCwyMCBsMTUsLTE1CiAgICAgICAgICAgTTAsMjUgbDE1LC0xNQogICAgICAgICAgIE0xNCwxNiBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo="); background-repeat: repeat');
1455
+
1456
+
colors[text] = 'pattern';
1457
+
}
1458
+
level[text] = cssClass;
1459
+
});
1460
+
1461
+
kinks = inputKinks.parseKinksText($('#Kinks').text().trim());
1462
+
inputKinks.init();
1463
+
1464
+
(function(){
1465
+
var $popup = $('#InputOverlay');
1466
+
var $previous = $('#InputPrevious');
1467
+
var $next = $('#InputNext');
15
1468
16
-
<h1>Hello World!</h1>
1469
+
// current
1470
+
var $category = $('#InputCategory');
1471
+
var $field = $('#InputField');
1472
+
var $options = $('#InputValues');
17
1473
18
-
<p>
19
-
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
20
-
</p>
21
-
</body>
22
-
</html>
1474
+
function getChoiceValue($choices){
1475
+
var $selected = $choices.find('.choice.selected');
1476
+
return $selected.data('level');
1477
+
}
23
1478
1479
+
function getChoicesElement(category, kink, field){
1480
+
var selector = '.cat-' + strToClass(category);
1481
+
selector += ' .kink-' + strToClass(kink);
1482
+
selector += ' .choice-' + strToClass(field);
1483
+
1484
+
var $choices = $(selector);
1485
+
return $choices;
1486
+
}
1487
+
1488
+
inputKinks.getAllKinks = function(){
1489
+
var list = [];
1490
+
1491
+
var categories = Object.keys(kinks);
1492
+
for(var i = 0; i < categories.length; i++){
1493
+
var category = categories[i];
1494
+
var fields = kinks[category].fields;
1495
+
var kinkArr = kinks[category].kinks;
1496
+
1497
+
for(var j = 0; j < fields.length; j++) {
1498
+
var field = fields[j];
1499
+
for(var k = 0; k < kinkArr.length; k++){
1500
+
var kink = kinkArr[k];
1501
+
var $choices = getChoicesElement(category, kink, field);
1502
+
var value = getChoiceValue($choices);
1503
+
var obj = { category: category, kink: kink, field: field, value: value, $choices: $choices, showField: (fields.length >= 2)};
1504
+
list.push(obj);
1505
+
}
1506
+
}
1507
+
1508
+
}
1509
+
return list;
1510
+
};
1511
+
1512
+
inputKinks.inputPopup = {
1513
+
numPrev: 3,
1514
+
numNext: 3,
1515
+
allKinks: [],
1516
+
kinkByIndex: function(i){
1517
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1518
+
i = (numKinks + i) % numKinks;
1519
+
return inputKinks.inputPopup.allKinks[i];
1520
+
},
1521
+
generatePrimary: function(kink){
1522
+
var $container = $('<div>');
1523
+
var btnIndex = 0;
1524
+
$('.legend > div').each(function(){
1525
+
var $btn = $(this).clone();
1526
+
$btn.addClass('big-choice');
1527
+
$btn.appendTo($container);
1528
+
1529
+
$('<span>')
1530
+
.addClass('btn-num-text')
1531
+
.text(btnIndex++)
1532
+
.appendTo($btn)
1533
+
1534
+
var text = $btn.text().trim().replace(/[0-9]/g, '');
1535
+
if(kink.value === text) {
1536
+
$btn.addClass('selected');
1537
+
}
1538
+
1539
+
$btn.on('click', function(){
1540
+
$container.find('.big-choice').removeClass('selected');
1541
+
$btn.addClass('selected');
1542
+
kink.value = text;
1543
+
$options.fadeOut(200, function(){
1544
+
$options.show();
1545
+
inputKinks.inputPopup.showNext();
1546
+
});
1547
+
var choiceClass = strToClass(text);
1548
+
kink.$choices.find('.' + choiceClass).click();
1549
+
});
1550
+
});
1551
+
return $container;
1552
+
},
1553
+
generateSecondary: function(kink){
1554
+
var $container = $('<div class="kink-simple">');
1555
+
$('<span class="choice">').addClass(level[kink.value]).appendTo($container);
1556
+
$('<span class="txt-category">').text(kink.category).appendTo($container);
1557
+
if(kink.showField){
1558
+
$('<span class="txt-field">').text(kink.field).appendTo($container);
1559
+
}
1560
+
$('<span class="txt-kink">').text(kink.kink).appendTo($container);
1561
+
return $container;
1562
+
},
1563
+
showIndex: function(index){
1564
+
$previous.html('');
1565
+
$next.html('');
1566
+
$options.html('');
1567
+
$popup.data('index', index);
1568
+
1569
+
// Current
1570
+
var currentKink = inputKinks.inputPopup.kinkByIndex(index);
1571
+
var $currentKink = inputKinks.inputPopup.generatePrimary(currentKink);
1572
+
$options.append($currentKink);
1573
+
$category.text(currentKink.category);
1574
+
$field.text((currentKink.showField ? '(' + currentKink.field + ') ' : '') + currentKink.kink);
1575
+
$options.append($currentKink);
1576
+
1577
+
// Prev
1578
+
for(var i = inputKinks.inputPopup.numPrev; i > 0; i--){
1579
+
var prevKink = inputKinks.inputPopup.kinkByIndex(index - i);
1580
+
var $prevKink = inputKinks.inputPopup.generateSecondary(prevKink);
1581
+
$previous.append($prevKink);
1582
+
(function(skip){
1583
+
$prevKink.on('click', function(){
1584
+
inputKinks.inputPopup.showPrev(skip);
1585
+
});
1586
+
})(i);
1587
+
}
1588
+
// Next
1589
+
for(var i = 1; i <= inputKinks.inputPopup.numNext; i++){
1590
+
var nextKink = inputKinks.inputPopup.kinkByIndex(index + i);
1591
+
var $nextKink = inputKinks.inputPopup.generateSecondary(nextKink);
1592
+
$next.append($nextKink);
1593
+
(function(skip){
1594
+
$nextKink.on('click', function(){
1595
+
inputKinks.inputPopup.showNext(skip);
1596
+
});
1597
+
})(i);
1598
+
}
1599
+
},
1600
+
showPrev: function(skip){
1601
+
if(typeof skip !== "number") skip = 1;
1602
+
var index = $popup.data('index') - skip;
1603
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1604
+
index = (numKinks + index) % numKinks;
1605
+
inputKinks.inputPopup.showIndex(index);
1606
+
},
1607
+
showNext: function(skip){
1608
+
if(typeof skip !== "number") skip = 1;
1609
+
var index = $popup.data('index') + skip;
1610
+
var numKinks = inputKinks.inputPopup.allKinks.length;
1611
+
index = (numKinks + index) % numKinks;
1612
+
inputKinks.inputPopup.showIndex(index);
1613
+
},
1614
+
show: function(){
1615
+
inputKinks.inputPopup.allKinks = inputKinks.getAllKinks();
1616
+
inputKinks.inputPopup.showIndex(0);
1617
+
$popup.fadeIn();
1618
+
}
1619
+
};
1620
+
1621
+
$(window).on('keydown', function(e){
1622
+
if(e.altKey || e.shiftKey || e.ctrlKey) return;
1623
+
if(!$popup.is(':visible')) return;
1624
+
1625
+
if(e.keyCode === 38) {
1626
+
inputKinks.inputPopup.showPrev();
1627
+
e.preventDefault();
1628
+
e.stopPropagation();
1629
+
}
1630
+
if(e.keyCode === 40) {
1631
+
inputKinks.inputPopup.showNext();
1632
+
e.preventDefault();
1633
+
e.stopPropagation();
1634
+
}
1635
+
1636
+
var btn = -1;
1637
+
if(e.keyCode >= 96 && e.keyCode <= 101) {
1638
+
btn = e.keyCode - 96;
1639
+
}
1640
+
else if(e.keyCode >= 48 && e.keyCode <= 53) {
1641
+
btn = e.keyCode - 48;
1642
+
}
1643
+
else {
1644
+
return;
1645
+
}
1646
+
1647
+
var $btn = $options.find('.big-choice').eq(btn);
1648
+
$btn.click();
1649
+
});
1650
+
$('#StartBtn').on('click', inputKinks.inputPopup.show);
1651
+
$('#InputCurrent .closePopup, #InputOverlay').on('click', function(){
1652
+
$popup.fadeOut();
1653
+
});
1654
+
})();
1655
+
});
1656
+
</script>
1657
+
</body>
1658
+
</html>