117 lines
2.7 KiB
HTML
117 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGPU</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light dark;
|
|
}
|
|
label {
|
|
font: 0.8rem sans-serif;
|
|
}
|
|
code {
|
|
font: 0.85rem monospace;
|
|
}
|
|
control-root {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
height: 0;
|
|
background: #eee;
|
|
}
|
|
control-main {
|
|
width: 350px;
|
|
float: right;
|
|
margin-right: 1rem;
|
|
background: #444;
|
|
}
|
|
control-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto minmax(4.25em, auto);
|
|
column-gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
row {
|
|
display: contents;
|
|
}
|
|
row > *:first-child {
|
|
margin-left: 0.5rem;
|
|
justify-self: left;
|
|
}
|
|
row > *:last-child {
|
|
margin-right: 0.5rem;
|
|
justify-self: right;
|
|
}
|
|
row-header {
|
|
font: 0.9rem sans-serif;
|
|
font-weight: bold;
|
|
justify-self: center !important;
|
|
margin-top: 0.2em;
|
|
}
|
|
row-separator, row-header {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
row-separator:not(:last-child) {
|
|
border-bottom: 1px solid #777;
|
|
}
|
|
row-header + row-separator {
|
|
border-bottom: 2px solid #888 !important;
|
|
}
|
|
|
|
select, option, input[type="text"] {
|
|
font: 0.8rem sans-serif;
|
|
}
|
|
|
|
input[type="button"] {
|
|
width: calc(100% - 1.1em);
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
input[type="range"], input[type="text"] {
|
|
height: 1rem;
|
|
}
|
|
input[type="color"] {
|
|
height: 1.25rem;
|
|
}
|
|
input[type="range"] {
|
|
width: calc(100% - 0.5em);
|
|
}
|
|
input[type="text"] {
|
|
width: calc(100% - 1em);
|
|
}
|
|
.span-2 {
|
|
grid-column: span 2;
|
|
width: calc(100% - 0.5em);
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
<script src="index.js" type="module"></script>
|
|
<!--<script src="index2.js" type="module"></script>-->
|
|
</head>
|
|
<body>
|
|
<canvas></canvas>
|
|
<control-root>
|
|
<control-main>
|
|
<control-grid id="control-parent">
|
|
<row>
|
|
<input id="download-framebuffer" type="button" value="download framebuffer"></input>
|
|
</row>
|
|
<row-separator></row-separator>
|
|
</control-grid>
|
|
</control-main>
|
|
</control-root>
|
|
</body>
|
|
</html>
|