Ctrl K
ComunidadGuías…

mockups/client-reports-dashboard/revised.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!doctype html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Expanded Client Reports Dashboard</title>
  <style>
    :root {
      color-scheme: light;
      --canvas:#f6f6f4;--surface:#fff;--subtle:#f1f1ee;--hover:#ebebe7;
      --ink:#181817;--support:#545450;--muted:#70706a;
      --border:#deded9;--strong:#c7c7c0;--accent:#3658d4;--accent-soft:#edf0fc;
      --success:#167b5b;--warning:#ad6410;--danger:#bd433d;
      --radius:11px;--sidebar:220px;
      --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
    }
    :root[data-theme="dark"] {
      color-scheme:dark;
      --canvas:#101110;--surface:#171817;--subtle:#1e1f1d;--hover:#252623;
      --ink:#f2f2ef;--support:#c3c3bd;--muted:#979790;
      --border:#292a27;--strong:#3b3c37;--accent:#7590ff;--accent-soft:#202946;
      --success:#5bcea2;--warning:#eda957;--danger:#f07870;
    }
    *{box-sizing:border-box}
    html,body{min-width:320px;min-height:100%;margin:0;background:var(--canvas);color:var(--ink);font:14px/1.45 var(--sans)}
    body{min-height:100vh}
    button,a{font:inherit}
    button{color:inherit}
    a{color:inherit;text-decoration:none}
    button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    svg{display:block}
    .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

    .shell{min-height:100vh;padding-left:var(--sidebar)}
    .sidebar{position:fixed;z-index:40;inset:0 auto 0 0;display:flex;width:var(--sidebar);flex-direction:column;border-right:1px solid var(--border);background:var(--surface);padding:13px 11px}
    .brand,.nav-link,.user,.topbar,.context,.top-actions,.tabs,.page-heading,.actions,.button,.metric-head,.widget-head,.status-row,.recent-row,.pdf-toolbar,.pdf-actions{display:flex;align-items:center}
    .brand{min-height:42px;gap:10px;padding:0 6px}
    .brand-mark{display:grid;width:32px;height:32px;place-items:center;border-radius:8px;background:var(--accent);color:#fff;font-size:10px;font-weight:800}
    .brand-copy strong,.brand-copy span,.user-copy strong,.user-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .brand-copy strong{font-size:12px}.brand-copy span,.user-copy span{margin-top:1px;color:var(--muted);font-size:10px}
    .nav-group{margin-top:23px}
    .nav-label{display:block;margin:0 7px 7px;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
    .nav{display:grid;gap:3px}
    .nav-link{min-height:38px;gap:10px;border-radius:8px;color:var(--support);font-size:12px;font-weight:620;padding:7px 9px}
    .nav-link:hover{background:var(--subtle);color:var(--ink)}
    .nav-link.active{background:var(--accent-soft);color:var(--accent)}
    .user{gap:9px;margin-top:auto;border-top:1px solid var(--border);padding:14px 6px 2px}
    .avatar{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:800}
    .user-copy{min-width:0}.user-copy strong{font-size:10px}

    .topbar{position:sticky;z-index:30;top:0;min-height:58px;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--surface);padding:0 20px}
    .context{gap:9px}.context-icon{display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--subtle);color:var(--accent)}
    .context strong{font-size:12px}
    .top-actions{gap:7px}.prototype{border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--muted);font-size:8px;font-weight:750;letter-spacing:.06em;padding:4px 8px;text-transform:uppercase}
    .icon-button,.button{justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer}
    .icon-button{display:grid;width:34px;height:34px;place-items:center;padding:0}
    .icon-button:hover,.button:hover{border-color:var(--strong);background:var(--subtle)}
    .menu{display:none}
    .tabs{min-height:46px;gap:24px;border-bottom:1px solid var(--border);background:var(--surface);padding:0 20px}
    .tab{position:relative;display:grid;min-height:46px;place-items:center;color:var(--muted);font-size:11px;font-weight:650}
    .tab.active{color:var(--ink)}.tab.active:after{position:absolute;inset:auto 0 -1px;height:2px;background:var(--accent);content:""}

    .workspace{width:100%;padding:20px 22px 26px}
    .page-heading{align-items:flex-end;justify-content:space-between;gap:28px}
    h1{margin:0;font-size:28px;font-weight:730;letter-spacing:-.03em;line-height:1.08}
    .page-heading p{max-width:72ch;margin:6px 0 0;color:var(--muted);font-size:12px}
    .live{display:inline-flex;align-items:center;gap:6px}.live:before{width:5px;height:5px;border-radius:50%;background:var(--success);content:""}
    .actions{flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:8px}
    .button{min-height:36px;gap:7px;padding:7px 11px;font-size:10px;font-weight:700}
    .button.primary{border-color:var(--ink);background:var(--ink);color:var(--surface)}
    .button.reset{display:none}body.editing .button.reset{display:flex}
    .editing-note{display:none;margin:10px 0 0;color:var(--accent);font-size:10px;font-weight:650}body.editing .editing-note{display:block}

    .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
    .metric{min-width:0;padding:14px 17px}.metric+.metric{border-left:1px solid var(--border)}
    .metric-head{justify-content:space-between;gap:10px;color:var(--muted)}
    .metric-label{overflow:hidden;font-size:9px;font-weight:760;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
    .metric-value{display:block;margin-top:10px;font-size:clamp(25px,2.2vw,34px);font-weight:735;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
    .metric-note{display:block;margin-top:6px;color:var(--muted);font-size:9px}.metric-note.warning{color:var(--warning)}.metric-note.success{color:var(--success)}

    .dashboard{display:grid;min-height:calc(100vh - 284px);grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(280px,1fr) minmax(240px,.82fr);gap:12px;margin-top:12px}
    .widget{position:relative;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
    .status{grid-column:span 5}.budget{grid-column:span 7}.activity{grid-column:span 8}.recent{grid-column:span 4}
    .widget-head{min-height:58px;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);padding:12px 15px}
    .widget-title strong,.widget-title span{display:block}.widget-title strong{font-size:11px;font-weight:720}.widget-title span{margin-top:2px;color:var(--muted);font-size:9px}
    .widget-total{font:650 14px/1 var(--mono);font-variant-numeric:tabular-nums}
    .widget-body{height:calc(100% - 58px);min-height:0;padding:15px}

    .status-layout{display:grid;height:100%;grid-template-columns:minmax(150px,.8fr) minmax(160px,1fr);align-items:center;gap:24px}
    .donut-wrap{position:relative;width:min(100%,184px);margin:auto}.donut{width:100%;transform:rotate(-90deg)}.donut circle{fill:none;stroke-width:8}.donut .track{stroke:var(--subtle)}
    .donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.donut-center strong{font-size:28px;letter-spacing:-.04em;line-height:1}.donut-center span{margin-top:4px;color:var(--muted);font-size:9px}
    .status-list{display:grid}.status-row{min-height:38px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;border-bottom:1px solid var(--border)}
    .status-row:last-child{border:0}.dot{width:7px;height:7px;border-radius:50%;background:var(--dot)}.status-row span{color:var(--support);font-size:10px}.status-row strong{font:650 10px/1 var(--mono)}

    .bars{display:grid;height:100%;align-content:center;gap:14px}.bar{display:grid;grid-template-columns:minmax(118px,.75fr) minmax(160px,2fr) 70px;align-items:center;gap:12px}
    .bar span{overflow:hidden;color:var(--support);font-size:10px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.track{height:8px;overflow:hidden;border-radius:999px;background:var(--subtle)}.fill{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--accent)}.bar strong{text-align:right;font:620 10px/1 var(--mono)}

    .activity-body{display:grid;height:100%;grid-template-rows:auto 1fr;gap:12px}
    .activity-summary{display:flex;align-items:baseline;gap:8px}.activity-summary strong{font-size:20px;letter-spacing:-.035em}.activity-summary span{color:var(--muted);font-size:9px}
    .activity-chart{position:relative;display:grid;min-height:160px;grid-template-columns:repeat(6,1fr);align-items:end;gap:clamp(12px,2.5vw,34px);border-bottom:1px solid var(--border);padding:15px 20px 24px}
    .activity-chart:before,.activity-chart:after{position:absolute;right:0;left:0;height:1px;background:var(--border);content:""}.activity-chart:before{top:30%}.activity-chart:after{top:62%}
    .month{position:relative;z-index:1;display:grid;height:100%;grid-template-rows:auto 1fr auto;align-items:end;gap:6px;text-align:center}
    .month strong{color:var(--support);font:620 9px/1 var(--mono)}.month i{display:block;width:min(44px,100%);height:var(--h);min-height:10px;margin:0 auto;border-radius:5px 5px 2px 2px;background:var(--accent)}.month span{position:absolute;top:calc(100% + 7px);right:0;left:0;color:var(--muted);font:9px/1 var(--mono)}
    .month.latest i{background:var(--success)}.month.latest strong{color:var(--success)}

    .recent-list{display:grid;height:100%;align-content:stretch}.recent-row{min-height:25%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px solid var(--border);padding:7px 0}.recent-row:first-child{padding-top:0}.recent-row:last-child{border:0;padding-bottom:0}
    .recent-copy{min-width:0}.recent-copy strong,.recent-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-copy strong{font-size:9px}.recent-copy span{margin-top:2px;color:var(--muted);font-size:8px}
    .badge{align-self:center;border-radius:999px;background:var(--bg);color:var(--fg);font-size:8px;font-weight:700;padding:4px 7px}

    .handle{position:absolute;z-index:3;display:none;width:27px;height:27px;place-items:center;border:1px solid var(--accent);border-radius:7px;background:var(--surface);color:var(--accent);cursor:grab}.handle.move{top:7px;right:7px}.handle.resize{right:7px;bottom:7px;cursor:nwse-resize}
    body.editing .dashboard{outline:1px dashed var(--strong);outline-offset:6px}body.editing .widget{border-color:var(--accent)}body.editing .handle{display:grid}body.editing .widget-head{padding-right:48px}

    .pdf-modal{position:fixed;z-index:100;inset:0;display:none;overflow:auto;background:rgb(0 0 0/.72);padding:20px}
    body.pdf-open{overflow:hidden}body.pdf-open .pdf-modal{display:block}
    .pdf-shell{width:min(100%,900px);margin:auto}.pdf-toolbar{position:sticky;z-index:4;top:0;justify-content:space-between;gap:20px;margin-bottom:12px;border:1px solid #34363b;border-radius:10px;background:#17191d;color:#f4f4f2;padding:10px 12px}
    .pdf-toolbar strong,.pdf-toolbar span{display:block}.pdf-toolbar strong{font-size:12px}.pdf-toolbar span{margin-top:2px;color:#a9a9a4;font-size:9px}.pdf-actions{gap:7px}
    .pdf-page{width:816px;min-height:1056px;margin:auto;background:#fff;color:#191918;box-shadow:0 24px 70px rgb(0 0 0/.32);padding:42px}
    .pdf-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid #d9d9d4;padding-bottom:18px}.pdf-head p{margin:0 0 5px;color:#6b6b66;font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.pdf-head h2{margin:0;font-size:25px;letter-spacing:-.03em}.pdf-head time{color:#6b6b66;font-size:9px}
    .pdf-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid #deded9;border-radius:8px}.pdf-metric{padding:12px}.pdf-metric+.pdf-metric{border-left:1px solid #deded9}.pdf-metric span{display:block;color:#6b6b66;font-size:8px;font-weight:700;text-transform:uppercase}.pdf-metric strong{display:block;margin-top:8px;font-size:20px;letter-spacing:-.03em}
    .pdf-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:12px;margin-top:12px}.pdf-card{border:1px solid #deded9;border-radius:8px;padding:14px}.pdf-card h3{margin:0;font-size:11px}.pdf-card p{margin:3px 0 0;color:#6b6b66;font-size:8px}.pdf-card.wide{grid-column:1/-1}.pdf-status{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:18px;margin-top:16px}.pdf-donut{width:118px}.pdf-legend{display:grid;gap:8px}.pdf-legend div{display:flex;justify-content:space-between;border-bottom:1px solid #e5e5e1;padding-bottom:6px;font-size:8px}.pdf-bars{display:grid;gap:10px;margin-top:20px}.pdf-bar{display:grid;grid-template-columns:105px 1fr 45px;align-items:center;gap:8px;font-size:8px}.pdf-track{height:6px;border-radius:99px;background:#eeeeeb}.pdf-fill{display:block;width:var(--w);height:100%;border-radius:inherit;background:#3658d4}.pdf-activity{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:20px;height:180px;margin-top:14px;border-bottom:1px solid #deded9;padding:10px 24px 18px}.pdf-month{display:grid;height:100%;grid-template-rows:auto 1fr auto;align-items:end;gap:5px;text-align:center}.pdf-month i{display:block;width:30px;height:var(--h);margin:auto;border-radius:4px 4px 1px 1px;background:#3658d4}.pdf-month strong,.pdf-month span{font:8px/1 var(--mono)}.pdf-month span{color:#6b6b66}
    .pdf-footer{display:flex;justify-content:space-between;margin-top:24px;border-top:1px solid #deded9;color:#6b6b66;font-size:8px;padding-top:10px}

    .backdrop{display:none}
    @media(max-width:1100px){.status,.budget,.activity,.recent{grid-column:span 6}.dashboard{grid-template-rows:auto}.status-layout{grid-template-columns:1fr}.donut-wrap{width:145px}.widget-body{min-height:250px}}
    @media(max-width:820px){.shell{padding-left:0}.sidebar{width:min(278px,calc(100vw - 40px));transform:translateX(-100%);transition:transform .18s ease}body.menu-open .sidebar{transform:none}.menu{display:grid}.backdrop{position:fixed;z-index:35;inset:0;border:0;background:rgb(0 0 0/.45)}body.menu-open .backdrop{display:block}.workspace{padding:18px 16px 28px}.page-heading{align-items:flex-start;flex-direction:column;gap:16px}.actions{justify-content:flex-start}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(3){border-left:0}.metric:nth-child(n+3){border-top:1px solid var(--border)}.dashboard{min-height:0}.status,.budget,.activity,.recent{grid-column:1/-1}.activity-chart{gap:14px}}
    @media(max-width:470px){.topbar,.tabs{padding-inline:14px}.prototype{display:none}.actions{display:grid;width:100%;grid-template-columns:1fr}.actions .button{width:100%}body.editing .actions{grid-template-columns:1fr 1fr}.actions .primary{grid-column:1/-1}.bar{grid-template-columns:90px 1fr 52px;gap:8px}.activity-chart{gap:8px;padding-inline:8px}.pdf-modal{padding:0}.pdf-toolbar{border-radius:0}}
    @media print {
      @page{size:letter;margin:.35in}
      body *{visibility:hidden!important}
      .pdf-modal,.pdf-modal *{visibility:visible!important}
      .pdf-modal{position:absolute!important;inset:0!important;display:block!important;overflow:visible!important;background:#fff!important;padding:0!important}
      .pdf-toolbar{display:none!important}.pdf-shell{width:auto!important;margin:0!important}
      .pdf-page{width:7.8in!important;min-height:10.3in!important;margin:0!important;box-shadow:none!important;padding:.24in!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
    }
    @media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
  </style>
</head>
<body>
  <div class="shell">
    <aside class="sidebar" aria-label="Client portal navigation">
      <a class="brand" href="#"><span class="brand-mark">TW</span><span class="brand-copy"><strong>Twenty Portal</strong><span>Client workspace</span></span></a>
      <nav>
        <section class="nav-group"><span class="nav-label">Workspace</span><div class="nav"><a class="nav-link" href="#">⌂ <span>Home</span></a></div></section>
        <section class="nav-group"><span class="nav-label">Shared views</span><div class="nav"><a class="nav-link active" href="#" aria-current="page">▣ <span>Projects</span></a><a class="nav-link" href="#">□ <span>Invoices</span></a></div></section>
        <section class="nav-group"><span class="nav-label">Account</span><div class="nav"><a class="nav-link" href="#">⚙ <span>Settings</span></a></div></section>
      </nav>
      <div class="user"><span class="avatar">AV</span><span class="user-copy"><strong>Alex Vaughan</strong><span>Client contributor</span></span></div>
    </aside>
    <button class="backdrop" type="button" data-action="close-menu" aria-label="Close navigation"></button>
    <main>
      <header class="topbar">
        <div class="context"><button class="icon-button menu" type="button" data-action="menu" aria-label="Open navigation">☰</button><span class="context-icon">▣</span><strong>Projects</strong></div>
        <div class="top-actions"><span class="prototype">Review mockup · demo data</span><button class="icon-button" type="button" data-action="theme" aria-label="Switch theme">◐</button><span class="avatar">AV</span></div>
      </header>
      <nav class="tabs" aria-label="Projects sections"><a class="tab" href="#">Records</a><a class="tab active" href="#" aria-current="page">Reports</a></nav>
      <div class="workspace">
        <section class="page-heading">
          <div><h1>Project overview</h1><p>A current summary of the 24 projects shared with your organization. <span class="live">Updated just now</span></p></div>
          <div class="actions">
            <button class="button" type="button" data-action="edit" aria-pressed="false">☷ <span>Edit layout</span></button>
            <button class="button reset" type="button" data-action="reset">↶ Reset layout</button>
            <button class="button primary" type="button" data-action="export">↓ Export PDF</button>
          </div>
        </section>
        <p class="editing-note" role="status">Layout editing is active. Move and resize controls are available on every widget.</p>
        <section class="metrics" aria-label="Project summary">
          <article class="metric"><div class="metric-head"><span class="metric-label">Active projects</span><span>▣</span></div><strong class="metric-value">24</strong><span class="metric-note">Count of scoped records</span></article>
          <article class="metric"><div class="metric-head"><span class="metric-label">Total budget</span><span>$</span></div><strong class="metric-value">$838,250</strong><span class="metric-note">Sum across shared projects</span></article>
          <article class="metric"><div class="metric-head"><span class="metric-label">At risk</span><span>△</span></div><strong class="metric-value">5</strong><span class="metric-note warning">Needs attention</span></article>
          <article class="metric"><div class="metric-head"><span class="metric-label">Complete</span><span>✓</span></div><strong class="metric-value">4</strong><span class="metric-note success">Current portfolio</span></article>
        </section>
        <section class="dashboard" aria-label="Project report widgets">
          <article class="widget status">
            <button class="handle move" type="button" aria-label="Move Portfolio status">⠿</button><button class="handle resize" type="button" aria-label="Resize Portfolio status">↗</button>
            <header class="widget-head"><span class="widget-title"><strong>Portfolio status</strong><span>Projects grouped by current stage</span></span><span class="widget-total">24</span></header>
            <div class="widget-body status-layout">
              <div class="donut-wrap"><svg class="donut" viewBox="0 0 120 120" role="img" aria-label="10 in progress, 5 at risk, 5 planning, 4 complete"><circle class="track" cx="60" cy="60" r="44"/><circle cx="60" cy="60" r="44" pathLength="100" stroke="#5978ee" stroke-dasharray="41.67 58.33"/><circle cx="60" cy="60" r="44" pathLength="100" stroke="#d98a2f" stroke-dasharray="20.83 79.17" stroke-dashoffset="-41.67"/><circle cx="60" cy="60" r="44" pathLength="100" stroke="#8b8b84" stroke-dasharray="20.83 79.17" stroke-dashoffset="-62.5"/><circle cx="60" cy="60" r="44" pathLength="100" stroke="#26956e" stroke-dasharray="16.67 83.33" stroke-dashoffset="-83.33"/></svg><div class="donut-center"><strong>24</strong><span>Projects</span></div></div>
              <div class="status-list"><div class="status-row"><i class="dot" style="--dot:#5978ee"></i><span>In progress</span><strong>10</strong></div><div class="status-row"><i class="dot" style="--dot:#d98a2f"></i><span>At risk</span><strong>5</strong></div><div class="status-row"><i class="dot" style="--dot:#8b8b84"></i><span>Planning</span><strong>5</strong></div><div class="status-row"><i class="dot" style="--dot:#26956e"></i><span>Complete</span><strong>4</strong></div></div>
            </div>
          </article>
          <article class="widget budget">
            <button class="handle move" type="button" aria-label="Move Budget by project">⠿</button><button class="handle resize" type="button" aria-label="Resize Budget by project">↗</button>
            <header class="widget-head"><span class="widget-title"><strong>Budget by project</strong><span>Largest shared project budgets</span></span><span class="widget-total">$838k</span></header>
            <div class="widget-body bars">
              <div class="bar"><span>Atlas website launch</span><span class="track"><i class="fill" style="--w:100%"></i></span><strong>$245k</strong></div><div class="bar"><span>Northstar research</span><span class="track"><i class="fill" style="--w:76%"></i></span><strong>$186k</strong></div><div class="bar"><span>Orbit analytics</span><span class="track"><i class="fill" style="--w:64%"></i></span><strong>$156k</strong></div><div class="bar"><span>Harbor client portal</span><span class="track"><i class="fill" style="--w:57%"></i></span><strong>$139k</strong></div><div class="bar"><span>Cedar operations</span><span class="track"><i class="fill" style="--w:46%"></i></span><strong>$112k</strong></div>
            </div>
          </article>
          <article class="widget activity">
            <button class="handle move" type="button" aria-label="Move Project activity">⠿</button><button class="handle resize" type="button" aria-label="Resize Project activity">↗</button>
            <header class="widget-head"><span class="widget-title"><strong>Project activity</strong><span>Record updates during the last six months</span></span><span class="widget-total">82</span></header>
            <div class="widget-body activity-body"><div class="activity-summary"><strong>18</strong><span>updates in July · highest month</span></div><div class="activity-chart" role="img" aria-label="Monthly activity: February 8, March 10, April 13, May 15, June 18, July 18 updates"><div class="month"><strong>8</strong><i style="--h:38%"></i><span>Feb</span></div><div class="month"><strong>10</strong><i style="--h:48%"></i><span>Mar</span></div><div class="month"><strong>13</strong><i style="--h:62%"></i><span>Apr</span></div><div class="month"><strong>15</strong><i style="--h:72%"></i><span>May</span></div><div class="month"><strong>18</strong><i style="--h:86%"></i><span>Jun</span></div><div class="month latest"><strong>18</strong><i style="--h:86%"></i><span>Jul</span></div></div></div>
          </article>
          <article class="widget recent">
            <button class="handle move" type="button" aria-label="Move Recently updated">⠿</button><button class="handle resize" type="button" aria-label="Resize Recently updated">↗</button>
            <header class="widget-head"><span class="widget-title"><strong>Recently updated</strong><span>Latest activity in shared projects</span></span><span class="widget-total">4</span></header>
            <div class="widget-body recent-list"><div class="recent-row"><span class="recent-copy"><strong>Atlas website launch</strong><span>Updated 5 minutes ago</span></span><span class="badge" style="--bg:var(--accent-soft);--fg:var(--accent)">In progress</span></div><div class="recent-row"><span class="recent-copy"><strong>Northstar research sprint</strong><span>Updated 42 minutes ago</span></span><span class="badge" style="--bg:#392a18;--fg:var(--warning)">At risk</span></div><div class="recent-row"><span class="recent-copy"><strong>Orbit analytics rollout</strong><span>Updated 1 hour ago</span></span><span class="badge" style="--bg:var(--accent-soft);--fg:var(--accent)">In progress</span></div><div class="recent-row"><span class="recent-copy"><strong>Harbor client portal</strong><span>Updated 3 hours ago</span></span><span class="badge" style="--bg:#18372d;--fg:var(--success)">Complete</span></div></div>
          </article>
        </section>
      </div>
    </main>
  </div>

  <section class="pdf-modal" role="dialog" aria-modal="true" aria-labelledby="pdf-title">
    <div class="pdf-shell">
      <header class="pdf-toolbar"><div><strong>PDF-friendly report</strong><span>Letter format · print-safe colors and spacing</span></div><div class="pdf-actions"><button class="button" type="button" data-action="print">Print / Save PDF</button><button class="icon-button" type="button" data-action="close-pdf" aria-label="Close PDF preview">×</button></div></header>
      <article class="pdf-page">
        <header class="pdf-head"><div><p>Client project report</p><h2 id="pdf-title">Project overview</h2></div><time datetime="2026-07-27">July 27, 2026</time></header>
        <section class="pdf-metrics"><div class="pdf-metric"><span>Active projects</span><strong>24</strong></div><div class="pdf-metric"><span>Total budget</span><strong>$838,250</strong></div><div class="pdf-metric"><span>At risk</span><strong>5</strong></div><div class="pdf-metric"><span>Complete</span><strong>4</strong></div></section>
        <section class="pdf-grid">
          <article class="pdf-card"><h3>Portfolio status</h3><p>Projects grouped by current stage</p><div class="pdf-status"><svg class="pdf-donut donut" viewBox="0 0 120 120" aria-label="Portfolio status"><circle cx="60" cy="60" r="44" fill="none" stroke="#eeeeeb" stroke-width="8"/><circle cx="60" cy="60" r="44" pathLength="100" fill="none" stroke="#3658d4" stroke-width="8" stroke-dasharray="41.67 58.33"/><circle cx="60" cy="60" r="44" pathLength="100" fill="none" stroke="#d98a2f" stroke-width="8" stroke-dasharray="20.83 79.17" stroke-dashoffset="-41.67"/><circle cx="60" cy="60" r="44" pathLength="100" fill="none" stroke="#8b8b84" stroke-width="8" stroke-dasharray="20.83 79.17" stroke-dashoffset="-62.5"/><circle cx="60" cy="60" r="44" pathLength="100" fill="none" stroke="#26956e" stroke-width="8" stroke-dasharray="16.67 83.33" stroke-dashoffset="-83.33"/></svg><div class="pdf-legend"><div><span>In progress</span><strong>10</strong></div><div><span>At risk</span><strong>5</strong></div><div><span>Planning</span><strong>5</strong></div><div><span>Complete</span><strong>4</strong></div></div></div></article>
          <article class="pdf-card"><h3>Budget by project</h3><p>Largest shared project budgets</p><div class="pdf-bars"><div class="pdf-bar"><span>Atlas</span><span class="pdf-track"><i class="pdf-fill" style="--w:100%"></i></span><strong>$245k</strong></div><div class="pdf-bar"><span>Northstar</span><span class="pdf-track"><i class="pdf-fill" style="--w:76%"></i></span><strong>$186k</strong></div><div class="pdf-bar"><span>Orbit</span><span class="pdf-track"><i class="pdf-fill" style="--w:64%"></i></span><strong>$156k</strong></div><div class="pdf-bar"><span>Harbor</span><span class="pdf-track"><i class="pdf-fill" style="--w:57%"></i></span><strong>$139k</strong></div><div class="pdf-bar"><span>Cedar</span><span class="pdf-track"><i class="pdf-fill" style="--w:46%"></i></span><strong>$112k</strong></div></div></article>
          <article class="pdf-card wide"><h3>Project activity</h3><p>82 record updates during the last six months</p><div class="pdf-activity"><div class="pdf-month"><strong>8</strong><i style="--h:38%"></i><span>Feb</span></div><div class="pdf-month"><strong>10</strong><i style="--h:48%"></i><span>Mar</span></div><div class="pdf-month"><strong>13</strong><i style="--h:62%"></i><span>Apr</span></div><div class="pdf-month"><strong>15</strong><i style="--h:72%"></i><span>May</span></div><div class="pdf-month"><strong>18</strong><i style="--h:86%"></i><span>Jun</span></div><div class="pdf-month"><strong>18</strong><i style="--h:86%;background:#167b5b"></i><span>Jul</span></div></div></article>
        </section>
        <footer class="pdf-footer"><span>Twenty Portal · Confidential client report</span><span>1 / 1</span></footer>
      </article>
    </div>
  </section>

  <script>
    const root=document.documentElement,body=document.body;
    const edit=document.querySelector('[data-action="edit"]'),editText=edit.querySelector("span");
    document.querySelector('[data-action="theme"]').onclick=()=>root.dataset.theme=root.dataset.theme==="dark"?"light":"dark";
    edit.onclick=()=>{const active=body.classList.toggle("editing");edit.setAttribute("aria-pressed",String(active));editText.textContent=active?"Done editing":"Edit layout"};
    document.querySelector('[data-action="export"]').onclick=()=>body.classList.add("pdf-open");
    document.querySelector('[data-action="close-pdf"]').onclick=()=>body.classList.remove("pdf-open");
    document.querySelector('[data-action="print"]').onclick=()=>window.print();
    document.querySelector('[data-action="menu"]').onclick=()=>body.classList.add("menu-open");
    document.querySelector('[data-action="close-menu"]').onclick=()=>body.classList.remove("menu-open");
    document.querySelector('[data-action="reset"]').onclick=()=>body.classList.remove("editing");
    document.querySelectorAll('a[href="#"]').forEach(a=>a.onclick=e=>e.preventDefault());
    document.addEventListener("keydown",e=>{if(e.key==="Escape"){body.classList.remove("pdf-open","menu-open")}});
  </script>
</body>
</html>