-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (138 loc) · 6.59 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<title>rrColor</title>
<meta name="description" content="web color picker">
<meta name="author" content="RR-inc">
<link href="./examples/imm/ico.png" rel="icon" type="image/png" />
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Security-Policy" content=" default-src https: data: 'unsafe-eval' 'unsafe-inline'; object-src 'none';">
<style>
body{
background:rgb(0,10,30);
color:rgb(225,225,255);
}
.sep{
margin-top: 5px;
color: rgb(105,105,105);
border-color: rgba(105,105,105,0.5);
background-color: rgba(105,105,105,0.15);
width: 95%;
min-height:2px;
clear: both;
position:relative;
float:left;
}
a{
position:relative;
float:left;
border:3px groove;
background-color: rgba(225,245,255,0.05);
border-radius: 5px;
height:35px;
width:auto;
min-width: 230px;
text-decoration: none;
color: inherit;
text-align: -webkit-center;
line-height: 30px;
padding: 1px 37px;
margin:5px 15px;
clear: both;
padding-left:3px;
}
img{
position:absolute;
right:2px;
height:32px;
top:1px;
}
.note{
position: relative;
float: left;
margin: 10px 25px;
font-size: 12px;
font-family: monospace;
}
#gitlink{
position: fixed;
width: 132px;
height: 35px;
border:0px solid;
min-height: 30px;
right: 10px;
top: 10px;
overflow: hidden;
padding: 0px;
margin:0px;
}
#gitlinka{
position:absolute;
float:left;
border:1px solid;
width: 130px;
height: 32px;
/*background-color: rgba(225,245,255,0.05);
height:100%;
width:100%;*/
border-radius: 5px;
min-width: 20px;
text-decoration: none;
color: white;
text-align: -webkit-center;
line-height: 10px;
padding: 0px;
margin:0px;
clear: both;
}
.giticona,
.giticon {
fill: white;
}
</style>
</head>
<body>
<div id="gitlink"> <a id="gitlinka" href="https://github.com/RR-inc/RR-inc.github.io" target="blank" title="Follow me on github!"/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="32" height="32" viewBox="0 0 560.000000 560.000000" preserveAspectRatio="xMidYMid meet">
<g class="giticona" transform="translate(0.000000,560.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M2571 4839 c-733 -82 -1361 -525 -1676 -1182 -488 -1019 -73 -2233 941 -2749 60 -31 154 -72 209 -93 116 -43 165 -43 202 0 22 25 23 33 23 242 l0 215 -27 -6 c-16 -4 -86 -9 -158 -12 -152 -7 -232 7 -328 59 -95 50 -147 110 -211 239 -61 126 -113 194 -190 251 -111 83 -131 118 -78 138 107 42 291 -57 387 -207 106 -165 229 -232 404 -221 108 7 211 40 211 68 0 39 43 145 81 201 45 66 57 56 -99 83 -497 85 -752 358 -803 858 -26 260 24 468 158 647 l48 65 -17 65 c-33 127 -16 355 34 465 12 27 14 27 78 22 119 -10 299 -82 454 -181 l52 -33 110 23 c276 58 562 58 838 0 l110 -23 52 33 c156 100 335 171 456 181 l66 6 28 -84 c37 -114 45 -299 17 -405 l-19 -71 49 -63 c164 -218 207 -519 122 -856 -95 -376 -368 -595 -817 -656 -49 -7 -88 -16 -88 -19 0 -4 11 -20 24 -36 39 -47 74 -125 90 -206 13 -61 16 -145 16 -416 0 -338 0 -340 23 -366 37 -43 86 -43 202 0 1143 427 1676 1745 1150 2842 -296 618 -865 1045 -1550 1164 -139 24 -440 33 -574 18z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="32" viewBox="0 0 45 16"><path class="giticon" fill-rule="evenodd" d="M18.53 12.03h-.02c.009 0 .015.01.024.011h.006l-.01-.01zm.004.011c-.093.001-.327.05-.574.05-.78 0-1.05-.36-1.05-.83V8.13h1.59c.09 0 .16-.08.16-.19v-1.7c0-.09-.08-.17-.16-.17h-1.59V3.96c0-.08-.05-.13-.14-.13h-2.16c-.09 0-.14.05-.14.13v2.17s-1.09.27-1.16.28c-.08.02-.13.09-.13.17v1.36c0 .11.08.19.17.19h1.11v3.28c0 2.44 1.7 2.69 2.86 2.69.53 0 1.17-.17 1.27-.22.06-.02.09-.09.09-.16v-1.5a.177.177 0 00-.146-.18zM42.23 9.84c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25zm2.43-.16c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88zm-8.72-3.61h-2.1c-.11 0-.17.08-.17.19v5.44s-.55.39-1.3.39-.97-.34-.97-1.09V6.25c0-.09-.08-.17-.17-.17h-2.14c-.09 0-.17.08-.17.17v5.11c0 2.2 1.23 2.75 2.92 2.75 1.39 0 2.52-.77 2.52-.77s.05.39.08.45c.02.05.09.09.16.09h1.34c.11 0 .17-.08.17-.17l.02-7.47c0-.09-.08-.17-.19-.17zm-23.7-.01h-2.13c-.09 0-.17.09-.17.2v7.34c0 .2.13.27.3.27h1.92c.2 0 .25-.09.25-.27V6.23c0-.09-.08-.17-.17-.17zm-1.05-3.38c-.77 0-1.38.61-1.38 1.38 0 .77.61 1.38 1.38 1.38.75 0 1.36-.61 1.36-1.38 0-.77-.61-1.38-1.36-1.38zm16.49-.25h-2.11c-.09 0-.17.08-.17.17v4.09h-3.31V2.6c0-.09-.08-.17-.17-.17h-2.13c-.09 0-.17.08-.17.17v11.11c0 .09.09.17.17.17h2.13c.09 0 .17-.08.17-.17V8.96h3.31l-.02 4.75c0 .09.08.17.17.17h2.13c.09 0 .17-.08.17-.17V2.6c0-.09-.08-.17-.17-.17zM8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17z"/></svg></a> </div>
<h2> rrColor.js </h2><h3> Just a modern experimental WEB color picker. </h3>
</br>
<div class="sep"></div>
</br>
<h4> Pickers examples: </h4>
<a href="./examples/rectangle.html"> Rectangle <img src="./examples/imm/Rectangle.png" /></a>
</br>
<a href="./examples/circle.html"> Circle <img src="./examples/imm/circle.png" /></a>
</br>
<a href="./examples/circleHSV.html"> Circle HSV <img src="./examples/imm/circleHSV.png" /> </a>
</br>
<a href="./examples/cube.html"> Cube* <img src="./examples/imm/Cube.png" /></a>
</br>
<a href="./examples/cylinder.html"> Cylinder* <img src="./examples/imm/Cylinder.png" /></a>
</br>
<a href="./examples/sliders.html"> Sliders <img src="./examples/imm/Sliders.png" /></a>
</br>
<a href="./examples/slidersMini.html"> Compact sliders <img src="./examples/imm/SlidersMini.png" /></a>
</br>
<a href="./examples/palette.html"> Palette <img src="./examples/imm/Palette.png" /></a>
</br>
<a href="./examples/tabUI.html"> All in a Tab container <img src="./examples/imm/Tab.png" /></a>
</br>
<a href="./examples/UIs.html"> Multy-sync pickers <img src="./examples/imm/Sinc.png" /></a>
</br>
</br>
<div class="sep"></div>
</br>
</br>
<div class="note">* Uncommon in web applications</div>
<div>
</body>
</html>