Improve card image search and add note

Author: lawrencerowland

app-index.html

@@ -73,10 +73,23 @@ <h1>Prototype web apps for better project delivery</h1>
         const img=document.createElement('img');
         // Use the numeric id to load the matching screenshot in pics/
         img.alt=item.name;
-        img.src='pics/'+item['#']+'.png';
+        const paths=[
+            'pics/'+item['#']+'.png',
+            'pics/'+item['#']+'.PNG',
+            'pics/'+item['#']+'.png.png',
+            'pics/'+item['#']+'.PNG.png',
+            'pics/'+item['#']+'.png.PNG',
+            'pics/'+item['#']+'.PNG.PNG',
+            'pics/'+item['#']+'.webp'
+        ];
+        let idx=0;
+        img.src=paths[idx++];
         img.onerror=()=>{
-            img.onerror=()=>{img.src='pics/blank.png';};
-            img.src='pics/'+item['#']+'.webp';
+            if(idx<paths.length){
+                img.src=paths[idx++];
+            }else{
+                img.src='pics/blank.png';
+            }
         };
         card.appendChild(img);
         const title=document.createElement('h3');

apps/functors-models-natural-transformations/src/App.jsx

@@ -184,6 +184,9 @@ export default function App() {
           </text>
         </g>
       </svg>
+      <p className="text-center text-sm text-gray-600 mt-2">
+        Click nodes and edges to see remarks.
+      </p>
 
       {/* Info Dialog */}
       <InfoDialog