Spaces:
Running
Running
| ```html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NDIS Paperwork Wizard - Interactive Workflow</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%); | |
| } | |
| .workflow-step { | |
| transition: all 0.3s ease; | |
| } | |
| .workflow-step:hover { | |
| transform: translateY(-5px); | |
| } | |
| .compliance-dial { | |
| background: conic-gradient(#ef4444 0% 30%, #f59e0b 30% 70%, #10b981 70% 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <a href="/index.html" class="text-xl font-bold text-blue-600">NDIS Paperwork Wizard</a> | |
| <div class="flex gap-4"> | |
| <a href="/index.html" class="text-gray-600 hover:text-blue-600 transition duration-300">Home</a> | |
| <a href="/how-it-works.html" class="text-gray-600 hover:text-blue-600 transition duration-300">How It Works</a> | |
| <a href="/workflow.html" class="text-blue-600 font-semibold">Workflow</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="hero-gradient text-white py-16"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Interactive Workflow Demo</h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90">See how our AI transforms your notes into NDIS-compliant documents</p> | |
| </div> | |
| </div> | |
| <!-- Workflow Steps --> | |
| <div class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <!-- Step 1: Input --> | |
| <div class="workflow-step bg-gray-50 rounded-2xl p-8 mb-12 shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">1</div> | |
| <h2 class="text-2xl font-bold text-gray-800">Step 1 — Paste Your Session Notes</h2> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 border border-gray-200"> | |
| <p class="text-gray-600 mb-4">Paste your calendar entry or call notes:</p> | |
| <div class="bg-gray-100 p-4 rounded border border-gray-300 font-mono text-sm"> | |
| 10:00–10:30 with Jane Doe, reviewed mobility goals, provided support, booked next appointment Tue 10am | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2: AI Parsing --> | |
| <div class="workflow-step bg-gray-50 rounded-2xl p-8 mb-12 shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-green-600 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">2</div> | |
| <h2 class="text-2xl font-bold text-gray-800">Step 2 — AI Detects Required Fields</h2> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 border border-gray-200"> | |
| <p class="text-gray-600 mb-4">Copilot instantly extracts all necessary information:</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Date</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Time</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Participant</span> | |
| </div> | |
| <div class="flex items-center text-yellow-600"> | |
| <i data-feather="alert-circle" class="w-5 h-5 mr-2"></i> | |
| <span>NDIS Number</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Goals</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Outcomes</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Duration</span> | |
| </div> | |
| <div class="flex items-center text-green-600"> | |
| <i data-feather="check-circle" class="w-5 h-5 mr-2"></i> | |
| <span>Follow-up</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Compliance Checker --> | |
| <div class="workflow-step bg-gray-50 rounded-2xl p-8 mb-12 shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">3</div> | |
| <h2 class="text-2xl font-bold text-gray-800">Step 3 — Compliance Validation</h2> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 border border-gray-200"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-6 md:mb-0 md:mr-8"> | |
| <p class="text-gray-600 mb-4">Compliance status:</p> | |
| <div class="compliance-dial w-32 h-32 rounded-full flex items-center justify-center mx-auto"> | |
| <div class="bg-white w-24 h-24 rounded-full flex items-center justify-center"> | |
| <span class="text-lg font-bold text-gray-700">70%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-gray-600 mb-4">Missing fields flagged with explanations:</p> | |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4"> | |
| <div class="flex items-center text-yellow-800 mb-2"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 mr-2"></i> | |
| <span class="font-semibold">NDIS Number Missing</span> | |
| </div> | |
| <p class="text-sm text-yellow-700">Required for NDIS Practice Standard 2.3 - Participant identification and records</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4: Template Application --> | |
| <div class="workflow-step bg-gray-50 rounded-2xl p-8 mb-12 shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">4</div> | |
| <h2 class="text-2xl font-bold text-gray-800">Step 4 — Document Transformation</h2> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 border border-gray-200"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-3">Raw Notes</h3> | |
| <div class="bg-gray-100 p-4 rounded border border-gray-300 font-mono text-sm"> | |
| 10:00–10:30 with Jane Doe, reviewed mobility goals, provided support, booked next appointment Tue 10am | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-700 mb-3">Formatted Case Note</h3> | |
| <div class="bg-blue-50 p-4 rounded border border-blue-200"> | |
| <div class="font-semibold text-blue-800 mb-2">Case Note</div> | |
| <div class="text-sm space-y-1"> | |
| <p><strong>Provider:</strong> Demo Provider</p> | |
| <p><strong>Participant:</strong> Jane Doe</p> | |
| <p><strong>Date:</strong> 2025-09-25 10:00 (30m)</p> | |
| <p><strong>Summary:</strong> Reviewed mobility goals and provided support.</p> | |
| <p><strong>Outcomes:</strong> Follow-up booked.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5: Export & Save --> | |
| <div class="workflow-step bg-gray-50 rounded-2xl p-8 mb-12 shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 bg-teal-600 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">5</div> | |
| <h2 class="text-2xl font-bold text-gray-800">Step 5 — Export & Save</h2> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 border border-gray-200"> |