breakbox (Claude, WIP)

by JEMNB

HTML

<!DOCTYPE html><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>BreakBox 1.0</title>
<style>
*{box-sizing:border-box;border-radius:0}
body{margin:0;background:#111;color:#ccc;font:11px monospace;display:grid;grid:auto auto 1fr auto 90px 200px/280px 1fr;height:100vh}
header{grid-column:1/3;display:flex;flex-wrap:wrap;gap:5px;padding:3px;background:#222;align-items:center}
input,select,button,textarea{background:#333;color:#ddd;border:1px solid #555;font:inherit}
input[type=number]{width:50px}
button{background:#444;border:2px outset #777;padding:0 5px;cursor:pointer}button:active{border-style:inset}button.on{color:#fc4;border-color:#fc4}
input[type=range]{-webkit-appearance:none;appearance:none;height:14px;background:#000;border:1px solid #666;padding:0;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:12px;background:#9ab;border:1px solid #fff}
input[type=range]::-moz-range-thumb{width:7px;height:10px;background:#9ab;border:1px solid #fff;border-radius:0}
input[type=range]::-moz-range-track{background:#000}
.r input[type=number]{width:52px;flex:none}#hl{position:absolute;left:0;top:16px;pointer-events:none;z-index:1}#pc3{display:none;flex-direction:column;height:100%}
aside{grid-row:2/7;overflow:auto;padding:4px;border-right:1px solid #333}
.r{display:flex;align-items:center;gap:4px}.r span{width:118px;flex:none;overflow:hidden;white-space:nowrap}.r input[type=range]{flex:1;min-width:0}
.fx{border:1px solid #444;margin:3px 0;padding:2px}.fx small{display:block;color:#889}
#ab{overflow:auto;max-height:130px}#R{overflow:auto}#W{position:relative}#ru{position:sticky;top:0;z-index:2;display:block;cursor:col-resize}#cv{display:block}
.ph{position:absolute;top:0;bottom:0;width:1px;background:#f55;pointer-events:none;display:none;z-index:3}
#L{overflow:hidden}#L canvas{display:block}#bar{padding:2px;color:#889}
.sl{padding:1px...