2011-07-05 21:09:08 -04:00
{% 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" / >
2011-07-06 02:31:34 -04:00
< title > RoboHash< / title >
2011-07-05 21:09:08 -04:00
< 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" >
2011-07-06 18:14:09 +00:00
< img src = "http://static1.robohash.com/static/img/top_logo.png" width = "375" height = "151" alt = "logo" id = "toc" / > < / div > <!-- end of top logo -->
2011-07-05 21:09:08 -04:00
< / 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" >
2011-07-06 18:14:09 +00:00
< img src = "http://robohash.com/{{ip}}.png" alt = "You!" class = "left" / >
2011-07-05 21:09:08 -04:00
< / div > <!-- end of left content section -->
<!-- start of right content section -->
< div class = "right_content" >
< div class = "section_title" > How cool is this?< / div >
2011-07-06 18:14:09 +00:00
< p > That guy to your left there? He was specially generated from your IP address< i > Just for you< / i > .< br >
2011-07-05 21:09:08 -04:00
Try on your phone, and I bet you get someone different! < / p >
2011-07-06 01:53:19 -04:00
<!--
2011-07-06 18:14:09 +00:00
< p > < a href = "#" title = "Buy today while we have 20% off!" class = "fade" > < img src = "static1.robohash.com/static/img/buy_button.png" width = "328" height = "54" alt = "buy now" / > < / a > < / p >
2011-07-06 01:53:19 -04:00
-->
2011-07-05 21:09:08 -04:00
< / 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" >
2011-07-06 18:14:09 +00:00
< img src = "http://static1.robohash.com/static/img/star.png" width = "33" height = "31" alt = "1 star" / > < img
src="http://static1.robohash.com/static/img/star.png" width="33" height="31" alt="1 star" />< img
src="http://static1.robohash.com/static/img/star.png" width="33" height="31" alt="1 star" />< img
src="http://static1.robohash.com/static/img/star.png" width="33" height="31" alt="1 star" />< img
src="http://static1.robohash.com/static/img/star.png" width="33" height="31" alt="1 star" />
2011-07-05 21:09:08 -04:00
< 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" >
2011-07-06 18:14:09 +00:00
< img src = "http://static1.robohash.com/static/img/indented_star.png" width = "27" height = "25" alt = "1 star" / > < img
src="http://static1.robohash.com/static/img/indented_star.png" width="27" height="25" alt="1 star" />< img
src="http://static1.robohash.com/static/img/indented_star.png" width="27" height="25" alt="1 star" />< img
src="http://static1.robohash.com/static/img/indented_star.png" width="27" height="25" alt="1 star" />< img
src="http://static1.robohash.com/static/img/indented_star.png" width="27" height="25" alt="1 star" />
2011-07-05 21:09:08 -04:00
< 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" >
2011-07-06 01:41:06 -04:00
{% 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" %}
2011-07-05 21:09:08 -04:00
2011-07-06 18:14:09 +00:00
< li > < a href = "http://static1.robohash.com/{{c1}}" rel = "prettyPhoto[gallery1]" title = "This character is
awesome, and so are you." class="fade">< img src = "http://static1.robohash.com/{{c1}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c2}}" rel = "prettyPhoto[gallery1]" title = "I think he thinks you ' re
cute." class="fade">< img src = "http://static1.robohash.com/{{c2}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c3}}" rel = "prettyPhoto[gallery1]" title = "Any robot you don ' t
click on, we dismantle." class="fade">< img src = "http://static1.robohash.com/{{c3}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c4}}" rel = "prettyPhoto[gallery1]" title = "Robot tears taste like
candy." class="fade">< img src = "http://static1.robohash.com/{{c4}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c5}}" rel = "prettyPhoto[gallery1]"
title="01010010010011110100001001001111010101000101001100100001!" class="fade">< img
src="http://static1.robohash.com/{{c5}}" width="150" height="150" alt="Some great title" />< / a > < / li >
2011-07-05 21:09:08 -04:00
< / ul >
< / div > <!-- end of content section -->
< div class = "hr" > < / div >
2011-07-06 01:41:06 -04:00
<!-- *************************************************************************
****************************** 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" %}
2011-07-06 18:14:09 +00:00
< li > < a href = "http://static1.robohash.com/{{c1}}" rel = "prettyPhoto[gallery1]" title = "This character is
awesome, and so are you." class="fade">< img src = "http://static1.robohash.com/{{c1}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c2}}" rel = "prettyPhoto[gallery1]" title = "I think he thinks you ' re
cute." class="fade">< img src = "http://static1.robohash.com/{{c2}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c3}}" rel = "prettyPhoto[gallery1]" title = "Any robot you don ' t
click on, we dismantle." class="fade">< img src = "http://static1.robohash.com/{{c3}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c4}}" rel = "prettyPhoto[gallery1]" title = "Robot tears taste like
candy." class="fade">< img src = "http://static1.robohash.com/{{c4}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c5}}" rel = "prettyPhoto[gallery1]"
title="01010010010011110100001001001111010101000101001100100001!" class="fade">< img
src="http://static1.robohash.com/{{c5}}" width="150" height="150" alt="Some great title" />< / a > < / li >
2011-07-06 01:41:06 -04:00
< / 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" %}
2011-07-06 18:14:09 +00:00
< li > < a href = "http://static1.robohash.com/{{c1}}" rel = "prettyPhoto[gallery1]" title = "This character is
awesome, and so are you." class="fade">< img src = "http://static1.robohash.com/{{c1}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c2}}" rel = "prettyPhoto[gallery1]" title = "I think he thinks you ' re
cute." class="fade">< img src = "http://static1.robohash.com/{{c2}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c3}}" rel = "prettyPhoto[gallery1]" title = "Any robot you don ' t
click on, we dismantle." class="fade">< img src = "http://static1.robohash.com/{{c3}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c4}}" rel = "prettyPhoto[gallery1]" title = "Robot tears taste like
candy." class="fade">< img src = "http://static1.robohash.com/{{c4}}" width = "150" height = "150" alt = "Some great title" / > < / a > < / li >
< li > < a href = "http://static1.robohash.com/{{c5}}" rel = "prettyPhoto[gallery1]"
title="01010010010011110100001001001111010101000101001100100001!" class="fade">< img
src="http://static1.robohash.com/{{c5}}" width="150" height="150" alt="Some great title" />< / a > < / li >
2011-07-06 01:41:06 -04:00
< / ul >
< / div > <!-- end of content section -->
< div class = "hr" > < / div >
2011-07-05 21:09:08 -04:00
<!-- *************************************************************************
****************************** 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 >
2011-07-06 18:14:09 +00:00
< p > Want robots from a specific set? Use Robohash.org/whatever.png?set=set1. < br > Try out Collection1, Collection2, Collection3, see which best decorate your site.< / p >
2011-07-05 21:09:08 -04:00
< / 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 >
2011-07-05 21:31:42 -04:00
< 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 >
2011-07-05 21:09:08 -04:00
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 >
2011-07-05 21:31:42 -04:00
< / p >
2011-07-05 21:09:08 -04:00
< / div > <!-- end of content section -->
< div class = "hr" > < / div >
2011-07-05 21:31:42 -04:00
< / div > <!-- end of wrapper -->
2011-07-05 21:09:08 -04:00
<!-- *************************************************************************
****************************** FOOTER SECTION ******************************
************************************************************************** -->
<!-- start of footer wrapper -->
< div id = "footer_wrapper" >
<!-- start of footer container -->
< div id = "footer_container" >
<!-- start of footer left -->
2011-07-06 02:31:34 -04:00
< div id = "footer_left" >
< p >
Set 1 artwork created by Zikri Kader< br >
Set 2 artwork created by Hrvoje Novakovic. < br >
Set 3 artwork created by Julian Peter Arias.< br >
< br > < br >
All artwork used under license.
< / p >
2011-07-05 21:09:08 -04:00
< / div > <!-- end of footer left -->
<!-- start of footer right -->
< div id = "footer_right" >
2011-07-05 21:31:42 -04:00
< 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 >
2011-07-05 21:09:08 -04:00
< div class = "tweet" > < / div >
< / div > <!-- end of footer right -->
< / div > <!-- end of footer container -->
< / div > <!-- end of footer wrapper -->
< / body >
< / html >
