gradient code section added in color cards
This commit is contained in:
parent
36310b9013
commit
ab6f0e8119
4 changed files with 148 additions and 8 deletions
|
@ -393,21 +393,21 @@ let gradientCards = [{
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: ++autoId,
|
id: ++autoId,
|
||||||
colors: ['#5433ff', '#20bdff','#a5fecb'],
|
colors: ['#5433ff', '#20bdff', '#a5fecb'],
|
||||||
gradientColor: 'linear-gradient(90deg,#5433ff, #20bdff,#a5fecb)',
|
gradientColor: 'linear-gradient(90deg,#5433ff, #20bdff,#a5fecb)',
|
||||||
gradientName: 'lunada',
|
gradientName: 'lunada',
|
||||||
gradientMaker: 'ui.ux.gradient'
|
gradientMaker: 'ui.ux.gradient'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: ++autoId,
|
id: ++autoId,
|
||||||
colors: ['#acb6e5','#86fde8'],
|
colors: ['#acb6e5', '#86fde8'],
|
||||||
gradientColor: 'linear-gradient(90deg,#acb6e5, #86fde8)',
|
gradientColor: 'linear-gradient(90deg,#acb6e5, #86fde8)',
|
||||||
gradientName: 'windy',
|
gradientName: 'windy',
|
||||||
gradientMaker: 'ui.ux.gradient'
|
gradientMaker: 'ui.ux.gradient'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: ++autoId,
|
id: ++autoId,
|
||||||
colors: ['#ec008c','#fc6767'],
|
colors: ['#ec008c', '#fc6767'],
|
||||||
gradientColor: 'linear-gradient(90deg,#ec008c, #fc6767)',
|
gradientColor: 'linear-gradient(90deg,#ec008c, #fc6767)',
|
||||||
gradientName: 'dimigo',
|
gradientName: 'dimigo',
|
||||||
gradientMaker: 'ui.ux.gradient'
|
gradientMaker: 'ui.ux.gradient'
|
||||||
|
@ -438,6 +438,75 @@ gradientCards.forEach((element) => {
|
||||||
colors.append(colorInput)
|
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');
|
let titleWithCopyBtn = document.createElement('div');
|
||||||
titleWithCopyBtn.classList.add("title_with_copy_btn");
|
titleWithCopyBtn.classList.add("title_with_copy_btn");
|
||||||
|
|
||||||
|
@ -457,11 +526,17 @@ gradientCards.forEach((element) => {
|
||||||
gradientAuther.textContent = `by ${element.gradientMaker}`;
|
gradientAuther.textContent = `by ${element.gradientMaker}`;
|
||||||
|
|
||||||
|
|
||||||
|
let gradientCode = generateColorCode(element.colors)
|
||||||
|
|
||||||
// append elements
|
// append elements
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
titleWithCopyBtn.append(gradientTitle);
|
titleWithCopyBtn.append(gradientTitle);
|
||||||
titleWithCopyBtn.append(coptToClipBoard);
|
titleWithCopyBtn.append(coptToClipBoard);
|
||||||
|
|
||||||
gradientInfo.append(colors)
|
gradientInfo.append(colors);
|
||||||
|
gradientInfo.append(gradientCode);
|
||||||
gradientInfo.append(titleWithCopyBtn);
|
gradientInfo.append(titleWithCopyBtn);
|
||||||
gradientInfo.append(gradientAuther);
|
gradientInfo.append(gradientAuther);
|
||||||
|
|
||||||
|
|
35
css/dark.css
35
css/dark.css
|
@ -1,5 +1,5 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,700;1,700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,700;1,700&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -345,7 +345,7 @@ main.hero_section {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
min-height: 300px;
|
min-height: 355px;
|
||||||
border:1px solid rgba(0, 0, 0, 0.4) ;
|
border:1px solid rgba(0, 0, 0, 0.4) ;
|
||||||
box-shadow: 0px 10px 40px #2d2b2b;
|
box-shadow: 0px 10px 40px #2d2b2b;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -394,6 +394,37 @@ main.hero_section {
|
||||||
background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
|
background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gradient_code
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #7dd3fc;
|
||||||
|
background: linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.6));
|
||||||
|
padding:10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_gradient
|
||||||
|
{
|
||||||
|
color:#f472b6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
|
||||||
|
{
|
||||||
|
color:#64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_gradient_pos
|
||||||
|
{
|
||||||
|
color: #7dd3fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_color_code
|
||||||
|
{
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
.colors {
|
.colors {
|
||||||
background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
|
background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
|
||||||
-webkit-backdrop-filter: blur(25px);
|
-webkit-backdrop-filter: blur(25px);
|
||||||
|
|
|
@ -325,7 +325,7 @@ main.hero_section {
|
||||||
.gradient_card {
|
.gradient_card {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 260px;
|
min-width: 260px;
|
||||||
min-height: 300px;
|
min-height: 355px;
|
||||||
box-shadow: 0px 10px 40px #cec7c7;
|
box-shadow: 0px 10px 40px #cec7c7;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
/* overflow: hidden; */
|
/* overflow: hidden; */
|
||||||
|
@ -386,6 +386,38 @@ input[type="color"]::-moz-color-swatch {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gradient_code
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #7dd3fc;
|
||||||
|
background: linear-gradient(to top,rgba(255,255,255,.8),rgba(255,255,255,.8));
|
||||||
|
padding:10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_gradient
|
||||||
|
{
|
||||||
|
color:#0069c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_comma,.dummy_txt_bracket_open,.dummy_txt_bracket_close
|
||||||
|
{
|
||||||
|
color:#858585;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_gradient_pos
|
||||||
|
{
|
||||||
|
color: #d35538;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dummy_txt_color_code
|
||||||
|
{
|
||||||
|
color: #1b1b1b;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.title_with_copy_btn {
|
.title_with_copy_btn {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-inline: 15px;
|
padding-inline: 15px;
|
||||||
|
|
|
@ -55,7 +55,9 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<nav>
|
<nav>
|
||||||
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
<h1 class="logo_text">🌈Monogradients🎉</h1>
|
||||||
<button id="theme_toggler"><ion-icon name="sunny"></ion-icon></button>
|
<button id="theme_toggler">
|
||||||
|
<ion-icon name="sunny"></ion-icon>
|
||||||
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="hero_section">
|
<main class="hero_section">
|
||||||
|
|
Loading…
Reference in a new issue