Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Notary Portal - Upload & Payment</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .btn-gradient {
      background: linear-gradient(135deg, #0D2C3A, #1E4D6B);
      color: #fff;
      transition: opacity 0.3s, transform .2s;
    }
    .btn-gradient:hover { opacity: 0.92; transform: translateY(-1px); }
    .card {
      border-radius: 1rem;
      background: #fff;
      border: 1px solid #e5e7eb;
      padding: 1.5rem;
    }
    .section-title { font-size: 1.5rem; font-weight: 700; color: #0D2C3A; }
    .form-input {
      border-radius: 0.75rem; border: 1px solid #cbd5e1;
      padding: 0.75rem; font-size: 0.9rem; width: 100%;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus {
      border-color: #1E4D6B; box-shadow: 0 0 0 4px rgba(30,77,107,0.2);
      outline: none;
    }
    .spinner {
      border: 4px solid #f3f3f3; border-top: 4px solid #0D2C3A;
      border-radius: 50%; width: 40px; height: 40px;
      animation: spin 1s linear infinite; margin: 20px auto;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .step-badge {
      background-color: #0D2C3A;
      color: white;
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
  </style>
</head>

<body class="bg-gradient-to-br from-slate-50 to-slate-100 text-slate-800">

  <main class="mx-auto max-w-7xl px-4 sm:px-6 py-10 grid gap-8 grid-cols-1 md:grid-cols-3">

    
    <section class="card">
      <img src="https://gemengserv.com/wp-content/uploads/2024/07/Digital-documentation.jpg"
           class="w-full h-40 object-cover rounded-lg mb-4 shadow-md" alt="Documentation">

      <div class="flex items-center justify-between mb-3">
        <h2 class="section-title">Download Documents</h2>
        <span class="step-badge">STEP 1</span>
      </div>

      <p class="text-sm text-slate-700 leading-relaxed mb-4">
        Please download only the documents indicated by your assigned agent for your specific case. 
        After signing, scan and upload all completed pages.
      </p>

      <div class="flex flex-col gap-2 mb-6">
        <a href="https://drive.google.com/file/d/17gXIqi-JOa7j9yTbwyEhntzHZfhFQXHB/view?usp=drive_link"
           target="_blank" class="text-center text-xs font-semibold btn-gradient px-3 py-2 rounded-lg">
          📄 Unclaimed Property Agreement
        </a>
        <a href="https://drive.google.com/file/d/1Bh48GM22eJVVEjGeRnPmHd2CuOcqZilD/view?usp=drive_link"
           target="_blank" class="text-center text-xs font-semibold btn-gradient px-3 py-2 rounded-lg">
          📝 State Affidavit
        </a>
        <a href="https://drive.google.com/file/d/1AgSx4r9bfbSBRG8WOSVoXjMY6_kcRxow/view?usp=drive_link"
           target="_blank" class="text-center text-xs font-semibold btn-gradient px-3 py-2 rounded-lg">
          ✅ Affirmation Statement
        </a>
      </div>

      <img src="https://cdn.prod.website-files.com/62045da4270c887c4de9c45f/62045f1101066684cc4daf29_61f81ef9d5186c2bd5d2ea4f_iStock-1212785891-600x400.jpeg"
           class="w-full h-44 object-cover rounded-lg mb-4 shadow-md" alt="Step Divider">

      <div class="flex items-center justify-between mb-3">
        <h2 class="section-title">Upload Documents</h2>
        <span class="step-badge">STEP 2</span>
      </div>

      <form id="uploadForm" enctype="multipart/form-data" class="space-y-4">
        <input type="hidden" name="access_key" value="1cf225db-e7ff-4c18-a4d5-efaab4d71785">
        <input type="hidden" name="subject" value="New Document Upload from TCG DATAE Notary Portal">
        <input type="hidden" name="from_name" value="TCG DATAE Notary Portal">
        <input type="hidden" name="cc_email" value="info@tcgdatae.com">

        <input type="text" id="notaryName" name="notary_name" placeholder="Notary Full Name" required class="form-input">
        <input type="text" id="caseNumber" name="case_number" placeholder="Case / Account Number" required class="form-input">
        <input id="fileUpload" type="file" name="attachments[]" multiple required accept="application/pdf,image/*" class="form-input">
        <p class="text-xs text-slate-500">Allowed: PDF & Images • Max 5 files, 500 MB total.</p>

        <button id="submitUpload" type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-semibold btn-gradient">
          ⬆ Submit Upload Documents
        </button>

        <div id="uploadStatus" class="text-center mt-4 hidden">
          <div id="spinner" class="spinner"></div>
          <p id="statusMsg" class="text-sm text-slate-700 mt-2"></p>
        </div>

        <p id="successMsg" class="text-center text-green-600 font-semibold mt-3 hidden">
          ✅ Documents submitted successfully!
        </p>

        <p id="errorDetails" class="text-center text-red-600 text-xs mt-2 hidden"></p>
      </form>

      <div class="mt-6">
        <p class="text-xs text-slate-600 mb-2 leading-relaxed">
          📌 <strong>Need to scan documents?</strong><br>
          Use one of these free scanning apps:
        </p>
        <div class="flex flex-wrap gap-2">
          <a href="https://play.google.com/store/apps/details?id=com.intsig.camscanner" target="_blank"
             class="flex-1 text-xs text-center px-3 py-2 rounded-lg bg-slate-100 border border-slate-300 hover:bg-slate-200">
            📲 CamScanner (Android)
          </a>
          <a href="https://apps.apple.com/us/app/iscanner-pdf-scanner-app/id1035331258" target="_blank"
             class="flex-1 text-xs text-center px-3 py-2 rounded-lg bg-slate-100 border border-slate-300 hover:bg-slate-200">
            📲 iScanner (iOS)
          </a>
        </div>
      </div>

      <div class="rounded-xl bg-amber-50 border border-amber-200 p-4 mt-6 text-xs text-amber-900 space-y-2">
        <strong>⚠️ Reminder:</strong>
        Before sharing case details, you must complete the Notary Code of Conduct with TCG DATAE. Please remain online with the agent until everything is complete.
      </div>
    </section>

    
    <section class="space-y-6">

      <div class="card">
        <img src="https://postandparcel.info/wp-content/uploads/2021/05/USPSPS.jpg"
             class="w-full h-36 object-cover rounded-lg mb-3 shadow-md" alt="USPS Tracking">

        <div class="flex items-center justify-between mb-2">
          <h3 class="section-title text-lg mb-0">USPS Tracking</h3>
          <span class="step-badge">STEP 3</span>
        </div>

        <input type="text" id="trackingNumber"
               placeholder="Enter USPS Tracking Number"
               class="form-input text-sm mb-3"/>

        <button onclick="trackUSPS()"
          class="w-full rounded-xl px-4 py-2 text-sm font-semibold btn-gradient">
          Track Package
        </button>
      </div>

      <div class="card">
        <img src="https://www.currencytransfer.com/wp-content/uploads/2022/02/digital-payments-security.min_.jpg"
             class="w-full h-36 object-cover rounded-lg mb-3 shadow-md" alt="Payment">

        <div class="flex items-center justify-between mb-3">
          <h3 class="section-title mb-0 text-lg">Notary Payment Request</h3>
          <span class="step-badge">STEP 4</span>
        </div>

        <form id="paymentForm" class="space-y-4">
          <input type="hidden" name="access_key" value="ea02d3a7-ebca-4dd6-8d76-63b99d14516a">
          <input type="hidden" id="paymentSubject" name="subject" value="New Notary Payment Request Submission">
          <input type="hidden" name="from_name" value="TCG DATAE Notary Portal">
          <input type="hidden" name="cc_email" value="info@tcgdatae.com">

          <input type="text" id="paymentNotaryName" name="name" placeholder="Full Name" required class="form-input">
          <input type="email" name="email" placeholder="Email" required class="form-input">
          <input type="text" name="phone" placeholder="Phone Number" required class="form-input">
          <input type="text" id="paymentCaseNumber" name="case_account[]" placeholder="Case Account # or Client Name" required class="form-input">
          <input type="text" name="commission_fee" placeholder="Commission Amount ($)" required class="form-input">

          <select id="paymentMethod" name="payment_method" required class="form-input" onchange="togglePaymentFields()">
            <option value="">Select Payment Method</option>
            <option value="Direct Deposit">Direct Deposit</option>
            <option value="Paper Check">Paper Check</option>
            <option value="Payment Link">Payment Link (Stripe/Square)</option>
          </select>

          <div id="bankFields" class="hidden space-y-2">
            <input type="text" id="bank_name" name="bank_name" placeholder="Bank Name" class="form-input">
            <input type="text" id="account_number" name="account_number" placeholder="Account Number" class="form-input">
            <input type="text" id="routing_number" name="routing_number" placeholder="Routing Number" class="form-input">
          </div>

          <div id="checkFields" class="hidden">
            <input type="text" id="mailing_address" name="mailing_address" placeholder="Full Mailing Address for Check" class="form-input">
          </div>

          <div id="linkFields" class="hidden">
            <input type="text" id="payment_link" name="payment_link" placeholder="Payment Link (Stripe/Square)" class="form-input">
          </div>

          <textarea name="notes" placeholder="Additional Notes (Optional)" rows="3" class="form-input resize-y"></textarea>

          <label class="inline-flex items-start gap-2 text-xs text-slate-700">
            <input type="checkbox" required class="mt-1 h-4 w-4 rounded border-slate-300 text-[#0D2C3A] focus:ring-[#0D2C3A]">
            I agree to the TCG DATAE Payment Terms and Conditions.
          </label>

          <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-semibold btn-gradient">
            ✅ Submit Request
          </button>

          <div id="paymentStatus" class="text-center mt-3 hidden">
            <div class="spinner"></div>
            <p id="paymentMsg" class="text-sm text-slate-700 mt-2"></p>
          </div>

          <p id="paymentSuccess" class="text-center text-green-600 font-semibold mt-3 hidden">
            ✅ Payment request submitted successfully!
          </p>

          <p id="paymentError" class="text-center text-red-600 text-xs mt-2 hidden"></p>
        </form>
      </div>
    </section>

    
    <section class="space-y-6">

      <div class="card text-sm space-y-3 text-slate-700 leading-relaxed">
        <img src="https://t3.ftcdn.net/jpg/09/66/68/22/360_F_966682261_TwzFiXixVhLstEReA0ZwNvwebTQBUfig.jpg"
             class="w-full h-40 object-cover rounded-lg mb-4 shadow-md" alt="FAQ Illustration">

        <h3 class="text-base font-semibold text-indigo-700">ℹ️ Frequently Asked Questions</h3>

        <p><strong>What if the client does not sign?</strong><br>You will still receive 50% of the agreed commission to compensate your time and effort.</p>
        <p><strong>When will I receive payment?</strong><br>Payments are processed within 30 to 90 days depending on the release date from the state.</p>
        <p><strong>Do I need to send original documents?</strong><br>Yes. Please mail the original signed documents and upload scanned copies here or send them by email.</p>
        <p><strong>What payment methods are accepted?</strong><br>Direct deposit, paper check, or secure payment link. All payments are completed Net30-Net90.</p>
        <p><strong>When should I submit everything?</strong><br>All documents must be submitted within 3 hours of signing.</p>
        <p><strong>What if a client requests to reschedule?</strong><br>Notify your assigned supervisor immediately.</p>
        <p><strong>Can I notarize for a relative?</strong><br>No, for impartiality reasons.</p>
        <p><strong>How will I receive new assignments?</strong><br>Via email or SMS.</p>
      </div>

      <div class="card text-sm text-slate-700 leading-relaxed">
        <img src="https://thegatheringsource.org/wp-content/uploads/2021/09/Contact-Us.png"
             class="w-full h-32 object-contain rounded-lg mb-4 shadow-md bg-white" alt="Contact Us">

        <h3 class="text-base font-semibold text-slate-800">📞 Contact Us</h3>
        <p>
          For questions or assistance, please contact us:<br>
          <strong>Phone:</strong> <a href="tel:1-866-496-4477" class="text-[#1E4D6B]">1-866-496-4477</a><br>
          <strong>Email:</strong> <a href="mailto:info@tcgdatae.com" class="text-[#1E4D6B]">info@tcgdatae.com</a>
        </p>
      </div>

      
      <div class="card text-sm text-slate-700 leading-relaxed text-center">
        <a href="https://tcgdatae.com/" target="_blank">
          <img src="https://images.squarespace-cdn.com/content/v1/6334903a3837792d37e3ff1e/29491f84-d4d2-471e-9bf9-8b50d9f8537b/HEADER+Become+a+Member.png"
               class="w-full max-h-44 object-contain rounded-lg mb-4 shadow-md bg-white hover:scale-105 transition"
               alt="Become a Member">
        </a>
        <p class="text-xs text-slate-600">
          Unlock guaranteed case assignments every month based on your membership tier. Join today and grow your notarization income.
        </p>
        <a href="https://tcgdatae.com/" target="_blank"
           class="inline-block mt-3 px-3 py-2 text-xs font-semibold btn-gradient rounded-lg">
          🚀 View Membership Options
        </a>
      </div>

    </section>
  </main>

  <script>
    function trackUSPS() {
      const tracking = document.getElementById("trackingNumber").value.trim();
      if (!tracking) return alert("⚠️ Please enter a USPS tracking number.");
      window.open(`https://tools.usps.com/go/TrackConfirmAction?tLabels=${encodeURIComponent(tracking)}`, "_blank");
    }

    function togglePaymentFields() {
      const method = document.getElementById("paymentMethod").value;
      const bankFields = document.getElementById("bankFields");
      const checkFields = document.getElementById("checkFields");
      const linkFields = document.getElementById("linkFields");
      bankFields.classList.add("hidden");
      checkFields.classList.add("hidden");
      linkFields.classList.add("hidden");
      document.querySelectorAll("#bankFields input, #checkFields input, #linkFields input").forEach(el => el.required = false);
      if (method === "Direct Deposit") { bankFields.classList.remove("hidden"); document.querySelectorAll("#bankFields input").forEach(el => el.required = true); }
      if (method === "Paper Check") { checkFields.classList.remove("hidden"); document.querySelectorAll("#checkFields input").forEach(el => el.required = true); }
      if (method === "Payment Link") { linkFields.classList.remove("hidden"); document.querySelectorAll("#linkFields input").forEach(el => el.required = true); }
    }

    // Upload form with 500MB limit validation
    document.getElementById("uploadForm").addEventListener("submit", async function(e) {
      e.preventDefault();
      const form = e.target;
      const files = document.getElementById("fileUpload").files;
      let totalSize = 0;
      for (let i = 0; i < files.length; i++) {
        totalSize += files[i].size;
      }
      if (totalSize > 500 * 1024 * 1024) {
        alert("⚠️ Total file size exceeds 500 MB limit. Please upload smaller files.");
        return;
      }
      const data = new FormData(form);
      const spinner = document.getElementById("spinner");
      const uploadStatus = document.getElementById("uploadStatus");
      const statusMsg = document.getElementById("statusMsg");
      const successMsg = document.getElementById("successMsg");
      const errorDetails = document.getElementById("errorDetails");
      uploadStatus.classList.remove("hidden");
      spinner.classList.remove("hidden");
      statusMsg.textContent = "Uploading...";
      successMsg.classList.add("hidden");
      errorDetails.classList.add("hidden");
      try {
        const response = await fetch("https://api.web3forms.com/submit", { method: "POST", body: data });
        const result = await response.json();
        spinner.classList.add("hidden");
        if (result.success) { successMsg.classList.remove("hidden"); form.reset(); }
        else { statusMsg.textContent = "⚠️ Submission failed."; errorDetails.textContent = result.message; errorDetails.classList.remove("hidden"); }
      } catch (error) {
        spinner.classList.add("hidden");
        statusMsg.textContent = "❌ Network error.";
        errorDetails.textContent = "Error: " + error.message;
        errorDetails.classList.remove("hidden");
      }
    });

    // Payment form submission
    document.getElementById("paymentForm").addEventListener("submit", async function(e) {
      e.preventDefault();
      const form = e.target;
      const data = new FormData(form);
      const statusBox = document.getElementById("paymentStatus");
      const msgBox = document.getElementById("paymentMsg");
      const successMsg = document.getElementById("paymentSuccess");
      const errorMsg = document.getElementById("paymentError");
      statusBox.classList.remove("hidden");
      msgBox.textContent = "Submitting request...";
      successMsg.classList.add("hidden");
      errorMsg.classList.add("hidden");
      try {
        const response = await fetch("https://api.web3forms.com/submit", { method: "POST", body: data });
        const result = await response.json();
        statusBox.classList.add("hidden");
        if (result.success) { successMsg.classList.remove("hidden"); form.reset(); }
        else { msgBox.textContent = "⚠️ Submission failed."; errorMsg.textContent = result.message || "Unknown error."; errorMsg.classList.remove("hidden"); }
      } catch (error) {
        statusBox.classList.add("hidden");
        msgBox.textContent = "❌ Network error.";
        errorMsg.textContent = error.message;
        errorMsg.classList.remove("hidden");
      }
    });

    const paymentSubject = document.getElementById("paymentSubject");
    const paymentName = document.getElementById("paymentNotaryName");
    const paymentCase = document.getElementById("paymentCaseNumber");
    function updatePaymentSubject(){
      const name = paymentName.value.trim();
      const caseNum = paymentCase.value.trim();
      paymentSubject.value = `New Notary Payment Request Submission – ${name || "Unknown Notary"} (${caseNum || "N/A"})`;
    }
    paymentName.addEventListener("input", updatePaymentSubject);
    paymentCase.addEventListener("input", updatePaymentSubject);
    updatePaymentSubject();
  </script>
</body>
</html>

TCG DATAE

TCG Datae is a legal operations consulting firm that provides investigative research, document support, and data-driven solutions to law firms handling probate, estate, and unclaimed property matters.
We specialize in identifying heirs, verifying case data, drafting legal documents, and streamlining back-office workflows — allowing attorneys to focus on legal advocacy while we manage the operational complexities behind each case.
With bilingual teams across the United States and Latin America, TCG Datae delivers fast, reliable, and secure support to firms seeking accuracy, discretion, and efficiency.