<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenClaw + WordPress is INSANE! (FREE!) - ytpipe Lab</title>
<style>
:root {
--white: #FFFFFF;
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #E5E5E5;
--gray-300: #D4D4D4;
--gray-600: #525252;
--gray-700: #404040;
--black: #000000;
--blue: #0066FF;
--blue-light: #E6F0FF;
--green: #059669;
--yellow: #F59E0B;
--red: #DC2626;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Inter', sans-serif;
background: var(--gray-50);
color: var(--black);
line-height: 1.5;
}
.header {
background: var(--white);
border-bottom: 1px solid var(--gray-200);
padding: 12px 24px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.logo { font-size: 18px; font-weight: 600; letter-spacing: -0.5px; }
.status-pill {
background: var(--blue-light);
color: var(--blue);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
}
.layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
}
.score-banner {
background: linear-gradient(135deg, var(--blue), #0052CC);
color: white;
padding: 20px 24px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.score-grade {
font-size: 48px;
font-weight: 700;
min-width: 80px;
text-align: center;
}
.score-number {
font-size: 24px;
font-weight: 700;
}
.score-label {
font-size: 13px;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.video-container {
background: var(--black);
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
margin-bottom: 16px;
}
#player {
width: 100%;
height: 100%;
}
.metadata-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 16px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
margin-bottom: 16px;
}
.meta-item {
text-align: center;
}
.meta-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gray-600);
font-weight: 600;
}
.meta-value {
font-size: 16px;
font-weight: 700;
margin-top: 4px;
}
.timeline-section {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.timeline-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gray-600);
margin-bottom: 8px;
font-weight: 600;
}
.timeline-bar {
height: 8px;
background: var(--gray-200);
border-radius: 4px;
position: relative;
cursor: pointer;
}
.timeline-bar:hover {
background: var(--gray-300);
}
.timeline-progress {
height: 100%;
background: var(--blue);
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
}
.chunk-marker {
position: absolute;
width: 3px;
height: 12px;
background: var(--blue);
top: -2px;
border-radius: 2px;
cursor: pointer;
}
.chunk-marker:hover {
background: var(--yellow);
height: 16px;
top: -4px;
}
.chapters-section {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.chapter-item {
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.chapter-item:hover {
background: var(--gray-100);
}
.chapter-time {
font-size: 11px;
font-weight: 600;
color: var(--blue);
font-family: 'SF Mono', monospace;
}
.chapter-title {
font-size: 13px;
font-weight: 500;
flex: 1;
margin-left: 12px;
}
.transcript-section {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 20px;
max-height: 600px;
overflow-y: auto;
}
.section-header {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gray-600);
margin-bottom: 16px;
font-weight: 600;
}
.chunk-row {
display: grid;
grid-template-columns: 60px 1fr;
gap: 12px;
padding: 12px;
border-bottom: 1px solid var(--gray-200);
cursor: pointer;
transition: all 0.2s;
}
.chunk-row:hover {
background: var(--gray-50);
}
.chunk-row.active {
background: var(--blue-light);
border-left: 3px solid var(--blue);
}
.chunk-time {
font-size: 11px;
font-weight: 600;
color: var(--blue);
font-family: 'SF Mono', monospace;
}
.chunk-text {
font-size: 13px;
line-height: 1.6;
color: var(--gray-700);
}
/* Sidebar */
.sidebar {
display: flex;
flex-direction: column;
gap: 16px;
}
.card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 16px;
}
.card-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--gray-600);
margin-bottom: 12px;
font-weight: 600;
}
.summary-text {
font-size: 14px;
line-height: 1.7;
color: var(--gray-700);
}
.action-item {
display: flex;
align-items: start;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--gray-100);
}
.action-item:last-child { border-bottom: none; }
.checkbox {
width: 16px;
height: 16px;
border: 2px solid var(--gray-300);
border-radius: 4px;
margin-top: 2px;
cursor: pointer;
}
.checkbox:hover { border-color: var(--blue); }
.action-text {
font-size: 13px;
line-height: 1.5;
color: var(--gray-700);
flex: 1;
}
.concept-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pill {
background: var(--gray-100);
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: var(--gray-700);
}
.gauge-container {
padding: 8px 0;
}
.gauge-label {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
}
.gauge-bar {
height: 6px;
background: var(--gray-200);
border-radius: 3px;
overflow: hidden;
}
.gauge-fill {
height: 100%;
background: var(--blue);
border-radius: 3px;
}
.footer {
background: var(--white);
border-top: 1px solid var(--gray-200);
padding: 16px 24px;
margin-top: 40px;
text-align: center;
font-size: 11px;
color: var(--gray-600);
}
</style>
</head>
<body>
<header class="header">
<div class="logo">yt pipe</div>
<div class="status-pill">Processed ✓</div>
<div style="display: flex; gap: 12px;">
<button style="border: 1px solid var(--gray-200); background: white; padding: 6px 12px; border-radius: 6px; cursor: pointer;">📊 Export</button>
<button style="border: 1px solid var(--gray-200); background: white; padding: 6px 12px; border-radius: 6px; cursor: pointer;">⚙️</button>
</div>
</header>
<main class="container">
<div class="layout">
<!-- Main Column -->
<div class="main-col">
<!-- Score Card (Prominent) -->
<div class="score-banner">
<div class="score-grade">C+</div>
<div class="score-details">
<div class="score-number">6.2/10</div>
<div class="score-label">Overall Quality Score</div>
</div>
</div>
<!-- Video Player -->
<div class="video-container">
<div id="player"></div>
</div>
<!-- Metadata Strip -->
<div class="metadata-strip">
<div class="meta-item">
<div class="meta-label">CHANNEL</div>
<div class="meta-value">Julian Goldie SEO</div>
</div>
<div class="meta-item">
<div class="meta-label">DURATION</div>
<div class="meta-value">18m 27s</div>
</div>
<div class="meta-item">
<div class="meta-label">VIEWS</div>
<div class="meta-value">7,746</div>
</div>
<div class="meta-item">
<div class="meta-label">QUALITY</div>
<div class="meta-value">6.2/10</div>
</div>
</div>
<!-- Interactive Timeline -->
<div class="timeline-section">
<div class="timeline-label">TIMELINE</div>
<div class="timeline-bar" id="timeline">
<div class="timeline-progress" id="timeline-progress"></div>
<!-- Chunk markers will be added by JS -->
</div>
</div>
<!-- Chapters Navigation -->
<div class="chapters-section">
<div class="section-header">CHAPTERS (5)</div>
<div class="chapter-item" onclick="seekToTimestamp('0:00')">
<div class="chapter-time">0:00</div>
<div class="chapter-title">Section 1</div>
</div>
<div class="chapter-item" onclick="seekToTimestamp('4:31')">
<div class="chapter-time">4:31</div>
<div class="chapter-title">Section 2</div>
</div>
<div class="chapter-item" onclick="seekToTimestamp('8:56')">
<div class="chapter-time">8:56</div>
<div class="chapter-title">Section 3</div>
</div>
<div class="chapter-item" onclick="seekToTimestamp('13:21')">
<div class="chapter-time">13:21</div>
<div class="chapter-title">Section 4</div>
</div>
<div class="chapter-item" onclick="seekToTimestamp('17:52')">
<div class="chapter-time">17:52</div>
<div class="chapter-title">Section 5</div>
</div>
</div>
<!-- Transcript Section -->
<div class="transcript-section">
<div class="section-header">TRANSCRIPT (5 CHUNKS)</div>
<div class="chunk-row" data-chunk-id="0" data-timestamp="0:00">
<div class="chunk-time">0:00</div>
<div class="chunk-text">So the other thing that I want to test is open, claw and WordPress as you can see right here. So I want to try this out and what we can actually do, I think is we can set up WordPress directly with op...</div>
</div>
<div class="chunk-row" data-chunk-id="1" data-timestamp="4:31">
<div class="chunk-time">4:31</div>
<div class="chunk-text">for each of these, and then you can look and say, okay, like, is this skills MD file like right for me to install? Should I install it or not, right? So you can see an example right here. And then whe...</div>
</div>
<div class="chunk-row" data-chunk-id="2" data-timestamp="8:56">
<div class="chunk-time">8:56</div>
<div class="chunk-text">There we go, this Topic. That's it. You want to be in the AR Profit Boarding, make, get yourself in there. Yeah, step number one, make sure you're in the right school group. If you want to get this st...</div>
</div>
<div class="chunk-row" data-chunk-id="3" data-timestamp="13:21">
<div class="chunk-time">13:21</div>
<div class="chunk-text">web pages more customizable and insights be insights, blah, blah, blah. You can do more better SEO just to tip from a web dev. This stuff has been keeping me up at night. So I'll look about the same. ...</div>
</div>
<div class="chunk-row" data-chunk-id="4" data-timestamp="17:52">
<div class="chunk-time">17:52</div>
<div class="chunk-text">it and improve it for sure. I am going to chain three to four together for my business, one marketing, one coding, one customer service, and one model does AI training, possibly training a model on a ...</div>
</div>
</div>
</div>
<!-- Sidebar -->
<aside class="sidebar">
<!-- Summary -->
<div class="card">
<div class="card-title">📝 SUMMARY</div>
<div class="summary-text">Video titled 'OpenClaw + WordPress is INSANE! (FREE!)' by Julian Goldie SEO. Duration: 18m 27s. Contains 5 content segments covering 3716 words of transcribed material.</div>
</div>
<!-- Action Items -->
<div class="card">
<div class="card-title">✅ ACTION ITEMS</div>
<div class="action-item">
<div class="checkbox"></div>
<div class="action-text">Review video content</div>
</div>
<div class="action-item">
<div class="checkbox"></div>
<div class="action-text">Take notes on key points</div>
</div>
<div class="action-item">
<div class="checkbox"></div>
<div class="action-text">Apply insights to your work</div>
</div>
</div>
<!-- Key Concepts -->
<div class="card">
<div class="card-title">🔑 KEY CONCEPTS</div>
<div class="concept-pills">
<span class="pill">right</span>
<span class="pill">set</span>
<span class="pill">want</span>
<span class="pill">says</span>
<span class="pill">open</span>
<span class="pill">skills</span>
<span class="pill">inside</span>
<span class="pill">cloud</span>
<span class="pill">claw</span>
<span class="pill">using</span>
<span class="pill">stuff</span>
<span class="pill">sure</span>
<span class="pill">check</span>
<span class="pill">wordpress</span>
<span class="pill">example</span>
</div>
</div>
<!-- Sentiment -->
<div class="card">
<div class="card-title">💭 SENTIMENT</div>
<div class="gauge-container">
<div class="gauge-label">Neutral</div>
<div class="gauge-bar">
<div class="gauge-fill" style="width: 50%;"></div>
</div>
</div>
</div>
</aside>
</div>
</main>
<footer class="footer">
Processed with whisper-ai-base • 2026-02-04 22:58:49 • 3716 words analyzed • ytpipe v2.0
</footer>
<!-- YouTube IFrame API -->
<script src="https://www.youtube.com/iframe_api"></script>
<script>
// Global player variable
let player;
const chunks = [{"id": 0, "text": "So the other thing that I want to test is open, claw and WordPress as you can see right here. So I want to try this out and what we can actually do, I think is we can set up WordPress directly with op", "timestamp": "0:00", "timestamp_seconds": 0}, {"id": 1, "text": "for each of these, and then you can look and say, okay, like, is this skills MD file like right for me to install? Should I install it or not, right? So you can see an example right here. And then whe", "timestamp": "4:31", "timestamp_seconds": 271}, {"id": 2, "text": "There we go, this Topic. That's it. You want to be in the AR Profit Boarding, make, get yourself in there. Yeah, step number one, make sure you're in the right school group. If you want to get this st", "timestamp": "8:56", "timestamp_seconds": 536}, {"id": 3, "text": "web pages more customizable and insights be insights, blah, blah, blah. You can do more better SEO just to tip from a web dev. This stuff has been keeping me up at night. So I'll look about the same. ", "timestamp": "13:21", "timestamp_seconds": 801}, {"id": 4, "text": "it and improve it for sure. I am going to chain three to four together for my business, one marketing, one coding, one customer service, and one model does AI training, possibly training a model on a ", "timestamp": "17:52", "timestamp_seconds": 1072}];
const sections = [{"timestamp": "0:00", "title": "Section 1", "seconds": 0}, {"timestamp": "4:31", "title": "Section 2", "seconds": 271}, {"timestamp": "8:56", "title": "Section 3", "seconds": 536}, {"timestamp": "13:21", "title": "Section 4", "seconds": 801}, {"timestamp": "17:52", "title": "Section 5", "seconds": 1072}];
let currentChunkIndex = -1;
// Initialize YouTube player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '-lC4UY3xcxw',
width: '100%',
height: '100%',
playerVars: {
'modestbranding': 1,
'rel': 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('✅ Player ready');
setupTimeline();
setupChunkMarkers();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
startTimeTracking();
}
}
// Time tracking for active chunk
let timeTracker;
function startTimeTracking() {
if (timeTracker) clearInterval(timeTracker);
timeTracker = setInterval(() => {
if (!player || !player.getCurrentTime) return;
const currentTime = player.getCurrentTime();
updateTimelineProgress(currentTime);
updateActiveChunk(currentTime);
}, 500);
}
function updateTimelineProgress(currentTime) {
const duration = player.getDuration();
const progress = (currentTime / duration) * 100;
document.getElementById('timeline-progress').style.width = progress + '%';
}
function updateActiveChunk(currentTime) {
for (let i = 0; i < chunks.length; i++) {
const chunk = chunks[i];
if (currentTime >= chunk.timestamp_seconds) {
if (currentChunkIndex !== i) {
setActiveChunk(i);
}
}
}
}
function setActiveChunk(index) {
// Remove previous active
document.querySelectorAll('.chunk-row').forEach(row => {
row.classList.remove('active');
});
// Set new active
const chunkRow = document.querySelector(`[data-chunk-id="${index}"]`);
if (chunkRow) {
chunkRow.classList.add('active');
chunkRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
currentChunkIndex = index;
}
// Setup timeline click
function setupTimeline() {
const timeline = document.getElementById('timeline');
timeline.addEventListener('click', (e) => {
const rect = timeline.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const percentage = clickX / rect.width;
const duration = player.getDuration();
const seekTime = duration * percentage;
player.seekTo(seekTime, true);
player.playVideo();
});
}
// Setup chunk markers on timeline
function setupChunkMarkers() {
const timeline = document.getElementById('timeline');
const duration = player.getDuration();
chunks.forEach(chunk => {
const marker = document.createElement('div');
marker.className = 'chunk-marker';
marker.style.left = (chunk.timestamp_seconds / duration * 100) + '%';
marker.title = chunk.timestamp;
timeline.appendChild(marker);
});
}
// Seek to timestamp
function seekToTimestamp(timestampStr) {
const seconds = parseTimestamp(timestampStr);
player.seekTo(seconds, true);
player.playVideo();
}
function parseTimestamp(ts) {
const parts = ts.split(':');
if (parts.length === 2) {
return parseInt(parts[0]) * 60 + parseInt(parts[1]);
} else if (parts.length === 3) {
return parseInt(parts[0]) * 3600 + parseInt(parts[1]) * 60 + parseInt(parts[2]);
}
return 0;
}
// Chunk click handler
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.chunk-row').forEach((row, index) => {
row.addEventListener('click', () => {
const timestamp = row.dataset.timestamp;
seekToTimestamp(timestamp);
});
});
});
</script>
</body>
</html>
