Update static/index.html

static/index.html

@@ -73,11 +73,36 @@
   #panel.min ~ #stage #saveState, #panel.min ~ #saveState { left:28px; }
 
   /* Pins (bigger + more transparent) */
-  .pin{
-    position:absolute; width:26px; height:26px; border-radius:50%;
-    background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.45);
-    box-shadow:0 2px 10px rgba(0,0,0,.45); transform:translate(-50%, -50%); z-index:3;
-  }
+/* Bigger, lighter pin with a guaranteed full hit area */
+.pin{
+  position:absolute;
+  left:0; top:0;
+  width:34px; height:34px;              /* bigger */
+  border-radius:50%;
+  border:2px solid rgba(255,255,255,.45);
+  background:rgba(255,255,255,.12);     /* more transparent */
+  box-shadow:0 2px 10px rgba(0,0,0,.45);
+  transform:translate(-50%, -50%);
+  z-index:3;
+  cursor:pointer;
+
+  /* kill any UA quirks if it’s a <button> */
+  display:block;
+  padding:0;
+  line-height:0;
+  -webkit-appearance:none;
+  appearance:none;
+}
+
+/* Expand the clickable area beyond the visual circle (keeps look the same) */
+.pin::before{
+  content:"";
+  position:absolute;
+  inset:-10px;            /* +10px all around = easier tapping */
+  border-radius:50%;
+  /* no background needed; clicks will still land on .pin */
+}
+
   .pin:hover{background:rgba(255,255,255,.26)}
 
   /* Popups: centered exactly on the pin midpoint */
@@ -349,12 +374,28 @@
     $('#count').textContent = String(state.items.length);
     overlay.innerHTML = '';
     for (const it of state.items){
-      const pin = document.createElement('button');
-      pin.className='pin';
-      pin.style.left = it.x+'%'; pin.style.top = it.y+'%';
-      pin.title = it.title || it.type;
-      pin.addEventListener('click', e => { e.stopPropagation(); togglePopup(it.id); });
-      overlay.appendChild(pin);
+      const pin = document.createElement('div');
+pin.className = 'pin';
+pin.setAttribute('role', 'button');
+pin.setAttribute('tabindex', '0');
+
+pin.style.left = it.x + '%';
+pin.style.top  = it.y + '%';
+pin.title = it.title || it.type;
+
+pin.addEventListener('click', (e) => {
+  e.stopPropagation();
+  togglePopup(it.id);
+});
+pin.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault();
+    togglePopup(it.id);
+  }
+});
+
+overlay.appendChild(pin);
+
 
       if (it.open){
         const pop = document.createElement('div'); pop.className='popup';