Seq_To_CSS/template.html at master · Chickenbreadlp/Seq_To_CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./rendered.css">
    <style>
        div {
            margin: 0;
            padding: 0;
        }

        .display .row {
            width: ###ROWWIDTH###px;
            height: ###PIXELSIZE###px;
        }
        .display .pixel {
            display: inline-block;

            background-color: #000;
            width: ###PIXELSIZE###px;
            height: ###PIXELSIZE###px;

            animation-duration: ###DURATION###s;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            animation-play-state: paused;
        }

        .display.play .pixel {
            animation-play-state: initial;
        }
    </style>
</head>
<body>
    <div class="display" id="###CONTAINER###"></div>

    <script>
        let display = document.getElementsByClassName('display')[0];

        for (let y = 0; y < ###HEIGHT###; y++) {
            let row = document.createElement('DIV');
            row.className = 'row'
            row.id = 'row_' + y;

            for (let x = 0; x < ###WIDTH###; x++) {
                let pixelID = y * ###WIDTH### + x;

                let pixel = document.createElement('DIV');
                pixel.className = 'pixel';
                pixel.id = 'pixel_' + pixelID;

                row.appendChild(pixel);
            }

            display.appendChild(row);
        }

        function runAnimation() {
            document.getElementById('playButton').remove();

            setTimeout(() => {
                display.className = 'display play';
            }, 1000);
        }
    </script>

    <button id="playButton" style="margin: 20px" onclick="runAnimation(); return false;">Run Animation</button>
</body>
</html>