<html>
<head>
<title>Daily Timelog Report</title>
<style type="text/css">
.day {
display: grid;
grid-template-columns: 25% 1fr;
grid-template-rows: 4em auto;
padding-left: 0.5em;
padding-bottom: 2em;
}
.day:nth-child(even) { background-color: #eee; }
.day + .day {
border-top: 1px solid black;
}
.tasks {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(auto-file);
}
@media screen and (min-width:400px) {
.day { grid-template-columns: auto auto; }
.tasks { grid-template-columns: auto; }
}
@media screen and (min-width:1024px) {
.day { grid-template-columns: 40% 1fr; }
.tasks { grid-template-columns: auto auto; }
}
@media screen and (min-width:1250px) {
.day { grid-template-columns: 30% 1fr; }
.tasks { grid-template-columns: auto auto auto; }
}
@media screen and (min-width:1400px) {
.day { grid-template-columns: 25% 1fr; }
.tasks { grid-template-columns: auto auto auto auto; }
}
.day .project {
grid-column: 1;
grid-row: 1 / span 2;
}
.day .tasks {
grid-column: 2;
grid-row: 2;
}
.project h2 { margin-bottom: 2em; }
.piechart {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
}
.piechart .pie { grid-column: 1; grid-row: 1; }
.piechart table { grid-column: 2; grid-row: 1; }
.hours { grid-column: 1 / span 2; grid-row: 2; }
.hours h3 { margin-left: 5em; margin-bottom: 0.5ex; }
table.legend { margin-left: 0.75em; margin-bottom: auto; }
.legend span { margin-left: 0.25em; }
.legend td {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="day">
<div class="project">
<h2>2013-07-01 (Monday) Projects</h2>
<div class="piechart">
<div class="pie">
<svg viewbox="-101 -101 202 202" width="202" height="202">
<circle r="100" stroke="black" />
<path fill="#1f78b4" d="M0,0 L-0,-100 A100,100 0 1,1 -37.615,-92.656 z" />
<path fill="#a6cee3" d="M0,0 L-37.615,-92.656 A100,100 0 0,1 -12.64,-99.198 z" />
<path fill="#33a02c" d="M0,0 L-12.64,-99.198 A100,100 0 0,1 -0,-100 z" />
</svg>
</div>
<table class="legend" style="font-size: 14px">
<tr>
<td>
<svg height="14" width="14">
<rect height="14" width="14" fill="#1f78b4" />
</svg>
<span>94% - Foo</span>
</td>
</tr>
<tr>
<td>
<svg height="14" width="14">
<rect height="14" width="14" fill="#a6cee3" />
</svg>
<span>4% - Admin</span>
</td>
</tr>
<tr>
<td>
<svg height="14" width="14">
<rect height="14" width="14" fill="#33a02c" />
</svg>
<span>2% - Bar</span>
</td>
</tr>
</table>
</div>
<div class="hours">
<h3>Hourly</h3>
<div class="hist">
<svg viewbox="0 0 120 80" width="120" height="80">
<style>
text {
font-size: 12;
text-anchor: middle;
}
</style>
<path d="M0,60 h119" stroke="black" />
<g id="hr12" transform="translate(0, 60)">
<rect x="0" y="-9.967" height="9.967" width="19" fill="#a6cee3" />
<text x="10" y="13">12</text>
</g>
<g id="hr13" transform="translate(20, 60)">
<rect x="0" y="-0.35" height="0.35" width="19" fill="#a6cee3" />
<rect x="0" y="-60" height="59.65" width="19" fill="#1f78b4" />
<text x="10" y="13">13</text>
</g>
<g id="hr14" transform="translate(40, 60)">
<rect x="0" y="-2.717" height="2.717" width="19" fill="#1f78b4" />
<rect x="0" y="-22.05" height="19.333" width="19" fill="#1f78b4" />
<rect x="0" y="-27.1" height="5.05" width="19" fill="#33a02c" />
<rect x="0" y="-60" height="32.9" width="19" fill="#1f78b4" />
<text x="10" y="13">14</text>
</g>
<g id="hr15" transform="translate(60, 60)">
<rect x="0" y="-10.333" height="10.333" width="19" fill="#1f78b4" />
<rect x="0" y="-60" height="49.667" width="19" fill="#1f78b4" />
<text x="10" y="13">15</text>
</g>
<g id="hr16" transform="translate(80, 60)">
<rect x="0" y="-60" height="60" width="19" fill="#1f78b4" />
<text x="10" y="13">16</text>
</g>
<g id="hr17" transform="translate(100, 60)">
<rect x="0" y="-0.4" height="0.4" width="19" fill="#1f78b4" />
<text x="10" y="13">17</text>
</g>
</svg>
</div>
</div>
</div>
<div class="tasks">
<div>
<h3>Tasks for <em>Foo (94%)</em>
</h3>
<div class="piechart">
<div class="pie">
<svg viewbox="-61 -61 122 122" width="122" height="122">
<circle r="60" stroke="black" />
<path fill="#1f78b4" d="M0,0 L-0,-60 A60,60 0 0,1 11.846,58.819 z" />
<path fill="#a6cee3" d="M0,0 L11.846,58.819 A60,60 0 0,1 -59.72,5.793 z" />
<path fill="#33a02c" d="M0,0 L-59.72,5.793 A60,60 0 0,1 0,-60 z" />
</svg>
</div>
<table class="legend" style="font-size: 12px">
<tr>
<td>
<svg height="12" width="12">
<rect height="12" width="12" fill="#1f78b4" />
</svg>
<span>47% - Code (database module)</span>
</td>
</tr>
<tr>
<td>
<svg height="12" width="12">
<rect height="12" width="12" fill="#a6cee3" />
</svg>
<span>27% - Docs (working on manual)</span>
</td>
</tr>
<tr>
<td>
<svg height="12" width="12">
<rect height="12" width="12" fill="#33a02c" />
</svg>
<span>27% - ConfCall (Team Meeting)</span>
</td>
</tr>
</table>
</div>
</div>
<div>
<h3>Tasks for <em>Admin (4%)</em>
</h3>
<div class="piechart">
<div class="pie">
<svg viewbox="-61 -61 122 122" width="122" height="122">
<circle r="60" stroke="black" />
<path fill="#1f78b4" d="M0,0 L-0,-60 A60,60 0 1,1 -0,60 A60,60 0 1,1 -0,-60 z" />
</svg>
</div>
<table class="legend" style="font-size: 12px">
<tr>
<td>
<svg height="12" width="12">
<rect height="12" width="12" fill="#1f78b4" />
</svg>
<span>100% - Email</span>
</td>
</tr>
</table>
</div>
</div>
<div>
<h3>Tasks for <em>Bar (2%)</em>
</h3>
<div class="piechart">
<div class="pie">
<svg viewbox="-61 -61 122 122" width="122" height="122">
<circle r="60" stroke="black" />
<path fill="#1f78b4" d="M0,0 L-0,-60 A60,60 0 1,1 -0,60 A60,60 0 1,1 -0,-60 z" />
</svg>
</div>
<table class="legend" style="font-size: 12px">
<tr>
<td>
<svg height="12" width="12">
<rect height="12" width="12" fill="#1f78b4" />
</svg>
<span>100% - Help (Sue questions)</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>