Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Upload Documents - Denny Borges PA</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .form-input {
      width: 100%;
      border-radius: 0.75rem;
      border: 1px solid #cbd5e1;
      background-color: #fff;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      outline: none;
      transition: all 0.2s;
    }
    .form-input:focus {
      border-color: #0D2C3A;
      box-shadow: 0 0 0 3px rgba(13, 44, 58, 0.2);
    }
    .btn-primary {
      background-color: #0D2C3A;
      color: #fff;
    }
    .btn-primary:hover {
      background-color: #123B4D;
    }
    .drop-zone {
      border: 2px dashed #0D2C3A;
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
      color: #475569;
      transition: background-color 0.3s, border-color 0.3s;
    }
    .drop-zone.dragover {
      background-color: #f1f5f9;
      border-color: #123B4D;
    }
  </style>
</head>
<body class="bg-slate-100 text-slate-800 font-sans">

  <main class="min-h-screen flex flex-col items-center justify-center px-4 py-10">

    <section class="bg-white rounded-2xl shadow-lg border border-slate-200 p-8 max-w-lg w-full">
      <h1 class="text-2xl font-bold text-center text-[#0D2C3A] mb-3">Upload Your Documents</h1>
      <p class="text-sm text-center text-slate-600 mb-6">
        Please fill in your details and upload the requested documents securely. All files are encrypted and sent directly to our office.
      </p>

      
      <form id="uploadForm" class="space-y-6" action="https://api.web3forms.com/submit" method="POST" enctype="multipart/form-data">
        
        <input type="hidden" name="access_key" value="1cf225db-e7ff-4c18-a4d5-efaab4d71785">
        <input type="hidden" name="subject" value="New Document Upload from Website">
        <input type="hidden" name="redirect" value="https://dennyborgespa.com/upload">

        
        <input type="text" name="client_name" placeholder="Full Name" required class="form-input">
        <input type="email" name="client_email" placeholder="Email" required class="form-input">
        <input type="tel" name="client_phone" placeholder="Phone Number" required class="form-input">
        <input type="text" name="case_number" placeholder="Case or Claim Number" required class="form-input">

        
        <div id="dropZone" class="drop-zone">
          <p class="text-sm">Drag & drop your files here (Max 5) or</p>
          <label for="fileUpload" class="cursor-pointer text-[#0D2C3A] font-medium hover:underline">
            browse from your computer
          </label>
          <input id="fileUpload" type="file" name="attachments[]" multiple required accept="application/pdf,image/*" class="hidden">
        </div>

        
        <ul id="fileList" class="text-sm text-slate-600 space-y-1"></ul>

        
        <div id="progressContainer" class="hidden">
          <div class="w-full bg-slate-200 rounded-full h-3">
            <div id="progressBar" class="bg-[#0D2C3A] h-3 rounded-full" style="width: 0%"></div>
          </div>
          <p id="progressText" class="text-xs text-center mt-1 text-slate-600">0%</p>
        </div>

        
        <button type="submit" class="w-full rounded-xl px-4 py-3 text-sm font-semibold shadow-sm transition btn-primary">
          ⬆ Upload Documents
        </button>
      </form>

      
      <div class="mt-6 text-center text-sm text-slate-600">
        <p>📞 Need help? Call us at <a href="tel:18888157782" class="text-[#0D2C3A] font-medium">1-888-815-7782</a></p>
        <p>✉ Email: <a href="mailto:claims@dennysborgespa.com" class="text-[#0D2C3A] font-medium">claims@dennysborgespa.com</a></p>
      </div>
    </section>

  </main>

  <script>
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('fileUpload');
    const fileList = document.getElementById('fileList');
    const form = document.getElementById('uploadForm');
    const progressContainer = document.getElementById('progressContainer');
    const progressBar = document.getElementById('progressBar');
    const progressText = document.getElementById('progressText');

    // Drag & Drop
    dropZone.addEventListener('dragover', (e) => {
      e.preventDefault();
      dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
      dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
      e.preventDefault();
      dropZone.classList.remove('dragover');
      fileInput.files = e.dataTransfer.files;
      enforceMaxFiles(fileInput.files);
      showFiles(fileInput.files);
    });

    fileInput.addEventListener('change', () => {
      enforceMaxFiles(fileInput.files);
      showFiles(fileInput.files);
    });

    function enforceMaxFiles(files) {
      if (files.length > 5) {
        alert('⚠️ Please select up to 5 files only.');
        fileInput.value = "";
        fileList.innerHTML = "";
      }
    }

    function showFiles(files) {
      fileList.innerHTML = '';
      for (let i = 0; i < files.length; i++) {
        fileList.innerHTML += `<li>📄 ${files[i].name}</li>`;
      }
    }

    // Simulated progress bar
    form.addEventListener('submit', () => {
      progressContainer.classList.remove('hidden');
      let progress = 0;
      const interval = setInterval(() => {
        progress += 10;
        progressBar.style.width = progress + "%";
        progressText.textContent = progress + "%";
        if (progress >= 100) clearInterval(interval);
      }, 200);
    });
  </script>

</body>
</html>

Denny Borges PA