Image Not Found Placeholder

<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="bg-white rounded-lg shadow-lg p-8 max-w-md text-center">
    <svg class="w-24 h-24 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
    </svg>
    <h2 class="text-2xl font-bold text-gray-800 mb-2">Image Not Found</h2>
    <p class="text-gray-600 mb-4">The image file path provided is invalid or the file cannot be accessed.</p>
    <div class="bg-gray-50 rounded p-3 mb-4 text-left">
      <code class="text-xs text-gray-700 break-all">file:///Users/sy-030/Pictures/Photos%20Library.photoslibrary/resources/derivatives/C/CFD69519-ECDE-4934-BE1B-973827EFC124_1_105_c.jpeg</code>
    </div>
    <p class="text-sm text-gray-500">Please provide a valid HTML file or URL for analysis.</p>
  </div>
</div>