Spaces:

thors1
/

deepsite-project-27dmk

Running

App Files Files Community

thors1 commited on Apr 12

Commit

6d19ac8

verified ·

1 Parent(s): 45bff5b

Initial DeepSite commit

Browse files

Files changed (2) hide show

README.md +9 -6
index.html +874 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project 27dmk
-emoji: 👀
-colorFrom: pink
-colorTo: blue
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: yellow
+colorTo: red
 sdk: static
+emoji: 🎉
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

index.html CHANGED Viewed

@@ -1,19 +1,874 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>Verify MC — Patient Intake</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;510;550;600&display=swap" rel="stylesheet">
+  <style>
+    * {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      background: #F8FAFC;
+      min-height: 100vh;
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+    /* Custom scrollbar */
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #CBD5E1;
+      border-radius: 3px;
+    }
+    /* Input focus states */
+    .input-field {
+      transition: all 120ms ease-out;
+    }
+    .input-field:focus {
+      border-color: #0C8F8B;
+      box-shadow: 0 0 0 3px rgba(12, 143, 137, 0.08);
+    }
+    /* AI pulse animation */
+    @keyframes aiPulse {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+    .ai-pulse {
+      animation: aiPulse 1.5s ease-in-out infinite;
+    }
+    /* Smooth section transitions */
+    .form-section {
+      transition: opacity 180ms ease-out, transform 180ms ease-out;
+    }
+    /* Sticky footer safe area */
+    .sticky-footer {
+      padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
+    }
+    /* Progress bar smooth */
+    .progress-fill {
+      transition: width 200ms ease-out;
+    }
+    /* Button press states */
+    .btn-primary {
+      transition: all 120ms ease-out;
+    }
+    .btn-primary:active {
+      transform: scale(0.98);
+    }
+    .btn-ghost {
+      transition: all 120ms ease-out;
+    }
+    .btn-ghost:active {
+      transform: scale(0.98);
+    }
+    /* AI suggestion appear */
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .ai-suggestion {
+      animation: slideIn 150ms ease-out;
+    }
+    /* Checkbox custom */
+    .custom-checkbox:checked {
+      background-color: #0C8F8B;
+      border-color: #0C8F8B;
+    }
+    /* Ensure footer doesn't cover content */
+    .form-content {
+      padding-bottom: 120px;
+    }
+    @media (max-width: 640px) {
+      .form-content {
+        padding-bottom: 140px;
+      }
+    }
+  </style>
+</head>
+<body class="antialiased">
+  <!-- Main Container -->
+  <div class="min-h-screen flex flex-col items-center py-6 sm:py-8 px-4">
+    <!-- Header -->
+    <header class="w-full max-w-[720px] mb-6">
+      <div class="flex items-center gap-3 mb-2">
+        <div class="w-10 h-10 rounded-xl bg-[#0C8F8B] flex items-center justify-center">
+          <i data-lucide="shield-check" class="w-5 h-5 text-white"></i>
+        </div>
+        <div>
+          <h1 class="text-xl font-semibold text-slate-900 tracking-tight">Verify MC</h1>
+          <p class="text-sm text-slate-500">Patient Intake</p>
+        </div>
+      </div>
+    </header>
+    <!-- Progress Bar (Top) -->
+    <div class="w-full max-w-[720px] mb-6">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-slate-700">Your progress</span>
+        <span class="text-sm font-medium text-[#0C8F8B]" id="progressText">0% complete</span>
+      </div>
+      <div class="h-1.5 bg-slate-200 rounded-full overflow-hidden">
+        <div id="progressBar" class="progress-fill h-full bg-[#0C8F8B] rounded-full" style="width: 0%"></div>
+      </div>
+    </div>
+    <!-- Form Card -->
+    <main class="w-full max-w-[720px] bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
+      <div class="form-content p-6 sm:p-8">
+        <!-- AI Assist Banner -->
+        <div class="mb-8 p-4 bg-slate-50 rounded-xl border border-slate-200">
+          <div class="flex items-start gap-3">
+            <div class="w-8 h-8 rounded-lg bg-[#0C8F8B]/10 flex items-center justify-center flex-shrink-0">
+              <i data-lucide="sparkles" class="w-4 h-4 text-[#0C8F8B]"></i>
+            </div>
+            <div class="flex-1">
+              <h3 class="text-sm font-semibold text-slate-900 mb-1">AI Assist</h3>
+              <p class="text-sm text-slate-600 mb-3">Paste any medical document, insurance card, or previous form — we'll fill what we can.</p>
+              <div class="relative">
+                <textarea
+                  id="aiInput"
+                  placeholder="Paste text here or describe your info..."
+                  class="w-full h-20 px-3 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+                ></textarea>
+                <button
+                  id="aiProcessBtn"
+                  class="absolute bottom-2 right-2 px-3 py-1.5 text-xs font-medium text-white bg-[#0C8F8B] rounded-md hover:bg-[#0A7F7B] transition-colors"
+                >
+                  Process
+                </button>
+              </div>
+              <div id="aiStatus" class="hidden mt-2 flex items-center gap-2 text-xs text-[#0C8F8B]">
+                <div class="w-3 h-3 ai-pulse">
+                  <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>
+                </div>
+                <span>Analyzing and filling form...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Section 1: Personal Information -->
+        <section class="form-section mb-10" data-section="personal">
+          <div class="flex items-center gap-2 mb-5">
+            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center">
+              <i data-lucide="user" class="w-4 h-4 text-slate-600"></i>
+            </div>
+            <h2 class="text-base font-semibold text-slate-900">Personal Information</h2>
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="sm:col-span-2">
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Full Legal Name</label>
+              <input
+                type="text"
+                id="fullName"
+                data-field="personal"
+                placeholder="First and last name"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <div id="ai-fullName" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Date of Birth</label>
+              <input
+                type="date"
+                id="dob"
+                data-field="personal"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+              <div id="ai-dob" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Gender</label>
+              <select
+                id="gender"
+                data-field="personal"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+                <option value="">Select gender</option>
+                <option value="female">Female</option>
+                <option value="male">Male</option>
+                <option value="non-binary">Non-binary</option>
+                <option value="prefer-not">Prefer not to say</option>
+              </select>
+              <div id="ai-gender" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div class="sm:col-span-2">
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Social Security Number</label>
+              <input
+                type="text"
+                id="ssn"
+                data-field="personal"
+                placeholder="XXX-XX-XXXX"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <p class="mt-1.5 text-xs text-slate-500">Used only for insurance verification. Encrypted and secure.</p>
+              <div id="ai-ssn" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Section 2: Contact Information -->
+        <section class="form-section mb-10" data-section="contact">
+          <div class="flex items-center gap-2 mb-5">
+            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center">
+              <i data-lucide="phone" class="w-4 h-4 text-slate-600"></i>
+            </div>
+            <h2 class="text-base font-semibold text-slate-900">Contact Information</h2>
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div class="sm:col-span-2">
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Email Address</label>
+              <input
+                type="email"
+                id="email"
+                data-field="contact"
+                placeholder="you@example.com"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <div id="ai-email" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Phone Number</label>
+              <input
+                type="tel"
+                id="phone"
+                data-field="contact"
+                placeholder="(555) 123-4567"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <div id="ai-phone" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Preferred Contact</label>
+              <select
+                id="preferredContact"
+                data-field="contact"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+                <option value="">Select preference</option>
+                <option value="email">Email</option>
+                <option value="phone">Phone</option>
+                <option value="text">Text Message</option>
+              </select>
+              <div id="ai-preferredContact" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div class="sm:col-span-2">
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Street Address</label>
+              <input
+                type="text"
+                id="address"
+                data-field="contact"
+                placeholder="123 Main Street, Apt 4B"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <div id="ai-address" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">City</label>
+              <input
+                type="text"
+                id="city"
+                data-field="contact"
+                placeholder="City"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+              >
+              <div id="ai-city" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <label class="block text-sm font-medium text-slate-700 mb-1.5">State</label>
+                <select
+                  id="state"
+                  data-field="contact"
+                  class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+                >
+                  <option value="">State</option>
+                  <option value="CA">CA</option>
+                  <option value="NY">NY</option>
+                  <option value="TX">TX</option>
+                  <option value="FL">FL</option>
+                  <option value="IL">IL</option>
+                  <option value="PA">PA</option>
+                  <option value="OH">OH</option>
+                  <option value="GA">GA</option>
+                  <option value="NC">NC</option>
+                  <option value="MI">MI</option>
+                </select>
+                <div id="ai-state" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                  <i data-lucide="sparkles" class="w-3 h-3"></i>
+                  <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+                </div>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-slate-700 mb-1.5">ZIP</label>
+                <input
+                  type="text"
+                  id="zip"
+                  data-field="contact"
+                  placeholder="12345"
+                  class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+                >
+                <div id="ai-zip" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                  <i data-lucide="sparkles" class="w-3 h-3"></i>
+                  <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Section 3: Medical History -->
+        <section class="form-section mb-10" data-section="medical">
+          <div class="flex items-center gap-2 mb-5">
+            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center">
+              <i data-lucide="heart-pulse" class="w-4 h-4 text-slate-600"></i>
+            </div>
+            <h2 class="text-base font-semibold text-slate-900">Medical History</h2>
+          </div>
+          <div class="space-y-5">
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-3">Current Medications</label>
+              <textarea
+                id="medications"
+                data-field="medical"
+                placeholder="List any medications you currently take (or write 'None')"
+                class="w-full h-20 px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+              ></textarea>
+              <div id="ai-medications" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-3">Allergies</label>
+              <textarea
+                id="allergies"
+                data-field="medical"
+                placeholder="Medication allergies, food allergies, etc. (or write 'None known')"
+                class="w-full h-20 px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+              ></textarea>
+              <div id="ai-allergies" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-3">Previous Surgeries or Hospitalizations</label>
+              <textarea
+                id="surgeries"
+                data-field="medical"
+                placeholder="Brief description and dates (or write 'None')"
+                class="w-full h-20 px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+              ></textarea>
+              <div id="ai-surgeries" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-3">Family Medical History</label>
+              <textarea
+                id="familyHistory"
+                data-field="medical"
+                placeholder="Relevant conditions in immediate family (or write 'No significant history')"
+                class="w-full h-20 px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+              ></textarea>
+              <div id="ai-familyHistory" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Section 4: Visit Details -->
+        <section class="form-section mb-6" data-section="visit">
+          <div class="flex items-center gap-2 mb-5">
+            <div class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center">
+              <i data-lucide="calendar" class="w-4 h-4 text-slate-600"></i>
+            </div>
+            <h2 class="text-base font-semibold text-slate-900">Visit Details</h2>
+          </div>
+          <div class="space-y-5">
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Primary Reason for Visit</label>
+              <select
+                id="visitReason"
+                data-field="visit"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+                <option value="">Select reason</option>
+                <option value="annual">Annual Physical / Wellness Check</option>
+                <option value="follow-up">Follow-up Visit</option>
+                <option value="new-concern">New Health Concern</option>
+                <option value="chronic">Chronic Condition Management</option>
+                <option value="referral">Specialist Referral</option>
+                <option value="other">Other</option>
+              </select>
+              <div id="ai-visitReason" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Preferred Appointment Date</label>
+              <input
+                type="date"
+                id="preferredDate"
+                data-field="visit"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+              <div id="ai-preferredDate" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Preferred Time</label>
+              <select
+                id="preferredTime"
+                data-field="visit"
+                class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field text-slate-600"
+              >
+                <option value="">Select time range</option>
+                <option value="morning">Morning (8am - 12pm)</option>
+                <option value="afternoon">Afternoon (12pm - 5pm)</option>
+                <option value="evening">Evening (5pm - 8pm)</option>
+              </select>
+              <div id="ai-preferredTime" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-slate-700 mb-1.5">Additional Notes for Provider</label>
+              <textarea
+                id="providerNotes"
+                data-field="visit"
+                placeholder="Anything else we should know before your visit..."
+                class="w-full h-24 px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg resize-none focus:outline-none input-field placeholder:text-slate-400"
+              ></textarea>
+              <div id="ai-providerNotes" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                <i data-lucide="sparkles" class="w-3 h-3"></i>
+                <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+              </div>
+            </div>
+            <!-- Insurance -->
+            <div class="pt-4 border-t border-slate-100">
+              <label class="block text-sm font-medium text-slate-700 mb-3">Insurance Information</label>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div class="sm:col-span-2">
+                  <input
+                    type="text"
+                    id="insuranceProvider"
+                    data-field="visit"
+                    placeholder="Insurance provider name"
+                    class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+                  >
+                  <div id="ai-insuranceProvider" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                    <i data-lucide="sparkles" class="w-3 h-3"></i>
+                    <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+                  </div>
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    id="policyNumber"
+                    data-field="visit"
+                    placeholder="Policy number"
+                    class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+                  >
+                  <div id="ai-policyNumber" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                    <i data-lucide="sparkles" class="w-3 h-3"></i>
+                    <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+                  </div>
+                </div>
+                <div>
+                  <input
+                    type="text"
+                    id="groupNumber"
+                    data-field="visit"
+                    placeholder="Group number (if applicable)"
+                    class="w-full px-3.5 py-2.5 text-sm bg-white border border-slate-200 rounded-lg focus:outline-none input-field placeholder:text-slate-400"
+                  >
+                  <div id="ai-groupNumber" class="hidden ai-suggestion mt-1.5 flex items-center gap-2 text-xs text-[#0C8F8B] cursor-pointer hover:underline">
+                    <i data-lucide="sparkles" class="w-3 h-3"></i>
+                    <span>AI suggestion: <span class="ai-value font-medium"></span></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Consent -->
+        <div class="pt-6 border-t border-slate-100">
+          <label class="flex items-start gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              id="consent"
+              class="custom-checkbox w-5 h-5 mt-0.5 rounded border-slate-300 text-[#0C8F8B] focus:ring-[#0C8F8B] focus:ring-offset-0"
+            >
+            <span class="text-sm text-slate-600 leading-relaxed">
+              I consent to the collection and use of my health information for treatment purposes.
+              I understand my data is protected under HIPAA.
+            </span>
+          </label>
+        </div>
+      </div>
+    </main>
+    <!-- Sticky Footer -->
+    <footer class="sticky-footer fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-slate-200 z-50">
+      <div class="max-w-[720px] mx-auto px-4 sm:px-6 py-3 sm:py-4">
+        <div class="flex items-center justify-between gap-4">
+          <!-- Left: Save & Progress -->
+          <div class="flex items-center gap-4">
+            <button
+              id="saveLaterBtn"
+              class="btn-ghost hidden sm:flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
+            >
+              <i data-lucide="save" class="w-4 h-4"></i>
+              <span>Save and finish later</span>
+            </button>
+            <button
+              id="saveLaterBtnMobile"
+              class="btn-ghost sm:hidden flex items-center justify-center w-10 h-10 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
+              aria-label="Save progress"
+            >
+              <i data-lucide="save" class="w-5 h-5"></i>
+            </button>
+            <div class="hidden sm:block h-6 w-px bg-slate-200"></div>
+            <div class="flex items-center gap-2 text-sm">
+              <div class="w-2 h-2 rounded-full bg-[#0C8F8B]" id="progressDot"></div>
+              <span class="text-slate-600" id="footerProgress">0% complete</span>
+            </div>
+          </div>
+          <!-- Right: CTA -->
+          <button
+            id="submitBtn"
+            class="btn-primary flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 bg-[#0C8F8B] hover:bg-[#0A7F7B] text-white text-sm font-medium rounded-xl shadow-sm shadow-[#0C8F8B]/20"
+          >
+            <span id="ctaText">Continue</span>
+            <i data-lucide="arrow-right" class="w-4 h-4"></i>
+          </button>
+        </div>
+      </div>
+    </footer>
+    <!-- Success Modal -->
+    <div id="successModal" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+      <div class="bg-white rounded-2xl p-8 max-w-md w-full text-center shadow-2xl">
+        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-[#0C8F8B]/10 flex items-center justify-center">
+          <i data-lucide="check-circle" class="w-8 h-8 text-[#0C8F8B]"></i>
+        </div>
+        <h3 class="text-xl font-semibold text-slate-900 mb-2">Intake Submitted</h3>
+        <p class="text-slate-600 mb-6">Your information has been securely transmitted. We'll contact you within 24 hours to confirm your appointment.</p>
+        <button
+          onclick="location.reload()"
+          class="w-full py-3 bg-[#0C8F8B] hover:bg-[#0A7F7B] text-white font-medium rounded-xl transition-colors"
+        >
+          Start New Intake
+        </button>
+      </div>
+    </div>
+    <!-- Save Later Modal -->
+    <div id="saveModal" class="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+      <div class="bg-white rounded-2xl p-6 max-w-sm w-full shadow-2xl">
+        <h3 class="text-lg font-semibold text-slate-900 mb-2">Progress Saved</h3>
+        <p class="text-sm text-slate-600 mb-4">We've saved your progress. A secure link has been sent to your email to continue later.</p>
+        <button
+          onclick="document.getElementById('saveModal').classList.add('hidden'); document.getElementById('saveModal').classList.remove('flex');"
+          class="w-full py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-900 font-medium rounded-lg transition-colors"
+        >
+          Got it
+        </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Initialize Lucide icons
+    lucide.createIcons();
+    // Form state
+    const formState = {
+      personal: ['fullName', 'dob', 'gender', 'ssn'],
+      contact: ['email', 'phone', 'preferredContact', 'address', 'city', 'state', 'zip'],
+      medical: ['medications', 'allergies', 'surgeries', 'familyHistory'],
+      visit: ['visitReason', 'preferredDate', 'preferredTime', 'providerNotes', 'insuranceProvider', 'policyNumber', 'groupNumber']
+    };
+    const allFields = Object.values(formState).flat();
+    let filledFields = new Set();
+    // AI parsing simulation
+    const aiPatterns = {
+      fullName: /([A-Z][a-z]+ [A-Z][a-z]+)/,
+      dob: /(\d{1,2}\/\d{1,2}\/\d{4}|\d{4}-\d{2}-\d{2})/,
+      email: /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/,
+      phone: /(\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4})/,
+      ssn: /(\d{3}-?\d{2}-?\d{4})/,
+      address: /(\d+\s+[A-Za-z\s]+(?:Street|St|Avenue|Ave|Road|Rd|Boulevard|Blvd|Drive|Dr|Lane|Ln|Way)\.?)/i,
+      city: /([A-Za-z\s]+),\s*[A-Z]{2}/,
+      state: /,\s*([A-Z]{2})\s*\d{5}/,
+      zip: /(\d{5}(?:-\d{4})?)/,
+      medications: /(?:medication|medications|meds?):?\s*([^.]+)/i,
+      allergies: /(?:allerg(?:y|ies)|allergic to):?\s*([^.]+)/i
+    };
+    // Update progress
+    function updateProgress() {
+      const totalFields = allFields.length;
+      const filled = allFields.filter(id => {
+        const el = document.getElementById(id);
+        return el && el.value.trim().length > 0;
+      }).length;
+      const percentage = Math.round((filled / totalFields) * 100);
+      document.getElementById('progressBar').style.width = `${percentage}%`;
+      document.getElementById('progressText').textContent = `${percentage}% complete`;
+      document.getElementById('footerProgress').textContent = `${percentage}% complete`;
+      // Update CTA text based on progress
+      const ctaText = document.getElementById('ctaText');
+      if (percentage === 100) {
+        ctaText.textContent = 'Submit Intake';
+      } else if (percentage > 50) {
+        ctaText.textContent = 'Continue';
+      } else {
+        ctaText.textContent = 'Continue';
+      }
+      // Update progress dot color
+      const dot = document.getElementById('progressDot');
+      if (percentage === 100) {
+        dot.className = 'w-2 h-2 rounded-full bg-green-500';
+      } else if (percentage > 50) {
+        dot.className = 'w-2 h-2 rounded-full bg-[#0C8F8B]';
+      } else {
+        dot.className = 'w-2 h-2 rounded-full bg-amber-400';
+      }
+    }
+    // Attach listeners to all fields
+    allFields.forEach(fieldId => {
+      const el = document.getElementById(fieldId);
+      if (el) {
+        el.addEventListener('input', updateProgress);
+        el.addEventListener('change', updateProgress);
+      }
+    });
+    // AI Process button
+    document.getElementById('aiProcessBtn').addEventListener('click', async () => {
+      const input = document.getElementById('aiInput').value.trim();
+      if (!input) return;
+      const status = document.getElementById('aiStatus');
+      status.classList.remove('hidden');
+      // Simulate AI processing delay
+      await new Promise(r => setTimeout(r, 1500));
+      // Parse and suggest
+      const suggestions = {};
+      if (input.includes('Sarah') || input.includes('sarah')) {
+        suggestions.fullName = 'Sarah Johnson';
+      } else if (input.includes('Michael') || input.includes('michael')) {
+        suggestions.fullName = 'Michael Chen';
+      } else if (input.includes('Emma') || input.includes('emma')) {
+        suggestions.fullName = 'Emma Rodriguez';
+      }
+      if (input.match(/\d{1,2}\/\d{1,2}\/1985/) || input.includes('1985')) {
+        suggestions.dob = '1985-03-15';
+      } else if (input.match(/\d{1,2}\/\d{1,2}\/1990/) || input.includes('1990')) {
+        suggestions.dob = '1990-07-22';
+      }
+      if (input.includes('@')) {
+        const emailMatch = input.match(aiPatterns.email);
+        if (emailMatch) suggestions.email = emailMatch[1];
+      }
+      if (input.match(/\d{3}[-.]?\d{3}[-.]?\d{4}/)) {
+        const phoneMatch = input.match(aiPatterns.phone);
+        if (phoneMatch) suggestions.phone = phoneMatch[1].replace(/\D/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
+      }
+      if (input.includes('123 Main') || input.includes('main street')) {
+        suggestions.address = '123 Main Street';
+        suggestions.city = 'San Francisco';
+        suggestions.state = 'CA';
+        suggestions.zip = '94102';
+      }
+      if (input.toLowerCase().includes('female') || input.includes('woman')) {
+        suggestions.gender = 'female';
+      } else if (input.toLowerCase().includes('male') || input.includes('man')) {
+        suggestions.gender = 'male';
+      }
+      if (input.includes('Blue Cross') || input.includes('BCBS')) {
+        suggestions.insuranceProvider = 'Blue Cross Blue Shield';
+        suggestions.policyNumber = 'BCB123456789';
+      }
+      // Show suggestions
+      Object.entries(suggestions).forEach(([field, value]) => {
+        const suggestionEl = document.getElementById(`ai-${field}`);
+        if (suggestionEl && !document.getElementById(field).value) {
+          suggestionEl.querySelector('.ai-value').textContent = value;
+          suggestionEl.classList.remove('hidden');
+          suggestionEl.onclick = () => {
+            document.getElementById(field).value = value;
+            suggestionEl.classList.add('hidden');
+            updateProgress();
+            // Trigger input event for any listeners
+            document.getElementById(field).dispatchEvent(new Event('input'));
+          };
+        }
+      });
+      status.classList.add('hidden');
+      // Clear input
+      document.getElementById('aiInput').value = '';
+    });
+    // Save later buttons
+    function showSaveModal() {
+      const modal = document.getElementById('saveModal');
+      modal.classList.remove('hidden');
+      modal.classList.add('flex');
+    }
+    document.getElementById('saveLaterBtn').addEventListener('click', showSaveModal);
+    document.getElementById('saveLaterBtnMobile').addEventListener('click', showSaveModal);
+    // Submit button
+    document.getElementById('submitBtn').addEventListener('click', () => {
+      const modal = document.getElementById('successModal');
+      modal.classList.remove('hidden');
+      modal.classList.add('flex');
+    });
+    // Close modals on backdrop click
+    document.getElementById('successModal').addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) {
+        e.target.classList.add('hidden');
+        e.target.classList.remove('flex');
+      }
+    });
+    // Initialize progress
+    updateProgress();
+    // Handle input focus to ensure visibility above sticky footer
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach(input => {
+      input.addEventListener('focus', () => {
+        setTimeout(() => {
+          const rect = input.getBoundingClientRect();
+          const footerHeight = 80;
+          const viewportHeight = window.innerHeight;
+          if (rect.bottom > viewportHeight - footerHeight) {
+            const scrollAmount = rect.bottom - (viewportHeight - footerHeight) + 20;
+            window.scrollBy({ top: scrollAmount, behavior: 'smooth' });
+          }
+        }, 100);
+      });
+    });
+  </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>