elf_arrows/src/render_html.jingoo

88 lines
2.1 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: "mono";
font-size: 12px;
background-color: #f7f6fd;
}
.prog_container {
display: flex;
justify-content: space-around;
}
.prog {
background-color: white;
padding: 15px;
border: 1px solid #9584ff;
}
.subroutine {
margin: 20px 0;
}
.sub_body {
margin-left: 4ex;
}
.addr {
color: green;
}
.instr_bytes pre {
display: inline;
font-size: 12px;
font-family: "mono";
}
.instr_bytes {
color: grey;
}
.instr_box {
background-color: #ffffb4;
}
</style>
</head>
<body>
<div class="prog_container">
{% for subroutines in progs %}
<div class="prog">
{% for subroutine in subroutines %}
<div class="subroutine">
<div class="sub_headline">
<span class="addr">{{ subroutine.sub_addr }}</span>
<span class="sub_section">[{{ subroutine.sub_section }}]</span>
<span class="sub_name">&lt;{{ subroutine.sub_name }}&gt;</span>:
</div>
<div class="sub_body">
{% for row in subroutine.sub_asm %}
{% for event in row.instr_events %}
{% if event.typ == "start" %}
<div class="instr_box" id="instr_box_{{ event.id }}"
title="{{ event.data }}"
>
{% endif %}
{% endfor %}
<div class="sub_instr">
<span class="addr instr_addr">{{ row.instr_addr }}</span>
<span class="instr_bytes"><pre>{{ row.instr_bytes }}</pre></span>
<span class="instr_asm">{{ row.instr_asm }}</span>
</div>
{% for event in row.instr_events %}
{% if event.typ == "end" %}
</div> <!-- END instr_box_{{ event.id }} -->
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</body>
</html>