Created
November 28, 2014 20:47
-
-
Save pkpp1233/b545c40fe88b0b32f1c6 to your computer and use it in GitHub Desktop.
Grab Color Palette
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> /* set the CSS */ | |
| #paletteExampleContainer { | |
| font: 12px Arial; | |
| } | |
| .swatches { | |
| width: 100%; | |
| height: 50px; | |
| text-align: center; | |
| } | |
| .swatch { | |
| display: inline-block; | |
| width: 12%; | |
| height: 100%; | |
| margin: 2px; | |
| border: 1px solid #C0BDBD; | |
| } | |
| </style> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| var webpage = "http://www.apple.com"; | |
| drawPalette(webpage); | |
| function drawPalette(webpage) { | |
| var payload = JSON.stringify({ url: webpage }); | |
| var $swatches = $(".swatches"); | |
| $.ajax({ | |
| url: "https://sender.blockspring.com/api_v2/blocks/91be8b9acdf7e32662373ee244912418", | |
| type: "POST", | |
| contentType: "application/json", | |
| data: payload, | |
| crossDomain: true | |
| }).done(function(response){ | |
| $swatches.empty(); | |
| var colors = response.colors; | |
| colors.forEach(function(color){ | |
| $swatches.append($("<div>").css("background-color", "rgb("+color.join(",")+")").addClass("swatch")); | |
| }); | |
| }); | |
| } | |
| $("#webpage").on("change", function(){ | |
| var webpage = $("#webpage").val(); | |
| drawPalette(webpage); | |
| }); | |
| }) | |
| </script> | |
| <body> | |
| <div id="paletteExampleContainer" class="well"> | |
| <div class="form-group"> | |
| <label name="webpage">Whose color palette to grab?</label> | |
| <input id="webpage" class="form-control" value="http://www.apple.com"> | |
| </div> | |
| <div id="palette"> | |
| <div class="swatches"><div class="swatch" style="background-color: rgb(50, 51, 47);"></div><div class="swatch" style="background-color: rgb(226, 161, 147);"></div><div class="swatch" style="background-color: rgb(129, 123, 105);"></div><div class="swatch" style="background-color: rgb(101, 113, 114);"></div><div class="swatch" style="background-color: rgb(141, 172, 189);"></div><div class="swatch" style="background-color: rgb(123, 150, 169);"></div><div class="swatch" style="background-color: rgb(79, 96, 112);"></div></div> | |
| </div> | |
| </div> | |
| </body> | |
| </head> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment