BACK

1
Posted by michael_andreuzza 1 month ago
It's the material Ui that I use on Colors and Fonts Hope you enjoy it!

 /* CSS */
 
 .btn {
        position: relative;
        display: inline-block;
        margin: 5px;
        height: 100px;
        width: 100px;
        border-radius: 100%;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);


    }

    .btn:hover {
        transform: scale(1.3);
    }

    .btn:active {
        transform: scale(1.1);
    }

    .animate {
        transform: scale(1);
        opacity: 1;
    }

    .back:before {
        content: '';
        position: absolute;
        border: 2px solid white;
        transform: rotate(45deg);
        border-right: none;
        border-top: none;
        height: 10px;
        width: 10px;
        left: 45px;
        top: 48px;

    }

    .close:before {
        content: '';
        position: absolute;
        left: 16px;
        top: 16px;
    }

    .picker {

        animation: picker 0.3s forwards;
    }

    .picker:before {
        content: '';
        position: absolute;
        border: 3px solid white;
        height: 60px;
        width: 60px;
        border-radius: 100%;
        left: 20px;
        top: 21px;
    }
    <!---HTML---> 
    
            <div class="container cards-container-picker">
                <div class="columns ">
                    <div class="column has-text-centered balls">
                        <div class="content">
                            <div class="toolbar " style="-webkit-app-region: drag"></div>
                            <div class="colors "></div>
                            <div class="picker-colors"></div>
                        </div>
                    </div>
                </div>


            </div>
    // JS
    var material = {
    "colors": [{
            "color": "red",
            "palette": [
                        "#FFEBEE",
                        "#FFCDD2",
                        "#EF9A9A",
                        "#E57373",
                        "#EF5350",
                        "#F44336",
                        "#E53935",
                        "#D32F2F",
                        "#C62828",
                        "#B71C1C",
                        "#FF8A80",
                        "#FF5252",
                        "#FF1744",
                        "#D50000",
                        "#000000"
                    ]
                },
        {
            "color": "pink",
            "palette": [
                        "#FCE4EC",
                        "#F8BBD0",
                        "#F48FB1",
                        "#F06292",
                        "#EC407A",
                        "#E91E63",
                        "#D81B60",
                        "#C2185B",
                        "#AD1457",
                        "#880E4F",
                        "#FF80AB",
                        "#FF4081",
                        "#F50057",
                        "#C51162",
                        "#000000"
                    ]
                },
        {
            "color": "purple",
            "palette": [
                        "#F3E5F5",
                        "#E1BEE7",
                        "#CE93D8",
                        "#BA68C8",
                        "#AB47BC",
                        "#9C27B0",
                        "#8E24AA",
                        "#7B1FA2",
                        "#6A1B9A",
                        "#4A148C",
                        "#EA80FC",
                        "#E040FB",
                        "#D500F9",
                        "#AA00FF",
                        "#000000"
                    ]
                },
        {
            "color": "deeppurple",
            "palette": [
                        "#EDE7F6",
                        "#D1C4E9",
                        "#B39DDB",
                        "#9575CD",
                        "#7E57C2",
                        "#673AB7",
                        "#5E35B1",
                        "#512DA8",
                        "#4527A0",
                        "#311B92",
                        "#B388FF",
                        "#7C4DFF",
                        "#651FFF",
                        "#6200EA",
                        "#000000"
                    ]
                },
        {
            "color": "indigo",
            "palette": [
                        "#E8EAF6",
                        "#C5CAE9",
                        "#9FA8DA",
                        "#7986CB",
                        "#5C6BC0",
                        "#3F51B5",
                        "#3949AB",
                        "#303F9F",
                        "#283593",
                        "#1A237E",
                        "#8C9EFF",
                        "#536DFE",
                        "#3D5AFE",
                        "#304FFE",
                        "#000000"
                    ]
                },
        {
            "color": "blue",
            "palette": [
                        "#E3F2FD",
                        "#BBDEFB",
                        "#90CAF9",
                        "#64B5F6",
                        "#42A5F5",
                        "#2196F3",
                        "#1E88E5",
                        "#1976D2",
                        "#1565C0",
                        "#0D47A1",
                        "#82B1FF",
                        "#448AFF",
                        "#2979FF",
                        "#2962FF",
                        "#000000"
                    ]
                },
        {
            "color": "lightblue",
            "palette": [
                        "#E1F5FE",
                        "#B3E5FC",
                        "#81D4FA",
                        "#4FC3F7",
                        "#29B6F6",
                        "#03A9F4",
                        "#039BE5",
                        "#0288D1",
                        "#0277BD",
                        "#01579B",
                        "#80D8FF",
                        "#40C4FF",
                        "#00B0FF",
                        "#0091EA",
                        "#000000"
                    ]
                },
        {
            "color": "cyan",
            "palette": [
                        "#E0F7FA",
                        "#B2EBF2",
                        "#80DEEA",
                        "#4DD0E1",
                        "#26C6DA",
                        "#00BCD4",
                        "#00ACC1",
                        "#0097A7",
                        "#00838F",
                        "#006064",
                        "#84FFFF",
                        "#18FFFF",
                        "#00E5FF",
                        "#00B8D4",
                        "#000000"
                    ]
                },
        {
            "color": "teal",
            "palette": [
                        "#E0F2F1",
                        "#B2DFDB",
                        "#80CBC4",
                        "#4DB6AC",
                        "#26A69A",
                        "#009688",
                        "#00897B",
                        "#00796B",
                        "#00695C",
                        "#004D40",
                        "#A7FFEB",
                        "#64FFDA",
                        "#1DE9B6",
                        "#00BFA5",
                        "#000000"
                    ]
                },
        {
            "color": "green",
            "palette": [
                        "#E8F5E9",
                        "#C8E6C9",
                        "#A5D6A7",
                        "#81C784",
                        "#66BB6A",
                        "#4CAF50",
                        "#43A047",
                        "#388E3C",
                        "#2E7D32",
                        "#1B5E20",
                        "#B9F6CA",
                        "#69F0AE",
                        "#00E676",
                        "#00C853",
                        "#000000"
                    ]
                },
        {
            "color": "lightgreen",
            "palette": [
                        "#F1F8E9",
                        "#DCEDC8",
                        "#C5E1A5",
                        "#AED581",
                        "#9CCC65",
                        "#8BC34A",
                        "#7CB342",
                        "#689F38",
                        "#558B2F",
                        "#33691E",
                        "#CCFF90",
                        "#B2FF59",
                        "#76FF03",
                        "#64DD17",
                        "#000000"
                    ]
                },
        {
            "color": "lime",
            "palette": [
                        "#F9FBE7",
                        "#F0F4C3",
                        "#E6EE9C",
                        "#DCE775",
                        "#D4E157",
                        "#CDDC39",
                        "#C0CA33",
                        "#AFB42B",
                        "#9E9D24",
                        "#827717",
                        "#F4FF81",
                        "#EEFF41",
                        "#C6FF00",
                        "#AEEA00",
                        "#000000"
                    ]
                },
        {
            "color": "yellow",
            "palette": [
                        "#FFFDE7",
                        "#FFF9C4",
                        "#FFF59D",
                        "#FFF176",
                        "#FFEE58",
                        "#FFEB3B",
                        "#FDD835",
                        "#FBC02D",
                        "#F9A825",
                        "#F57F17",
                        "#FFFF8D",
                        "#FFFF00",
                        "#FFEA00",
                        "#FFD600",
                        "#000000"
                    ]
                },
        {
            "color": "amber",
            "palette": [
                        "#FFF8E1",
                        "#FFECB3",
                        "#FFE082",
                        "#FFD54F",
                        "#FFCA28",
                        "#FFC107",
                        "#FFB300",
                        "#FFA000",
                        "#FF8F00",
                        "#FF6F00",
                        "#FFE57F",
                        "#FFD740",
                        "#FFC400",
                        "#FFAB00",
                        "#000000"
                    ]
                },
        {
            "color": "orange",
            "palette": [
                        "#FFF3E0",
                        "#FFE0B2",
                        "#FFCC80",
                        "#FFB74D",
                        "#FFA726",
                        "#FF9800",
                        "#FB8C00",
                        "#F57C00",
                        "#EF6C00",
                        "#E65100",
                        "#FFD180",
                        "#FFAB40",
                        "#FF9100",
                        "#FF6D00",
                        "#000000"
                    ]
                },
        {
            "color": "deeporange",
            "palette": [
                        "#FBE9E7",
                        "#FFCCBC",
                        "#FFAB91",
                        "#FF8A65",
                        "#FF7043",
                        "#FF5722",
                        "#F4511E",
                        "#E64A19",
                        "#D84315",
                        "#BF360C",
                        "#FF9E80",
                        "#FF6E40",
                        "#FF3D00",
                        "#DD2C00",
                        "#000000"
                    ]
                },
        {
            "color": "brown",
            "palette": [
                        "#EFEBE9",
                        "#D7CCC8",
                        "#BCAAA4",
                        "#A1887F",
                        "#8D6E63",
                        "#795548",
                        "#6D4C41",
                        "#5D4037",
                        "#4E342E",
                        "#3E2723",
                        "#000000"
                    ]
                },
        {
            "color": "grey",
            "palette": [
                        "#FAFAFA",
                        "#F5F5F5",
                        "#EEEEEE",
                        "#E0E0E0",
                        "#BDBDBD",
                        "#9E9E9E",
                        "#757575",
                        "#616161",
                        "#424242",
                        "#212121",
                        "#000000"
                    ]
                },
        {
            "color": "bluegrey",
            "palette": [
                        "#ECEFF1",
                        "#CFD8DC",
                        "#B0BEC5",
                        "#90A4AE",
                        "#78909C",
                        "#607D8B",
                        "#546E7A",
                        "#455A64",
                        "#37474F",
                        "#263238",
                        "#000000"
                    ]
                },
        {
            "color": "black",
            "palette": [
                        "#000000"
                    ]
                }
            ]
};

var hexToRgb = function (hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? 'rgb(' + parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) + ')' : null;
}

var copyToClipboard = function (el) {
    var temp = $('<input>');
    var color = el.data('color');
    var setColor;
    var key = window.event;
    if (key.shiftKey) {
        setColor = hexToRgb(color);
    } else if (key.ctrlKey) {
        setColor = color;
    } else {
        setColor = color.replace('#', '');
    }
    $('body').append(temp);
    temp.val(setColor).select();
    document.execCommand("copy");
    temp.remove();
}

var colors = $('.colors');
var pickerColors = $('.picker-colors');

var fillColors = function () {
    var color;
    pickerColors.empty();
    $.each(material.colors, function (i, item) {
        colors.append($('<div class="btn color"></div>'));
        color = $('.btn');
        color.eq(i).css('background', item.palette[i == 19 ? 0 : 5]);
        setTimeout(function () {
            color.eq(i).addClass('animate');
        }, i * 10);
    });
    color.click(function () {
        var index = color.index(this);
        fillPickerColors(index);
    });
    color.last().remove();
    // color.last().addClass('close').click(function(){
    // 	window.close();
    // });
}

var fillPickerColors = function (ref) {
    var pickerColor;
    colors.empty();
    $.each(material.colors[ref].palette, function (i, color) {
        pickerColors.append($('<div class="btn picker-color"></div>'));
        pickerColor = $('.btn');
        pickerColor.eq(i).css('background', color).data('color', color);
        setTimeout(function () {
            pickerColor.eq(i).addClass('animate');
        }, i * 10);
    });
    pickerColor.click(function () {
        pickerColor.removeClass('picker');
        $(this).addClass('picker');
        copyToClipboard($(this));
    });
    pickerColor.last().addClass('back').click(function () {
        fillColors();
    });
}

fillColors(); // init