uncvd/index.html at master · AiSofer/uncvd · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>uncvd</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
        <style>
            body {
                background-color: linen;
            }
            header {
                font-family: Architects Daughter, Helvetica;
                text-align: center;
                margin: auto;
            }
            header span {
                font-family: Helvetica;
            }
            #inputDiv {
                margin: auto;
            }
            #myInput {
                margin: auto;
                padding: auto;
                width: 100%;
                min-height: 210px;
            }
            #lc {
                margin: auto;
                margin-top: 30px;
                width: 100%;
                float: left;
            }
            .fullColor {
                height: 40px;
                width: 20%;
                min-width: 165px;
                float: left;
            }
            .code {
                font-weight: bold;
                width: 15%;
                height: 30px;
                float: left;
                padding: 5px;
            }
            .color {
                width: 50%;
                height: 30px;
                float: right;
                margin: 5px;
            }
        </style>
    </head>
    <body style="margin: 0px; margin: auto; padding: 0px">
        <a href="https://github.com/lukequaint/uncvd.git"><img style="position: absolute; top:
            0; right: 0; border: 0;"
            src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
            alt="Fork me on GitHub"
            data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

        <header>
            <h1>uncvd</h1>
            <h3>Paste or write below text with colors in hex </h3>
            <h4><span>e.g. "#132312, #fbdacd#deadbeef"</span></h4>
        </header>
        <div style="width: 56%; margin: auto">
            <div id="inputDiv">
                <textarea id="myInput" oninput="print_col()"></textarea>
            </div>
            <div id="lc" style="">
            </div>
            <script>
                var printed = [];
                function isPrinted(b) {
                    return printed.some(function(a){return a === b;});
                }
                var hexbase = "0123456789abcdef";
                function toHex(decNumber) {
                    return (Math.floor(decNumber / 16)).toString(16) + (decNumber % 16).toString(16);
                }
                function toDec(hexNumber) {
                    return parseInt(hexNumber, 16);
                }
                function toRGBA(hexColor) {
                    var rgbaColor = "rgba(";
                    for (var i = 1; i < hexColor.length; i += 2) {
                        rgbaColor += toDec(hexColor.substr(i, 2)) + ", ";
                    }
                    rgbaColor += " 1)";
                    return rgbaColor;
                }
                function inverseColor(color) {
                    var invStr = "#";
                    for (var i = 1; i < color.length; i += 2) {
                        var invN = 255 - toDec(color.substr(i, 2));
                        invStr = invStr + toHex(invN);
                    }
                    return invStr;
                }
                function print_col() {
                    var text = document.getElementById("myInput").value;
                    var colorRegEx = /#([0-9]|[a-fA-F]){6}/g;
                    var rgbRegEx = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/g;
                    var matches = [];
                    var f;
                    var newDiv = function(divClass, content) {
                        return '<div class="' + divClass + '">'+ content + '</div>';
                    };
                    while (f = colorRegEx.exec(text)) {
                        matches.push(f[0]);
                    }
                    while (f = rgbRegEx.exec(text)) {
                        matches.push(f[0]);
                    }
                    for (var i = 0; i < matches.length; ++i) {
                        var newColor = matches[i].toLowerCase();
                        if (!isPrinted(newColor)) {
                            var colorNumber = (printed.length).toString();
                            var fullColorClassName = "fullColor";
                            var className = "color" + colorNumber;
                            $("#lc").append(newDiv(fullColorClassName + " " + className, ""));
                            var newDivName = "div." + className;
                            var invCol = inverseColor(newColor);
                            $(newDivName).append(newDiv("code", newColor));
                            $(newDivName).append('<div class="color">&nbsp;</div>');
                            var colorDiv = newDivName + " div.color";
                            $(colorDiv).css("background-color", newColor);
                            $(colorDiv).css("box-shadow", "0px 0px 1px " + invCol);
                            $(colorDiv).css("border-radius", "6px");
                            printed.push(newColor);
                        }
                    }
                };
            </script>
        </div>
    </body>

</html>