PlanReady — Admin

@import url(‘https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap’); :root { –navy: #0d1b2a; –navy2: #162436; –slate: #1e3a52; –amber: #d4820a; –amber-l: #f0a835; –amber-bg: #fdf6ee; –green: #2d6a4f; –green-l: #52b788; –green-bg: #f0fbf4; –red: #c0392b; –red-bg: #fdf2f0; –stone: #f5f1ea; –cream: #faf8f3; –white: #ffffff; –border: #e5e0d5; –text: #1a1a2e; –mid: #4a4a6a; –muted: #8888aa; –mono: ‘DM Mono’, monospace; } - { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; } body { font-family:‘DM Sans’,sans-serif; background:var(–cream); color:var(–text); font-size:14px; line-height:1.6; } /* ── LAYOUT ── */ #app { display:flex; min-height:100vh; } /* ── SIDEBAR ── */ .sidebar { width:220px; flex-shrink:0; background:var(–navy); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:50; } .sidebar-logo { padding:24px 20px 20px; font-family:‘DM Serif Display’,serif; font-size:20px; color:white; border-bottom:1px solid rgba(255,255,255,0.08); } .sidebar-logo span { color:var(–amber-l); } .sidebar-logo small { display:block; font-family:‘DM Sans’,sans-serif; font-size:10px; color:rgba(255,255,255,0.35); font-weight:400; letter-spacing:1px; text-transform:uppercase; margin-top:2px; } .nav-section { padding:16px 12px 4px; font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.25); } .nav-item { display:flex; align-items:center; gap:10px; padding:10px 16px; margin:2px 8px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:500; color:rgba(255,255,255,0.6); transition:all 0.15s; } .nav-item:hover { background:rgba(255,255,255,0.06); color:white; } .nav-item.active { background:rgba(212,130,10,0.2); color:var(–amber-l); } .nav-item .icon { font-size:16px; width:20px; text-align:center; } .sidebar-bottom { margin-top:auto; padding:16px; } .api-status { background:rgba(255,255,255,0.05); border-radius:8px; padding:12px; font-size:11px; } .api-status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:6px; } .api-status-dot.demo { background:#f59e0b; } .api-status-dot.live { background:#10b981; } .api-key-input { width:100%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); color:white; padding:7px 10px; border-radius:6px; font-size:11px; font-family:var(–mono); margin-top:8px; outline:none; } .api-key-input::placeholder { color:rgba(255,255,255,0.25); } /* ── MAIN ── */ .main { margin-left:220px; flex:1; min-height:100vh; } /* ── VIEWS ── */ .view { display:none; padding:32px 36px; max-width:1100px; } .view.active { display:block; } /* ── PAGE HEADER ── */ .page-header { margin-bottom:32px; } .page-header h1 { font-family:‘DM Serif Display’,serif; font-size:32px; margin-bottom:4px; } .page-header p { color:var(–muted); font-size:14px; } /* ── DASHBOARD ── */ .stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; } .stat-card { background:white; border:1px solid var(–border); border-radius:12px; padding:20px; } .stat-num { font-family:‘DM Serif Display’,serif; font-size:36px; color:var(–navy); line-height:1; margin-bottom:4px; } .stat-label { font-size:12px; color:var(–muted); text-transform:uppercase; letter-spacing:1px; } .stat-card.highlight { background:var(–navy); } .stat-card.highlight .stat-num { color:var(–amber-l); } .stat-card.highlight .stat-label { color:rgba(255,255,255,0.4); } .section-title { font-family:‘DM Serif Display’,serif; font-size:20px; margin-bottom:16px; } .client-table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; border:1px solid var(–border); } .client-table th { background:var(–stone); padding:11px 16px; text-align:left; font-size:11px; font-weight:600; color:var(–mid); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(–border); } .client-table td { padding:13px 16px; border-bottom:1px solid var(–border); font-size:13px; color:var(–mid); } .client-table tr:last-child td { border-bottom:none; } .client-table tr:hover td { background:var(–stone); cursor:pointer; } .client-table td:first-child { font-weight:600; color:var(–text); } .badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; } .badge-green { background:var(–green-bg); color:var(–green); } .badge-amber { background:var(–amber-bg); color:var(–amber); } .badge-navy { background:#e8edf5; color:var(–navy); } .badge-red { background:var(–red-bg); color:var(–red); } .badge-purple { background:#f3f0ff; color:#7c3aed; } /* ── FORM ── */ .form-shell { background:white; border:1px solid var(–border); border-radius:16px; overflow:hidden; } .form-progress { height:3px; background:var(–stone); } .form-progress-fill { height:100%; background:linear-gradient(90deg,var(–amber),var(–amber-l)); transition:width 0.4s; } .form-header { padding:28px 36px 0; } .form-header .step-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(–amber); margin-bottom:8px; } .form-header h2 { font-family:‘DM Serif Display’,serif; font-size:26px; margin-bottom:4px; } .form-header p { color:var(–muted); font-size:14px; } .form-body { padding:28px 36px; } .form-footer { padding:20px 36px 28px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(–stone); } .field-group { margin-bottom:20px; } .field-label { display:block; font-size:13px; font-weight:600; color:var(–text); margin-bottom:6px; } .field-hint { font-size:12px; color:var(–muted); margin-bottom:6px; line-height:1.5; } .field-input, .field-select, .field-textarea { width:100%; padding:11px 14px; border:1.5px solid var(–border); border-radius:8px; font-family:‘DM Sans’,sans-serif; font-size:14px; color:var(–text); background:var(–cream); outline:none; transition:border-color 0.2s; -webkit-appearance:none; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color:var(–amber); background:white; } .field-textarea { resize:vertical; min-height:90px; } .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .radio-group { display:flex; flex-direction:column; gap:8px; } .radio-option { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid var(–border); border-radius:8px; cursor:pointer; transition:all 0.15s; } .radio-option:hover { border-color:var(–amber); background:var(–amber-bg); } .radio-option.selected { border-color:var(–amber); background:var(–amber-bg); } .radio-option input { accent-color:var(–amber); } .radio-option span { font-size:13px; } .checkbox-group { display:flex; flex-direction:column; gap:6px; } .checkbox-option { display:flex; align-items:center; gap:10px; padding:9px 14px; border:1.5px solid var(–border); border-radius:8px; cursor:pointer; transition:all 0.15s; } .checkbox-option:hover { border-color:var(–amber); background:var(–amber-bg); } .checkbox-option.selected { border-color:var(–amber); background:var(–amber-bg); } .checkbox-option input { accent-color:var(–amber); } /* ── BUTTONS ── */ .btn { padding:11px 24px; border-radius:9px; font-family:‘DM Sans’,sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.15s; border:none; display:inline-flex; align-items:center; gap:8px; } .btn-primary { background:var(–navy); color:white; } .btn-primary:hover { background:var(–amber); transform:translateY(-1px); } .btn-amber { background:var(–amber); color:white; } .btn-amber:hover { background:var(–amber-l); color:var(–navy); transform:translateY(-1px); box-shadow:0 6px 20px rgba(212,130,10,0.3); } .btn-ghost { background:transparent; color:var(–mid); border:1.5px solid var(–border); } .btn-ghost:hover { border-color:var(–mid); color:var(–text); } .btn-sm { padding:7px 16px; font-size:12px; } .btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; } /* ── GENERATING STATE ── */ .generating-overlay { position:fixed; inset:0; background:rgba(13,27,42,0.85); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:200; display:none; } .generating-overlay.show { display:flex; } .gen-card { background:white; border-radius:16px; padding:48px; text-align:center; max-width:440px; width:90%; } .gen-spinner { width:56px; height:56px; border:3px solid var(–stone); border-top-color:var(–amber); border-radius:50%; animation:spin 0.9s linear infinite; margin:0 auto 24px; } @keyframes spin { to { transform:rotate(360deg); } } .gen-title { font-family:‘DM Serif Display’,serif; font-size:24px; margin-bottom:8px; } .gen-steps { text-align:left; margin-top:24px; } .gen-step { display:flex; align-items:center; gap:12px; padding:8px 0; font-size:13px; color:var(–muted); } .gen-step .dot { width:8px; height:8px; border-radius:50%; background:var(–stone); flex-shrink:0; } .gen-step.done .dot { background:var(–green-l); } .gen-step.active .dot { background:var(–amber); animation:pulse 1s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } .gen-step.done span { color:var(–green); } .gen-step.active span { color:var(–amber); font-weight:600; } /* ── REPORT VIEW ── */ .report-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:24px; } .report-doc { background:white; border:1px solid var(–border); border-radius:12px; overflow:hidden; } .report-cover { background:var(–navy); color:white; padding:48px; position:relative; overflow:hidden; } .report-cover::before { content:’’; position:absolute; top:-80px; right:-80px; width:300px; height:300px; border-radius:50%; border:60px solid rgba(212,130,10,0.1); } .report-cover-tag { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(–amber-l); margin-bottom:12px; } .report-cover h1 { font-family:‘DM Serif Display’,serif; font-size:32px; margin-bottom:8px; line-height:1.15; } .report-cover-sub { font-size:15px; opacity:0.6; margin-bottom:32px; } .report-cover-meta { display:flex; gap:32px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); } .report-meta-item label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.4); display:block; margin-bottom:2px; } .report-meta-item span { font-size:13px; font-weight:600; } .verdict-banner { padding:20px 48px; display:flex; align-items:center; gap:16px; } .verdict-banner.strong-pd { background:#f0fbf4; border-bottom:1px solid #c3e6cb; } .verdict-banner.likely-pd { background:var(–amber-bg); border-bottom:1px solid #fcd34d; } .verdict-banner.full-planning { background:#fff7ed; border-bottom:1px solid #fed7aa; } .verdict-banner.high-risk { background:var(–red-bg); border-bottom:1px solid #fca5a5; } .verdict-icon { font-size:28px; } .verdict-text h3 { font-family:‘DM Serif Display’,serif; font-size:18px; } .verdict-text p { font-size:13px; color:var(–mid); } .report-body { padding:36px 48px; } .report-section { margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(–stone); } .report-section:last-child { border-bottom:none; } .report-section-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(–amber); margin-bottom:8px; } .report-section h2 { font-family:‘DM Serif Display’,serif; font-size:22px; margin-bottom:12px; } .report-section p { color:var(–mid); font-size:14px; line-height:1.75; margin-bottom:10px; } .info-box { background:var(–stone); border-left:3px solid var(–amber); padding:14px 18px; margin:14px 0; border-radius:0 8px 8px 0; } .info-box p { margin:0; font-size:13px; color:var(–mid); } .warn-box { background:var(–red-bg); border-left:3px solid var(–red); padding:14px 18px; margin:14px 0; border-radius:0 8px 8px 0; } .warn-box p { margin:0; font-size:13px; color:var(–red); } .good-box { background:var(–green-bg); border-left:3px solid var(–green); padding:14px 18px; margin:14px 0; border-radius:0 8px 8px 0; } .good-box p { margin:0; font-size:13px; color:var(–green); font-weight:500; } .data-table { width:100%; border-collapse:collapse; margin:14px 0; font-size:13px; } .data-table th { background:var(–navy); color:white; padding:10px 14px; text-align:left; font-size:11px; font-weight:600; letter-spacing:0.5px; } .data-table td { padding:10px 14px; border-bottom:1px solid var(–border); color:var(–mid); } .data-table tr:last-child td { border-bottom:none; } .data-table tr:nth-child(even) td { background:var(–stone); } .sop-step { display:flex; gap:16px; padding:16px 0; border-bottom:1px dashed var(–border); } .sop-step:last-child { border-bottom:none; } .sop-num { width:32px; height:32px; background:var(–navy); color:var(–amber-l); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:‘DM Serif Display’,serif; font-size:15px; flex-shrink:0; margin-top:2px; } .sop-content h4 { font-size:14px; font-weight:600; color:var(–text); margin-bottom:4px; } .sop-content p { font-size:13px; color:var(–mid); margin:0; line-height:1.65; } /* ── CLIENT DETAIL ── */ .client-header { display:flex; align-items:flex-start; justify-content:space-between; background:white; border:1px solid var(–border); border-radius:12px; padding:24px; margin-bottom:20px; } .client-header h2 { font-family:‘DM Serif Display’,serif; font-size:24px; margin-bottom:4px; } .timeline-strip { display:flex; gap:0; margin-top:20px; } .tl-item { flex:1; text-align:center; position:relative; } .tl-item::before { content:’’; position:absolute; top:14px; left:-50%; right:50%; height:2px; background:var(–border); z-index:0; } .tl-item:first-child::before { display:none; } .tl-dot { width:28px; height:28px; border-radius:50%; border:2px solid var(–border); background:white; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:12px; position:relative; z-index:1; } .tl-dot.done { background:var(–green); border-color:var(–green); color:white; font-size:10px; } .tl-dot.active { background:var(–amber); border-color:var(–amber); color:white; animation:pulse 1.5s infinite; } .tl-label { font-size:10px; color:var(–muted); font-weight:500; } .loom-card { background:var(–navy); color:white; border-radius:12px; padding:24px; margin-bottom:20px; } .loom-card h3 { font-family:‘DM Serif Display’,serif; font-size:18px; margin-bottom:8px; } .loom-card p { font-size:13px; opacity:0.7; margin-bottom:16px; } .loom-points { list-style:none; margin-bottom:20px; } .loom-points li { padding:6px 0; font-size:13px; color:var(–amber-l); border-bottom:1px solid rgba(255,255,255,0.08); } .loom-points li::before { content:’→ ’; opacity:0.5; } .loom-input { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:white; padding:10px 14px; border-radius:8px; width:100%; font-family:‘DM Sans’,sans-serif; font-size:13px; outline:none; } .loom-input::placeholder { color:rgba(255,255,255,0.3); } /* ── NEW CLIENT FORM ── */ .new-client-trigger { background:white; border:2px dashed var(–border); border-radius:12px; padding:32px; text-align:center; cursor:pointer; transition:all 0.2s; margin-bottom:24px; } .new-client-trigger:hover { border-color:var(–amber); background:var(–amber-bg); } .new-client-trigger h3 { font-family:‘DM Serif Display’,serif; font-size:20px; margin-bottom:4px; } .new-client-trigger p { color:var(–muted); font-size:13px; } /* ── MODAL ── */ .modal-overlay { position:fixed; inset:0; background:rgba(13,27,42,0.6); z-index:100; display:none; align-items:center; justify-content:center; } .modal-overlay.show { display:flex; } .modal { background:white; border-radius:16px; width:90%; max-width:620px; max-height:90vh; overflow-y:auto; } .modal-header { padding:24px 28px; border-bottom:1px solid var(–border); display:flex; align-items:center; justify-content:space-between; } .modal-header h3 { font-family:‘DM Serif Display’,serif; font-size:22px; } .modal-close { width:32px; height:32px; border:none; background:var(–stone); border-radius:50%; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; } .modal-body { padding:24px 28px; } .modal-footer { padding:16px 28px; border-top:1px solid var(–border); display:flex; justify-content:flex-end; gap:10px; } /* ── EMPTY STATE ── */ .empty-state { text-align:center; padding:64px 32px; color:var(–muted); } .empty-state .icon { font-size:48px; margin-bottom:16px; } .empty-state h3 { font-family:‘DM Serif Display’,serif; font-size:20px; color:var(–text); margin-bottom:8px; } /* ── PIPELINE VIEW ── */ .pipeline-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } .pipeline-col { background:var(–stone); border-radius:10px; padding:14px; } .pipeline-col-header { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(–mid); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; } .pipeline-count { background:white; color:var(–mid); font-size:10px; padding:2px 8px; border-radius:100px; font-weight:600; } .pipeline-card { background:white; border:1px solid var(–border); border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all 0.15s; } .pipeline-card:hover { border-color:var(–amber); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.08); } .pipeline-card h4 { font-size:13px; font-weight:600; margin-bottom:2px; } .pipeline-card p { font-size:11px; color:var(–muted); } .pipeline-card .card-time { font-size:10px; color:var(–muted); margin-top:6px; font-family:var(–mono); } /* ── SETTINGS ── */ .settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .settings-card { background:white; border:1px solid var(–border); border-radius:12px; padding:24px; } .settings-card h3 { font-size:15px; font-weight:600; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(–border); } .settings-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(–stone); } .settings-row:last-child { border-bottom:none; } .settings-row label { font-size:13px; color:var(–text); } .settings-row small { display:block; font-size:11px; color:var(–muted); } .toggle { width:40px; height:22px; background:var(–border); border-radius:100px; position:relative; cursor:pointer; transition:background 0.2s; flex-shrink:0; } .toggle.on { background:var(–green); } .toggle::after { content:’’; position:absolute; top:3px; left:3px; width:16px; height:16px; background:white; border-radius:50%; transition:transform 0.2s; } .toggle.on::after { transform:translateX(18px); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width:4px; height:4px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(–border); border-radius:2px; } /* ── PRINT REPORT ── */ @media print { .sidebar, .report-toolbar, .nav-item, .page-header, .stats-row { display:none !important; } .main { margin-left:0; } .view { padding:0; } }

PlanReady

Admin Platform

Enter Passcode

```

```

```

£0
Total Revenue

0

Reports Generated

0

Awaiting Loom

0

Drawing Upsells

Recent Clients

Client	Address	Project	Status	Report	Actions
📋 No reports yet Create your first report using the New Report form

Form Sent 0

Generating 0

Report Sent 0

Loom Needed 0

Converted 0

Client	Address	Project	Verdict	Status	Value	Actions
🏠 No clients yet Reports you generate will appear here

Automation

44-hour delivery delayReport held and sent at T+44hrs

Auto Loom reminderNotify you when Loom is due

Upsell email sequenceFire 3-email sequence post-delivery

Form completion reminderChase client at T+18hrs if form incomplete

Pricing

Feasibility report price

Drawings — simple

Drawings — standard

Drawings — complex

Your Details

Your name

Your email

Phone

API & Integrations

Claude API Key ⚠ Demo mode — reports use realistic mock data

Stripe Webhook Secret

📧 Email Sending — EmailJS Setup

Required to send reports directly from the dashboard. Takes about 10 minutes to set up. emailjs.com →

Setup steps:
1. Create account at emailjs.com (free tier = 200 emails/month)
2. Add Email Service → Gmail or custom SMTP → note your Service ID
3. Create Email Template → paste the template below → note your Template ID
4. Go to Account → API Keys → copy your Public Key
5. Paste all three below and hit Save

EmailJS Public Key

Service ID

Template ID

⚠ Not configured — enter keys above to enable email sending

EMAILJS TEMPLATE — paste this into your template editor
To:
 {{to_email}}
From name:
 Courtney Algar — PlanReady
Subject:
 {{subject}}
Body (HTML):
 {{html_body}}
Reply-to:
 courtney@planready.co.uk

Note: In EmailJS template editor set Content-Type to HTML and map {{html_body}} to the message body field

```

Generating Report

Analysing property and planning data...

Form data received

Researching PD parameters...

Analysing local planning policy

Checking comparable decisions

Writing SOP & recommendations

Formatting report