Files
4ventures-client-portal/public/preview-seguimiento.html
4Ventures 1a58af129d chore: scripts Dokploy/BPS (cron secret, Ads MCC, sync y probes)
Incluye utilidades de ops para CRON_SECRET, login customer Google Ads, sync de seguimiento BPS y probes de conexiones.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-29 16:48:44 +02:00

224 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Preview · Seguimiento · Virginia Molet</title>
<style>
:root { --bg:#0B0F19; --card:#111827; --side:#0D121F; --line:#1F2937; --brand:#E58A3C; --text:#F3F4F6; --muted:#9CA3AF; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
.shell { display:flex; min-height:100vh; }
aside { width:240px; background:var(--side); border-right:1px solid #1f2937; padding:20px 14px; }
.logo { display:flex; gap:10px; align-items:center; padding:8px; border-bottom:1px solid #1f293780; margin-bottom:18px; }
.mark { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#E58A3C,#B35E1B); display:grid; place-items:center; font-weight:800; }
nav a { display:flex; gap:10px; align-items:center; color:#D1D5DB; text-decoration:none; padding:10px 12px; border-radius:10px; font-size:14px; margin-bottom:4px; }
nav a.active { background:#1f293799; color:#fff; }
main { flex:1; padding:28px 36px; max-width:980px; }
h1 { margin:0; font-size:28px; letter-spacing:-.02em; }
.sub { color:var(--muted); font-size:14px; margin-top:6px; }
.badge { font-size:11px; color:#9CA3AF; border:1px solid #1f2937; background:#0d121f80; border-radius:8px; padding:8px 12px; }
.card { background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:20px; margin-top:22px; }
.head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.tabs { display:flex; gap:4px; background:#0003; border:1px solid #1f2937; border-radius:10px; padding:3px; }
.tabs span { font-size:12px; padding:6px 10px; border-radius:8px; color:#9CA3AF; }
.tabs span.on { background:#E58A3C33; color:#F0B27A; }
.chs { display:flex; gap:8px; margin:14px 0 8px; flex-wrap:wrap; }
.chs span { font-size:12px; border:1px solid #374151; border-radius:999px; padding:4px 10px; text-transform:capitalize; display:inline-flex; gap:6px; align-items:center; }
.chs i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.preview-note { font-size:11px; color:#FBBF24; margin-top:8px; }
ol { list-style:none; margin:18px 0 0; padding:0 0 0 14px; border-left:1px solid #1f2937; }
li { position:relative; margin:0 0 14px 12px; }
.dot { position:absolute; left:-19px; top:18px; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--bg); }
article { background:var(--card); border:1px solid #1f2937; border-radius:14px; padding:14px 16px; }
.row { display:flex; justify-content:space-between; gap:10px; }
.pill { font-size:10px; text-transform:uppercase; letter-spacing:.06em; border:1px solid; border-radius:6px; padding:2px 7px; margin-right:8px; }
.when { font-size:11px; color:#6B7280; }
h3 { margin:8px 0 0; font-size:14px; }
article p { margin:8px 0 0; font-size:12px; color:#9CA3AF; line-height:1.45; }
article a { color:#F0B27A; font-size:11px; text-decoration:none; white-space:nowrap; }
.top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
</style>
</head>
<body>
<div class="shell">
<aside>
<div class="logo"><div class="mark">4V</div><div><strong style="font-size:13px">4VENTURES</strong><div style="font-size:11px;color:#9CA3AF">Centro de Mando</div></div></div>
<nav>
<a href="#">Métricas</a>
<a class="active" href="#">● Seguimiento</a>
<a href="#">Objetivos del Mes</a>
<a href="#">Calendario Editorial</a>
<a href="#">Biblioteca de Activos</a>
</nav>
</aside>
<main>
<div class="top">
<div>
<h1>Seguimiento &amp; evolución</h1>
<p class="sub">Virginia Molet · timeline Superhuman + series de canal</p>
</div>
<div class="badge">Preview UI · datos reales de timeline</div>
</div>
<section class="card">
<div class="head">
<strong>Evolución por canal</strong>
<div class="tabs"><span class="on">Leads</span><span>Inversión</span><span>CPL</span></div>
</div>
<div class="chs">
<span><i style="background:#E58A3C"></i>meta</span>
<span><i style="background:#38BDF8"></i>google</span>
<span><i style="background:#34D399"></i>organic</span>
</div>
<svg viewBox="0 0 720 260" width="100%" style="max-width:100%">
<line x1="44" x2="704" y1="224" y2="224" stroke="#1F2937"/><text x="36" y="227" text-anchor="end" fill="#6B7280" font-size="10">0</text><line x1="44" x2="704" y1="172.0" y2="172.0" stroke="#1F2937"/><text x="36" y="175.0" text-anchor="end" fill="#6B7280" font-size="10">18</text><line x1="44" x2="704" y1="120.0" y2="120.0" stroke="#1F2937"/><text x="36" y="123.0" text-anchor="end" fill="#6B7280" font-size="10">36</text><line x1="44" x2="704" y1="68.0" y2="68.0" stroke="#1F2937"/><text x="36" y="71.0" text-anchor="end" fill="#6B7280" font-size="10">54</text><line x1="44" x2="704" y1="16" y2="16" stroke="#1F2937"/><text x="36" y="19" text-anchor="end" fill="#6B7280" font-size="10">72</text>
<path d="M 44.0 102.7 L 138.3 85.3 L 232.6 65.1 L 326.9 76.7 L 421.1 50.7 L 515.4 56.4 L 609.7 30.4 L 704.0 16.0" fill="none" stroke="#E58A3C" stroke-width="2.5"/><circle cx="44.0" cy="102.7" r="3.5" fill="#E58A3C"/><circle cx="138.3" cy="85.3" r="3.5" fill="#E58A3C"/><circle cx="232.6" cy="65.1" r="3.5" fill="#E58A3C"/><circle cx="326.9" cy="76.7" r="3.5" fill="#E58A3C"/><circle cx="421.1" cy="50.7" r="3.5" fill="#E58A3C"/><circle cx="515.4" cy="56.4" r="3.5" fill="#E58A3C"/><circle cx="609.7" cy="30.4" r="3.5" fill="#E58A3C"/><circle cx="704.0" cy="16.0" r="3.5" fill="#E58A3C"/><path d="M 44.0 189.3 L 138.3 183.6 L 232.6 192.2 L 326.9 177.8 L 421.1 172.0 L 515.4 180.7 L 609.7 166.2 L 704.0 160.4" fill="none" stroke="#38BDF8" stroke-width="2.5"/><circle cx="44.0" cy="189.3" r="3.5" fill="#38BDF8"/><circle cx="138.3" cy="183.6" r="3.5" fill="#38BDF8"/><circle cx="232.6" cy="192.2" r="3.5" fill="#38BDF8"/><circle cx="326.9" cy="177.8" r="3.5" fill="#38BDF8"/><circle cx="421.1" cy="172.0" r="3.5" fill="#38BDF8"/><circle cx="515.4" cy="180.7" r="3.5" fill="#38BDF8"/><circle cx="609.7" cy="166.2" r="3.5" fill="#38BDF8"/><circle cx="704.0" cy="160.4" r="3.5" fill="#38BDF8"/><path d="M 44.0 200.9 L 138.3 198.0 L 232.6 203.8 L 326.9 195.1 L 421.1 192.2 L 515.4 198.0 L 609.7 189.3 L 704.0 186.4" fill="none" stroke="#34D399" stroke-width="2.5"/><circle cx="44.0" cy="200.9" r="3.5" fill="#34D399"/><circle cx="138.3" cy="198.0" r="3.5" fill="#34D399"/><circle cx="232.6" cy="203.8" r="3.5" fill="#34D399"/><circle cx="326.9" cy="195.1" r="3.5" fill="#34D399"/><circle cx="421.1" cy="192.2" r="3.5" fill="#34D399"/><circle cx="515.4" cy="198.0" r="3.5" fill="#34D399"/><circle cx="609.7" cy="189.3" r="3.5" fill="#34D399"/><circle cx="704.0" cy="186.4" r="3.5" fill="#34D399"/>
<text x="44.0" y="250" text-anchor="middle" fill="#6B7280" font-size="9">07-06</text><text x="138.3" y="250" text-anchor="middle" fill="#6B7280" font-size="9">07-13</text><text x="232.6" y="250" text-anchor="middle" fill="#6B7280" font-size="9">07-20</text><text x="326.9" y="250" text-anchor="middle" fill="#6B7280" font-size="9">07-27</text><text x="421.1" y="250" text-anchor="middle" fill="#6B7280" font-size="9">08-03</text><text x="515.4" y="250" text-anchor="middle" fill="#6B7280" font-size="9">08-10</text><text x="609.7" y="250" text-anchor="middle" fill="#6B7280" font-size="9">08-17</text><text x="704.0" y="250" text-anchor="middle" fill="#6B7280" font-size="9">08-24</text>
</svg>
<p class="preview-note">La gráfica usa series de ejemplo (Virginia aún no tiene kpi_weekly). El timeline inferior sí es sync real de Superhuman.</p>
</section>
<section style="margin-top:28px">
<strong style="font-size:15px">Timeline reunión a reunión <span style="color:#6B7280;font-weight:400">(12)</span></strong>
<ol>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">18 Aug 2026</span>
<h3>Gravitae: Meta Ads/Google ADs</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_suvQLvnL" target="_blank">Superhuman ↗</a>
</div>
<p>- **[Landing Page del Practitioner en Coaching Ejecutivo](https://gravitaeacademy.com/es/diploma-en-coaching-ejecutivo/)**
📊 KPIs a vigilar las primeras 2 semanas
## Copy of T</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">01 Jul 2026</span>
<h3>wbf_mad_sice.pdf</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_suJVY_uk" target="_blank">Superhuman ↗</a>
</div>
<p>Abrir en Superhuman para el detalle completo.</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">01 Jul 2026</span>
<h3>Info emails Open Event 9/7/26</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_su8PImAd" target="_blank">Superhuman ↗</a>
</div>
<p>&gt; Añadimos a Carl Lewis que tiene mucho nombre
También quería compartir una oportunidad que puede ser de interés para quienes trabajáis en liderazgo, gestión de equipos o transfo</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">25 Jun 2026</span>
<h3>Email Open Event 9 julio.pdf</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_suQBkgXM" target="_blank">Superhuman ↗</a>
</div>
<p>Abrir en Superhuman para el detalle completo.</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">18 Jun 2026</span>
<h3>Email 1</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_suSUWITB" target="_blank">Superhuman ↗</a>
</div>
<p>1. EMAIL A TODOS LOS QUE SE HAN REGISTRADO AL EVENTO Y NO HAN IDO
TITULO: Ponte al día con lo que te perdiste en el I Salón Internacional de Coaching Ejecutivo
Hola NOMBRE,</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">08 Jun 2026</span>
<h3>WhatApp</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_suguIU-Q" target="_blank">Superhuman ↗</a>
</div>
<p>- Hola nombre. Quedan 4 días, te esperamos el viernes a las 9:30 en el saloninternacionacionalcoaching.com., por favor confirma tu asistencia abajo.
- Confirmar Asistencia
- N</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">24 Apr 2026</span>
<h3>Secuencia emails 240426</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_sulZ9VOu" target="_blank">Superhuman ↗</a>
</div>
<p>Es una [secuencia de 6 emails](https://drive.google.com/drive/folders/1i7717lRLgpgU5Y6FZonbbrpWjS3_pD96?usp=sharing), el primero para hoy si es posible y os ha dado tiempo a prepar</p>
</article>
</li>
<li>
<span class="dot"></span>
<article>
<div class="row">
<div>
<span class="pill" style="color:#34D399;border-color:#34D39955;background:#34D39922">Tema</span>
<span class="when">23 Apr 2026</span>
<h3>Web Salón V2</h3>
</div>
<a href="https://docs.superhuman.com/d/_dqt1ZA3XaMp/_sumI6wo-" target="_blank">Superhuman ↗</a>
</div>
<p>**Pestanas: Registro / Agenda / Organiza / Contacto**
### **AGENDA**
Te mando por aquí el texto para la agenda: primero poner un texto introductorio, luego los conferenciantes c</p>
</article>
</li>
</ol>
</section>
</main>
</div>
</body>
</html>