Created
April 14, 2026 07:20
-
-
Save dajulia3/cf0c9aac878d1b4d9236eb6976b8a55a to your computer and use it in GitHub Desktop.
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SIV-1019 Shared Property General Inbox — QA Report</title> | |
| <style> | |
| :root { | |
| --pass: #16a34a; --pass-bg: #f0fdf4; --pass-border: #86efac; | |
| --fail: #dc2626; --fail-bg: #fef2f2; --fail-border: #fca5a5; | |
| --info: #2563eb; --info-bg: #eff6ff; --info-border: #93c5fd; | |
| --action: #7c3aed; | |
| --bg: #f8fafc; --surface: #fff; --border: #e2e8f0; | |
| --text: #0f172a; --text-muted: #64748b; --text-light: #94a3b8; | |
| --teal: #0d9488; --teal-light: #ccfbf1; | |
| --sidebar-w: 320px; | |
| } | |
| * { box-sizing: border-box; margin: 0; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; } | |
| /* === Layout === */ | |
| .layout { display: flex; min-height: 100vh; } | |
| .sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 10; transition: transform 0.25s ease; } | |
| .sidebar.collapsed { transform: translateX(-100%); } | |
| .main { margin-left: var(--sidebar-w); flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.5rem 2rem; align-content: start; transition: margin-left 0.25s ease; } | |
| .main.expanded { margin-left: 0; } | |
| .main-left { min-width: 0; } | |
| .main-right { position: sticky; top: 1rem; align-self: start; } | |
| .sidebar-toggle { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 12; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--text-muted); line-height: 1; } | |
| .sidebar-toggle:hover { background: #f1f5f9; } | |
| /* === Sidebar === */ | |
| .sidebar-header { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border); } | |
| .sidebar-header h1 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; } | |
| .sidebar-header .meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; } | |
| .sidebar-stats { display: flex; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border); } | |
| .sidebar-stat { font-size: 0.8rem; font-weight: 600; } | |
| .sidebar-stat.pass { color: var(--pass); } | |
| .sidebar-stat.fail { color: var(--fail); } | |
| .sidebar-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); padding: 0.75rem 1.25rem 0.4rem; } | |
| .sidebar-list { list-style: none; padding: 0; } | |
| .sidebar-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.25rem; cursor: pointer; border-left: 3px solid transparent; transition: background 0.15s; font-size: 0.88rem; } | |
| .sidebar-item:hover { background: #f1f5f9; } | |
| .sidebar-item.active { background: var(--teal-light); border-left-color: var(--teal); } | |
| .sidebar-item .idx { font-size: 0.75rem; color: var(--text-light); font-weight: 600; min-width: 1.5rem; } | |
| .sidebar-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .sidebar-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0; } | |
| .sidebar-badge.pass { background: var(--pass-bg); color: var(--pass); } | |
| .sidebar-badge.fail { background: var(--fail-bg); color: var(--fail); } | |
| .sidebar-badge.info { background: var(--info-bg); color: var(--info); } | |
| /* === Video player === */ | |
| .video-section { } | |
| .player-container { position: relative; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.12); } | |
| video { width: 100%; display: block; } | |
| .subtitle-overlay { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.9rem; max-width: 85%; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s; } | |
| .subtitle-overlay.visible { opacity: 1; } | |
| /* Slideshow fallback */ | |
| .slideshow { position: relative; background: #000; aspect-ratio: 16/10; } | |
| .slideshow img { width: 100%; height: 100%; object-fit: contain; } | |
| .slideshow-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #111; border-radius: 0 0 10px 10px; } | |
| .slideshow-controls button { background: #333; border: none; color: #fff; padding: 0.25rem 0.6rem; border-radius: 4px; cursor: pointer; } | |
| .slideshow-controls .time { color: #aaa; font-size: 0.8rem; font-family: monospace; } | |
| .slideshow-progress { flex: 1; height: 4px; background: #333; border-radius: 2px; cursor: pointer; } | |
| .slideshow-progress-fill { height: 100%; background: var(--teal); border-radius: 2px; } | |
| /* Timeline */ | |
| .timeline { position: relative; height: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin: 0.75rem 0 0.25rem; cursor: pointer; } | |
| .timeline-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; transition: transform 0.12s; z-index: 1; } | |
| .timeline-marker:hover { transform: translate(-50%, -50%) scale(1.6); z-index: 2; } | |
| .timeline-marker.checkpoint { width: 12px; height: 12px; } | |
| .timeline-marker.action { width: 6px; height: 6px; background: var(--action); } | |
| .timeline-marker.pass { background: var(--pass); } | |
| .timeline-marker.fail { background: var(--fail); } | |
| .timeline-marker.info { background: var(--info); } | |
| .timeline-times { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-light); font-family: monospace; } | |
| .timeline-popover { position: absolute; top: 100%; margin-top: 6px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 0.3rem 0.6rem; border-radius: 5px; font-size: 0.75rem; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transition: opacity 0.08s; z-index: 20; } | |
| .timeline-marker:hover .timeline-popover { opacity: 1; } | |
| /* === Test cases === */ | |
| .section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); margin: 2rem 0 0.75rem; } | |
| .test-case { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; transition: box-shadow 0.15s; } | |
| .test-case:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.06); } | |
| .test-case.pass { border-left: 4px solid var(--pass); } | |
| .test-case.fail { border-left: 4px solid var(--fail); } | |
| .test-case.info { border-left: 4px solid var(--info); } | |
| .test-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; cursor: pointer; user-select: none; } | |
| .test-header:hover { background: #f8fafc; } | |
| .test-header .chevron { color: var(--text-light); transition: transform 0.2s; font-size: 0.85rem; flex-shrink: 0; } | |
| .test-header .chevron.open { transform: rotate(90deg); } | |
| .test-header .badge { font-size: 0.7rem; } | |
| .test-header .name { font-weight: 600; font-size: 0.95rem; flex: 1; } | |
| .test-header .tc { font-family: monospace; font-size: 0.8rem; color: var(--teal); cursor: pointer; } | |
| .test-header .tc:hover { text-decoration: underline; } | |
| .test-body { display: none; border-top: 1px solid var(--border); } | |
| .test-body.open { display: block; } | |
| .test-section { padding: 0.75rem 1.25rem; } | |
| .test-section + .test-section { border-top: 1px solid #f1f5f9; } | |
| .test-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); margin-bottom: 0.35rem; } | |
| .test-desc { font-size: 0.9rem; color: var(--text); } | |
| .test-url { font-size: 0.8rem; color: var(--text-muted); font-family: monospace; word-break: break-all; } | |
| .test-steps { list-style: none; padding: 0; } | |
| .test-steps li { font-size: 0.85rem; padding: 0.2rem 0; display: flex; gap: 0.5rem; } | |
| .test-steps li::before { content: attr(data-idx); font-size: 0.7rem; font-weight: 700; color: var(--text-light); min-width: 1.2rem; padding-top: 0.15rem; } | |
| .test-screenshot { padding: 0; } | |
| .test-screenshot img { width: 100%; display: block; } | |
| /* Diagnostics (console logs + network errors on failures) */ | |
| .diagnostics { padding: 0.75rem 1.25rem; border-top: 1px solid var(--fail-border); background: #fef8f8; } | |
| .diagnostics-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fail); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; } | |
| .diag-section { margin-bottom: 0.75rem; } | |
| .diag-section:last-child { margin-bottom: 0; } | |
| .diag-section-title { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; } | |
| .diag-entry { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.78rem; line-height: 1.5; padding: 0.2rem 0.5rem; border-radius: 3px; margin-bottom: 0.2rem; word-break: break-all; } | |
| .diag-entry.error { background: #fee2e2; color: #991b1b; } | |
| .diag-entry.warning { background: #fef3c7; color: #92400e; } | |
| .diag-entry.network { background: #fef2f2; color: #991b1b; } | |
| .diag-entry.highlight { border-left: 3px solid var(--fail); font-weight: 600; } | |
| .diag-empty { font-size: 0.8rem; color: var(--text-light); font-style: italic; } | |
| /* === Activity log === */ | |
| .log-toggle { font-size: 0.85rem; color: var(--teal); cursor: pointer; margin-bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem; } | |
| .log-toggle:hover { text-decoration: underline; } | |
| .event-log { display: none; } | |
| .event-log.open { display: block; } | |
| .event-log table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } | |
| .event-log th { text-align: left; padding: 0.4rem 0.6rem; background: #f1f5f9; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } | |
| .event-log td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #f1f5f9; } | |
| .timecode { font-family: monospace; color: var(--teal); cursor: pointer; } | |
| .timecode:hover { text-decoration: underline; } | |
| .badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; } | |
| .badge.pass { background: var(--pass-bg); color: var(--pass); } | |
| .badge.fail { background: var(--fail-bg); color: var(--fail); } | |
| .badge.info { background: var(--info-bg); color: var(--info); } | |
| .badge.action { background: #f5f3ff; color: var(--action); } | |
| .no-video { padding: 3rem; text-align: center; color: var(--text-muted); background: #f9fafb; border-radius: 10px; border: 1px dashed var(--border); } | |
| /* Supplemental videos */ | |
| .supplemental-videos { margin-top: 1rem; } | |
| .supplemental-video { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--action); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; } | |
| .supplemental-video summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; list-style: none; } | |
| .supplemental-video summary::-webkit-details-marker { display: none; } | |
| .supplemental-video summary::before { content: '\25b6'; font-size: 0.7rem; color: var(--text-light); transition: transform 0.2s; } | |
| .supplemental-video[open] summary::before { transform: rotate(90deg); } | |
| .supplemental-video video { width: 100%; display: block; } | |
| /* Evidence section (agent-generated HTML: tables, queries, etc.) */ | |
| .evidence-section { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); } | |
| .evidence-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; } | |
| .evidence-section table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-bottom: 0.75rem; } | |
| .evidence-section th { text-align: left; padding: 0.4rem 0.6rem; background: #f1f5f9; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); } | |
| .evidence-section td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #f1f5f9; } | |
| .evidence-section pre { background: #1e293b; color: #e2e8f0; padding: 0.75rem; border-radius: 6px; font-size: 0.8rem; overflow-x: auto; margin-bottom: 0.75rem; } | |
| .evidence-section code { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.82rem; } | |
| .evidence-section p { margin-bottom: 0.5rem; } | |
| .evidence-match { color: var(--pass); font-weight: 600; } | |
| .evidence-mismatch { color: var(--fail); font-weight: 600; } | |
| /* Data setup panel */ | |
| .setup-panel { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); border-radius: 10px; margin-bottom: 1.5rem; } | |
| .setup-panel summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--text); list-style: none; } | |
| .setup-panel summary::-webkit-details-marker { display: none; } | |
| .setup-panel summary::before { content: '\25b6'; font-size: 0.7rem; color: var(--text-light); transition: transform 0.2s; } | |
| .setup-panel[open] summary::before { transform: rotate(90deg); } | |
| .setup-panel summary .setup-count { font-size: 0.7rem; font-weight: 700; color: var(--teal); background: var(--teal-light); padding: 0.1rem 0.5rem; border-radius: 10px; } | |
| .setup-list { padding: 0; margin: 0; list-style: none; } | |
| .setup-item { padding: 0.6rem 1.25rem; border-top: 1px solid #f1f5f9; } | |
| .setup-item-header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } | |
| .setup-item-desc { font-size: 0.88rem; font-weight: 500; color: var(--text); } | |
| .setup-item-method { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.75rem; font-weight: 600; color: var(--teal); background: var(--teal-light); padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; } | |
| .setup-item-time { margin-left: auto; flex-shrink: 0; } | |
| .setup-item-detail { margin-top: 0.3rem; font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.78rem; color: var(--text-muted); background: #f1f5f9; padding: 0.3rem 0.6rem; border-radius: 4px; overflow: auto; white-space: pre; max-height: 5.2em; } | |
| /* Click indicator overlay */ | |
| .screenshot-container { position: relative; display: block; } | |
| .click-indicator { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: rgba(239, 68, 68, 0.5); border: 3px solid rgba(239, 68, 68, 0.9); transform: translate(-50%, -50%); pointer-events: none; z-index: 5; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.15), 0 0 12px rgba(239, 68, 68, 0.3); } | |
| .click-indicator::after { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); } | |
| /* Network activity panel */ | |
| .network-panel { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); background: #f8fafc; } | |
| .network-panel.failure { border-top-color: var(--fail-border); background: #fef8f8; } | |
| .network-panel-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; } | |
| .network-panel.failure .network-panel-label { color: var(--fail); } | |
| .network-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: 'SF Mono', Monaco, Consolas, monospace; } | |
| .network-table th { text-align: left; padding: 0.3rem 0.5rem; background: #f1f5f9; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); } | |
| .network-row { cursor: pointer; transition: background 0.1s; } | |
| .network-row:hover { background: #f0f9ff; } | |
| .network-row.error { background: #fef2f2; } | |
| .network-row.error:hover { background: #fee2e2; } | |
| .network-row td { padding: 0.25rem 0.5rem; border-bottom: 1px solid #f1f5f9; } | |
| .network-row .method { font-weight: 600; color: var(--text-muted); } | |
| .network-row .status-ok { color: var(--pass); font-weight: 600; } | |
| .network-row .status-err { color: var(--fail); font-weight: 600; } | |
| .network-row .url-cell { word-break: break-all; max-width: 280px; } | |
| .network-row .duration { color: var(--text-muted); text-align: right; white-space: nowrap; } | |
| .network-row .expand-hint { color: var(--text-light); font-size: 0.7rem; } | |
| .network-detail { display: none; } | |
| .network-detail td { padding: 0.5rem; background: #f8fafc; border-bottom: 1px solid var(--border); } | |
| .body-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin: 0.4rem 0 0.2rem; } | |
| .body-label:first-child { margin-top: 0; } | |
| .body-pre { max-height: 200px; overflow: auto; background: #1e293b; color: #e2e8f0; padding: 0.5rem; border-radius: 4px; font-size: 0.72rem; white-space: pre-wrap; word-break: break-all; margin-bottom: 0.3rem; } | |
| .body-empty { font-size: 0.78rem; color: var(--text-light); font-style: italic; padding: 0.3rem 0; } | |
| /* Action cards in gallery */ | |
| .action-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--action); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; } | |
| .action-card-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; font-size: 0.88rem; cursor: pointer; } | |
| .action-card-header:hover { background: #f8fafc; } | |
| .action-card-header .name { flex: 1; font-weight: 500; } | |
| .action-card-header .tc { font-family: monospace; font-size: 0.8rem; color: var(--teal); cursor: pointer; } | |
| .action-card-header .tc:hover { text-decoration: underline; } | |
| .badge.action { background: #f5f3ff; color: var(--action); } | |
| .sidebar-badge.action { background: #f5f3ff; color: var(--action); } | |
| /* === Screenshot lightbox === */ | |
| .test-screenshot img { cursor: zoom-in; } | |
| .lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; cursor: zoom-out; } | |
| .lightbox.open { display: flex; } | |
| .lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; border-radius: 6px; box-shadow: 0 4px 40px rgba(0,0,0,0.5); cursor: default; } | |
| .lightbox-close { position: fixed; top: 1rem; right: 1rem; z-index: 101; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; backdrop-filter: blur(4px); } | |
| .lightbox-close:hover { background: rgba(255,255,255,0.3); } | |
| @media (max-width: 900px) { | |
| .sidebar { display: none; } | |
| .main { margin-left: 0; padding: 1rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="layout"> | |
| <!-- Expand button (visible when sidebar collapsed) --> | |
| <button id="sidebarExpand" style="display:none;position:fixed;top:0.75rem;left:0.75rem;z-index:11;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:0.3rem 0.5rem;cursor:pointer;font-size:0.85rem;color:var(--text-muted);line-height:1" title="Expand sidebar">▸</button> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebarEl"> | |
| <div class="sidebar-header"> | |
| <div style="display:flex;justify-content:space-between;align-items:start"> | |
| <h1>SIV-1019 Shared Property General Inbox — QA Report</h1> | |
| <button class="sidebar-toggle" id="sidebarToggle" title="Collapse sidebar" style="position:static;flex-shrink:0">◂</button> | |
| </div> | |
| <div class="meta">2026-04-14 · 06:31</div> | |
| </div> | |
| <div class="sidebar-stats"> | |
| <span class="sidebar-stat pass">8 passed</span> | |
| <span class="sidebar-stat fail">0 failed</span> | |
| </div> | |
| <div class="sidebar-label">Test Cases</div> | |
| <ul class="sidebar-list" id="sidebarList"></ul> | |
| <div class="sidebar-label">Activity Log</div> | |
| <ul class="sidebar-list" id="sidebarActions"></ul> | |
| </aside> | |
| <!-- Main content --> | |
| <main class="main"> | |
| <!-- Left column: test cases + observations --> | |
| <div class="main-left"> | |
| <div id="setupSection" style="display:none"></div> | |
| <div class="section-label">Test Cases · 8 passed · 0 failed</div> | |
| <div id="testCases"></div> | |
| <div id="observationsSection" style="display:none"> | |
| <div class="section-label" style="margin-top:2rem">Observations</div> | |
| <div id="observations"></div> | |
| </div> | |
| <div id="actionsSection" style="display:none"> | |
| <div class="section-label" style="margin-top:2rem">Key Actions</div> | |
| <div id="actionGallery"></div> | |
| </div> | |
| <!-- Activity Log (collapsible) --> | |
| <div class="section-label" style="margin-top:2.5rem">Activity Log</div> | |
| <div class="log-toggle" id="logToggle">▶ Show 11 actions + 13 checkpoints</div> | |
| <div class="event-log" id="eventLog"> | |
| <table> | |
| <thead><tr><th style="width:60px">Time</th><th style="width:60px">Type</th><th>Event</th></tr></thead> | |
| <tbody id="eventLogBody"></tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Right column: sticky video --> | |
| <div class="main-right"> | |
| <div class="video-section"> | |
| <div class="player-container" id="playerContainer"> | |
| <div id="videoPlayer"></div> | |
| <div class="subtitle-overlay" id="subtitleOverlay"></div> | |
| </div> | |
| <div class="timeline" id="timelineBar"></div> | |
| <div class="timeline-times"><span>00:00</span><span>06:31</span></div> | |
| </div> | |
| <div class="supplemental-videos" id="supplementalVideos"></div> | |
| </div> | |
| </main> | |
| </div> | |
| <div class="lightbox" id="lightbox"> | |
| <button class="lightbox-close" id="lightboxClose">×</button> | |
| <img id="lightboxImg" src="" alt="Screenshot"> | |
| </div> | |
| <script> | |
| (function() { | |
| const videoAvailable = true; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment