Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Denny Borges, P.A. | TCG DATAE — Signing Tracker</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <style>
    :root{
      /* Clean minimal palette */
      --bg: #f2f7f8;
      --paper: #ffffff;
      --text: #0f172a;
      --muted: #64748b;

      /* ultra-light separators */
      --line: rgba(15, 23, 42, .08);
      --line2: rgba(15, 23, 42, .12);

      --brand: #0b2a3a;
      --brand2:#1e4d6b;

      /* status */
      --wBg: rgba(245, 158, 11, .12);
      --sBg: rgba(59, 130, 246, .12);
      --dBg: rgba(34, 197, 94, .12);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }

    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
      color: var(--text);
      background: var(--bg); /* <- flat background, no “glow” */
      padding: 26px 18px 28px; /* <- bigger spacing */
    }

    .app{
      max-width: 1400px;           /* <- wider */
      margin: 0 auto;
    }

    /* Header: bigger + cleaner */
    header{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      padding: 6px 2px 18px;
    }

    .brandBlock{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .brandTitle{
      display:flex;
      align-items:center;
      gap:12px;
    }

    .mark{
      width:12px;
      height:12px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      /* no shadow */
    }

    h1{
      margin:0;
      font-size: 19px;      /* <- bigger */
      letter-spacing:.2px;
      font-weight: 850;
    }

    .sub{
      margin:0;
      color: var(--muted);
      font-size: 14px;      /* <- bigger */
      line-height:1.25;
    }

    .meta{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      color: var(--muted);
      font-size: 13px;      /* <- bigger */
    }

    .chip{
      background: rgba(255,255,255,.9);
      border: 1px solid var(--line);
      padding: 9px 12px;    /* <- bigger */
      border-radius: 999px;
      white-space:nowrap;
    }

    /* Main surface: FLAT (no heavy shadow, no blur) */
    .surface{
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow:hidden;
      /* removed: box-shadow, backdrop-filter */
    }

    .layout{
      display:grid;
      grid-template-columns: 30% 68%;
      gap: 18px;            /* <- more breathing room */
      padding: 18px;        /* <- bigger padding */
    }

    @media (max-width: 980px){
      .layout{ grid-template-columns: 1fr; }
    }

    .panelTitle{
      font-size: 12px;
      color: var(--muted);
      letter-spacing:.14em;
      text-transform: uppercase;
      margin: 2px 0 12px;
      font-weight: 800;
    }

    /* Form: bigger controls */
    form{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .field{
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 700;
    }

    input, select{
      width:100%;
      padding: 14px 14px;   /* <- bigger */
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-size: 15px;      /* <- bigger */
      font-weight: 700;
      outline:none;
      transition: border-color .12s ease, box-shadow .12s ease;
    }

    input:focus, select:focus{
      border-color: rgba(30,77,107,.35);
      box-shadow: 0 0 0 5px rgba(30,77,107,.12);
    }

    .row2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
    }
    @media (max-width: 420px){
      .row2{ grid-template-columns: 1fr; }
    }

    .btnRow{
      display:flex;
      gap:12px;
      margin-top: 8px;
      flex-wrap:wrap;
    }

    .btn{
      border:none;
      border-radius: 14px;
      padding: 13px 14px;   /* <- bigger */
      font-weight: 850;
      cursor:pointer;
      font-size: 14px;      /* <- bigger */
    }

    .btnPrimary{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      color:#fff;
    }

    .btnGhost{
      background: #fff;
      color: var(--text);
      border: 1px solid var(--line);
    }

    .btnSmall{
      padding: 11px 14px;
      font-size: 13px;
      font-weight: 850;
      border-radius: 14px;
    }

    /* Table */
    .tableTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }

    .count{
      font-size: 14px;      /* <- bigger */
      color: var(--muted);
    }

    .tableWrap{
      overflow:auto;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
    }

    table{
      width:100%;
      border-collapse: collapse;
      min-width: 840px;     /* <- bigger so it doesn’t look cramped */
    }

    th, td{
      padding: 14px 14px;   /* <- bigger */
      border-bottom: 1px solid var(--line);
      text-align:left;
      vertical-align:top;
      font-size: 14px;      /* <- bigger */
    }

    th{
      position: sticky;
      top: 0;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.10em;
      text-transform: uppercase;
      z-index: 1;
    }

    tr:last-child td{ border-bottom:none; }

    .mono{
      font-variant-numeric: tabular-nums;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
      color: rgba(15,23,42,.80);
    }

    .strong{
      font-weight: 900;
      font-size: 14px;
      line-height:1.2;
    }

    .sub2{
      margin-top:5px;
      color: var(--muted);
      font-size: 13px;
      line-height:1.25;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 9px 12px;    /* <- bigger */
      border-radius: 999px;
      border: 1px solid var(--line);
      font-weight: 900;
      font-size: 13px;      /* <- bigger */
      white-space:nowrap;
    }

    .bWaiting{ background: var(--wBg); }
    .bSigning{ background: var(--sBg); }
    .bSigned { background: var(--dBg); }

    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }

    .iconBtn{
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      border-radius: 14px;
      padding: 10px 12px;   /* <- bigger */
      cursor:pointer;
      font-weight: 900;
      font-size: 13px;      /* <- bigger */
    }

    .empty{
      padding: 18px;
      border-radius: 16px;
      border: 1px dashed var(--line2);
      background: rgba(255,255,255,.7);
      color: var(--muted);
      font-size: 14px;
      line-height:1.35;
    }

    footer{
      padding: 14px 2px 0;
      color: var(--muted);
      font-size: 12px;
      line-height:1.35;
      text-align:center;
    }
  </style>
</head>

<body>
  <div class="app">
    <header>
      <div class="brandBlock">
        <div class="brandTitle">
          <div class="mark"></div>
          <h1>Denny Borges, P.A. | TCG DATAE</h1>
        </div>
        <p class="sub">Notary Signing Tracker — modern minimal UI • saved locally for 30 days</p>
      </div>

      <div class="meta">
        <div class="chip">LocalStorage: ON</div>
        <div class="chip">Retention: 30 days</div>
      </div>
    </header>

    <div class="surface">
      <div class="layout">

        
        <section>
          <div class="panelTitle">Add case</div>

          <form id="caseForm" autocomplete="off">
            <div class="field">
              <label for="caseNumber">Case Number</label>
              <input id="caseNumber" name="caseNumber" placeholder="C010844974" required />
            </div>

            <div class="field">
              <label for="signerName">Signer Name</label>
              <input id="signerName" name="signerName" placeholder="Kiara Johnson" required />
            </div>

            <div class="row2">
              <div class="field">
                <label for="signingDate">Date</label>
                <input id="signingDate" name="signingDate" type="date" required />
              </div>
              <div class="field">
                <label for="signingTime">Time</label>
                <input id="signingTime" name="signingTime" type="time" required />
              </div>
            </div>

            <div class="field">
              <label for="notaryName">Notary Name</label>
              <input id="notaryName" name="notaryName" placeholder="Ericka Dominguez" required />
            </div>

            <div class="field">
              <label for="status">Status</label>
              <select id="status" name="status" required>
                <option value="waiting">Waiting for Signature</option>
                <option value="signing">Signing in Progress</option>
                <option value="signed">Signed</option>
              </select>
            </div>

            <div class="btnRow">
              <button class="btn btnPrimary" type="submit" style="flex:1;">Add Case</button>
              <button class="btn btnGhost" type="button" id="clearFormBtn">Clear</button>
            </div>
          </form>
        </section>

        
        <section>
          <div class="tableTop">
            <div>
              <div class="panelTitle" style="margin:0 0 8px;">Cases</div>
              <div class="count" id="caseCount">0 cases</div>
            </div>

            <div class="btnRow" style="margin:0;">
              <button class="btn btnGhost btnSmall" id="exportBtn" type="button">Copy Summary</button>
              <button class="btn btnGhost btnSmall" id="clearAllBtn" type="button">Clear All</button>
            </div>
          </div>

          <div id="tableContainer"></div>
        </section>

      </div>
    </div>

    <footer>
      Denny Borges, P.A. • TCG DATAE — expired items auto-remove after 30 days
    </footer>
  </div>

  <script>
    const STORAGE_KEY = "tcg_notary_cases_minimal_v2";
    const RETENTION_DAYS = 30;
    const RETENTION_MS = RETENTION_DAYS * 24 * 60 * 60 * 1000;

    const STATUS_FLOW = [
      { key: "waiting", label: "Waiting", badgeClass: "badge bWaiting", icon: "⏳" },
      { key: "signing", label: "Signing", badgeClass: "badge bSigning", icon: "✍️" },
      { key: "signed",  label: "Signed",  badgeClass: "badge bSigned",  icon: "✅" }
    ];

    const form = document.getElementById("caseForm");
    const clearFormBtn = document.getElementById("clearFormBtn");
    const clearAllBtn = document.getElementById("clearAllBtn");
    const exportBtn = document.getElementById("exportBtn");

    const tableContainer = document.getElementById("tableContainer");
    const caseCount = document.getElementById("caseCount");

    const inputCaseNumber = document.getElementById("caseNumber");
    const inputSignerName = document.getElementById("signerName");
    const inputSigningDate = document.getElementById("signingDate");
    const inputSigningTime = document.getElementById("signingTime");
    const inputNotaryName = document.getElementById("notaryName");
    const inputStatus = document.getElementById("status");

    function now(){ return Date.now(); }

    function loadCases(){
      try{
        const raw = localStorage.getItem(STORAGE_KEY);
        const data = raw ? JSON.parse(raw) : [];
        return Array.isArray(data) ? data : [];
      }catch(e){ return []; }
    }

    function saveCases(cases){
      localStorage.setItem(STORAGE_KEY, JSON.stringify(cases));
    }

    function purgeExpired(cases){
      const cutoff = now() - RETENTION_MS;
      return cases.filter(c => c && typeof c.createdAt === "number" && c.createdAt >= cutoff);
    }

    function formatCount(n){ return n === 1 ? "1 case" : `${n} cases`; }

    function statusMeta(key){
      return STATUS_FLOW.find(s => s.key === key) || STATUS_FLOW[0];
    }

    function nextStatusKey(currentKey){
      const idx = STATUS_FLOW.findIndex(s => s.key === currentKey);
      return STATUS_FLOW[(idx + 1 + STATUS_FLOW.length) % STATUS_FLOW.length].key;
    }

    function makeId(){
      return "case_" + Math.random().toString(16).slice(2) + "_" + Date.now();
    }

    function escapeHtml(str){
      return String(str ?? "")
        .replaceAll("&","&amp;")
        .replaceAll("<","&lt;")
        .replaceAll(">","&gt;")
        .replaceAll('"',"&quot;")
        .replaceAll("'","&#039;");
    }

    function formatDateTime(dateStr, timeStr){
      try{
        const dt = new Date(dateStr + "T" + timeStr);
        if (isNaN(dt.getTime())) return `${dateStr} ${timeStr}`;
        const datePart = dt.toLocaleDateString(undefined, { year:"numeric", month:"short", day:"2-digit" });
        const timePart = dt.toLocaleTimeString(undefined, { hour:"numeric", minute:"2-digit" });
        return `${datePart} — ${timePart}`;
      }catch(e){
        return `${dateStr} ${timeStr}`;
      }
    }

    function render(){
      let cases = purgeExpired(loadCases());
      saveCases(cases);

      caseCount.textContent = formatCount(cases.length);

      if(!cases.length){
        tableContainer.innerHTML = `<div class="empty">No cases yet. Add one on the left.</div>`;
        return;
      }

      cases.sort((a,b) => (b.createdAt || 0) - (a.createdAt || 0));

      const rows = cases.map(c => {
        const s = statusMeta(c.status);
        const dt = escapeHtml(c.signingDateTimeDisplay);
        return `
          <tr>
            <td>
              <div class="strong">${escapeHtml(c.caseNumber)}</div>
              <div class="sub2 mono">${dt}</div>
            </td>
            <td>
              <div class="strong">${escapeHtml(c.signerName)}</div>
              <div class="sub2">Notary: ${escapeHtml(c.notaryName)}</div>
            </td>
            <td>
              <span class="${s.badgeClass}">${s.icon} ${s.label}</span>
            </td>
            <td>
              <div class="actions">
                <button class="iconBtn" type="button" onclick="cycleStatus('${c.id}')">Status</button>
                <button class="iconBtn" type="button" onclick="removeCase('${c.id}')">Delete</button>
              </div>
            </td>
          </tr>
        `;
      }).join("");

      tableContainer.innerHTML = `
        <div class="tableWrap">
          <table aria-label="Saved cases table">
            <thead>
              <tr>
                <th style="width:28%;">Case / Date</th>
                <th style="width:38%;">Signer / Notary</th>
                <th style="width:16%;">Status</th>
                <th style="width:18%;">Actions</th>
              </tr>
            </thead>
            <tbody>${rows}</tbody>
          </table>
        </div>
      `;
    }

    form.addEventListener("submit", (e) => {
      e.preventDefault();

      const caseNumber = inputCaseNumber.value.trim();
      const signerName = inputSignerName.value.trim();
      const signingDate = inputSigningDate.value;
      const signingTime = inputSigningTime.value;
      const notaryName = inputNotaryName.value.trim();
      const status = inputStatus.value;

      if(!caseNumber || !signerName || !signingDate || !signingTime || !notaryName){
        alert("Please fill in all fields (including date and time).");
        return;
      }

      const payload = {
        id: makeId(),
        caseNumber,
        signerName,
        signingDate,
        signingTime,
        signingDateTimeDisplay: formatDateTime(signingDate, signingTime),
        notaryName,
        status,
        createdAt: now()
      };

      let cases = purgeExpired(loadCases());
      cases.push(payload);
      saveCases(cases);

      form.reset();
      inputStatus.value = "waiting";
      inputCaseNumber.focus();

      render();
    });

    clearFormBtn.addEventListener("click", () => {
      form.reset();
      inputStatus.value = "waiting";
      inputCaseNumber.focus();
    });

    clearAllBtn.addEventListener("click", () => {
      const ok = confirm("Clear ALL saved cases on this device?");
      if(!ok) return;
      localStorage.removeItem(STORAGE_KEY);
      render();
    });

    exportBtn.addEventListener("click", async () => {
      let cases = purgeExpired(loadCases());
      if(!cases.length){
        alert("No cases to copy.");
        return;
      }

      cases.sort((a,b) => (b.createdAt || 0) - (a.createdAt || 0));

      const lines = cases.map(c => {
        const s = statusMeta(c.status).label;
        return `Case: ${c.caseNumber} | Signer: ${c.signerName} | Date/Time: ${c.signingDateTimeDisplay} | Notary: ${c.notaryName} | Status: ${s}`;
      });

      const text = [
        "Denny Borges, P.A. | TCG DATAE — Notary Signing Tracker",
        `Saved Cases: ${cases.length}`,
        "----------------------------------------",
        ...lines
      ].join("\n");

      try{
        await navigator.clipboard.writeText(text);
        alert("Summary copied to clipboard.");
      }catch(e){
        const ta = document.createElement("textarea");
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
        alert("Summary copied (fallback).");
      }
    });

    window.cycleStatus = function(id){
      let cases = purgeExpired(loadCases());
      const idx = cases.findIndex(c => c.id === id);
      if(idx < 0) return;

      cases[idx].status = nextStatusKey(cases[idx].status);
      saveCases(cases);
      render();
    };

    window.removeCase = function(id){
      let cases = purgeExpired(loadCases()).filter(c => c.id !== id);
      saveCases(cases);
      render();
    };

    render();
  </script>
</body>
</html>

TCG DATAE

We empower law firms and corporate partners with precision-driven investigative services designed to uncover critical information, validate case data, and streamline legal processes with unmatched accuracy.

Backed by advanced technology and operational excellence, TCG DATAE ensures every assignment is handled with integrity, confidentiality, and measurable performance.