-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
99 lines (85 loc) · 2.89 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
<!DOCTYPE html>
<html>
<head>
<title>HtmlPalette Live Demo</title>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js'></script>
<link rel='stylesheet' href='build/palette.css'/>
<script src='build/html-palette.js'></script>
<script>
angular.module('testbed', ['html-palette'])
.controller('TestbedController', function($scope)
{
window.scope = $scope;
$scope.topLeftColor = {r:Math.random(), g:Math.random(), b:Math.random(), a:1.0};
$scope.bottomRightColor = {r:Math.random(), g:Math.random(), b:Math.random(), a:Math.random()/2+0.5};
$scope.invertColor = function(color){
return 'rgb('+Math.round((1-color.r)*255)+', '+Math.round((1-color.g)*255)+', '+Math.round((1-color.b)*255)+')';
}
$scope.log = function(color){
console.log(color);
}
$scope.$watchCollection('topLeftColor', function(newval){
$scope.updateGradient(newval, $scope.bottomRightColor);
});
$scope.$watchCollection('bottomRightColor', function(newval){
$scope.updateGradient($scope.topLeftColor, newval);
});
$scope.updateGradient = function(color1, color2)
{
var angle = Math.atan2(window.innerHeight, window.innerWidth);
document.body.style['background-image'] = 'linear-gradient(to right bottom, '+color1.css+', '+color2.css+'), url("src/checker.png")';
}
//$scope.updateGradient($scope.topLeftColor, $scope.bottomRightColor);
});
</script>
<style>
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
h1 {
background-color: white;
}
.paletteContainer {
position: absolute;
text-align: center;
}
html-palette
{
display: block;
width: 100px;
height: 100px;
margin: 5px;
font-size: 35px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body ng-app='testbed' ng-controller='TestbedController'>
<h1><a href='https://github.com/stevenvergenz/html-palette'>HtmlPalette - An HTML5 Color Picker</a></h1>
<div class="paletteContainer" style='top: 0px; left: 0px;'>
<html-palette
ng-style='{"background-color": topLeftColor.css, color: invertColor(topLeftColor)}'
radial='true' color='topLeftColor' on-color-select='log(color)'
>
Click me!
</html-palette>
<input type='button' value='Make blue' ng-click='event.preventDefault(); topLeftColor.hex = "4e6eee"'/>
</div>
<div class='paletteContainer' style='bottom: 0px; right: 0px;'>
<input type='button' value='Make orange' ng-click='event.preventDefault(); bottomRightColor.hex = "cb772b"'/>
<html-palette
ng-style='{"background-color": bottomRightColor.css, color: invertColor(bottomRightColor)}'
popup-edge='nw' use-alpha='true' color='bottomRightColor' on-color-select='log(color)'
>
Click me!
</html-palette>
</div>
</body>
</html>