-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
105 lines (92 loc) · 4.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Liner Gradient Color Picker (lgcolor.js)</title>
<link rel="stylesheet" href="assets/css/lgcolor.css">
</head>
<body>
<div class="lg-row">
<div class="lg-col m12 lg-center"><h1>Linear Gradient Color Picker(Examples)</h1></div>
</div>
<hr>
<div class="lg-row">
<div class="lg-col m12 field-div">
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 1</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom, #00f260 0%, #0575e6 100%)" style="background: linear-gradient(rgb(0, 242, 96) 0%, rgb(5, 117, 230) 100%);">
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 2</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom, #f25a5a 0%, #0575e6 100%)" style="background: linear-gradient(rgb(242, 90, 90) 0%, rgb(5, 117, 230) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 3</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom left, #f2bfe1 0%, #e6b755 100%)" style="background: linear-gradient(to left bottom, rgb(242, 191, 225) 0%, rgb(230, 183, 85) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 4</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to left, #f2563c 0%, #3123e6 100%)" style="background: linear-gradient(to left, rgb(242, 86, 60) 0%, rgb(49, 35, 230) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 5</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to top, #f2d5e8 0%, #0575e6 100%)" style="background: linear-gradient(to top, rgb(242, 213, 232) 0%, rgb(5, 117, 230) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 6</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to top right, #61c6f2 0%, #e68763 100%)" style="background: linear-gradient(to right top, rgb(97, 198, 242) 0%, rgb(230, 135, 99) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 7</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to right, #f2c6c6 0%, #a7e63e 100%)" style="background: linear-gradient(to right, rgb(242, 198, 198) 0%, rgb(167, 230, 62) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 8</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom right, #6e689e 0%, #ff0a93 100%)" style="background: linear-gradient(to right bottom, rgb(110, 104, 158) 0%, rgb(255, 10, 147) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 9</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom left, #00f260 0%, #ebff40 100%)" style="background: linear-gradient(to left bottom, rgb(0, 242, 96) 0%, rgb(235, 255, 64) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
<div class="lg-col m4"> </div>
<div class="lg-col m1"><label>Field 10</label></div>
<div class="lg-col m1"> : </div>
<div class="lg-col m4">
<input type="text" class="lgcolor" value="linear-gradient(to bottom left, #ffb645 0%, #ff7a2b 100%)" style="background: linear-gradient(to left bottom, rgb(255, 182, 69) 0%, rgb(255, 122, 43) 100%);"><br>
</div>
<div class="lg-col m2"> </div>
</div>
</div>
<br><br>
<div class="lg-row">
<div class="lg-col m12 lg-center"><a href="https://github.com/vkmrishad/gradient-color-picker">GitHub</a></div>
</div>
<script src="assets/js/lgcolor.js"></script>
</body>
</html>