mirror of
https://github.com/janishutz/color-thief.git
synced 2025-11-25 13:54:25 +00:00
Drag-n-drop support+. Thanks nspady.
- Updated to higher res demo images. - Split template into two. - Style clean up in color-thief.js
This commit is contained in:
Lokesh Dhakar
651
css/app.css
651
css/app.css
@@ -1,4 +1,4 @@
|
||||
/* line 17, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 17, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@@ -20,412 +20,220 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* line 22, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* line 24, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* line 26, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* line 28, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* line 30, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
/* line 103, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* line 32, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* line 116, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* line 5, ../sass/app.sass */
|
||||
/* line 29, ../sass/app.sass */
|
||||
body, input, textarea {
|
||||
margin: 40px;
|
||||
color: #888888;
|
||||
background: #222222;
|
||||
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
|
||||
-wbkite-font-smoothing: antialiased;
|
||||
color: #aaaaaa;
|
||||
background: #444444;
|
||||
font-size: 18px;
|
||||
font-family: "Karla", "lucida grande", sans-serif;
|
||||
}
|
||||
|
||||
/* line 12, ../sass/app.sass */
|
||||
/* line 36, ../sass/app.sass */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: white;
|
||||
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif;
|
||||
line-height: 1em;
|
||||
font-weight: 600;
|
||||
line-height: 1.2em;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* line 19, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
line-height: 0.5em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
/* line 23, ../sass/app.sass */
|
||||
h1 small {
|
||||
font-size: 20px;
|
||||
}
|
||||
/* line 25, ../sass/app.sass */
|
||||
h1 span {
|
||||
-webkit-transition: color 1s;
|
||||
-moz-transition: color 1s;
|
||||
-o-transition: color 1s;
|
||||
transition: color 1s;
|
||||
}
|
||||
/* line 28, ../sass/app.sass */
|
||||
h1:hover .char1 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-moz-transition: color 0.2s;
|
||||
-o-transition: color 0.2s;
|
||||
transition: color 0.2s;
|
||||
color: red;
|
||||
}
|
||||
/* line 31, ../sass/app.sass */
|
||||
h1:hover .char2 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-moz-transition: color 0.2s 0.1s;
|
||||
-o-transition: color 0.2s 0.1s;
|
||||
transition: color 0.2s 0.1s;
|
||||
color: orange;
|
||||
}
|
||||
/* line 34, ../sass/app.sass */
|
||||
h1:hover .char3 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition: color 0.2s 0.2s;
|
||||
-o-transition: color 0.2s 0.2s;
|
||||
transition: color 0.2s 0.2s;
|
||||
color: yellow;
|
||||
}
|
||||
/* line 37, ../sass/app.sass */
|
||||
h1:hover .char4 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition: color 0.2s 0.3s;
|
||||
-o-transition: color 0.2s 0.3s;
|
||||
transition: color 0.2s 0.3s;
|
||||
color: green;
|
||||
}
|
||||
/* line 40, ../sass/app.sass */
|
||||
h1:hover .char5 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition: color 0.2s 0.4s;
|
||||
-o-transition: color 0.2s 0.4s;
|
||||
transition: color 0.2s 0.4s;
|
||||
color: blue;
|
||||
}
|
||||
/* line 43, ../sass/app.sass */
|
||||
h1:hover .char6 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition: color 0.2s 0.5s;
|
||||
-o-transition: color 0.2s 0.5s;
|
||||
transition: color 0.2s 0.5s;
|
||||
color: indigo;
|
||||
}
|
||||
/* line 46, ../sass/app.sass */
|
||||
h1:hover .char7 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.6s;
|
||||
-moz-transition: color 0.2s 0.6s;
|
||||
-o-transition: color 0.2s 0.6s;
|
||||
transition: color 0.2s 0.6s;
|
||||
color: violet;
|
||||
}
|
||||
/* line 49, ../sass/app.sass */
|
||||
h1:hover .char8 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.7s;
|
||||
-moz-transition: color 0.2s 0.7s;
|
||||
-o-transition: color 0.2s 0.7s;
|
||||
transition: color 0.2s 0.7s;
|
||||
color: red;
|
||||
}
|
||||
/* line 52, ../sass/app.sass */
|
||||
h1:hover .char9 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.8s;
|
||||
-moz-transition: color 0.2s 0.8s;
|
||||
-o-transition: color 0.2s 0.8s;
|
||||
transition: color 0.2s 0.8s;
|
||||
color: orange;
|
||||
}
|
||||
/* line 55, ../sass/app.sass */
|
||||
h1:hover .char10 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 0.9s;
|
||||
-moz-transition: color 0.2s 0.9s;
|
||||
-o-transition: color 0.2s 0.9s;
|
||||
transition: color 0.2s 0.9s;
|
||||
color: yellow;
|
||||
}
|
||||
/* line 58, ../sass/app.sass */
|
||||
h1:hover .char11 {
|
||||
-webkit-transition: color 0.2s;
|
||||
-webkit-transition-delay: 1s;
|
||||
-moz-transition: color 0.2s 1s;
|
||||
-o-transition: color 0.2s 1s;
|
||||
transition: color 0.2s 1s;
|
||||
color: green;
|
||||
}
|
||||
|
||||
/* line 62, ../sass/app.sass */
|
||||
/* line 42, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
font-size: 36px;
|
||||
line-height: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* line 67, ../sass/app.sass */
|
||||
/* line 46, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 72, ../sass/app.sass */
|
||||
/* line 51, ../sass/app.sass */
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
/* line 76, ../sass/app.sass */
|
||||
/* line 55, ../sass/app.sass */
|
||||
p {
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
/* line 80, ../sass/app.sass */
|
||||
/* line 59, ../sass/app.sass */
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Drag and Drop area */
|
||||
/* line 84, ../sass/app.sass */
|
||||
.dropZone {
|
||||
width: 900px;
|
||||
height: 200px;
|
||||
margin-bottom: 60px;
|
||||
background: url("../img/drag_placeholder.png");
|
||||
}
|
||||
/* line 89, ../sass/app.sass */
|
||||
.dropZone.dragging {
|
||||
-webkit-box-shadow: inset 0 1px 10px #09a1ec;
|
||||
-moz-box-shadow: inset 0 1px 10px #09a1ec;
|
||||
box-shadow: inset 0 1px 10px #09a1ec;
|
||||
}
|
||||
|
||||
/* line 91, ../sass/app.sass */
|
||||
.droppedImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
/* line 99, ../sass/app.sass */
|
||||
input[type=text], input[type=password] {
|
||||
background: #fafafa;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #dddddd;
|
||||
color: #888888;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 106, ../sass/app.sass */
|
||||
textarea {
|
||||
background: #fafafa;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #dddddd;
|
||||
color: #888888;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* line 113, ../sass/app.sass */
|
||||
input[type=text]:focus {
|
||||
color: #373737;
|
||||
}
|
||||
|
||||
/* line 116, ../sass/app.sass */
|
||||
textarea {
|
||||
padding-left: 3px;
|
||||
width: 98%;
|
||||
}
|
||||
/* line 117, ../sass/app.sass */
|
||||
textarea:focus {
|
||||
color: #373737;
|
||||
}
|
||||
|
||||
/* line 122, ../sass/app.sass */
|
||||
input[type=text] {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
/* line 127, ../sass/app.sass */
|
||||
/* line 63, ../sass/app.sass */
|
||||
a {
|
||||
color: #09a1ec;
|
||||
color: #00bfa8;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* line 130, ../sass/app.sass */
|
||||
/* line 66, ../sass/app.sass */
|
||||
a:hover {
|
||||
color: #7fd2fa;
|
||||
color: #59ffeb;
|
||||
}
|
||||
|
||||
/* line 133, ../sass/app.sass */
|
||||
#container {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* line 137, ../sass/app.sass */
|
||||
header {
|
||||
padding-bottom: 40px;
|
||||
/* -- Layout ------------------------------------------------------------------ */
|
||||
/* line 71, ../sass/app.sass */
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* line 143, ../sass/app.sass */
|
||||
.medianCutPalette h3 {
|
||||
/* line 76, ../sass/app.sass */
|
||||
.description {
|
||||
max-width: 450px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* line 81, ../sass/app.sass */
|
||||
.image-section {
|
||||
margin-bottom: 80px;
|
||||
background: #2b2b2b;
|
||||
}
|
||||
/* line 84, ../sass/app.sass */
|
||||
.image-section .image-wrap {
|
||||
position: relative;
|
||||
background: #444444;
|
||||
}
|
||||
|
||||
/* line 89, ../sass/app.sass */
|
||||
.target-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* line 92, ../sass/app.sass */
|
||||
.run-functions-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-top: -50px;
|
||||
margin-left: -50px;
|
||||
border: none;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
-ms-border-radius: 50%;
|
||||
-o-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
color: #817702;
|
||||
background-color: #fdf485;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* line 106, ../sass/app.sass */
|
||||
.run-functions-button:hover {
|
||||
background-color: #fef9b7;
|
||||
color: #9a8f03;
|
||||
}
|
||||
/* line 109, ../sass/app.sass */
|
||||
.run-functions-button:active {
|
||||
-webkit-transform: scale(0.9, 0.9);
|
||||
-moz-transform: scale(0.9, 0.9);
|
||||
-ms-transform: scale(0.9, 0.9);
|
||||
-o-transform: scale(0.9, 0.9);
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
|
||||
/* line 112, ../sass/app.sass */
|
||||
.color-thief-output {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* line 146, ../sass/app.sass */
|
||||
.imageSection {
|
||||
margin-bottom: 80px;
|
||||
background: #111111;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
-ms-border-radius: 10px;
|
||||
-o-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
.imageSection:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
/* line 151, ../sass/app.sass */
|
||||
.imageSection .imageWrap {
|
||||
-moz-border-radius-topleft: 10px;
|
||||
-webkit-border-top-left-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
-moz-border-radius-bottomleft: 10px;
|
||||
-webkit-border-bottom-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
background: url(../img/dark_checkered_bg.png);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* line 160, ../sass/app.sass */
|
||||
.imageSection .colors {
|
||||
margin-top: 20px;
|
||||
width: 400px;
|
||||
float: left;
|
||||
}
|
||||
/* line 164, ../sass/app.sass */
|
||||
.imageSection .colors .function {
|
||||
/* line 115, ../sass/app.sass */
|
||||
.function {
|
||||
clear: left;
|
||||
margin-bottom: 10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
/* line 38, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
.imageSection .colors .function:after {
|
||||
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p320/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
|
||||
.function:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
/* line 168, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
|
||||
/* line 120, ../sass/app.sass */
|
||||
.swatch {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin-right: 2px;
|
||||
background: #dddddd;
|
||||
float: left;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
-webkit-transition: scale 0.5s;
|
||||
-moz-transition: scale 0.5s;
|
||||
-o-transition: scale 0.5s;
|
||||
transition: scale 0.5s;
|
||||
}
|
||||
/* line 175, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:hover {
|
||||
/* line 127, ../sass/app.sass */
|
||||
.swatch:hover {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
-webkit-transform: scale(1.2, 1.2);
|
||||
-moz-transform: scale(1.2, 1.2);
|
||||
-ms-transform: scale(1.2, 1.2);
|
||||
-o-transform: scale(1.2, 1.2);
|
||||
transform: scale(1.2, 1.2);
|
||||
-webkit-transform: scale(1.1, 1.1);
|
||||
-moz-transform: scale(1.1, 1.1);
|
||||
-ms-transform: scale(1.1, 1.1);
|
||||
-o-transform: scale(1.1, 1.1);
|
||||
transform: scale(1.1, 1.1);
|
||||
-webkit-box-shadow: 0 1px 10px black;
|
||||
-moz-box-shadow: 0 1px 10px black;
|
||||
box-shadow: 0 1px 10px black;
|
||||
}
|
||||
/* line 179, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:first-child {
|
||||
-moz-border-radius-topleft: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
/* line 181, ../sass/app.sass */
|
||||
.imageSection .colors .function .swatches .swatch:last-child {
|
||||
-moz-border-radius-topright: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Hardcoding the offset for the FB icon example */
|
||||
/* line 185, ../sass/app.sass */
|
||||
/* line 133, ../sass/app.sass */
|
||||
.fbIcon .imageWrap .targetImage {
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
@@ -437,7 +245,240 @@ header {
|
||||
left: 192px;
|
||||
}
|
||||
|
||||
/* line 191, ../sass/app.sass */
|
||||
/* line 139, ../sass/app.sass */
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -- Animated logo ------------------------------------------------------------------ */
|
||||
/* line 143, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
line-height: 0.5em;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
/* line 147, ../sass/app.sass */
|
||||
h1 small {
|
||||
font-size: 20px;
|
||||
}
|
||||
/* line 150, ../sass/app.sass */
|
||||
h1 .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
-o-transition: color 0.1s;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
/* line 152, ../sass/app.sass */
|
||||
h1 .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
-moz-transition: color 0.1s 0.05s;
|
||||
-o-transition: color 0.1s 0.05s;
|
||||
transition: color 0.1s 0.05s;
|
||||
}
|
||||
/* line 154, ../sass/app.sass */
|
||||
h1 .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-moz-transition: color 0.1s 0.1s;
|
||||
-o-transition: color 0.1s 0.1s;
|
||||
transition: color 0.1s 0.1s;
|
||||
}
|
||||
/* line 156, ../sass/app.sass */
|
||||
h1 .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
-moz-transition: color 0.1s 0.15s;
|
||||
-o-transition: color 0.1s 0.15s;
|
||||
transition: color 0.1s 0.15s;
|
||||
}
|
||||
/* line 158, ../sass/app.sass */
|
||||
h1 .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition: color 0.1s 0.2s;
|
||||
-o-transition: color 0.1s 0.2s;
|
||||
transition: color 0.1s 0.2s;
|
||||
}
|
||||
/* line 161, ../sass/app.sass */
|
||||
h1 .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition: color 0.1s 0.3s;
|
||||
-o-transition: color 0.1s 0.3s;
|
||||
transition: color 0.1s 0.3s;
|
||||
}
|
||||
/* line 163, ../sass/app.sass */
|
||||
h1 .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
-moz-transition: color 0.1s 0.35s;
|
||||
-o-transition: color 0.1s 0.35s;
|
||||
transition: color 0.1s 0.35s;
|
||||
}
|
||||
/* line 165, ../sass/app.sass */
|
||||
h1 .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition: color 0.1s 0.4s;
|
||||
-o-transition: color 0.1s 0.4s;
|
||||
transition: color 0.1s 0.4s;
|
||||
}
|
||||
/* line 167, ../sass/app.sass */
|
||||
h1 .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
-moz-transition: color 0.1s 0.45s;
|
||||
-o-transition: color 0.1s 0.45s;
|
||||
transition: color 0.1s 0.45s;
|
||||
}
|
||||
/* line 169, ../sass/app.sass */
|
||||
h1 .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition: color 0.1s 0.5s;
|
||||
-o-transition: color 0.1s 0.5s;
|
||||
transition: color 0.1s 0.5s;
|
||||
}
|
||||
/* line 172, ../sass/app.sass */
|
||||
h1:hover .char1 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-moz-transition: color 0.1s;
|
||||
-o-transition: color 0.1s;
|
||||
transition: color 0.1s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 175, ../sass/app.sass */
|
||||
h1:hover .char2 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.05s;
|
||||
-moz-transition: color 0.1s 0.05s;
|
||||
-o-transition: color 0.1s 0.05s;
|
||||
transition: color 0.1s 0.05s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 178, ../sass/app.sass */
|
||||
h1:hover .char3 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.1s;
|
||||
-moz-transition: color 0.1s 0.1s;
|
||||
-o-transition: color 0.1s 0.1s;
|
||||
transition: color 0.1s 0.1s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 181, ../sass/app.sass */
|
||||
h1:hover .char4 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.15s;
|
||||
-moz-transition: color 0.1s 0.15s;
|
||||
-o-transition: color 0.1s 0.15s;
|
||||
transition: color 0.1s 0.15s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 184, ../sass/app.sass */
|
||||
h1:hover .char5 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.2s;
|
||||
-moz-transition: color 0.1s 0.2s;
|
||||
-o-transition: color 0.1s 0.2s;
|
||||
transition: color 0.1s 0.2s;
|
||||
color: #0096df;
|
||||
}
|
||||
/* line 188, ../sass/app.sass */
|
||||
h1:hover .char7 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.3s;
|
||||
-moz-transition: color 0.1s 0.3s;
|
||||
-o-transition: color 0.1s 0.3s;
|
||||
transition: color 0.1s 0.3s;
|
||||
color: #ff4040;
|
||||
}
|
||||
/* line 191, ../sass/app.sass */
|
||||
h1:hover .char8 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.35s;
|
||||
-moz-transition: color 0.1s 0.35s;
|
||||
-o-transition: color 0.1s 0.35s;
|
||||
transition: color 0.1s 0.35s;
|
||||
color: #ff8000;
|
||||
}
|
||||
/* line 194, ../sass/app.sass */
|
||||
h1:hover .char9 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.4s;
|
||||
-moz-transition: color 0.1s 0.4s;
|
||||
-o-transition: color 0.1s 0.4s;
|
||||
transition: color 0.1s 0.4s;
|
||||
color: #fdf485;
|
||||
}
|
||||
/* line 197, ../sass/app.sass */
|
||||
h1:hover .char10 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.45s;
|
||||
-moz-transition: color 0.1s 0.45s;
|
||||
-o-transition: color 0.1s 0.45s;
|
||||
transition: color 0.1s 0.45s;
|
||||
color: #00bfa8;
|
||||
}
|
||||
/* line 200, ../sass/app.sass */
|
||||
h1:hover .char11 {
|
||||
-webkit-transition: color 0.1s;
|
||||
-webkit-transition-delay: 0.5s;
|
||||
-moz-transition: color 0.1s 0.5s;
|
||||
-o-transition: color 0.1s 0.5s;
|
||||
transition: color 0.1s 0.5s;
|
||||
color: #0096df;
|
||||
}
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
/* line 207, ../sass/app.sass */
|
||||
.drag-and-drop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* line 210, ../sass/app.sass */
|
||||
.dropZone {
|
||||
height: 200px;
|
||||
margin-bottom: 60px;
|
||||
background: url("../img/drag_placeholder.png");
|
||||
}
|
||||
/* line 214, ../sass/app.sass */
|
||||
.dropZone.dragging {
|
||||
-webkit-box-shadow: inset 0 1px 10px #09a1ec;
|
||||
-moz-box-shadow: inset 0 1px 10px #09a1ec;
|
||||
box-shadow: inset 0 1px 10px #09a1ec;
|
||||
}
|
||||
|
||||
/* line 216, ../sass/app.sass */
|
||||
.droppedImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
/* line 223, ../sass/app.sass */
|
||||
body {
|
||||
margin: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* line 226, ../sass/app.sass */
|
||||
.intro {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* line 229, ../sass/app.sass */
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* line 231, ../sass/app.sass */
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* line 233, ../sass/app.sass */
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,79 +1,76 @@
|
||||
$(document).ready(function () {
|
||||
|
||||
// Use mustache.js templating to create layout
|
||||
|
||||
var imageArray = { images: [
|
||||
{"file": "img/3.jpg"},
|
||||
{"file": "img/4.jpg"},
|
||||
{"file": "img/5.jpg"},
|
||||
{"file": "img/logo1.png"},
|
||||
{"file": "img/icon1.png", "colorCount": "4", "class": "fbIcon"}
|
||||
// Uses mustache.js templating to create layout
|
||||
var imageArray = {images: [
|
||||
{"file": "img/photo1.jpg"},
|
||||
{"file": "img/photo2.jpg"},
|
||||
{"file": "img/photo3.jpg"}
|
||||
]};
|
||||
|
||||
var displayColors = function(image) {
|
||||
var $image = $(image);
|
||||
var imageSection = $image.closest('.image-section');
|
||||
var appendColors = function(colors, root) {
|
||||
$.each(colors, function(index, value) {
|
||||
var swatchEl = $('<div>', {'class': 'swatch'})
|
||||
.css('background-color', 'rgba('+ value +', 1)');
|
||||
root.append(swatchEl);
|
||||
});
|
||||
};
|
||||
|
||||
var colorThief = new ColorThief();
|
||||
|
||||
// Dominant Color
|
||||
var dominantColor = colorThief.getColor(image);
|
||||
var dominantSwatch = imageSection.find('.get-color .swatches');
|
||||
appendColors([dominantColor], dominantSwatch);
|
||||
|
||||
// Palette
|
||||
var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
|
||||
var medianPalette = colorThief.getPalette(image, colorCount);
|
||||
var medianCutPalette = imageSection.find('.get-palette .swatches');
|
||||
appendColors(medianPalette, medianCutPalette);
|
||||
};
|
||||
|
||||
|
||||
// Setup the drag and drop behavior if supported
|
||||
if (typeof window.FileReader === 'function') {
|
||||
$('#dragDrop').show();
|
||||
|
||||
var $dropZone = $('#dropZone');
|
||||
|
||||
var dragEnter = function( evt ){
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
var handleDragEnter = function(event){
|
||||
$dropZone.addClass('dragging');
|
||||
return false;
|
||||
};
|
||||
|
||||
var dragLeave = function( evt ){
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
var handleDragLeave = function(event){
|
||||
$dropZone.removeClass('dragging');
|
||||
return false;
|
||||
};
|
||||
|
||||
var dragOver = function( evt ){
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
var handleDragOver = function(event){
|
||||
return false;
|
||||
};
|
||||
|
||||
var drop = function( evt ){
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
var handleDrop = function(event){
|
||||
$dropZone.removeClass('dragging');
|
||||
|
||||
var dt = evt.originalEvent.dataTransfer;
|
||||
|
||||
var dt = event.originalEvent.dataTransfer;
|
||||
var files = dt.files;
|
||||
|
||||
handleFiles( files );
|
||||
handleFiles(files);
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
$dropZone
|
||||
.on('dragenter', dragEnter)
|
||||
.on('dragleave', dragLeave)
|
||||
.on('dragover', dragOver)
|
||||
.on('drop', drop);
|
||||
.on('dragenter', handleDragEnter)
|
||||
.on('dragleave', handleDragLeave)
|
||||
.on('dragover', handleDragOver)
|
||||
.on('drop', handleDrop);
|
||||
}
|
||||
|
||||
var displayColors = function( image ) {
|
||||
var $image = $(image);
|
||||
var imageSection = $image.closest('.imageSection');
|
||||
var appendColors = function (colors, root) {
|
||||
$.each(colors, function (index, value) {
|
||||
var swatchEl = $('<div>', {'class': 'swatch'})
|
||||
.css('background-color', 'rgba('+ value +', 1)');
|
||||
root.append(swatchEl);
|
||||
});
|
||||
};
|
||||
|
||||
// Dominant Color
|
||||
var dominantColor = getDominantColor(image);
|
||||
var dominantSwatch = imageSection.find('.dominantColor .swatches');
|
||||
appendColors([dominantColor], dominantSwatch);
|
||||
|
||||
// Palette
|
||||
var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
|
||||
var medianPalette = createPalette(image, colorCount);
|
||||
var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
|
||||
appendColors(medianPalette, medianCutPalette);
|
||||
};
|
||||
|
||||
function handleFiles( files ) {
|
||||
var imageType = /image.*/;
|
||||
var fileCount = files.length;
|
||||
@@ -108,18 +105,20 @@ $(document).ready(function () {
|
||||
}
|
||||
}
|
||||
|
||||
var html = Mustache.to_html($('#template').html(), imageArray);
|
||||
$('#main').append(html);
|
||||
|
||||
// Use lettering.js to give letter by letter styling control for the h1 title
|
||||
$("h1").lettering();
|
||||
|
||||
|
||||
var html = Mustache.to_html($('#image-section-template').html(), imageArray);
|
||||
$('#examples').append(html);
|
||||
|
||||
|
||||
// For each image:
|
||||
// Once image is loaded, get dominant color and palette and display them.
|
||||
$('img').bind('load', function (event) {
|
||||
var image = event.target;
|
||||
displayColors( image );
|
||||
});
|
||||
// $('img').bind('load', function (event) {
|
||||
// var image = event.target;
|
||||
// displayColors(image);
|
||||
// });
|
||||
});
|
||||
|
||||
var util = {
|
||||
@@ -136,7 +135,7 @@ var util = {
|
||||
if ( imgWidth > containerWidth ) {
|
||||
$img.css('width', ( containerWidth + "px" ));
|
||||
imgHeight = imgAspectRatio * containerWidth;
|
||||
}
|
||||
}
|
||||
if ( imgWidth < containerWidth ) {
|
||||
var hOffset = ( containerWidth - imgWidth )/2;
|
||||
$img.css('margin-left', ( hOffset + "px" ));
|
||||
BIN
img/icon1.png
BIN
img/icon1.png
Binary file not shown.
|
Before Width: | Height: | Size: 259 B |
BIN
img/logo1.png
BIN
img/logo1.png
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
img/photo1.jpg
Normal file
BIN
img/photo1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
BIN
img/photo2.jpg
Normal file
BIN
img/photo2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
BIN
img/photo3.jpg
Normal file
BIN
img/photo3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
95
index.html
95
index.html
@@ -4,74 +4,87 @@
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
|
||||
|
||||
<title>Color Thief</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<script src="js/libs/modernizr-2.0.6.min.js"></script>
|
||||
<link href='http://fonts.googleapis.com/css?family=Karla:400,700|Cousine' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
|
||||
<script src="js/libs/modernizr-2.0.6.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
|
||||
<section class="intro">
|
||||
<h1>Color Thief</h1>
|
||||
<h4><a href="http://lokeshdhakar.com">by Lokesh Dhakar</a></small></h4>
|
||||
|
||||
<p>A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
|
||||
<p><a href="http://www.lokeshdhakar.com/color-thief/">Read more on my blog</a> | <a href="https://github.com/lokesh/color-thief">Get the code on Github</a>
|
||||
|
||||
<p class="description">A script for grabbing the color palette from an image. Uses Javascript and the canvas tag to make it happen.</p>
|
||||
<p><a href="http://www.lokeshdhakar.com/color-thief/">Read more about it on my blog</a> or <a href="https://github.com/lokesh/color-thief">get the code on Github</a>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div id="main" role="main">
|
||||
<div id='dragDrop' style='display: none'>
|
||||
<h2>Test it out</h2>
|
||||
<div id="dropZone" class="dropZone">
|
||||
</div>
|
||||
|
||||
<div id="draggedImages"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="examples" id="examples">
|
||||
<h2>Examples</h2>
|
||||
</section>
|
||||
|
||||
<sectcion class="drag-and-drop" id="dragDrop">
|
||||
<h2>Try it yourself</h2>
|
||||
<div id="dropZone" class="dropZone">
|
||||
</div>
|
||||
<div id="draggedImages"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!--! end of #container -->
|
||||
|
||||
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
|
||||
<script src="js/libs/jquery.lettering.js"></script>
|
||||
<script src="js/libs/mustache.js"></script>
|
||||
|
||||
|
||||
<script src="js/libs/quantize.js"></script>
|
||||
<script src="js/color-thief.js"></script>
|
||||
|
||||
|
||||
<!-- Using Mustache templating -->
|
||||
<script id='template' type='text/x-mustache'>
|
||||
<!-- Using Mustache for templating -->
|
||||
<script id='image-section-template' type='text/x-mustache'>
|
||||
{{#images}}
|
||||
<div class="imageSection {{class}} ">
|
||||
<div class="imageWrap">
|
||||
<img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
|
||||
</div>
|
||||
<div class="colors">
|
||||
<div class="function dominantColor">
|
||||
<h3>Dominant Color</h3>
|
||||
<div class="swatches"></div>
|
||||
</div>
|
||||
<div class="function medianCutPalette clearfix">
|
||||
<h3>Palette</h3>
|
||||
<div class="swatches"></div>
|
||||
</div>
|
||||
<div class="image-section {{class}} ">
|
||||
<div class="image-wrap">
|
||||
<button class="run-functions-button">Click</button>
|
||||
<img class="target-image" src="{{file}}" data-colorcount="{{colorCount}}" />
|
||||
</div>
|
||||
<div class="color-thief-output-template"></div>
|
||||
</div>
|
||||
{{/images}}
|
||||
</script>
|
||||
|
||||
<script src="index.js"></script>
|
||||
<script id='color-thief-output-template' type='text/x-mustache'>
|
||||
<div class="function get-color">
|
||||
<div class="function-details">
|
||||
<h3 class="function-title">Dominant Color</h3>
|
||||
<div class="function-code">colorThief.getColor()</div>
|
||||
<div class="function-execution-time">20ms</div>
|
||||
</div>
|
||||
<div class="function-output">
|
||||
<div class="swatches"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="function get-palette">
|
||||
<div class="function-details">
|
||||
<h3 class="function-title">Palette</h3>
|
||||
<div class="function-code">colorThief.getPalette()</div>
|
||||
<div class="function-execution-time">20ms</div>
|
||||
</div>
|
||||
<div class="function-output">
|
||||
<div class="swatches"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,19 +2,16 @@
|
||||
* Color Thief v1.0
|
||||
* by Lokesh Dhakar - http://www.lokeshdhakar.com
|
||||
*
|
||||
* Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
||||
* License
|
||||
* -------
|
||||
* Creative Commons Attribution 2.5 License:
|
||||
* http://creativecommons.org/licenses/by/2.5/
|
||||
*
|
||||
* # Thanks
|
||||
* Nick Rabinowitz: Created quantize.js which is used by the median cut palette function. This handles all the hard clustering math.
|
||||
* John Schulz: All around mad genius who helped clean and optimize the code. @JFSIII
|
||||
*
|
||||
* ## Classes
|
||||
* CanvasImage
|
||||
* ## Functions
|
||||
* getDominantColor()
|
||||
* createPalette()
|
||||
* getAverageRGB()
|
||||
* createAreaBasedPalette()
|
||||
* Thanks
|
||||
* ------
|
||||
* Nick Rabinowitz - For creating quantize.js.
|
||||
* John Schulz - For clean up and optimization. @JFSIII
|
||||
* Nathan Spady - For adding drag and drop support to the demo page.
|
||||
*
|
||||
* Requires jquery and quantize.js.
|
||||
*/
|
||||
@@ -30,12 +27,12 @@ var CanvasImage = function (image) {
|
||||
// If jquery object is passed in, get html element
|
||||
imgEl = (image.jquery) ? image[0] : image;
|
||||
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
||||
document.body.appendChild(this.canvas);
|
||||
|
||||
this.width = this.canvas.width = imgEl.width;
|
||||
this.width = this.canvas.width = imgEl.width;
|
||||
this.height = this.canvas.height = imgEl.height;
|
||||
|
||||
this.context.drawImage(imgEl, 0, 0, this.width, this.height);
|
||||
@@ -62,19 +59,19 @@ CanvasImage.prototype.removeCanvas = function () {
|
||||
};
|
||||
|
||||
|
||||
var ColorThief = function () {};
|
||||
|
||||
/*
|
||||
* getDominantColor(sourceImage)
|
||||
* getColor(sourceImage)
|
||||
* returns {r: num, g: num, b: num}
|
||||
*
|
||||
* Use the median cut algorithm provided by quantize.js to cluster similar
|
||||
* colors and return the base color from the largest cluster. */
|
||||
function getDominantColor(sourceImage) {
|
||||
|
||||
var palette = createPalette(sourceImage, 5);
|
||||
var dominant = palette[0];
|
||||
|
||||
return dominant;
|
||||
}
|
||||
ColorThief.prototype.getColor = function(sourceImage) {
|
||||
var palette = this.getPalette(sourceImage, 5);
|
||||
var dominantColor = palette[0];
|
||||
return dominantColor;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
@@ -86,13 +83,13 @@ function getDominantColor(sourceImage) {
|
||||
*
|
||||
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
||||
*/
|
||||
function createPalette(sourceImage, colorCount) {
|
||||
ColorThief.prototype.getPalette = function(sourceImage, colorCount) {
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage),
|
||||
imageData = image.getImageData(),
|
||||
pixels = imageData.data,
|
||||
pixelCount = image.getPixelCount();
|
||||
var image = new CanvasImage(sourceImage);
|
||||
var imageData = image.getImageData();
|
||||
var pixels = imageData.data;
|
||||
var pixelCount = image.getPixelCount();
|
||||
|
||||
// Store the RGB values in an array format suitable for quantize function
|
||||
var pixelArray = [];
|
||||
@@ -112,117 +109,11 @@ function createPalette(sourceImage, colorCount) {
|
||||
|
||||
// Send array to quantize function which clusters values
|
||||
// using median cut algorithm
|
||||
|
||||
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
||||
var cmap = MMCQ.quantize(pixelArray, colorCount);
|
||||
var palette = cmap.palette();
|
||||
|
||||
// Clean up
|
||||
image.removeCanvas();
|
||||
|
||||
return palette;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* getAverageRGB(sourceImage)
|
||||
* returns {r: num, g: num, b: num}
|
||||
*
|
||||
* Add up all pixels RGB values and return average.
|
||||
* Tends to return muddy gray/brown color. Most likely, you'll be better
|
||||
* off using getDominantColor() instead.
|
||||
*/
|
||||
function getAverageRGB(sourceImage) {
|
||||
// Config
|
||||
var sampleSize = 10;
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage),
|
||||
imageData = image.getImageData(),
|
||||
pixels = imageData.data,
|
||||
pixelCount = image.getPixelCount();
|
||||
|
||||
// Reset vars
|
||||
var i = 0,
|
||||
count = 0,
|
||||
rgb = {r:0, g:0, b:0};
|
||||
|
||||
// Loop through every # pixels. (# is set in Config above via the blockSize var)
|
||||
// Add all the red values together, repeat for blue and green.
|
||||
// Last step, divide by the number of pixels checked to get average.
|
||||
while ( (i += sampleSize * 4) < pixelCount ) {
|
||||
// if pixel is mostly opaque
|
||||
if (pixels[i+3] > 125) {
|
||||
++count;
|
||||
rgb.r += pixels[i];
|
||||
rgb.g += pixels[i+1];
|
||||
rgb.b += pixels[i+2];
|
||||
}
|
||||
}
|
||||
|
||||
rgb.r = ~~(rgb.r/count);
|
||||
rgb.g = ~~(rgb.g/count);
|
||||
rgb.b = ~~(rgb.b/count);
|
||||
|
||||
return rgb;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* createAreaBasedPalette(sourceImage, colorCount)
|
||||
* returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
|
||||
*
|
||||
* Break the image into sections. Loops through pixel RGBS in the section and average color.
|
||||
* Tends to return muddy gray/brown color. You're most likely better off using createPalette().
|
||||
*
|
||||
* BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.
|
||||
*
|
||||
*/
|
||||
function createAreaBasedPalette(sourceImage, colorCount) {
|
||||
|
||||
var palette = [];
|
||||
|
||||
// Create custom CanvasImage object
|
||||
var image = new CanvasImage(sourceImage),
|
||||
imageData = image.getImageData(),
|
||||
pixels = imageData.data,
|
||||
pixelCount = image.getPixelCount();
|
||||
|
||||
|
||||
// How big a pixel area does each palette color get
|
||||
var rowCount = Math.round(Math.sqrt(colorCount)),
|
||||
colCount = rowCount,
|
||||
colWidth = Math.round(image.width / colCount),
|
||||
rowHeight = Math.round(image.height / rowCount);
|
||||
|
||||
// Loop through pixels section by section.
|
||||
// At the end of each section, push the average rgb color to palette array.
|
||||
for (var i = 0, vertOffset; i<rowCount; i++) {
|
||||
vertOffset = i * rowHeight * image.width * 4;
|
||||
|
||||
for (var j = 0, horizOffset, rgb, count; j<colCount; j++) {
|
||||
horizOffset = j * colWidth * 4;
|
||||
rgb = {r:0, g:0, b:0};
|
||||
count = 0;
|
||||
|
||||
for (var k = 0, rowOffset; k < rowHeight; k++) {
|
||||
rowOffset = k * image.width * 4;
|
||||
|
||||
for (var l = 0, offset; l < colWidth; l++) {
|
||||
offset = vertOffset + horizOffset + rowOffset + (l * 4);
|
||||
rgb.r += pixels[offset];
|
||||
rgb.g += pixels[offset+1];
|
||||
rgb.b += pixels[offset+2];
|
||||
count++;
|
||||
}
|
||||
|
||||
}
|
||||
rgb.r = ~~(rgb.r/count);
|
||||
rgb.g = ~~(rgb.g/count);
|
||||
rgb.b = ~~(rgb.b/count);
|
||||
palette.push(rgb);
|
||||
}
|
||||
}
|
||||
|
||||
return palette;
|
||||
}
|
||||
}
|
||||
347
sass/app.sass
347
sass/app.sass
@@ -2,67 +2,46 @@
|
||||
@import "compass/css3"
|
||||
@import "compass/utilities/general/clearfix"
|
||||
|
||||
$lightGray: #eeeeee
|
||||
$blue: #0096df
|
||||
$green: #00bfa8
|
||||
$yellow: #fdf485
|
||||
$orange: #ff8000
|
||||
$red: #ff4040
|
||||
|
||||
$color: #aaa
|
||||
$bgColor: #444
|
||||
|
||||
$headingColor: #444
|
||||
$linkColor: $green
|
||||
|
||||
$fontSize: 18px
|
||||
$columnWidth: 600px
|
||||
|
||||
// $codeColor: #eff
|
||||
// $inputColor: #555
|
||||
// $selectionColor: $yellow
|
||||
|
||||
// $altColor: lighten($color, 30%)
|
||||
// $altCommentsColor: lighten($color, 10%)
|
||||
|
||||
|
||||
body, input, textarea
|
||||
margin: 40px
|
||||
color: #888
|
||||
background: #222
|
||||
font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif
|
||||
-wbkite-font-smoothing: antialiased
|
||||
|
||||
color: $color
|
||||
background: $bgColor
|
||||
font-size: $fontSize
|
||||
font-family: "Karla", "lucida grande", sans-serif
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: white
|
||||
font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif
|
||||
line-height: 1em
|
||||
font-weight: 600
|
||||
line-height: 1.2em
|
||||
font-weight: 500
|
||||
margin-bottom: 0.5em
|
||||
|
||||
h1
|
||||
font-size: 72px
|
||||
line-height: 0.5em
|
||||
margin-bottom: 0.3em
|
||||
small
|
||||
font-size: 20px
|
||||
span
|
||||
+transition( color 1s)
|
||||
&:hover
|
||||
.char1
|
||||
+transition( color .2s)
|
||||
color: red
|
||||
.char2
|
||||
+transition( color .2s .1s)
|
||||
color: orange
|
||||
.char3
|
||||
+transition( color .2s .2s)
|
||||
color: yellow
|
||||
.char4
|
||||
+transition( color .2s .3s)
|
||||
color: green
|
||||
.char5
|
||||
+transition( color .2s .4s)
|
||||
color: blue
|
||||
.char6
|
||||
+transition( color .2s .5s)
|
||||
color: indigo
|
||||
.char7
|
||||
+transition( color .2s .6s)
|
||||
color: violet
|
||||
.char8
|
||||
+transition( color .2s .7s)
|
||||
color: red
|
||||
.char9
|
||||
+transition( color .2s .8s)
|
||||
color: orange
|
||||
.char10
|
||||
+transition( color .2s .9s)
|
||||
color: yellow
|
||||
.char11
|
||||
+transition( color .2s 1s)
|
||||
color: green
|
||||
|
||||
h2
|
||||
font-size: 40px
|
||||
font-size: 36px
|
||||
line-height: 1.2em
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
font-size: 16px
|
||||
@@ -74,15 +53,161 @@ h4
|
||||
margin-bottom: 1.25em
|
||||
|
||||
p
|
||||
line-height: 1.5em
|
||||
margin-bottom: 1.25em
|
||||
|
||||
|
||||
strong
|
||||
font-weight: bold
|
||||
|
||||
/* Drag and Drop area */
|
||||
|
||||
/* Links */
|
||||
a
|
||||
color: $linkColor
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: lighten($linkColor, 30%)
|
||||
|
||||
/* -- Layout ------------------------------------------------------------------ */
|
||||
|
||||
.wrapper
|
||||
text-align: center
|
||||
max-width: $columnWidth
|
||||
margin: 0 auto
|
||||
|
||||
.description
|
||||
max-width: 450px
|
||||
margin-right: auto
|
||||
margin-left: auto
|
||||
|
||||
.image-section
|
||||
margin-bottom: 80px
|
||||
background: darken($bgColor, 10%)
|
||||
.image-wrap
|
||||
position: relative
|
||||
background: #444
|
||||
// background: url(../img/dark_checkered_bg.png)
|
||||
|
||||
.target-image
|
||||
width: 100%
|
||||
|
||||
.run-functions-button
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 50%
|
||||
width: 100px
|
||||
height: 100px
|
||||
margin-top: -50px
|
||||
margin-left: -50px
|
||||
border: none
|
||||
+border-radius(50%)
|
||||
color: darken($yellow, 50%)
|
||||
background-color: $yellow
|
||||
font-size: 24px
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: lighten($yellow, 10%)
|
||||
color: darken($yellow, 45%)
|
||||
&:active
|
||||
+scale(0.9)
|
||||
|
||||
.color-thief-output
|
||||
margin-top: 20px
|
||||
|
||||
.function
|
||||
clear: left
|
||||
margin-bottom: 10px
|
||||
+pie-clearfix
|
||||
|
||||
.swatch
|
||||
width: 60px
|
||||
height: 30px
|
||||
margin-right: 2px
|
||||
background: #dddddd
|
||||
float: left
|
||||
+transition(scale .5s)
|
||||
&:hover
|
||||
+transition(none)
|
||||
+scale(1.1, 1.1)
|
||||
+box-shadow( 0 1px 10px black)
|
||||
|
||||
/* Hardcoding the offset for the FB icon example */
|
||||
.fbIcon .imageWrap .targetImage
|
||||
+border-radius(0)
|
||||
position: relative
|
||||
top: 142px
|
||||
left: 192px
|
||||
|
||||
canvas
|
||||
display: none
|
||||
|
||||
/* -- Animated logo ------------------------------------------------------------------ */
|
||||
h1
|
||||
font-size: 72px
|
||||
line-height: 0.5em
|
||||
margin-bottom: 0.3em
|
||||
small
|
||||
font-size: 20px
|
||||
|
||||
.char1
|
||||
+transition( color .1s)
|
||||
.char2
|
||||
+transition( color .1s .05s)
|
||||
.char3
|
||||
+transition( color .1s .1s)
|
||||
.char4
|
||||
+transition( color .1s .15s)
|
||||
.char5
|
||||
+transition( color .1s .2s)
|
||||
|
||||
.char7
|
||||
+transition( color .1s .3s)
|
||||
.char8
|
||||
+transition( color .1s .35s)
|
||||
.char9
|
||||
+transition( color .1s .4s)
|
||||
.char10
|
||||
+transition( color .1s .45s)
|
||||
.char11
|
||||
+transition( color .1s .5s)
|
||||
&:hover
|
||||
.char1
|
||||
+transition( color .1s)
|
||||
color: $red
|
||||
.char2
|
||||
+transition( color .1s .05s)
|
||||
color: $orange
|
||||
.char3
|
||||
+transition( color .1s .1s)
|
||||
color: $yellow
|
||||
.char4
|
||||
+transition( color .1s .15s)
|
||||
color: $green
|
||||
.char5
|
||||
+transition( color .1s .2s)
|
||||
color: $blue
|
||||
|
||||
.char7
|
||||
+transition( color .1s .3s)
|
||||
color: $red
|
||||
.char8
|
||||
+transition( color .1s .35s)
|
||||
color: $orange
|
||||
.char9
|
||||
+transition( color .1s .4s)
|
||||
color: $yellow
|
||||
.char10
|
||||
+transition( color .1s .45s)
|
||||
color: $green
|
||||
.char11
|
||||
+transition( color .1s .5s)
|
||||
color: $blue
|
||||
|
||||
|
||||
/* -- Drag and drop ------------------------------------------------------------------ */
|
||||
|
||||
.drag-and-drop
|
||||
display: none
|
||||
|
||||
.dropZone
|
||||
width: 900px
|
||||
height: 200px
|
||||
margin-bottom: 60px
|
||||
background: url("../img/drag_placeholder.png")
|
||||
@@ -92,100 +217,18 @@ strong
|
||||
display: none
|
||||
.targetImage
|
||||
// width: 100%
|
||||
|
||||
|
||||
/* Forms */
|
||||
input
|
||||
&[type=text], &[type=password]
|
||||
background: #fafafa
|
||||
+box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
||||
border: 1px solid #dddddd
|
||||
color: #888888
|
||||
+border-radius(4px)
|
||||
|
||||
textarea
|
||||
background: #fafafa
|
||||
+box-shadow( inset 0 1px 1px rgba(0, 0, 0, 0.1))
|
||||
border: 1px solid #dddddd
|
||||
color: #888888
|
||||
+border-radius(4px)
|
||||
|
||||
input[type=text]:focus
|
||||
color: #373737
|
||||
|
||||
textarea
|
||||
&:focus
|
||||
color: #373737
|
||||
padding-left: 3px
|
||||
width: 98%
|
||||
|
||||
input[type=text]
|
||||
padding: 3px
|
||||
|
||||
|
||||
/* Links */
|
||||
a
|
||||
color: #09a1ec
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: #7fd2fa
|
||||
|
||||
#container
|
||||
width: 900px
|
||||
margin: 0 auto
|
||||
|
||||
header
|
||||
padding-bottom: 40px
|
||||
text-align: center
|
||||
width: 600px
|
||||
margin: 0 auto
|
||||
|
||||
.medianCutPalette h3
|
||||
margin-top: 20px
|
||||
|
||||
.imageSection
|
||||
margin-bottom: 80px
|
||||
background: #111111
|
||||
+border-radius(10px)
|
||||
+pie-clearfix
|
||||
.imageWrap
|
||||
+border-left-radius(10px)
|
||||
width: 400px
|
||||
height: 300px
|
||||
float: left
|
||||
margin-right: 20px
|
||||
background: url(../img/dark_checkered_bg.png)
|
||||
overflow: hidden
|
||||
.colors
|
||||
margin-top: 20px
|
||||
width: 400px
|
||||
float: left
|
||||
.function
|
||||
clear: left
|
||||
margin-bottom: 10px
|
||||
+pie-clearfix
|
||||
.swatches .swatch
|
||||
width: 40px
|
||||
height: 20px
|
||||
margin-right: 2px
|
||||
background: #dddddd
|
||||
float: left
|
||||
+transition( all .5s)
|
||||
&:hover
|
||||
+transition( none)
|
||||
+scale(1.2, 1.2)
|
||||
+box-shadow( 0 1px 10px black)
|
||||
&:first-child
|
||||
+border-left-radius(4px)
|
||||
&:last-child
|
||||
+border-right-radius(4px)
|
||||
|
||||
/* Hardcoding the offset for the FB icon example
|
||||
.fbIcon .imageWrap .targetImage
|
||||
+border-radius(0)
|
||||
position: relative
|
||||
top: 142px
|
||||
left: 192px
|
||||
|
||||
canvas
|
||||
display: none
|
||||
@media only screen and (max-width : 480px)
|
||||
body
|
||||
margin: 40px 0
|
||||
font-size: $fontSize - 4
|
||||
.intro
|
||||
padding-left: 20px
|
||||
padding-right: 20px
|
||||
h1
|
||||
font-size: 48px // from 72px
|
||||
h2
|
||||
font-size: 24px // from 40px
|
||||
h3
|
||||
font-size: 14px // from 16px
|
||||
|
||||
Reference in New Issue
Block a user