<div class="info-bar"> <div class="title-badge">⚡ LUT GENERATOR <span>v0.15</span></div> <div class="coord-readout" id="coordDisplay">⏺ hover: [— , —]</div> <div class="value-readout" id="valueDisplay">LUT value: 0.00</div> </div>
button:hover background: #2d405b; transform: translateY(-2px); border-color: #5f8ec9; color: white; box-shadow: 0 8px 16px rgba(0,0,0,0.3); lut generator 0.15
.info-bar display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; margin-bottom: 0.8rem; color: #bfd9ff; font-weight: 500; ⚡ LUT GENERATOR <
.coord-readout background: #03060c; padding: 0.3rem 1rem; border-radius: 2rem; font-family: 'Fira Code', monospace; font-size: 0.9rem; letter-spacing: 0.5px; border: 1px solid #2d3e5a; box-shadow: inset 0 0 4px #00000055; div class="coord-readout" id="coordDisplay">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>LUT Generator 0.15 | Programmable Look-Up Table Canvas</title> <style> * box-sizing: border-box; user-select: none; /* cleaner UI interaction, but text select remains for code if needed */ body background: linear-gradient(145deg, #101418 0%, #0c0f16 100%); font-family: 'Segoe UI', 'Fira Code', 'Monaco', 'Cascadia Code', monospace; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px;
.title-badge background: #1e2a3a; padding: 0.3rem 1rem; border-radius: 3rem; font-size: 0.9rem; letter-spacing: 1px; font-weight: 600; backdrop-filter: blur(4px); border-left: 3px solid #3b82f6; font-family: monospace;
canvas display: block; margin: 0 auto; border-radius: 1.2rem; box-shadow: 0 12px 28px black; cursor: crosshair; transition: all 0.1s ease; background: #000000;