Permalink
Browse files

style

  • Loading branch information...
1 parent e57e72b commit c46d09cb229ce9f88954deafd21d438498761ed9 @jamland jamland committed Mar 26, 2012
Showing with 53 additions and 3 deletions.
  1. +41 −2 index.php
  2. +12 −1 style.css
View
@@ -21,6 +21,34 @@
<script type="text/javascript">google.load('jquery', '1');
google.load('jqueryui', '1'); </script>
<script src="javascripts/jquery.snippet.min.js" type="text/javascript" charset="utf-8"></script>
+
+
+ <style type="text/css" media="screen">
+ #step-1 {
+ margin-right: -34%;
+ margin-left: 33%;
+ z-index: 10;
+ }
+
+ #step-2 {
+ /*opacity: 0;*/
+ }
+
+ #step-3 {
+ opacity: 0;
+ /*margin-left: -30%;*/
+ }
+ </style>
+
+ <script type="text/javascript" charset="utf-8">
+ $(document).ready(function () {
+
+ // $('#step-1').animate({'margin-left': 0}, 1500);
+ // $('#step-1').animate({'margin-right': 0}, 1000);
+ // $('#step-2').animate({opacity: 1}, 300);
+
+ });
+ </script>
</head>
<body>
@@ -33,6 +61,10 @@
</span>
</header>
+ <div id="flashes">
+ After you images uploaded IronWorker grab it from the queue...
+ </div>
+
<section id="steps">
<div id="step-1" class="transform-step">
<h2 style="line-height: 1.2em;">Add picture via posting url to <b>IronMQ</b></h2>
@@ -184,6 +216,7 @@ function queue_worker(data,queue_name) {
$(this).animate({left: '-10%', opacity: '0'}, 1500, function(){
$(this).css('left', '100%');
$('#gears').delay(800).removeClass('moving');
+ $('#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>");
});
});
$('#receive-images img').animate({'opacity': '.75'}, 1500, function(){
@@ -239,11 +272,19 @@ function (data) {
$('#posted-image').slideDown(200, function(){
});
+
+ $('#step-1').animate({'margin-left': '0%'}, 750, 'linear');
+ $('#step-1').animate({'margin-right': '0%'}, 1000, 'linear', function(){
+ $('#step-3').animate({opacity: 1}, 500);
+ });
+
+
$('#gears').delay(800).addClass('moving');
$('#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');
+ $('#flashes').html('and worker has been started process images...');
});
});
$('#send-images img').delay(1500).animate({'opacity': '.75'}, 1000, function(){
@@ -253,8 +294,6 @@ function (data) {
$('#step-3 .spinner').delay(4200).fadeIn(500);
$('#output_queue').delay(1500).fadeOut(500);
- $('body > header span').fadeOut(300).html('2. After you images uploaded IronWorker grab it from the queue...').fadeIn(300);
-
}
);
});
View
@@ -150,7 +150,7 @@ body > header {
color: #CFD6D8;
text-shadow: 0 2px 2px black;
font-size: 21px;
- margin: 0 0 50px;
+ margin: 0;
box-shadow: 0 4px 5px rgba(0,0,0,.5) inset, 0 2px 2px rgba(0,0,0,.5);
border-bottom: 1px solid #222;
position: relative;
@@ -178,9 +178,20 @@ body > footer a img {
margin-right: -4px;
}
+#flashes {
+ background: rgba(244, 216, 72, .75);
+ padding: 15px 0;
+ text-align: center;
+ position: absolute;
+ top: 61px;
+ width: 100%;
+ font-family: Conv_gillsans, sans-serif;
+}
+
#steps {
padding: 0 40px;
min-width: 1000px;
+ margin-top: 80px;
}
.transform-step {

0 comments on commit c46d09c

Please sign in to comment.