Hanzo_Dev/Generadordeguiones
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — Sistema Generador de Guiones V4.0

Browse Source 
Pipeline completo: URL → Whisper → GPT-4o → pgvector → Supabase
Frontend Vue 3 + Tailwind, Backend Express + Vercel serverless functions
This commit is contained in:
Johan Samudio
2026-03-28 16:02:59 -05:00
commit 7695dd0be6
47 changed files with 7552 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
docs/reference_design/analysis_detail.html Normal file
View File

@ -0,0 +1,455 @@
<!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>

393
docs/reference_design/dashboard.html Normal file
View File

@ -0,0 +1,393 @@
<!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 - Marketing Pro Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Inter:wght@400;500;600&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"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
background-color: #13131a;
}
.font-headline {
font-family: 'Manrope', sans-serif;
}
.glass-panel {
background: rgba(31, 31, 38, 0.6);
backdrop-filter: blur(20px);
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"surface-container-low": "#1b1b22",
"surface-container": "#1f1f26",
"surface-container-highest": "#34343c",
"surface": "#13131a",
"primary": "#c0c1ff",
"primary-container": "#8083ff",
"on-primary-container": "#0d0096",
"secondary": "#4edea3",
"on-surface": "#e4e1ec",
"on-surface-variant": "#c7c4d7",
"outline-variant": "#464554",
},
fontFamily: {
"headline": ["Manrope"],
"body": ["Inter"],
},
borderRadius: {"DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem"},
},
},
}
</script>
</head>
<body class="text-on-surface antialiased selection:bg-primary/30">
<!-- SideNavBar Shell -->
<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] font-['Manrope'] antialiased shadow-2xl shadow-indigo-500/10">
<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">
<span class="material-symbols-outlined text-on-primary-container text-lg" style="font-variation-settings: 'FILL' 1;">psychology</span>
</div>
<div>
<h1 class="text-xl font-bold tracking-tight text-white">Guiones IA</h1>
<p class="text-[10px] uppercase tracking-widest text-primary/60 font-bold">Marketing Pro</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<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 text-[20px]">dashboard</span>
<span class="text-sm">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-[#c7c4d7] hover:text-white hover:bg-white/5 transition-all duration-200 group" href="#">
<span class="material-symbols-outlined text-[20px]">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 hover:bg-white/5 transition-all duration-200 group" href="#">
<span class="material-symbols-outlined text-[20px]">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 hover:bg-white/5 transition-all duration-200 group" href="#">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="text-sm">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-white/5">
<button class="w-full flex items-center justify-center gap-2 py-3 px-4 bg-primary-container text-on-primary-container rounded-lg font-bold text-sm shadow-lg shadow-primary/20 scale-95 active:scale-90 transition-transform">
<span class="material-symbols-outlined text-sm">add</span>
New Script
</button>
</div>
</aside>
<!-- TopAppBar Shell -->
<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 font-['Manrope'] text-sm">
<div class="relative w-96 group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-lg group-focus-within:text-primary transition-colors">search</span>
<input class="w-full bg-surface-container-lowest border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary/40 text-on-surface placeholder:text-outline/50 transition-all" placeholder="Search analyzed scripts..." type="text"/>
</div>
<div class="flex items-center gap-6">
<button class="relative text-[#c7c4d7] hover:text-white transition-opacity">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-secondary rounded-full border-2 border-[#13131a]"></span>
</button>
<div class="flex items-center gap-3 pl-6 border-l border-white/5">
<div class="text-right">
<p class="text-xs font-bold text-white leading-none">Alex Rivera</p>
<p class="text-[10px] text-outline">Growth Lead</p>
</div>
<div class="w-8 h-8 rounded-full overflow-hidden bg-surface-container-highest">
<img class="w-full h-full object-cover" data-alt="professional headshot of a marketing executive with confident expression, neutral studio background, high-end photography" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAF_qikv11E-m1fg7HE7CLMu_qdasNYKJt0vmz-v3yT6b2kpw_lMre-iwzo_G52AH5bkHIpJXAQ7OrqNTKiXwPybCJ2AO950DIm2ARnq7t9bgP_ZIr2f1IBAJ1uNSBj6ZtHupN9byFF50rsf5_LseEknLEetvpcMkk4dw-38bYDw4vfQXdDzQ7xvEJlPD46c788j7cCJjzumWd04CvMP41-3bIH-JssH_uvOrNB7GUfUt7k1NaWW9T_jMMzwhViAJ6syW7o8IGsR6NA"/>
</div>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 pb-12 px-8 min-h-screen">
<!-- Header Section -->
<header class="mb-10 flex items-end justify-between">
<div>
<h2 class="text-4xl font-extrabold font-headline tracking-tight text-white mb-2">Engineering Hub</h2>
<p class="text-on-surface-variant max-w-lg">Transforming high-performance viral data into editorial script masterpieces.</p>
</div>
<div class="flex gap-3">
<button class="px-4 py-2 bg-surface-container-low text-on-surface rounded-lg text-sm font-semibold border border-outline-variant/20 hover:bg-surface-container transition-colors">Export Report</button>
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg text-sm font-bold shadow-lg shadow-primary/10 hover:brightness-110 transition-all">Run Analysis</button>
</div>
</header>
<!-- KPI Bento Grid -->
<section class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
<!-- Card 1 -->
<div class="bg-surface-container-low p-6 rounded-xl border border-outline-variant/10 group hover:border-primary/20 transition-all">
<div class="flex items-center justify-between mb-4">
<span class="text-outline text-xs font-bold uppercase tracking-wider">Top Niche</span>
<span class="material-symbols-outlined text-secondary text-lg" style="font-variation-settings: 'FILL' 1;">trending_up</span>
</div>
<h3 class="text-2xl font-bold text-white font-headline">Finance</h3>
<div class="flex items-center gap-2 mt-2">
<span class="text-[10px] px-2 py-0.5 rounded bg-secondary/10 text-secondary border border-secondary/20 font-bold">+12.4%</span>
<span class="text-[10px] text-outline">vs last month</span>
</div>
</div>
<!-- Card 2 -->
<div class="bg-surface-container-low p-6 rounded-xl border border-outline-variant/10 group hover:border-primary/20 transition-all">
<div class="flex items-center justify-between mb-4">
<span class="text-outline text-xs font-bold uppercase tracking-wider">Virality Score</span>
<span class="material-symbols-outlined text-primary text-lg">bolt</span>
</div>
<h3 class="text-2xl font-bold text-white font-headline">82<span class="text-sm text-outline font-normal ml-1">/100</span></h3>
<div class="w-full bg-surface-container-highest h-1 rounded-full mt-4 overflow-hidden">
<div class="bg-gradient-to-r from-primary-container to-primary h-full w-[82%]"></div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-surface-container-low p-6 rounded-xl border border-outline-variant/10 group hover:border-primary/20 transition-all">
<div class="flex items-center justify-between mb-4">
<span class="text-outline text-xs font-bold uppercase tracking-wider">Analyzed Videos</span>
<span class="material-symbols-outlined text-outline text-lg">videocam</span>
</div>
<h3 class="text-2xl font-bold text-white font-headline">142</h3>
<p class="text-[10px] text-outline mt-2 italic">Processed in last 7 days</p>
</div>
<!-- Card 4 -->
<div class="bg-surface-container-low p-6 rounded-xl border border-outline-variant/10 group hover:border-primary/20 transition-all">
<div class="flex items-center justify-between mb-4">
<span class="text-outline text-xs font-bold uppercase tracking-wider">Top Platform</span>
<span class="material-symbols-outlined text-red-400 text-lg">favorite</span>
</div>
<h3 class="text-2xl font-bold text-white font-headline">TikTok</h3>
<div class="flex items-center gap-2 mt-2">
<span class="text-[10px] px-2 py-0.5 rounded bg-red-400/10 text-red-400 border border-red-400/20 font-bold">Viral Dominance</span>
</div>
</div>
</section>
<!-- Main Data Table Section -->
<section class="bg-surface-container-low rounded-2xl border border-outline-variant/10 overflow-hidden shadow-2xl">
<div class="p-6 flex items-center justify-between border-b border-white/5 bg-surface-container/30">
<h4 class="font-headline font-bold text-lg text-white">Analyzed Videos Pipeline</h4>
<div class="flex gap-2">
<button class="p-2 text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-xl">filter_list</span>
</button>
<button class="p-2 text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-xl">sort</span>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="text-[11px] uppercase tracking-widest text-outline border-b border-white/5 bg-surface-container-low">
<th class="px-6 py-4 font-bold">Platform</th>
<th class="px-6 py-4 font-bold">Niche</th>
<th class="px-6 py-4 font-bold">Narrative Structure</th>
<th class="px-6 py-4 font-bold">Emotional Trigger</th>
<th class="px-6 py-4 font-bold text-center">Virality</th>
<th class="px-6 py-4 font-bold text-center">Eng. %</th>
<th class="px-6 py-4 font-bold text-center">Cialdini</th>
<th class="px-6 py-4 font-bold text-right">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-white/[0.03]">
<!-- Row 1 -->
<tr class="hover:bg-white/[0.02] transition-colors group">
<td class="px-6 py-5">
<span class="px-3 py-1 text-[10px] font-bold rounded-full border border-red-500/30 bg-red-500/10 text-red-400 uppercase tracking-tighter shadow-[0_0_10px_rgba(239,68,68,0.1)]">TikTok</span>
</td>
<td class="px-6 py-5">
<span class="px-2 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] rounded font-medium">Marketing</span>
</td>
<td class="px-6 py-5 text-sm font-medium text-on-surface">Hook-Problem-Solution</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Urgency</td>
<td class="px-6 py-5">
<div class="flex flex-col items-center">
<span class="text-lg font-bold text-secondary">94</span>
<div class="w-12 h-0.5 bg-secondary/20 rounded-full mt-1">
<div class="bg-secondary h-full w-[94%]"></div>
</div>
</div>
</td>
<td class="px-6 py-5 text-center text-sm font-medium">4.2%</td>
<td class="px-6 py-5 text-center">
<div class="flex items-center justify-center gap-0.5">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="text-[10px] ml-1 text-primary font-bold">3/7</span>
</div>
</td>
<td class="px-6 py-5 text-right">
<button class="text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-lg">more_vert</span>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="bg-surface-container-lowest/30 hover:bg-white/[0.02] transition-colors group">
<td class="px-6 py-5">
<span class="px-3 py-1 text-[10px] font-bold rounded-full border border-fuchsia-500/30 bg-fuchsia-500/10 text-fuchsia-400 uppercase tracking-tighter shadow-[0_0_10px_rgba(217,70,239,0.1)]">Reels</span>
</td>
<td class="px-6 py-5">
<span class="px-2 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] rounded font-medium">E-commerce</span>
</td>
<td class="px-6 py-5 text-sm font-medium text-on-surface">Product-Benefit-CTA</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Curiosity</td>
<td class="px-6 py-5">
<div class="flex flex-col items-center">
<span class="text-lg font-bold text-secondary">78</span>
<div class="w-12 h-0.5 bg-secondary/20 rounded-full mt-1">
<div class="bg-secondary h-full w-[78%]"></div>
</div>
</div>
</td>
<td class="px-6 py-5 text-center text-sm font-medium">3.8%</td>
<td class="px-6 py-5 text-center">
<div class="flex items-center justify-center gap-0.5">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="text-[10px] ml-1 text-primary font-bold">5/7</span>
</div>
</td>
<td class="px-6 py-5 text-right">
<button class="text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-lg">more_vert</span>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-white/[0.02] transition-colors group">
<td class="px-6 py-5">
<span class="px-3 py-1 text-[10px] font-bold rounded-full border border-red-600/30 bg-red-600/10 text-red-500 uppercase tracking-tighter">Shorts</span>
</td>
<td class="px-6 py-5">
<span class="px-2 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] rounded font-medium">Finance</span>
</td>
<td class="px-6 py-5 text-sm font-medium text-on-surface">Education-Shock-Value</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Authority</td>
<td class="px-6 py-5">
<div class="flex flex-col items-center">
<span class="text-lg font-bold text-secondary">62</span>
<div class="w-12 h-0.5 bg-secondary/20 rounded-full mt-1">
<div class="bg-secondary h-full w-[62%]"></div>
</div>
</div>
</td>
<td class="px-6 py-5 text-center text-sm font-medium">5.1%</td>
<td class="px-6 py-5 text-center">
<div class="flex items-center justify-center gap-0.5">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="text-[10px] ml-1 text-primary font-bold">1/7</span>
</div>
</td>
<td class="px-6 py-5 text-right">
<button class="text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-lg">more_vert</span>
</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="bg-surface-container-lowest/30 hover:bg-white/[0.02] transition-colors group">
<td class="px-6 py-5">
<span class="px-3 py-1 text-[10px] font-bold rounded-full border border-red-500/30 bg-red-500/10 text-red-400 uppercase tracking-tighter shadow-[0_0_10px_rgba(239,68,68,0.1)]">TikTok</span>
</td>
<td class="px-6 py-5">
<span class="px-2 py-1 bg-surface-container-highest text-on-surface-variant text-[11px] rounded font-medium">Personal Brand</span>
</td>
<td class="px-6 py-5 text-sm font-medium text-on-surface">Vlog-Insight-Call</td>
<td class="px-6 py-5 text-sm text-on-surface-variant">Belonging</td>
<td class="px-6 py-5">
<div class="flex flex-col items-center">
<span class="text-lg font-bold text-secondary">88</span>
<div class="w-12 h-0.5 bg-secondary/20 rounded-full mt-1">
<div class="bg-secondary h-full w-[88%]"></div>
</div>
</div>
</td>
<td class="px-6 py-5 text-center text-sm font-medium">2.9%</td>
<td class="px-6 py-5 text-center">
<div class="flex items-center justify-center gap-0.5">
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
<span class="w-1.5 h-1.5 rounded-full bg-primary/20"></span>
<span class="text-[10px] ml-1 text-primary font-bold">4/7</span>
</div>
</td>
<td class="px-6 py-5 text-right">
<button class="text-outline hover:text-white transition-colors">
<span class="material-symbols-outlined text-lg">more_vert</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-white/5 flex items-center justify-between text-[11px] text-outline font-medium uppercase tracking-wider">
<span>Showing 1-4 of 142 results</span>
<div class="flex gap-2">
<button class="px-3 py-1 bg-surface-container rounded hover:text-white transition-colors">Previous</button>
<button class="px-3 py-1 bg-primary/10 text-primary border border-primary/20 rounded font-bold">1</button>
<button class="px-3 py-1 bg-surface-container rounded hover:text-white transition-colors">2</button>
<button class="px-3 py-1 bg-surface-container rounded hover:text-white transition-colors">Next</button>
</div>
</div>
</section>
<!-- Script Concept Feature Section (Editorial Layout) -->
<section class="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 relative h-[400px] rounded-2xl overflow-hidden group border border-outline-variant/10 shadow-2xl">
<img class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="abstract digital waves with deep indigo and vibrant neon violet colors, high contrast, minimalist futuristic aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCIUHH9UAkU59-MsrvYMz5YiBKmgP86klpQs957mt91g016ePYWPvq3SIjn00joLQmQA7MOc8qDhMLW2i_sr-kQwFKIAV_xA5jP580BKRqALEaspHXST8QwTmaBSXLyG3f3NbEJdVBf9vyip0T-3Ev9rzbWB8XinetwSRi0sZLBJ_PYwwpgB_PpYU3UxwFqibEzzreYxEZYk1CcTzShVwNoozei6HhGgBW3d-Ggf_DuoDrS0A9Y6JFQ-e6cr9aI5GVhTzKfPYvM80Oi"/>
<div class="absolute inset-0 bg-gradient-to-t from-surface via-surface/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-10">
<span class="text-[10px] font-bold bg-primary-container text-on-primary-container px-3 py-1 rounded-full uppercase tracking-widest mb-4 inline-block">Algorithm Pick</span>
<h3 class="text-4xl font-extrabold font-headline text-white mb-4 leading-tight max-w-lg">Mastering the 'Debt-Free' Hook Strategy for 2024</h3>
<p class="text-on-surface-variant max-w-sm mb-6 text-sm">Our AI detected a 340% spike in narrative hooks using "negative visualization" in the personal finance niche.</p>
<button class="flex items-center gap-2 text-white font-bold group/btn">
Learn how to engineer this
<span class="material-symbols-outlined group-hover/btn:translate-x-1 transition-transform">arrow_forward</span>
</button>
</div>
</div>
<div class="bg-surface-container p-8 rounded-2xl border border-outline-variant/10 flex flex-col justify-center">
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mb-6">
<span class="material-symbols-outlined text-secondary text-2xl" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
</div>
<h4 class="text-xl font-bold text-white font-headline mb-4">Smart Recommendations</h4>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">Based on your recent analyses, we recommend switching your Hook structure to <strong>"Pattern Interrupt"</strong> for YouTube Shorts to capture 1.2s more average watch time.</p>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-3 text-xs text-on-surface">
<span class="w-1 h-1 rounded-full bg-primary"></span>
Increase visual pacing in first 3s
</li>
<li class="flex items-center gap-3 text-xs text-on-surface">
<span class="w-1 h-1 rounded-full bg-primary"></span>
Use higher contrast text overlays
</li>
<li class="flex items-center gap-3 text-xs text-on-surface">
<span class="w-1 h-1 rounded-full bg-primary"></span>
Leverage "FOMO" emotional trigger
</li>
</ul>
<button class="w-full py-3 bg-surface-container-highest text-white text-xs font-bold rounded-lg border border-white/5 hover:bg-white/10 transition-colors">Apply to Scripts</button>
</div>
</section>
</main>
</body></html>

14
docs/reference_design/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="es" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guiones IA</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
</head>
<body class="text-on-surface antialiased overflow-x-hidden font-body bg-surface selection:bg-primary-container selection:text-on-primary-container">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

313
docs/reference_design/new_analysis.html Normal file
View File

@ -0,0 +1,313 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>New Analysis - Guiones IA</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@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>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.step-pulse {
box-shadow: 0 0 0 0 rgba(192, 193, 255, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(192, 193, 255, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(192, 193, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(192, 193, 255, 0); }
}
body { background-color: #13131a; }
</style>
</head>
<body class="font-body text-on-surface antialiased overflow-x-hidden">
<!-- SideNavBar (Authority: Shared Components JSON) -->
<aside class="fixed left-0 top-0 h-full z-40 flex flex-col p-4 bg-[#13131a] dark:bg-[#13131a] font-['Manrope'] antialiased h-screen w-64 border-r border-white/5 shadow-2xl shadow-indigo-500/10">
<div class="mb-8 px-2">
<h1 class="text-xl font-bold tracking-tight text-white">Guiones IA</h1>
<p class="text-xs text-on-surface-variant/60 font-medium uppercase tracking-widest mt-1">Marketing Pro</p>
</div>
<nav class="flex-1 space-y-1">
<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:text-primary transition-colors">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">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:text-primary transition-colors">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:text-primary transition-colors">settings</span>
<span class="text-sm">Settings</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-white/5">
<button class="w-full flex items-center justify-center gap-2 bg-primary-container/20 border border-primary-container/30 text-primary py-2.5 rounded-xl text-sm font-semibold hover:bg-primary-container/30 transition-all active:scale-95">
<span class="material-symbols-outlined text-[20px]">add</span>
New Script
</button>
</div>
</aside>
<!-- TopAppBar (Authority: Shared Components JSON) -->
<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 font-['Manrope'] text-sm">
<div class="flex items-center flex-1 max-w-xl">
<div class="relative w-full flex items-center bg-surface-container-low rounded-full px-4 py-1.5 focus-within:ring-2 focus-within:ring-indigo-500/40 transition-all">
<span class="material-symbols-outlined text-outline mr-3">search</span>
<input class="bg-transparent border-none outline-none text-on-surface w-full text-sm placeholder:text-outline-variant focus:ring-0" placeholder="Search analysis or scripts..." type="text"/>
</div>
</div>
<div class="flex items-center gap-4 text-[#c7c4d7]">
<button class="material-symbols-outlined hover:text-white transition-opacity">notifications</button>
<div class="h-8 w-8 rounded-full overflow-hidden bg-surface-container-highest border border-outline-variant/30">
<img class="w-full h-full object-cover" data-alt="close-up portrait of professional male digital marketing manager with friendly expression and modern lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_Elmeta1tEgUINlAQLR8dS8IkyxYo2kDcULeqaE2b0zhyUz_imTluyAKchJWc-q_AXkbbGGiMfR32Wm_8D2XlyrqhDhfMJWq5WWzQPsgF7g9nmNkCWZ6QtSN70BWl8jVvcajp1wqKvPm03edoqOrfDhlxOa8I3x3fWaT_x6C6DFE2TZuNicRtxvJjv48Mb3uPHDkN4l09FkTnUl26swmUd9HYfSLSpANnGLcFtS_kYb55L7Ip4OAFsmPB1PvB8EUT0YD1B_J0cZi6"/>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 pb-12 px-12 min-h-screen">
<div class="max-w-4xl mx-auto">
<!-- Header Section -->
<div class="mb-10 text-center">
<h2 class="text-4xl font-headline font-extrabold text-white tracking-tight mb-3">Engineer New Analysis</h2>
<p class="text-on-surface-variant max-w-lg mx-auto leading-relaxed">Transform content data into high-converting AI script models with Obsidian Architecture.</p>
</div>
<!-- Multi-step Wizard Container -->
<div class="relative">
<!-- Progress Pipeline (Floating Top-Bar) -->
<div class="mb-8 grid grid-cols-5 gap-4 px-4 py-6 bg-surface-container-low rounded-2xl border border-outline-variant/10 shadow-xl">
<!-- Step 1: Complete -->
<div class="flex flex-col items-center gap-2 opacity-50">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-secondary text-on-secondary">
<span class="material-symbols-outlined text-[20px]">check</span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-secondary">Audio Extracted</span>
</div>
<!-- Step 2: Complete -->
<div class="flex flex-col items-center gap-2 opacity-50">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-secondary text-on-secondary">
<span class="material-symbols-outlined text-[20px]">check</span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-secondary">Transcribed</span>
</div>
<!-- Step 3: Active -->
<div class="flex flex-col items-center gap-2">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-primary text-on-primary step-pulse">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">psychology</span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest text-primary">GPT-4o Analysis</span>
</div>
<!-- Step 4: Pending -->
<div class="flex flex-col items-center gap-2 opacity-30">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-highest text-on-surface">
<span class="material-symbols-outlined text-[20px]">memory</span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest">Embedding</span>
</div>
<!-- Step 5: Pending -->
<div class="flex flex-col items-center gap-2 opacity-30">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-highest text-on-surface">
<span class="material-symbols-outlined text-[20px]">storage</span>
</div>
<span class="text-[10px] font-bold uppercase tracking-widest">Saving</span>
</div>
</div>
<!-- Form Card -->
<div class="bg-surface-container rounded-3xl p-8 border border-outline-variant/5 shadow-2xl relative overflow-hidden">
<!-- Aesthetic Light Leak Background Decor -->
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/10 blur-[100px] rounded-full pointer-events-none"></div>
<div class="absolute -bottom-24 -left-24 w-64 h-64 bg-secondary/5 blur-[100px] rounded-full pointer-events-none"></div>
<form class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
<!-- Primary Input: URL -->
<div class="md:col-span-2">
<label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant mb-3">Video Source URL</label>
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-primary group-focus-within:text-white transition-colors">link</span>
</div>
<input class="block w-full pl-12 pr-4 py-4 bg-surface-container-lowest border-none rounded-xl text-white placeholder:text-outline/40 focus:ring-2 focus:ring-primary/30 transition-all font-body" placeholder="https://tiktok.com/@creator/video/..." type="text"/>
</div>
</div>
<!-- Dropdown: Niche -->
<div>
<label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant mb-3">Target Niche</label>
<div class="relative">
<select class="block w-full pl-4 pr-10 py-4 bg-surface-container-lowest border-none rounded-xl text-white appearance-none focus:ring-2 focus:ring-primary/30 font-body">
<option>SaaS &amp; Tech</option>
<option>Personal Finance</option>
<option>Health &amp; Fitness</option>
<option>E-commerce</option>
<option>Agency Growth</option>
</select>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline">expand_more</span>
</div>
</div>
</div>
<!-- Text Input: Sub-niche -->
<div>
<label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant mb-3">Sub-Niche focus</label>
<input class="block w-full px-4 py-4 bg-surface-container-lowest border-none rounded-xl text-white placeholder:text-outline/40 focus:ring-2 focus:ring-primary/30 font-body" placeholder="e.g., AI Automation for Real Estate" type="text"/>
</div>
<!-- Dropdown: Language -->
<div>
<label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant mb-3">Analysis Language</label>
<div class="relative">
<select class="block w-full pl-4 pr-10 py-4 bg-surface-container-lowest border-none rounded-xl text-white appearance-none focus:ring-2 focus:ring-primary/30 font-body">
<option>English (US/UK)</option>
<option>Spanish (ES/LATAM)</option>
<option>Portuguese (BR)</option>
<option>German</option>
</select>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline">language</span>
</div>
</div>
</div>
<!-- Dropdown: Client Selector -->
<div>
<label class="block text-xs font-bold uppercase tracking-wider text-on-surface-variant mb-3">Assign to Client</label>
<div class="relative">
<select class="block w-full pl-4 pr-10 py-4 bg-surface-container-lowest border-none rounded-xl text-white appearance-none focus:ring-2 focus:ring-primary/30 font-body">
<option>Internal Portfolio</option>
<option>Nexus Marketing Inc.</option>
<option>Aria Aesthetics</option>
<option>Skyline Real Estate</option>
</select>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline">group</span>
</div>
</div>
</div>
<!-- Optional: Manual Metrics -->
<div class="md:col-span-2 pt-6 border-t border-outline-variant/10">
<h3 class="text-sm font-bold text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-secondary text-[18px]">show_chart</span>
Content Metrics (Optional)
</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-outline mb-2">Views</label>
<input class="block w-full px-4 py-3 bg-surface-container-lowest/50 border border-outline-variant/20 rounded-lg text-white placeholder:text-outline/40 focus:ring-1 focus:ring-secondary/40 text-sm" placeholder="240k" type="number"/>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-outline mb-2">Likes</label>
<input class="block w-full px-4 py-3 bg-surface-container-lowest/50 border border-outline-variant/20 rounded-lg text-white placeholder:text-outline/40 focus:ring-1 focus:ring-secondary/40 text-sm" placeholder="12k" type="number"/>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-outline mb-2">Shares</label>
<input class="block w-full px-4 py-3 bg-surface-container-lowest/50 border border-outline-variant/20 rounded-lg text-white placeholder:text-outline/40 focus:ring-1 focus:ring-secondary/40 text-sm" placeholder="850" type="number"/>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="md:col-span-2 pt-6 flex flex-col sm:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-2 text-on-surface-variant/60">
<span class="material-symbols-outlined text-sm">info</span>
<span class="text-xs">Processing typically takes 45-60 seconds.</span>
</div>
<div class="flex items-center gap-4 w-full sm:w-auto">
<button class="flex-1 sm:flex-none px-8 py-3.5 rounded-xl border border-outline-variant/30 text-white font-semibold text-sm hover:bg-white/5 transition-all" type="button">
Cancel
</button>
<button class="flex-1 sm:flex-none px-10 py-3.5 rounded-xl bg-gradient-to-br from-primary-container to-primary text-on-primary font-bold text-sm shadow-xl shadow-primary/20 hover:scale-105 active:scale-95 transition-all flex items-center justify-center gap-2" type="submit">
Start Analysis
<span class="material-symbols-outlined text-[18px]">bolt</span>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Contextual Insight (Bento-style snippet) -->
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-surface-container-low p-6 rounded-2xl border border-outline-variant/5">
<span class="material-symbols-outlined text-primary mb-4">smart_toy</span>
<h4 class="text-white font-bold text-sm mb-2">Neural Transcription</h4>
<p class="text-xs text-on-surface-variant leading-relaxed">Multi-speaker recognition and punctuation recovery powered by Whisper v3 Large.</p>
</div>
<div class="bg-surface-container-low p-6 rounded-2xl border border-outline-variant/5">
<span class="material-symbols-outlined text-secondary mb-4">auto_awesome</span>
<h4 class="text-white font-bold text-sm mb-2">Hook Extraction</h4>
<p class="text-xs text-on-surface-variant leading-relaxed">Identifies the exact second the viral hook ends and the narrative retention begins.</p>
</div>
<div class="bg-surface-container-low p-6 rounded-2xl border border-outline-variant/5">
<span class="material-symbols-outlined text-tertiary mb-4">database</span>
<h4 class="text-white font-bold text-sm mb-2">Vector Storage</h4>
<p class="text-xs text-on-surface-variant leading-relaxed">Embeddings are saved in your private Knowledge Base for future script synthesis.</p>
</div>
</div>
</div>
</main>
</body></html>