8 new mesh gradient color added
This commit is contained in:
shyamtala003
parent
ce4327f246
commit
82e1657a29
4 changed files with 353 additions and 136 deletions
|
|
@ -1,2 +1,3 @@
|
|||
# gradient_container
|
||||
✨Explore a constantly updated library of gradients, curated by the community
|
||||
|
||||
|
|
|
|||
|
|
@ -1,208 +1,209 @@
|
|||
// let autoId = 0; this variable value comes from meshgradientcard.js
|
||||
let gradientCards = [{
|
||||
id: 1,
|
||||
id: ++autoId,
|
||||
colors: ['#6d28d9', '#db2777'],
|
||||
gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)',
|
||||
gradientName: 'daring new color monster',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: ++autoId,
|
||||
colors: ['#f12711', '#f5af19'],
|
||||
gradientColor: 'linear-gradient(to right, #f12711,#f5af19)',
|
||||
gradientName: 'flare',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
id: ++autoId,
|
||||
colors: ['#12c2e9', '#c471ed', '#f64f59'],
|
||||
gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)',
|
||||
gradientName: 'jshine',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: ++autoId,
|
||||
colors: ['#00b09b', '#96c93d'],
|
||||
gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)',
|
||||
gradientName: 'ohhappiness',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: ++autoId,
|
||||
colors: ['#c0392b', '#8e44ad'],
|
||||
gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)',
|
||||
gradientName: 'mello',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
id: ++autoId,
|
||||
colors: ['#ad8cea', '#50dfb2'],
|
||||
gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)',
|
||||
gradientName: 'emeald',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: ++autoId,
|
||||
colors: ['#f9e7fe', '#dafcfc'],
|
||||
gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)',
|
||||
gradientName: 'almost',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
id: ++autoId,
|
||||
colors: ['#6a11cb', '#fc6767'],
|
||||
gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)',
|
||||
gradientName: 'galaxy',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
id: ++autoId,
|
||||
colors: ['#ff1f01', '#ffc700'],
|
||||
gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)',
|
||||
gradientName: 'sol',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
id: ++autoId,
|
||||
colors: ['#d0dae0', '#8a2eff'],
|
||||
gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)',
|
||||
gradientName: 'mikyway',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
id: ++autoId,
|
||||
colors: ['#e3d2c4', '#fcfcfb'],
|
||||
gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)',
|
||||
gradientName: 'gold dust',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
id: ++autoId,
|
||||
colors: ['#1e130c', '#9a8478'],
|
||||
gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)',
|
||||
gradientName: 'coffee',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
id: ++autoId,
|
||||
colors: ['#1a2980', '#26d0ce'],
|
||||
gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)',
|
||||
gradientName: 'aqua',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
id: ++autoId,
|
||||
colors: ['#4158D0', '#C850C0', 'FFCC70'],
|
||||
gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)',
|
||||
gradientName: 'smesh',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
id: ++autoId,
|
||||
colors: ['#00DBDE', '#FC00FF'],
|
||||
gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)',
|
||||
gradientName: 'smoothy',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
id: ++autoId,
|
||||
colors: ['#3a6186', '#89253e'],
|
||||
gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)',
|
||||
gradientName: 'love couple',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
id: ++autoId,
|
||||
colors: ['#FD297A', '#9424F0'],
|
||||
gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)',
|
||||
gradientName: 'cripy',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
id: ++autoId,
|
||||
colors: ['#FED54A', '#FF9347'],
|
||||
gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)',
|
||||
gradientName: 'sunset',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
id: ++autoId,
|
||||
colors: ['#70e1f5', '#ffd194'],
|
||||
gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)',
|
||||
gradientName: 'shore',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
id: ++autoId,
|
||||
colors: ['#00c6ff', '#0072ff'],
|
||||
gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)',
|
||||
gradientName: 'Facebook Messenger',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
id: ++autoId,
|
||||
colors: ['#d38312', '#a83279'],
|
||||
gradientColor: 'linear-gradient(90deg, #d38312, #a83279)',
|
||||
gradientName: 'Crazy Orange!',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
id: ++autoId,
|
||||
colors: ['#43cea2', '#185a9d'],
|
||||
gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)',
|
||||
gradientName: 'Endless river!',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
id: ++autoId,
|
||||
colors: ['#ffb347', '#ffcc33'],
|
||||
gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)',
|
||||
gradientName: 'Crazy Orange!',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
colors: ['#FEAC5E', '#C779D0','#4BC0C8'],
|
||||
id: ++autoId,
|
||||
colors: ['#FEAC5E', '#C779D0', '#4BC0C8'],
|
||||
gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)',
|
||||
gradientName: 'Atlas!',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
id: ++autoId,
|
||||
colors: ['#7b4397', '#dc2430'],
|
||||
gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)',
|
||||
gradientName: 'virgin america',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
id: ++autoId,
|
||||
colors: ['#fc00ff', '#00dbde'],
|
||||
gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)',
|
||||
gradientName: 'timber',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
id: ++autoId,
|
||||
colors: ['#f46b45', '#eea849'],
|
||||
gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)',
|
||||
gradientName: 'master card',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
id: ++autoId,
|
||||
colors: ['#00C9FF', '#92FE9D'],
|
||||
gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)',
|
||||
gradientName: 'back to earth',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
id: ++autoId,
|
||||
colors: ['#fd746c', '#ff9068'],
|
||||
gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)',
|
||||
gradientName: 'haikus',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
id: ++autoId,
|
||||
colors: ['#3434e6', '#ec6ead'],
|
||||
gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)',
|
||||
gradientName: 'vice city',
|
||||
|
|
@ -211,13 +212,13 @@ let gradientCards = [{
|
|||
];
|
||||
|
||||
|
||||
let gradientContaier = document.querySelector('.gradient_container');
|
||||
let gradientContaier1 = document.querySelector('.gradient_container');
|
||||
|
||||
gradientCards.forEach((element) => {
|
||||
|
||||
let gradientCard = document.createElement("div");
|
||||
gradientCard.classList.add('gradient_card');
|
||||
gradientCard.setAttribute("style", `background:${element.gradientColor}`);
|
||||
gradientCard.setAttribute("style", `background-image:${element.gradientColor}`);
|
||||
|
||||
let gradientInfo = document.createElement('div');
|
||||
gradientInfo.classList.add('gradient_info');
|
||||
|
|
@ -263,6 +264,6 @@ gradientCards.forEach((element) => {
|
|||
|
||||
gradientCard.append(gradientInfo);
|
||||
|
||||
gradientContaier.append(gradientCard);
|
||||
gradientContaier1.append(gradientCard);
|
||||
|
||||
})
|
||||
155
constants/meshGradientCard.js
Normal file
155
constants/meshGradientCard.js
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
let autoId = 0;
|
||||
let meshGradientCards = [{
|
||||
id: ++autoId,
|
||||
colors: ['#aeffbe', '#94fff1', '#ffe48a', '#ff9ebe'],
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientColor: `radial-gradient(at 43% 0%, hsla(97,75%,68%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 1%, hsla(176,100%,79%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 14% 99%, hsla(50,100%,77%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 98%, hsla(344,100%,80%,1) 0px, transparent 50%)`,
|
||||
gradientName: 'mesh gradient',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#ac9dff', '#9384ff', '#ff93c4', '#ff80cd'],
|
||||
gradientColor: `radial-gradient(at 100% 0%, hsla(249,100%,80%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 9% 89%, hsla(247,100%,75%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(332,100%,78%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 0%, hsla(323,100%,75%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'killer mesh gradie',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'],
|
||||
gradientColor: `radial-gradient(at 100% 100%, hsla(326,100%,78%,0.73) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(182,100%,88%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 99%, hsla(186,100%,79%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 1% 0%, hsla(122,100%,86%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'smoothy mesh gradient',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#9bffe1', '#a8c5ff', '#ccedff', '#cbbcfc'],
|
||||
gradientColor: `radial-gradient(at 100% 0%, hsla(162,100%,80%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 9% 89%, hsla(219,100%,82%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(201,100%,90%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 0%, hsla(254,91%,86%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'staunch mesh gradie',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#f2ffa3', '#deffa8', '#ff99da', '#affefb'],
|
||||
gradientColor: `radial-gradient(at 0% 0%, hsla(68,97%,83%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(82,100%,82%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 99%, hsla(321,100%,80%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(177,97%,84%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'mesh gradient',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#da99fd', '#fffd90', '#9b96f9', '#ffa694'],
|
||||
gradientColor: `radial-gradient(at 0% 0%, hsla(279,96%,79%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(58,100%,78%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 9% 89%, hsla(243,89%,78%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(10,100%,79%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'sun-shine mesh gradie',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#ccbeff', '#c8f9fe', '#8d85ff', '#ffbec6'],
|
||||
gradientColor: `radial-gradient(at 0% 0%, hsla(252,100%,87%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(185,96%,89%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 9% 89%, hsla(243,100%,76%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(352,100%,87%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'beautiful mesh gradie',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#f9bcff', '#98efff', '#ffa29a', '#be99ff'],
|
||||
gradientColor: `radial-gradient(at 0% 0%, hsla(294,100%,86%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, hsla(189,100%,79%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 9% 89%, hsla(4,100%,80%,1) 0px, transparent 50%),
|
||||
radial-gradient(at 99% 98%, hsla(261,100%,80%,1) 0px, transparent 50%)`,
|
||||
backgroundColor: '#b3ff99',
|
||||
gradientName: 'radial mesh gradie',
|
||||
gradientMaker: 'ShyamTala'
|
||||
},
|
||||
|
||||
|
||||
|
||||
];
|
||||
|
||||
|
||||
let gradientContaier = document.querySelector('.gradient_container');
|
||||
|
||||
meshGradientCards.forEach((element) => {
|
||||
|
||||
let gradientCard = document.createElement("div");
|
||||
gradientCard.classList.add('gradient_card');
|
||||
gradientCard.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor}`);
|
||||
|
||||
let gradientCanvas = document.createElement('div');
|
||||
gradientCanvas.classList.add("gradient_canvas");
|
||||
gradientCanvas.setAttribute("style", `height: 75%;background:${element.backgroundColor};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)
|
||||
})
|
||||
|
||||
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.backgroundColor};background-image:${element.gradientColor};-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: rgba(0,0,0,.2);`);
|
||||
|
||||
let coptToClipBoard = document.createElement('button');
|
||||
coptToClipBoard.classList.add('copy_to_clipboard');
|
||||
coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.backgroundColor};\nbackground-image:${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}`;
|
||||
|
||||
|
||||
// append elements
|
||||
titleWithCopyBtn.append(gradientTitle);
|
||||
titleWithCopyBtn.append(coptToClipBoard);
|
||||
|
||||
gradientInfo.append(colors)
|
||||
gradientInfo.append(titleWithCopyBtn);
|
||||
gradientInfo.append(gradientAuther);
|
||||
|
||||
gradientCard.append(gradientCanvas)
|
||||
gradientCard.append(gradientInfo);
|
||||
|
||||
gradientContaier.append(gradientCard);
|
||||
|
||||
})
|
||||
264
index.html
264
index.html
|
|
@ -1,147 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="./favicons/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="./favicons/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="./favicons/favicon-16x16.png"
|
||||
/>
|
||||
|
||||
<title>🌈Monogradients🎉</title>
|
||||
|
||||
<!-- circular range slider -->
|
||||
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css">
|
||||
<link rel="stylesheet" href="./dist/jquery.lcnCircleRangeSelect.css" />
|
||||
<script defer src="./dist/jquery.lcnCircleRangeSelect.js"></script>
|
||||
|
||||
<!-- general style sheet -->
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="color_maker color_maker_close">
|
||||
<div class="gradient_card" id="gradient_card_edit">
|
||||
<button id="close">
|
||||
<ion-icon name="close"></ion-icon>
|
||||
<div class="gradient_card" id="gradient_card_edit">
|
||||
<button id="close">
|
||||
<ion-icon name="close"></ion-icon>
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
class="circle-range-select"
|
||||
id="rangeSlider"
|
||||
data-single-value
|
||||
data-auto-init
|
||||
value="34"
|
||||
onchange="generateGradient()"
|
||||
/>
|
||||
<div class="gradient_info">
|
||||
<div class="colors" id="color_inputs">
|
||||
<button id="add_input_btn" onclick="addColorInputer()">
|
||||
<ion-icon name="add-outline"></ion-icon>
|
||||
</button>
|
||||
<input type="text" class="circle-range-select" id="rangeSlider" data-single-value data-auto-init value="34"
|
||||
onchange="generateGradient()">
|
||||
<div class="gradient_info">
|
||||
<div class="colors" id="color_inputs">
|
||||
<button id="add_input_btn" onclick="addColorInputer()">
|
||||
<ion-icon name="add-outline"></ion-icon>
|
||||
</button>
|
||||
<input class="color colorinput" type="color" value="#6d28d9" id="c1" oninput="generateGradient()">
|
||||
<input class="color colorinput" type="color" value="#db2777" id="c2" oninput="generateGradient()">
|
||||
</div>
|
||||
<input
|
||||
class="color colorinput"
|
||||
type="color"
|
||||
value="#6d28d9"
|
||||
id="c1"
|
||||
oninput="generateGradient()"
|
||||
/>
|
||||
<input
|
||||
class="color colorinput"
|
||||
type="color"
|
||||
value="#db2777"
|
||||
id="c2"
|
||||
oninput="generateGradient()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="title_with_copy_btn">
|
||||
<button class="copy_to_clipboard" id="color_maker_copy_btn"
|
||||
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);">
|
||||
<ion-icon name="copy-outline" role="img" class="md hydrated" aria-label="copy outline">
|
||||
</ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title_with_copy_btn">
|
||||
<button
|
||||
class="copy_to_clipboard"
|
||||
id="color_maker_copy_btn"
|
||||
data-clipboard-text="background:linear-gradient(to right, #6d28d9, #db2777);"
|
||||
>
|
||||
<ion-icon
|
||||
name="copy-outline"
|
||||
role="img"
|
||||
class="md hydrated"
|
||||
aria-label="copy outline"
|
||||
>
|
||||
</ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- notifier -->
|
||||
<span id="notify_toast" class="hide_toast">color copied!</span>
|
||||
|
||||
<div class="container">
|
||||
<nav>
|
||||
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
||||
</nav>
|
||||
|
||||
<nav>
|
||||
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
||||
</nav>
|
||||
|
||||
<main class="hero_section">
|
||||
<h2>Beautiful hand-crafted gradients,</h2>
|
||||
<h2>curated by the community.</h2>
|
||||
|
||||
<div class="form">
|
||||
<!-- <input type="email" placeholder="Enter your email"> -->
|
||||
<a class="btn" id="make_gradient_btn">
|
||||
<ion-icon name="add-outline"></ion-icon> Make Your Own
|
||||
</a>
|
||||
<a href="https://github.com/shyamtala003/gradient_container" class="btn">
|
||||
<ion-icon name="logo-github"></ion-icon> View on Github
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<main class="hero_section">
|
||||
<h2>Beautiful hand-crafted gradients,</h2>
|
||||
<h2>curated by the community.</h2>
|
||||
|
||||
<div class="form">
|
||||
<!-- <input type="email" placeholder="Enter your email"> -->
|
||||
<a class="btn" id="make_gradient_btn">
|
||||
<ion-icon name="add-outline"></ion-icon> Make Your Own
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/shyamtala003/gradient_container"
|
||||
class="btn"
|
||||
>
|
||||
<ion-icon name="logo-github"></ion-icon> View on Github
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="gradient_container">
|
||||
|
||||
<!-- color data comes from below script -->
|
||||
<script src="./constants/gradientCard.js"></script>
|
||||
|
||||
<!-- color data comes from below script -->
|
||||
<script src="./constants/meshGradientCard.js"></script>
|
||||
<script src="./constants/gradientCard.js"></script>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p class="text">Join my newsletter to hear about new projects, content and articles that I publish.</p>
|
||||
<div class="subscription_form">
|
||||
<input type="email" placeholder="Enter your email" name="email" id="email_input">
|
||||
<button class="subscribe">
|
||||
<ion-icon name="mail-outline"></ion-icon> Subscribe
|
||||
</button>
|
||||
</div>
|
||||
<p class="text">
|
||||
Join my newsletter to hear about new projects, content and articles that
|
||||
I publish.
|
||||
</p>
|
||||
<div class="subscription_form">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
name="email"
|
||||
id="email_input"
|
||||
/>
|
||||
<button class="subscribe">
|
||||
<ion-icon name="mail-outline"></ion-icon> Subscribe
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="contributor_desc">
|
||||
<img src="./images/shyam_tala.jpg" class="profile" alt="">
|
||||
<div class="desc">
|
||||
<p class="title">Hey there, 👋</p>
|
||||
<p class="detailed d1">I’m Shyam - a full-stack developer, blogger and the creator of this web app.</p>
|
||||
<p class="detailed d2">I love all things related to front-end development and love connecting with
|
||||
individuals.</p>
|
||||
<a href="https://shyamtala.netlify.app/">Learn more about me</a>
|
||||
</div>
|
||||
<div class="contributor_desc">
|
||||
<img src="./images/shyam_tala.jpg" class="profile" alt="" />
|
||||
<div class="desc">
|
||||
<p class="title">Hey there, 👋</p>
|
||||
<p class="detailed d1">
|
||||
I’m Shyam - a full-stack developer, blogger and the creator of this
|
||||
web app.
|
||||
</p>
|
||||
<p class="detailed d2">
|
||||
I love all things related to front-end development and love
|
||||
connecting with individuals.
|
||||
</p>
|
||||
<a href="https://shyamtala.netlify.app/">Learn more about me</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social_links">
|
||||
<a href="https://twitter.com/ShyamTala9">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/shyamtala_official/">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/shyamtala003">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/shyam-tala-666828169/">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="social_links">
|
||||
<a href="https://twitter.com/ShyamTala9">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/shyamtala_official/">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
</a>
|
||||
<a href="https://github.com/shyamtala003">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/shyam-tala-666828169/">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="copyright">© <script>
|
||||
let year = new Date().getFullYear();
|
||||
document.write(year);
|
||||
</script> Monogradient. All rights reserved.</p>
|
||||
<p class="copyright">
|
||||
©
|
||||
<script>
|
||||
let year = new Date().getFullYear();
|
||||
document.write(year);
|
||||
</script>
|
||||
Monogradient. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- ion icon cdn script -->
|
||||
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
|
||||
></script>
|
||||
<script
|
||||
nomodule
|
||||
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
|
||||
></script>
|
||||
|
||||
<!-- JQuery cdn -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
||||
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
></script>
|
||||
|
||||
<!-- copy to clipboard -->
|
||||
<script src="dist/clipboard.min.js"></script>
|
||||
|
||||
<!-- main script -->
|
||||
<script src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue