Make empty state clickable to add photos (#174)

* Make empty state clickable to add photos

The empty state in the image-print tool now opens the file picker
when clicked, providing a more intuitive way to add photos on mobile
where the file input may not be immediately visible.

* Center empty state in preview area

Use grid spanning and flexbox to properly center the empty state
both horizontally and vertically within the preview container.

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: simonw

image-print.html

@@ -179,6 +179,18 @@
   text-align: center;
   padding: 60px 20px;
   color: #999;
+  cursor: pointer;
+  transition: background 0.2s;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state:hover {
+  background: #f5f5f5;
 }
 
 .empty-state svg {
@@ -367,7 +379,10 @@ <h1>Photo print layout</h1>
   const totalCells = cols * numRows;
 
   if (photos.length === 0) {
-    page.innerHTML = emptyState.outerHTML;
+    const emptyClone = emptyState.cloneNode(true);
+    emptyClone.addEventListener('click', () => fileInput.click());
+    page.innerHTML = '';
+    page.appendChild(emptyClone);
     return;
   }