65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<body style="margin: 5px">
|
|
<div
|
|
id="toolbar"
|
|
style="
|
|
width: fit-content;
|
|
height: 26px;
|
|
margin-top: 0px;
|
|
margin-bottom: 5px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: flex;
|
|
gap: 5px;
|
|
"
|
|
>
|
|
<button id="select_model_button">Switch Model</button>
|
|
<button disabled id="model_name"></button>
|
|
<button id="select_state_button">Select State</button>
|
|
<button disabled id="state_name"></button>
|
|
<button id="edit_state_button">Edit State</button>
|
|
<button id="up_button">UP</button>
|
|
<button id="down_button">DOWN</button>
|
|
<button id="left_button">LEFT</button>
|
|
<button id="right_button">RIGHT</button>
|
|
<button id="generate_graph_button">Generate Graph</button>
|
|
<button id="reset_view_button">Reset View</button>
|
|
<button id="clear_graph_button">Clear Graph</button>
|
|
</div>
|
|
|
|
<div id="columns" style="display: flex">
|
|
<div
|
|
id="model"
|
|
style="
|
|
/* Body m-left / 2 + graph m-left / 2 + body m-right / 2 + borders x4 / 2 */
|
|
/* 2.5px + 2.5px + 2.5px + 2px */
|
|
width: calc(50vw - 9.5px);
|
|
/* Bar height + body m-top + bar m-bot + body m-bot + border x2 */
|
|
/* 26px + 5px + 5px + 5px + 2px */
|
|
height: calc(100vh - 43px);
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 1px;
|
|
"
|
|
>
|
|
<canvas id="model_canvas" style="width: 100%; height: 100%"></canvas>
|
|
</div>
|
|
<div
|
|
id="graph"
|
|
style="
|
|
width: calc(50vw - 7.5px);
|
|
height: calc(100vh - 43px);
|
|
margin-left: 5px;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width: 1px;
|
|
"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Load the script last, such that the dom is populated beforehand -->
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|