├── github-logo.png ├── jquery-logo.png ├── wordpress-logo.png ├── browser-support.png ├── oleschmitt-logo.png ├── opensource-logo.png ├── stackoverflow-logo.png ├── README.md ├── fb-colorize.js ├── bootstrap-logo.svg ├── slider.css ├── fb-colorize.css ├── bootstrap-slider.js ├── index.html └── LICENSE.html /github-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/github-logo.png -------------------------------------------------------------------------------- /jquery-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/jquery-logo.png -------------------------------------------------------------------------------- /wordpress-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/wordpress-logo.png -------------------------------------------------------------------------------- /browser-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/browser-support.png -------------------------------------------------------------------------------- /oleschmitt-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/oleschmitt-logo.png -------------------------------------------------------------------------------- /opensource-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/opensource-logo.png -------------------------------------------------------------------------------- /stackoverflow-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/download/fb-colorize/HEAD/stackoverflow-logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Facebook Button Colorizer 2 | ========================= 3 | 4 | Tool demonstrating the use of SVG filters in modern web browsers. 5 | 6 | 7 | 8 | Copyright 2014 by [Stijn de Witt](http://stijndewitt.com/), some rights reserved. 9 | Licensed under the Creative Commons Attribution 3.0 [license](https://creativecommons.org/licenses/by/3.0/). 10 | 11 | For more information on Facebook Button Colorizer, refer to my blog post, [Change the facebook button color](http://stijndewitt.wordpress.com/2014/02/22/change-the-facebook-button-color/), or try out the [live demo](http://members.chello.nl/~sgm.jansen/facebook-button-colorizer/). 12 | 13 | -------------------------------------------------------------------------------- /fb-colorize.js: -------------------------------------------------------------------------------- 1 | (function fb_colorize(){ 2 | if (window['console']) console.log('fb-colorize: Starting...'); 3 | 4 | if (window['console']) console.log('fb-colorize: Activating colorize slider...'); 5 | $('#input-fbc-slider').slider().on('slide', function slide(evt) {colorize(this.value);}); 6 | if (window['console']) console.log('fb-colorize: Activated colorize slider.'); 7 | 8 | if (window['console']) console.log('fb-colorize: Activating colorize presets...'); 9 | $('.preset').on('click', function preset() {colorize($(this).find('i')[0].innerHTML);}); 10 | if (window['console']) console.log('fb-colorize: Activated colorize presets.'); 11 | 12 | if (window['console']) console.log('fb-colorize: Activating colorize filter...'); 13 | $('#colorize').on('submit', function filter(evt) {colorize(); return false;}); 14 | if (window['console']) console.log('fb-colorize: Activated colorize filter.'); 15 | 16 | if (window['console']) console.log('fb-colorize: Activating preview editor...'); 17 | $('#preview').on('submit', preview); 18 | if (window['console']) console.log('fb-colorize: Activated preview editor.'); 19 | 20 | if (window['console']) console.info('fb-colorize: Started.'); 21 | 22 | function colorize(radix) { 23 | if (radix) { 24 | var code = $('#code-fbc-filter')[0]; 25 | code.value = '\n' + 26 | ' \n' + 27 | ' \n' + 28 | ' \n' + 29 | ''; 30 | $('#input-fbc-slider').slider('setValue', radix); 31 | $('#input-fbc-slider')[0].value = radix; 32 | } 33 | update('#code-fbc-filter', '#container-fbc-filter', 'HTML'); 34 | update('#code-fbc-filter', '#paste-fbc-filter', 'TEXT'); 35 | } 36 | 37 | function preview(evt){ 38 | if (window['console']) console.info('fb-colorize: Updating preview button...'); 39 | if (window['FB']) { 40 | delete window.FB; 41 | var old = document.getElementById('facebook-jssdk'); 42 | old.parentNode.removeChild(old); 43 | } 44 | update('#code-fb-button', '#container-fb-button', 'HTML'); 45 | update('#code-fb-sdk', '#container-fb-sdk', 'HTML'); 46 | evt.preventDefault(); 47 | } 48 | 49 | function update(src, dst, type) { 50 | if (window['console']) console.log('fb-colorize: Updating ' + dst + '...'); 51 | var source = $(src)[0]; 52 | var dest = $(dst)[0]; 53 | if (dest) { 54 | var idx, text, data = get(source, "TEXT"); 55 | if (type == "TEXT") text = get(dest, "TEXT"); 56 | if (text && ((idx = text.indexOf(' 2 | 3 | 4 | 19 | 43 | 45 | 47 | 51 | 55 | 56 | 65 | 66 | 68 | 69 | 71 | image/svg+xml 72 | 74 | 75 | 76 | 77 | 78 | 81 | 89 | 93 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /slider.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Slider for Bootstrap 3 | * 4 | * Copyright 2012 Stefan Petre 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | */ 9 | .slider { 10 | display: inline-block; 11 | vertical-align: middle; 12 | position: relative; 13 | } 14 | .slider.slider-horizontal { 15 | width: 210px; 16 | height: 20px; 17 | } 18 | .slider.slider-horizontal .slider-track { 19 | height: 10px; 20 | width: 100%; 21 | margin-top: -5px; 22 | top: 50%; 23 | left: 0; 24 | } 25 | .slider.slider-horizontal .slider-selection { 26 | height: 100%; 27 | top: 0; 28 | bottom: 0; 29 | } 30 | .slider.slider-horizontal .slider-handle { 31 | margin-left: -10px; 32 | margin-top: -5px; 33 | } 34 | .slider.slider-horizontal .slider-handle.triangle { 35 | border-width: 0 10px 10px 10px; 36 | width: 0; 37 | height: 0; 38 | border-bottom-color: #0480be; 39 | margin-top: 0; 40 | } 41 | .slider.slider-vertical { 42 | height: 210px; 43 | width: 20px; 44 | } 45 | .slider.slider-vertical .slider-track { 46 | width: 10px; 47 | height: 100%; 48 | margin-left: -5px; 49 | left: 50%; 50 | top: 0; 51 | } 52 | .slider.slider-vertical .slider-selection { 53 | width: 100%; 54 | left: 0; 55 | top: 0; 56 | bottom: 0; 57 | } 58 | .slider.slider-vertical .slider-handle { 59 | margin-left: -5px; 60 | margin-top: -10px; 61 | } 62 | .slider.slider-vertical .slider-handle.triangle { 63 | border-width: 10px 0 10px 10px; 64 | width: 1px; 65 | height: 1px; 66 | border-left-color: #0480be; 67 | margin-left: 0; 68 | } 69 | .slider input { 70 | display: none; 71 | } 72 | .slider .tooltip-inner { 73 | white-space: nowrap; 74 | } 75 | .slider-track { 76 | position: absolute; 77 | cursor: pointer; 78 | background-color: #f7f7f7; 79 | background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); 80 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); 81 | background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); 82 | background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); 83 | background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); 84 | background-repeat: repeat-x; 85 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); 86 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 87 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 88 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 89 | -webkit-border-radius: 4px; 90 | -moz-border-radius: 4px; 91 | border-radius: 4px; 92 | } 93 | .slider-selection { 94 | position: absolute; 95 | background-color: #f7f7f7; 96 | background-image: -moz-linear-gradient(top, #f9f9f9, #f5f5f5); 97 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f5f5f5)); 98 | background-image: -webkit-linear-gradient(top, #f9f9f9, #f5f5f5); 99 | background-image: -o-linear-gradient(top, #f9f9f9, #f5f5f5); 100 | background-image: linear-gradient(to bottom, #f9f9f9, #f5f5f5); 101 | background-repeat: repeat-x; 102 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0); 103 | -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 104 | -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 105 | box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 106 | -webkit-box-sizing: border-box; 107 | -moz-box-sizing: border-box; 108 | box-sizing: border-box; 109 | -webkit-border-radius: 4px; 110 | -moz-border-radius: 4px; 111 | border-radius: 4px; 112 | } 113 | .slider-handle { 114 | position: absolute; 115 | width: 20px; 116 | height: 20px; 117 | background-color: #0e90d2; 118 | background-image: -moz-linear-gradient(top, #149bdf, #0480be); 119 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); 120 | background-image: -webkit-linear-gradient(top, #149bdf, #0480be); 121 | background-image: -o-linear-gradient(top, #149bdf, #0480be); 122 | background-image: linear-gradient(to bottom, #149bdf, #0480be); 123 | background-repeat: repeat-x; 124 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); 125 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 126 | -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 127 | box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 128 | opacity: 0.8; 129 | border: 0px solid transparent; 130 | } 131 | .slider-handle.round { 132 | -webkit-border-radius: 20px; 133 | -moz-border-radius: 20px; 134 | border-radius: 20px; 135 | } 136 | .slider-handle.triangle { 137 | background: transparent none; 138 | } -------------------------------------------------------------------------------- /fb-colorize.css: -------------------------------------------------------------------------------- 1 | body {min-width: 460px;} 2 | 3 | @media (min-width: 0px) { 4 | header .logo {font-size: 20pt; top: -3px;} 5 | header .logo span {bottom: -5px;} 6 | header .name {font-size: 20pt;} 7 | header img {width: 100px;} 8 | h2 {font-size: 12pt;} 9 | h3 {font-size: 10.5pt; letter-spacing: -0.5px;} 10 | p {font-size: 12px;} 11 | label {font-size: 11px; letter-spacing: -0.0px} 12 | textarea {font-size: 10px;} 13 | small, .small {font-size: 8px; letter-spacing: -0.5px;} 14 | .well {padding: 10px;} 15 | .well p {font-size: 11px;} 16 | .btn {font-size: 10px;} 17 | .prs {padding-left: 8px; padding-right: 8px;} 18 | .preset {font-size: 7pt; padding: 3px 0px; margin: 2px 0;} 19 | .preset i {margin-left: -9px;} 20 | } 21 | 22 | @media (min-width: 512px) { 23 | header .logo {font-size: 22pt; top: -4px;} 24 | header .logo span {bottom: -5px;} 25 | header .name {font-size: 23pt;} 26 | header img {width: 115px;} 27 | h2 {font-size: 12.5pt;} 28 | p {font-size: 13px;} 29 | label {font-size: 12px; letter-spacing:0px} 30 | .well {padding: 12px;} 31 | .btn {font-size: 11px;} 32 | .preset i {margin-left: -12px;} 33 | } 34 | 35 | @media (min-width: 600px) { 36 | header .logo {font-size: 28pt; top: -6px;} 37 | header .logo span {bottom: -8px;} 38 | header .name {font-size: 28pt;} 39 | header img {width: 125px;} 40 | h3 {letter-spacing: 0px;} 41 | .preset i {margin-left: -8px;} 42 | } 43 | 44 | @media (min-width: 620px) { 45 | h3 {font-size: 11pt;} 46 | } 47 | 48 | @media (min-width: 640px) { 49 | header .logo {font-size: 29pt; top: -7px;} 50 | header .logo span {bottom: -9px;} 51 | header .name {font-size: 29pt;} 52 | header img {width: 130px;} 53 | h2 {font-size: 12.5pt;} 54 | h3 {font-size: 12pt;} 55 | p {font-size: 13px;} 56 | label {font-size: 13px;} 57 | textarea {font-size: 12px;} 58 | .well textarea {font-size: 10px; letter-spacing: -1px;} 59 | .well {padding: 15px;} 60 | .well p {font-size: 12px;} 61 | .preset {font-size: 8pt; padding: 3px 0px; margin: 2px 0;} 62 | .preset i {margin-left: -6px;} 63 | } 64 | 65 | @media (min-width: 700px) { 66 | header .logo {font-size: 32pt; top: -7px;} 67 | header .logo span {bottom: -9px;} 68 | header .name {font-size: 32pt;} 69 | header img {width: 135px;} 70 | h2 {font-size: 13pt;} 71 | h3 {font-size: 12.5pt;} 72 | p {font-size: 14px;} 73 | .btn {font-size: 12px;} 74 | .preset i {margin-left: -3px;} 75 | } 76 | 77 | @media (min-width: 748px) { 78 | header .logo {font-size: 33pt;} 79 | header .name {font-size: 33pt;} 80 | header img {width: 140px;} 81 | h2 {font-size: 15pt;} 82 | .well {padding: 17px;} 83 | .well p {font-size: 13px;} 84 | .preset i {margin-left: -3px;} 85 | } 86 | 87 | @media (min-width: 768px) { 88 | header .logo {font-size: 34pt; top: -8px;} 89 | header .logo span {bottom: -11px;} 90 | header .name {font-size: 34pt;} 91 | header img {width: 145px;} 92 | h2 {font-size: 16pt;} 93 | p {font-size: 15px;} 94 | label {font-size: 14px;} 95 | textarea {font-size: 12px;} 96 | small, .small {font-size: 10px;} 97 | .well textarea {font-size: 10px;} 98 | .well {padding: 19px;} 99 | .well p {font-size: 14px;} 100 | .btn {font-size: 13px;} 101 | .preset {font-size: 10pt; padding: 3px 0px; margin: 2px 0;} 102 | .preset i {margin-left: -2px;} 103 | } 104 | 105 | @media (min-width: 992px) { 106 | header .logo {font-size: 36pt;} 107 | header .name {font-size: 36pt;} 108 | header img {width: 140px;} 109 | h2 {font-size: 20pt;} 110 | h3 {font-size: 18pt;} 111 | small, .small {font-size: 11px; letter-spacing: 0px;} 112 | .btn {font-size: 14px;} 113 | .preset {font-size: 10pt; padding: 3px 0px; margin: 2px 0;} 114 | .preset i {margin-left: 4px;} 115 | } 116 | 117 | @media (min-width: 1200px) { 118 | header .logo {font-size: 38pt;} 119 | header .name {font-size: 38pt;} 120 | header img {width: 150px;} 121 | h2 {font-size: 22pt;} 122 | h3 {font-size: 20pt;} 123 | p {font-size: 16px;} 124 | small, .small {font-size: 13px;} 125 | .well textarea {font-size: 12px;} 126 | .preset {font-size: 11pt; padding: 3px; margin: 4px 2px;} 127 | .preset i {margin-left: 6px;} 128 | } 129 | 130 | .well h2, .well h3 {margin-top: 0;} 131 | 132 | .btn-success { 133 | background-color: #3B7C00; 134 | border-color: #3B7C00; 135 | } 136 | 137 | .btn-success:hover { 138 | background-color: #408800; 139 | border-color: #408800; 140 | } 141 | 142 | textarea {font-family: "Consolas", "Courier New", "Courier", "fixed-width"; letter-spacing: -0.5px;} 143 | 144 | header { 145 | text-align: center; 146 | background-color: #408800; 147 | color: white; 148 | padding: 16px; 149 | margin-bottom: 20px; 150 | } 151 | 152 | header .container { 153 | padding: 10px 0; 154 | } 155 | 156 | header .logo { 157 | padding: 0px 2px 0px 4px; 158 | background-color: white; 159 | position: relative; 160 | font-weight: bold; 161 | } 162 | 163 | header .logo span { 164 | color: #408800; 165 | position: relative; 166 | right: -1px; 167 | } 168 | 169 | header .name { 170 | margin-left: 16px; 171 | } 172 | 173 | .fbc-presets .row { 174 | margin-left: -5px; 175 | margin-right: -5px; 176 | } 177 | 178 | .preset { 179 | width:100%; 180 | text-align: center; 181 | color: white; 182 | margin: 4px 0; 183 | background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.15) 0%, rgba(230, 230, 230, 0.1) 100%); 184 | } 185 | 186 | .preset div { 187 | line-height: 0.9; 188 | width: 31%; 189 | margin: 0 0 0 1px; 190 | padding: 0; 191 | background-color: white; 192 | text-align: right; 193 | } 194 | 195 | .preset:hover { 196 | opacity: 0.9; 197 | } 198 | 199 | .preset b { 200 | position: relative; 201 | font-family: Helvetica; 202 | margin: -2px 0px -2px 1px; 203 | bottom: -2px; 204 | } 205 | 206 | .preset i { 207 | position: relative; 208 | font-style: normal; 209 | font-weight: bold; 210 | bottom: -1px; 211 | } 212 | 213 | .preset.p0 { 214 | background-color: #4963B4; 215 | } 216 | .preset.p0 b { 217 | color: #4963B4; 218 | } 219 | 220 | .preset.p30 { 221 | background-color: #864fb4; 222 | } 223 | .preset.p30 b { 224 | color: #864fb4; 225 | } 226 | 227 | .preset.p60 { 228 | background-color: #a53da2; 229 | } 230 | .preset.p60 b { 231 | color: #a53da2; 232 | } 233 | 234 | .preset.p90 { 235 | background-color: #B4387F; 236 | } 237 | .preset.p90 b { 238 | color: #B4387F; 239 | } 240 | 241 | .preset.p120 { 242 | background-color: #B24238; 243 | } 244 | .preset.p120 b { 245 | color: #B24238; 246 | } 247 | 248 | .preset.p150 { 249 | background-color: #9F5500; 250 | } 251 | .preset.p150 b { 252 | color: #9F5500; 253 | } 254 | 255 | .preset.p180 { 256 | background-color: #7E6C00; 257 | } 258 | .preset.p180 b { 259 | color: #7E6C00; 260 | } 261 | 262 | .preset.p210 { 263 | background-color: #3B7C00; 264 | } 265 | .preset.p210 b { 266 | color: #3B7C00; 267 | } 268 | 269 | .preset.p240 { 270 | background-color: #008600; 271 | } 272 | .preset.p240 b { 273 | color: #008600; 274 | } 275 | 276 | .preset.p270 { 277 | background-color: #008649; 278 | } 279 | .preset.p270 b { 280 | color: #008649; 281 | } 282 | 283 | .preset.p300 { 284 | background-color: #008185; 285 | } 286 | .preset.p300 b { 287 | color: #008185; 288 | } 289 | 290 | .preset.p330 { 291 | background-color: #0076A5; 292 | } 293 | .preset.p330 b { 294 | color: #0076A5; 295 | } 296 | 297 | #colorize textarea { 298 | box-shadow: 0px 0px 80px rgba(80, 80, 80, 0.1); 299 | } 300 | 301 | .change-preview { 302 | margin-top: 40px; 303 | } 304 | 305 | .support img { 306 | width: 100%; 307 | } 308 | 309 | .support .pass, 310 | .support .fail { 311 | display: inline-block; 312 | width: 20%; 313 | text-align: center; 314 | } 315 | 316 | .support .pass { 317 | color: #008600; 318 | } 319 | 320 | .support .fail { 321 | color: red; 322 | } 323 | 324 | .bar { 325 | padding: 40px 0; 326 | } 327 | 328 | .bar img { 329 | width: 100%; 330 | max-width: 300px; 331 | } 332 | 333 | 334 | .bar.opensource { 335 | margin-top: 60px; 336 | background: #efefef; 337 | } 338 | 339 | .bar.credits { 340 | background: #dbeeca; 341 | } 342 | 343 | .bar.credits img { 344 | width: 100%; 345 | margin-top: 20px; 346 | } 347 | 348 | footer { 349 | background-color: #408800; 350 | padding: 25px 10px 35px 10px; 351 | color: #ccc; 352 | } 353 | 354 | footer a { 355 | color: #e6a98d; 356 | } 357 | 358 | footer a:hover { 359 | color: #f3e1d9; 360 | text-decoration: underline; 361 | } 362 | 363 | footer .disclaimer { 364 | padding-right: 10%; 365 | } -------------------------------------------------------------------------------- /bootstrap-slider.js: -------------------------------------------------------------------------------- 1 | /* ========================================================= 2 | * bootstrap-slider.js v2.0.0 3 | * http://www.eyecon.ro/bootstrap-slider 4 | * ========================================================= 5 | * Copyright 2012 Stefan Petre 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================= */ 19 | 20 | !function( $ ) { 21 | 22 | var Slider = function(element, options) { 23 | this.element = $(element); 24 | this.picker = $('
'+ 25 | '
'+ 26 | '
'+ 27 | '
'+ 28 | '
'+ 29 | '
'+ 30 | '
'+ 31 | '
') 32 | .insertBefore(this.element) 33 | .append(this.element); 34 | this.id = this.element.data('slider-id')||options.id; 35 | if (this.id) { 36 | this.picker[0].id = this.id; 37 | } 38 | 39 | if (typeof Modernizr !== 'undefined' && Modernizr.touch) { 40 | this.touchCapable = true; 41 | } 42 | 43 | var tooltip = this.element.data('slider-tooltip')||options.tooltip; 44 | 45 | this.tooltip = this.picker.find('.tooltip'); 46 | this.tooltipInner = this.tooltip.find('div.tooltip-inner'); 47 | 48 | this.orientation = this.element.data('slider-orientation')||options.orientation; 49 | switch(this.orientation) { 50 | case 'vertical': 51 | this.picker.addClass('slider-vertical'); 52 | this.stylePos = 'top'; 53 | this.mousePos = 'pageY'; 54 | this.sizePos = 'offsetHeight'; 55 | this.tooltip.addClass('right')[0].style.left = '100%'; 56 | break; 57 | default: 58 | this.picker 59 | .addClass('slider-horizontal') 60 | .css('width', this.element.outerWidth()); 61 | this.orientation = 'horizontal'; 62 | this.stylePos = 'left'; 63 | this.mousePos = 'pageX'; 64 | this.sizePos = 'offsetWidth'; 65 | this.tooltip.addClass('top')[0].style.top = -this.tooltip.outerHeight() - 14 + 'px'; 66 | break; 67 | } 68 | 69 | this.min = this.element.data('slider-min')||options.min; 70 | this.max = this.element.data('slider-max')||options.max; 71 | this.step = this.element.data('slider-step')||options.step; 72 | this.value = this.element.data('slider-value')||options.value; 73 | if (this.value[1]) { 74 | this.range = true; 75 | } 76 | 77 | this.selection = this.element.data('slider-selection')||options.selection; 78 | this.selectionEl = this.picker.find('.slider-selection'); 79 | if (this.selection === 'none') { 80 | this.selectionEl.addClass('hide'); 81 | } 82 | this.selectionElStyle = this.selectionEl[0].style; 83 | 84 | 85 | this.handle1 = this.picker.find('.slider-handle:first'); 86 | this.handle1Stype = this.handle1[0].style; 87 | this.handle2 = this.picker.find('.slider-handle:last'); 88 | this.handle2Stype = this.handle2[0].style; 89 | 90 | var handle = this.element.data('slider-handle')||options.handle; 91 | switch(handle) { 92 | case 'round': 93 | this.handle1.addClass('round'); 94 | this.handle2.addClass('round'); 95 | break 96 | case 'triangle': 97 | this.handle1.addClass('triangle'); 98 | this.handle2.addClass('triangle'); 99 | break 100 | } 101 | 102 | if (this.range) { 103 | this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0])); 104 | this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1])); 105 | } else { 106 | this.value = [ Math.max(this.min, Math.min(this.max, this.value))]; 107 | this.handle2.addClass('hide'); 108 | if (this.selection == 'after') { 109 | this.value[1] = this.max; 110 | } else { 111 | this.value[1] = this.min; 112 | } 113 | } 114 | this.diff = this.max - this.min; 115 | this.percentage = [ 116 | (this.value[0]-this.min)*100/this.diff, 117 | (this.value[1]-this.min)*100/this.diff, 118 | this.step*100/this.diff 119 | ]; 120 | 121 | this.offset = this.picker.offset(); 122 | this.size = this.picker[0][this.sizePos]; 123 | 124 | this.formater = options.formater; 125 | 126 | this.layout(); 127 | 128 | if (this.touchCapable) { 129 | // Touch: Bind touch events: 130 | this.picker.on({ 131 | touchstart: $.proxy(this.mousedown, this) 132 | }); 133 | } else { 134 | this.picker.on({ 135 | mousedown: $.proxy(this.mousedown, this) 136 | }); 137 | } 138 | 139 | if (tooltip === 'show') { 140 | this.picker.on({ 141 | mouseenter: $.proxy(this.showTooltip, this), 142 | mouseleave: $.proxy(this.hideTooltip, this) 143 | }); 144 | } else { 145 | this.tooltip.addClass('hide'); 146 | } 147 | }; 148 | 149 | Slider.prototype = { 150 | constructor: Slider, 151 | 152 | over: false, 153 | inDrag: false, 154 | 155 | showTooltip: function(){ 156 | this.tooltip.addClass('in'); 157 | //var left = Math.round(this.percent*this.width); 158 | //this.tooltip.css('left', left - this.tooltip.outerWidth()/2); 159 | this.over = true; 160 | }, 161 | 162 | hideTooltip: function(){ 163 | if (this.inDrag === false) { 164 | this.tooltip.removeClass('in'); 165 | } 166 | this.over = false; 167 | }, 168 | 169 | layout: function(){ 170 | this.handle1Stype[this.stylePos] = this.percentage[0]+'%'; 171 | this.handle2Stype[this.stylePos] = this.percentage[1]+'%'; 172 | if (this.orientation == 'vertical') { 173 | this.selectionElStyle.top = Math.min(this.percentage[0], this.percentage[1]) +'%'; 174 | this.selectionElStyle.height = Math.abs(this.percentage[0] - this.percentage[1]) +'%'; 175 | } else { 176 | this.selectionElStyle.left = Math.min(this.percentage[0], this.percentage[1]) +'%'; 177 | this.selectionElStyle.width = Math.abs(this.percentage[0] - this.percentage[1]) +'%'; 178 | } 179 | if (this.range) { 180 | this.tooltipInner.text( 181 | this.formater(this.value[0]) + 182 | ' : ' + 183 | this.formater(this.value[1]) 184 | ); 185 | this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px'; 186 | } else { 187 | this.tooltipInner.text( 188 | this.formater(this.value[0]) 189 | ); 190 | this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px'; 191 | } 192 | }, 193 | 194 | mousedown: function(ev) { 195 | 196 | // Touch: Get the original event: 197 | if (this.touchCapable && ev.type === 'touchstart') { 198 | ev = ev.originalEvent; 199 | } 200 | 201 | this.offset = this.picker.offset(); 202 | this.size = this.picker[0][this.sizePos]; 203 | 204 | var percentage = this.getPercentage(ev); 205 | 206 | if (this.range) { 207 | var diff1 = Math.abs(this.percentage[0] - percentage); 208 | var diff2 = Math.abs(this.percentage[1] - percentage); 209 | this.dragged = (diff1 < diff2) ? 0 : 1; 210 | } else { 211 | this.dragged = 0; 212 | } 213 | 214 | this.percentage[this.dragged] = percentage; 215 | this.layout(); 216 | 217 | if (this.touchCapable) { 218 | // Touch: Bind touch events: 219 | $(document).on({ 220 | touchmove: $.proxy(this.mousemove, this), 221 | touchend: $.proxy(this.mouseup, this) 222 | }); 223 | } else { 224 | $(document).on({ 225 | mousemove: $.proxy(this.mousemove, this), 226 | mouseup: $.proxy(this.mouseup, this) 227 | }); 228 | } 229 | 230 | this.inDrag = true; 231 | var val = this.calculateValue(); 232 | this.element.trigger({ 233 | type: 'slideStart', 234 | value: val 235 | }).trigger({ 236 | type: 'slide', 237 | value: val 238 | }); 239 | return false; 240 | }, 241 | 242 | mousemove: function(ev) { 243 | 244 | // Touch: Get the original event: 245 | if (this.touchCapable && ev.type === 'touchmove') { 246 | ev = ev.originalEvent; 247 | } 248 | 249 | var percentage = this.getPercentage(ev); 250 | if (this.range) { 251 | if (this.dragged === 0 && this.percentage[1] < percentage) { 252 | this.percentage[0] = this.percentage[1]; 253 | this.dragged = 1; 254 | } else if (this.dragged === 1 && this.percentage[0] > percentage) { 255 | this.percentage[1] = this.percentage[0]; 256 | this.dragged = 0; 257 | } 258 | } 259 | this.percentage[this.dragged] = percentage; 260 | this.layout(); 261 | var val = this.calculateValue(); 262 | this.element 263 | .trigger({ 264 | type: 'slide', 265 | value: val 266 | }) 267 | .data('value', val) 268 | .prop('value', val); 269 | return false; 270 | }, 271 | 272 | mouseup: function(ev) { 273 | if (this.touchCapable) { 274 | // Touch: Bind touch events: 275 | $(document).off({ 276 | touchmove: this.mousemove, 277 | touchend: this.mouseup 278 | }); 279 | } else { 280 | $(document).off({ 281 | mousemove: this.mousemove, 282 | mouseup: this.mouseup 283 | }); 284 | } 285 | 286 | this.inDrag = false; 287 | if (this.over == false) { 288 | this.hideTooltip(); 289 | } 290 | this.element; 291 | var val = this.calculateValue(); 292 | this.element 293 | .trigger({ 294 | type: 'slideStop', 295 | value: val 296 | }) 297 | .data('value', val) 298 | .prop('value', val); 299 | return false; 300 | }, 301 | 302 | calculateValue: function() { 303 | var val; 304 | if (this.range) { 305 | val = [ 306 | (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step), 307 | (this.min + Math.round((this.diff * this.percentage[1]/100)/this.step)*this.step) 308 | ]; 309 | this.value = val; 310 | } else { 311 | val = (this.min + Math.round((this.diff * this.percentage[0]/100)/this.step)*this.step); 312 | this.value = [val, this.value[1]]; 313 | } 314 | return val; 315 | }, 316 | 317 | getPercentage: function(ev) { 318 | if (this.touchCapable) { 319 | ev = ev.touches[0]; 320 | } 321 | var percentage = (ev[this.mousePos] - this.offset[this.stylePos])*100/this.size; 322 | percentage = Math.round(percentage/this.percentage[2])*this.percentage[2]; 323 | return Math.max(0, Math.min(100, percentage)); 324 | }, 325 | 326 | getValue: function() { 327 | if (this.range) { 328 | return this.value; 329 | } 330 | return this.value[0]; 331 | }, 332 | 333 | setValue: function(val) { 334 | this.value = val; 335 | 336 | if (this.range) { 337 | this.value[0] = Math.max(this.min, Math.min(this.max, this.value[0])); 338 | this.value[1] = Math.max(this.min, Math.min(this.max, this.value[1])); 339 | } else { 340 | this.value = [ Math.max(this.min, Math.min(this.max, this.value))]; 341 | this.handle2.addClass('hide'); 342 | if (this.selection == 'after') { 343 | this.value[1] = this.max; 344 | } else { 345 | this.value[1] = this.min; 346 | } 347 | } 348 | this.diff = this.max - this.min; 349 | this.percentage = [ 350 | (this.value[0]-this.min)*100/this.diff, 351 | (this.value[1]-this.min)*100/this.diff, 352 | this.step*100/this.diff 353 | ]; 354 | this.layout(); 355 | } 356 | }; 357 | 358 | $.fn.slider = function ( option, val ) { 359 | return this.each(function () { 360 | var $this = $(this), 361 | data = $this.data('slider'), 362 | options = typeof option === 'object' && option; 363 | if (!data) { 364 | $this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options)))); 365 | } 366 | if (typeof option == 'string') { 367 | data[option](val); 368 | } 369 | }) 370 | }; 371 | 372 | $.fn.slider.defaults = { 373 | min: 0, 374 | max: 10, 375 | step: 1, 376 | orientation: 'horizontal', 377 | value: 5, 378 | selection: 'before', 379 | tooltip: 'show', 380 | handle: 'round', 381 | formater: function(value) { 382 | return value; 383 | } 384 | }; 385 | 386 | $.fn.slider.Constructor = Slider; 387 | 388 | }( window.jQuery ); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Facebook button colorizer 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |

13 | 14 | facebook button colorizer 15 |

16 | Fork me on GitHub 21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 |

Colorize your Facebook button

29 |

Use the slider, pick one of the presets, 30 | or play with the filter code yourself.

31 |
32 |
33 |
34 | 39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
fbc 0
49 |
50 |
51 |
52 | fbc 30 53 |
54 |
55 |
56 |
57 | fbc 60 58 |
59 |
60 |
61 |
62 | fbc 90 63 |
64 |
65 |
66 |
67 | fbc 120 68 |
69 |
70 |
71 |
72 | fbc 150 73 |
74 |
75 |
76 |
77 |
78 |
79 | fbc 180 80 |
81 |
82 |
83 |
84 | fbc 210 85 |
86 |
87 |
88 |
89 | fbc 240 90 |
91 |
92 |
93 |
94 | fbc 270 95 |
96 |
97 |
98 |
99 | fbc 300 100 |
101 |
102 |
103 |
104 | fbc 330 105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 | 119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 |
127 | 133 | 137 |
138 |
139 |
140 |

Copy-paste this code

141 |

Paste this code near the facebook button in your site's HTML.

142 | 
<svg height="0" width="0">
144 |   <filter id="fb-filter">
145 |     <feColorMatrix type="hueRotate" values="0"/>
146 |   </filter>
147 | </svg>
148 | <style>
149 |   .fb-like, .fb-send, .fb-share-button {
150 |     -webkit-filter: url(#fb-filter); 
151 |     filter: url(#fb-filter);
152 |   }
153 | </style>
154 | 155 |
156 |
157 |
158 |

Your button will look like this

159 |

Live preview. Press it to like my blog post about this tool.

160 |
161 |
162 |
163 | 170 |
171 |
172 |
175 | Waiting for button to load... 176 |
177 |
178 |
179 |
180 |
181 |

Change the preview button

182 |

Create 183 | the button on Facebook and paste the button code here.

184 |
185 |
186 | 195 |
196 |
197 |
198 |
199 | 203 |
204 |
205 | 210 |
211 |
212 |
213 |

Browser support

214 | 215 |
221 |
222 |
223 | 224 |
225 |
226 | 227 |
228 |
229 |
230 |
231 | 232 |
233 |
234 |

Share alike!

235 |

facebook button colorizer, or fb-colorize for short, 236 | is Open Source software, 237 | distributed under the Creative Commons Attribution 3.0 license. 239 | This means you are free to adapt this program to fit your needs 240 | and that you are free to share those changes with others as long 241 | as you give appropriate credit, provide a link to the license, and 242 | indicate what changes were made. You may not impose any additional 243 | restrictions on the people you share your changes with.

244 | 245 |

Because this is free software there is NO WARRANTY whatsoever. 246 | Use at your own risk.

247 | 248 |

You can download 249 | the fb-colorize source code from GitHub. 250 | You can also report any issues you may find there or make suggestions and feature 251 | requests. For more general feedback, please refer to my blog post on this topic.

254 |
255 |
256 |
257 |
260 |
261 |
262 |
263 |

I'd like to thank

264 |

Stackoverflow, for being a big help every day.

265 |

Ole Schmitt for 266 | inspiring me to build this tool.

268 |

Twitter Bootstrap for their lay-out tool.

269 |

jQuery, for bringing it to life.

270 |

GitHub, for hosting the code.

271 |

WordPress, for hosting my blog.

272 |

Facebook, for being an awesome social network.

273 |
274 |
275 |
276 |

277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
319 | 320 | 321 | 322 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /LICENSE.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 8 | 9 | Creative Commons Legal Code 10 | 12 | 14 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 27 | 28 |
29 |
30 | 35 | 36 |

Creative Commons Legal Code

37 | 38 |
39 |

Attribution 3.0 Unported

40 |
41 |
42 | 43 |
44 |
45 | 48 | 49 |
50 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES 51 | NOT PROVIDE LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE 52 | DOES NOT CREATE AN ATTORNEY-CLIENT RELATIONSHIP. CREATIVE 53 | COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS" BASIS. 54 | CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE 55 | INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR DAMAGES 56 | RESULTING FROM ITS USE. 57 |
58 | 59 |

License

60 | 61 |

THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS 62 | OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR 63 | "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER 64 | APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS 65 | AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS 66 | PROHIBITED.

67 | 68 |

BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU 69 | ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. 70 | TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A 71 | CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE 72 | IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND 73 | CONDITIONS.

74 | 75 |

1. Definitions

76 | 77 |
    78 |
  1. "Adaptation" means a work based upon 79 | the Work, or upon the Work and other pre-existing works, 80 | such as a translation, adaptation, derivative work, 81 | arrangement of music or other alterations of a literary 82 | or artistic work, or phonogram or performance and 83 | includes cinematographic adaptations or any other form in 84 | which the Work may be recast, transformed, or adapted 85 | including in any form recognizably derived from the 86 | original, except that a work that constitutes a 87 | Collection will not be considered an Adaptation for the 88 | purpose of this License. For the avoidance of doubt, 89 | where the Work is a musical work, performance or 90 | phonogram, the synchronization of the Work in 91 | timed-relation with a moving image ("synching") will be 92 | considered an Adaptation for the purpose of this 93 | License.
    2. 94 | 95 |
  2. "Collection" means a collection of 96 | literary or artistic works, such as encyclopedias and 97 | anthologies, or performances, phonograms or broadcasts, 98 | or other works or subject matter other than works listed 99 | in Section 1(f) below, which, by reason of the selection 100 | and arrangement of their contents, constitute 101 | intellectual creations, in which the Work is included in 102 | its entirety in unmodified form along with one or more 103 | other contributions, each constituting separate and 104 | independent works in themselves, which together are 105 | assembled into a collective whole. A work that 106 | constitutes a Collection will not be considered an 107 | Adaptation (as defined above) for the purposes of this 108 | License.
    3. 109 | 110 |
  3. "Distribute" means to make available 111 | to the public the original and copies of the Work or 112 | Adaptation, as appropriate, through sale or other 113 | transfer of ownership.
    4. 114 | 115 |
  4. "Licensor" means the individual, 116 | individuals, entity or entities that offer(s) the Work 117 | under the terms of this License.
    5. 118 | 119 |
  5. "Original Author" means, in the case 120 | of a literary or artistic work, the individual, 121 | individuals, entity or entities who created the Work or 122 | if no individual or entity can be identified, the 123 | publisher; and in addition (i) in the case of a 124 | performance the actors, singers, musicians, dancers, and 125 | other persons who act, sing, deliver, declaim, play in, 126 | interpret or otherwise perform literary or artistic works 127 | or expressions of folklore; (ii) in the case of a 128 | phonogram the producer being the person or legal entity 129 | who first fixes the sounds of a performance or other 130 | sounds; and, (iii) in the case of broadcasts, the 131 | organization that transmits the broadcast.
    6. 132 | 133 |
  6. "Work" means the literary and/or 134 | artistic work offered under the terms of this License 135 | including without limitation any production in the 136 | literary, scientific and artistic domain, whatever may be 137 | the mode or form of its expression including digital 138 | form, such as a book, pamphlet and other writing; a 139 | lecture, address, sermon or other work of the same 140 | nature; a dramatic or dramatico-musical work; a 141 | choreographic work or entertainment in dumb show; a 142 | musical composition with or without words; a 143 | cinematographic work to which are assimilated works 144 | expressed by a process analogous to cinematography; a 145 | work of drawing, painting, architecture, sculpture, 146 | engraving or lithography; a photographic work to which 147 | are assimilated works expressed by a process analogous to 148 | photography; a work of applied art; an illustration, map, 149 | plan, sketch or three-dimensional work relative to 150 | geography, topography, architecture or science; a 151 | performance; a broadcast; a phonogram; a compilation of 152 | data to the extent it is protected as a copyrightable 153 | work; or a work performed by a variety or circus 154 | performer to the extent it is not otherwise considered a 155 | literary or artistic work.
    7. 156 | 157 |
  7. "You" means an individual or entity 158 | exercising rights under this License who has not 159 | previously violated the terms of this License with 160 | respect to the Work, or who has received express 161 | permission from the Licensor to exercise rights under 162 | this License despite a previous violation.
    8. 163 | 164 |
  8. "Publicly Perform" means to perform 165 | public recitations of the Work and to communicate to the 166 | public those public recitations, by any means or process, 167 | including by wire or wireless means or public digital 168 | performances; to make available to the public Works in 169 | such a way that members of the public may access these 170 | Works from a place and at a place individually chosen by 171 | them; to perform the Work to the public by any means or 172 | process and the communication to the public of the 173 | performances of the Work, including by public digital 174 | performance; to broadcast and rebroadcast the Work by any 175 | means including signs, sounds or images.
    9. 176 | 177 |
  9. "Reproduce" means to make copies of 178 | the Work by any means including without limitation by 179 | sound or visual recordings and the right of fixation and 180 | reproducing fixations of the Work, including storage of a 181 | protected performance or phonogram in digital form or 182 | other electronic medium.
    10. 183 |
184 | 185 |

2. Fair Dealing Rights. Nothing in this 186 | License is intended to reduce, limit, or restrict any uses 187 | free from copyright or rights arising from limitations or 188 | exceptions that are provided for in connection with the 189 | copyright protection under copyright law or other 190 | applicable laws.

191 | 192 |

3. License Grant. Subject to the terms 193 | and conditions of this License, Licensor hereby grants You 194 | a worldwide, royalty-free, non-exclusive, perpetual (for 195 | the duration of the applicable copyright) license to 196 | exercise the rights in the Work as stated below:

197 | 198 |
    199 |
  1. to Reproduce the Work, to incorporate the Work into 200 | one or more Collections, and to Reproduce the Work as 201 | incorporated in the Collections;
    2. 202 | 203 |
  2. to create and Reproduce Adaptations provided that any 204 | such Adaptation, including any translation in any medium, 205 | takes reasonable steps to clearly label, demarcate or 206 | otherwise identify that changes were made to the original 207 | Work. For example, a translation could be marked "The 208 | original work was translated from English to Spanish," or 209 | a modification could indicate "The original work has been 210 | modified.";
    3. 211 | 212 |
  3. to Distribute and Publicly Perform the Work including 213 | as incorporated in Collections; and,
    4. 214 | 215 |
  4. to Distribute and Publicly Perform Adaptations.
    5. 216 | 217 |
  5. 218 |

    For the avoidance of doubt:

    219 | 220 |
      221 |
    1. Non-waivable Compulsory License 222 | Schemes. In those jurisdictions in which the 223 | right to collect royalties through any statutory or 224 | compulsory licensing scheme cannot be waived, the 225 | Licensor reserves the exclusive right to collect such 226 | royalties for any exercise by You of the rights 227 | granted under this License;
      2. 228 | 229 |
    2. Waivable Compulsory License 230 | Schemes. In those jurisdictions in which the 231 | right to collect royalties through any statutory or 232 | compulsory licensing scheme can be waived, the 233 | Licensor waives the exclusive right to collect such 234 | royalties for any exercise by You of the rights 235 | granted under this License; and,
      3. 236 | 237 |
    3. Voluntary License Schemes. The 238 | Licensor waives the right to collect royalties, 239 | whether individually or, in the event that the 240 | Licensor is a member of a collecting society that 241 | administers voluntary licensing schemes, via that 242 | society, from any exercise by You of the rights 243 | granted under this License.
      4. 244 |
    245 |
    6. 246 |
247 | 248 |

The above rights may be exercised in all media and 249 | formats whether now known or hereafter devised. The above 250 | rights include the right to make such modifications as are 251 | technically necessary to exercise the rights in other media 252 | and formats. Subject to Section 8(f), all rights not 253 | expressly granted by Licensor are hereby reserved.

254 | 255 |

4. Restrictions. The license granted in 256 | Section 3 above is expressly made subject to and limited by 257 | the following restrictions:

258 | 259 |
    260 |
  1. You may Distribute or Publicly Perform the Work only 261 | under the terms of this License. You must include a copy 262 | of, or the Uniform Resource Identifier (URI) for, this 263 | License with every copy of the Work You Distribute or 264 | Publicly Perform. You may not offer or impose any terms 265 | on the Work that restrict the terms of this License or 266 | the ability of the recipient of the Work to exercise the 267 | rights granted to that recipient under the terms of the 268 | License. You may not sublicense the Work. You must keep 269 | intact all notices that refer to this License and to the 270 | disclaimer of warranties with every copy of the Work You 271 | Distribute or Publicly Perform. When You Distribute or 272 | Publicly Perform the Work, You may not impose any 273 | effective technological measures on the Work that 274 | restrict the ability of a recipient of the Work from You 275 | to exercise the rights granted to that recipient under 276 | the terms of the License. This Section 4(a) applies to 277 | the Work as incorporated in a Collection, but this does 278 | not require the Collection apart from the Work itself to 279 | be made subject to the terms of this License. If You 280 | create a Collection, upon notice from any Licensor You 281 | must, to the extent practicable, remove from the 282 | Collection any credit as required by Section 4(b), as 283 | requested. If You create an Adaptation, upon notice from 284 | any Licensor You must, to the extent practicable, remove 285 | from the Adaptation any credit as required by Section 286 | 4(b), as requested.
    2. 287 | 288 |
  2. If You Distribute, or Publicly Perform the Work or 289 | any Adaptations or Collections, You must, unless a 290 | request has been made pursuant to Section 4(a), keep 291 | intact all copyright notices for the Work and provide, 292 | reasonable to the medium or means You are utilizing: (i) 293 | the name of the Original Author (or pseudonym, if 294 | applicable) if supplied, and/or if the Original Author 295 | and/or Licensor designate another party or parties (e.g., 296 | a sponsor institute, publishing entity, journal) for 297 | attribution ("Attribution Parties") in Licensor's 298 | copyright notice, terms of service or by other reasonable 299 | means, the name of such party or parties; (ii) the title 300 | of the Work if supplied; (iii) to the extent reasonably 301 | practicable, the URI, if any, that Licensor specifies to 302 | be associated with the Work, unless such URI does not 303 | refer to the copyright notice or licensing information 304 | for the Work; and (iv) , consistent with Section 3(b), in 305 | the case of an Adaptation, a credit identifying the use 306 | of the Work in the Adaptation (e.g., "French translation 307 | of the Work by Original Author," or "Screenplay based on 308 | original Work by Original Author"). The credit required 309 | by this Section 4 (b) may be implemented in any 310 | reasonable manner; provided, however, that in the case of 311 | a Adaptation or Collection, at a minimum such credit will 312 | appear, if a credit for all contributing authors of the 313 | Adaptation or Collection appears, then as part of these 314 | credits and in a manner at least as prominent as the 315 | credits for the other contributing authors. For the 316 | avoidance of doubt, You may only use the credit required 317 | by this Section for the purpose of attribution in the 318 | manner set out above and, by exercising Your rights under 319 | this License, You may not implicitly or explicitly assert 320 | or imply any connection with, sponsorship or endorsement 321 | by the Original Author, Licensor and/or Attribution 322 | Parties, as appropriate, of You or Your use of the Work, 323 | without the separate, express prior written permission of 324 | the Original Author, Licensor and/or Attribution 325 | Parties.
    3. 326 | 327 |
  3. Except as otherwise agreed in writing by the Licensor 328 | or as may be otherwise permitted by applicable law, if 329 | You Reproduce, Distribute or Publicly Perform the Work 330 | either by itself or as part of any Adaptations or 331 | Collections, You must not distort, mutilate, modify or 332 | take other derogatory action in relation to the Work 333 | which would be prejudicial to the Original Author's honor 334 | or reputation. Licensor agrees that in those 335 | jurisdictions (e.g. Japan), in which any exercise of the 336 | right granted in Section 3(b) of this License (the right 337 | to make Adaptations) would be deemed to be a distortion, 338 | mutilation, modification or other derogatory action 339 | prejudicial to the Original Author's honor and 340 | reputation, the Licensor will waive or not assert, as 341 | appropriate, this Section, to the fullest extent 342 | permitted by the applicable national law, to enable You 343 | to reasonably exercise Your right under Section 3(b) of 344 | this License (right to make Adaptations) but not 345 | otherwise.
    4. 346 |
347 | 348 |

5. Representations, Warranties and 349 | Disclaimer

350 | 351 |

UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN 352 | WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO 353 | REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE 354 | WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, 355 | WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, 356 | FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE 357 | ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE 358 | PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. 359 | SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED 360 | WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.

361 | 362 |

6. Limitation on Liability. EXCEPT TO 363 | THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL 364 | LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY 365 | SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY 366 | DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, 367 | EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF 368 | SUCH DAMAGES.

369 | 370 |

7. Termination

371 | 372 |
    373 |
  1. This License and the rights granted hereunder will 374 | terminate automatically upon any breach by You of the 375 | terms of this License. Individuals or entities who have 376 | received Adaptations or Collections from You under this 377 | License, however, will not have their licenses terminated 378 | provided such individuals or entities remain in full 379 | compliance with those licenses. Sections 1, 2, 5, 6, 7, 380 | and 8 will survive any termination of this License.
    2. 381 | 382 |
  2. Subject to the above terms and conditions, the 383 | license granted here is perpetual (for the duration of 384 | the applicable copyright in the Work). Notwithstanding 385 | the above, Licensor reserves the right to release the 386 | Work under different license terms or to stop 387 | distributing the Work at any time; provided, however that 388 | any such election will not serve to withdraw this License 389 | (or any other license that has been, or is required to 390 | be, granted under the terms of this License), and this 391 | License will continue in full force and effect unless 392 | terminated as stated above.
    3. 393 |
394 | 395 |

8. Miscellaneous

396 | 397 |
    398 |
  1. Each time You Distribute or Publicly Perform the Work 399 | or a Collection, the Licensor offers to the recipient a 400 | license to the Work on the same terms and conditions as 401 | the license granted to You under this License.
    2. 402 | 403 |
  2. Each time You Distribute or Publicly Perform an 404 | Adaptation, Licensor offers to the recipient a license to 405 | the original Work on the same terms and conditions as the 406 | license granted to You under this License.
    3. 407 | 408 |
  3. If any provision of this License is invalid or 409 | unenforceable under applicable law, it shall not affect 410 | the validity or enforceability of the remainder of the 411 | terms of this License, and without further action by the 412 | parties to this agreement, such provision shall be 413 | reformed to the minimum extent necessary to make such 414 | provision valid and enforceable.
    4. 415 | 416 |
  4. No term or provision of this License shall be deemed 417 | waived and no breach consented to unless such waiver or 418 | consent shall be in writing and signed by the party to be 419 | charged with such waiver or consent.
    5. 420 | 421 |
  5. This License constitutes the entire agreement between 422 | the parties with respect to the Work licensed here. There 423 | are no understandings, agreements or representations with 424 | respect to the Work not specified here. Licensor shall 425 | not be bound by any additional provisions that may appear 426 | in any communication from You. This License may not be 427 | modified without the mutual written agreement of the 428 | Licensor and You.
    6. 429 | 430 |
  6. The rights granted under, and the subject matter 431 | referenced, in this License were drafted utilizing the 432 | terminology of the Berne Convention for the Protection of 433 | Literary and Artistic Works (as amended on September 28, 434 | 1979), the Rome Convention of 1961, the WIPO Copyright 435 | Treaty of 1996, the WIPO Performances and Phonograms 436 | Treaty of 1996 and the Universal Copyright Convention (as 437 | revised on July 24, 1971). These rights and subject 438 | matter take effect in the relevant jurisdiction in which 439 | the License terms are sought to be enforced according to 440 | the corresponding provisions of the implementation of 441 | those treaty provisions in the applicable national law. 442 | If the standard suite of rights granted under applicable 443 | copyright law includes additional rights not granted 444 | under this License, such additional rights are deemed to 445 | be included in the License; this License is not intended 446 | to restrict the license of any rights under applicable 447 | law.
    7. 448 |
449 | 450 | 451 |
452 |

Creative Commons Notice

453 | 454 |

Creative Commons is not a party to this License, and 455 | makes no warranty whatsoever in connection with the Work. 456 | Creative Commons will not be liable to You or any party 457 | on any legal theory for any damages whatsoever, including 458 | without limitation any general, special, incidental or 459 | consequential damages arising in connection to this 460 | license. Notwithstanding the foregoing two (2) sentences, 461 | if Creative Commons has expressly identified itself as 462 | the Licensor hereunder, it shall have all rights and 463 | obligations of Licensor.

464 | 465 |

Except for the limited purpose of indicating to the 466 | public that the Work is licensed under the CCPL, Creative 467 | Commons does not authorize the use by either party of the 468 | trademark "Creative Commons" or any related trademark or 469 | logo of Creative Commons without the prior written 470 | consent of Creative Commons. Any permitted use will be in 471 | compliance with Creative Commons' then-current trademark 472 | usage guidelines, as may be published on its website or 473 | otherwise made available upon request from time to time. 474 | For the avoidance of doubt, this trademark restriction 475 | does not form part of this License.

476 | 477 |

Creative Commons may be contacted at http://creativecommons.org/.

479 |
480 |
481 |
482 | 483 | 486 |
487 | 488 | 489 | --------------------------------------------------------------------------------