Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

style

  • Loading branch information...
commit 77a54ab219e726a52901aa4b8fbb384d5aacf852 1 parent 7ee724f
@jamland jamland authored
View
BIN  images/ajax-loader.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  images/ajax-loader.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
56 index.php
@@ -116,7 +116,9 @@
<img src="images/arrow-left.png" alt="">
</div>
- <div id="gears">
+ <img id="send-spinner" src="images/ajax-loader.png" class="spinner">
+
+ <!-- <div id="gears">
<div class="gear-small shadow">
<object data="images/gear-small-shadow.svg" type="image/svg+xml" ></object>
</div>
@@ -129,11 +131,27 @@
<div class="gear-big">
<object data="images/gear-big.svg" type="image/svg+xml" ></object>
</div>
- </div>
+ </div> -->
</div>
<div id="step-3" class="transform-step">
- <img src="images/ajax-loader.gif" class="spinner">
+
+ <div id="gears">
+ <div class="gear-small shadow">
+ <object data="images/gear-small-shadow.svg" type="image/svg+xml" ></object>
+ </div>
+ <div class="gear-small">
+ <object data="images/gear-small.svg" type="image/svg+xml" ></object>
+ </div>
+ <div class="gear-big shadow">
+ <object data="images/gear-big-shadow.svg" type="image/svg+xml" ></object>
+ </div>
+ <div class="gear-big">
+ <object data="images/gear-big.svg" type="image/svg+xml" ></object>
+ </div>
+ </div>
+
+ <!-- <img src="images/ajax-loader.gif" class="spinner"> -->
<h2>And See <b>IronWorker</b> Magick</h2>
<div id="output_queue">
@@ -219,6 +237,11 @@ function urlExists(testUrl) {
}, 100);
});;
+ $('a.smooth-scroll').live('click', function(e){
+ e.preventDefault();
+ $('html, body').animate({scrollTop: $( $(e.target).attr('href') ).offset().top}, 'slow');
+ });
+
setInterval(function () {
$.get('/mq/getMessage.php?queue_name=<?php echo $input_queue_id;?>', null, function (data) {
if (data) {
@@ -241,13 +264,18 @@ function urlExists(testUrl) {
$.get('/mq/getMessage.php?queue_name=<?php echo $output_queue_id;?>', null, function (data) {
if (data) {
- $('#gears').addClass('moving');
- $('#step-3 .spinner').fadeOut(400);
+
+ $('#step-3').css('background-image', 'url(images/step-3-bg.png)');
+ $('#gears').fadeOut(100).removeClass('moving');
+
+ $('#send-spinner').attr('src', "images/ajax-loader.gif");
+ // $('#step-3 .spinner').fadeOut(400);
$('#step-3').animate({'background-position-y': '40%'}, 500);
$('#processed-image').animate({left: '40%', opacity: '1'}, 1500, function(){
$(this).animate({left: '-10%', opacity: '0'}, 1500, function(){
$(this).css('left', '100%');
$('#gears').delay(800).removeClass('moving');
+ $('#send-spinner').attr('src', "images/ajax-loader.png");
$('#flashes').html("Check processed images below. Here is the code we are executing on the image on <a href='https://github.com/rkononov/php_example' target='_blank' title='Check App Sources on Github'>Github</a>");
});
});
@@ -259,9 +287,11 @@ function urlExists(testUrl) {
$('#output_queue').html('');
- $('#output_queue').append('<img src="'+parsed["thumbnail"]+'" >'+
- '<img src="'+parsed["rotated"]+'" >'+
- '<img src="'+parsed["grayscale"]+'" >');
+ // $('#output_queue').append('<img src="'+parsed["thumbnail"]+'" >'+
+ // '<img src="'+parsed["rotated"]+'" >'+
+ // '<img src="'+parsed["grayscale"]+'" >');
+
+ $('#output_queue').html('Completed! <a href="#result-flow" class="smooth-scroll" title="">Check the results &darr;</a>');
$('#output_queue').fadeIn(1000);
@@ -320,11 +350,17 @@ function (data) {
$('#step-1').animate({'margin-right': '0%'}, 1000, 'linear', function(){
$('#step-3').animate({opacity: 1}, 500);
- $('#gears').delay(800).addClass('moving');
+ // $('#gears').delay(800).addClass('moving');
+ $('#send-spinner').attr('src', "images/ajax-loader.gif");
$('#process-image').delay(1200).animate({left: '40%', opacity: '1'}, 1500, function(){
$(this).animate({left: '95%', opacity: '0'}, 1500, function(){
$(this).css('left', '-10%');
- $('#gears').delay(400).removeClass('moving');
+ //$('#gears').delay(400).removeClass('moving');
+ $('#step-3').css('background-image', 'none');
+ $('#gears').fadeIn(300).addClass('moving');
+ $('#output_queue').html('');
+
+ $('#send-spinner').attr('src', "images/ajax-loader.png");
$('#flashes').html('and worker has been started process images...');
});
});
View
17 style.css
@@ -385,9 +385,19 @@ code {
#output_queue {
position: absolute;
- bottom: 30px;
+ bottom: 80px;
left: 50px;
display: none;
+ text-align: center;
+ width: 300px;
+ font-size: 20px;
+ font-family: Conv_gillsans, sans-serif;
+}
+
+#send-spinner {
+ position: absolute;
+ top: 200px;
+ left: 130px;
}
#output_queue img {
@@ -510,8 +520,9 @@ code {
width: 180px;
height: 180px;
position: absolute;
- top: 120px;
- left: 90px;
+ bottom: 90px;
+ left: 110px;
+ display: none;
}
#gears.moving .gear-small {
Please sign in to comment.
Something went wrong with that request. Please try again.