Created
February 27, 2026 01:32
-
-
Save milstan/802f96c80425cdd5949b54f508cdfbaa to your computer and use it in GitHub Desktop.
Leadbay — Individual section mockups (use ?s=1 through ?s=4)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: #f5f6f8; | |
| color: #1a1a2e; | |
| padding: 32px 40px; | |
| line-height: 1.5; | |
| } | |
| h2 { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 14px; } | |
| .card { | |
| background: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); | |
| overflow: hidden; | |
| } | |
| .toolbar { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 10px 16px; border-bottom: 1px solid #e5e7eb; background: #fafbfc; | |
| } | |
| .tab-group { display: flex; gap: 2px; } | |
| .tab { padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #6b7280; } | |
| .tab.active { background: #1a1a2e; color: #fff; } | |
| .search { | |
| flex: 1; padding: 5px 10px 5px 28px; border: 1px solid #e5e7eb; border-radius: 6px; | |
| font-size: 12.5px; max-width: 200px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 8px center no-repeat; | |
| } | |
| .toggle-wrapper { | |
| display: flex; align-items: center; gap: 5px; font-size: 12.5px; | |
| font-weight: 500; color: #374151; margin-left: auto; white-space: nowrap; | |
| } | |
| .toggle { | |
| width: 32px; height: 18px; background: #3b82f6; border-radius: 9px; | |
| position: relative; | |
| } | |
| .toggle::after { | |
| content: ''; width: 14px; height: 14px; background: #fff; border-radius: 50%; | |
| position: absolute; top: 2px; right: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .sort-btn { | |
| padding: 5px 10px; border: 1px solid #e5e7eb; border-radius: 6px; | |
| font-size: 12.5px; color: #6b7280; background: #fff; | |
| } | |
| table { width: 100%; border-collapse: collapse; } | |
| thead th { | |
| padding: 7px 10px; text-align: left; font-size: 10.5px; font-weight: 600; | |
| color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; | |
| border-bottom: 1px solid #e5e7eb; background: #fafbfc; | |
| } | |
| tbody td { | |
| padding: 9px 10px; font-size: 12.5px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; | |
| } | |
| tbody tr:hover { background: #f8fafc; } | |
| tbody tr.selected { background: #eff6ff; } | |
| .cb { width: 14px; height: 14px; border: 1.5px solid #d1d5db; border-radius: 3px; display: inline-block; } | |
| .status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 2px 7px 2px 5px; border-radius: 10px; } | |
| .status .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } | |
| .status.wanted { background: #dbeafe; color: #1d4ed8; } | |
| .status.wanted .dot { background: #3b82f6; } | |
| .status.inbound { background: #fef3c7; color: #92400e; } | |
| .status.inbound .dot { background: #f59e0b; } | |
| .status.default { background: #f3f4f6; color: #6b7280; } | |
| .status.default .dot { background: #9ca3af; } | |
| .status.won { background: #d1fae5; color: #065f46; } | |
| .status.won .dot { background: #10b981; } | |
| .contact-cell { display: flex; align-items: center; gap: 7px; min-width: 0; } | |
| .contact-icon { | |
| width: 26px; height: 26px; border-radius: 50%; display: flex; | |
| align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; | |
| } | |
| .contact-icon.person { background: #ede9fe; color: #7c3aed; } | |
| .contact-icon.company { background: #fef3c7; color: #d97706; } | |
| .contact-icon.enrich { background: #f3f4f6; color: #6b7280; } | |
| .contact-info { display: flex; flex-direction: column; min-width: 0; gap: 0px; } | |
| .contact-name { font-size: 12.5px; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } | |
| .contact-name .title { font-weight: 400; color: #6b7280; } | |
| .contact-phone { font-size: 11.5px; color: #3b82f6; text-decoration: none; white-space: nowrap; } | |
| .contact-email { font-size: 11.5px; color: #3b82f6; text-decoration: none; white-space: nowrap; } | |
| .contact-enrich-label { font-size: 11px; color: #9ca3af; white-space: nowrap; } | |
| .contact-empty { color: #d1d5db; font-size: 12.5px; } | |
| .company-name { font-weight: 600; color: #1a1a2e; } | |
| .company-sector { font-size: 10.5px; color: #9ca3af; } | |
| .score { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 20px; font-size: 11.5px; font-weight: 600; border-radius: 5px; } | |
| .score.high { background: #d1fae5; color: #065f46; } | |
| .score.medium { background: #fef3c7; color: #92400e; } | |
| .score.low { background: #f3f4f6; color: #6b7280; } | |
| .discover-contact { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #6b7280; } | |
| .discover-contact .title-badge { font-weight: 500; color: #374151; } | |
| .enrich-badge { font-size: 10.5px; padding: 1px 5px; background: #f3f4f6; color: #6b7280; border-radius: 7px; white-space: nowrap; } | |
| .separator { color: #d1d5db; } | |
| .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding: 10px 14px; background: #fafbfc; border-radius: 8px; } | |
| .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; } | |
| /* Page break between sections */ | |
| .page-break { page-break-after: always; margin-bottom: 40px; } | |
| </style> | |
| </head> | |
| <body id="body"></body> | |
| <script> | |
| // We'll render different sections based on URL hash | |
| const section = new URLSearchParams(window.location.search).get('s') || '1'; | |
| const body = document.getElementById('body'); | |
| const sections = { | |
| '1': ` | |
| <h2>Monitor Table — Contact column ON</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab">Discover</div> | |
| <div class="tab active">Monitor</div> | |
| <div class="tab">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"><div class="toggle"></div>Show contacts</div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead><tr> | |
| <th style="width:28px"></th><th>Company</th><th>Location</th><th>Size</th><th>Status</th><th style="min-width:240px">Recommended contact</th> | |
| </tr></thead> | |
| <tbody> | |
| <tr class="selected"><td><span class="cb"></span></td> | |
| <td><div class="company-name">Dassault Systemes</div><div class="company-sector">Enterprise Software</div></td> | |
| <td>Paris, FR</td><td>5,001-10K</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon person">\u{1F464}</div><div class="contact-info"><div class="contact-name">J. Martin, <span class="title">VP Sales</span></div><a class="contact-phone" href="#">\u{1F4DE} +33 6 12 34 56 78</a></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">BioMerieux SA</div><div class="company-sector">Biotechnology</div></td> | |
| <td>Lyon, FR</td><td>10,001+</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon person">\u{1F464}</div><div class="contact-info"><div class="contact-name">C. Bernard, <span class="title">CTO</span></div><a class="contact-email" href="#">\u{2709}\u{FE0F} c.bernard@biomerieux.com</a></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Capgemini</div><div class="company-sector">IT Consulting</div></td> | |
| <td>Paris, FR</td><td>10,001+</td> | |
| <td><span class="status won"><span class="dot"></span>won</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon person">\u{1F464}</div><div class="contact-info"><div class="contact-name">P. Dubois, <span class="title">Director</span></div></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">OVHcloud</div><div class="company-sector">Cloud Infrastructure</div></td> | |
| <td>Roubaix, FR</td><td>1,001-5K</td> | |
| <td><span class="status inbound"><span class="dot"></span>inbound</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon company">\u{1F3E2}</div><div class="contact-info"><a class="contact-phone" href="#">\u{1F4DE} +33 3 20 00 12 34</a><span class="contact-enrich-label">Company phone \u{00B7} ask for CEO</span></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Doctolib</div><div class="company-sector">Health Tech</div></td> | |
| <td>Paris, FR</td><td>1,001-5K</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon enrich">\u{1F50D}</div><div class="contact-info"><div class="contact-name" style="color:#6b7280">VP Sales</div><span class="contact-enrich-label">5 contacts to enrich</span></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Atos SE</div><div class="company-sector">IT Services</div></td> | |
| <td>Bezons, FR</td><td>10,001+</td> | |
| <td><span class="status default"><span class="dot"></span>default</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon company">\u{1F3E2}</div><div class="contact-info"><a class="contact-phone" href="#">\u{1F4DE} +33 1 73 26 00 00</a><span class="contact-enrich-label">Company phone</span></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Startup XYZ</div><div class="company-sector">SaaS</div></td> | |
| <td>Bordeaux, FR</td><td>1-10</td> | |
| <td><span class="status default"><span class="dot"></span>default</span></td> | |
| <td><span class="contact-empty">\u{2014}</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"><div class="contact-icon person" style="width:18px;height:18px;font-size:9px">\u{1F464}</div> Personal contact</div> | |
| <div class="legend-item"><div class="contact-icon company" style="width:18px;height:18px;font-size:9px">\u{1F3E2}</div> Company switchboard</div> | |
| <div class="legend-item"><div class="contact-icon enrich" style="width:18px;height:18px;font-size:9px">\u{1F50D}</div> To enrich</div> | |
| <div class="legend-item"><span style="color:#3b82f6">\u{1F4DE} phone</span> Click to call</div> | |
| <div class="legend-item"><span style="color:#3b82f6">\u{2709}\u{FE0F} email</span> Click to email</div> | |
| </div>`, | |
| '2': ` | |
| <h2>Discover Table — Contact hints (lightweight)</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab active">Discover</div> | |
| <div class="tab">Monitor</div> | |
| <div class="tab">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"><div class="toggle"></div>Show contacts</div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead><tr> | |
| <th style="width:28px"></th><th>Company</th><th>Location</th><th>Size</th><th>Score</th><th>Contact hints</th> | |
| </tr></thead> | |
| <tbody> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Dassault Systemes</div><div class="company-sector">Enterprise Software</div></td> | |
| <td>Paris, FR</td><td>5,001-10K</td><td><span class="score high">92</span></td> | |
| <td><div class="discover-contact"><span class="title-badge">VP Sales</span><span class="separator">\u{00B7}</span><span>\u{1F4DE}</span><span class="separator">\u{00B7}</span><span class="enrich-badge">\u{1F464} 3</span></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Doctolib</div><div class="company-sector">Health Tech</div></td> | |
| <td>Paris, FR</td><td>1,001-5K</td><td><span class="score high">87</span></td> | |
| <td><div class="discover-contact"><span class="title-badge">CEO</span><span class="separator">\u{00B7}</span><span class="enrich-badge">5 contacts</span></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">OVHcloud</div><div class="company-sector">Cloud Infrastructure</div></td> | |
| <td>Roubaix, FR</td><td>1,001-5K</td><td><span class="score medium">74</span></td> | |
| <td><div class="discover-contact"><span class="title-badge">CTO</span><span class="separator">\u{00B7}</span><span>\u{1F4DE}</span><span class="separator">\u{00B7}</span><span class="enrich-badge">8 contacts</span></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Startup XYZ</div><div class="company-sector">SaaS</div></td> | |
| <td>Bordeaux, FR</td><td>1-10</td><td><span class="score low">52</span></td> | |
| <td><span class="contact-empty">\u{2014}</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div>`, | |
| '3': ` | |
| <h2>Activate Table — Ready to Prospect (toggle ON)</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab">Discover</div> | |
| <div class="tab">Monitor</div> | |
| <div class="tab active">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"><div class="toggle"></div>Show contacts</div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead><tr> | |
| <th style="width:28px"></th><th>Company</th><th>Location</th><th>Size</th><th>Score</th><th style="min-width:240px">Recommended contact</th> | |
| </tr></thead> | |
| <tbody> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Schneider Electric</div><div class="company-sector">Industrial Automation</div></td> | |
| <td>Rueil, FR</td><td>10,001+</td><td><span class="score high">94</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon person">\u{1F464}</div><div class="contact-info"><div class="contact-name">A. Leroy, <span class="title">Sales Director</span></div><a class="contact-phone" href="#">\u{1F4DE} +33 6 98 76 54 32</a></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Criteo</div><div class="company-sector">AdTech</div></td> | |
| <td>Paris, FR</td><td>1,001-5K</td><td><span class="score high">88</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon person">\u{1F464}</div><div class="contact-info"><div class="contact-name">S. Kim, <span class="title">Head of Partnerships</span></div><a class="contact-email" href="#">\u{2709}\u{FE0F} s.kim@criteo.com</a></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">Mirakl</div><div class="company-sector">Marketplace Platform</div></td> | |
| <td>Paris, FR</td><td>501-1K</td><td><span class="score medium">76</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon enrich">\u{1F50D}</div><div class="contact-info"><div class="contact-name" style="color:#6b7280">COO</div><span class="contact-enrich-label">3 contacts to enrich</span></div></div></td> | |
| </tr> | |
| <tr><td><span class="cb"></span></td> | |
| <td><div class="company-name">ContentSquare</div><div class="company-sector">Analytics</div></td> | |
| <td>Paris, FR</td><td>501-1K</td><td><span class="score medium">71</span></td> | |
| <td><div class="contact-cell"><div class="contact-icon company">\u{1F3E2}</div><div class="contact-info"><a class="contact-phone" href="#">\u{1F4DE} +33 1 55 35 00 00</a><span class="contact-enrich-label">Company phone \u{00B7} ask for VP Sales</span></div></div></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div>`, | |
| '4': ` | |
| <h2>All Contact Cell Variants</h2> | |
| <div class="card" style="padding: 16px;"> | |
| <table style="max-width: 560px;"> | |
| <thead><tr><th style="width:20px">#</th><th>Contact cell rendering</th><th style="font-size:10px; min-width: 120px">API data used</th></tr></thead> | |
| <tbody> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">1</td> | |
| <td><div class="contact-cell"><div class="contact-icon person" style="width:22px;height:22px;font-size:10px">\u{1F464}</div><div class="contact-info"><div class="contact-name">J. Martin, <span class="title">VP Sales</span></div><a class="contact-phone" href="#">\u{1F4DE} +33 6 12 34 56 78</a></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">recommended_contact + phone</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">2</td> | |
| <td><div class="contact-cell"><div class="contact-icon person" style="width:22px;height:22px;font-size:10px">\u{1F464}</div><div class="contact-info"><div class="contact-name">C. Bernard, <span class="title">CTO</span></div><a class="contact-email" href="#">\u{2709}\u{FE0F} c.bernard@biomerieux.com</a></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">recommended_contact + email*</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">3</td> | |
| <td><div class="contact-cell"><div class="contact-icon person" style="width:22px;height:22px;font-size:10px">\u{1F464}</div><div class="contact-info"><div class="contact-name">P. Dubois, <span class="title">Director</span></div></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">recommended_contact only</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">4</td> | |
| <td><div class="contact-cell"><div class="contact-icon company" style="width:22px;height:22px;font-size:10px">\u{1F3E2}</div><div class="contact-info"><a class="contact-phone" href="#">\u{1F4DE} +33 3 20 00 12 34</a><span class="contact-enrich-label">Company phone \u{00B7} ask for CEO</span></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">phone_numbers + title</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">5</td> | |
| <td><div class="contact-cell"><div class="contact-icon company" style="width:22px;height:22px;font-size:10px">\u{1F3E2}</div><div class="contact-info"><a class="contact-phone" href="#">\u{1F4DE} +33 1 73 26 00 00</a><span class="contact-enrich-label">Company phone</span></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">phone_numbers only</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">6</td> | |
| <td><div class="contact-cell"><div class="contact-icon enrich" style="width:22px;height:22px;font-size:10px">\u{1F50D}</div><div class="contact-info"><div class="contact-name" style="color:#6b7280">VP Sales</div><span class="contact-enrich-label">5 contacts to enrich</span></div></div></td> | |
| <td style="font-size:10.5px;color:#9ca3af">title + contacts_count</td> | |
| </tr> | |
| <tr><td style="font-size:11px;color:#7c3aed;font-weight:700">7</td> | |
| <td><span class="contact-empty">\u{2014}</span></td> | |
| <td style="font-size:10.5px;color:#9ca3af">nothing available</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p style="font-size:10.5px;color:#9ca3af;margin-top:10px">* Variant 2 (email fallback) requires adding <code>email</code> to <code>RecommendedContactPayload</code> (backend follow-up)</p> | |
| </div>` | |
| }; | |
| body.innerHTML = sections[section] || sections['1']; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment