67 lines
5.1 KiB
Plaintext
67 lines
5.1 KiB
Plaintext
<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Rapport — <%= answers.company_name || 'Mek-Tech' %></title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--bg:#fff;--bg-card:#f6f8fa;--border:#d0d7de;--text:#1f2328;--text-muted:#656d76;--accent:#0969da;--green:#1a7f37;--purple:#8250df;--red:#cf222e;--cyan:#0550ae}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Inter',-apple-system,sans-serif;background:#fff;color:#000;line-height:1.5;padding:2rem;max-width:800px;margin:0 auto}
|
|
h1{font-size:1.5rem;margin-bottom:.25rem;color:#000}
|
|
h2{font-size:1.1rem;color:var(--accent);border-bottom:2px solid var(--accent);display:inline-block;margin-bottom:.75rem;padding-bottom:.25rem}
|
|
h3{font-size:1rem;margin-bottom:.35rem}
|
|
p{color:#333;font-size:.85rem;margin-bottom:.5rem}
|
|
table{width:100%;border-collapse:collapse;margin-bottom:1rem}
|
|
td{padding:.35rem .5rem;border-bottom:1px solid #e8ecef;font-size:.8rem}
|
|
td:first-child{width:35%;color:#656d76}
|
|
.header{text-align:center;padding-bottom:1rem;border-bottom:2px solid #d0d7de;margin-bottom:1.5rem}
|
|
.header h1{font-size:1.8rem;color:#000}
|
|
.header p{color:#656d76;font-size:.85rem}
|
|
.section{margin-bottom:1.25rem;page-break-inside:avoid}
|
|
.card{background:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;padding:.75rem;margin-bottom:.75rem}
|
|
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
|
|
.badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.7rem;font-weight:500}.badge.Starter{background:#dafbe1;color:#1a7f37}.badge.Standard{background:#ddf4ff;color:#0550ae}.badge.Advanced{background:#fbefff;color:#8250df}.badge.Enterprise{background:#ffebe9;color:#cf222e}
|
|
.phase{background:#f6f8fa;border:1px solid #d0d7de;border-radius:6px;padding:.75rem;margin-bottom:.5rem}
|
|
.phase h4{color:#8250df;margin-bottom:.35rem;font-size:.9rem}
|
|
.phase ul{list-style:none}
|
|
.phase li{padding:.15rem 0;font-size:.8rem}
|
|
.phase li::before{content:'→ ';color:#0969da}
|
|
.tech-item{display:flex;justify-content:space-between;padding:.35rem .5rem;border-bottom:1px solid #e8ecef;font-size:.8rem}
|
|
.tech-item:last-child{border-bottom:none}
|
|
.tech-label{color:#656d76}.tech-val{font-weight:500}
|
|
.footer{text-align:center;padding-top:1rem;border-top:1px solid #d0d7de;margin-top:1.5rem;color:#656d76;font-size:.75rem}
|
|
@media print{body{padding:0;max-width:100%}.no-print{display:none!important}}
|
|
</style></head><body>
|
|
<div class="no-print" style="margin-bottom:1rem"><button onclick="window.print()" style="padding:.5rem 1rem;background:#0969da;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85rem">🖨 Print / PDF</button></div>
|
|
<div class="header"><h1>AI & Data Assessment Rapport</h1><p><%= answers.company_name || 'Bedrijf' %> · <%= new Date().toLocaleDateString('nl-NL',{year:'numeric',month:'long',day:'numeric'}) %></p></div>
|
|
|
|
<h2>Architectuur Advies</h2>
|
|
<div class="section">
|
|
<h3>Data Lake</h3>
|
|
<div class="card"><div class="card-grid">
|
|
<div class="tech-item"><span class="tech-label">Tier</span><span class="badge <%= report.architecture.datalake.tier %>"><%= report.architecture.datalake.tier %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Storage</span><span class="tech-val"><%= report.architecture.datalake.storage %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Compute</span><span class="tech-val"><%= report.architecture.datalake.compute %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Catalog</span><span class="tech-val"><%= report.architecture.datalake.catalog %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Processing</span><span class="tech-val"><%= report.architecture.datalake.processing %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Governance</span><span class="tech-val"><%= report.architecture.datalake.governance %></span></div>
|
|
</div></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>AI/ML Platform</h3>
|
|
<div class="card"><div class="card-grid">
|
|
<div class="tech-item"><span class="tech-label">Tier</span><span class="badge <%= report.architecture.ai.tier %>"><%= report.architecture.ai.tier %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Serving</span><span class="tech-val"><%= report.architecture.ai.serving %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Orchestration</span><span class="tech-val"><%= report.architecture.ai.orchestration %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Monitoring</span><span class="tech-val"><%= report.architecture.ai.monitoring %></span></div>
|
|
<div class="tech-item"><span class="tech-label">Modellen</span><span class="tech-val"><%= report.architecture.ai.models %></span></div>
|
|
</div></div>
|
|
</div>
|
|
|
|
<h2>Implementatie Roadmap</h2>
|
|
<% report.phases.forEach(function(p){ %>
|
|
<div class="phase"><h4><%= p.name %></h4><ul><% p.items.forEach(function(i){ %><li><%= i %></li><% }) %></ul></div>
|
|
<% }) %>
|
|
|
|
<div class="footer">
|
|
<p>Gegenereerd door Mek-Tech Consulting Framework · Vertrouwelijk</p>
|
|
</div>
|
|
</body></html>
|