{% import random,string %} <!-- There aren't many robots in the source.. But here's one. Reload for another;) {{robo}} Happy? ;) Also - NFTs are bad, please don't make them! 💜 robo@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="//robohash.org/static/css/prettyPhoto.css" rel="stylesheet" type="text/css" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <!-- 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/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> <!-- ************************************************************************* ************************* 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" style="position:relative; top:40px"> <img src="/{{ip}}.png" alt="You!" class="left" id="idimg" /><br> <p id='YourIP'><br>https://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", "/" + document.getElementById("textform").query.value ); $("#YourIP").text( "https://robohash.org/" + 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"> <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">{{drquote1[0]}}</span> <br /> <span class="small_quote">{{drquote1[1]}}</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">{{drquote2[0]}}</span> <br /> <span class="small_quote">{{drquote2[1]}}</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> <ul class="gallery"> {% set c1 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set1" %} {% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set1" %} {% set c3 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set1" %} {% set c4 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set1" %} {% set c5 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set1" %} <li><a href="//robohash.org/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c1}}&size=150x150" width="150" height="150"/></a></li> <li><a href="//robohash.org/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c2}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c3}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c4}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c5}}&size=150x150" 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="//robohash.org/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c1}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c2}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c3}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c4}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c5}}&size=150x150" 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="//robohash.org/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c1}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c2}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c3}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c4}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(quotes)}}" class="fade"><img src="/{{c5}}&size=150x150" width="150" height="150" /></a></li> </ul> </div><!-- end of content section --> <div class="hr"></div> <!-- ************************************************************************* ****************************** GALLERY4 SECTION ***************************** ************************************************************************** --> <!-- start of content section --> <div class="content_section"> <p>By appending ?set=set4 to our URLs, we can hydroponically grow beautiful kittens. </p> <ul class="gallery"> {% set c1 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set4" %} {% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set4" %} {% set c3 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set4" %} {% set c4 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set4" %} {% set c5 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set4" %} <li><a href="//robohash.org/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(catquotes)}}" class="fade"><img src="/{{c1}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(catquotes)}}" class="fade"><img src="/{{c2}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c3}}" rel="prettyPhoto[gallery1]" title="{{random.choice(catquotes)}}" class="fade"><img src="/{{c3}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c4}}" rel="prettyPhoto[gallery1]" title="{{random.choice(catquotes)}}" class="fade"><img src="/{{c4}}&size=150x150" width="150" height="150" /></a></li> <li><a href="//robohash.org/{{c5}}" rel="prettyPhoto[gallery1]" title="{{random.choice(catquotes)}}" class="fade"><img src="/{{c5}}&size=150x150" 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> <img src="https://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. 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. If you want it to hash the whole thing, including the extension use ?ignoreext=false to hash the extensions.</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, or a list of them, like "?sets=1,3" , it'll probably stay the same as it is now. If you use "set=any", it'll include any new sets I happen to add, so existing hashes may change. </p><p> You should email me - <a href="mailto:robo@robohash.org" class="fade" title="I am probably not a robot.">robo@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 --> <!-- start of content section --> <div class="content_section"> <div class="section_title">Advanced classes in Robotry.</div> <p> For those inclined, there are several advanced techniques which have been added over time. </p><p> For Gravatar enthusiasts, you can ask Robohash to use a Gravatar if one is available.<br> Put either the email, or the hashed version, in your image where the string normally goes -<br><br> For example: https://robohash.org/robo@robohash.org?gravatar=yes<br> or https://robohash.org/620050a4db5104bae758cd75171d64ca?gravatar=hashed </p><p> <p>We've also conditioned our robots to accept commands either via params or directories-<br> For instance https://robohash.org/set_set3/bgset_bg1/3.14159?size=500x500 <p>Finally, the <a href="https://github.com/e1ven/Robohash">Blueprints are available</a> to build your own robotic factory.</p> </p> </div> <!-- ************************************************************************* ****************************** GALLERY5 SECTION ***************************** ************************************************************************** --> <!-- start of content section --> <div class="content_section"> <hr> <p> By the way - For those afraid of the robocalypse, you can also generate human technicians to mind the robot army, by appending <code>?set=set5</code> to our URLs, or use <code>?set=set6</code> to get a member of the guerilla resistance. </p> {% set c1 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set5" %} <a href="//robohash.org/{{c1}}" rel="prettyPhoto[gallery1]" title="{{random.choice(avatarquotes)}}" class="fade"> <img src="/{{c1}}&size=150x150" width="150" height="150" /> </a> {% set c2 = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(3)) + ".png?set=set6" %} <a href="//robohash.org/{{c2}}" rel="prettyPhoto[gallery1]" title="{{random.choice(gorillaquotes)}}" class="fade"> <img src="/{{c2}}&size=150x150" width="150" height="150" /> </a> </div><!-- end of content section --> </div><!-- end of wrapper --> <!-- ************************************************************************* ****************************** FOOTER SECTION ****************************** ************************************************************************** --> <div id="footer_wrapper"> <div id="footer_container"> <div id="footer_full"> <p> Robohash contains robots created by Zikri Kader (set1) <br/> Hrvoje Novakovic (set2)<br/> Julian Peter Arias (set3).<br/> Cats (set4) were created by <a href="https://framagit.org/Deevad/cat-avatar-generator/tree/master">David Revoy</a><br/> <a href="https://avataaars.com/">avataaars</a> (set5) were created by <a href="https://twitter.com/pablostanley">Pablo Stanley</a>.<br/> Gorillas (set6) created <a href="https://github.com/0ceanSlim">OceanSlim</a>.<br/> </p> <p> You are free to embed under the terms of the CC-BY license. <br> Example wording might be "Robots lovingly delivered by Robohash.org" or something. </p> </div> </div> </div>