{% 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> <img src="http://robohash.org/YOUR-TEXT.png"><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> <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>