dd6ca83ec4571d9dee93ecf55665778f3ef0de2e — Martijn Braam 1 year, 3 months ago 559ede2
Add about dialog
1 files changed, 62 insertions(+), 0 deletions(-)

M index.html
M index.html => index.html +62 -0
@@ 129,6 129,34 @@
                font-family: sans-serif;
                margin-bottom: 5px;

            .popover {
                position: absolute;
                z-index: 100;
                top: 100px;
                left: 100px;
                right: 100px;
                bottom: 100px;
                background: var(--bg);
                border-radius: 4px;
                box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.7);
                display: none;

            .popover .close {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.5);
                width: 32px;
                height: 32px;
                border-radius: 50%;
                font-weight: bold;
                color: black;
                font-size: 32px;
                line-height: 32px;
                text-align: center;

@@ 138,6 166,8 @@
                <img src="logo.svg" id="logo">
                    <a href="#" id="demo">Demo</a>
                    <a href="#" id="about">About</a>
                    <a href="#" id="codegen">Generate code</a>
            <div class="entry">

@@ 156,6 186,22 @@

        <div class="popover" id="aboutdialog" style="padding: 32px;">
            <div class="close">&times;</div>
            <h1>About struct.pack</h1>
                This webapplication is a small javascript utility I've written to help me with visually generating
                the Python struct.pack() and struct.unpack() format strings. It also include a simple visual hex-dump
                debugging screen to see if the alignment is correct on my test data.
                The main feature of this is to prevent manually going through format strings and count the sizes of the
                datatypes to try figure out at that offset a specific byte is. Most struct.pack and struct.unpack
                commands can be pasted into the format field straight from your python source and the data field
                accepts hex dumps and python strings as source.

        const colors = ["#e60049", "#0bb4ff", "#50e991", "#e6d800", "#9b19f5", "#ffa300", "#dc0ab4", "#b3d4ff", "#00bfa0"];

@@ 185,6 231,19 @@

        function closeDialog(event) {
            let dialogs = document.querySelectorAll('.popover');
            dialogs.forEach(el => {
                el.style.display = 'none';

        function doAbout(event) {
            document.getElementById('aboutdialog').style.display = 'block';

        document.addEventListener('DOMContentLoaded', function () {
            const dataEntry = document.getElementById('data');
            dataEntry.addEventListener('change', onChange);

@@ 198,6 257,9 @@

            document.getElementById('demo').addEventListener('click', doDemo);
            document.getElementById('about').addEventListener('click', doAbout);

            document.querySelectorAll('.close').forEach(el => el.addEventListener('click', closeDialog));

        function onDataPaste(event) {