547 lines
No EOL
17 KiB
JavaScript
547 lines
No EOL
17 KiB
JavaScript
// let autoId = 0; this variable value comes from meshgradientcard.js
|
|
let gradientCards = [{
|
|
id: ++autoId,
|
|
colors: ['#6d28d9', '#db2777'],
|
|
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
|
|
gradientName: 'daring new color monster',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#f12711', '#f5af19'],
|
|
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
|
|
gradientName: 'flare',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#4facfe', '#00f2fe'],
|
|
gradientColor: 'linear-gradient(to right, #4facfe,#00f2fe)',
|
|
gradientName: 'malibu beach',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#13547a', '#80d0c7'],
|
|
gradientColor: 'linear-gradient(to right, #13547a,#80d0c7)',
|
|
gradientName: 'aqua splash',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#50cc7f', '#f5d100'],
|
|
gradientColor: 'linear-gradient(to right, #50cc7f,#f5d100)',
|
|
gradientName: 'millennium pine',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#209cff', '#68e0cf'],
|
|
gradientColor: 'linear-gradient(to right, #209cff,#68e0cf)',
|
|
gradientName: 'sea shore',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ff5858', '#f09819'],
|
|
gradientColor: 'linear-gradient(to right, #ff5858,#f09819)',
|
|
gradientName: 'happy memories',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#29323c', '#485563'],
|
|
gradientColor: 'linear-gradient(to right, #29323c,#485563)',
|
|
gradientName: 'vicious stance',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#808080', '#3fada8'],
|
|
gradientColor: 'linear-gradient(to right, #808080,#3fada8)',
|
|
gradientName: 'vicious stance',
|
|
gradientMaker: 'allen design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#eaf6a3', '#9aeabf'],
|
|
gradientColor: 'linear-gradient(to right, #eaf6a3,#9aeabf)',
|
|
gradientName: 'light shaded',
|
|
gradientMaker: 'surya design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#f2e7f8', '#cac2ff'],
|
|
gradientColor: 'linear-gradient(to right, #f2e7f8,#cac2ff)',
|
|
gradientName: 'light shaded',
|
|
gradientMaker: 'surya design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ffffff', '#badbfb'],
|
|
gradientColor: 'linear-gradient(to right, #ffffff,#badbfb)',
|
|
gradientName: 'light shaded',
|
|
gradientMaker: 'surya design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#e0fff9', '#8be7c8'],
|
|
gradientColor: 'linear-gradient(to right, #e0fff9,#8be7c8)',
|
|
gradientName: 'light shaded',
|
|
gradientMaker: 'surya design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ffe9c9', '#ffd260'],
|
|
gradientColor: 'linear-gradient(to right, #ffe9c9,#ffd260)',
|
|
gradientName: 'light shaded',
|
|
gradientMaker: 'surya design'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ed6ea0', '#ec8c69'],
|
|
gradientColor: 'linear-gradient(to right, #ed6ea0,#ec8c69)',
|
|
gradientName: 'royal garden',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#1aa37a', '#9dffb3'],
|
|
gradientColor: 'linear-gradient(to right, #1aa37a,#9dffb3)',
|
|
gradientName: 'lush',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#12c2e9', '#c471ed', '#f64f59'],
|
|
gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
|
|
gradientName: 'jshine',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#00b09b', '#96c93d'],
|
|
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
|
|
gradientName: 'ohhappiness',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#c0392b', '#8e44ad'],
|
|
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
|
|
gradientName: 'mello',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ad8cea', '#50dfb2'],
|
|
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
|
|
gradientName: 'emeald',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#f9e7fe', '#dafcfc'],
|
|
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
|
|
gradientName: 'almost',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#6a11cb', '#fc6767'],
|
|
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
|
|
gradientName: 'galaxy',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ff1f01', '#ffc700'],
|
|
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
|
|
gradientName: 'sol',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#d0dae0', '#8a2eff'],
|
|
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
|
|
gradientName: 'mikyway',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#e3d2c4', '#fcfcfb'],
|
|
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
|
|
gradientName: 'gold dust',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#1e130c', '#9a8478'],
|
|
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
|
|
gradientName: 'coffee',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#1a2980', '#26d0ce'],
|
|
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
|
|
gradientName: 'aqua',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#4158D0', '#C850C0', 'FFCC70'],
|
|
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
|
|
gradientName: 'smesh',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#00DBDE', '#FC00FF'],
|
|
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
|
|
gradientName: 'smoothy',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#3a6186', '#89253e'],
|
|
gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)',
|
|
gradientName: 'love couple',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#FD297A', '#9424F0'],
|
|
gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)',
|
|
gradientName: 'cripy',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#FED54A', '#FF9347'],
|
|
gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)',
|
|
gradientName: 'sunset',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#70e1f5', '#ffd194'],
|
|
gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)',
|
|
gradientName: 'shore',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#00c6ff', '#0072ff'],
|
|
gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)',
|
|
gradientName: 'Facebook Messenger',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#d38312', '#a83279'],
|
|
gradientColor: 'linear-gradient(90deg, #d38312, #a83279)',
|
|
gradientName: 'Crazy Orange!',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#43cea2', '#185a9d'],
|
|
gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)',
|
|
gradientName: 'Endless river!',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ffb347', '#ffcc33'],
|
|
gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)',
|
|
gradientName: 'Crazy Orange!',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
|
|
gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)',
|
|
gradientName: 'Atlas!',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#7b4397', '#dc2430'],
|
|
gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)',
|
|
gradientName: 'virgin america',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#fc00ff', '#00dbde'],
|
|
gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)',
|
|
gradientName: 'timber',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#f46b45', '#eea849'],
|
|
gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)',
|
|
gradientName: 'master card',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#00C9FF', '#92FE9D'],
|
|
gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)',
|
|
gradientName: 'back to earth',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#fd746c', '#ff9068'],
|
|
gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)',
|
|
gradientName: 'haikus',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#3434e6', '#ec6ead'],
|
|
gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)',
|
|
gradientName: 'vice city',
|
|
gradientMaker: 'ShyamTala'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ff6e7f', '#bfe9ff'],
|
|
gradientColor: 'linear-gradient(90deg,#ff6e7f, #bfe9ff)',
|
|
gradientName: 'noon to dust',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#136fc3', '#76ef66'],
|
|
gradientColor: 'linear-gradient(90deg,#136fc3, #76ef66)',
|
|
gradientName: 'smooth combination',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#6f82e4', '#1f2ebe'],
|
|
gradientColor: 'linear-gradient(90deg,#6f82e4, #1f2ebe)',
|
|
gradientName: 'smooth combination',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#eeb77d', '#5808b6'],
|
|
gradientColor: 'linear-gradient(90deg,#eeb77d, #5808b6)',
|
|
gradientName: 'smooth combination',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#fc8b6a', '#e10467'],
|
|
gradientColor: 'linear-gradient(90deg,#fc8b6a, #e10467)',
|
|
gradientName: 'smooth combination',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ff416c', '#ff4b2b'],
|
|
gradientColor: 'linear-gradient(90deg,#ff416c, #ff4b2b)',
|
|
gradientName: 'burning orange',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#a8ff78', '#78ffd6'],
|
|
gradientColor: 'linear-gradient(90deg,#a8ff78, #78ffd6)',
|
|
gradientName: 'summer dog',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#fdc830', '#f37335'],
|
|
gradientColor: 'linear-gradient(90deg,#fdc830, #f37335)',
|
|
gradientName: 'citrus peel',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#00b4db', '#0083b0'],
|
|
gradientColor: 'linear-gradient(90deg,#00b4db, #0083b0)',
|
|
gradientName: 'blue raspberry',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ff512f', '#dd2476'],
|
|
gradientColor: 'linear-gradient(90deg,#ff512f, #dd2476)',
|
|
gradientName: 'bloody mary',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#f09819', '#edde5d'],
|
|
gradientColor: 'linear-gradient(90deg,#f09819, #edde5d)',
|
|
gradientName: 'mango pulp',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ffe259', '#ffa751'],
|
|
gradientColor: 'linear-gradient(90deg,#ffe259, #ffa751)',
|
|
gradientName: 'mango',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#5433ff', '#20bdff', '#a5fecb'],
|
|
gradientColor: 'linear-gradient(90deg,#5433ff, #20bdff,#a5fecb)',
|
|
gradientName: 'lunada',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#acb6e5', '#86fde8'],
|
|
gradientColor: 'linear-gradient(90deg,#acb6e5, #86fde8)',
|
|
gradientName: 'windy',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
{
|
|
id: ++autoId,
|
|
colors: ['#ec008c', '#fc6767'],
|
|
gradientColor: 'linear-gradient(90deg,#ec008c, #fc6767)',
|
|
gradientName: 'dimigo',
|
|
gradientMaker: 'ui.ux.gradient'
|
|
},
|
|
];
|
|
|
|
|
|
let gradientContaier1 = document.querySelector('.gradient_container');
|
|
|
|
gradientCards.forEach((element) => {
|
|
|
|
let gradientCard = document.createElement("div");
|
|
gradientCard.classList.add('gradient_card');
|
|
gradientCard.setAttribute("style", `background-image:${element.gradientColor}`);
|
|
|
|
let gradientInfo = document.createElement('div');
|
|
gradientInfo.classList.add('gradient_info');
|
|
|
|
let colors = document.createElement("div");
|
|
colors.classList.add("colors");
|
|
|
|
|
|
element.colors.forEach((color) => {
|
|
let colorInput = document.createElement('input');
|
|
colorInput.classList.add("color")
|
|
colorInput.setAttribute("type", "color");
|
|
colorInput.setAttribute("value", color)
|
|
colors.append(colorInput)
|
|
})
|
|
|
|
function generateColorCode(colors) {
|
|
console.log(colors);
|
|
let gradientCode = document.createElement("div");
|
|
gradientCode.classList.add('gradient_code');
|
|
|
|
let dummyTxtGradient = document.createElement("span");
|
|
dummyTxtGradient.classList.add("dummy_txt_gradient");
|
|
dummyTxtGradient.textContent = "linear-gradient";
|
|
|
|
let dummyTxtBracketOpen = document.createElement("span");
|
|
dummyTxtBracketOpen.classList.add("dummy_txt_bracket_open");
|
|
dummyTxtBracketOpen.textContent = "(";
|
|
|
|
let dummyTxtBracketClose = document.createElement("span");
|
|
dummyTxtBracketClose.classList.add("dummy_txt_bracket_close");
|
|
dummyTxtBracketClose.textContent = ")";
|
|
|
|
let dummyTxtGradientPos = document.createElement("span");
|
|
dummyTxtGradientPos.classList.add("dummy_txt_gradient_pos");
|
|
dummyTxtGradientPos.textContent = "to right, ";
|
|
|
|
let dummyTxtComma = document.createElement("span");
|
|
dummyTxtComma.classList.add("dummy_txt_comma");
|
|
dummyTxtComma.textContent = ",";
|
|
|
|
let dummyTxtComma2 = document.createElement("span");
|
|
dummyTxtComma2.classList.add("dummy_txt_comma");
|
|
dummyTxtComma2.textContent = ",";
|
|
|
|
function printHex(colorCode) {
|
|
let dummyTxtColor = document.createElement("span");
|
|
dummyTxtColor.classList.add("dummy_txt_color_code");
|
|
dummyTxtColor.textContent = colorCode;
|
|
|
|
gradientCode.append(dummyTxtColor)
|
|
}
|
|
|
|
gradientCode.append(dummyTxtGradient)
|
|
gradientCode.append(dummyTxtBracketOpen)
|
|
gradientCode.append(dummyTxtGradientPos)
|
|
colors.forEach((color, index) => {
|
|
if (colors.length == 2) {
|
|
if (index == colors.length - 1) {
|
|
printHex(color)
|
|
} else {
|
|
printHex(color)
|
|
gradientCode.append(dummyTxtComma)
|
|
}
|
|
} else {
|
|
if (index == colors.length - 1) {
|
|
printHex(color)
|
|
} else {
|
|
if (index == 1) {
|
|
printHex(color)
|
|
gradientCode.append(dummyTxtComma2)
|
|
} else {
|
|
printHex(color)
|
|
gradientCode.append(dummyTxtComma)
|
|
}
|
|
}
|
|
}
|
|
})
|
|
gradientCode.append(dummyTxtBracketClose);
|
|
|
|
return gradientCode;
|
|
|
|
|
|
}
|
|
|
|
let titleWithCopyBtn = document.createElement('div');
|
|
titleWithCopyBtn.classList.add("title_with_copy_btn");
|
|
|
|
let gradientTitle = document.createElement('h1');
|
|
gradientTitle.classList.add('gradient_title');
|
|
gradientTitle.textContent = element.gradientName;
|
|
gradientTitle.setAttribute("style", `background:${element.gradientColor};-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;`);
|
|
|
|
let coptToClipBoard = document.createElement('button');
|
|
coptToClipBoard.classList.add('copy_to_clipboard');
|
|
coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.gradientColor};`)
|
|
coptToClipBoard.innerHTML = `<ion-icon name="copy-outline"></ion-icon>`;
|
|
|
|
let gradientAuther = document.createElement('p');
|
|
gradientAuther.classList.add("gradient_maker");
|
|
gradientAuther.textContent = `by ${element.gradientMaker}`;
|
|
|
|
|
|
let gradientCode = generateColorCode(element.colors)
|
|
|
|
// append elements
|
|
|
|
|
|
|
|
titleWithCopyBtn.append(gradientTitle);
|
|
titleWithCopyBtn.append(coptToClipBoard);
|
|
|
|
gradientInfo.append(colors);
|
|
gradientInfo.append(gradientCode);
|
|
gradientInfo.append(titleWithCopyBtn);
|
|
gradientInfo.append(gradientAuther);
|
|
|
|
gradientCard.append(gradientInfo);
|
|
|
|
gradientContaier1.append(gradientCard);
|
|
|
|
}) |