<!doctype html>

<html>

<head>

<title>Compass New Client Intake Navigator</title>

<style>

body{font-family:Arial,sans-serif;background:#f6f8fb;color:#172033;margin:0}.wrap{max-width:920px;margin:auto;padding:28px}

.card{background:#fff;border:1px solid #d8dee8;border-radius:20px;padding:24px;box-shadow:0 8px 26px #0001}

h1{text-align:center;font-size:34px}.brand{text-align:center;color:#1f5f8b;font-weight:700;letter-spacing:.2em}.steps{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}

.step{padding:9px 12px;border-radius:999px;background:#e9edf4;font-weight:700;font-size:13px}.activeStep{background:#1f5f8b;color:white}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.grid{grid-template-columns:1fr}.wrap{padding:14px}}

.choice,.check{border:1px solid #d8dee8;border-radius:14px;padding:14px;background:#f8fafc;cursor:pointer}.choice.sel{background:#fff;border-color:#1f5f8b;box-shadow:0 0 0 2px #1f5f8b22}

label{font-weight:700;font-size:13px;display:block;margin:12px 0 6px}input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #d8dee8;font-size:15px;box-sizing:border-box}textarea{min-height:130px}

.risk{border-radius:14px;padding:14px;margin:14px 0;font-weight:700}.green{background:#eaf6ef;color:#217a4d}.yellow{background:#fff6dd;color:#8b6500}.red{background:#fdecec;color:#9f2d2d}

button{border:0;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}.primary{background:#1f5f8b;color:white}.secondary{background:#e9edf4}.submit{background:#b88a2c;color:white;width:100%;margin-top:14px}

.summary{white-space:pre-wrap;background:#f8fafc;border:1px solid #d8dee8;border-radius:14px;padding:14px}.btns{display:flex;justify-content:space-between}

</style></head>

<div class="brand">COMPASS FIDUCIARY GROUP, LLC</div>

<h1>New Client Intake Navigator</h1>

<p style="text-align:center">Interactive pre-screening tool for new fiduciary matters.</p>

const matters={

estate:{label:"Estate / Personal Representative",docs:["Death certificate","Will, trust, codicils, or estate plan documents","Heirs/devisees/interested persons","Known assets, debts, deeds, titles, statements, insurance","Pending court papers or urgent deadlines"],note:"Estate matters require enough asset and creditor information to evaluate administrative risk and ability to support services."},

guardianship:{label:"Guardianship",docs:["Medical or capacity records","Current residence/facility/hospital","Providers, medications, diagnoses, service plans","Family/caregiver/agency contacts","Safety, abuse, neglect, exploitation, hospitalization concerns"],note:"Guardianship matters require review of medical condition, care environment, safety, and least-restrictive alternatives."},

conservatorship:{label:"Conservatorship",docs:["Bank, brokerage, retirement, insurance, benefits information","Income, debts, expenses, benefit concerns","Real property, vehicles, business interests, valuables","Exploitation concerns, suspicious transfers, missing assets","Court orders, accountings, reports, fiduciary records"],note:"Compass generally needs meaningful financial information before agreeing to nomination because missing records or insufficient liquidity creates fiduciary risk."},

trust:{label:"Trust Administration",docs:["Complete trust agreement and amendments","Trustee/beneficiary/remainder beneficiary information","Asset statements, deeds, insurance, tax returns, accountings","Distribution requests or disputes","Special needs, benefits, substance-use, litigation, risk concerns"],note:"Trust matters require review of the trust instrument before Compass can evaluate authority, duties, beneficiary rights, and risk."}

};

const flags=["Court deadline or hearing already scheduled","Hospitalization, unsafe placement, or urgent medical issue","Suspected financial exploitation or missing assets","Family conflict or contested appointment","Real property, business interest, or unusual asset","Public benefits, ALTCS, SSI, Medicaid, or special-needs issue","Taxes, creditor issues, or unresolved accounting problem"];

let s={step:0,matter:"estate",urgency:"Time-sensitive, but not emergency",flags:[],name:"",email:"",phone:"",client:"",county:"",deadline:"",summary:""};

const names=["Matter Type","Risk Flags","Information","Review"];

function risk(){let x=s.urgency.startsWith("Emergency")?3:s.urgency.startsWith("Time")?2:1;s.flags.forEach(f=>{if(/deadline|Hospitalization|exploitation|conflict/i.test(f))x++});return x>=5?["High priority review","red"]:x>=3?["Prompt review recommended","yellow"]:["Standard intake review","green"];}

function ready(){let x=0;if(s.name)x+=10;if(s.email||s.phone)x+=10;if(s.client)x+=15;if(s.county)x+=10;if(s.deadline)x+=10;if(s.summary.length>30)x+=25;x+=Math.min(s.flags.length*5,20);return Math.min(x,100)}

function set(k,v){s[k]=v;render()} function tog(f){s.flags=s.flags.includes(f)?s.flags.filter(a=>a!==f):[...s.flags,f];render()}

function esc(v){return String(v||"").replaceAll("&","&").replaceAll("<","<").replaceAll('"',""")}

function render(){document.getElementById("steps").innerHTML=names.map((n,i)=>`<div class="step ${i===s.step?'activeStep':''}">${i+1}. ${n}</div>`).join("");let app=document.getElementById("app"),html="",r=risk(),m=matters[s.matter];

if(s.step===0){html='<h2>What type of matter is this?</h2><div class="grid">'+Object.keys(matters).map(k=>`<div class="choice ${s.matter===k?'sel':''}" onclick="set('matter','${k}')"><b>${matters[k].label}</b><p>${matters[k].note}</p></div>`).join("")+'</div>'}

if(s.step===1){html=`<h2>Urgency and risk flags</h2><label>Urgency</label><select onchange="set('urgency',this.value)">${["Emergency / immediate risk","Time-sensitive, but not emergency","Routine planning or nomination"].map(o=>`<option ${s.urgency===o?'selected':''}>${o}</option>`).join("")}</select><label>Concerns</label><div class="grid">`+flags.map(f=>`<label class="check"><input type="checkbox" ${s.flags.includes(f)?'checked':''} onchange="tog('${f.replaceAll("'","\'")}')"> ${f}</label>`).join("")+"</div>"}

if(s.step===2){html=`<h2>Basic intake information</h2><div class="grid">${inp("name","Referral source name")}${inp("email","Email")}${inp("phone","Phone")}${inp("client","Proposed client / estate / trust")}${inp("county","County / court")}${inp("deadline","Deadline or hearing date")}</div><label>Summary</label><textarea oninput="set('summary',this.value)">${esc(s.summary)}</textarea>`}

if(s.step===3){let body=`COMPASS NEW CLIENT INTAKE REVIEW\n\nMatter Type: ${m.label}\nPriority: ${r[0]}\nUrgency: ${s.urgency}\n\nReferral Source: ${s.name||"Not provided"}\nEmail: ${s.email||"Not provided"}\nPhone: ${s.phone||"Not provided"}\nProposed Matter: ${s.client||"Not provided"}\nCounty / Court: ${s.county||"Not provided"}\nDeadline: ${s.deadline||"Not provided"}\n\nRisk Flags:\n${s.flags.length?s.flags.map(x=>"- "+x).join("\n"):"None selected"}\n\nLikely Needed Documents:\n${m.docs.map(x=>"- "+x).join("\n")}\n\nSummary:\n${s.summary||"Not provided"}`;html=`<h2>Review and submit</h2><div class="summary">${esc(body)}</div><button class="submit" onclick="location.href='mailto:jtaddei@compassfidgroup.com?subject=New%20Client%20Intake%20Review&body=${encodeURIComponent(body)}'">Open Email Submission</button>`}

html+=`<div class="risk ${r[1]}">${r[0]} | Intake readiness: ${ready()}%</div><div class="btns"><button class="secondary" onclick="s.step=Math.max(0,s.step-1);render()" ${s.step===0?'disabled':''}>Back</button><button class="primary" onclick="s.step=Math.min(3,s.step+1);render()" ${s.step===3?'disabled':''}>Continue</button></div>`;app.innerHTML=html}

function inp(k,p){return `<div><label>${p}</label><input value="${esc(s[k])}" oninput="set('${k}',this.value)" placeholder="${p}"></div>`}

render();

</script></body></html>There is the html program.

Below is a simple, complete HTML program that demonstrates basic structure, styling, and interactivity. You can copy and paste it into a file named index.html and open it in a browser.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Simple HTML Program</title>
  <style>
    :root {
      --bg: #f7fafc;
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #2563eb;
      --danger: #dc2626;
      --radius: 10px;
      --shadow: 0 4px 16px rgba(16,24,40,0.08);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }

    html, body {
      height: 100%;
      margin: 0;
      background: linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
      color: #111827;
    }

    .container {
      max-width: 880px;
      margin: 48px auto;
      padding: 24px;
    }

    .card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom:

New Client Intake Navigator

Compass Fiduciary Group, LLC

Professional Fiduciaries - Guided By A Moral Compass