Add geotagging and location map v0.4

app/static/index.html

@@ -6,6 +6,7 @@
   <meta name="theme-color" content="#121820">
   <title>Photo Date Editor</title>
   <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="stylesheet" href="/vendor/leaflet/leaflet.css">
   <link rel="stylesheet" href="/styles.css">
 </head>
 <body>
@@ -126,6 +127,7 @@
           <button class="tab active" data-tab="date" role="tab">Date &amp; time</button>
           <button class="tab" data-tab="details" role="tab">Details</button>
           <button class="tab" data-tab="keywords" role="tab">Keywords</button>
+          <button class="tab" data-tab="location" role="tab">Location</button>
         </div>
 
         <form id="metadata-form" autocomplete="off">
@@ -193,6 +195,45 @@
             </label>
             <p class="field-help">Separate entries with commas or new lines. Written as XMP Subject and IPTC Keywords.</p>
           </section>
+
+          <section class="tab-panel" data-panel="location">
+            <div class="location-search">
+              <label class="field location-search-field">
+                <span>Search for a place or address</span>
+                <input id="address-search" class="input" type="search" placeholder="Cabin address, town, landmark…">
+              </label>
+              <button id="address-search-button" class="button" type="button">Search</button>
+            </div>
+            <p class="field-help search-privacy">Search queries are sent to the configured geocoder. You can place a pin manually instead.</p>
+            <div id="address-results" class="address-results" aria-live="polite"></div>
+
+            <div id="location-map" class="location-map" aria-label="Map for selecting photo location"></div>
+            <p class="field-help map-help">Click the map to place a pin, or drag the pin to fine-tune the position.</p>
+
+            <div class="field-grid coordinate-grid">
+              <label class="field">
+                <span>Latitude</span>
+                <input id="latitude-input" class="input" type="number" min="-90" max="90" step="0.000001" placeholder="60.391263">
+              </label>
+              <label class="field">
+                <span>Longitude</span>
+                <input id="longitude-input" class="input" type="number" min="-180" max="180" step="0.000001" placeholder="5.322054">
+              </label>
+            </div>
+
+            <label class="field">
+              <span>Location label</span>
+              <input id="location-name-input" class="input" type="text" maxlength="500" placeholder="Cabin, Voss, Norway">
+            </label>
+
+            <div class="location-actions">
+              <button id="clear-location" class="button ghost" type="button">Clear location</button>
+            </div>
+            <div class="info-card location-info">
+              <strong>What gets written</strong>
+              <p>Coordinates are written to EXIF and XMP GPS fields. The optional label is written to XMP Location.</p>
+            </div>
+          </section>
         </form>
 
         <section class="right-footer">
@@ -214,10 +255,12 @@
       <div><dt>← / →</dt><dd>Previous or next photo</dd></div>
       <div><dt>S</dt><dd>Mark skipped and open next photo</dd></div>
       <div><dt>C</dt><dd>Copy previous photo's values</dd></div>
+      <div><dt>Shift+Tab</dt><dd>Switch to the previous right-side tab</dd></div>
     </dl>
   </dialog>
 
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
+  <script src="/vendor/leaflet/leaflet.js"></script>
   <script src="/app.js" type="module"></script>
 </body>
 </html>