{% import random,string %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slate - Landing Page</title>
<link href="/static/css/main.css" rel="stylesheet" type="text/css" />
<link href="/static/css/prettyPhoto.css" rel="stylesheet" type="text/css" />



<!-- JavaScript Files -->

<script src="/static/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/twitter.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/tipsy.js" type="text/javascript" charset="utf-8"></script>


<!-- *************************************************************************
*********************  THIS IS THE PRETTY PHOTO JS  **************************
************************************************************************** -->

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#wrapper a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook',slideshow:5000, autoplay_slideshow: true});
		});
		</script>
        
<!-- *************************************************************************
*****************TWITTER FEED CHANGE THE USERNAME HERE!   ********************
************************************************************************** -->

<script type='text/javascript'>
    $(document).ready(function(){
        $(".tweet").tweet({
            username: "robohash",
            join_text: "auto",
            avatar_size: 0,
            count: 1,
            auto_join_text_default: "we said,", 
            auto_join_text_ed: "we",
            auto_join_text_ing: "we were",
            auto_join_text_reply: "we replied to",
            auto_join_text_url: "we were checking out",
            loading_text: "loading tweets..."
        });
    });
</script>


<!-- *************************************************************************
*************************  SCROLL TO TOP SCRIPT  *****************************
************************************************************************** -->

<script type='text/javascript'>
$(document).ready(function(){
	$(".scroll").click(function(event){
		//prevent the default action for the click event
		event.preventDefault();

		//get the full url - like mysitecom/index.htm#home
		var full_url = this.href;

		//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
		var parts = full_url.split("#");
		var trgt = parts[1];

		//get the top offset of the target anchor
		var target_offset = $("#"+trgt).offset();
		var target_top = target_offset.top;

		//goto that anchor by setting the body scroll top to anchor top
		$('html, body').animate({scrollTop:target_top}, 800);
	});
});
</script>


</head>

<body>

<!-- *************************************************************************
*************************  TIPSY SCRIPT LEAVE HERE!  *************************
************************************************************************** -->

      <script type='text/javascript'>
  $(function() {
    
    $('#example-1').tipsy();
    
    $('#north').tipsy({gravity: 'n'});
    $('#south').tipsy({gravity: 's'});
    $('#east').tipsy({gravity: 'e'});
    $('#west').tipsy({gravity: 'w'});
    
    $('#auto-gravity').tipsy({gravity: $.fn.tipsy.autoNS});
    
    $('.fade').tipsy({fade: true});
    
    $('#example-custom-attribute').tipsy({title: 'id'});
    $('#example-callback').tipsy({title: function() { return this.getAttribute('original-title').toUpperCase(); } });
    $('#example-fallback').tipsy({fallback: "?" });
    
    $('#example-html').tipsy({html: true });
    
  });
</script>

<!-- *************************************************************************
******************************  HEADER SECTION  ******************************
************************************************************************** -->

<!-- start of header full width-->
<div id="header_fullwidth">

<!-- start of header-->
<div id="header">

<!-- start of top logo -->
<div id="top_logo">
	

  <img src="/static/img/top_logo.png" width="375" height="151" alt="logo" id="toc"/></div><!-- end of top logo -->

</div><!-- end of header-->

</div><!-- end of header full width-->


<!-- *************************************************************************
******************************  MAIN PAGE WRAPPER  ***************************
************************************************************************** -->

<!-- start of page wrapper -->
<div id="wrapper">

<!-- *************************************************************************
******************************  INTRO SECTION  *******************************
************************************************************************** -->

<!-- start of content section -->
<div class="intro_section">

<h1>Generate Unique images from any text </h1>

<p class="intro_text">Robohash is a easy web service that makes it easy to provide unique, robot/alien/monster/whatever images for any text.<br>
 Put in any text, such as IP address, email, filename, userid, or whatever else you like, and get back a pretty image for your site. <br><br> With hundreds of millions of variations, Robohash is the among the leading robot-based hashing tools on the web. </p>

</div><!-- end of content section -->



<!-- *************************************************************************
******************************  IPAD SECTION  ******************************
************************************************************************** -->

<!-- start of content section -->
<div class="content_section">

<!-- start of left content section -->
<div class="left_content">

  <img src="/{{ip}}.png" alt="You!" class="left" />
  
</div><!-- end of left content section -->

<!-- start of right content section -->
<div class="right_content">

 <div class="section_title">How cool is this?</div>
 
 <p>That guy to your left there? He was specially generated <i>Just for you</i>.<br>
	Try on your phone, and I bet you get someone different! </p>

<!-- 
 <p><a href="#" title="Buy today while we have 20% off!" class="fade"><img src="/static/img/buy_button.png" width="328" height="54" alt="buy now" /></a></p>
  -->
</div><!-- end of right content section -->

</div><!-- end of content section -->

<div class="clear"></div>



<!-- *************************************************************************
******************************  QUOTE SECTION  *******************************
************************************************************************** -->

<!-- start of quotes wrapper -->
<div class="quotes_wrapper">

<!-- start of left quote -->
<div class="left_quote">

<img src="/static/img/star.png" width="33" height="31" alt="1 star" /><img src="/static/img/star.png" width="33" height="31" alt="1 star" /><img src="/static/img/star.png" width="33" height="31" alt="1 star" /><img src="/static/img/star.png" width="33" height="31" alt="1 star" /><img src="/static/img/star.png" width="33" height="31" alt="1 star" /> 

<br />

<span class="large_quote">"Eliminates sources of Human Error."</span>

<br />

<span class="small_quote">Dr. Chandra, RobotCrunch</span>

</div><!-- end of left quote -->

<!-- start of right quote -->
<div class="right_quote">

<img src="/static/img/indented_star.png" width="27" height="25" alt="1 star" /><img src="/static/img/indented_star.png" width="27" height="25" alt="1 star" /><img src="/static/img/indented_star.png" width="27" height="25" alt="1 star" /><img src="/static/img/indented_star.png" width="27" height="25" alt="1 star" /><img src="/static/img/indented_star.png" width="27" height="25" alt="1 star" />

<br />

<span class="large_quote">"Klaatu barada nikto!"</span>

<br />

<span class="small_quote">Gort's Web Emporium</span>

</div><!-- end of right quote -->

</div><!-- end of quotes wrapper -->


<div class="hr"></div>


<!-- *************************************************************************
******************************  GALLERY SECTION  *****************************
************************************************************************** -->

<!-- start of content section -->
<div class="content_section">

 <div class="section_title">Here are five Robots, Randomly generated, Just for you!</div>
 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. </p>
  
  <ul class="gallery">
			{% set c1 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + ".png" %}
			{% set c2 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "1.png" %}
			{% set c3 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "2.png" %}
			{% set c4 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "3.png" %}
			{% set c5 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "4.png" %}
			
			<li><a href="{{c1}}" rel="prettyPhoto[gallery1]" title="This character is awesome, and so are you." class="fade"><img src="{{c1}}" width="150" height="150" alt="Some great title" /></a></li>
			<li><a href="{{c2}}" rel="prettyPhoto[gallery1]" title="I think he thinks you're cute." class="fade"><img src="{{c2}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c3}}" rel="prettyPhoto[gallery1]" title="Any robot you don't click on, we dismantle." class="fade"><img src="{{c3}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c4}}" rel="prettyPhoto[gallery1]" title="Robot tears taste like candy." class="fade"><img src="{{c4}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c5}}" rel="prettyPhoto[gallery1]" title="01010010010011110100001001001111010101000101001100100001!" class="fade"><img src="{{c5}}" width="150" height="150" alt="Some great title" /></a></li>
	</ul>

</div><!-- end of content section -->

<div class="hr"></div>


<!-- *************************************************************************
******************************  GALLERY2 SECTION  *****************************
************************************************************************** -->

<!-- start of content section -->
<div class="content_section">
 
  <p>By appending ?set=set2 to our URL, we are able to generate a whole slew of Random monsters. Here are 5 we picked out for you.  </p>
  
  <ul class="gallery">
			{% set c1 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + ".png?set=set2" %}
			{% set c2 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "1.png?set=set2" %}
			{% set c3 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "2.png?set=set2" %}
			{% set c4 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "3.png?set=set2" %}
			{% set c5 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "4.png?set=set2" %}
			
			<li><a href="{{c1}}" rel="prettyPhoto[gallery1]" title="This character is awesome, and so are you." class="fade"><img src="{{c1}}" width="150" height="150" alt="Some great title" /></a></li>
			<li><a href="{{c2}}" rel="prettyPhoto[gallery1]" title="I think he thinks you're cute." class="fade"><img src="{{c2}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c3}}" rel="prettyPhoto[gallery1]" title="Any robot you don't click on, we dismantle." class="fade"><img src="{{c3}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c4}}" rel="prettyPhoto[gallery1]" title="Robot tears taste like candy." class="fade"><img src="{{c4}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c5}}" rel="prettyPhoto[gallery1]" title="01010010010011110100001001001111010101000101001100100001!" class="fade"><img src="{{c5}}" width="150" height="150" alt="Some great title" /></a></li>
	</ul>

</div><!-- end of content section -->

<div class="hr"></div>


<!-- *************************************************************************
******************************  GALLERY3 SECTION  *****************************
************************************************************************** -->

<!-- start of content section -->
<div class="content_section">
 
  <p>By appending ?set=set3 to our URL, we get back to robots. New, suave, Giant-Head robots </p>
  
  <ul class="gallery">
			{% set c1 = '/' +  ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + ".png?set=set3" %}
			{% set c2 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "1.png?set=set3" %}
			{% set c3 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "2.png?set=set3" %}
			{% set c4 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "3.png?set=set3" %}
			{% set c5 = '/' + ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(5)) + "4.png?set=set3" %}
			
			<li><a href="{{c1}}" rel="prettyPhoto[gallery1]" title="This character is awesome, and so are you." class="fade"><img src="{{c1}}" width="150" height="150" alt="Some great title" /></a></li>
			<li><a href="{{c2}}" rel="prettyPhoto[gallery1]" title="I think he thinks you're cute." class="fade"><img src="{{c2}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c3}}" rel="prettyPhoto[gallery1]" title="Any robot you don't click on, we dismantle." class="fade"><img src="{{c3}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c4}}" rel="prettyPhoto[gallery1]" title="Robot tears taste like candy." class="fade"><img src="{{c4}}" width="150" height="150" alt="Some great title" /></a></li>
            <li><a href="{{c5}}" rel="prettyPhoto[gallery1]" title="01010010010011110100001001001111010101000101001100100001!" class="fade"><img src="{{c5}}" width="150" height="150" alt="Some great title" /></a></li>
	</ul>

</div><!-- end of content section -->

<div class="hr"></div>





<!-- *************************************************************************
******************************  BENEFITS SECTION  ****************************
************************************************************************** -->

<!-- start of content section -->
<div class="content_section">

 <div class="section_title">Robohashes are awesome.</div>

<!-- start of left content section -->
<div class="left_content">

	<!-- ********** BENEFITS ITEM 1 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

  		<img src="/static/img/star_icon.jpg" width="73" height="72" alt="Super Easy to use" class="left"/>
  
  		<!-- start of benefit right -->
  		<div class="benefit_right">
  
  			<span class="benefit_header">Super Easy</span>
  			<p>Anytime you need a Robohash, just embed <br> &ltimg src="http://robohash.org/YOUR-TEXT.png"&gt<br>
			</p>
  		
        </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
    
    <!-- ********** BENEFITS ITEM 2 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

	  <img src="/static/img/report_icon.jpg" width="73" height="72" alt="Supported Formats" class="left"/>
  
  		<!-- start of benefit right -->
  		<div class="benefit_right">
  
  			<span class="benefit_header">Styles of Robot</span>
  			<p>Want a JPG instead? Fine. Want it over HTTPS? FINE! Want it as a bitmap? I think you're nutty. But fine. Just change the URL to request in any format you want.</p>
  		
        </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
    
    <!-- ********** BENEFITS ITEM 3 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

  		<img src="/static/img/tut_icon.jpg" width="73" height="72" alt="Very infrequent murderous rampages." class="left"/>
  
  		<!-- start of benefit right -->
  		<div class="benefit_right">
  
  			<span class="benefit_header">Very Infrequent Rampages</span>
  			<p>Due to Robot caching modules and CDN usage, our robots stay speedy, and only rarely go on murderous rampages. That's a Fact!</p>
  		
      </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
  
  
  </div><!-- end of left content section -->



<!-- start of right content section -->
<div class="right_content">

	<!-- ********** BENEFITS ITEM 1 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

  		<img src="/static/img/share_icon.jpg" width="73" height="72" alt="3 classes to choose from" class="left"/>
  
  		<!-- start of benefit right -->
	  <div class="benefit_right">
  
  			<span class="benefit_header">Multiple designs</span>
  			<p>Want robots from a specific set? Use Robohash.org/Collection1/whatever.png. <br>Try out Collection1, Collection2, Collection3, see which best decorate your site.</p>
  		
        </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
    
    <!-- ********** BENEFITS ITEM 2 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

	  <img src="/static/img/usability_icon.jpg" width="73" height="72" alt="Robots on Vacation" class="left"/>
  
  		<!-- start of benefit right -->
	  <div class="benefit_right">
  
  			<span class="benefit_header">Vacationing Robots</span>
  			<p>Our robots like to travel. If you append ?background=true to your URL, our robots will appear with a random background picture from their travels. </p>
  		
        </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
    
    <!-- ********** BENEFITS ITEM 3 ********** -->
    
    <!-- start of benefit item -->
	<div class="benefit">

	  <img src="/static/img/usability_icon.jpg" width="73" height="72" alt="Robotic Values" class="left"/>
  
  		<!-- start of benefit right -->
	  <div class="benefit_right">
  
  			<span class="benefit_header">Robotic Value</span>
  			<p>Robohash.org robots believe in Family, Warmth, and killing-all-humans. To that end, we provide this service for free <sup><a href="#smallprint" class='fade'>*</a></sup>. </p>
  		
        </div><!-- end of benefit right -->
  
  	</div><!-- end of benefit item -->
  
  </div><!-- end of right content section -->
  
</div><!-- end of content section --> 

<div class="hr"></div>
	
	
	<!-- start of content section -->
	<div class="content_section">

	 <div class="section_title">Everyone needs Robots!</div>
	<p>
	RoboHash.org is here because Robots are funny, and because I needed the algorithm/art anyway for a Super-Awesome new forum I'm working on.</p><p>
	
	You should email me -
	
	<a href="mailto:colin@robohash.org" class="fade" title="I am probably not a robot."> colin@robohash.org</a>
</p><p>
	
	If the bandwidth gets crazy, I might add a [Robohash.org] banner to the bottom of the image. But it'd be super-tasteful.<br>
</p>
	</div><!-- end of content section -->

	<div class="hr"></div>
	

	 
	
	
	
	</div><!-- end of wrapper -->
<!-- *************************************************************************
******************************  FOOTER SECTION  ******************************
************************************************************************** -->


<!-- start of footer wrapper -->
<div id="footer_wrapper">

<!-- start of footer container -->
<div id="footer_container">

<!-- start of footer left -->
<div id="footer_left"> <a href="#top" class="scroll"><img src="bottom_logo.png" width="140" height="55" alt="logo" /></a>
</div><!-- end of footer left -->

<!-- start of footer right -->
<div id="footer_right">

<span class="footer_heading">Twitter</span>&nbsp;&nbsp;<span class="follow"><a href="http://www.twitter.com/robohash" class="fade" title="Clicking on this will replace your cat with a robot.">Follow Us</a></span>

<div class="tweet"></div>

</div><!-- end of footer right -->

</div><!-- end of footer container -->

</div><!-- end of footer wrapper -->


</body>
</html>