feat: one PedsHub mark for both apps — login card, menu, favicon, manifest

The scribe wore a stethoscope and called itself PedAI while the quiz app
was PedsHub; one product, two identities. Both now use the PedsHub icon.
The login card shows the icon, the name and the tagline and loses the
"Sign In" heading that sat above a single button; the menu bar shows the
icon at 20px beside the name, since the full wordmark did not fit there.
Favicons and the PWA icons are rendered from the same SVG.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Dv6sqaY6Vq3ChZHMem3cnU

public/css/styles.css

@@ -22,8 +22,8 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 .auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:var(--g50);padding:20px;}
 .auth-box{background:white;border-radius:20px;padding:40px;max-width:440px;width:100%;box-shadow:0 4px 6px -1px rgba(0,0,0,.07),0 20px 60px -10px rgba(37,99,235,.12);border:1px solid #e0e7ff;}
 .auth-logo{text-align:center;margin-bottom:30px;}
-.auth-logo i{font-size:40px;color:var(--blue);margin-bottom:10px;}
-.auth-logo h1{font-size:24px;color:var(--g900);}
+.auth-logo img{width:64px;height:64px;border-radius:16px;display:block;margin:0 auto 10px;}
+.auth-logo h1{font-size:24px;color:var(--g900);margin:0 0 2px;}
 .auth-logo p{color:var(--g500);font-size:14px;}
 .auth-form h2{font-size:20px;margin-bottom:20px;color:var(--g800);}
 .form-group{margin-bottom:16px;}
@@ -51,7 +51,7 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 .menu-brand { margin-right:auto; }
 .menu-brand { display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; }
 .menu-brand h1 { font-size:15px; font-weight:700; color:var(--g900); margin:0; line-height:1; letter-spacing:-.01em; }
-.menu-brand i { font-size:16px; color:var(--blue); flex:0 0 auto; }
+.menu-brand img { width:20px; height:20px; border-radius:5px; flex:0 0 auto; }
 .menu-brand i { transition:font-size .15s ease; }
 .menu-icon-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; border-radius:8px; background:none; color:var(--g500); font-size:13px; cursor:pointer; }
 .menu-icon-btn:hover { background:var(--g100); color:var(--g800); }

public/icons/icon.svg

@@ -1,53 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#2563eb"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <linearGradient id="shine" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.15"/>
-      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Background circle -->
-  <circle cx="256" cy="256" r="256" fill="url(#bg)"/>
-  <circle cx="256" cy="256" r="256" fill="url(#shine)"/>
-
-  <!-- Stethoscope tubing — Y shape going down to chest piece -->
-  <!-- Left ear tube -->
-  <path d="M 168 110 C 155 110 140 118 136 138 L 128 210"
-        stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/>
-  <!-- Right ear tube -->
-  <path d="M 344 110 C 357 110 372 118 376 138 L 384 210"
-        stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/>
-  <!-- Join and go down -->
-  <path d="M 128 210 C 128 240 148 260 178 265 L 256 270 L 334 265 C 364 260 384 240 384 210"
-        stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/>
-  <!-- Stem down to chest piece -->
-  <path d="M 256 270 L 256 330"
-        stroke="white" stroke-width="22" fill="none" stroke-linecap="round"/>
-
-  <!-- Chest piece circle -->
-  <circle cx="256" cy="368" r="46" fill="white"/>
-  <circle cx="256" cy="368" r="30" fill="url(#bg)"/>
-  <circle cx="256" cy="368" r="14" fill="white" opacity="0.9"/>
-
-  <!-- Ear tips -->
-  <circle cx="168" cy="108" r="16" fill="white"/>
-  <circle cx="344" cy="108" r="16" fill="white"/>
-
-  <!-- Pencil / scribe accent — bottom right -->
-  <g transform="translate(340, 340) rotate(-35)">
-    <!-- Pencil body -->
-    <rect x="-10" y="-52" width="20" height="68" rx="3" fill="#fbbf24"/>
-    <!-- Pencil tip -->
-    <polygon points="-10,16 10,16 0,38" fill="#f59e0b"/>
-    <!-- Pencil tip point -->
-    <polygon points="-5,30 5,30 0,38" fill="#1f2937"/>
-    <!-- Eraser band -->
-    <rect x="-10" y="-52" width="20" height="10" rx="2" fill="#f87171"/>
-    <!-- Pencil lines -->
-    <line x1="-10" y1="-26" x2="10" y2="-26" stroke="#e78c0a" stroke-width="1.5"/>
-  </g>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#0f172a"/>
+  <text y=".9em" font-size="72" x="14" fill="white">🏥</text>
 </svg>

public/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content">
-  <title>Pediatric Clinical Tools</title>
+  <title>PedsHub</title>
   <link rel="stylesheet" href="/css/styles.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -27,7 +27,7 @@
   <meta name="theme-color" content="#ffffff">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="apple-mobile-web-app-title" content="PedScribe">
+  <meta name="apple-mobile-web-app-title" content="PedsHub">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   <link rel="icon" type="image/svg+xml" href="/icons/icon.svg">
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32.png">
@@ -49,13 +49,13 @@
   <div id="auth-screen" class="auth-screen">
     <div class="auth-box">
       <div class="auth-logo">
-        <i class="fas fa-stethoscope"></i>
+        <img src="/icons/icon.svg" alt="" width="64" height="64">
+        <h1>PedsHub</h1>
         <p>AI-Powered Pediatric Practice</p>
       </div>
 
       <!-- Login Form -->
       <form id="login-form" class="auth-form" autocomplete="off">
-        <h2>Sign In</h2>
         <!-- Biometric quick-login (Capacitor only). Hidden by default;
              revealed by auth.js when isNativeApp() + biometric available
              + credentials previously enrolled. -->
@@ -179,8 +179,8 @@
         <div class="menu-head">
           <button type="button" class="menu-icon-btn assistant-menu-toggle" data-menu-toggle aria-expanded="true" title="Hide menu" aria-label="Hide menu"><i class="fas fa-angles-left"></i></button>
           <div class="menu-brand">
-            <i class="fas fa-stethoscope"></i>
-            <h1>PedAI</h1>
+            <img src="/icons/icon.svg" alt="" width="20" height="20">
+            <h1>PedsHub</h1>
           </div>
           <button type="button" class="menu-icon-btn" data-menu-search title="Search" aria-label="Search"><i class="fas fa-magnifying-glass"></i></button>
         </div>

public/manifest.json

@@ -1,13 +1,16 @@
 {
-  "name": "Pediatric Clinical Tools",
-  "short_name": "PedTools",
+  "name": "PedsHub",
+  "short_name": "PedsHub",
   "description": "AI-powered pediatric clinical documentation",
   "start_url": "/",
   "display": "standalone",
   "background_color": "#ffffff",
   "theme_color": "#ffffff",
   "orientation": "any",
-  "categories": ["medical", "productivity"],
+  "categories": [
+    "medical",
+    "productivity"
+  ],
   "prefer_related_applications": false,
   "icons": [
     {
@@ -32,13 +35,23 @@
       "name": "New Encounter",
       "short_name": "Encounter",
       "url": "/?tab=encounter",
-      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+      "icons": [
+        {
+          "src": "/icons/icon-192.png",
+          "sizes": "192x192"
+        }
+      ]
     },
     {
       "name": "SOAP Note",
       "short_name": "SOAP",
       "url": "/?tab=soap",
-      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+      "icons": [
+        {
+          "src": "/icons/icon-192.png",
+          "sizes": "192x192"
+        }
+      ]
     }
   ]
 }