Added contextual content to the web app, some aesthetic improvements

bicorder-app/public/icon-maskable.svg

@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#0f4c75;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#3282b8;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Full bleed background for maskable icon -->
+  <rect width="512" height="512" fill="url(#bgGradient)"/>
+
+  <!-- Outer frame - scaled to fit safe zone (80% diameter = 40% radius from center) -->
+  <rect x="102" y="102" width="308" height="308" fill="none" stroke="url(#accentGradient)" stroke-width="6" rx="15"/>
+
+  <!-- Bicorder pattern "|#|" scaled for safe zone -->
+  <g font-family="'Courier New', monospace" font-weight="bold" text-anchor="middle">
+    <!-- Left bar -->
+    <text x="200" y="290" font-size="140" fill="#3282b8">|</text>
+
+    <!-- Center hash -->
+    <text x="256" y="290" font-size="140" fill="#bbe1fa">#</text>
+
+    <!-- Right bar -->
+    <text x="312" y="290" font-size="140" fill="#3282b8">|</text>
+  </g>
+
+  <!-- Decorative scan lines -->
+  <line x1="130" y1="160" x2="382" y2="160" stroke="#3282b8" stroke-width="2" opacity="0.3"/>
+  <line x1="130" y1="352" x2="382" y2="352" stroke="#3282b8" stroke-width="2" opacity="0.3"/>
+
+  <!-- Corner accents -->
+  <rect x="115" y="115" width="25" height="3" fill="#bbe1fa" opacity="0.8"/>
+  <rect x="115" y="115" width="3" height="25" fill="#bbe1fa" opacity="0.8"/>
+
+  <rect x="372" y="115" width="25" height="3" fill="#bbe1fa" opacity="0.8"/>
+  <rect x="394" y="115" width="3" height="25" fill="#bbe1fa" opacity="0.8"/>
+
+  <rect x="115" y="394" width="25" height="3" fill="#bbe1fa" opacity="0.8"/>
+  <rect x="115" y="372" width="3" height="25" fill="#bbe1fa" opacity="0.8"/>
+
+  <rect x="372" y="394" width="25" height="3" fill="#bbe1fa" opacity="0.8"/>
+  <rect x="394" y="372" width="3" height="25" fill="#bbe1fa" opacity="0.8"/>
+</svg>