Skip to content

Instantly share code, notes, and snippets.

@gregnewman

gregnewman/gist:2579862

Created May 2, 2012 20:03
Show Gist options
  • Save gregnewman/2579862 to your computer and use it in GitHub Desktop.
Save gregnewman/2579862 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en" class="sub collection">
<head>
<meta charset="utf-8" />
<title>NeonMob &mdash; buy, trade, and sell digital collectibles with your friends.</title>
<link rel="stylesheet" type="text/css" href="/static/assets/css/signup.css?430" />
<link rel="icon" type="image/ico" href="/static/assets/img/favicon.png">
<script type="text/javascript" src="/static/assets/js/modernizr.js"></script>
<script type="text/javascript" src="http://use.typekit.com/lnu3ezo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<meta property="og:title" content="Neonmob &mdash; buy, trade, and sell digital collectibles with your friends." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.neonmob.com/r/O3WUS/" />
<meta property="og:image" content="http://www.neonmob.com/static/assets/img/gem_300.png" />
<meta property="og:site_name" content="NeonMob" />
<meta property="fb:app_id" content="315202068505923" />
</head>
<body id="home">
<div id="global_message">
<p class="content"></p>
<a class="close" href="#">&times;</a>
</div>
<span class="bg"></span>
<script>
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<header>
<h1><a href="/"><span>NeonMob</span><img src="/static/assets/img/signup/logo.png"/></a></h1>
<p>buy, trade, and sell digital collectibles with your friends.</p>
</header>
<div id="set_chooser">
<span class="chooser_bg"></span>
<div class="content">
<h2>Choose a set you'd like to collect</h2>
<form action="/data/reward" method="post">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='893a3e747b6e8aa2792f37a0a6a1f5d4' /></div>
<ul class="sets">
<li>
<a class="set" href="#" data-set-id="7">
<img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fae62491f90cb1995901650b1cd3dbcff_210-450.png" width="210" height="210" />
<div class="actions">
<span class="btn primary choose">Choose</span>
</div>
<h3 class="name">Monsturz</h3>
</a>
</li>
<li>
<a class="set" href="#" data-set-id="4">
<img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F929a6fa5a1dceb1be01d27983416dbae_210-450.png" width="210" height="210" />
<div class="actions">
<span class="btn primary choose">Choose</span>
</div>
<h3 class="name">Daydreams</h3>
</a>
</li>
<li>
<a class="set" href="#" data-set-id="11">
<img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fcb49ea5ca36e6f53e77fa37dad013943_210-450.png" width="210" height="210" />
<div class="actions">
<span class="btn primary choose">Choose</span>
</div>
<h3 class="name">Lost Realms</h3>
</a>
</li>
<li>
<a class="set" href="#" data-set-id="10">
<img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F8ddc30ea3fe09df2dfddc3b43b5e8da6_210-450.png" width="210" height="210" />
<div class="actions">
<span class="btn primary choose">Choose</span>
</div>
<h3 class="name">Weird World</h3>
</a>
</li>
</ul>
</form>
<p class="small">&#9733; These four sets are just a small sampling from the many sets to come.</p>
</div>
</div>
<div class="main">
<section class="collection_first">
<div class="intro">
<h2>Congratulations! <br/> You've started your collection!</h2>
<p>Just like the collector cards of yore, you can pull varying rarities. Here are your odds of getting each:</p>
<dl>
<dt class="common">Common</dt> <dd class="common">61% chance</dd>
<dt class="uncommon">Uncommon</dt> <dd class="uncommon">24% chance</dd>
<dt class="rare">Rare</dt> <dd class="rare">11% chance</dd>
<dt class="veryRare">Very Rare</dt> <dd class="veryRare">3% chance</dd>
<dt class="extremelyRare">Extremely Rare</dt> <dd class="extremelyRare">1% chance</dd>
</dl>
<p class="em">Okay, click your collectible to reveal what you got!</p>
</div>
<div class="piece_container">
<div class="piece unrevealed">
<figure class="front">
<a class="img"><img width="210" height="210" /></a>
<span class="rarity"></span>
<span class="title"></span>
<span class="print"><span class="print_num"></span>/<span class="print_total"></span></span>
</figure>
<figure class="back">
<a class="img">
</a>
<a href="#choose-set" class="btn reveal primary">
Reveal This Piece
</a>
</figure>
</div>
<span class="reveal_arrow"></span>
</div>
<p class="celebration"><span class="arrow"></span><span class="content"></span></p>
</section>
<section class="collection">
<h2>
Your collection
<small class="collection_title_secondary">
<span class="share_link" title="For each friend that signs up with your share link, you'll get another piece!">
<input type="text" name="share_link" id="share_link" value="http://www.neonmob.com/r/O3WUS/" data-share-link="http://www.neonmob.com/r/O3WUS/" />
<label for="share_link">share to get more pieces!</label>
</span>
</small>
</h2>
<nav class="tabs">
<div id="collection_sets_nav">
<a href="#set-7" class="current"
data-tab-name="Monsturz">
Monsturz
</a>
<a href="#set-11"
data-tab-name="Lost Realms">
Lost Realms
</a>
</div>
<a href="#im_lost" class="im_lost">
About
</a>
</nav>
<div id="collection_sets">
<section id="set-7" name="set-7" data-set-id="7" class="tab_content current">
<ul class="pieces">
<li>
<div class="piece uncommon multiple"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="San">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fe80e9957dce8947c5ad3521f17c7a02e_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fe80e9957dce8947c5ad3521f17c7a02e_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Uncommon"></span>
<span class="title">San</span>
<span class="print">
<span class="print_num">3,765</span>/<span class="print_total">6,000</span>
</span>
<span class="count">2</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Wego">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Wego</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Dert">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Dert</span>
</figure>
</div>
</li>
<li>
<div class="piece common"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Snerch">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fee1c5572cc58ef839d89e86c02c0cad5_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fee1c5572cc58ef839d89e86c02c0cad5_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Common"></span>
<span class="title">Snerch</span>
<span class="print">
<span class="print_num">6,515</span>/<span class="print_total">9,000</span>
</span>
</figure>
</div>
</li>
<li>
<div class="piece extremelyRare empty"
data-rarity-name="Extremely Rare"
data-rarity-class="extremelyRare"
data-name="Lo">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Extremely Rare"></span>
<span class="title">Lo</span>
</figure>
</div>
</li>
<li>
<div class="piece veryRare empty"
data-rarity-name="Very Rare"
data-rarity-class="veryRare"
data-name="Chomp">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Very Rare"></span>
<span class="title">Chomp</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Avo">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Avo</span>
</figure>
</div>
</li>
<li>
<div class="piece rare empty"
data-rarity-name="Rare"
data-rarity-class="rare"
data-name="Scoop">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Rare"></span>
<span class="title">Scoop</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Jink">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Jink</span>
</figure>
</div>
</li>
<li>
<div class="piece uncommon"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="Cora">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fd6a4fb375b7688e8ef884d720ee2218b_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2Fd6a4fb375b7688e8ef884d720ee2218b_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Uncommon"></span>
<span class="title">Cora</span>
<span class="print">
<span class="print_num">1,655</span>/<span class="print_total">6,000</span>
</span>
</figure>
</div>
</li>
<li>
<div class="piece uncommon empty"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="Raspy">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Uncommon"></span>
<span class="title">Raspy</span>
</figure>
</div>
</li>
<li>
<div class="piece rare empty"
data-rarity-name="Rare"
data-rarity-class="rare"
data-name="Soor">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Rare"></span>
<span class="title">Soor</span>
</figure>
</div>
</li>
</ul>
</section>
<section id="set-11" name="set-11" data-set-id="11" class="tab_content">
<ul class="pieces">
<li>
<div class="piece common multiple"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Subterranea (Day)">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F7d3d41f21e4d5b48796c96bd60381b3b_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F7d3d41f21e4d5b48796c96bd60381b3b_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Common"></span>
<span class="title">Subterranea (Day)</span>
<span class="print">
<span class="print_num">5,087</span>/<span class="print_total">9,000</span>
</span>
<span class="count">2</span>
</figure>
</div>
</li>
<li>
<div class="piece rare"
data-rarity-name="Rare"
data-rarity-class="rare"
data-name="Subterranea (Night)">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F6801f7722fa54fa8b120615574b75bc7_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F6801f7722fa54fa8b120615574b75bc7_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Rare"></span>
<span class="title">Subterranea (Night)</span>
<span class="print">
<span class="print_num">6,099</span>/<span class="print_total">9,000</span>
</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Cloud Castle (Day)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Cloud Castle (Day)</span>
</figure>
</div>
</li>
<li>
<div class="piece uncommon"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="Cloud Castle (Night)">
<figure class="front">
<a class="img" href="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F829b43ce0e52e1e980356eb97a65cfda_530.png"><img src="http://s3.amazonaws.com:80/NeonMob-beta/icons%2F829b43ce0e52e1e980356eb97a65cfda_210-450.png" width="210" height="210" /></a>
<span class="rarity" title="Uncommon"></span>
<span class="title">Cloud Castle (Night)</span>
<span class="print">
<span class="print_num">1,876</span>/<span class="print_total">4,000</span>
</span>
</figure>
</div>
</li>
<li>
<div class="piece uncommon empty"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="Iceberg Falls (Day)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Uncommon"></span>
<span class="title">Iceberg Falls (Day)</span>
</figure>
</div>
</li>
<li>
<div class="piece extremelyRare empty"
data-rarity-name="Extremely Rare"
data-rarity-class="extremelyRare"
data-name="Iceberg Falls (Night)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Extremely Rare"></span>
<span class="title">Iceberg Falls (Night)</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Mine of Riches (Day)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Mine of Riches (Day)</span>
</figure>
</div>
</li>
<li>
<div class="piece veryRare empty"
data-rarity-name="Very Rare"
data-rarity-class="veryRare"
data-name="Mine of Riches (Night)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Very Rare"></span>
<span class="title">Mine of Riches (Night)</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Nunatak (Day)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Nunatak (Day)</span>
</figure>
</div>
</li>
<li>
<div class="piece uncommon empty"
data-rarity-name="Uncommon"
data-rarity-class="uncommon"
data-name="Nunatak (Night)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Uncommon"></span>
<span class="title">Nunatak (Night)</span>
</figure>
</div>
</li>
<li>
<div class="piece common empty"
data-rarity-name="Common"
data-rarity-class="common"
data-name="Reef of Ruins (Day)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Common"></span>
<span class="title">Reef of Ruins (Day)</span>
</figure>
</div>
</li>
<li>
<div class="piece rare empty"
data-rarity-name="Rare"
data-rarity-class="rare"
data-name="Reef of Ruins (Night)">
<figure class="front">
<div class="img"></div>
<span class="rarity" title="Rare"></span>
<span class="title">Reef of Ruins (Night)</span>
</figure>
</div>
</li>
</ul>
</section>
<section id="im_lost" id="unrevealed_pieces" class="tab_content">
<h3>Huh? I'm lost. What is this?</h3>
<p>
<span class="logo">NeonMob</span> is a brand spankin' new site for digital collectibles.
Huh? What's that you say? It's basically trading cards for the web!
The idea is to collect your favorite sets with your friends.
For now, there are four limited edition sets &mdash; you should try to complete a set by filling all the empty slots!
</p>
<p>
You can get new limited edition collectibles by sharing your referral link &mdash; <span class="em">http://www.neonmob.com/r/O3WUS/</span>.
Once you share this link and a friend signs up, you'll get an email letting you know you got a new reward. Come back to <span class="logo">NeonMob</span> to
flip it and see what you got! As a reminder, the rarities and chances of getting each rarity are:
</p>
<dl>
<dt class="common">Common</dt> <dd class="common">61% chance</dd>
<dt class="uncommon">Uncommon</dt> <dd class="uncommon">24% chance</dd>
<dt class="rare">Rare</dt> <dd class="rare">11% chance</dd>
<dt class="veryRare">Very Rare</dt> <dd class="veryRare">3% chance</dd>
<dt class="extremelyRare">Extremely Rare</dt> <dd class="extremelyRare">1% chance</dd>
</dl>
<h3>What's Next?</h3>
<p>This signup experience has been designed to let early adopters start their collections early! There is much, much more coming around the corner. Stay tuned!</p>
</section>
</div>
</section>
<section class="share">
<h3>For each friend that signs up with your share link, you'll get another piece!</h3>
<fieldset class="share">
<span class="share_link">
<input type="text" name="share_link" id="share_link" value="http://www.neonmob.com/r/O3WUS/" data-share-link="http://www.neonmob.com/r/O3WUS/" />
<label for="share_link">share link</label>
</span>
<span class="facebook">
<span class="btn facebook">
<span>Share on Facebook</span>
<span class="share_widget">
<div class="fb-like" data-href="http://www.neonmob.com/r/O3WUS/" data-send="true" data-layout="button_count" data-show-faces="false" data-action="recommend" data-colorscheme="light"></div>
</span>
</span>
</span>
<span class="twitter">
<span class="btn twitter">
<span>Share on Twitter</span>
<span class="share_widget">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.neonmob.com/r/O3WUS/" data-text="Collect with me on @neonmob and get a limited edition piece when you sign up!" data-size="large" data-count="none"></a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</span>
</span>
</span>
</fieldset>
</section>
</div>
<footer>
<nav>
<li class="twitter">
<a href="http://twitter.com/neonmob"><span>Follow us on <em>the twitter</em></span></a>
<div class="pop">
<a href="http://twitter.com/neonmob" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow us on <em>the twitter</em></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</li>
<li class="facebook">
<a href="http://facebook.com/neonmob"><span>Like us on <em>Facebook</em></span></a>
<div class="pop">
<div class="fb-like-box" data-href="http://www.facebook.com/neonmob" data-width="292" data-show-faces="false" data-stream="false" data-header="false"></div>
</div>
</li>
<li class="signout">
<a href="/signout/">
Sign Out
</a>
</li>
<li class="blog">
<a href="http://blog.neonmob.com">
Blog
</a>
</li>
<li class="jobs">
<a href="http://neonmob.theresumator.com/">
Jobs
</a>
</li>
</nav>
</footer>
<script src="/static/assets/js/launch.compiled.js?430-2"></script>
<!-- Intercom.io -->
<script id="IntercomSettingsScriptTag">
var intercomSettings = {
app_id: 'aargpluc',
email: '[email protected]',
created_at: 1335813990,
custom_data: {
'username': 'newman'
}
};
</script>
<script>
(function() {
function async_load() {
var s = document.createElement('script');
s.type = 'text/javascript'; s.async = true;
s.src = 'https://api.intercom.io/api/js/library.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent) {
window.attachEvent('onload', async_load);
} else {
window.addEventListener('load', async_load, false);
}
})();
</script>
<!-- Mixpanel -->
<script type="text/javascript">
(function(d,c){var a,b,g,e;a=d.createElement("script");a.type="text/javascript";
a.async=!0;a.src=("https:"===d.location.protocol?"https:":"http:")+
'//api.mixpanel.com/site_media/js/api/mixpanel.2.js';b=d.getElementsByTagName("script")[0];
b.parentNode.insertBefore(a,b);c._i=[];c.init=function(a,d,f){var b=c;
"undefined"!==typeof f?b=c[f]=[]:f="mixpanel";g=['disable','track','track_pageview',
'track_links','track_forms','register','register_once','unregister','identify',
'name_tag','set_config'];
for(e=0;e<g.length;e++)(function(a){b[a]=function(){b.push([a].concat(
Array.prototype.slice.call(arguments,0)))}})(g[e]);c._i.push([a,d,f])};window.mixpanel=c}
)(document,[]);
mixpanel.init("67edad9175c6ef6857b308786e673f2b");
mixpanel.track('page viewed', {'page name' : document.title, 'url' : window.location.pathname});
</script>
<script type="text/javascript">
mixpanel.identify('newman');
mixpanel.name_tag('[email protected]');
</script>
<!-- KISSMetrics -->
<script type="text/javascript">
var _kmq = _kmq || [];
function _kms(u){
setTimeout(function(){
var s = document.createElement('script'); var f = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true;
s.src = u; f.parentNode.insertBefore(s, f);
}, 1);
}
_kms('//i.kissmetrics.com/i.js');_kms('//doug1izaerwt3.cloudfront.net/b10c982b05eee3a6270428c15c274ac6602915e7.1.js');
</script>
<script type="text/javascript">
_kmq.push(['identify', 'newman']);
_kmq.push(['alias', 'newman', '[email protected]']);
</script>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23814707-1']);
_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>
<!-- Gaug.es -->
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f99e5e0613f5d3822000035');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment