<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<style>
.main-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
#output {
font-family: monospace;
white-space: pre;
font-size: 0.8em;
}
.error {
color: red;
white-space: pre;
}
</style>
<div class="main-content">
<div style="width: 63vw; height: 100%; border: 2px solid grey;" id="monaco-editor"></div>
<div style="width: 36vw; height: 100%; border: 2px solid grey;" id="diagnostics">
<div class="buttons">
<button id="run">Run</button>
<button id="format">Format</button>
</div>
<div id="output"></div>
</div>
</div>
</body>
</html>