Merge branch 'main' of https://git.prototyping.id/20256426/Map-Jurnal

.firebase/hosting.ZGlzdA.cache

@@ -1,16 +1,17 @@
 logo.png,1781605272907,e1d8cae38fa1d4a97f6847ccdc69dae37d8b481e6862625b6d8a6565137a622b
-index.html,1781626470507,98eefa9e3873744a9078c988b34e583e536271c048e862fdb320c34bce29e287
-assets/index-DvsKFHEX.css,1781626470507,5c4f357ff59c59917ce7c70ee28b29bc28c9d7eec3f6afd12e4c2cc8120537e1
-assets/walk-2q6BKbeA.png,1781626470507,19a9f5d599221a0077761a7777285ca17dbc2775a9c4096304098602f2067b87
-assets/airplane-DW4h3HkK.png,1781626470507,8d70ae12e46f5abdb4e1ccdf59af4bcab1805229d02f1260321f1f61d6375af1
-assets/ship-xaUNk1p4.png,1781626470507,58b126e20c22710d5af92a45b6ec8af6e0b3dea30a743f9e8b91e849ed66cd91
-assets/car-C6BGShf6.png,1781626470507,ac10c46e0a8245a9e52b8c3cebe110112f57764c9bda1fe93d4fbc077e79a1b2
-assets/bus-Dy8WA7au.png,1781626470506,8285587abd857cce3b7083e799a8d2a95b019cfc40546e914cc2b8348c448c10
-assets/train-DAjH23UQ.png,1781626470507,9b3a2b3b0376f74a47daf69b2f202d757fd8425edede28a8263d2ef5994ed5f2
-assets/default-3-BcrUpMyO.jpeg,1781626470508,f10d24e80f9f94ddf40d1103ea18f96214e89c18102c75be6b816c8ee0a2b4b9
-assets/logo-signin-BAMDzBb4.png,1781626470489,7e5d35cac2cea449b27ef72e386e66e1b9c8cbb9261a26b85fda4cb2d89ac226
-assets/default-2-CoZoomA5.jpeg,1781626470508,fbdb512018aba7f68167796632defe75019af5432ed0bfc48d0e24851c47261f
-assets/profile-lvFMnGZN.png,1781626470507,0892c6fcffa6be93a86ddedc09b6c26ad725fd1dd66479b4382dbfddcb6d392f
-assets/home-D9_bbHBx.png,1781626470506,201c0fa3a0d38a8ce25c5494d0bd1f2d5d7e0f03fb07cd9c34b3e7593858899f
-assets/default-1-CZLThRLv.jpeg,1781626470508,72f1614c5862c5fa1b79db6130985b681cd971e4c415758990dc1fd3c9eee1a4
-assets/index-CKAUfCTD.js,1781626470530,c04e04a89157d4c18c57e25620f703a812409505d490c3290e033892011b9120
+index.html,1781628774437,ba46c34c4641f9cba330944cbd3f9b21ee4cb43addcf58dc1876428f5aef2c0c
+assets/index-DvsKFHEX.css,1781628774437,5c4f357ff59c59917ce7c70ee28b29bc28c9d7eec3f6afd12e4c2cc8120537e1
+assets/walk-2q6BKbeA.png,1781628774437,19a9f5d599221a0077761a7777285ca17dbc2775a9c4096304098602f2067b87
+assets/airplane-DW4h3HkK.png,1781628774437,8d70ae12e46f5abdb4e1ccdf59af4bcab1805229d02f1260321f1f61d6375af1
+assets/ship-xaUNk1p4.png,1781628774438,58b126e20c22710d5af92a45b6ec8af6e0b3dea30a743f9e8b91e849ed66cd91
+assets/car-C6BGShf6.png,1781628774437,ac10c46e0a8245a9e52b8c3cebe110112f57764c9bda1fe93d4fbc077e79a1b2
+assets/bus-Dy8WA7au.png,1781628774437,8285587abd857cce3b7083e799a8d2a95b019cfc40546e914cc2b8348c448c10
+assets/default-3-BcrUpMyO.jpeg,1781628774448,f10d24e80f9f94ddf40d1103ea18f96214e89c18102c75be6b816c8ee0a2b4b9
+assets/logo-signin-BAMDzBb4.png,1781628774437,7e5d35cac2cea449b27ef72e386e66e1b9c8cbb9261a26b85fda4cb2d89ac226
+assets/train-DAjH23UQ.png,1781628774437,9b3a2b3b0376f74a47daf69b2f202d757fd8425edede28a8263d2ef5994ed5f2
+assets/default-2-CoZoomA5.jpeg,1781628774448,fbdb512018aba7f68167796632defe75019af5432ed0bfc48d0e24851c47261f
+assets/profile-lvFMnGZN.png,1781628774437,0892c6fcffa6be93a86ddedc09b6c26ad725fd1dd66479b4382dbfddcb6d392f
+assets/default-1-CZLThRLv.jpeg,1781628774448,72f1614c5862c5fa1b79db6130985b681cd971e4c415758990dc1fd3c9eee1a4
+assets/home-D9_bbHBx.png,1781628774423,201c0fa3a0d38a8ce25c5494d0bd1f2d5d7e0f03fb07cd9c34b3e7593858899f
+DB-diagram.PNG,1781628177434,978dcc3d9b7e059510c59d5c8a836018dfdb4b6cf59a9e362a89a5a6f9cb6f26
+assets/index-gfLawFjf.js,1781628774466,b5e58d7bfb36663198ac3fbbece0600acef7c8b8822ab9c1132cfc0a68ce214a

README.md

@@ -117,6 +117,12 @@ npm run dev
 
 ---
 
+## Known Issues
+
+- **Globe animation** — The D3 globe rotation animation during journey replay can be a little bit laggy.
+
+---
+
 ## Acknowledgments
 
 - **Opencode** - researching, writing code, debuging... (https://opencode.ai/)

src/lib/timeline/detail/EditForm.svelte

@@ -11,15 +11,24 @@
    */
   let { entry = null, initialCountry = '', onBack } = $props();
 
+  // svelte-ignore state_referenced_locally
   let isNew = !entry;
 
+  // svelte-ignore state_referenced_locally
   let cities     = $state([...(entry?.location.cities ?? [])]);
+  // svelte-ignore state_referenced_locally
   let country    = $state(entry?.location.country ?? initialCountry);
+  // svelte-ignore state_referenced_locally
   let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
+  // svelte-ignore state_referenced_locally
   let days       = $state(String(entry?.days ?? ''));
+  // svelte-ignore state_referenced_locally
   let tripType   = $state(entry?.tripType ?? '');
+  // svelte-ignore state_referenced_locally
   let photos     = $state([...(entry?.photos ?? [])]);
+  // svelte-ignore state_referenced_locally
   let memo       = $state(entry?.memo ?? '');
+  // svelte-ignore state_referenced_locally
   let transport  = $state(entry?.transport ?? '');
 
   let step = $state(1);

src/lib/timeline/detail/JournalDetail.svelte

@@ -84,9 +84,10 @@
           <div class="photo-grid">
             {#each entry.photos as photo, i}
               <div class="photo-cell" class:cell-wide={i === 0 && entry.photos.length > 1}>
-                <img src={photo} alt=""
-                  onclick={() => lightboxSrc = photo}
-                  onerror={(e) => e.currentTarget.parentElement.classList.add('cell-broken')} />
+                <button type="button" class="photo-btn" onclick={() => lightboxSrc = photo}>
+                  <img src={photo} alt=""
+                    onerror={(e) => { e.currentTarget.closest('.photo-cell')?.classList.add('cell-broken'); }} />
+                </button>
               </div>
             {/each}
           </div>
@@ -254,21 +255,24 @@
     grid-column: 1 / -1;
     grid-row: span 2;
   }
-  .photo-cell img {
+  .photo-btn {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: zoom-in;
+  }
+  .photo-btn img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.2s ease;
   }
-  .photo-cell:hover img { transform: scale(1.03); }
-  .photo-cell.cell-broken {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-sub);
-    font-size: 12px;
-  }
+  .photo-cell:hover .photo-btn img { transform: scale(1.03); }
+
 
   .no-photos {
     display: flex;

src/lib/timeline/detail/NewEntryForm.svelte

@@ -204,7 +204,7 @@
         </div>
 
         <div class="field">
-          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
+          <span class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></span>
           <div class="toggle-row">
             {#each ['solo','friends','family'] as t}
               <label class="toggle-opt" class:active={tripType === t}>
@@ -217,7 +217,7 @@
         </div>
 
         <div class="field">
-          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+          <span class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></span>
           <div class="transport-grid">
             {#each transportOptions as opt}
               <label class="toggle-opt" class:active={transport === opt.value}>

src/lib/timeline/detail/PhotoEditor.svelte

@@ -66,7 +66,7 @@
         </div>
       {/each}
 
-      <button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading}>
+      <button type="button" class="add-cell" onclick={() => fileInput.click()} disabled={uploading} aria-label="Add photo">
         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
           <path d="M12 5v14M5 12h14"/>
         </svg>
@@ -101,23 +101,6 @@
     flex: 1;
   }
 
-  .add-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-family: var(--sans);
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--accent);
-    background: var(--accent-bg);
-    border: 1px solid var(--accent-border);
-    border-radius: 6px;
-    padding: 4px 10px;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-  .add-btn:hover { background: rgba(124,58,237,0.12); }
-
   .empty-zone {
     display: flex;
     flex-direction: column;

src/lib/timeline/detail/TripBasicInfo.svelte

@@ -90,7 +90,7 @@
 </div>
 
 <div class="field">
-  <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
+  <span class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></span>
   <div class="toggle-row">
     {#each ['solo','friends','family'] as t}
       <label class="toggle-opt" class:active={tripType === t}>
@@ -103,7 +103,7 @@
 </div>
 
 <div class="field">
-  <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+  <span class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></span>
   <div class="transport-grid">
     {#each transportOptions as opt}
       <label class="toggle-opt transport-opt" class:active={transport === opt.value}>

src/lib/timeline/view/ShareCard.svelte

@@ -401,42 +401,6 @@
     margin: 8px 0;
   }
 
-  /* Stat grid */
-  .stat-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 8px;
-    margin-bottom: 24px;
-    position: relative;
-    z-index: 1;
-  }
-  .stat-box {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.08);
-    border-radius: 10px;
-    padding: 10px 8px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-  .stat-num {
-    font-size: 22px;
-    font-weight: 400;
-    color: #fff;
-    letter-spacing: -0.5px;
-    line-height: 1;
-    margin-bottom: 4px;
-  }
-  .stat-desc {
-    font-size: 9px;
-    font-weight: 400;
-    color: rgba(255,255,255,0.4);
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-  }
-
   /* Facts */
   .facts {
     display: flex;
@@ -464,42 +428,6 @@
   }
   .fact-text strong { color: #fff; font-weight: 400; }
 
-  /* Continent bar */
-  .cont-section {
-    position: relative;
-    z-index: 1;
-    margin-bottom: 20px;
-  }
-  .cont-bar {
-    display: flex;
-    height: 6px;
-    border-radius: 3px;
-    overflow: hidden;
-    gap: 2px;
-    margin-bottom: 8px;
-  }
-  .cont-seg { border-radius: 3px; min-width: 4px; }
-  .cont-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 12px;
-  }
-  .cont-item {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 9px;
-    font-weight: 300;
-    color: rgba(255,255,255,0.5);
-    letter-spacing: 0.04em;
-  }
-  .cont-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
   /* Footer */
   .card-footer {
     margin-top: auto;

src/lib/timeline/view/SharePreview.svelte

@@ -227,15 +227,4 @@
     letter-spacing: 0.04em;
   }
 
-  .pc-cta {
-    position: relative;
-    z-index: 1;
-    font-size: 11px;
-    font-weight: 400;
-    color: #a5b4fc;
-    letter-spacing: 0.04em;
-    padding-top: 4px;
-    border-top: 1px solid rgba(255,255,255,0.08);
-    text-align: right;
-  }
 </style>