diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/button.js | 17 | ||||
| -rw-r--r-- | client/colors.less | 51 | ||||
| -rw-r--r-- | client/templates/photos.html | 23 |
3 files changed, 60 insertions, 31 deletions
diff --git a/client/button.js b/client/button.js index 35f7267..93bc6c6 100644 --- a/client/button.js +++ b/client/button.js @@ -55,16 +55,13 @@ function animate() { $('div#dominant1').css('background', 'rgba(' + palette[0][0] + ',' + palette[0][1] + ',' + palette[0][2] + ',1)'); $('div#dominant2').css('background', 'rgba(' + palette[1][0] + ',' + palette[1][1] + ',' + palette[1][2] + ',1)'); - $('h5#dominant1').text('#' - + palette[0][0].toString(16).toUpperCase() - + palette[0][1].toString(16).toUpperCase() - + palette[0][2].toString(16).toUpperCase() - ) - $('h5#dominant2').text('#' - + palette[1][0].toString(16).toUpperCase() - + palette[1][1].toString(16).toUpperCase() - + palette[1][2].toString(16).toUpperCase() - ) + $('ol#dominant1 li.r').text('R-' + palette[0][0].toString(16).toUpperCase()); + $('ol#dominant1 li.g').text('G-' + palette[0][1].toString(16).toUpperCase()); + $('ol#dominant1 li.b').text('B-' + palette[0][2].toString(16).toUpperCase()); + + $('ol#dominant2 li.r').text('R-' + palette[1][0].toString(16).toUpperCase()); + $('ol#dominant2 li.g').text('G-' + palette[1][1].toString(16).toUpperCase()); + $('ol#dominant2 li.b').text('B-' + palette[1][2].toString(16).toUpperCase()); $('div.dominants').show(); }, delay + 2000); diff --git a/client/colors.less b/client/colors.less index 9c47dcd..3dce1dc 100644 --- a/client/colors.less +++ b/client/colors.less @@ -156,11 +156,14 @@ body { li.step { flex: 0 0 auto; display: inline; - padding-left: 20px; - padding-right: 20px; - color: #999; + margin-left: 20px; + margin-right: 20px; + padding-bottom: 5px; + color: #BEBEBE; + font-family: 'Cutive', serif; &.active { - color: #333; + color: #600000; + border-bottom: 2px #600000 solid; } } } @@ -179,10 +182,6 @@ body { margin: 3px 8px; width: 72px; height: 92px; - div.title { - color: #999; - text-align: center; - } img { height: 72px; width: 72px; @@ -191,38 +190,54 @@ body { width: 72px; height: 72px; } + div.title { + color: #999; + text-align: center; + font-family: 'Cutive', serif; + } } } div.dominants { margin: 0 auto; width: 305px; + text-align: center; div.dominant { - text-align: center; flex: 0 0 auto; margin-top: 45px; h3 { - color: #2636F9; + color: black; font-size: 1.2em; } div.color { background-color: red; height: 50px; } - h5 { - color: #808080; + ol { + display: block; + text-align: center; + list-style: none; + padding-left: 0px; + font-family: 'Cutive', serif; + color: #6D6D6D; + margin-top: 6px; + li { + display: inline; + margin-left: 7px; + margin-right: 7px; + } } } button.continue { - font-size: 1.2em; - width: 100%; + font-size: 2.8em; + font-weight: bold; margin-top: 45px; - color: #2636F9; - padding: 7px 35px; + color: black; background-color: white; - border: 1px #2636F9 solid; + border: 0px; + border-bottom: 6px black solid; &:hover, &:active { color: white; - background-color: #2636F9; + background-color: black; } } } diff --git a/client/templates/photos.html b/client/templates/photos.html index aa0c3c4..bfcb6d9 100644 --- a/client/templates/photos.html +++ b/client/templates/photos.html @@ -14,12 +14,20 @@ <div class="dominant"> <h3>Dominant color #1</h3> <div id="dominant1" class="color"></div> - <h5 id="dominant1">#AABBCC</h5> + <ol id="dominant1"> + <li class="r">R-XX</li> + <li class="g">G-XX</li> + <li class="b">B-XX</li> + </ol> </div> <div class="dominant"> <h3>Dominant color #2</h3> <div id="dominant2" class="color"></div> - <h5 id="dominant2">#AABBCC</h5> + <ol id="dominant2"> + <li class="r">R-XX</li> + <li class="g">G-XX</li> + <li class="b">B-XX</li> + </ol> </div> <button class="continue">Continue</button> </div> @@ -28,8 +36,17 @@ <div class="final-dominants"> <div id="dominant1" class="color"></div> <h5 id="dominant1">#AABBCC</h5> + <ol id="dominant1"> + <li class="r">R-XX</li> + <li class="g">G-XX</li> + <li class="b">B-XX</li> + </ol> <div id="dominant2" class="color"></div> - <h5 id="dominant2">#AABBCC</h5> + <ol id="dominant2"> + <li class="r">R-XX</li> + <li class="g">G-XX</li> + <li class="b">B-XX</li> + </ol> </div> <div class="share" style="display: none;"> <p>Now what...?</p> |