adds readme and context

index.html

@@ -36,7 +36,7 @@
     <h3>How it works</h3>
     <div class="how-steps">
       <div class="how-step">
-        <div class="how-num">📷</div>
+        <div class="how-num"><i data-lucide="camera"></i></div>
         <div class="how-content">
           <strong>Snap a photo</strong>
           <span>Point your camera at any stray dog or cat.</span>
@@ -44,7 +44,7 @@
       </div>
       <div class="how-connector"></div>
       <div class="how-step">
-        <div class="how-num">🤖</div>
+        <div class="how-num"><i data-lucide="scan-line"></i></div>
         <div class="how-content">
           <strong>AI identifies</strong>
           <span>Species, breed, color and condition — automatically.</span>
@@ -52,7 +52,7 @@
       </div>
       <div class="how-connector"></div>
       <div class="how-step">
-        <div class="how-num">🔍</div>
+        <div class="how-num"><i data-lucide="git-merge"></i></div>
         <div class="how-content">
           <strong>Smart matching</strong>
           <span>Checks if this animal has been seen before.</span>
@@ -60,7 +60,7 @@
       </div>
       <div class="how-connector"></div>
       <div class="how-step">
-        <div class="how-num">🗺️</div>
+        <div class="how-num"><i data-lucide="map-pin"></i></div>
         <div class="how-content">
           <strong>Map updates</strong>
           <span>Sighting linked to the animal's profile — or a new one is created.</span>
@@ -79,6 +79,11 @@
   </div>
 </aside>
 
+<div class="phone-wrap">
+<div class="phone-frame">
+  <div class="phone-btn phone-btn-vol-up"></div>
+  <div class="phone-btn phone-btn-vol-down"></div>
+  <div class="phone-btn phone-btn-power"></div>
 <div id="app">
 
   <!-- ══ ONBOARDING ══ -->
@@ -523,7 +528,9 @@
     <button class="nav-btn" data-screen="register"><span class="nav-icon"><i data-lucide="camera"></i></span><span>Report</span></button>
     <button class="nav-btn" data-screen="sightings"><span class="nav-icon"><i data-lucide="eye"></i></span><span>Sightings</span></button>
   </nav>
-</div>
+</div><!-- /#app -->
+</div><!-- /.phone-frame -->
+</div><!-- /.phone-wrap -->
 
 <!-- ══ RIGHT SIDEBAR (desktop only) ══ -->
 <aside id="sidebar-right">

static/style.css

@@ -566,6 +566,9 @@
 
 #desktop-layout { display:contents; }
 #sidebar-left, #sidebar-right { display:none; }
+/* Phone frame — invisible pass-through on mobile */
+.phone-wrap, .phone-frame { display:contents; }
+.phone-btn { display:none; }
 
 @media (min-width: 960px) {
   /* ── Page shell ── */
@@ -582,16 +585,82 @@
     background: #f0f7f2;
   }
 
-  /* ── App column ── */
-  #app {
+  /* ── Phone wrap — grid column + centering ── */
+  .phone-wrap {
+    display: flex;
     grid-column: 2;
-    height: 100dvh;
-    max-width: 390px;
-    margin: 0;
+    align-items: center;
+    justify-content: center;
     position: sticky;
     top: 0;
+    height: 100dvh;
+    background: #f0f7f2;
+  }
+
+  /* ── Phone frame shell ── */
+  .phone-frame {
+    display: block;
+    position: relative;
+    background: #1c1c1e;
+    border-radius: 54px;
+    padding: 14px 12px;
+    width: 414px;
+    height: min(858px, calc(100dvh - 32px));
+    box-shadow:
+      0 0 0 1.5px #3a3a3c,
+      0 0 0 3px #1c1c1e,
+      0 0 0 5px #48484a,
+      0 40px 100px rgba(0,0,0,.35),
+      inset 0 0 0 1px rgba(255,255,255,.04);
+  }
+
+  /* Dynamic island */
+  .phone-frame::before {
+    content: '';
+    position: absolute;
+    top: 17px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 94px;
+    height: 30px;
+    background: #0a0a0a;
+    border-radius: 20px;
+    z-index: 10000;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
+  }
+
+  /* Home indicator */
+  .phone-frame::after {
+    content: '';
+    position: absolute;
+    bottom: 18px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 132px;
+    height: 5px;
+    background: rgba(255,255,255,.22);
+    border-radius: 3px;
+    z-index: 10000;
+  }
+
+  /* Side buttons */
+  .phone-btn { display: block; position: absolute; background: #3a3a3c; border-radius: 2px; }
+  .phone-btn-vol-up   { left: -4px; top: 118px; width: 4px; height: 34px; border-radius: 2px 0 0 2px; }
+  .phone-btn-vol-down { left: -4px; top: 164px; width: 4px; height: 34px; border-radius: 2px 0 0 2px; }
+  .phone-btn-power    { right: -4px; top: 138px; width: 4px; height: 58px; border-radius: 0 2px 2px 0; }
+
+  /* ── App screen inside frame ── */
+  #app {
+    display: flex;
+    flex-direction: column;
+    width: 390px;
+    height: 100%;
+    max-width: 390px;
+    margin: 0 auto;
+    border-radius: 42px;
     overflow: hidden;
-    box-shadow: 0 0 48px rgba(56,140,89,.15), 0 0 0 1px rgba(56,140,89,.08);
+    position: relative;
+    box-shadow: none;
   }
 
   /* ── Shared sidebar ── */
@@ -635,11 +704,13 @@
     position:relative; z-index:1;
   }
   .how-num {
-    font-size:18px; flex-shrink:0;
+    flex-shrink:0;
     width:34px; height:34px;
     background:#e8f5ee; border-radius:10px;
     display:flex; align-items:center; justify-content:center;
+    color: var(--green);
   }
+  .how-num svg { width:16px; height:16px; stroke:var(--green); stroke-width:2; fill:none; }
   .how-content { display:flex; flex-direction:column; gap:1px; padding-top:2px; }
   .how-content strong { font-size:13px; font-weight:700; color:#1e3d28; }
   .how-content span   { font-size:11.5px; color:#7aaa8a; line-height:1.4; }