dotanoobs/app/templates/friends.html

{% extends "layout.html" %}

{% block title %}Dota Noobs - Friends{% endblock %}

{% block content %}
<div class="uk-grid">
    <div class="uk-width-1-1 uk-text-center botpad">
        <h2 class="uk-container-center">The Legend Himself: Pyrion Flax</h2>
        <img src="{{ url_for('static', filename='img/pyrion.png') }}">
        <p>Pyrion is a pretty cool guy. He loves shane, and we love him. Check out some of his awesome work:</p>
        <div class="uk-grid">
            <div class="uk-width-1-3"><h3><a href="http://www.youtube.com/user/tedhimself">YouTube</a></h3><img src="{{ url_for('static', filename='img/pyrion-youtube.jpg') }}"></div>
            <div class="uk-width-1-3"><h3><a href="http://www.twitch.tv/pyrionflax">Twitch.tv</a></h3><img src="{{ url_for('static', filename='img/pyrion-twitch.png') }}"></div>
            <div class="uk-width-1-3"><h3><a href="http://www.facebook.com/pyrion.flax">FaceBook</a></h3><img src="{{ url_for('static', filename='img/pyrion-facebook.jpg') }}"></div>
        </div>
    </div>
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-center uk-panel botpad">
        <h2>Internet Friendlies:</h2>
        <p>DotA related websites worth the occasional visit. We know they are no DotaNoobs, but we set a pretty high quality standard around here.</p>
        <ul>
            <li><a href="http://www.reddit.com/r/DotA2/">Reddit's r/dota2</a></li>
            <li><a href="http://www.dotainsight.com">DotaInsight Podcast</a></li>
            <li><a href="http://dotabuff.com">DotaBuff</a></li>
            <li><a href="http://teamliquid.net/dota2/">Team Liquid Dota2</a></li>
            <li><a href="http://www.purgegamers.com">Purge Gamers</a></li>
    </div>
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-center uk-panel">
        <h2>Streams We Like</h2>
        <ul id="streams">
        </ul>
    </div>
</div>
{% endblock %}

{% block pagescripts %}
<script>
$(document).ready(function() {
        {% cache 60*5 %}
	// Add the streams
	var stream_url = "https://api.twitch.tv/kraken/streams/";
	var channels = ["2gd", "purgegamers", "synderen", "luminousinverse", "thegdstudio"]
	for (var idx in channels) {
		$.getJSON(stream_url+channels[idx]+"?callback=?", function(data) {
                    if (data.stream) {
                        var $a = $("<a href='"+data.stream.channel.url+"'></a>");
                        var $strm = $("<div class='dn-streamer uk-text-success uk-panel uk-panel-box' id='"+data.stream.channel.name+"'></div>");

                        $strm.append("<p class='uk-text-bold'>" + data.stream.channel.display_name + "</p>");
                        $strm.append("<img src='" + data.stream.preview.small + "' />");
                        $strm.append("<p><i class='uk-icon-male'></i> "+data.stream.viewers+"</p>");

                        $a.append($strm);
                        $("#streams").prepend($a);

                    } else {
                        $.getJSON(data._links.channel+"?callback=?", function(data) {
                            var $a = $("<a href='"+data.url+"'></a>");
                            var $strm = $("<div class='dn-streamer-offline uk-text-success uk-panel uk-panel-box' id='"+data.name+"'></div>");

                            $strm.append("<p class='uk-text-bold'>" + data.display_name + "</p>");
                            $strm.append("<img src='" + data.logo + "' />");
                            $strm.append("<p class='dn-offline'>Offline</p>");

                            $a.append($strm);
                            $("#streams").append($a);
                        });
                    }
		});
        }
        {% endcache %}

        
        $("#streams").on({
            mouseover: function() {
                $(this).addClass('dn-streamer-hover');
            },
            mouseleave: function() {
                $(this).removeClass('dn-streamer-hover');
            }
        }, "div");
});
</script>
{% endblock %}