diff options
Diffstat (limited to 'frontend/static/template/directory.html')
| -rw-r--r-- | frontend/static/template/directory.html | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/frontend/static/template/directory.html b/frontend/static/template/directory.html new file mode 100644 index 0000000..9622fe1 --- /dev/null +++ b/frontend/static/template/directory.html @@ -0,0 +1,282 @@ +<!doctype html> +<html> +<head> +<title>SCANNERJAMMER DIRECTORY</title> +<style type="text/css"> +* + { + padding: 0; + margin: 0; + } +body + { + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.2, rgb(255,0,123)), + color-stop(0.79, rgb(91,5,171)), + color-stop(1, rgb(165,29,224)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(255,0,123) 20%, + rgb(91,5,171) 79%, + rgb(165,29,224) 100% + ); + background-attachment: fixed; + font-family: sans-serif; + } +a + { + color: #26f; + text-decoration: none; + } +a:visited + { + color: #84b; + } +#directory_container + { + position: absolute; + top: 100px; + left: 50%; + margin-left: -300px; + width: 600px; + z-index: 5; + padding-bottom: 200px; + } +ul + { + border: 2px solid #333; + } +li + { + list-style-type: none; + padding: 4px 0; + border-bottom: 1px solid #ccc; + } +li.off + { + background-color: #ffffee; + } +li.on + { + background-color: #eeeedd; + } +li.top span.score + { + font-size: 48px; + } +li.top a + { + font-size: 36px; + } +li.high span.score + { + font-size: 36px; + } +li.high a + { + font-size: 24px; + } +li.mid span.score + { + font-size: 24px; + } +li.mid a + { + font-size: 18px; + } +li.base span.score + { + font-size: 18px; + } +li.base a + { + font-size: 18px; + } +li.none span.score + { + font-size: 14px; + } +li.none a + { + font-size: 14px; + } +li span.score + { + display: inline-block; + width: 170px; + padding-right: 20px; + text-align: right; + font-weight: bold; + } +.cloudleft + { + background-image: url(/bgz/cloudz1.png); + position: fixed; + bottom: 0; + left: 0; + z-index: 10; + width: 600px; + height: 400px; + opacity: 0.7; + pointer-events: none + } +.cloudright + { + background-image: url(/bgz/cloudz2.png); + position: fixed; + bottom: 0; + right: 0; + z-index: 10; + width: 600px; + height: 400px; + opacity: 0.8; + pointer-events: none + } +.shimmer + { + margin: 0 0 -20px 0; + opacity: 0.5; + } +.shimmer2 + { + margin: 0 0 -40px 0; + opacity: 0.5; + z-index: 11; + } +#likebutton + { + position: fixed; + width: 450px; + right: 20px; + bottom: 20px; + padding-top:15px; + background-color:white; + -moz-border-radius:20px; + border-radius:20px; + padding:10px; + z-index: 10; + } +#likebutton a + { + color: #33f; + } +h2 + { + z-index: 4; + position: absolute; + color: #fff; + font-family: georgia, serif; + font-weight: bold; + font-style: italic; + font-size: 120px; + letter-spacing: -15px; + top: 20px; + left: 50%; + margin-left: -230px; + } +#logo + { + position: absolute; + top: 20px; + z-index: 20; + left: 20px; + } +#logobg + { + position: absolute; top: 10px; left: 0; width: 100%; height: 64px; + background-color: #000; opacity: 0.8; z-index: 19; + width: 950px; + } +#logo a + { + float: left; + display: inline-block; + } +#logo a img + { + display: inline-block; + } +#logo h1 + { + padding: 5px 0 0 25px; + font-size: 34px; + font-weight: normal; + font-style: italic; + font-family: georgia, garamond, serif; + color: #f8b; + display: inline-block; + } + +</style> +</head> +<body> +<section id="logo"> + <a href="/"><img src="http://scannerjammer.com/img/scanjam-title.gif" width="347" height="44" id="scanjam" border="0" /></a> + <h1 id="header">high score directory</h1> +</section> +<section id="logobg"></section> +<section id="directory_container"> + <ul id="directory"></ul> +</section> +<section id="likebutton"> + <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://scannerjammer.com:17769/" show_faces="true" width="450" font=""></fb:like> +</section> +<section class="cloudleft"></section> +<section class="cloudright"></section> +<section class="cloudleft shimmer"></section> +<section class="cloudright shimmer"></section> +<section class="cloudleft shimmer2"></section> +<section class="cloudright shimmer2"></section> +</body> +<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script> +<script type="text/javascript"> +var users = %%DIRECTORY%% +var Directory = + { + generate: function () + { + var seen = {} + var count = 0 + var rows = [] + for (i in users) + { + if (users[i].name in seen) + continue + var cl = "" + seen[users[i].name] = true + if (count < 3) + cl = "top" + else if (count < 10) + cl = "high" + else if (count < 20) + cl = "mid" + else if (users[i].score > 0) + cl = "base" + else + { + cl = "none" + users[i].score = ' ' + } + cl += count % 2 ? " on" : " off" + rows.push('<li class="'+cl+'"><span class="score">'+users[i].score+'</span><a href="/profile/'+users[i].name+'">'+users[i].name+'</a></li>') + count += 1 + } + $("#directory").html(rows.join('')) + } + } +var Main = + { + init: function () + { + $("#likebutton").hover(function(){ $(this).css({zIndex: 666}) }, function (){ $(this).css({zIndex: 10}) }) + if (users && users.length) + Directory.generate() + }, + } +Main.init() +</script> +</html> |