Setting the file. One moment. Report Template · Company Research · browserbase/skills · Skills Docs(opens in a new tab)
references/report-template.html
HTML·139 lines·8 KB
link
rel
=
"preconnect"
href
=
"https://fonts.googleapis.com"
>
8<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9<style>
10 :root {
11 --brand: #F03603;
12 --high: #90C94D;
13 --medium: #F4BA41;
14 --low: #F03603;
15 --blue: #4DA9E4;
16 --black: #100D0D;
17 --gray: #514F4F;
18 --border: #edebeb;
19 --bg: #F9F6F4;
20 --card: #ffffff;
21 --text: #100D0D;
22 --muted: #514F4F;
23 }
24 * { margin: 0; padding: 0; box-sizing: border-box; }
25 body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; }
26 .container { max-width: 1060px; margin: 0 auto; padding: 2rem 1.5rem; }
27
28 /* Header */
29 header { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; }
30 .header-left h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--black); }
31 .header-left .meta { color: var(--muted); font-size: 0.875rem; }
32
33 /* Summary bar */
34 .summary { display: flex; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; }
35 .stat { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; flex: 1; min-width: 120px; }
36 .stat .label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; margin-bottom: 0.25rem; }
37 .stat .value { font-size: 1.5rem; font-weight: 700; color: var(--black); }
38 .stat .value.high { color: var(--high); }
39 .stat .value.medium { color: var(--medium); }
40 .stat .value.low { color: var(--low); }
41
42 /* Score distribution bar */
43 .score-bar { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
44 .score-bar .bar-track { height: 8px; background: #f6f5f5; border-radius: 4px; overflow: hidden; margin-top: 0.5rem; display: flex; }
45 .score-bar .bar-segment { height: 100%; }
46 .score-bar .bar-segment.high { background: var(--high); }
47 .score-bar .bar-segment.medium { background: var(--medium); }
48 .score-bar .bar-segment.low { background: var(--low); }
49 .score-bar .legend { display: flex; gap: 1.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }
50 .score-bar .legend span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
51 .score-bar .legend .l-high::before { background: var(--high); }
52 .score-bar .legend .l-medium::before { background: var(--medium); }
53 .score-bar .legend .l-low::before { background: var(--low); }
54
55 /* Table */
56 .results-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 2rem; }
57 .results-table th { text-align: left; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: #fafafa; }
58 .results-table td { padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; vertical-align: top; }
59 .results-table tr:last-child td { border-bottom: none; }
60 .results-table tr:hover { background: #fdfcfb; }
61 .results-table a { color: var(--brand); text-decoration: none; font-weight: 500; }
62 .results-table a:hover { text-decoration: underline; }
63
64 /* Score badge */
65 .score { display: inline-block; font-size: 0.8125rem; font-weight: 700; padding: 2px 10px; border-radius: 2px; min-width: 32px; text-align: center; }
66 .score.high { background: rgba(144,201,77,0.12); color: #5a8a1a; border: 1px solid rgba(144,201,77,0.3); }
67 .score.medium { background: rgba(244,186,65,0.12); color: #9a7520; border: 1px solid rgba(244,186,65,0.3); }
68 .score.low { background: rgba(240,54,3,0.08); color: var(--low); border: 1px solid rgba(240,54,3,0.2); }
69
70 /* Reasoning text */
71 .reasoning { color: var(--muted); font-size: 0.8125rem; max-width: 300px; }
72
73 /* Footer */
74 footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
75 footer a { color: var(--brand); text-decoration: none; font-weight: 500; }
76 footer a:hover { text-decoration: underline; }
77</style>
78</head>
79<body>
80
81<div class="container">
82 <header>
83 <div class="header-left">
84 <h1>{{TITLE}}</h1>
85 <div class="meta">{{META}}</div>
86 </div>
87 <a href="https://browserbase.com" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:var(--muted);font-size:0.8125rem;font-weight:500;">
88 <span>Powered by Browserbase</span>
89 <svg width="32" height="32" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" rx="8" fill="#F03603"/><path d="M36 72.2222V27.7778H51.2381C57.5873 27.7778 62.6667 32.8571 62.6667 39.2063V41.746C62.6667 44.6667 61.5873 47.3968 59.7461 49.3651C62.2858 51.4603 63.9366 54.6349 63.9366 58.254V60.7936C63.9366 67.1428 58.8572 72.2222 52.508 72.2222H36ZM42.3493 65.873H52.508C55.3651 65.873 57.5873 63.6508 57.5873 60.7936V58.254C57.5873 55.3968 55.3651 53.1746 52.508 53.1746H42.3493V65.873ZM42.3493 46.8254H51.2381C54.0953 46.8254 56.3175 44.6032 56.3175 41.746V39.2063C56.3175 36.3492 54.0953 34.127 51.2381 34.127H42.3493V46.8254Z" fill="white"/></svg>
90 </a>
91 </header>
92
93 <div class="summary">
94 <div class="stat"><div class="label">Companies</div><div class="value">{{TOTAL}}</div></div>
95 <div class="stat"><div class="label">Strong Fit (8-10)</div><div class="value high">{{HIGH_COUNT}}</div></div>
96 <div class="stat"><div class="label">Partial Fit (5-7)</div><div class="value medium">{{MEDIUM_COUNT}}</div></div>
97 <div class="stat"><div class="label">Weak Fit (1-4)</div><div class="value low">{{LOW_COUNT}}</div></div>
98 </div>
99
100 <div class="score-bar">
101 <div style="display:flex;justify-content:space-between;align-items:baseline;">
102 <span style="font-size:0.875rem;font-weight:500;">Score Distribution</span>
103 <span style="font-size:0.875rem;font-weight:600;color:var(--high);">{{HIGH_PCT}}% strong fit</span>
104 </div>
105 <div class="bar-track">
106 <div class="bar-segment high" style="width:{{HIGH_PCT}}%"></div>
107 <div class="bar-segment medium" style="width:{{MEDIUM_PCT}}%"></div>
108 <div class="bar-segment low" style="width:{{LOW_PCT}}%"></div>
109 </div>
110 <div class="legend">
111 <span class="l-high">Strong (8-10)</span>
112 <span class="l-medium">Partial (5-7)</span>
113 <span class="l-low">Weak (1-4)</span>
114 </div>
115 </div>
116
117 <table class="results-table">
118 <thead>
119 <tr>
120 <th>Score</th>
121 <th>Company</th>
122 <th>Product</th>
123 <th>Industry</th>
124 <th>Fit Reasoning</th>
125 </tr>
126 </thead>
127 <tbody>
128 {{TABLE_ROWS}}
129 </tbody>
130 </table>
131</div>
132
133<footer>
134 <svg width="16" height="16" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" rx="8" fill="#F03603"/><path d="M36 72.2222V27.7778H51.2381C57.5873 27.7778 62.6667 32.8571 62.6667 39.2063V41.746C62.6667 44.6667 61.5873 47.3968 59.7461 49.3651C62.2858 51.4603 63.9366 54.6349 63.9366 58.254V60.7936C63.9366 67.1428 58.8572 72.2222 52.508 72.2222H36ZM42.3493 65.873H52.508C55.3651 65.873 57.5873 63.6508 57.5873 60.7936V58.254C57.5873 55.3968 55.3651 53.1746 52.508 53.1746H42.3493V65.873ZM42.3493 46.8254H51.2381C54.0953 46.8254 56.3175 44.6032 56.3175 41.746V39.2063C56.3175 36.3492 54.0953 34.127 51.2381 34.127H42.3493V46.8254Z" fill="white"/></svg>
135 Generated by <a href="https://github.com/anthropics/skills">company-research</a> · Powered by <a href="https://browserbase.com">Browserbase</a>
136</footer>
137
138</body>
139</html>