evan
14e2f2ea9f
Add a log panel that captures QEMU stdout/stderr, route serial to stdio, and pass -d guest_errors,unimp so device warnings (e.g. the m25p80 Read-ID gap that stalls CrossPoint boot) are visible in the browser. Read the framebuffer via HEAPU8 to match the validated node path.
77 lines
2.9 KiB
CSS
77 lines
2.9 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
color: #20211f;
|
|
background: #e9e5dc;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body { margin: 0; }
|
|
|
|
main {
|
|
width: min(100% - 2rem, 70rem);
|
|
margin: 0 auto;
|
|
padding: 2.5rem 0 4rem;
|
|
}
|
|
|
|
header { margin-bottom: 1.5rem; }
|
|
header p { max-width: 42rem; }
|
|
h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); line-height: 1; }
|
|
.eyebrow { margin-bottom: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
|
|
|
|
.boot-panel {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
align-items: end;
|
|
padding: 1rem;
|
|
border: 1px solid #c8c2b6;
|
|
border-radius: .75rem;
|
|
background: #f7f4ed;
|
|
}
|
|
|
|
label { display: grid; gap: .4rem; font-size: .85rem; font-weight: 700; }
|
|
input, select, button { font: inherit; }
|
|
input, select { min-height: 2.6rem; padding: .5rem; border: 1px solid #aaa398; border-radius: .4rem; background: white; }
|
|
button { min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid #55534e; border-radius: .5rem; color: #fff; background: #343532; font-weight: 750; cursor: pointer; touch-action: none; }
|
|
button:hover:not(:disabled) { background: #11120f; }
|
|
button:focus-visible { outline: 3px solid #d2752b; outline-offset: 2px; }
|
|
button:disabled { cursor: not-allowed; opacity: .4; }
|
|
button.active { transform: translateY(2px); background: #d2752b; }
|
|
|
|
.status { min-height: 1.5rem; margin: 1rem 0; }
|
|
.status.error { color: #a52d20; font-weight: 700; }
|
|
|
|
.device {
|
|
display: grid;
|
|
grid-template-columns: minmax(18rem, 33rem) minmax(14rem, 20rem);
|
|
gap: clamp(1.5rem, 5vw, 4rem);
|
|
align-items: center;
|
|
}
|
|
|
|
.screen-shell { padding: 1.1rem; border-radius: 1.2rem; background: #30312e; box-shadow: 0 1rem 2.5rem #5d584c40; }
|
|
canvas { display: block; width: 100%; height: auto; background: #fff; image-rendering: pixelated; }
|
|
|
|
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
|
|
.controls > button { min-height: 4rem; }
|
|
.power { background: #8e3228; }
|
|
.dpad { grid-column: 1 / -1; display: grid; grid-template: repeat(3, 4.25rem) / repeat(3, 4.25rem); justify-content: center; }
|
|
.dpad button { border-radius: 50%; padding: .25rem; }
|
|
.up { grid-area: 1 / 2; }
|
|
.left { grid-area: 2 / 1; }
|
|
.confirm { grid-area: 2 / 2; }
|
|
.right { grid-area: 2 / 3; }
|
|
.down { grid-area: 3 / 2; }
|
|
|
|
@media (max-width: 48rem) {
|
|
main { padding-top: 1.5rem; }
|
|
.device { grid-template-columns: 1fr; }
|
|
.controls { max-width: 24rem; width: 100%; margin: 0 auto; }
|
|
}
|
|
|
|
.log-panel { margin-top: 2rem; }
|
|
.log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-size: .85rem; color: #b9b3a4; }
|
|
.log-header button { min-height: auto; padding: .25rem .75rem; font-size: .8rem; }
|
|
.log { margin: 0; max-height: 20rem; overflow: auto; padding: .75rem 1rem; border-radius: .6rem; background: #1c1d1a; color: #d6d0c2; font: .78rem/1.4 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; }
|