50 lines
1.1 KiB
Text
50 lines
1.1 KiB
Text
|
#!/bin/bash -eu
|
||
|
|
||
|
HTML='png_tester.html'
|
||
|
|
||
|
cd "$(dirname "$0")/../"
|
||
|
mkdir -p build/reports
|
||
|
cd $_
|
||
|
|
||
|
cat > $HTML << EOF
|
||
|
<html>
|
||
|
<head>
|
||
|
<title>PNG Transparency Tester</title>
|
||
|
<style>
|
||
|
body { font-size: .5em; }
|
||
|
#colour-picker div { width:2em; height:2em; display:inline-block; }
|
||
|
#pngs { background-color: green; }
|
||
|
#pngs div { border: 1px solid black; display:inline-block; }
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div id="colour-picker">
|
||
|
</div>
|
||
|
<div id="pngs">
|
||
|
EOF
|
||
|
|
||
|
for png in $(find '../../src' -name '*.png'); do
|
||
|
echo "<div><h3>${png:6}</h3><img src='$png'/></div>" >> $HTML
|
||
|
done
|
||
|
|
||
|
cat >> $HTML << EOF
|
||
|
</div>
|
||
|
<script>
|
||
|
['black', 'white', 'red', 'green', 'blue'].forEach(function(colour) {
|
||
|
var box = document.createElement('div');
|
||
|
box.onclick = function() { changeColour(colour); };
|
||
|
box.style.background = colour;
|
||
|
document.getElementById('colour-picker').append(box);
|
||
|
});
|
||
|
|
||
|
function changeColour(colour) {
|
||
|
console.log('Changing colour to: ' + colour);
|
||
|
document.getElementById('pngs').style.background = colour;
|
||
|
}
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|
||
|
EOF
|
||
|
|
||
|
open "$HTML"
|