Skip to content

Commit

Permalink
chore: html5 upgrade, w3c check
Browse files Browse the repository at this point in the history
  • Loading branch information
@trinami
trinami committed Mar 29, 2024
1 parent 72f4ba7 commit 719d104
Showing 1 changed file with 64 additions and 256 deletions.
320 changes: 64 additions & 256 deletions fontEditor.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MarQueTT Font-Editor</title>
<style>
table {
zoom: 150%;
transform: scale(1.5);
background-color: #333;
padding: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 30vh;
}

td {
Expand All @@ -27,262 +32,65 @@
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
let calc = function () {
$(this).toggleClass("active")
let leftTrim = $('#lefttrim').prop("checked")
let started = false;
let yOffset = 0;
let glyph = [];
for (let y = 1; y <= 24; y++) {
if (leftTrim && !started && !$("td.led.active:nth-child(" + y + ")").length) {
yOffset++;
continue;
}
started = true;
let g = 0;
for (let x = 1; x <= 8; x++) {
if ($("tr.led:nth-child(" + x + ")>td.led.active:nth-child(" + y + ")").length) {
g += Math.pow(2, x - 1);
}
}
glyph.push(g)
}
for (let i = glyph.length - 1; i; i--) {
if (glyph[i]) break;
glyph.pop();
</head>
<body>
<script>
$(document).ready(function() {
var table = $("<table>");
for (var i = 0; i < 7; i++) {
var row = $("<tr>");
row.addClass("led");
for (var j = 0; j < 25; j++) {
var cell = $("<td>");
cell.addClass("led");
row.append(cell);
}
table.append(row);
}
$("body").append(table);

let calc = function () {
$(this).toggleClass("active")
let leftTrim = $('#lefttrim').prop("checked")
let started = false;
let yOffset = 0;
let glyph = [];
for (let y = 1; y <= 24; y++) {
if (leftTrim && !started && !$("td.led.active:nth-child(" + y + ")").length) {
yOffset++;
continue;
}
started = true;
let g = 0;
for (let x = 1; x <= 8; x++) {
if ($("tr.led:nth-child(" + x + ")>td.led.active:nth-child(" + y + ")").length) {
g += Math.pow(2, x - 1);
}
glyph = glyph.map(function (i) {
return "0b" + i.toString(2).padStart(8, '0')
})
glyph.unshift(glyph.length)
$('#output').val(glyph.join(", ") + ", ".padEnd(63, " "));
}
$('td').click(calc)
$('#lefttrim').change(calc)
$('#zoom').change(function () {
$('table').css("zoom", $(this).val() + "%")
})

glyph.push(g)
}
for (let i = glyph.length - 1; i >= 0; i--) {
if (glyph[i]) break;
glyph.pop();
}
glyph = glyph.map(function (i) {
return "0b" + i.toString(2).padStart(8, '0')
})
</script>
</head>
<body>
<table>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
<tr class="led">
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
<td class="led"></td>
</tr>
</table>
glyph.unshift(glyph.length)
$('#output').val(glyph.join(", ") + ", ".padEnd(63, " "));
}
$('td').click(calc)
$('#lefttrim').change(calc)
$('#zoom').change(function () {
$('table').css("transform", "scale(" + $(this).val()/100 + ")")
})
});
</script>
<br>
<label>Zoom <input type="number" id="zoom" min="25" max="500" value="150"/></label><br>
<label>Trim left <input type="checkbox" id="lefttrim"/></label><br>
<input type="text" id="output" disabled>
<div id="options">
<label>Zoom <input type="number" id="zoom" min="25" max="500" value="150"></label><br>
<label>Trim left <input type="checkbox" id="lefttrim"></label><br>
<input type="text" id="output" disabled>
</div>
</body>
</html>

</html>

0 comments on commit 719d104

Please sign in to comment.