v0.8.html

<!DOCTYPE html>
<html>
    <head>
        <title>Kinklist</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <style>
            body {
                font-family: 'Verdana', 'Arial';
                font-size: 12px;
            }
            h2 {
                padding: 0;
                margin: 0;
                margin-top: 10px;
                margin-bottom: 5px;
                font-size: 18px;
            }
            table {
                border-collapse: collapse;
                min-width: 385px;
                margin-bottom: 10px;
            }
            th {
                border: solid #999 1px;
                border-right: none;
                margin: 0px;
                padding: 4px;
                background-color: #666;
                color: #FFF;
            }
            th.choicesCol {
                box-sizing: border-box;
                width: 125px;
            }
            th + th {
                border-left: none;
            }
            th:last-child {
                border-right: solid #999 1px;
            }
            td {
                border-left: solid #999 1px;
                border-bottom: solid #999 1px;
                border-right: solid #999 1px;
                margin: 0px;
                padding: 4px;
                padding-right: 2px;
            }
            @-moz-document url-prefix() { 
              td {
                 padding: 3.5px;
              }
            }            
            td + td {
                border-left-style: none;
            }
            .choice {
                box-sizing: border-box;
                width: 15px;
                height: 15px;
                opacity: 0.35;
                overflow: hidden;
                text-indent: 100px;
                border: solid #000 1px;
                border-radius: 50%;
                outline-style: none!important;
                vertical-align: middle;
                display: inline-block;
                cursor: pointer;
                transition: all 0.3s ease-in-out;
                font-size: 0;
                padding: 0;
            }
            .choice + .choice {
                margin-left: 5px;
            }
            .choices .choice:hover {
                opacity: 0.75;
            }
            .choice.selected {
                opacity: 1;
                border-width: 2px;
            }
            .choice.notEntered {
                background-color: #FFF;
            }
            .choice.favorite {
                background-color: #FE6BB4;
            }
            .choice.like {
                background-color: #23FD22;
            }
            .choice.okay {
                background-color: #FDFD6B;
            }
            .choice.maybe {
                background-color: #DB6C00;
            }
            .choice.no {
                background-color: #920000;
            }
            
            
            .legend {
                vertical-align: middle;
                font-size: 14px;
            }
            .legend div {
                display: inline-block;
            }
            .legend .choice {
                opacity: 1;
                cursor: default;
                margin-bottom: 2px;
            }
            
            #ExportWrapper {
                width: 460px;
                height: 36px;
            }
            #URL {
                display: none;
                position: absolute;
                top: 3px;
                box-sizing: border-box;
                width: 300px;
                height: 30px;
                border-radius: 4px;
                border: solid #CCC 1px;
                font-size: 16px;
                padding: 10px;
                text-align: center;
                color: #666;
                font-weight: bold;
            }
            #Export {
                position: absolute;
                left: 310px;
                box-sizing: border-box;
                color: #FFF;
                text-transform: uppercase;
                background-color: #4980ae;
                width: 150px;
                height: 36px;
                font-size: 18px;
                border-style: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.3s ease-in-out;
            }
            #Export:hover {
                opacity: 0.85;
            }
            #Loading {
                display: none;
                overflow: visible;
                line-height: 26px;
                font-size: 16px;
                color: #999;
                font-weight: bold;
                position: absolute;
                top: 4px;
                left: 220px;
            }
            #Loading:before {
                content: '';
                position: absolute;
                box-sizing: border-box;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                border: solid #999 2px;
                border-top-color: transparent;
                border-left-color: #CCC;
                border-right-color: #666;
                animation: spin .5s infinite linear;
                margin-left: -40px;
            }
            @media (min-width: 1700px) {
                .kinkCategory {
                    position: absolute;
                    margin-top: 40px;
                    margin-left: 10px;
                }
                .kinkCategory.cat-bodies { left: 000px; top: 000px; }
                .kinkCategory.cat-clothing { left: 000px; top: 215px; }
                .kinkCategory.cat-groupings { left: 000px; top: 480px; }
                .kinkCategory.cat-general { left: 400px; top: 000px; }
                .kinkCategory.cat-assPlay { left: 400px; top: 365px; }
                .kinkCategory.cat-kinksBdsm { left: 800px; top: 000px; }
                .kinkCategory.cat-pain { left: 1215px; top: 000px; }
                .kinkCategory.cat-extreme { left: 1215px; top: 415px; }
                
                .legend {
                    position: absolute;
                    top: 22px;
                    left: 150px;
                }
                .legend div {
                    width: 130px;
                }
                #ExportWrapper {
                    position: absolute;
                    top: 10px;
                    left: 1120px;
                }
            }
            @media (max-width: 1700px) and (min-width: 800px) {
                .kinkCategory {
                    position: absolute;
                    margin-top: 80px;
                    margin-left: 10px;
                }
                .kinkCategory.cat-bodies { left: 000px; top: 000px; }
                .kinkCategory.cat-clothing { left: 000px; top: 225px; }
                .kinkCategory.cat-groupings { left: 000px; top: 525px; }
                .kinkCategory.cat-general { left: 000px; top: 825px; }
                .kinkCategory.cat-assPlay { left: 000px; top: 1375px; }
                .kinkCategory.cat-pain { left: 000px; top: 1575px; }
                .kinkCategory.cat-kinksBdsm { left: 400px; top: 000px; }
                .kinkCategory.cat-extreme { left: 400px; top: 1425px; }
                
                .legend div {
                    width: 130px;
                    padding-bottom: 10px;
                }
                #ExportWrapper {
                    position: absolute;
                    top: 10px;
                    left: 325px;
                }
            }
            @media (max-width: 800px) and (min-width: 598px) {
                table {
                    width: 500px;
                }
                .legend div {
                    width: 180px;
                    padding-bottom: 10px;
                    padding-left: 10px;
                }
                #ExportWrapper {
                    position: relative;
                    margin-top: 10px;
                    margin-left: 40px;
                }
            }
            @media (max-width: 597px) {
                body {
                    font-size: 10px;
                }
                table {
                    min-width: 345px;
                }
                .legend div {
                    width: 150px;
                    padding-bottom: 10px;
                    padding-left: 10px;
                }
                #ExportWrapper {
                    position: relative;
                    margin-top: 10px;
                    margin-left: 0px;
                    width: 345px;
                }
                #URL {
                    left: 155px;
                    width: 190px;
                    font-size: 10px;
                }
                #Export {
                    left: 0px;
                }
                #Loading {
                    left: 230px;
                }
            }
            @keyframes spin {
                0% {transform: rotate(0deg);}
                100% {transform: rotate(-360deg);}
            }
        </style>
    </head>
    <body>
        <h1>Kink list</h1>
        <div class="legend">
            <div><span class="choice notEntered"></span> Not Entered</div>
            <div><span class="choice favorite"></span> Favorite</div>
            <div><span class="choice like"></span> Like</div>
            <div><span class="choice okay"></span> Okay</div>
            <div><span class="choice maybe"></span> Maybe</div>
            <div><span class="choice no"></span> No</div>
        </div>
        <div id="ExportWrapper">
            <input type="text" id="URL">
            <button id="Export">Export</button>
            <div id="Loading">Loading</div>
        </div>
        <div id="InputList"></div>
        <script>
            $(function(){
                var imgurClientId = '9db53e5936cd02f';
                
                var colors = {
                    "Not entered": "#FFFFFF",
                    "Favorite": "#FE6BB4",
                    "Like": "#23FD22",
                    "Okay": "#FDFD6B",
                    "Maybe": "#DB6C00",
                    "No": "#920000"
                };
                
                var level = {
                    "Not entered": "notEntered",
                    "Favorite": "favorite",
                    "Like": "like",
                    "Okay": 'okay',
                    "Maybe": "maybe",
                    "No": "no"
                };

                var kinks = {
                    "Bodies": [
                        { fields: ['General'], kinks: ['Skinny', 'Chubby', 'Small breasts', 'Large breasts', 'Small cocks', 'Large cocks'] }
                    ],
                    "Clothing": [
                        { fields: ['Self', 'Partner'], kinks: ['Clothed sex', 'Lingerie', 'Stockings', 'Heels', 'Leather', 'Latex', 'Uniform / costume', 'Cross-dressing'] }
                    ],
                    "Groupings": [
                        { fields: ['General'], kinks: ['You and 1 male', 'You and 1 female', 'You and MtF trans', 'You and FtM trans', 'You and 1 male, 1 female', 'You and 2 males', 'You and 2 females', 'Orgy'] }
                    ],
                    "General": [
                        { fields: ['Giving', 'Receiving'], kinks: ['Romance / Affection', 'Handjob / fingering', 'Blowjob', 'Deep throat', 'Swallowing', 'Facials', 'Cunnilingus', 'Face-sitting', 'Toys', 'Edging', 'Teasing', 'JOI, SI'] }
                    ],
                    "Ass play": [
                        { fields: ['Giving', 'Receiving'], kinks: ['Anal toys', 'Anal sex, pegging', 'Rimming', 'Double penetration', 'Anal fisting'] }
                    ],
                    "Kinks, BDSM": [
                        { fields: ['Giving', 'Receiving'],  kinks: ['Gangbang', 'Domestic servitude', 'Humiliation', 'Name-calling', 'Bondage (light)', 'Bondage (heavy)', 'Encasement', 'Blackmail / Coercion', 'Non-con / rape', 'Kidnapping', 'Forced orgasm', 'Orgasm denial', 'Chastity', 'Glory hole', 'Sleep play', 'Sounding', 'Vaginal fisting', 'Impregnation', 'Pregnancy', 'Feminization', 'Furry'] },
                        { fields: ['Dom', 'Sub'],           kinks: ['Domination/Submission', 'Slavery', 'Pet play', 'Discipline', 'Begging'] },
                        { fields: ['Giving', 'Receiving'],  kinks: ['Foot Play', 'Cock/pussy worship', 'Ass worship', 'Body worship', 'Tickling', 'Sensation play', 'Electro-stimulation', 'Breath play', 'Choking', 'Gags', 'Collars', 'Leashes']},
                        { fields: ['Active', 'Passive'],    kinks: ['Cheating', 'Cuckold / Cuckqueen'] },
                        { fields: ['General'],              kinks: ['Incest', 'Interracial / Race play', 'Age play', 'Exhibitionism', 'Voyeurism', 'Power exchange', 'Cum play', 'Lactation', 'Drugs / Alcohol'] }
                    ],
                    "Pain": [
                        { fields: ['Giving', 'Receiving'], kinks: ['Light pain', 'Heavy pain', 'Nipple clamps', 'Clothes pins', 'Caning', 'Flogging', 'Beating', 'Spanking', 'Hard spanking', 'Cock/Pussy slapping', 'Cock/pussy torture', 'Hot Wax', 'Scratching', 'Biting'] }
                    ],
                    "Extreme": [
                        { fields: ['Giving', 'Receiving'], kinks: ['Cutting', 'Blood', 'Piss', 'Scat', 'Diapers', 'Bestiality', 'Vore', 'Necrophilia', 'Torture'] }
                    ]
                };
                
                var log = function(val, base) {
                    return Math.log(val) / Math.log(base);
                };
                var strToClass = function(str){
                    var className = "";
                    str = str.toLowerCase();
                    var validChars = 'abcdefghijklmnopqrstuvwxyz';
                    var newWord = false;
                    for(var i = 0; i < str.length; i++) {
                        var chr = str[i];
                        if(validChars.indexOf(chr) >= 0) {
                            if(newWord) chr = chr.toUpperCase();
                            className += chr;
                            newWord = false;
                        }
                        else {
                            newWord = true;
                        }
                    }
                    return className;
                }
                
                var inputKinks = {
                    createCategory: function(name){
                        return $('<div class="kinkCategory">').addClass('cat-' + strToClass(name)).data('category', name).append($('<h2>').text(name));
                    },
                    createGroup: function(fields){
                        var $table = $('<table class="kinkGroup">').data('fields', fields);
                        var $thead = $('<thead>').appendTo($table);
                        
                        for(var i = 0; i < fields.length; i++) {
                            $('<th>').addClass('choicesCol').text(fields[i]).appendTo($thead);
                        }
                        $('<th>').appendTo($thead);
                        return $table;
                    },
                    createChoice: function(){
                        var $container = $('<div>').addClass('choices');
                        var levels = Object.keys(level);
                        for(var i = 0; i < levels.length; i++) {
                            $('<button>')
                                    .addClass('choice')
                                    .addClass(level[levels[i]])
                                    .data('level', levels[i])
                                    .data('levelInt', i)
                                    .attr('title', levels[i])
                                    .appendTo($container)
                                    .on('click', function(){
                                        $container.find('button').removeClass('selected');
                                        $(this).addClass('selected');
                                    });
                        }
                        return $container;
                    },
                    createKink: function(fields, name){
                        var $row = $('<tr>').data('kink', name).addClass('kinkRow');
                        for(var i = 0; i < fields.length; i++) {
                            var $choices = inputKinks.createChoice();
                            $choices.data('field', fields[i]);
                            $('<td>').append($choices).appendTo($row);
                        }
                        $('<td>').text(name).appendTo($row);
                        return $row;
                    },
                    init: function(){
                        $('#InputList').empty();
                        var kinkCats = Object.keys(kinks);
                        for(var i = 0; i < kinkCats.length; i++) {
                            var catName = kinkCats[i];
                            var $category = inputKinks.createCategory(catName);
                            var groups = kinks[catName];
                            
                            for(var j = 0; j < groups.length; j++) {
                                var group = groups[j];
                                var fields = group.fields;
                                var $group = inputKinks.createGroup(fields);
                                var kinkArr = group.kinks;
                                for(var k = 0; k < kinkArr.length; k++) {
                                    $group.append(inputKinks.createKink(fields, kinkArr[k]));
                                }
                                $category.append($group);
                            }
                            
                            $('#InputList').append($category);
                        }
                        
                        $('#InputList').find('button.choice').on('click', function(){
                            location.hash = inputKinks.updateHash();
                        });
                        
                        inputKinks.parseHash();
                        
                        $('#Export').on('click', inputKinks.export);
                        $('#URL').on('click', function(){ this.select(); })
                    },
                    hashChars: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.=+*^!@",
                    maxPow: function(base, maxVal) {
                        var maxPow = 1;
                        for(var pow = 1; Math.pow(base, pow) <= maxVal; pow++){
                            maxPow = pow;
                        }
                        return maxPow;
                    },
                    prefix: function(input, len, char){
                        while(input.length < len) {
                            input = char + input;
                        }
                        return input;
                    },
                    exportData: {
                        positions: {
                            'Bodies': [[10, 80]],
                            'Clothing': [[10, 285]],
                            'Groupings': [[10, 520]],
                            'General': [[260, 100]],
                            'Ass play': [[260, 450]],
                            'Kinks, BDSM': [[510, 100], [510, 655], [760, 100], [760, 430], [760, 510]],
                            'Pain': [[1010, 100]],
                            'Extreme': [[1010, 505]]
                        }
                    },
                    drawLegend: function(context){
                        context.font = "bold 13px Arial";
                        context.fillStyle = '#000000';
                        
                        var levels = Object.keys(colors);
                        for(var i = 0; i < levels.length; i++) {
                            context.beginPath();
                            context.arc(480 + (i * 120), 20, 8, 0, 2 * Math.PI, false);
                            context.fillStyle = colors[levels[i]];
                            context.fill();
                            context.strokeStyle = 'rgba(0, 0, 0, 0.5)'
                            context.lineWidth = 1;
                            context.stroke();
                            
                            context.fillStyle = '#000000';
                            context.fillText(levels[i], 495 + (i * 120), 25);
                        }
                    },
                    export: function(){
                        var username = prompt("Please enter your name");
                        if(typeof username !== 'string') return;
                        else if (username.length ) username = '(' + username + ')';
                        
                        $('#Loading').fadeIn();
                        $('#URL').fadeOut();
                        
                        var canvas = document.createElement('canvas');
                        canvas.width = 1200;
                        canvas.height = 775;
                        //$('body').append($(canvas));
                        
                        var context = canvas.getContext('2d');
                        context.fillStyle = '#FFFFFF';
                        context.fillRect(0, 0, context.width, context.height);
                        
                        context.font = "bold 24px Arial";
                        context.fillStyle = '#000000';
                        context.fillText('Kinklist ' + username, 5, 25);
                        
                        inputKinks.drawLegend(context);
                        
                        var $groups = $('#InputList .kinkGroup');
                        $groups.each(function(){
                            var $group = $(this);
                            var $cat = $group.closest('.kinkCategory');
                            var $catGroups = $cat.find('.kinkGroup');
                            var category = $cat.data('category');
                            var fields = $group.data('fields');
                            
                            var groupIndex = $group.index() - 1;
                            var showCategory = (groupIndex <= 0);
                            
                            var titleX = inputKinks.exportData.positions[category][groupIndex][0];
                            var titleY = inputKinks.exportData.positions[category][groupIndex][1] - 45;
                            
                            context.fillStyle = '#000000';
                            if(fields.length > 1 || $catGroups.length > 1) {
                                var fieldsStr = fields.join(', ');
                                var subTitleX = titleX;
                                var subTitleY = titleY + 20;
                                context.font = "italic 12px Arial";
                                context.fillText(fieldsStr, subTitleX, subTitleY);
                            }
                            else {
                                titleY += 20;
                            }
                            
                            if(showCategory) {
                                context.font = "bold 18px Arial";
                                context.fillText(category, titleX, titleY);
                            }
                            
                            // Everything inside gets small font
                            context.font = "12px Arial";
                            var rowId = 0;
                            $group.find('.kinkRow').each(function(){
                                var $kinkRow = $(this);
                                var grpPos = inputKinks.exportData.positions[category][groupIndex];
                                var pos = [grpPos[0], grpPos[1] + (rowId * 25)];

                                var kink = $kinkRow.data('kink');
                                var $fields = $kinkRow.find('.choices');
                                $fields.each(function(){
                                    var $field = $(this);
                                    var fieldIndex = $field.closest('td').index();
                                    var level = $field.find('.selected').data('level');
                                    if(!level) level = "Not entered";

                                    context.beginPath();
                                    context.arc(pos[0] + 10 + (fieldIndex * 20), pos[1] - 4, 8, 0, 2 * Math.PI, false);
                                    context.fillStyle = colors[level];
                                    context.fill();
                                    context.stroke();

                                });
                                context.fillStyle = '#000000';
                                context.fillText(kink, pos[0] + 5 + (fields.length * 20), pos[1]);
                                rowId++;
                            });
                            
                        });
                        
                        // canvas
                        // Send to imgur
                        $.ajax({
                            url: 'https://api.imgur.com/3/image',
                            type: 'POST',
                            headers: {
                                // Your application gets an imgurClientId from Imgur
                                Authorization: 'Client-ID ' + imgurClientId,
                                Accept: 'application/json'
                            },
                            data: {
                                // convert the image data to base64
                                image:  canvas.toDataURL().split(',')[1],
                                type: 'base64'
                            },
                            success: function(result) {
                                $('#Loading').hide();
                                var url = 'https://i.imgur.com/' + result.data.id + '.png';
                                $('#URL').val(url).fadeIn();
                            }
                        });                            
                    },
                    encode: function(base, input){
                        var hashBase = inputKinks.hashChars.length;
                        var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
                        var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
                        
                        var output = "";
                        var numChunks = Math.ceil(input.length / inputPow);
                        var inputIndex = 0;
                        for(var chunkId = 0; chunkId < numChunks; chunkId++) {
                            var inputIntValue = 0;
                            for(var pow = 0; pow < inputPow; pow++) {
                                var inputVal = input[inputIndex++];
                                if(typeof inputVal === "undefined") break;
                                var val = inputVal * Math.pow(base, pow);
                                inputIntValue += val;
                            }
                            
                            var outputCharValue = "";
                            while(inputIntValue > 0) {
                                var maxPow = Math.floor(log(inputIntValue, hashBase));
                                var powVal = Math.pow(hashBase, maxPow);
                                var charInt = Math.floor(inputIntValue / powVal);
                                var subtract = charInt * powVal;
                                var char = inputKinks.hashChars[charInt];
                                outputCharValue += char;
                                inputIntValue -= subtract;
                            }
                            var chunk = inputKinks.prefix(outputCharValue, outputPow, inputKinks.hashChars[0]);
                            output += chunk;
                        }
                        return output;
                    },
                    decode: function(base, output){
                        var hashBase = inputKinks.hashChars.length;
                        var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
                        
                        var values = [];
                        var numChunks = Math.max(output.length / outputPow)
                        for(var i = 0; i < numChunks; i++){
                            var chunk = output.substring(i * outputPow, (i + 1) * outputPow);
                            var chunkValues = inputKinks.decodeChunk(base, chunk);
                            for(var j = 0; j < chunkValues.length; j++) {
                                values.push(chunkValues[j]);
                            }
                        }
                        return values;
                    },
                    decodeChunk: function(base, chunk){
                        var hashBase = inputKinks.hashChars.length;
                        var outputPow = inputKinks.maxPow(hashBase, Number.MAX_SAFE_INTEGER);
                        var inputPow = inputKinks.maxPow(base, Math.pow(hashBase, outputPow));
                        
                        var chunkInt = 0;
                        for(var i = 0; i < chunk.length; i++) {
                            var char = chunk[i];
                            var charInt = inputKinks.hashChars.indexOf(char);
                            var pow = chunk.length - 1 - i;
                            var intVal = Math.pow(hashBase, pow) * charInt;
                            chunkInt += intVal;
                        }
                        var chunkIntCopy = chunkInt;
                        
                        var output = [];
                        for(var pow = inputPow - 1; pow >= 0; pow--) {
                            var posBase = Math.floor(Math.pow(base, pow));
                            var posVal = Math.floor(chunkInt / posBase);
                            var subtract = posBase * posVal;
                            output.push(posVal);
                            chunkInt -= subtract;
                        }
                        output.reverse();
                        return output;
                    },
                    updateHash: function(){
                        var hashValues = [];
                        $('#InputList .choices').each(function(){
                            var $this = $(this);
                            var lvlInt = $this.find('.selected').data('levelInt');
                            if(!lvlInt) lvlInt = 0;
                            hashValues.push(lvlInt);
                        });
                        return inputKinks.encode(Object.keys(colors).length, hashValues);
                    },
                    parseHash: function(){
                        var hash = location.hash.substring(1);
                        if(hash.length < 10) return;
                        
                        var values = inputKinks.decode(Object.keys(colors).length, hash);
                        var valueIndex = 0;
                        $('#InputList .choices').each(function(){
                            var $this = $(this);
                            var value = values[valueIndex++];
                            $this.children().eq(value).addClass('selected');
                        });
                    }
                };
                
                inputKinks.init();
                window.inputKinks = inputKinks;
            });
        </script>
    </body>
</html>