KilnLog

Help

Drop a kilntroller CSV here

Kilntroller CSV export from the SD card

Loading…

border-bottom: 1px solid #333; padding: 14px 24px; display: flex; align-items: center; gap: 16px; } header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; } header span { color: #aaa; font-size: 0.85rem; } #drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 56px); color: #999; gap: 10px; } #drop-zone.drag-over { color: #2a6df4; border: 2px dashed #2a6df4; } #drop-zone svg { opacity: 0.4; } #drop-zone p { font-size: 1rem; } #drop-zone small { font-size: 0.8rem; } #content { display: none; padding: 20px 24px; } /* Summary cards */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 14px 16px; } .card-label { font-size: 0.875rem; color: #b8b8b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .card-value { font-size: 1.5rem; font-weight: 600; line-height: 1; } .card-unit { font-size: 0.875rem; color: #b8b8b8; margin-left: 2px; } .card-sub { font-size: 0.875rem; color: #aaa; margin-top: 4px; } .card.emc { border-color: #f0a030; } .card.temp { border-color: #30b0f0; } .card.bat { border-color: #50d080; } .card.fans { border-color: #a060f0; } .card.hum { border-color: #60d0b0; } /* Fan dots */ .fan-dots { display: flex; gap: 5px; margin-top: 6px; } .fan-dot { width: 12px; height: 12px; border-radius: 50%; background: #333; } .fan-dot.on { background: #a060f0; } /* Charts */ .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 900px) { .charts { grid-template-columns: 1fr; } } .chart-card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 16px; } .chart-card h3 { font-size: 0.875rem; color: #aaa; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .chart-note { font-size: 0.8rem; color: #aaa; margin-bottom: 12px; font-style: italic; } .chart-card.wide { grid-column: 1 / -1; } /* Table */ .table-card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .table-card h3 { font-size: 0.875rem; color: #aaa; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .table-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; } th { background: #1a1a1a; color: #b8b8b8; font-weight: 500; padding: 6px 10px; text-align: right; position: sticky; top: 0; } th:first-child { text-align: left; } td { padding: 5px 10px; border-bottom: 1px solid #2a2a2a; text-align: right; } td:first-child { text-align: left; color: #aaa; } tr:hover td { background: #2c2c2c; } /* Readings card — clickable */ .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: #555; background: #2c2c2c; } .card-hint { font-size: 0.8rem; color: #999; margin-top: 6px; } .card.filtered { border-color: #2a6df4; } .card.filtered .card-label { color: #2a6df4; } /* Date range modal */ #modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; align-items: center; justify-content: center; } #modal-overlay.open { display: flex; } #modal { background: #242424; border: 1px solid #444; border-radius: 10px; padding: 24px; width: 320px; display: flex; flex-direction: column; gap: 16px; } #modal h2 { font-size: 0.95rem; font-weight: 600; } .modal-row { display: flex; flex-direction: column; gap: 5px; } .modal-row label { font-size: 0.875rem; color: #b8b8b8; } .modal-row input[type="datetime-local"] { background: #1a1a1a; border: 1px solid #444; border-radius: 6px; color: #e0e0e0; padding: 7px 10px; font-size: 0.88rem; width: 100%; color-scheme: dark; } .modal-row input[type="datetime-local"]:focus-visible { outline: 2px solid #2a6df4; outline-offset: 2px; border-color: #2a6df4; } #modal-range-hint { font-size: 0.8rem; color: #aaa; margin-top: -8px; } .sp-modal-tabs { display:flex; border-bottom:1px solid #333; margin-bottom:4px; gap:0; } .sp-modal-tab { flex:1; padding:8px 4px; background:none; border:none; border-bottom:2px solid transparent; color:#aaa; cursor:pointer; font-size:.875rem; } .sp-modal-tab.active { color:#e0e0e0; border-bottom-color:#2a6df4; } .sp-modal-tab:hover:not(.active) { color:#aaa; } .modal-row select { background:#1a1a1a; border:1px solid #444; border-radius:6px; color:#e0e0e0; padding:7px 10px; font-size:.88rem; width:100%; color-scheme:dark; } .modal-row select:focus-visible { outline:2px solid #2a6df4; outline-offset:2px; border-color:#2a6df4; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .btn { padding: 7px 18px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.875rem; } .btn-primary { background: #2a6df4; color: #fff; } .btn-primary:hover { background: #1a5de0; } .btn-ghost { background: transparent; color: #aaa; border: 1px solid #444; } .btn-ghost:hover { background: #333; } .btn-clear { background: transparent; color: #ff7070; border: 1px solid #ff7070; } .btn-clear:hover { background: rgba(255, 112, 112, 0.1); } .tab-nav { background:#111; border-bottom:1px solid #333; display:flex; padding:0 24px; } .tab-btn { padding:10px 20px; border:none; background:transparent; color:#aaa; cursor:pointer; font-size:.88rem; border-bottom:2px solid transparent; letter-spacing:.02em; } .tab-btn.active { color:#e0e0e0; border-bottom-color:#2a6df4; } .tab-btn:hover:not(.active) { color:#aaa; } .error-banner { background:rgba(224,80,80,.12); border:1px solid #e05050; border-radius:8px; color:#ff9999; padding:12px 16px; font-size:.85rem; margin:16px 24px 0; display:none; } #sp-upload-zone { display:flex; height:calc(100vh - 98px); position:relative; } #sp-continue-bar { display:none; position:absolute; bottom:32px; left:0; right:0; text-align:center; } .sp-slots { display:flex; width:100%; height:100%; gap:0; padding:0; flex-wrap:nowrap; } .sp-slot { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#999; position:relative; } .sp-slot + .sp-slot { border-left:1px solid #2a2a2a; } .sp-slot.drag-over { color:#2a6df4; border:2px dashed #2a6df4; } .sp-slot.loaded { color:#50d080; } .sp-slot svg { opacity:.4; } .sp-slot p { font-size:1rem; } .sp-slot small { font-size:.8rem; } .sp-slot-header { position:absolute; top:24px; left:50%; transform:translateX(-50%); font-size:.875rem; color:#aaa; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .sp-slot-status { font-size:.8rem; } .sp-slot.loaded .sp-slot-status { color:#50d080; } .sp-browse-btn { background:#2a6df4; color:#fff; padding:6px 16px; border-radius:6px; cursor:pointer; font-size:.875rem; white-space:nowrap; } .sp-browse-btn:hover { background:#1a5de0; } .chart-vis-section { border-top:1px solid #2a2a2a; border-bottom:1px solid #2a2a2a; background:#1c1c1c; } .chart-vis-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:9px 24px; background:none; border:none; color:#aaa; cursor:pointer; font-size:.875rem; text-align:left; } .chart-vis-toggle:hover { color:#e0e0e0; } .chart-vis-toggle-label { font-weight:600; color:#b8b8b8; } .chart-vis-toggle-hint { color:#999; } .chart-vis-caret { margin-left:2px; transition:transform .18s; font-size:.65rem; } .chart-vis-toggle.open .chart-vis-caret { transform:rotate(180deg); } .chart-vis-panel { display:none; padding:0 24px 14px; } .chart-vis-instruction { font-size:.8rem; color:#999; margin-bottom:10px; } .chart-vis-bar { display:grid; grid-template-columns:1fr 1fr; gap:5px; } .chart-vis-btn { padding:4px 12px; border:1px solid #444; border-radius:20px; background:transparent; color:#e0e0e0; cursor:pointer; font-size:.875rem; text-align:left; } .chart-vis-btn.hidden-chart { color:#777; border-color:#3a3a3a; text-decoration:line-through; } .chart-vis-btn:hover { border-color:#aaa; color:#e0e0e0; } .chart-vis-sep { display:none; } .chart-vis-reset { grid-column:1/-1; padding:4px 12px; border:1px solid #2a6df4; border-radius:20px; background:transparent; color:#2a6df4; cursor:pointer; font-size:.875rem; text-align:center; margin-top:2px; } .chart-vis-reset:hover { background:#2a6df420; } .sp-card-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; } .sp-card-loc { font-size:.8rem; color:#b8b8b8; text-transform:uppercase; letter-spacing:.04em; } .sp-card-row .card-value { font-size:1.2rem; } /* Loading overlay */ #loading-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:16px; } #loading-overlay.active { display:flex; } .spinner { width:36px; height:36px; border:3px solid #333; border-top-color:#2a6df4; border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } #loading-overlay p { font-size:.9rem; color:#aaa; } .sp-reset-bar { display:flex; justify-content:flex-end; padding:0 24px 0; } .card.kiln-temp { border-color:#30b0f0; } .card.out-temp { border-color:#f08030; } .card.kiln-hum { border-color:#60d0b0; } .card.out-hum { border-color:#60a0e0; } /* Time window filter card */ .tw-filter-card { border-color:#4a3a6a; } .tw-btn { flex:1; padding:4px 0; border:1px solid #444; border-radius:4px; background:transparent; color:#b8b8b8; cursor:pointer; font-size:.875rem; } .tw-btn.active { background:#2a6df4; border-color:#2a6df4; color:#fff; } .tw-btn:hover:not(.active) { border-color:#aaa; color:#e0e0e0; } .tw-hours { font-size:.875rem; color:#b8b8b8; display:flex; flex-direction:column; } .tw-hours label { display:flex; align-items:center; gap:4px; margin-bottom:4px; } .tw-hours.night-order label:first-child { order:2; } .tw-hours.night-order label:last-child { order:1; } .tw-hours input[type=number] { width:48px; background:#1a1a1a; border:1px solid #444; border-radius:4px; color:#e0e0e0; padding:2px 5px; font-size:.875rem; text-align:center; -moz-appearance:textfield; } .tw-hours input[type=number]::-webkit-inner-spin-button { display:none; } /* Skip navigation link (WCAG 2.4.1) — visually hidden until focused */ .skip-link { position: absolute; top: -100%; left: 0; background: #2a6df4; color: #fff; padding: 10px 20px; font-size: 0.875rem; font-weight: 600; text-decoration: none; z-index: 9999; } .skip-link:focus { top: 0; } /* Focus indicators (WCAG 2.4.7) — keyboard navigation only */ .tab-btn:focus-visible, .btn:focus-visible, .sp-browse-btn:focus-visible, .sp-modal-tab:focus-visible, .chart-vis-toggle:focus-visible, .chart-vis-btn:focus-visible, .chart-vis-reset:focus-visible, .tw-btn:focus-visible, .tw-hours input[type=number]:focus-visible, a:focus-visible { outline: 2px solid #2a6df4; outline-offset: 2px; }

KilnLog

Help

Drop a kilntroller CSV here

Kilntroller CSV export from the SD card

Loading…

border-bottom: 1px solid #333; padding: 14px 24px; display: flex; align-items: center; gap: 16px; } header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; } header span { color: #aaa; font-size: 0.85rem; } #drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 56px); color: #999; gap: 10px; } #drop-zone.drag-over { color: #2a6df4; border: 2px dashed #2a6df4; } #drop-zone svg { opacity: 0.4; } #drop-zone p { font-size: 1rem; } #drop-zone small { font-size: 0.8rem; } #content { display: none; padding: 20px 24px; } /* Summary cards */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } .card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 14px 16px; } .card-label { font-size: 0.875rem; color: #b8b8b8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .card-value { font-size: 1.5rem; font-weight: 600; line-height: 1; } .card-unit { font-size: 0.875rem; color: #b8b8b8; margin-left: 2px; } .card-sub { font-size: 0.875rem; color: #aaa; margin-top: 4px; } .card.emc { border-color: #f0a030; } .card.temp { border-color: #30b0f0; } .card.bat { border-color: #50d080; } .card.fans { border-color: #a060f0; } .card.hum { border-color: #60d0b0; } /* Fan dots */ .fan-dots { display: flex; gap: 5px; margin-top: 6px; } .fan-dot { width: 12px; height: 12px; border-radius: 50%; background: #333; } .fan-dot.on { background: #a060f0; } /* Charts */ .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 900px) { .charts { grid-template-columns: 1fr; } } .chart-card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 16px; } .chart-card h3 { font-size: 0.875rem; color: #aaa; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .chart-note { font-size: 0.8rem; color: #aaa; margin-bottom: 12px; font-style: italic; } .chart-card.wide { grid-column: 1 / -1; } /* Table */ .table-card { background: #242424; border: 1px solid #333; border-radius: 8px; padding: 16px; margin-bottom: 24px; } .table-card h3 { font-size: 0.875rem; color: #aaa; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .table-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; } th { background: #1a1a1a; color: #b8b8b8; font-weight: 500; padding: 6px 10px; text-align: right; position: sticky; top: 0; } th:first-child { text-align: left; } td { padding: 5px 10px; border-bottom: 1px solid #2a2a2a; text-align: right; } td:first-child { text-align: left; color: #aaa; } tr:hover td { background: #2c2c2c; } /* Readings card — clickable */ .card.clickable { cursor: pointer; } .card.clickable:hover { border-color: #555; background: #2c2c2c; } .card-hint { font-size: 0.8rem; color: #999; margin-top: 6px; } .card.filtered { border-color: #2a6df4; } .card.filtered .card-label { color: #2a6df4; } /* Date range modal */ #modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; align-items: center; justify-content: center; } #modal-overlay.open { display: flex; } #modal { background: #242424; border: 1px solid #444; border-radius: 10px; padding: 24px; width: 320px; display: flex; flex-direction: column; gap: 16px; } #modal h2 { font-size: 0.95rem; font-weight: 600; } .modal-row { display: flex; flex-direction: column; gap: 5px; } .modal-row label { font-size: 0.875rem; color: #b8b8b8; } .modal-row input[type="datetime-local"] { background: #1a1a1a; border: 1px solid #444; border-radius: 6px; color: #e0e0e0; padding: 7px 10px; font-size: 0.88rem; width: 100%; color-scheme: dark; } .modal-row input[type="datetime-local"]:focus-visible { outline: 2px solid #2a6df4; outline-offset: 2px; border-color: #2a6df4; } #modal-range-hint { font-size: 0.8rem; color: #aaa; margin-top: -8px; } .sp-modal-tabs { display:flex; border-bottom:1px solid #333; margin-bottom:4px; gap:0; } .sp-modal-tab { flex:1; padding:8px 4px; background:none; border:none; border-bottom:2px solid transparent; color:#aaa; cursor:pointer; font-size:.875rem; } .sp-modal-tab.active { color:#e0e0e0; border-bottom-color:#2a6df4; } .sp-modal-tab:hover:not(.active) { color:#aaa; } .modal-row select { background:#1a1a1a; border:1px solid #444; border-radius:6px; color:#e0e0e0; padding:7px 10px; font-size:.88rem; width:100%; color-scheme:dark; } .modal-row select:focus-visible { outline:2px solid #2a6df4; outline-offset:2px; border-color:#2a6df4; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .btn { padding: 7px 18px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.875rem; } .btn-primary { background: #2a6df4; color: #fff; } .btn-primary:hover { background: #1a5de0; } .btn-ghost { background: transparent; color: #aaa; border: 1px solid #444; } .btn-ghost:hover { background: #333; } .btn-clear { background: transparent; color: #ff7070; border: 1px solid #ff7070; } .btn-clear:hover { background: rgba(255, 112, 112, 0.1); } .tab-nav { background:#111; border-bottom:1px solid #333; display:flex; padding:0 24px; } .tab-btn { padding:10px 20px; border:none; background:transparent; color:#aaa; cursor:pointer; font-size:.88rem; border-bottom:2px solid transparent; letter-spacing:.02em; } .tab-btn.active { color:#e0e0e0; border-bottom-color:#2a6df4; } .tab-btn:hover:not(.active) { color:#aaa; } .error-banner { background:rgba(224,80,80,.12); border:1px solid #e05050; border-radius:8px; color:#ff9999; padding:12px 16px; font-size:.85rem; margin:16px 24px 0; display:none; } #sp-upload-zone { display:flex; height:calc(100vh - 98px); position:relative; } #sp-continue-bar { display:none; position:absolute; bottom:32px; left:0; right:0; text-align:center; } .sp-slots { display:flex; width:100%; height:100%; gap:0; padding:0; flex-wrap:nowrap; } .sp-slot { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#999; position:relative; } .sp-slot + .sp-slot { border-left:1px solid #2a2a2a; } .sp-slot.drag-over { color:#2a6df4; border:2px dashed #2a6df4; } .sp-slot.loaded { color:#50d080; } .sp-slot svg { opacity:.4; } .sp-slot p { font-size:1rem; } .sp-slot small { font-size:.8rem; } .sp-slot-header { position:absolute; top:24px; left:50%; transform:translateX(-50%); font-size:.875rem; color:#aaa; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .sp-slot-status { font-size:.8rem; } .sp-slot.loaded .sp-slot-status { color:#50d080; } .sp-browse-btn { background:#2a6df4; color:#fff; padding:6px 16px; border-radius:6px; cursor:pointer; font-size:.875rem; white-space:nowrap; } .sp-browse-btn:hover { background:#1a5de0; } .chart-vis-section { border-top:1px solid #2a2a2a; border-bottom:1px solid #2a2a2a; background:#1c1c1c; } .chart-vis-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:9px 24px; background:none; border:none; color:#aaa; cursor:pointer; font-size:.875rem; text-align:left; } .chart-vis-toggle:hover { color:#e0e0e0; } .chart-vis-toggle-label { font-weight:600; color:#b8b8b8; } .chart-vis-toggle-hint { color:#999; } .chart-vis-caret { margin-left:2px; transition:transform .18s; font-size:.65rem; } .chart-vis-toggle.open .chart-vis-caret { transform:rotate(180deg); } .chart-vis-panel { display:none; padding:0 24px 14px; } .chart-vis-instruction { font-size:.8rem; color:#999; margin-bottom:10px; } .chart-vis-bar { display:grid; grid-template-columns:1fr 1fr; gap:5px; } .chart-vis-btn { padding:4px 12px; border:1px solid #444; border-radius:20px; background:transparent; color:#e0e0e0; cursor:pointer; font-size:.875rem; text-align:left; } .chart-vis-btn.hidden-chart { color:#777; border-color:#3a3a3a; text-decoration:line-through; } .chart-vis-btn:hover { border-color:#aaa; color:#e0e0e0; } .chart-vis-sep { display:none; } .chart-vis-reset { grid-column:1/-1; padding:4px 12px; border:1px solid #2a6df4; border-radius:20px; background:transparent; color:#2a6df4; cursor:pointer; font-size:.875rem; text-align:center; margin-top:2px; } .chart-vis-reset:hover { background:#2a6df420; } .sp-card-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; } .sp-card-loc { font-size:.8rem; color:#b8b8b8; text-transform:uppercase; letter-spacing:.04em; } .sp-card-row .card-value { font-size:1.2rem; } /* Loading overlay */ #loading-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:999; flex-direction:column; align-items:center; justify-content:center; gap:16px; } #loading-overlay.active { display:flex; } .spinner { width:36px; height:36px; border:3px solid #333; border-top-color:#2a6df4; border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } #loading-overlay p { font-size:.9rem; color:#aaa; } .sp-reset-bar { display:flex; justify-content:flex-end; padding:0 24px 0; } .card.kiln-temp { border-color:#30b0f0; } .card.out-temp { border-color:#f08030; } .card.kiln-hum { border-color:#60d0b0; } .card.out-hum { border-color:#60a0e0; } /* Time window filter card */ .tw-filter-card { border-color:#4a3a6a; } .tw-btn { flex:1; padding:4px 0; border:1px solid #444; border-radius:4px; background:transparent; color:#b8b8b8; cursor:pointer; font-size:.875rem; } .tw-btn.active { background:#2a6df4; border-color:#2a6df4; color:#fff; } .tw-btn:hover:not(.active) { border-color:#aaa; color:#e0e0e0; } .tw-hours { font-size:.875rem; color:#b8b8b8; display:flex; flex-direction:column; } .tw-hours label { display:flex; align-items:center; gap:4px; margin-bottom:4px; } .tw-hours.night-order label:first-child { order:2; } .tw-hours.night-order label:last-child { order:1; } .tw-hours input[type=number] { width:48px; background:#1a1a1a; border:1px solid #444; border-radius:4px; color:#e0e0e0; padding:2px 5px; font-size:.875rem; text-align:center; -moz-appearance:textfield; } .tw-hours input[type=number]::-webkit-inner-spin-button { display:none; } /* Skip navigation link (WCAG 2.4.1) — visually hidden until focused */ .skip-link { position: absolute; top: -100%; left: 0; background: #2a6df4; color: #fff; padding: 10px 20px; font-size: 0.875rem; font-weight: 600; text-decoration: none; z-index: 9999; } .skip-link:focus { top: 0; } /* Focus indicators (WCAG 2.4.7) — keyboard navigation only */ .tab-btn:focus-visible, .btn:focus-visible, .sp-browse-btn:focus-visible, .sp-modal-tab:focus-visible, .chart-vis-toggle:focus-visible, .chart-vis-btn:focus-visible, .chart-vis-reset:focus-visible, .tw-btn:focus-visible, .tw-hours input[type=number]:focus-visible, a:focus-visible { outline: 2px solid #2a6df4; outline-offset: 2px; }

KilnLog

Help

Drop a kilntroller CSV here

Kilntroller CSV export from the SD card

Loading…