blocksembler.github.io/index.html at main · Blocksembler/blocksembler.github.io · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Welcome to Blocksembler</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
<main>
    <a href="https://github.com/blocksembler" id="ribbon">
        <img alt="Fork me on GitHub" class="attachment-full size-full" data-recalc-dims="1"
             decoding="async"
             height="149" loading="lazy"
             src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" width="149">
    </a>
    <div class="container px-5 pt-5 text-center rounded-3">
        <div class="mb-4">
            <img alt="" id="logo" src="/img/logo.png">
        </div>
        <h1 class="text-body-emphasis">Where blocks meet assembly programming!</h1>
        <p class="col-lg-8 mx-auto fs-5 text-muted">
            Revolutionize the way you learn assembly programming with Blocksembler - the intuitive block-based tool
            designed
            for aspiring coders. Say goodbye to the complexities of traditional assembly language and hello to a fun,
            interactive learning experience.
        </p>
        <img alt="blocksembler logo" class="w-100" src=" img/demo.png">

    </div>

    <div class="container px-4 py-5" id="featured-3">
        <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
            <div class="feature col">
                <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-dark fs-2 mb-3">
                    <svg class="bi bi-mouse2" fill="currentColor" height="1em" viewBox="0 0 16 16"
                         width="1em"
                         xmlns="http://www.w3.org/2000/svg">
                        <path
                                d="M3 5.188C3 2.341 5.22 0 8 0s5 2.342 5 5.188v5.625C13 13.658 10.78 16 8 16s-5-2.342-5-5.188V5.189zm4.5-4.155C5.541 1.289 4 3.035 4 5.188V5.5h3.5zm1 0V5.5H12v-.313c0-2.152-1.541-3.898-3.5-4.154M12 6.5H4v4.313C4 13.145 5.81 15 8 15s4-1.855 4-4.188z"/>
                    </svg>
                </div>
                <h3 class="fs-2 text-body-emphasis">Block-based Code Editing</h3>
                <p>Blocksembler is a programming environment based on the block-based code editing paradigm. Compose
                    assembler
                    programs by
                    manipulating visual blocks via drag and drop.</p>

            </div>
            <div class="feature col">
                <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-dark fs-2 mb-3">
                    <svg class="bi bi-code-slash" fill="currentColor" height="1em" viewBox="0 0 16 16"
                         width="1em" xmlns="http://www.w3.org/2000/svg">
                        <path
                                d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0m6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0"/>
                    </svg>

                </div>
                <h3 class="fs-2 text-body-emphasis">Code Generation</h3>
                <p>Blocksembler provides a block-based and text-based presentation of your code. Both views are linked,
                    i.e.,
                    changes made
                    in the block-based view are immediately reflected in the text-based counterpart.</p>

            </div>
            <div class="feature col">
                <div
                        class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-dark fs-2 mb-3">
                    <svg class="bi bi-bug" fill="currentColor" height="1em" viewBox="0 0 16 16"
                         width="1em"
                         xmlns="http://www.w3.org/2000/svg">
                        <path
                                d="M4.355.522a.5.5 0 0 1 .623.333l.291.956A5 5 0 0 1 8 1c1.007 0 1.946.298 2.731.811l.29-.956a.5.5 0 1 1 .957.29l-.41 1.352A5 5 0 0 1 13 6h.5a.5.5 0 0 0 .5-.5V5a.5.5 0 0 1 1 0v.5A1.5 1.5 0 0 1 13.5 7H13v1h1.5a.5.5 0 0 1 0 1H13v1h.5a1.5 1.5 0 0 1 1.5 1.5v.5a.5.5 0 1 1-1 0v-.5a.5.5 0 0 0-.5-.5H13a5 5 0 0 1-10 0h-.5a.5.5 0 0 0-.5.5v.5a.5.5 0 1 1-1 0v-.5A1.5 1.5 0 0 1 2.5 10H3V9H1.5a.5.5 0 0 1 0-1H3V7h-.5A1.5 1.5 0 0 1 1 5.5V5a.5.5 0 0 1 1 0v.5a.5.5 0 0 0 .5.5H3c0-1.364.547-2.601 1.432-3.503l-.41-1.352a.5.5 0 0 1 .333-.623M4 7v4a4 4 0 0 0 3.5 3.97V7zm4.5 0v7.97A4 4 0 0 0 12 11V7zM12 6a4 4 0 0 0-1.334-2.982A3.98 3.98 0 0 0 8 2a3.98 3.98 0 0 0-2.667 1.018A4 4 0 0 0 4 6z"/>
                    </svg>
                </div>
                <h3 class="fs-2 text-body-emphasis">Interactive Debugger</h3>
                <p>Debug your programs with the integrated debugger and trace the state of the machine by inspecting
                    registers
                    and system
                    memory.</p>
            </div>
        </div>
    </div>

</main>

<div class="container">
    <footer class="py-3 my-4">
        <ul class="nav justify-content-center border-bottom pb-3 mb-3">
            <li class="nav-item"><a class="nav-link px-2 text-body-secondary" href="https://github.com/blocksembler"
                                    target="_blank">GitHub</a></li>
            <li class="nav-item"><a class="nav-link px-2 text-body-secondary" href="https://linktr.ee/blocksembler"
                                    target="_blank">Publications</a></li>
            <li class="nav-item"><a class="nav-link px-2 text-body-secondary" href="https://univie.ac.at"
                                    target="_blank">University of
                Vienna</a></li>
        </ul>
        <p class="text-center text-body-secondary">© 2023 <a href="https://eden.cs.univie.ac.at/">EDEN - Education,
            Didactics and Entertainment Computing, Faculty of Computer Science, Universität Wien</a></p>
    </footer>
</div>


<!-- Bootstrap JS (optional, if you need JavaScript functionality) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>