Permalink
Browse files

style

  • Loading branch information...
1 parent 7ee724f commit 77a54ab219e726a52901aa4b8fbb384d5aacf852 @jamland jamland committed Mar 30, 2012
Showing with 60 additions and 13 deletions.
  1. BIN images/ajax-loader.gif
  2. BIN images/ajax-loader.png
  3. +46 −10 index.php
  4. +14 −3 style.css
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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
@@ -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 {

0 comments on commit 77a54ab

Please sign in to comment.