alexdong/punch_card_visualizing_chi.html

## punch_card_visualizing_chi.html
{% load usage %}
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Trunkly · Punch Chart</title>
        <style>
            body { margin: 30px auto; width: 800px; background-color:#333; }
            div { background-color: green; }
            a { color: #eee; font-size:11px; text-decoration:none; }
        </style>
    </head>
    <body>
        <table>
        <tr style="font-size:10px; color:#eee; height:50px; border-bottom:1px solid white;">
            <td></td>
            {% for day in days %}
            <td>{{day|epoch_2_datetime|date:"D, d/m"}}</td>
            {% endfor %}
        </tr>
        {% for t in scores %}
        <tr height="30px">
            <td width="30px">
                <a href="/review/?user={{t.id}}" title="{{t.name}}">{{t.id}}</a>
            </td>
            {% for score in t.score %}
            <td width="30px" height="30px" valign="middle">
                <div style="margin:auto;
                    background-color: {{score.color}};
                    height:{{score.size}}px; width:{{score.size}}px;
                    -moz-border-radius: {{score.radius}}px;
                    -webkit-border-radius: {{score.radius}}px;">
                    &nbsp;
                </div>
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
    </body>
</html>
	{% load usage %}
	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Trunkly · Punch Chart</title>
	<style>
	body { margin: 30px auto; width: 800px; background-color:#333; }
	div { background-color: green; }
	a { color: #eee; font-size:11px; text-decoration:none; }
	</style>
	</head>
	<body>
	<table>
	<tr style="font-size:10px; color:#eee; height:50px; border-bottom:1px solid white;">
	<td></td>
	{% for day in days %}
	<td>{{day\|epoch_2_datetime\|date:"D, d/m"}}</td>
	{% endfor %}
	</tr>
	{% for t in scores %}
	<tr height="30px">
	<td width="30px">
	<a href="/review/?user={{t.id}}" title="{{t.name}}">{{t.id}}</a>
	</td>
	{% for score in t.score %}
	<td width="30px" height="30px" valign="middle">
	<div style="margin:auto;
	background-color: {{score.color}};
	height:{{score.size}}px; width:{{score.size}}px;
	-moz-border-radius: {{score.radius}}px;
	-webkit-border-radius: {{score.radius}}px;">

	</div>
	</td>
	{% endfor %}
	</tr>
	{% endfor %}
	</table>
	</body>
	</html>