diff options
| author | Aki <please@ignore.pl> | 2023-05-06 15:18:31 +0200 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2023-05-06 15:18:31 +0200 |
| commit | f1ce49e5aece7c93392c5afadba0eed1bb59f5e4 (patch) | |
| tree | 05cf589da7f63f34871c35ff75e67b8b07bfaf34 | |
| download | activity-f1ce49e5aece7c93392c5afadba0eed1bb59f5e4.zip activity-f1ce49e5aece7c93392c5afadba0eed1bb59f5e4.tar.gz activity-f1ce49e5aece7c93392c5afadba0eed1bb59f5e4.tar.bz2 | |
Created raw activity chart in only HTML and CSS
| -rw-r--r-- | activity.html | 14 | ||||
| -rw-r--r-- | style.css | 58 |
2 files changed, 72 insertions, 0 deletions
diff --git a/activity.html b/activity.html new file mode 100644 index 0000000..618a3bb --- /dev/null +++ b/activity.html @@ -0,0 +1,14 @@ +<!doctype html> +<html lang="en"> +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="style.css"> +<title>Activity</title> +<table class="activity-chart"> +<tr><td class="activity-chart-label"><td><td data-activity-level="1"><td data-activity-level="1"><td data-activity-level="2"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"> +<tr><td class="activity-chart-label"><span>Mon</span><td><td data-activity-level="0"><td data-activity-level="3"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="1"><td data-activity-level="4"><td data-activity-level="4"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"> +<tr><td class="activity-chart-label"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="3"><td data-activity-level="0"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="2"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"> +<tr><td class="activity-chart-label"><span>Wed</span><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="4"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td> +<tr><td class="activity-chart-label"><td data-activity-level="1"><td data-activity-level="2"><td data-activity-level="2"><td data-activity-level="2"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="3"><td data-activity-level="0"><td data-activity-level="2"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td> +<tr><td class="activity-chart-label"><span>Fri</span><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="1"><td data-activity-level="2"><td data-activity-level="1"><td data-activity-level="3"><td data-activity-level="0"><td data-activity-level="4"><td data-activity-level="2"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td> +<tr><td class="activity-chart-label"><td data-activity-level="2"><td data-activity-level="1"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td data-activity-level="0"><td> +</table> diff --git a/style.css b/style.css new file mode 100644 index 0000000..e5ca66c --- /dev/null +++ b/style.css @@ -0,0 +1,58 @@ +table.activity-chart { + border-spacing: 4px; +} + + +table.activity-chart tr { + height: 11px; +} + + +td.activity-chart-label { + position: relative; + font-size: 12px; + min-width: 2em; +} + + +td.activity-chart-label span { + position: absolute; + top: -3px; +} + + +td[data-activity-level] { + box-sizing: border-box; + outline-width: 1px; + outline-style: solid; + outline-offset: -1px; + outline-color: rgba(27, 31, 35, 0.06); + border-radius: 2px; + height: 11px; + min-width: 11px; +} + + +td[data-activity-level="0"] { + background-color: #ccc; +} + + +td[data-activity-level="1"] { + background-color: #9be9a8; +} + + +td[data-activity-level="2"] { + background-color: #40c463; +} + + +td[data-activity-level="3"] { + background-color: #30a14e; +} + + +td[data-activity-level="4"] { + background-color: #216e39; +} |