Hanzo_Dev/Generadordeguiones
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7695dd0be6c81bc89cf516f5421030dc2c354547
Generadordeguiones/docs/reference_design/analysis_detail.html
Hanzo_dev 7695dd0be6 Initial commit — Sistema Generador de Guiones V4.0 
Pipeline completo: URL → Whisper → GPT-4o → pgvector → Supabase
Frontend Vue 3 + Tailwind, Backend Express + Vercel serverless functions
2026-03-28 16:02:59 -05:00

455 lines
25 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Guiones IA - Analysis Detail View</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&amp;family=Manrope:wght@500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"on-tertiary-fixed": "#301400",
"tertiary-fixed": "#ffdcc5",
"primary-container": "#8083ff",
"on-tertiary-fixed-variant": "#703700",
"surface-container-low": "#1b1b22",
"on-primary-container": "#0d0096",
"on-error-container": "#ffdad6",
"secondary": "#4edea3",
"surface-container-high": "#2a2931",
"surface": "#13131a",
"error-container": "#93000a",
"on-secondary-fixed-variant": "#005236",
"surface-container-lowest": "#0e0e15",
"surface-container": "#1f1f26",
"primary": "#c0c1ff",
"on-secondary-container": "#00311f",
"tertiary-fixed-dim": "#ffb783",
"on-surface": "#e4e1ec",
"surface-dim": "#13131a",
"outline": "#908fa0",
"on-error": "#690005",
"on-primary-fixed-variant": "#2f2ebe",
"inverse-on-surface": "#303038",
"surface-container-highest": "#34343c",
"surface-bright": "#393840",
"tertiary-container": "#d97721",
"background": "#13131a",
"secondary-container": "#00a572",
"secondary-fixed-dim": "#4edea3",
"on-tertiary": "#4f2500",
"primary-fixed-dim": "#c0c1ff",
"on-primary-fixed": "#07006c",
"on-primary": "#1000a9",
"on-surface-variant": "#c7c4d7",
"surface-variant": "#34343c",
"secondary-fixed": "#6ffbbe",
"outline-variant": "#464554",
"error": "#ffb4ab",
"inverse-surface": "#e4e1ec",
"on-tertiary-container": "#452000",
"inverse-primary": "#494bd6",
"on-background": "#e4e1ec",
"on-secondary": "#003824",
"surface-tint": "#c0c1ff",
"tertiary": "#ffb783",
"on-secondary-fixed": "#002113",
"primary-fixed": "#e1e0ff"
},
fontFamily: {
"headline": ["Manrope"],
"body": ["Inter"],
"label": ["Inter"]
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; }
.font-headline { font-family: 'Manrope', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-panel {
background: rgba(31, 31, 38, 0.6);
backdrop-filter: blur(20px);
}
.neon-glow {
text-shadow: 0 0 10px rgba(78, 222, 163, 0.4);
}
.radial-gradient-score {
background: conic-gradient(from 0deg, #4edea3 88%, #1f1f26 0%);
}
</style>
</head>
<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
<!-- Side Navigation Rail -->
<aside class="fixed left-0 top-0 h-full z-40 flex flex-col p-4 h-screen w-64 border-r border-white/5 bg-[#13131a] dark:bg-[#13131a] font-['Manrope'] antialiased">
<div class="flex items-center gap-3 mb-10 px-2">
<div class="w-8 h-8 rounded bg-gradient-to-br from-primary-container to-primary flex items-center justify-center text-on-primary">
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">bolt</span>
</div>
<div>
<h1 class="text-xl font-bold tracking-tight text-white">Guiones IA</h1>
<p class="text-[10px] text-on-surface-variant/50 uppercase tracking-widest font-bold">Marketing Pro</p>
</div>
</div>
<nav class="flex-1 space-y-2">
<a class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white transition-all duration-200 hover:bg-white/5 group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">dashboard</span>
<span class="text-sm">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 bg-white/10 text-white rounded-lg font-semibold transition-all duration-200" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="text-sm">Analysis</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white transition-all duration-200 hover:bg-white/5 group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">description</span>
<span class="text-sm">Scripts</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white transition-all duration-200 hover:bg-white/5 group" href="#">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">settings</span>
<span class="text-sm">Settings</span>
</a>
</nav>
<button class="mt-auto w-full bg-primary-container hover:bg-primary text-on-primary-container font-bold py-3 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary-container/20 transition-all active:scale-95">
<span class="material-symbols-outlined text-sm">add</span>
<span class="text-sm">New Script</span>
</button>
</aside>
<!-- Top App Bar -->
<header class="fixed top-0 right-0 left-64 h-16 flex items-center justify-between px-8 z-30 bg-[#13131a]/80 backdrop-blur-xl transition-all border-b border-white/5">
<div class="flex items-center gap-4 bg-surface-container-lowest px-4 py-2 rounded-full border border-white/5 w-96 focus-within:ring-2 focus-within:ring-indigo-500/40">
<span class="material-symbols-outlined text-on-surface-variant text-sm">search</span>
<input class="bg-transparent border-none text-sm focus:ring-0 text-white w-full placeholder:text-on-surface-variant/50" placeholder="Search analysis history..." type="text"/>
</div>
<div class="flex items-center gap-6">
<button class="relative text-on-surface-variant hover:text-white transition-colors">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute -top-1 -right-1 w-2 h-2 bg-secondary rounded-full"></span>
</button>
<div class="flex items-center gap-3 pl-6 border-l border-white/10">
<div class="text-right">
<p class="text-xs font-bold text-white leading-none">Alex Rivera</p>
<p class="text-[10px] text-on-surface-variant leading-none mt-1">Creative Director</p>
</div>
<div class="w-8 h-8 rounded-full bg-surface-container-highest overflow-hidden ring-1 ring-white/10">
<img class="w-full h-full object-cover" data-alt="portrait of a professional creative director in a modern office with cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAFuneRKhoHPStJ_1mAld_fptQHCQ764fbkti1Nh4FQw0qdfMzrVWqTlYyt0-bv5z8ehhC03-0J9hq1hiQRbqDq3KqLwpCppuVKy5Alg948iEbFYqrUC2FHqvOobtM_7Fef7Z0l7FtCCBreOj-TfpmBKo5ZdkA5TgIZmEw2h6ZV069ktmIqi0ihWKyG_zc7bechvCpwpW9Lp0a8CdzypAIKwVIp_RyODEvE-5yurARPac8YZnl_bj-sei4iYDFaD3be27MIm1DQ6xLY"/>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 px-8 pb-12 min-h-screen">
<!-- Hero Analysis Header -->
<section class="mb-12 flex flex-col md:flex-row items-end gap-8 bg-surface-container-low p-8 rounded-2xl relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/5 via-transparent to-transparent opacity-50"></div>
<!-- Virality Gauge -->
<div class="relative w-48 h-48 flex-shrink-0 flex items-center justify-center bg-surface-container rounded-full ring-8 ring-surface-container-lowest">
<div class="absolute inset-0 rounded-full radial-gradient-score p-4">
<div class="w-full h-full bg-surface-container-low rounded-full flex flex-col items-center justify-center">
<span class="text-5xl font-extrabold font-headline text-secondary neon-glow">88</span>
<span class="text-[10px] font-bold text-on-surface-variant/70 uppercase tracking-widest">Virality Score</span>
</div>
</div>
</div>
<!-- Video Meta -->
<div class="flex-1 z-10">
<nav class="flex items-center gap-2 text-xs text-on-surface-variant mb-4">
<span>Analysis</span>
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
<span class="text-white">YT-VLOG-2024-042</span>
</nav>
<h2 class="text-4xl font-extrabold font-headline text-white mb-3 tracking-tight">The 5 AM Productivity Myth: Scientific Breakdown</h2>
<div class="flex flex-wrap gap-4 items-center">
<span class="px-3 py-1 bg-primary/10 border border-primary/20 text-primary text-[10px] font-bold rounded-full uppercase">High Performance</span>
<div class="flex items-center gap-2 text-on-surface-variant text-sm">
<span class="material-symbols-outlined text-sm">timer</span>
<span>12:45 Runtime</span>
</div>
<div class="flex items-center gap-2 text-on-surface-variant text-sm">
<span class="material-symbols-outlined text-sm">visibility</span>
<span>Est. 1.2M Reach</span>
</div>
</div>
</div>
<!-- Thumbnail Preview -->
<div class="hidden lg:block w-72 h-40 rounded-xl overflow-hidden shadow-2xl shadow-black relative group-hover:scale-[1.02] transition-transform duration-500 ring-1 ring-white/10">
<img class="w-full h-full object-cover" data-alt="cinematic close up of a vintage alarm clock on a wooden desk with moody low light and indigo morning glow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCVQZB5awSshFMLUh067teqMYFVuTcwnrPEbJd4sR5HckElPdU3n1jjLlTzI7eoRPESwCmslKMv6DUbc20QJHZyysXzUMALqZtAue85QfhiijRz71dsFh85JZbjGA4WN5sIuot-vx3TmwvT95ZBjNMkz0LNHjmUBLdItQDrNeVn5redzoJh_3ppdXOzTZMf3TWhmn3777j4V1v1sxcd-gtmzay2Q2e78BxN8fpE8mWrvuS0Jt1yuEe6phQ0MD0aUWHujWWmfvVIPGV1"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/20 transition-colors">
<div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center text-white ring-1 ring-white/30">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
</div>
</section>
<!-- Analysis Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<!-- 1. Storytelling Section -->
<div class="bg-surface-container-low p-8 rounded-2xl relative">
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-primary text-2xl">auto_stories</span>
<h3 class="text-xl font-bold font-headline text-white">Storytelling Architecture</h3>
</div>
<div class="space-y-8">
<div>
<label class="text-[10px] font-bold text-primary uppercase tracking-widest mb-2 block">The Hook Effectiveness</label>
<p class="text-on-surface-variant leading-relaxed text-sm">
"We've been lied to about the morning." — A curiosity gap combined with an authority challenge that spikes retention in the first 7 seconds.
</p>
</div>
<div>
<label class="text-[10px] font-bold text-primary uppercase tracking-widest mb-4 block">Narrative Structure Diagram</label>
<div class="flex items-center justify-between px-2">
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary ring-1 ring-primary/40">
<span class="material-symbols-outlined">anchor</span>
</div>
<span class="text-[10px] font-medium">Hook</span>
</div>
<div class="h-[1px] flex-1 bg-surface-container-highest mx-2"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant ring-1 ring-white/5">
<span class="material-symbols-outlined">psychology_alt</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">Rising</span>
</div>
<div class="h-[1px] flex-1 bg-surface-container-highest mx-2"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant ring-1 ring-white/5">
<span class="material-symbols-outlined">mountain_flag</span>
</div>
<span class="text-[10px] font-medium text-on-surface-variant">Climax</span>
</div>
<div class="h-[1px] flex-1 bg-surface-container-highest mx-2"></div>
<div class="flex flex-col items-center gap-2">
<div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center text-secondary ring-1 ring-secondary/40">
<span class="material-symbols-outlined">ads_click</span>
</div>
<span class="text-[10px] font-medium text-secondary">CTA</span>
</div>
</div>
</div>
<div>
<label class="text-[10px] font-bold text-primary uppercase tracking-widest mb-2 block">Emotional Arc Visualization</label>
<div class="h-16 w-full flex items-end gap-1 overflow-hidden">
<div class="flex-1 bg-primary/20 h-4 rounded-t-sm"></div>
<div class="flex-1 bg-primary/30 h-8 rounded-t-sm"></div>
<div class="flex-1 bg-primary/40 h-10 rounded-t-sm"></div>
<div class="flex-1 bg-primary/60 h-14 rounded-t-sm"></div>
<div class="flex-1 bg-primary/50 h-11 rounded-t-sm"></div>
<div class="flex-1 bg-primary/30 h-6 rounded-t-sm"></div>
<div class="flex-1 bg-primary/20 h-4 rounded-t-sm"></div>
<div class="flex-1 bg-secondary h-16 rounded-t-sm shadow-[0_0_10px_rgba(78,222,163,0.3)]"></div>
</div>
<div class="flex justify-between text-[8px] text-on-surface-variant uppercase mt-1 tracking-tighter">
<span>Intrigue</span>
<span>Confusion</span>
<span>Revelation</span>
<span>Empowerment</span>
</div>
</div>
</div>
</div>
<!-- 2. Psychology/Cialdini Section -->
<div class="bg-surface-container-low p-8 rounded-2xl border-l-2 border-secondary/20">
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-secondary text-2xl">lightbulb</span>
<h3 class="text-xl font-bold font-headline text-white">Psychological Framework</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
<!-- Principles Grid -->
<div class="col-span-2 grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="p-3 bg-surface-container rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(78,222,163,0.5)]"></div>
<span class="text-xs font-semibold">Authority</span>
</div>
<div class="p-3 bg-surface-container rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(78,222,163,0.5)]"></div>
<span class="text-xs font-semibold">Consensus</span>
</div>
<div class="p-3 bg-surface-container-lowest opacity-40 rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-white/20"></div>
<span class="text-xs font-semibold">Scarcity</span>
</div>
<div class="p-3 bg-surface-container rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(78,222,163,0.5)]"></div>
<span class="text-xs font-semibold">Unity</span>
</div>
<div class="p-3 bg-surface-container rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(78,222,163,0.5)]"></div>
<span class="text-xs font-semibold">Consistency</span>
</div>
<div class="p-3 bg-surface-container-lowest opacity-40 rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-white/20"></div>
<span class="text-xs font-semibold">Reciprocity</span>
</div>
<div class="p-3 bg-surface-container rounded-xl border border-white/5 flex items-center gap-3">
<div class="w-2 h-2 rounded-full bg-secondary shadow-[0_0_8px_rgba(78,222,163,0.5)]"></div>
<span class="text-xs font-semibold">Liking</span>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-surface-container p-6 rounded-xl border border-white/5">
<label class="text-[10px] font-bold text-secondary uppercase tracking-widest mb-3 block">Primary Emotional Trigger</label>
<div class="flex items-center gap-4">
<div class="text-3xl">🧩</div>
<div>
<h4 class="text-lg font-bold text-white leading-tight">Intellectual Reframing</h4>
<p class="text-xs text-on-surface-variant">The content challenges the viewer's ego by suggesting their "hard work" might be inefficient.</p>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-secondary/10 to-transparent p-4 rounded-xl border border-secondary/10">
<p class="text-xs italic text-secondary leading-relaxed">
"The use of Unity here is subtle: connecting the viewer with 'Elite Performers' who don't follow the mainstream 5 AM advice."
</p>
</div>
</div>
</div>
<!-- 3. Neuromarketing Section -->
<div class="bg-surface-container-low p-8 rounded-2xl">
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-primary text-2xl">neurology</span>
<h3 class="text-xl font-bold font-headline text-white">Neuromarketing Insights</h3>
</div>
<div class="space-y-8">
<div>
<div class="flex justify-between items-end mb-4">
<label class="text-[10px] font-bold text-primary uppercase tracking-widest">Visual Attention Score</label>
<span class="text-xl font-bold text-white">92%</span>
</div>
<div class="w-full h-2 bg-surface-container-highest rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-primary-container w-[92%]"></div>
</div>
<p class="text-[10px] text-on-surface-variant mt-2 italic">High motion density in first 60s keeps dopamine firing high.</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container p-4 rounded-xl">
<label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Cognitive Load</label>
<div class="flex items-center gap-2">
<span class="text-secondary font-bold">Low</span>
<div class="flex gap-1">
<div class="w-4 h-1 bg-secondary rounded-full"></div>
<div class="w-4 h-1 bg-surface-container-highest rounded-full"></div>
<div class="w-4 h-1 bg-surface-container-highest rounded-full"></div>
</div>
</div>
</div>
<div class="bg-surface-container p-4 rounded-xl">
<label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Sensory Language</label>
<span class="text-white font-bold text-sm">Auditory-First</span>
</div>
</div>
<div>
<label class="text-[10px] font-bold text-primary uppercase tracking-widest block mb-4">Focus Map Heat Overlay</label>
<div class="aspect-video rounded-xl bg-surface-container-lowest overflow-hidden relative border border-white/5">
<img class="w-full h-full object-cover opacity-30 grayscale" data-alt="data visualization dashboard showing heatmap overlays on video frames with vibrant teal and violet gradients" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBuDe4U5eH6nN47xvd3jOGdUqVS4SCo-d4UfTWtvgPif1OtkhKSea7TngCEzwfqij8cUz_olcJFQYpenjMmgVvMac3URJrjuCx0AvkRGfT5AU6hk2Wut4-9ASsXchwYu0V-WJVy8B0Jggf0B4XgVLtYg8DkKdN4Z3ZoeMMw84vX-_ANzie5yqQUu1r9wnag1vRzZ6c4vfhvVy6WBugqNfg4KwKxJy0W5C_nvy7z-KnJ69p5OKfTxh7fJRrXVdrT4P_4NdvLS1Hybrm"/>
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-32 h-32 bg-primary/20 blur-3xl rounded-full"></div>
<div class="w-16 h-16 bg-secondary/40 blur-xl rounded-full"></div>
</div>
<div class="absolute bottom-4 left-4 flex gap-2">
<div class="px-2 py-1 bg-black/60 backdrop-blur-md rounded text-[8px] font-bold uppercase">Frame 1024: Peak Focus</div>
</div>
</div>
</div>
</div>
</div>
<!-- 4. Content Section -->
<div class="bg-surface-container-low p-8 rounded-2xl relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -translate-y-16 translate-x-16 blur-2xl"></div>
<div class="flex items-center gap-3 mb-8">
<span class="material-symbols-outlined text-secondary text-2xl">stylus_note</span>
<h3 class="text-xl font-bold font-headline text-white">Content Synthesis</h3>
</div>
<div class="space-y-6">
<div class="flex gap-4">
<div class="flex-1">
<label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Overall Tone</label>
<div class="text-white font-bold flex items-center gap-2">
Assertive &amp; Data-Driven
<span class="material-symbols-outlined text-xs text-secondary">verified</span>
</div>
</div>
<div class="flex-1 text-right">
<label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest block mb-1">Target Persona</label>
<div class="text-white font-bold">Aspiring Solopreneurs</div>
</div>
</div>
<div class="bg-surface-container p-6 rounded-xl border border-white/5">
<label class="text-[10px] font-bold text-secondary uppercase tracking-widest mb-3 block">Primary Promise</label>
<p class="text-white text-lg font-medium leading-snug">
"Master your biology to achieve in 4 hours what others do in 14."
</p>
</div>
<div>
<label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest mb-3 block">Top Ranking Keywords</label>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-surface-container-highest rounded text-xs border border-white/5 text-on-surface hover:text-white hover:border-primary/40 cursor-default transition-all">Circadian Rhythm</span>
<span class="px-3 py-1 bg-surface-container-highest rounded text-xs border border-white/5 text-on-surface hover:text-white hover:border-primary/40 cursor-default transition-all">Dopamine Baseline</span>
<span class="px-3 py-1 bg-surface-container-highest rounded text-xs border border-white/5 text-on-surface hover:text-white hover:border-primary/40 cursor-default transition-all">Deep Work</span>
<span class="px-3 py-1 bg-surface-container-highest rounded text-xs border border-white/5 text-on-surface hover:text-white hover:border-primary/40 cursor-default transition-all">Productivity Trap</span>
<span class="px-3 py-1 bg-surface-container-highest rounded text-xs border border-white/5 text-on-surface hover:text-white hover:border-primary/40 cursor-default transition-all">Biohacking</span>
</div>
</div>
</div>
</div>
</div>
<!-- Collapsible Full Transcript Section -->
<section class="bg-surface-container-low rounded-2xl overflow-hidden border border-white/5">
<button class="w-full px-8 py-5 flex items-center justify-between hover:bg-white/5 transition-colors">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-surface-container-highest flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant">subject</span>
</div>
<div class="text-left">
<h4 class="text-white font-bold">Full Transcript Analysis</h4>
<p class="text-[10px] text-on-surface-variant uppercase tracking-widest">1,842 Words Analyzed by IA-Engine</p>
</div>
</div>
<span class="material-symbols-outlined text-on-surface-variant">expand_more</span>
</button>
<!-- Preview content for UI richness (Simulating it's collapsed state but visible for the task) -->
<div class="px-8 pb-8 pt-4">
<div class="bg-surface-container-lowest p-6 rounded-xl border border-white/5 text-on-surface-variant text-sm font-body leading-relaxed max-h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-white/10">
<p class="mb-4"><span class="text-primary font-bold mr-2">[00:00]</span> Look, we've all seen the videos. The 5 AM morning routine, the ice bath, the immediate meditation. But what if I told you that for 60% of people, this is actually destroying your productivity?</p>
<p class="mb-4"><span class="text-primary font-bold mr-2">[01:15]</span> Research from the Sleep Science Institute shows that forcing your chronotype into a schedule it wasn't designed for causes a permanent state of brain fog known as social jetlag.</p>
<p class="mb-4"><span class="text-primary font-bold mr-2">[02:45]</span> Today we're breaking down the bio-individual approach to high-performance work...</p>
<p class="opacity-50">...[Click to expand full analysis]</p>
</div>
</div>
</section>
</main>
<!-- Mobile Navigation Bar (md:hidden) -->
<footer class="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-surface-container-low border-t border-white/5 z-50 flex items-center justify-around px-4">
<button class="flex flex-col items-center gap-1 text-[#c7c4d7]">
<span class="material-symbols-outlined">dashboard</span>
<span class="text-[10px]">Dashboard</span>
</button>
<button class="flex flex-col items-center gap-1 text-white">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">analytics</span>
<span class="text-[10px] font-bold">Analysis</span>
</button>
<div class="relative -top-6">
<button class="w-14 h-14 bg-primary-container text-on-primary-container rounded-full shadow-lg shadow-primary-container/40 flex items-center justify-center">
<span class="material-symbols-outlined">add</span>
</button>
</div>
<button class="flex flex-col items-center gap-1 text-[#c7c4d7]">
<span class="material-symbols-outlined">description</span>
<span class="text-[10px]">Scripts</span>
</button>
<button class="flex flex-col items-center gap-1 text-[#c7c4d7]">
<span class="material-symbols-outlined">settings</span>
<span class="text-[10px]">Settings</span>
</button>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink