| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Layout 5: Compact Horizontal</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| :root { |
| --bg-primary: #121212; |
| --bg-secondary: #1e1e1e; |
| --bg-tertiary: #2a2a2a; |
| --border-color: #333; |
| --text-primary: #fff; |
| --text-secondary: #aaa; |
| --text-muted: #666; |
| --accent: #4a9eff; |
| --accent-hover: #6ab0ff; |
| --danger: #ff4a4a; |
| } |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; |
| background-color: var(--bg-primary); |
| color: var(--text-primary); |
| height: 100vh; |
| overflow: hidden; |
| } |
| .avatar { |
| width: 40px; height: 40px; border-radius: 50%; |
| background: linear-gradient(135deg, var(--accent), #6366f1); |
| display: flex; align-items: center; justify-content: center; |
| font-weight: 600; font-size: 16px; flex-shrink: 0; |
| } |
| .face-thumb { width: 48px; height: 48px; border-radius: 8px; background: var(--bg-tertiary); flex-shrink: 0; } |
| .btn { |
| padding: 8px 16px; border-radius: 6px; border: none; |
| cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; |
| } |
| .btn-primary { background: var(--accent); color: white; } |
| .btn-primary:hover { background: var(--accent-hover); } |
| .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); } |
| .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); } |
| .btn-danger:hover { background: var(--danger); color: white; } |
| .btn-small { padding: 6px 12px; font-size: 12px; } |
| input, select { |
| padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-color); |
| background: var(--bg-tertiary); color: var(--text-primary); font-size: 13px; |
| } |
| ::-webkit-scrollbar { width: 8px; height: 6px; } |
| ::-webkit-scrollbar-track { background: var(--bg-secondary); } |
| ::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; } |
| |
| |
| .main-container { height: 100vh; display: flex; flex-direction: column; } |
| .top-bar { |
| display: flex; align-items: center; gap: 20px; |
| padding: 12px 20px; background: var(--bg-secondary); |
| border-bottom: 1px solid var(--border-color); |
| } |
| .top-bar .tabs { display: flex; gap: 4px; } |
| .top-bar .tab { |
| padding: 6px 16px; background: transparent; border: none; |
| border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 13px; |
| } |
| .top-bar .tab.active { background: var(--bg-tertiary); color: var(--text-primary); } |
| .top-bar .search-input { width: 240px; } |
| .top-bar .actions { margin-left: auto; display: flex; gap: 8px; } |
| .people-strip { |
| width: 100%; height: 100px; background: var(--bg-secondary); |
| border-bottom: 1px solid var(--border-color); |
| padding: 12px; display: flex; gap: 16px; overflow-x: auto; flex-shrink: 0; |
| } |
| .person-pill { |
| display: flex; flex-direction: column; align-items: center; gap: 6px; |
| padding: 8px 12px; background: var(--bg-tertiary); border-radius: 8px; |
| cursor: pointer; min-width: 80px; border: 2px solid transparent; |
| } |
| .person-pill:hover { border-color: var(--border-color); } |
| .person-pill.selected { border-color: var(--accent); background: rgba(74, 158, 255, 0.1); } |
| .person-pill .avatar { width: 36px; height: 36px; font-size: 14px; } |
| .person-pill-name { font-size: 11px; white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis; } |
| .main-area { flex: 1; display: flex; overflow: hidden; } |
| .unknown-sidebar { |
| width: 260px; background: var(--bg-secondary); |
| border-right: 1px solid var(--border-color); |
| display: flex; flex-direction: column; |
| } |
| .unknown-header { padding: 12px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 600; } |
| .unknown-list { flex: 1; overflow-y: auto; padding: 8px; } |
| .unknown-item { |
| display: flex; align-items: center; gap: 10px; |
| padding: 10px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; |
| } |
| .unknown-item:hover { background: var(--bg-tertiary); } |
| .unknown-item.selected { background: rgba(74, 158, 255, 0.15); } |
| .unknown-item .face-thumb { width: 44px; height: 44px; } |
| .unknown-item-info { flex: 1; min-width: 0; } |
| .unknown-item-count { font-size: 13px; font-weight: 500; } |
| .unknown-item-video { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; } |
| .content-header { |
| padding: 16px 20px; border-bottom: 1px solid var(--border-color); |
| display: flex; align-items: center; gap: 16px; |
| } |
| .content-header h2 { font-size: 16px; } |
| .content-header .assign-controls { display: flex; gap: 8px; margin-left: auto; } |
| .content-header select { width: 180px; } |
| .content-body { flex: 1; overflow-y: auto; padding: 20px; } |
| .appearances-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } |
| .appearance-item { |
| background: var(--bg-secondary); border-radius: 8px; overflow: hidden; |
| cursor: pointer; border: 2px solid transparent; |
| } |
| .appearance-item:hover { border-color: var(--border-color); } |
| .appearance-item.selected { border-color: var(--accent); } |
| .appearance-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-tertiary); } |
| .appearance-item-info { padding: 8px; font-size: 11px; color: var(--text-secondary); } |
| </style> |
| </head> |
| <body> |
| <div class="main-container"> |
| <div class="top-bar"> |
| <div class="tabs"> |
| <button class="tab active">Manage Faces</button> |
| <button class="tab">Search by Face</button> |
| </div> |
| <input class="search-input" placeholder="Filter by name or video..."> |
| <div class="actions"> |
| <button class="btn btn-secondary">+ Add Person</button> |
| </div> |
| </div> |
| <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden;"> |
| <div class="people-strip"> |
| <div class="person-pill"> |
| <div class="avatar">JW</div> |
| <span class="person-pill-name">John Wilson</span> |
| </div> |
| <div class="person-pill selected"> |
| <div class="avatar">SM</div> |
| <span class="person-pill-name">Sarah Mitchell</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">RJ</div> |
| <span class="person-pill-name">Robert Jackson</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">EL</div> |
| <span class="person-pill-name">Emily Lawrence</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">MT</div> |
| <span class="person-pill-name">Michael T.</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">DK</div> |
| <span class="person-pill-name">David King</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">LM</div> |
| <span class="person-pill-name">Lisa Martinez</span> |
| </div> |
| <div class="person-pill"> |
| <div class="avatar">+</div> |
| <span class="person-pill-name">Add New</span> |
| </div> |
| </div> |
| <div class="main-area"> |
| <div class="unknown-sidebar"> |
| <div class="unknown-header">Unknown Faces (47)</div> |
| <div class="unknown-list"> |
| <div class="unknown-item selected"> |
| <div class="face-thumb"></div> |
| <div class="unknown-item-info"> |
| <div class="unknown-item-count">8 appearances</div> |
| <div class="unknown-item-video">Morning Worship +3 more</div> |
| </div> |
| </div> |
| <div class="unknown-item"> |
| <div class="face-thumb"></div> |
| <div class="unknown-item-info"> |
| <div class="unknown-item-count">6 appearances</div> |
| <div class="unknown-item-video">Convention Part 1</div> |
| </div> |
| </div> |
| <div class="unknown-item"> |
| <div class="face-thumb"></div> |
| <div class="unknown-item-info"> |
| <div class="unknown-item-count">5 appearances</div> |
| <div class="unknown-item-video">Studio Tour</div> |
| </div> |
| </div> |
| <div class="unknown-item"> |
| <div class="face-thumb"></div> |
| <div class="unknown-item-info"> |
| <div class="unknown-item-count">4 appearances</div> |
| <div class="unknown-item-video">Documentary</div> |
| </div> |
| </div> |
| <div class="unknown-item"> |
| <div class="face-thumb"></div> |
| <div class="unknown-item-info"> |
| <div class="unknown-item-count">4 appearances</div> |
| <div class="unknown-item-video">Special Talk</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="content-area"> |
| <div class="content-header"> |
| <div class="face-thumb" style="width: 48px; height: 48px;"></div> |
| <div> |
| <h2>Unknown Person</h2> |
| <span style="font-size: 13px; color: var(--text-secondary);">8 appearances in 4 videos</span> |
| </div> |
| <div class="assign-controls"> |
| <select><option>Assign to person...</option></select> |
| <button class="btn btn-primary">Assign All</button> |
| <button class="btn btn-danger btn-small">Delete Selected</button> |
| </div> |
| </div> |
| <div class="content-body"> |
| <div class="appearances-grid"> |
| <div class="appearance-item selected"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Morning Worship - Frame 245</div></div> |
| <div class="appearance-item selected"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Morning Worship - Frame 890</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Annual Meeting - Frame 1024</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Annual Meeting - Frame 2100</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Studio Tour - Frame 567</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Studio Tour - Frame 890</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Interview - Frame 234</div></div> |
| <div class="appearance-item"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect fill='%232a2a2a' width='160' height='90'/%3E%3C/svg%3E"><div class="appearance-item-info">Interview - Frame 567</div></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
|
|
