<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster) - ytpipe Lab</title>
<style>
:root {
/* Clinical White Palette */
--bg-white: #FFFFFF;
--bg-gray-50: #FAFAFA;
--bg-gray-100: #F5F5F5;
--border-gray: #E5E5E5;
--border-dark: #D4D4D4;
--text-black: #000000;
--text-gray: #525252;
--text-muted: #A3A3A3;
--accent-blue: #0066FF;
--accent-blue-light: #E6F0FF;
/* Sentiment colors */
--sentiment-positive: #059669;
--sentiment-neutral: #6B7280;
--sentiment-negative: #DC2626;
/* Design tokens */
--radius: 12px;
--radius-sm: 6px;
--shadow: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro', 'Segoe UI', Roboto, sans-serif;
background: var(--bg-gray-50);
color: var(--text-black);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Header */
.header {
background: var(--bg-white);
border-bottom: 1px solid var(--border-gray);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-size: 18px;
font-weight: 600;
color: var(--text-black);
letter-spacing: -0.5px;
}
.status-pill {
background: var(--accent-blue-light);
color: var(--accent-blue);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.header-actions {
display: flex;
gap: 12px;
align-items: center;
}
.icon-btn {
width: 32px;
height: 32px;
border: 1px solid var(--border-gray);
border-radius: var(--radius-sm);
background: var(--bg-white);
cursor: pointer;
display: grid;
place-items: center;
font-size: 16px;
}
.icon-btn:hover {
background: var(--bg-gray-100);
}
/* Container */
.container {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
}
.layout-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 1024px) {
.layout-grid {
grid-template-columns: 1fr 380px;
}
}
/* Video Section */
.video-container {
background: var(--bg-white);
border: 1px solid var(--border-gray);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 16px;
}
.video-embed {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
border: none;
}
.metadata-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-gray);
}
.metadata-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.metadata-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
font-weight: 500;
}
.metadata-value {
font-size: 14px;
font-weight: 600;
color: var(--text-black);
}
.timeline-bar {
height: 4px;
background: var(--bg-gray-100);
border-radius: 2px;
margin-top: 12px;
position: relative;
}
.chunk-marker {
position: absolute;
width: 2px;
height: 8px;
background: var(--accent-blue);
top: -2px;
}
/* Sidebar Cards */
.sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}
.card {
background: var(--bg-white);
border: 1px solid var(--border-gray);
border-radius: var(--radius);
padding: 16px;
}
.card-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 12px;
font-weight: 600;
}
.summary-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-list li {
font-size: 13px;
line-height: 1.5;
color: var(--text-gray);
padding-left: 16px;
position: relative;
}
.summary-list li:before {
content: "•";
position: absolute;
left: 0;
color: var(--accent-blue);
font-weight: bold;
}
.concept-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pill {
background: var(--bg-gray-100);
color: var(--text-gray);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border-gray);
}
.entity-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.entity-item {
font-size: 13px;
color: var(--text-gray);
display: flex;
justify-content: space-between;
}
.entity-count {
color: var(--text-muted);
font-size: 12px;
}
.gauge {
width: 100%;
height: 6px;
background: var(--bg-gray-100);
border-radius: 3px;
position: relative;
margin-top: 8px;
}
.gauge-fill {
height: 100%;
background: var(--accent-blue);
border-radius: 3px;
transition: width 0.3s ease;
}
.gauge-label {
font-size: 14px;
font-weight: 600;
color: var(--text-black);
margin-bottom: 4px;
}
/* Transcript Section */
.transcript-section {
background: var(--bg-white);
border: 1px solid var(--border-gray);
border-radius: var(--radius);
padding: 20px;
margin-top: 16px;
}
.section-header {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border-gray);
padding-bottom: 12px;
}
.chunk-row {
display: grid;
grid-template-columns: 60px 50px 1fr;
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--border-gray);
align-items: start;
}
.chunk-row:last-child {
border-bottom: none;
}
.chunk-row:hover {
background: var(--bg-gray-50);
}
.chunk-timestamp {
font-size: 11px;
font-weight: 600;
color: var(--accent-blue);
font-family: 'SF Mono', 'Courier New', monospace;
}
.chunk-id {
font-size: 11px;
color: var(--text-muted);
font-family: 'SF Mono', 'Courier New', monospace;
}
.chunk-text {
font-size: 13px;
line-height: 1.6;
color: var(--text-gray);
}
/* Footer */
.footer {
background: var(--bg-white);
border-top: 1px solid var(--border-gray);
padding: 16px 24px;
margin-top: 40px;
text-align: center;
}
.run-log {
font-size: 11px;
color: var(--text-muted);
font-family: 'SF Mono', 'Courier New', monospace;
line-height: 1.8;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">yt pipe</div>
<div class="status-pill">Processed ✓</div>
<div class="header-actions">
<button class="icon-btn" title="Export">📊</button>
<button class="icon-btn" title="Settings">⚙️</button>
</div>
</header>
<main class="container">
<div class="layout-grid">
<div class="main-column">
<div class="video-container">
<iframe
class="video-embed"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<div class="metadata-strip">
<div class="metadata-item">
<div class="metadata-label">Channel</div>
<div class="metadata-value">Rick Astley</div>
</div>
<div class="metadata-item">
<div class="metadata-label">Duration</div>
<div class="metadata-value">3m 33s</div>
</div>
<div class="metadata-item">
<div class="metadata-label">Published</div>
<div class="metadata-value">25/10/2009</div>
</div>
<div class="metadata-item">
<div class="metadata-label">Views</div>
<div class="metadata-value">1,738,771,804</div>
</div>
<div class="metadata-item">
<div class="metadata-label">Language</div>
<div class="metadata-value">EN</div>
</div>
<div class="metadata-item">
<div class="metadata-label">Confidence</div>
<div class="metadata-value">8.0/10</div>
</div>
</div>
<div class="timeline-bar">
<!-- Chunk markers will be positioned here -->
</div>
</div>
<div class="transcript-section">
<div class="section-header">Transcript Chunks (1)</div>
<div class="chunk-row">
<div class="chunk-timestamp">0:00</div>
<div class="chunk-id">#0</div>
<div class="chunk-text">There are no strangers to love You know the rules and something I have They'll commit me to fall out thinking of You won't get this wrong any other guy I just want to tell you how I feel like Gotta ma...</div>
</div>
</div>
</div>
<aside class="sidebar">
<div class="card">
<div class="card-title">Summary</div>
<ul class="summary-list">
<li>Video titled 'Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster)'</li>
<li>Published by Rick Astley</li>
<li>Duration: 3m 33s</li>
<li>Content analyzed into 1 semantic chunks</li>
<li>Total 386 words transcribed</li>
</ul>
</div>
<div class="card">
<div class="card-title">Key Concepts</div>
<div class="concept-pills">
<span class="pill">gonna</span>
<span class="pill">never</span>
<span class="pill">give</span>
<span class="pill">tell</span>
<span class="pill">let</span>
<span class="pill">run</span>
<span class="pill">around</span>
<span class="pill">right</span>
<span class="pill">cry</span>
<span class="pill">goodbye</span>
</div>
</div>
<div class="card">
<div class="card-title">Entities</div>
<div class="entity-list">
<div class="entity-item" style="color: var(--text-muted);">No entities detected</div>
</div>
</div>
<div class="card">
<div class="card-title">Sentiment</div>
<div class="gauge-label">Neutral</div>
<div class="gauge">
<div class="gauge-fill" style="width: 50.0%; background: var(--sentiment-neutral);"></div>
</div>
</div>
<div class="card">
<div class="card-title">Difficulty</div>
<div class="gauge-label">Intermediate</div>
<div class="gauge">
<div class="gauge-fill" style="width: 50.0%;"></div>
</div>
</div>
</aside>
</div>
</main>
<footer class="footer">
<div class="run-log">
Processed with whisper-ai-base • 2026-02-04 21:33:31 • 386 words • 1 chunks generated
</div>
</footer>
</body>
</html>
