Spaces:

thors1
/

deepsite-project-u02ge

Running

App Files Files Community

thors1 commited on Apr 12

Commit

ea75851

verified ·

1 Parent(s): 2d023b4

Initial DeepSite commit

Browse files

Files changed (3) hide show

README.md +9 -6
index.html +706 -19
script.js +514 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project U02ge
-emoji: 🐨
-colorFrom: indigo
-colorTo: red
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: yellow
+colorTo: blue
 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,706 @@
-<!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">
+  <title>Verify MC - Patient Intake</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            verify: {
+              bg: '#F8FAFC',
+              card: '#FFFFFF',
+              border: '#E5E7EB',
+              text: '#0F172A',
+              muted: '#64748B',
+              teal: '#0C8F8B',
+              'teal-hover': '#0A7F7B',
+              success: '#10B981',
+              error: '#EF4444'
+            }
+          },
+          boxShadow: {
+            'soft': '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+            'card': '0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03)'
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    * {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    }
+    .input-field {
+      transition: all 0.15s ease;
+    }
+    .input-field:focus {
+      outline: none;
+      border-color: #0C8F8B;
+      box-shadow: 0 0 0 3px rgba(12, 143, 139, 0.08);
+    }
+    .input-field.error {
+      border-color: #EF4444;
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
+    }
+    .section-enter {
+      animation: sectionEnter 0.3s ease-out;
+    }
+    @keyframes sectionEnter {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .ai-pulse {
+      animation: aiPulse 2s ease-in-out infinite;
+    }
+    @keyframes aiPulse {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+    .progress-bar {
+      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .btn-primary {
+      transition: all 0.15s ease;
+    }
+    .btn-primary:hover {
+      transform: translateY(-1px);
+    }
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+    .sticky-cta {
+      position: sticky;
+      bottom: 0;
+      background: linear-gradient(to top, #FFFFFF 90%, transparent);
+      padding-top: 16px;
+      margin-top: -16px;
+    }
+    @media (min-width: 640px) {
+      .sticky-cta {
+        position: static;
+        background: transparent;
+        padding-top: 0;
+        margin-top: 0;
+      }
+    }
+    .checkbox-custom {
+      appearance: none;
+      width: 20px;
+      height: 20px;
+      border: 2px solid #E5E7EB;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      position: relative;
+    }
+    .checkbox-custom:checked {
+      background: #0C8F8B;
+      border-color: #0C8F8B;
+    }
+    .checkbox-custom:checked::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 2px;
+      width: 6px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+    .radio-custom {
+      appearance: none;
+      width: 20px;
+      height: 20px;
+      border: 2px solid #E5E7EB;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      position: relative;
+    }
+    .radio-custom:checked {
+      border-color: #0C8F8B;
+    }
+    .radio-custom:checked::after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 10px;
+      height: 10px;
+      background: #0C8F8B;
+      border-radius: 50%;
+    }
+    .ai-input-expand {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .ai-suggestion {
+      animation: suggestionAppear 0.2s ease-out;
+    }
+    @keyframes suggestionAppear {
+      from {
+        opacity: 0;
+        transform: scale(0.98);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    .field-hint {
+      opacity: 0;
+      transform: translateY(-4px);
+      transition: all 0.2s ease;
+    }
+    .input-field:focus ~ .field-hint,
+    .input-field:not(:placeholder-shown) ~ .field-hint {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .completion-badge {
+      animation: badgePop 0.3s ease-out;
+    }
+    @keyframes badgePop {
+      0% { transform: scale(0.8); opacity: 0; }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); opacity: 1; }
+    }
+  </style>
+</head>
+<body class="bg-verify-bg min-h-screen">
+  <!-- Header -->
+  <header class="py-6 px-4 sm:px-6">
+    <div class="max-w-[720px] mx-auto flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <div class="w-10 h-10 bg-verify-teal rounded-xl flex items-center justify-center">
+          <i data-lucide="shield-check" class="w-5 h-5 text-white"></i>
+        </div>
+        <div>
+          <h1 class="text-verify-text font-semibold text-lg leading-tight">Verify MC</h1>
+          <p class="text-verify-muted text-sm">Patient Intake Portal</p>
+        </div>
+      </div>
+      <div class="text-verify-muted text-sm hidden sm:block">
+        Need help? <a href="#" class="text-verify-teal hover:underline">Contact support</a>
+      </div>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <main class="px-4 sm:px-5 pb-8">
+    <div class="max-w-[720px] mx-auto">
+      <!-- Form Card -->
+      <div class="bg-verify-card rounded-[20px] border border-verify-border shadow-card overflow-hidden">
+        <!-- Progress Bar -->
+        <div class="h-1 bg-gray-100">
+          <div id="progressBar" class="progress-bar h-full bg-verify-teal w-0"></div>
+        </div>
+        <div class="p-6 sm:p-8">
+          <!-- Title Section -->
+          <div class="mb-8">
+            <h2 class="text-verify-text text-2xl font-semibold mb-2">Patient Intake Form</h2>
+            <p class="text-verify-muted">Please provide your information below. You can skip anything and complete later.</p>
+          </div>
+          <!-- AI Assist Section -->
+          <div id="aiSection" class="mb-8 ai-input-expand">
+            <div class="bg-gradient-to-r from-teal-50/50 to-emerald-50/30 rounded-2xl border border-teal-100/50 p-4 sm:p-5">
+              <div class="flex items-start gap-3 mb-3">
+                <div class="w-8 h-8 bg-verify-teal/10 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <i data-lucide="sparkles" class="w-4 h-4 text-verify-teal ai-pulse"></i>
+                </div>
+                <div>
+                  <h3 class="text-verify-text font-medium text-sm">Speed this up with AI</h3>
+                  <p class="text-verify-muted text-sm">Describe your info in one sentence and we'll fill the form for you</p>
+                </div>
+              </div>
+              <div class="flex gap-2">
+                <input
+                  type="text"
+                  id="aiInput"
+                  placeholder="e.g., John Smith, born March 15 1985, allergic to penicillin..."
+                  class="flex-1 px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400 focus:outline-none focus:border-verify-teal focus:ring-2 focus:ring-verify-teal/10"
+                >
+                <button
+                  id="aiTryBtn"
+                  onclick="processAIInput()"
+                  class="btn-primary px-5 py-3 bg-verify-teal hover:bg-verify-teal-hover text-white font-medium text-sm rounded-xl flex items-center gap-2 flex-shrink-0"
+                >
+                  <i data-lucide="wand-2" class="w-4 h-4"></i>
+                  <span class="hidden sm:inline">Try it</span>
+                </button>
+              </div>
+              <!-- AI Suggestions Display -->
+              <div id="aiSuggestions" class="hidden mt-4 space-y-2"></div>
+            </div>
+          </div>
+          <!-- Form Sections -->
+          <form id="intakeForm" class="space-y-8">
+            <!-- Personal Information -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="user" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Personal Information</h3>
+                <span class="text-verify-muted text-xs ml-auto" id="personalProgress">0/5</span>
+              </div>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Full Legal Name <span class="text-verify-teal">*</span></label>
+                  <input
+                    type="text"
+                    name="fullName"
+                    data-section="personal"
+                    required
+                    placeholder="First and last name"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Date of Birth <span class="text-verify-teal">*</span></label>
+                  <input
+                    type="date"
+                    name="dateOfBirth"
+                    data-section="personal"
+                    required
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm"
+                  >
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Phone Number <span class="text-verify-teal">*</span></label>
+                  <input
+                    type="tel"
+                    name="phone"
+                    data-section="personal"
+                    required
+                    placeholder="(555) 123-4567"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Email Address</label>
+                  <input
+                    type="email"
+                    name="email"
+                    data-section="personal"
+                    placeholder="you@example.com"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Home Address</label>
+                  <textarea
+                    name="address"
+                    data-section="personal"
+                    rows="2"
+                    placeholder="Street address, city, state, zip"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400 resize-none"
+                  ></textarea>
+                </div>
+              </div>
+            </section>
+            <!-- Emergency Contact -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="phone-call" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Emergency Contact</h3>
+                <span class="text-verify-muted text-xs ml-auto" id="emergencyProgress">0/3</span>
+              </div>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Contact Name</label>
+                  <input
+                    type="text"
+                    name="emergencyName"
+                    data-section="emergency"
+                    placeholder="Full name"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Relationship</label>
+                  <select
+                    name="emergencyRelationship"
+                    data-section="emergency"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm"
+                  >
+                    <option value="">Select relationship</option>
+                    <option value="spouse">Spouse/Partner</option>
+                    <option value="parent">Parent</option>
+                    <option value="child">Child</option>
+                    <option value="sibling">Sibling</option>
+                    <option value="friend">Friend</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Phone Number</label>
+                  <input
+                    type="tel"
+                    name="emergencyPhone"
+                    data-section="emergency"
+                    placeholder="(555) 123-4567"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+              </div>
+            </section>
+            <!-- Insurance Information -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="credit-card" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Insurance Information</h3>
+                <span class="text-verify-muted text-xs ml-auto" id="insuranceProgress">0/4</span>
+              </div>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Insurance Provider</label>
+                  <select
+                    name="insuranceProvider"
+                    data-section="insurance"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm"
+                  >
+                    <option value="">Select provider</option>
+                    <option value="aetna">Aetna</option>
+                    <option value="anthem">Anthem</option>
+                    <option value="bcbs">Blue Cross Blue Shield</option>
+                    <option value="cigna">Cigna</option>
+                    <option value="kaiser">Kaiser Permanente</option>
+                    <option value="medicare">Medicare</option>
+                    <option value="medicaid">Medicaid</option>
+                    <option value="united">UnitedHealthcare</option>
+                    <option value="self">Self-pay / No insurance</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Policy Number</label>
+                  <input
+                    type="text"
+                    name="policyNumber"
+                    data-section="insurance"
+                    placeholder="XXX-XXX-XXX"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Group Number</label>
+                  <input
+                    type="text"
+                    name="groupNumber"
+                    data-section="insurance"
+                    placeholder="Optional"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div class="sm:col-span-2">
+                  <label class="block text-verify-text text-sm font-medium mb-2">Policyholder Name (if not you)</label>
+                  <input
+                    type="text"
+                    name="policyholderName"
+                    data-section="insurance"
+                    placeholder="Leave blank if same as patient"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+              </div>
+            </section>
+            <!-- Medical History -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="heart-pulse" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Medical History</h3>
+                <span class="text-verify-muted text-xs ml-auto" id="medicalProgress">0/4</span>
+              </div>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-3">Current Medications</label>
+                  <textarea
+                    name="medications"
+                    data-section="medical"
+                    rows="2"
+                    placeholder="List any medications you currently take (or type 'none')"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400 resize-none"
+                  ></textarea>
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-3">Allergies</label>
+                  <div class="flex flex-wrap gap-2 mb-3">
+                    <button type="button" onclick="toggleAllergy(this, 'Penicillin')" class="allergy-tag px-3 py-1.5 bg-gray-100 text-verify-muted text-sm rounded-lg border border-transparent hover:border-verify-teal/30 transition-all">Penicillin</button>
+                    <button type="button" onclick="toggleAllergy(this, 'Sulfa drugs')" class="allergy-tag px-3 py-1.5 bg-gray-100 text-verify-muted text-sm rounded-lg border border-transparent hover:border-verify-teal/30 transition-all">Sulfa drugs</button>
+                    <button type="button" onclick="toggleAllergy(this, 'Latex')" class="allergy-tag px-3 py-1.5 bg-gray-100 text-verify-muted text-sm rounded-lg border border-transparent hover:border-verify-teal/30 transition-all">Latex</button>
+                    <button type="button" onclick="toggleAllergy(this, 'None')" class="allergy-tag px-3 py-1.5 bg-gray-100 text-verify-muted text-sm rounded-lg border border-transparent hover:border-verify-teal/30 transition-all">None</button>
+                  </div>
+                  <input
+                    type="text"
+                    name="allergies"
+                    data-section="medical"
+                    id="allergiesInput"
+                    placeholder="Or type other allergies here"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400"
+                  >
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-3">Chronic Conditions</label>
+                  <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                    <label class="flex items-center gap-2 p-3 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                      <input type="checkbox" name="conditions" value="diabetes" data-section="medical" class="checkbox-custom">
+                      <span class="text-verify-text text-sm">Diabetes</span>
+                    </label>
+                    <label class="flex items-center gap-2 p-3 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                      <input type="checkbox" name="conditions" value="hypertension" data-section="medical" class="checkbox-custom">
+                      <span class="text-verify-text text-sm">Hypertension</span>
+                    </label>
+                    <label class="flex items-center gap-2 p-3 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                      <input type="checkbox" name="conditions" value="asthma" data-section="medical" class="checkbox-custom">
+                      <span class="text-verify-text text-sm">Asthma</span>
+                    </label>
+                    <label class="flex items-center gap-2 p-3 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                      <input type="checkbox" name="conditions" value="heart-disease" data-section="medical" class="checkbox-custom">
+                      <span class="text-verify-text text-sm">Heart Disease</span>
+                    </label>
+                    <label class="flex items-center gap-2 p-3 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                      <input type="checkbox" name="conditions" value="none" data-section="medical" class="checkbox-custom">
+                      <span class="text-verify-text text-sm">None</span>
+                    </label>
+                  </div>
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-3">Previous Surgeries or Hospitalizations</label>
+                  <textarea
+                    name="surgeries"
+                    data-section="medical"
+                    rows="2"
+                    placeholder="Briefly describe any major surgeries or hospital stays (or type 'none')"
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400 resize-none"
+                  ></textarea>
+                </div>
+              </div>
+            </section>
+            <!-- Reason for Visit -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="clipboard-list" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Reason for Visit</h3>
+                <span class="text-verify-muted text-xs ml-auto" id="visitProgress">0/2</span>
+              </div>
+              <div class="space-y-4">
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-3">Primary Reason <span class="text-verify-teal">*</span></label>
+                  <select
+                    name="visitReason"
+                    data-section="visit"
+                    required
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm"
+                  >
+                    <option value="">Select reason for visit</option>
+                    <option value="annual">Annual physical/check-up</option>
+                    <option value="new-patient">New patient consultation</option>
+                    <option value="follow-up">Follow-up visit</option>
+                    <option value="sick-visit">Sick visit / Urgent care</option>
+                    <option value="specialist">Specialist referral</option>
+                    <option value="procedure">Scheduled procedure</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="block text-verify-text text-sm font-medium mb-2">Symptoms or Concerns (optional)</label>
+                  <textarea
+                    name="symptoms"
+                    data-section="visit"
+                    rows="3"
+                    placeholder="Describe any symptoms, concerns, or questions you have for your provider..."
+                    class="input-field w-full px-4 py-3 bg-white border border-verify-border rounded-xl text-verify-text text-sm placeholder:text-gray-400 resize-none"
+                  ></textarea>
+                </div>
+              </div>
+            </section>
+            <!-- Consent -->
+            <section class="section-enter">
+              <div class="flex items-center gap-2 mb-4">
+                <div class="w-6 h-6 bg-verify-teal/10 rounded-lg flex items-center justify-center">
+                  <i data-lucide="shield" class="w-3.5 h-3.5 text-verify-teal"></i>
+                </div>
+                <h3 class="text-verify-text font-semibold">Consent & Privacy</h3>
+              </div>
+              <div class="space-y-3">
+                <label class="flex items-start gap-3 p-4 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                  <input type="checkbox" name="consentTreatment" required class="checkbox-custom mt-0.5">
+                  <div>
+                    <span class="text-verify-text text-sm font-medium">Treatment Consent</span>
+                    <p class="text-verify-muted text-xs mt-1">I consent to receive medical treatment and understand the risks and benefits.</p>
+                  </div>
+                </label>
+                <label class="flex items-start gap-3 p-4 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                  <input type="checkbox" name="consentPrivacy" required class="checkbox-custom mt-0.5">
+                  <div>
+                    <span class="text-verify-text text-sm font-medium">Privacy Acknowledgment</span>
+                    <p class="text-verify-muted text-xs mt-1">I understand my health information will be handled according to HIPAA regulations.</p>
+                  </div>
+                </label>
+                <label class="flex items-start gap-3 p-4 border border-verify-border rounded-xl cursor-pointer hover:border-verify-teal/30 transition-all">
+                  <input type="checkbox" name="consentCommunication" class="checkbox-custom mt-0.5">
+                  <div>
+                    <span class="text-verify-text text-sm font-medium">Communication Consent (optional)</span>
+                    <p class="text-verify-muted text-xs mt-1">I consent to receive appointment reminders and health information via text/email.</p>
+                  </div>
+                </label>
+              </div>
+            </section>
+          </form>
+        </div>
+        <!-- Sticky CTA -->
+        <div class="sticky-cta px-6 sm:px-8 pb-6 sm:pb-8">
+          <div class="flex items-center justify-between gap-4">
+            <div class="hidden sm:block">
+              <p class="text-verify-muted text-sm" id="completionText">0% complete</p>
+              <div class="w-32 h-1.5 bg-gray-200 rounded-full mt-1">
+                <div id="bottomProgress" class="progress-bar h-full bg-verify-teal rounded-full w-0"></div>
+              </div>
+            </div>
+            <div class="flex gap-3 flex-1 sm:flex-none">
+              <button
+                type="button"
+                onclick="saveDraft()"
+                class="btn-primary flex-1 sm:flex-none px-6 py-3.5 border border-verify-border text-verify-text font-medium text-sm rounded-xl hover:bg-gray-50"
+              >
+                Save for Later
+              </button>
+              <button
+                type="submit"
+                onclick="submitForm()"
+                class="btn-primary flex-1 sm:flex-none px-8 py-3.5 bg-verify-teal hover:bg-verify-teal-hover text-white font-semibold text-sm rounded-xl flex items-center justify-center gap-2"
+              >
+                <span>Submit Intake</span>
+                <i data-lucide="arrow-right" class="w-4 h-4"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Footer -->
+      <footer class="mt-8 text-center">
+        <p class="text-verify-muted text-sm">
+          Secured by Verify MC • <a href="#" class="text-verify-teal hover:underline">Privacy Policy</a> • <a href="#" class="text-verify-teal hover:underline">Terms</a>
+        </p>
+      </footer>
+    </div>
+  </main>
+  <!-- Success Modal -->
+  <div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
+    <div class="bg-white rounded-2xl p-8 max-w-md w-full text-center section-enter">
+      <div class="w-16 h-16 bg-verify-teal/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
+        <i data-lucide="check-circle" class="w-8 h-8 text-verify-teal"></i>
+      </div>
+      <h3 class="text-verify-text text-xl font-semibold mb-2">Intake Submitted!</h3>
+      <p class="text-verify-muted mb-6">Your information has been securely sent to your healthcare provider. You should receive a confirmation shortly.</p>
+      <button onclick="closeModal()" class="btn-primary w-full py-3.5 bg-verify-teal hover:bg-verify-teal-hover text-white font-semibold text-sm rounded-xl">
+        Done
+      </button>
+    </div>
+  </div>
+  <!-- Draft Saved Toast -->
+  <div id="toast" class="fixed bottom-4 left-1/2 -translate-x-1/2 bg-verify-text text-white px-6 py-3 rounded-xl shadow-lg hidden items-center gap-2 z-50">
+    <i data-lucide="check" class="w-4 h-4 text-verify-teal"></i>
+    <span class="text-sm" id="toastMessage">Draft saved</span>
+  </div>
+  <script src="script.js"></script>
+  <script>
+    lucide.createIcons();
+  </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,514 @@

+// Verify MC Patient Intake Widget
+// Production-grade, conversion-optimized form with AI assistance
+(function() {
+  'use strict';
+  // State management
+  const state = {
+    formData: {},
+    aiProcessing: false,
+    sections: {
+      personal: { fields: 5, filled: 0 },
+      emergency: { fields: 3, filled: 0 },
+      insurance: { fields: 4, filled: 0 },
+      medical: { fields: 4, filled: 0 },
+      visit: { fields: 2, filled: 0 }
+    },
+    totalFields: 18,
+    filledFields: 0
+  };
+  // Initialize
+  document.addEventListener('DOMContentLoaded', init);
+  function init() {
+    loadSavedData();
+    attachEventListeners();
+    updateProgress();
+    initializePhoneFormatting();
+  }
+  // Event Listeners
+  function attachEventListeners() {
+    const form = document.getElementById('intakeForm');
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      // Real-time validation and progress
+      input.addEventListener('blur', () => validateField(input));
+      input.addEventListener('input', () => {
+        updateFieldStatus(input);
+        debouncedProgressUpdate();
+      });
+      // AI suggestion on focus for certain fields
+      if (input.name === 'symptoms' || input.name === 'medications') {
+        input.addEventListener('focus', () => showAIHint(input));
+      }
+    });
+    // Enter key in AI input
+    document.getElementById('aiInput').addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') processAIInput();
+    });
+    // Form submission prevention
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      submitForm();
+    });
+  }
+  // Phone number formatting
+  function initializePhoneFormatting() {
+    const phoneInputs = document.querySelectorAll('input[type="tel"]');
+    phoneInputs.forEach(input => {
+      input.addEventListener('input', (e) => {
+        let value = e.target.value.replace(/\D/g, '');
+        if (value.length >= 6) {
+          value = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6, 10)}`;
+        } else if (value.length >= 3) {
+          value = `(${value.slice(0, 3)}) ${value.slice(3)}`;
+        }
+        e.target.value = value;
+      });
+    });
+  }
+  // Field validation
+  function validateField(input) {
+    const isRequired = input.hasAttribute('required');
+    const isEmpty = !input.value.trim();
+    if (isRequired && isEmpty) {
+      input.classList.add('error');
+      showFieldError(input, 'This field is required');
+    } else if (input.type === 'email' && input.value && !isValidEmail(input.value)) {
+      input.classList.add('error');
+      showFieldError(input, 'Please enter a valid email');
+    } else {
+      input.classList.remove('error');
+      clearFieldError(input);
+    }
+  }
+  function isValidEmail(email) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  }
+  function showFieldError(input, message) {
+    clearFieldError(input);
+    const error = document.createElement('p');
+    error.className = 'field-error text-verify-error text-xs mt-1.5 flex items-center gap-1';
+    error.innerHTML = `<i data-lucide="alert-circle" class="w-3 h-3"></i>${message}`;
+    input.parentNode.appendChild(error);
+    lucide.createIcons();
+  }
+  function clearFieldError(input) {
+    const existing = input.parentNode.querySelector('.field-error');
+    if (existing) existing.remove();
+  }
+  // Progress tracking
+  function updateFieldStatus(input) {
+    const section = input.dataset.section;
+    if (!section) return;
+    const isFilled = input.type === 'checkbox'
+      ? input.checked
+      : input.value.trim().length > 0;
+    state.formData[input.name] = isFilled ? input.value : null;
+    // Auto-save to localStorage
+    debouncedSave();
+  }
+  let progressDebounceTimer;
+  function debouncedProgressUpdate() {
+    clearTimeout(progressDebounceTimer);
+    progressDebounceTimer = setTimeout(updateProgress, 100);
+  }
+  function updateProgress() {
+    const sections = ['personal', 'emergency', 'insurance', 'medical', 'visit'];
+    let totalFilled = 0;
+    let totalCount = 0;
+    sections.forEach(sectionKey => {
+      const sectionEl = document.querySelector(`[data-section="${sectionKey}"]`)?.closest('section');
+      if (!sectionEl) return;
+      const fields = sectionEl.querySelectorAll('input, select, textarea');
+      let filled = 0;
+      let count = 0;
+      fields.forEach(field => {
+        // Skip checkboxes for simple counting, focus on text inputs
+        if (field.type === 'checkbox') return;
+        count++;
+        totalCount++;
+        const isFilled = field.value.trim().length > 0;
+        if (isFilled) {
+          filled++;
+          totalFilled++;
+        }
+      });
+      // Update section progress indicator
+      const progressEl = document.getElementById(`${sectionKey}Progress`);
+      if (progressEl) {
+        progressEl.textContent = `${filled}/${count}`;
+        if (filled === count) {
+          progressEl.className = 'text-verify-teal text-xs ml-auto font-medium';
+        } else {
+          progressEl.className = 'text-verify-muted text-xs ml-auto';
+        }
+      }
+    });
+    // Update main progress bars
+    const percentage = Math.round((totalFilled / totalCount) * 100) || 0;
+    document.getElementById('progressBar').style.width = `${percentage}%`;
+    document.getElementById('bottomProgress').style.width = `${percentage}%`;
+    document.getElementById('completionText').textContent = `${percentage}% complete`;
+    // Visual feedback on completion milestones
+    if (percentage === 100 && !state.completedShown) {
+      state.completedShown = true;
+      showToast('All fields completed! Ready to submit.');
+    }
+  }
+  // AI Processing
+  window.processAIInput = async function() {
+    const input = document.getElementById('aiInput');
+    const btn = document.getElementById('aiTryBtn');
+    const suggestions = document.getElementById('aiSuggestions');
+    const text = input.value.trim();
+    if (!text) return;
+    // Show processing state
+    state.aiProcessing = true;
+    btn.disabled = true;
+    btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Processing...</span>`;
+    lucide.createIcons();
+    // Simulate AI processing (in production, this would call an API)
+    await new Promise(r => setTimeout(r, 1500));
+    // Parse and extract information
+    const extracted = extractInfoFromText(text);
+    // Display suggestions
+    displayAISuggestions(extracted, suggestions);
+    // Reset button
+    btn.disabled = false;
+    btn.innerHTML = `<i data-lucide="wand-2" class="w-4 h-4"></i><span class="hidden sm:inline">Try it</span>`;
+    lucide.createIcons();
+    state.aiProcessing = false;
+  };
+  function extractInfoFromText(text) {
+    const info = {};
+    const lower = text.toLowerCase();
+    // Name extraction
+    const nameMatch = text.match(/(?:name is|i am|my name is)\s+([A-Z][a-z]+(?:\s+[A-Z][a-z]+)+)/i) ||
+                     text.match(/^([A-Z][a-z]+(?:\s+[A-Z][a-z]+)+)/);
+    if (nameMatch) info.fullName = nameMatch[1];
+    // Date extraction (various formats)
+    const dateMatch = text.match(/(?:born|birth|dob|birthday)[\s,]*([A-Za-z]+\s+\d{1,2}[,.]?\s*\d{4}|\d{1,2}[\/\-.]\d{1,2}[\/\-.]\d{2,4})/i);
+    if (dateMatch) {
+      info.dateOfBirth = parseDate(dateMatch[1]);
+    }
+    // Phone extraction
+    const phoneMatch = text.match(/(\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})/);
+    if (phoneMatch) info.phone = phoneMatch[1];
+    // Email extraction
+    const emailMatch = text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/);
+    if (emailMatch) info.email = emailMatch[1];
+    // Allergies
+    if (lower.includes('allergic to') || lower.includes('allergy')) {
+      const allergyMatch = text.match(/allergic to\s+([^,.]+)/i);
+      if (allergyMatch) info.allergies = allergyMatch[1];
+    }
+    // Medications
+    if (lower.includes('take') || lower.includes('medication')) {
+      const medMatch = text.match(/(?:take|taking|on)\s+([^,.]+(?:mg|daily|twice|once)[^,.]*)/i);
+      if (medMatch) info.medications = medMatch[1];
+    }
+    // Insurance
+    const insuranceKeywords = {
+      'aetna': 'aetna',
+      'anthem': 'anthem',
+      'blue cross': 'bcbs',
+      'bluecross': 'bcbs',
+      'cigna': 'cigna',
+      'kaiser': 'kaiser',
+      'medicare': 'medicare',
+      'medicaid': 'medicaid',
+      'united': 'united'
+    };
+    for (const [keyword, value] of Object.entries(insuranceKeywords)) {
+      if (lower.includes(keyword)) {
+        info.insuranceProvider = value;
+        break;
+      }
+    }
+    // Conditions
+    const conditions = [];
+    if (lower.includes('diabetes')) conditions.push('diabetes');
+    if (lower.includes('hypertension') || lower.includes('high blood pressure')) conditions.push('hypertension');
+    if (lower.includes('asthma')) conditions.push('asthma');
+    if (lower.includes('heart')) conditions.push('heart-disease');
+    if (conditions.length) info.conditions = conditions;
+    return info;
+  }
+  function parseDate(dateStr) {
+    // Try to parse various date formats and return YYYY-MM-DD
+    const tryParse = new Date(dateStr);
+    if (!isNaN(tryParse)) {
+      return tryParse.toISOString().split('T')[0];
+    }
+    return null;
+  }
+  function displayAISuggestions(extracted, container) {
+    container.innerHTML = '';
+    container.classList.remove('hidden');
+    const suggestions = Object.entries(extracted).filter(([key, value]) => value);
+    if (suggestions.length === 0) {
+      container.innerHTML = `
+        <div class="ai-suggestion p-3 bg-amber-50 border border-amber-200 rounded-xl flex items-center gap-2">
+          <i data-lucide="alert-circle" class="w-4 h-4 text-amber-600"></i>
+          <span class="text-amber-800 text-sm">We couldn't extract specific information. Try being more specific with names, dates, and numbers.</span>
+        </div>
+      `;
+      lucide.createIcons();
+      return;
+    }
+    suggestions.forEach(([field, value]) => {
+      const div = document.createElement('div');
+      div.className = 'ai-suggestion p-3 bg-white border border-verify-teal/30 rounded-xl flex items-center justify-between gap-3';
+      const displayField = field.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      const displayValue = Array.isArray(value) ? value.join(', ') : value;
+      div.innerHTML = `
+        <div class="flex items-center gap-2 flex-1">
+          <i data-lucide="check-circle-2" class="w-4 h-4 text-verify-teal flex-shrink-0"></i>
+          <div class="min-w-0">
+            <span class="text-verify-muted text-xs">${displayField}</span>
+            <p class="text-verify-text text-sm font-medium truncate">${displayValue}</p>
+          </div>
+        </div>
+        <button onclick="applyAIValue('${field}', '${Array.isArray(value) ? value.join(',') : value}')"
+                class="px-3 py-1.5 bg-verify-teal text-white text-xs font-medium rounded-lg hover:bg-verify-teal-hover transition-colors flex-shrink-0">
+          Apply
+        </button>
+      `;
+      container.appendChild(div);
+    });
+    lucide.createIcons();
+  }
+  window.applyAIValue = function(field, value) {
+    const input = document.querySelector(`[name="${field}"]`);
+    if (!input) return;
+    if (field === 'conditions') {
+      const conditions = value.split(',');
+      conditions.forEach(c => {
+        const checkbox = document.querySelector(`[name="conditions"][value="${c}"]`);
+        if (checkbox) checkbox.checked = true;
+      });
+    } else {
+      input.value = value;
+    }
+    updateFieldStatus(input);
+    updateProgress();
+    // Remove applied suggestion
+    const suggestions = document.getElementById('aiSuggestions');
+    const applied = suggestions.querySelector(`button[onclick*="${field}"]`)?.closest('.ai-suggestion');
+    if (applied) {
+      applied.style.opacity = '0.5';
+      applied.querySelector('button').textContent = 'Applied';
+      applied.querySelector('button').disabled = true;
+    }
+    showToast(`${field.replace(/([A-Z])/g, ' $1')} applied`);
+  };
+  // Allergy tag toggle
+  window.toggleAllergy = function(btn, allergy) {
+    const input = document.getElementById('allergiesInput');
+    const current = input.value.split(',').map(s => s.trim()).filter(s => s);
+    if (btn.classList.contains('bg-verify-teal')) {
+      // Remove
+      btn.classList.remove('bg-verify-teal', 'text-white');
+      btn.classList.add('bg-gray-100', 'text-verify-muted');
+      const idx = current.indexOf(allergy);
+      if (idx > -1) current.splice(idx, 1);
+    } else {
+      // Add
+      btn.classList.remove('bg-gray-100', 'text-verify-muted');
+      btn.classList.add('bg-verify-teal', 'text-white');
+      if (!current.includes(allergy)) current.push(allergy);
+    }
+    input.value = current.join(', ');
+    updateFieldStatus(input);
+  };
+  // Form submission
+  window.submitForm = async function() {
+    const form = document.getElementById('intakeForm');
+    const required = form.querySelectorAll('[required]');
+    let valid = true;
+    required.forEach(field => {
+      validateField(field);
+      if (!field.value.trim()) valid = false;
+    });
+    if (!valid) {
+      showToast('Please fill in all required fields');
+      // Scroll to first error
+      const firstError = form.querySelector('.error');
+      if (firstError) {
+        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        firstError.focus();
+      }
+      return;
+    }
+    // Simulate submission
+    const submitBtn = document.querySelector('button[type="submit"]');
+    const originalText = submitBtn.innerHTML;
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i><span>Submitting...</span>`;
+    lucide.createIcons();
+    await new Promise(r => setTimeout(r, 2000));
+    // Clear saved data
+    localStorage.removeItem('verifyMC_intakeDraft');
+    // Show success
+    document.getElementById('successModal').classList.remove('hidden');
+    document.getElementById('successModal').classList.add('flex');
+  };
+  window.closeModal = function() {
+    document.getElementById('successModal').classList.add('hidden');
+    document.getElementById('successModal').classList.remove('flex');
+    // Reset form
+    document.getElementById('intakeForm').reset();
+    updateProgress();
+  };
+  // Draft saving
+  window.saveDraft = function() {
+    const form = document.getElementById('intakeForm');
+    const data = new FormData(form);
+    const saved = {};
+    for (const [key, value] of data.entries()) {
+      if (saved[key]) {
+        if (!Array.isArray(saved[key])) saved[key] = [saved[key]];
+        saved[key].push(value);
+      } else {
+        saved[key] = value;
+      }
+    }
+    localStorage.setItem('verifyMC_intakeDraft', JSON.stringify(saved));
+    showToast('Draft saved — you can return anytime');
+  };
+  function loadSavedData() {
+    const saved = localStorage.getItem('verifyMC_intakeDraft');
+    if (!saved) return;
+    try {
+      const data = JSON.parse(saved);
+      Object.entries(data).forEach(([key, value]) => {
+        const field = document.querySelector(`[name="${key}"]`);
+        if (!field) return;
+        if (field.type === 'checkbox') {
+          field.checked = true;
+        } else if (Array.isArray(value)) {
+          // Handle multi-select checkboxes
+          value.forEach(v => {
+            const cb = document.querySelector(`[name="${key}"][value="${v}"]`);
+            if (cb) cb.checked = true;
+          });
+        } else {
+          field.value = value;
+        }
+      });
+    } catch (e) {
+      console.error('Failed to load saved data:', e);
+    }
+  }
+  let saveDebounceTimer;
+  function debouncedSave() {
+    clearTimeout(saveDebounceTimer);
+    saveDebounceTimer = setTimeout(() => {
+      const form = document.getElementById('intakeForm');
+      const data = new FormData(form);
+      const saved = {};
+      for (const [key, value] of data.entries()) {
+        saved[key] = value;
+      }
+      localStorage.setItem('verifyMC_intakeDraft', JSON.stringify(saved));
+    }, 2000);
+  }
+  // Toast notifications
+  function showToast(message) {
+    const toast = document.getElementById('toast');
+    document.getElementById('toastMessage').textContent = message;
+    toast.classList.remove('hidden');
+    toast.classList.add('flex');
+    setTimeout(() => {
+      toast.classList.add('hidden');
+      toast.classList.remove('flex');
+    }, 3000);
+  }
+  // AI hints for specific fields
+  function showAIHint(input) {
+    // Could show contextual AI suggestions based on field type
+    // Currently minimal to avoid intrusion
+  }
+})();