Skip to content

Commit ff1cc91

Browse files
BachittarjeetBachittarjeet
authored
Merge pull request #172 from yasir2002/main
2 parents d4c91e4 + 0c351f6 commit ff1cc91

File tree

4 files changed

+256
-0
lines changed

4 files changed

+256
-0
lines changed

‎Gradient Generator/css/style.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
3+
4+
body {
5+
transition: background 1s ease-in-out;
6+
margin: 1px !important;
7+
background-color: #333333 !important;
8+
}
9+
.centerContent {
10+
position: absolute;
11+
top: 50%;
12+
left: 50%;
13+
transform: translate(-50%, -50%);
14+
text-align: center;
15+
background-color: #00000081;
16+
padding: 30px;
17+
border-radius: 20px;
18+
color: white;
19+
width: 60%;
20+
transition: .8s all;
21+
cursor: pointer;
22+
}
23+
.centerContent:hover{
24+
box-shadow: 0px 0px 20px 0px #333333;
25+
26+
}
27+
.colorPicker{
28+
width: 50px !important;
29+
height: 50px;
30+
margin: 10px 10px;
31+
}
32+
33+
34+
.centerContent h1{
35+
font-size: 50px;
36+
font-family: 'Righteous', cursive;
37+
}
38+
.btn:active,
39+
.btn:focus {
40+
box-shadow: none;
41+
outline: none;
42+
}
43+
.copy-link {
44+
--height: 36px;
45+
46+
display: flex;
47+
margin-top: 20px;
48+
49+
}
50+
51+
.copy-link-input {
52+
flex-grow: 1;
53+
padding: 0 18px;
54+
font-size: 14px;
55+
border: 1px solid #cccccc;
56+
border-right: none;
57+
outline: none;
58+
border-top-left-radius: 50rem ;
59+
border-bottom-left-radius: 50rem ;
60+
background-color: rgba(255, 255, 255, 0);
61+
color: white;
62+
transition: .5s all;
63+
}
64+
65+
.copy-link-input:hover {
66+
background: #eeeeee;
67+
color: #333333;
68+
}
69+
70+
.copy-link-button {
71+
flex-shrink: 0;
72+
width: var(--height);
73+
height: var(--height);
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
background: #dddddd;
78+
color: #333333;
79+
outline: none;
80+
border: 1px solid #cccccc;
81+
cursor: pointer;
82+
border-top-right-radius: 50rem ;
83+
border-bottom-right-radius: 50rem ;
84+
}
85+
86+
.copy-link-button:hover {
87+
background: #cccccc;
88+
}
89+
.credits{
90+
position: absolute;
91+
bottom: 0;
92+
right: 45%;
93+
font-family: 'Bad Script', cursive;
94+
}
95+
.credits {
96+
animation: move 10s linear infinite;
97+
98+
}
99+
100+
101+
@keyframes move {
102+
0% { transform: translateX(0); }
103+
50% { transform: translateX(50%); }
104+
100% { transform: translateX(0); }
105+
}
106+
.heartEmoji{
107+
color: red;
108+
font-size: 20px;
109+
}
110+
.manuallGen{
111+
margin-top: 20px;
112+
}
113+
114+
115+
@media screen and (max-width:768px) {
116+
.centerContent h1{
117+
font-size: 30px;
118+
}
119+
.centerContent{
120+
padding: 30px 10px;
121+
}
122+
.copy-link{
123+
--height: 30px !important;
124+
}
125+
.copy-link-input{
126+
font-size: 11px !important;
127+
}
128+
.credits{
129+
right: 37% !important;
130+
}
131+
.btn{
132+
font-size: 10px !important;
133+
padding: 5px 10px !important;
134+
}
135+
.centerContent p{
136+
display: none;
137+
}
138+
.colorPicker{
139+
height: 30px;
140+
width: 20px;
141+
}
142+
143+
144+
}

‎Gradient Generator/img/Untitled design (3).png‎

89 KB
Loading

‎Gradient Generator/img/logo.png‎

16.9 KB
Loading

‎Gradient Generator/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
8+
<link rel="stylesheet" href="css/style.css">
9+
<script src="js/script.js"></script>
10+
<title>Gradient Generator</title>
11+
12+
<!-- Bootstrap fontawesome icons -->
13+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
15+
<script src="https://kit.fontawesome.com/9525e0b59f.js" crossorigin="anonymous"></script>
16+
</head>
17+
<body id="body">
18+
<div class="centerContent">
19+
<h1>Random Gradient Generator</h1>
20+
<p class="text-secondary mb-1">By clicking above button a random gradient will be generated for you</p>
21+
<button class="btn btn-danger rounded-pill px-5 mt-2" onClick="genRandomHex()">AUTO GENERATE</button>
22+
23+
<div class="copy-link">
24+
<input type="text" class="copy-link-input" readonly />
25+
<button type="button" class="copy-link-button">
26+
<span class="fa fa-clipboard"></span>
27+
</button>
28+
</div>
29+
30+
<div class="manuallGen">
31+
<p class="text-secondary mb-1">Generate gradient by giving two color values</p>
32+
<input class="colorPicker" value="#18d26d" type="color" id="color1" name="color1">
33+
<input class="colorPicker" value="#22a7f2" type="color" id="color2" name="color2"><br>
34+
<button class="btn btn-primary rounded-pill px-5 mt-2" onClick="genCustomHex()">Manually Generate</button>
35+
</div>
36+
37+
38+
</div>
39+
<p class='credits'>Made By <b>Yasir Nawaz</b> with <span class='fa fa-heart heartEmoji'></span></p>
40+
41+
<script>
42+
const hexNum = [
43+
'1',
44+
'2',
45+
'3',
46+
'4',
47+
'5',
48+
'6',
49+
'7',
50+
'8',
51+
'9',
52+
'a',
53+
'b',
54+
'c',
55+
'd',
56+
'e',
57+
'f'
58+
];
59+
60+
function genRandomHex() {
61+
let hex1 = '';
62+
let hex2 = '';
63+
64+
for (let i = 0; i < 6; i++) {
65+
hex1 += hexNum[Math.floor(Math.random() * hexNum.length)];
66+
hex2 += hexNum[Math.floor(Math.random() * hexNum.length)];
67+
}
68+
69+
const gradient = `linear-gradient(45deg, #${hex1}, #${hex2})`;
70+
71+
document.getElementById('body').style.background = gradient;
72+
document.getElementById('body').classList.add('bg-transition');
73+
document.querySelector(".copy-link-input").value = `background: ${gradient}`;
74+
}
75+
76+
77+
document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
78+
const inputField = copyLinkParent.querySelector(".copy-link-input");
79+
const copyButton = copyLinkParent.querySelector(".copy-link-button");
80+
const text = inputField.value;
81+
82+
inputField.addEventListener("focus", () => inputField.select());
83+
84+
copyButton.addEventListener("click", () => {
85+
inputField.select();
86+
navigator.clipboard.writeText(inputField.value);
87+
inputField.value = "Copied!";
88+
setTimeout(() => {
89+
inputField.value = `background: ${gradient}`;
90+
}, 2000);
91+
});
92+
93+
94+
95+
});
96+
97+
98+
function genCustomHex() {
99+
const hex1 = document.getElementById('color1').value.substring(1);
100+
const hex2 = document.getElementById('color2').value.substring(1);
101+
102+
const gradient = `linear-gradient(45deg, #${hex1}, #${hex2})`;
103+
104+
document.getElementById('body').style.background = gradient;
105+
document.getElementById('body').classList.add('bg-transition');
106+
document.querySelector(".copy-link-input").value = `background: ${gradient}`;
107+
}
108+
109+
</script>
110+
111+
</body>
112+
</html>

0 commit comments

Comments
 (0)