Files
doc-status/layouts/index.html
Hugo Locurcio ba82f1edb5 Color completion percentages' backgrounds dynamically
This makes for easier visual grepping.
2020-02-26 22:04:10 +01:00

29 lines
985 B
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Godot Engine">
<meta name="description" content="View the current completion status of the Godot class reference online.">
<meta name="theme-color" content="#3d8fcc">
<title>{{ .Site.Title }}</title>
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="main.css">
</head>
<body>
{{ .Content }}
<script>
// Color percentages in the Overall column depending on completion.
// Lower completion percentages are highlighted with a red background.
document.querySelectorAll('td:nth-child(9)').forEach(td => {
const percentage = td.innerText.substring(0, td.innerText.length - 1);
if (percentage < 100) {
td.style.backgroundColor = `hsla(0, 100%, 50%, ${0.334 - percentage / 300.0})`;
}
})
</script>
</body>
</html>