Permalink
Browse files

style

  • Loading branch information...
jamland committed Mar 11, 2012
1 parent 9d31f6d commit a9f26c67811bb5d6366b9b48d09b37bd274f0565
View
@@ -0,0 +1,6 @@
+
+.DS_Store
+
+config.ini
+
+config.ini
View
Binary file not shown.
View
Binary file not shown.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
122 index.php
@@ -1,36 +1,70 @@
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
-<script type="text/javascript"
- src="https://www.google.com/jsapi?key=ABQIAAAAhes0f80sBcwL-h5xCNkkgxQBmiBpQeSpIciQPfZ5Ss-a60KXIRQOVvqzsNpqzhmG9tjky_5rOuaeow"></script>
-<script type="text/javascript">google.load('jquery', '1');
-google.load('jqueryui', '1'); </script>
-<head></head>
+<head>
+ <link rel="icon" href="http://www.iron.io/favicon.ico">
+ <link rel="stylesheet" href="style.css">
+ <link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
+
+ <style type="text/css" media="screen">
+ @font-face {
+ font-family: 'Conv_gillsans';
+ src: url('fonts/gillsans.eot');
+ src: local(''), url('fonts/gillsans.woff') format('woff'), url('fonts/gillsans.ttf') format('truetype'), url('fonts/gillsans.svg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ </style>
+
+ <script type="text/javascript"
+ src="https://www.google.com/jsapi?key=ABQIAAAAhes0f80sBcwL-h5xCNkkgxQBmiBpQeSpIciQPfZ5Ss-a60KXIRQOVvqzsNpqzhmG9tjky_5rOuaeow"></script>
+ <script type="text/javascript">google.load('jquery', '1');
+ google.load('jqueryui', '1'); </script>
+</head>
<body>
-<table class="sample">
-<tr>
-<td VALIGN="top">
-<h3>Add picture via posting url to IronMQ</h3>
-<br/>
-$ironmq = new IronMQ('config.ini');<br/>
-$ironmq->postMessage("input_queue", array("body" => $url_to_picture));<br/>
-<h3>Or add url to pic in form below</h3>
-<form action="/mq/postMessage.php" id="sendMessageForm">
- <input id = "pic_url" type="text" name="url" placeholder="Search..."/>
- <input type="submit" value="Add picture"/>
-</form>
-<div id="result"></div>
+ <div class="gears-bg"></div>
+
+ <header>
+ This page shows how you can easly processing images with IronMQ and IronWorker in background!
+ </header>
-</td>
-<td VALIGN="top">
-<h3>List of pictures pushed to workers</h3>
-<div id="input_queue"></div>
-</td>
-<td VALIGN="top">
-<h3>List of processed pictures</h3>
-<div id="output_queue"></div>
-</td>
-</table>
+ <section id="steps">
+ <div id="step-1" class="transform-step">
+ <h2 style="font-size: 14px;line-height: 1.2em;">Add picture via posting url to IronMQ</h2>
+
+ <code>
+ <pre>
+$ironmq = new IronMQ('config.ini');
+$ironmq->postMessage("input_queue",
+ array("body" => $url_to_picture));</pre>
+ </code>
+
+ <div id="upload-form">
+ <h3>Or add url to pic in form below</h3>
+ <form action="/mq/postMessage.php" id="sendMessageForm">
+ <input id = "pic_url" type="text" name="url" placeholder="Search..."/>
+ <input type="submit" value="Add picture"/>
+ </form>
+ <small>Or even simply choose one from our set</small>
+ </div>
+
+ <div id="result">Message posted</div>
+ </div>
+ <div class="box-connector"></div>
+ <div id="step-2" class="transform-step">
+ <h2>List of pictures pushed to workers</h2>
+ <div id="input_queue"></div>
+ </div>
+ <div class="box-connector"></div>
+ <div id="step-3" class="transform-step">
+ <h2>List of processed pictures</h2>
+ <div id="output_queue"></div>
+ </div>
+ </section>
+
+ <footer>
+ <a href="http://iron.io" title="Messaging and Background Processing for Cloud Apps"><img src="http://www.iron.io/assets/resources/ironio-badge-red.png" alt="Iron.io Badge" /></a>
+ </footer>
<script>
function queue_worker(data)
@@ -64,40 +98,14 @@ function queue_worker(data)
/* Send the data using post and put the results in a div */
$.post(url, { url:term },
function (data) {
- $("#result").empty().append(data);
+ $("#result").hide().empty().append(data).fadeIn(200, function(){
+ $(this).delay(1000).fadeOut(2000);
+ });
}
);
});
});
</script>
-<style type="text/css">
-table.sample {
- border-width: 1px;
- border-spacing: 0px;
- border-style: none;
- border-color: gray;
- border-collapse: collapse;
- background-color: white;
-}
-table.sample th {
- border-width: 1px;
- padding: 1px;
- border-style: inset;
- border-color: gray;
- background-color: white;
- -moz-border-radius: ;
-}
-table.sample td {
- width: 300;
- align: center;
- border-width: 1px;
- padding: 1px;
- border-style: inset;
- border-color: gray;
- background-color: white;
- -moz-border-radius: ;
-}
-</style>
</body>
Oops, something went wrong.

0 comments on commit a9f26c6

Please sign in to comment.