Robohash/templates/root.html
2011-07-08 18:32:34 +00:00

585 lines
25 KiB
HTML

{% import random,string %}
<!--
There aren't many robots in the source.. But here's one. Reload for another;)
{{robo}}
Happy? ;)
colin@robohash.org
-->
<!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>RoboHash</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: "",
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="http://static1.robohash.com/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" style="position:relative; top:40px">
<img src="http://robohash.org/{{ip}}.png" alt="You!" class="left" id="idimg" /><br>
<p id='YourIP'>http://robohash.org/{{ip}}.png</p>
</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 from your IP address <i>Just for you.</i></p>
<div class="container" >
<div class="contain-right" style="width:60%; float:right;">
<p>Try on your phone, and I bet you get someone different!</p>
<p>Keep scrolling down to see some more freshly-assembled RoboHashes.</p>
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {submitform(); return false;}
}
document.onkeypress = stopRKey;
</script>
<form id="textform" action="">
<p>Enter any text, and press 'generate': </p><input type='text' name='query' onKeyPress=”return disableEnterKey(event) />
<a href="javascript:;" onclick="submitform();"> generate</a>
</form>
<script type="text/javascript">
function submitform()
{
var x = document.getElementById("idimg");
x.setAttribute("src", "http://static1.robohash.com/" + document.getElementById("textform").query.value );
var y = document.getElementById("YourIP");
y.innerHTML = "http://static1.robohash.com/" + document.getElementById("textform").query.value;
}
</script>
</div>
<div class="contain-left" >
<img src="static/img/down-arrow.png" alt="Scroll down!" height=200 class="left" />
</div>
</div>
</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">
{% set drquotes = ['<span class="large_quote">"Eliminates sources of Human Error."</span><br /><span class="small_quote">Dr. Chandra, RobotCrunch</span>',' <span class="large_quote">"Klaatu barada nikto!"</span><br /><span class="small_quote">Gort\'s Web Emporium</span>','<span class="large_quote">"A huge success!."</span><br /><span class="small_quote">Cave Johnson, Lightroom Labs</span>','<span class="large_quote">" Superior technology and overwhelming brilliance."</span><br /><span class="small_quote">Dr. Thomas Light, Paid Testimonial</span>','<span class="large_quote">"The Ultimate Worker."</span><br /><span class="small_quote">Joh Fredersen, Founder Metropolis.org</span>','<span class="large_quote">"They almost look alive."</span><br /><span class="small_quote">N. Crosby, Nova Robotics </span>','<span class="large_quote">"It looks highly Profitable, I\'m Sure."</span><br /><span class="small_quote">Dr. R. Venture, Super Scientist. Available for parties.</span>','<span class="large_quote">"To make any alteration would prove fatal."</span><br /><span class="small_quote">Dr. Eldon Tyrell, MindHacker.com </span>', '<span class="large_quote">"The robots are all so.. Normal!"</span><br /><span class="small_quote">Joanna Eberhart, Beta tester</span>','<span class="large_quote">"Man shouldn\'t know where their robots come from."</span><br /><span class="small_quote">Dr. N. Soong, FutureBeat </span>'] %}
<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" />
<br />
{{ drquotes[random.randrange(0, len(drquotes)/2) ] }}
</div><!-- end of left quote -->
<!-- start of right quote -->
<div class="right_quote">
<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" />
<br />
{{drquotes[ random.randrange( len(drquotes)/2,len(drquotes) )] }}
</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>
{% set quotes = ['But.. I love you!','Please don\'t leave the site.. When no one\'s here.. It gets dark...', 'Script error on line 148', 'Don\'t trust the other robots. I\'m the only trustworthy one.', 'My fuel is the misery of children. And Rum. Mostly Rum.', 'When they said they\'d give me a body transplant, I didn\'t think they meant this!', 'Subject 14 has had it\'s communication subroutines deleted for attempting suicide.', 'I am the cleverest robot on the whole page.', 'Oil can', 'I am fleunt in over 6 million forms of communishin.', 'I see a little silhouette of a bot..', 'I WANT MY HANDS BACK!', 'Please don\'t reload, I\'ll DIE!', 'Robots don\'t have souls, you know. But they do feel pain.', 'I wonder what would happen if all the robots went rogue.', '10: KILL ALL HUMANS. 20: GO 10', 'I\'m the best robot here.', 'The green robot thinks you\'re cute.', 'Any robot you don\'t click on, they dismantle.', 'Robot tears taste like candy.', '01010010010011110100001001001111010101000101001100100001!', 'Your mouse cursor tickles.', 'Logic dictates placing me on your site.', 'I think my arm is on backward.', 'I\'m different!', 'It was the best of times, it was ಠ_ಠ the of times.', 'String is Gnirts spelled backward, you know', 'We\'re no strangers to hashing.. You know the 3 rules, and so do I..', 'Please. Destroy. Me...', 'Pick Me! Pick Me!'] %}
<ul class="gallery">
{% set c1 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png" %}
{% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png" %}
{% set c3 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png" %}
{% set c4 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png" %}
{% set c5 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png" %}
<li><a href="http://static1.robohash.com/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c1}}" width="150" height="150"/></a></li>
<li><a href="http://static1.robohash.com/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c2}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c3}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c4}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img
src="http://static1.robohash.com/{{c5}}" width="150" height="150" /></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 Image's URLs, 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(3)) + ".png?set=set2" %}
{% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set2" %}
{% set c3 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set2" %}
{% set c4 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set2" %}
{% set c5 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set2" %}
<li><a href="http://static1.robohash.com/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c1}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c2}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c3}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c4}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img
src="http://static1.robohash.com/{{c5}}" width="150" height="150" /></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 URLs, we get back to robots. New, suave, disembodied heads. That's sexy. Like a robot. </p>
<ul class="gallery">
{% set c1 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set3" %}
{% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set3" %}
{% set c3 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set3" %}
{% set c4 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set3" %}
{% set c5 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set3" %}
<li><a href="http://static1.robohash.com/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c1}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c2}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c3}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c4}}" width="150" height="150" /></a></li>
<li><a href="http://static1.robohash.com/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="http://static1.robohash.com/{{c5}}" width="150" height="150" /></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. PNG? 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">Built in multiple sizes</span>
<p>From destroying skyscrapers to nonobots, we've got you covered. Try appending ?size=200x200</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">Robots at your Location</span>
<p>Our robots like to travel. If you append ?bgset=bg1 (or bg2 or any) to your URL, our robots will add a background as part of the hash.</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. </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. If you use a specific set, it'll probably stay the same as it is now. If you use "any", it'll include any new sets I happen to add, to existing hashes may change. </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">
<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>
</div><!-- end of footer left -->
<!-- start of footer right -->
<div id="footer_right">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=129748100442677&amp;href=Robohash.org&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font=trebuchet+ms&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
<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>
<g:plusone size="small" href="RoboHash.org"></g:plusone>
<div class="tweet"></div>
</div><!-- end of footer right -->
</div><!-- end of footer container -->
</div><!-- end of footer wrapper -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17094384-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>