<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster)</title>
<style>
/* OKLCH-based dark theme with APCA contrast optimization */
:root {
/* High contrast OKLCH neutrals for accessibility */
--bg: oklch(0.11 0.015 250); /* Deep dark background */
--surface: oklch(0.16 0.02 250); /* Card surfaces */
--surface-2: oklch(0.19 0.022 250); /* Alternate surfaces */
--surface-3: oklch(0.22 0.025 250); /* Hover states */
/* APCA-optimized text colors */
--text: oklch(0.95 0.008 250); /* Primary text - high contrast */
--text-secondary: oklch(0.82 0.012 250); /* Secondary text */
--muted: oklch(0.62 0.018 250); /* Muted text */
/* High contrast accent colors using OKLCH */
--accent: oklch(0.70 0.18 240); /* Blue accent */
--accent-2: oklch(0.72 0.16 160); /* Green accent */
--accent-3: oklch(0.78 0.15 70); /* Amber accent */
--accent-4: oklch(0.68 0.20 20); /* Red accent */
--accent-5: oklch(0.70 0.18 280); /* Purple accent */
/* APCA-optimized border colors */
--border: oklch(0.28 0.02 250); /* Subtle borders */
--border-strong: oklch(0.35 0.025 250); /* Strong borders */
/* Design tokens */
--radius: 16px;
--radius-sm: 8px;
--shadow: 0 4px 6px -1px oklch(0.0 0.0 0 / 0.3), 0 2px 4px -1px oklch(0.0 0.0 0 / 0.2);
--shadow-lg: 0 10px 15px -3px oklch(0.0 0.0 0 / 0.3), 0 4px 6px -2px oklch(0.0 0.0 0 / 0.2);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: linear-gradient(135deg, var(--bg) 0%, oklch(0.13 0.018 260) 100%);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 60px;
padding: 40px 20px;
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
h1 {
font-size: clamp(28px, 5vw, 42px);
margin: 0 0 16px 0;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-5) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
letter-spacing: -0.02em;
}
.subtitle {
color: var(--muted);
font-size: 18px;
margin: 0 0 20px 0;
}
.meta-info {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 20px;
}
.meta-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
font-size: 14px;
}
/* Section Styles */
.section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.section:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.section-icon {
font-size: 24px;
}
h2 {
font-size: 24px;
margin: 0;
font-weight: 600;
color: var(--text);
}
/* Grid Layouts */
.grid {
display: grid;
gap: 20px;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Cards with APCA contrast optimization */
.card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: calc(var(--radius) - 4px);
padding: 20px;
transition: all 0.2s ease;
color: var(--text);
}
.card:hover {
background: var(--surface-3);
border-color: var(--accent);
transform: translateY(-1px);
}
.card-title {
font-weight: 600;
color: var(--accent);
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-value {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.card-description {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}
/* Progress Bars - Minimal Design */
.progress-bar {
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: 4px;
height: 6px;
overflow: hidden;
margin: 8px 0;
}
.progress-fill {
height: 100%;
background: var(--accent);
border-radius: 4px;
transition: width 0.3s ease;
}
/* Badges - Minimal Design */
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.4px;
border: 1px solid var(--border);
}
.badge-primary {
background: var(--surface-2);
color: var(--accent);
border-color: var(--accent);
}
.badge-success {
background: var(--surface-2);
color: var(--accent-2);
border-color: var(--accent-2);
}
.badge-warning {
background: var(--surface-2);
color: var(--accent-3);
border-color: var(--accent-3);
}
.badge-danger {
background: var(--surface-2);
color: var(--accent-4);
border-color: var(--accent-4);
}
/* Utility Classes */
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--accent); }
.text-success { color: var(--accent-2); }
.text-warning { color: var(--accent-3); }
.text-danger { color: var(--accent-4); }
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
border-top: 1px solid var(--border);
margin-top: 60px;
color: var(--muted);
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 10px;
}
.section {
padding: 20px;
}
.grid-2, .grid-3, .grid-4 {
grid-template-columns: 1fr;
}
.meta-info {
flex-direction: column;
gap: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Rick Astley - Never Gonna Give You Up (Official Video) (4K Remaster)</h1>
<p class="subtitle">Comprehensive Video Analysis Dashboard</p>
<div class="meta-info">
<div class="meta-item">
<span>📺</span>
<span>Rick Astley</span>
</div>
<div class="meta-item">
<span>⏱️</span>
<span>3m 33s</span>
</div>
<div class="meta-item">
<span>👁️</span>
<span>1,738,771,066 views</span>
</div>
<div class="meta-item">
<span>👍</span>
<span>18,772,325 likes</span>
</div>
<div class="meta-item">
<span>📅</span>
<span>25/10/2009</span>
</div>
</div>
</header>
<section class="section">
<div class="section-header">
<span class="section-icon">📊</span>
<h2>Content Overview</h2>
</div>
<div class="grid grid-4">
<div class="card text-center">
<div class="card-title">Total Chunks</div>
<div class="card-value">1</div>
<div class="card-description">Content segments</div>
</div>
<div class="card text-center">
<div class="card-title">Total Words</div>
<div class="card-value">326</div>
<div class="card-description">Transcribed content</div>
</div>
<div class="card text-center">
<div class="card-title">Avg Words/Chunk</div>
<div class="card-value">326</div>
<div class="card-description">Content density</div>
</div>
<div class="card text-center">
<div class="card-title">High Quality</div>
<div class="card-value">1</div>
<div class="card-description">Premium chunks</div>
</div>
</div>
</section>
<section class="section">
<div class="section-header">
<span class="section-icon">📝</span>
<h2>Content Chunks</h2>
</div>
<div class="grid grid-3">
<div class="card">
<div class="card-title">Chunk 1 <span class="badge badge-success">High</span></div>
<div class="card-description">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 style="margin-top: 10px; font-size: 12px; color: var(--muted);">
326 words • 0:00 - 3:33
</div>
</div>
</div>
</section>
<section class="section">
<div class="section-header">
<span class="section-icon">🔑</span>
<h2>Top Keywords</h2>
</div>
<div style="padding: 20px;">
<span class="badge badge-primary" style="margin: 4px;">gonna (31)</span>
<span class="badge badge-primary" style="margin: 4px;">never (29)</span>
<span class="badge badge-primary" style="margin: 4px;">give (8)</span>
<span class="badge badge-primary" style="margin: 4px;">tell (6)</span>
<span class="badge badge-primary" style="margin: 4px;">make (6)</span>
<span class="badge badge-primary" style="margin: 4px;">down (5)</span>
<span class="badge badge-primary" style="margin: 4px;">around (4)</span>
<span class="badge badge-primary" style="margin: 4px;">he's (4)</span>
<span class="badge badge-primary" style="margin: 4px;">right (4)</span>
<span class="badge badge-primary" style="margin: 4px;">goodbye (4)</span>
<span class="badge badge-primary" style="margin: 4px;">hurt (4)</span>
<span class="badge badge-primary" style="margin: 4px;">we've (4)</span>
<span class="badge badge-primary" style="margin: 4px;">known (4)</span>
<span class="badge badge-primary" style="margin: 4px;">know (3)</span>
<span class="badge badge-primary" style="margin: 4px;">other (3)</span>
</div>
</section>
<section class="section">
<div class="section-header">
<span class="section-icon">⭐</span>
<h2>Quality Distribution</h2>
</div>
<div class="grid grid-3">
<div class="card text-center">
<div class="card-title">High Quality</div>
<div class="card-value text-success">1</div>
<div class="card-description">100.0% of chunks</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 100.0%; background: var(--accent-2);"></div>
</div>
</div>
<div class="card text-center">
<div class="card-title">Medium Quality</div>
<div class="card-value text-warning">0</div>
<div class="card-description">0.0% of chunks</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 0.0%; background: var(--accent-3);"></div>
</div>
</div>
<div class="card text-center">
<div class="card-title">Low Quality</div>
<div class="card-value text-danger">0</div>
<div class="card-description">0.0% of chunks</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 0.0%; background: var(--accent-4);"></div>
</div>
</div>
</div>
</section>
<footer>
<p>Generated by ytpipe • Advanced YouTube Content Processing Pipeline</p>
<p style="font-size: 12px; color: var(--muted);">
This dashboard provides comprehensive analysis of video content including
transcription, semantic chunking, quality assessment, and keyword extraction.
</p>
</footer>
</div>
</body>
</html>
