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,
|
||||
colors: ['#5433ff', '#20bdff','#a5fecb'],
|
||||
colors: ['#5433ff', '#20bdff', '#a5fecb'],
|
||||
gradientColor: 'linear-gradient(90deg,#5433ff, #20bdff,#a5fecb)',
|
||||
gradientName: 'lunada',
|
||||
gradientMaker: 'ui.ux.gradient'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#acb6e5','#86fde8'],
|
||||
colors: ['#acb6e5', '#86fde8'],
|
||||
gradientColor: 'linear-gradient(90deg,#acb6e5, #86fde8)',
|
||||
gradientName: 'windy',
|
||||
gradientMaker: 'ui.ux.gradient'
|
||||
},
|
||||
{
|
||||
id: ++autoId,
|
||||
colors: ['#ec008c','#fc6767'],
|
||||
colors: ['#ec008c', '#fc6767'],
|
||||
gradientColor: 'linear-gradient(90deg,#ec008c, #fc6767)',
|
||||
gradientName: 'dimigo',
|
||||
gradientMaker: 'ui.ux.gradient'
|
||||
|
@ -438,6 +438,75 @@ gradientCards.forEach((element) => {
|
|||
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");
|
||||
|
||||
|
@ -457,11 +526,17 @@ gradientCards.forEach((element) => {
|
|||
gradientAuther.textContent = `by ${element.gradientMaker}`;
|
||||
|
||||
|
||||
let gradientCode = generateColorCode(element.colors)
|
||||
|
||||
// append elements
|
||||
|
||||
|
||||
|
||||
titleWithCopyBtn.append(gradientTitle);
|
||||
titleWithCopyBtn.append(coptToClipBoard);
|
||||
|
||||
gradientInfo.append(colors)
|
||||
gradientInfo.append(colors);
|
||||
gradientInfo.append(gradientCode);
|
||||
gradientInfo.append(titleWithCopyBtn);
|
||||
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=Fira+Code&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
|
@ -345,7 +345,7 @@ main.hero_section {
|
|||
position: relative;
|
||||
background: transparent;
|
||||
min-width: 260px;
|
||||
min-height: 300px;
|
||||
min-height: 355px;
|
||||
border:1px solid rgba(0, 0, 0, 0.4) ;
|
||||
box-shadow: 0px 10px 40px #2d2b2b;
|
||||
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));
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: linear-gradient(to top,rgba(0,0,0,.4),rgba(0,0,0,.4));
|
||||
-webkit-backdrop-filter: blur(25px);
|
||||
|
|
|
@ -325,7 +325,7 @@ main.hero_section {
|
|||
.gradient_card {
|
||||
position: relative;
|
||||
min-width: 260px;
|
||||
min-height: 300px;
|
||||
min-height: 355px;
|
||||
box-shadow: 0px 10px 40px #cec7c7;
|
||||
border-radius: 5px;
|
||||
/* overflow: hidden; */
|
||||
|
@ -386,6 +386,38 @@ input[type="color"]::-moz-color-swatch {
|
|||
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 {
|
||||
background: #fff;
|
||||
padding-inline: 15px;
|
||||
|
|
|
@ -55,7 +55,9 @@
|
|||
<div class="container">
|
||||
<nav>
|
||||
<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>
|
||||
|
||||
<main class="hero_section">
|
||||
|
|
Loading…
Reference in a new issue