diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/button.js | 1 | ||||
| -rw-r--r-- | client/colors.less | 42 | ||||
| -rw-r--r-- | client/effects.js | 6 | ||||
| -rw-r--r-- | client/templates/photos.html | 10 |
4 files changed, 46 insertions, 13 deletions
diff --git a/client/button.js b/client/button.js index dd73e04..cdeed52 100644 --- a/client/button.js +++ b/client/button.js @@ -114,6 +114,7 @@ function animate2() { _.delay(function() { $('li#step7').removeClass('active'); $('li#step8').addClass('active'); + $('h2.title').html('Done!<div class="sec">This is your icon!</div>'); $('div.final div.final-dominants').hide(); $('div.final div.share').show(); }, delay + 2000); diff --git a/client/colors.less b/client/colors.less index db27c37..583ae7b 100644 --- a/client/colors.less +++ b/client/colors.less @@ -141,14 +141,41 @@ body { } } } + h2 { margin-top: 0px; - margin-bottom: 90px; + margin-bottom: 20px; color: #2636F9; font-size: 2.3em; font-weight: bold; text-align: center; + div.sec { + color: #333; + } + } + + svg.spinner { + display: block; + margin: 0 auto; + margin-top: 20px; + } + + .rect { + fill: none; + stroke-width: 8px; + stroke: #2636F9; + stroke-dasharray: 40; + stroke-dashoffset: 50%; + + animation: movedash 1.5s forwards 0s infinite; + } + + @keyframes movedash { + to { + stroke-dashoffset: 250%; + } } + div.photos { display: -webkit-flex; display: flex; @@ -160,20 +187,19 @@ body { margin: 0 auto; div.photo { margin: 3px 8px; - width: 54px; - height: 74px; + width: 72px; + height: 92px; div.title { color: #333; - font-size: 0.7em; text-align: center; } img { - height: 54px; - width: 54px; + height: 72px; + width: 72px; } canvas { - width: 54px; - height: 54px; + width: 72px; + height: 72px; } } } diff --git a/client/effects.js b/client/effects.js index 934eb76..ac10eb9 100644 --- a/client/effects.js +++ b/client/effects.js @@ -6,7 +6,7 @@ Effects = (function() { var raster = new paper.Raster('img-' + id); raster.visible = false; - var gridSize = 6; + var gridSize = 8; var gridDim = 9; var cols = []; @@ -77,7 +77,7 @@ Effects = (function() { p.setup(canvas); // params - var gridSize = 6; + var gridSize = 8; var gridDim = 9; // fetch the new colors @@ -150,7 +150,7 @@ Effects = (function() { p.setup(canvas); // params - var gridSize = 6; + var gridSize = 8; var gridDim = 9; var p1 = new paper.Color(palette[0][0] / 256, palette[0][1] / 256, palette[0][2] / 256); diff --git a/client/templates/photos.html b/client/templates/photos.html index e2a8b9e..fae6e20 100644 --- a/client/templates/photos.html +++ b/client/templates/photos.html @@ -5,7 +5,13 @@ {{> step}} {{/each}} </ol> - <h2 class="title">Processing...</h2> + <h2 class="title"> + Processing... + <svg class="spinner" width="20" height="20" viewbox="0 0 40 40"> + <!-- <rect width="40" height="40" class="rect" /> <- this looks buggy in retina safari --> + <polygon points="0 0 0 40 40 40 40 0" class="rect" /> + </svg> + </h2> <!-- <button class="pixelate btn btn-default">Pixelate</button> <button class="color btn btn-default">Color</button> <button class="average btn btn-default">Average</button> --> @@ -36,7 +42,7 @@ <h5>#AABBCC</h5> </div> <div class="share" style="display: none;"> - <p>This is your icon! Now what...?</p> + <p>Now what...?</p> <button class="share-instagram">Share on Instagram</button> <button class="share-facebook">Share on Facebook</button> <button class="share-save">Save to gallery</button> |