35 lines
1.9 KiB
Plaintext
35 lines
1.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head><%- include('partials/head', { pageTitle: 'Pro Designer' }) %></head>
|
|
<body style="margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text)">
|
|
<%- include('partials/navbar') %>
|
|
<div class="app-layout" style="display:flex;min-height:100vh;padding-top:var(--hdr-h)">
|
|
<%- include('partials/sidebar') %>
|
|
<main class="main-area" style="flex:1;margin-left:var(--sb-w);padding:1rem 1.5rem 2rem;max-width:100%">
|
|
<%- include('partials/crm-bar') %>
|
|
<div class="page-hdr fade-in-up" style="margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem">
|
|
<div>
|
|
<h1 style="font-size:1.35rem;font-weight:800;margin:0">Pro Architecture Designer</h1>
|
|
<p style="font-size:.75rem;color:var(--text-muted);margin:.15rem 0 0">Drag-and-drop data architecture met CRM-koppeling</p>
|
|
</div>
|
|
<div style="display:flex;gap:.5rem;align-items:center">
|
|
<select id="clientPick" onchange="syncClient()" style="padding:.35rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:.75rem">
|
|
<option value="">Cliënt koppelen...</option>
|
|
<% clients.forEach(function(c) { %><option value="<%= c.id %>"<%= clientId == c.id ? ' selected' : '' %>><%= c.name %></option><% }); %>
|
|
</select>
|
|
<a href="/architecture" class="btn btn-small" style="padding:.35rem .7rem;font-size:.72rem;border-radius:7px;border:1px solid var(--border);color:var(--text-muted);text-decoration:none">← Diagrammen</a>
|
|
</div>
|
|
</div>
|
|
<iframe id="designerFrame" class="designer-frame" src="<%= designerUrl %>" allow="clipboard-read; clipboard-write"></iframe>
|
|
</main>
|
|
</div>
|
|
<script>
|
|
function syncClient() {
|
|
const id = document.getElementById('clientPick').value;
|
|
if (id) window.location = '/architecture/designer?client_id=' + id;
|
|
}
|
|
</script>
|
|
<%- include('partials/scripts') %>
|
|
</body>
|
|
</html>
|