Next release: new app icon, name lettering and the IFOKNR lettering in the WebUI

module/webroot/index.html

@@ -5,13 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
   <title>Fastboot Studio Companion</title>
+  <link rel="icon" href="logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <header class="appbar">
-    <div class="who">
-      <div class="title">Companion <span class="chip warn" id="betaChip" hidden data-i="beta"></span></div>
-      <div class="sub" id="whoLine">…</div>
+    <div class="brand">
+      <img class="logo" src="logo.svg" alt="" width="40" height="40">
+      <div class="who">
+        <div class="title"><svg class="wm" viewBox="0 0 5248 1237" style="width:4.243em" role="img" aria-label="Companion"><path fill="currentColor" d="M350 903H345C235 903 202 863 223 713L241 587C261 438 308 396 409 396H414C473 396 504 403 567 442L636 366C567 306 502 285 430 285C239 285 151 360 117 598L103 702C71 930 146 1015 334 1015C410 1015 480 995 562 936L495 864C431 898 403 903 350 903ZM639 761C614 936 678 1012 838 1012C1011 1012 1073 950 1099 761L1118 629C1142 454 1078 378 918 378C752 378 683 447 657 629ZM761 758 779 632C795 518 817 489 903 489C991 489 1012 516 996 632L978 758C961 878 943 901 854 901C761 901 744 879 761 758ZM1173 1000H1294L1359 539C1394 501 1449 471 1505 471C1565 471 1574 506 1557 626L1505 1000H1616L1672 600C1675 581 1676 563 1678 540C1717 501 1773 471 1827 471C1887 471 1896 506 1879 626L1827 1000H1938L1994 600C2016 443 1983 378 1868 378C1822 378 1780 392 1748 408L1675 476C1663 412 1625 378 1546 378C1500 378 1458 392 1426 408L1370 461L1380 390H1258ZM2029 1225H2146L2187 936L2227 989C2255 1004 2290 1012 2345 1012C2454 1012 2530 945 2550 804L2581 584C2600 447 2537 378 2405 378C2356 378 2305 393 2260 416L2263 390H2146ZM2371 488C2446 488 2470 512 2459 584L2429 804C2419 875 2385 902 2320 902C2272 902 2225 880 2200 841L2236 584C2247 508 2276 488 2371 488ZM2653 804C2633 944 2694 1011 2840 1011C2873 1011 2916 1004 2947 989L2997 935L2988 1000H3104L3190 390H3085L3069 428C3028 395 2979 378 2926 378C2775 378 2704 437 2684 584ZM2774 804 2805 584C2815 513 2848 488 2929 488C3032 488 3056 508 3042 609L3009 841C2973 880 2919 902 2864 902C2790 902 2764 875 2774 804ZM3222 1000H3344L3408 534C3443 496 3500 471 3554 471C3614 471 3625 497 3607 628L3554 1000H3666L3722 602C3745 436 3709 378 3595 378C3548 378 3507 385 3468 402L3419 455L3429 390H3308ZM3821 764C3798 927 3824 1006 3947 1006C3960 1006 3971 1005 3986 1003L3998 905C3931 905 3926 886 3943 763L3995 390H3794L3782 474L3859 492ZM3886 274C3881 309 3906 338 3941 338C3978 338 4010 309 4015 274C4020 237 3996 209 3959 209C3924 209 3891 237 3886 274ZM4062 761C4037 936 4101 1012 4261 1012C4434 1012 4496 950 4522 761L4541 629C4565 454 4501 378 4341 378C4175 378 4106 447 4080 629ZM4184 758 4202 632C4218 518 4240 489 4326 489C4414 489 4435 516 4419 632L4401 758C4384 878 4366 901 4277 901C4184 901 4167 879 4184 758ZM4595 1000H4717L4781 534C4816 496 4873 471 4927 471C4987 471 4998 497 4980 628L4927 1000H5039L5095 602C5118 436 5082 378 4968 378C4921 378 4880 385 4841 402L4792 455L4802 390H4681Z"/></svg> <span class="chip warn" id="betaChip" hidden data-i="beta"></span></div>
+        <div class="sub" id="whoLine">…</div>
+      </div>
     </div>
     <div class="bar-end">
       <span class="chip" id="rootChip" hidden></span>
@@ -138,6 +142,7 @@ <h3 data-i="bundle.title"></h3>
       </div>
       <div class="card">
         <h3 data-i="about.title"></h3>
+        <p class="sig-row"><img class="sig sig-dark" src="ifoknr-dark.svg" alt="IFOKNR"><img class="sig sig-light" src="ifoknr-light.svg" alt="IFOKNR"></p>
         <dl class="kv" id="aboutKv"></dl>
         <div class="links" data-links></div>
       </div>

module/webroot/style.css

@@ -56,8 +56,12 @@ button, input { font: inherit; color: inherit; }
   position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
   padding: calc(var(--top) + .8rem) 1rem .8rem; background: var(--bg); border-bottom: 1px solid var(--line);
 }
+/* The app icon, the same as on ifoknr.com and the other Fastboot Studio tools. */
+.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
+.brand .logo { width: 2.5rem; height: 2.5rem; flex: none; display: block; }
 .appbar .title { font-weight: 700; font-size: 1.15rem; line-height: 1.25; display: flex; align-items: center; gap: .5rem; }
 .appbar .title .chip { font-size: .7rem; padding: .05rem .45rem; }
+.wm { display: block; height: 1em; overflow: visible; }
 .appbar .sub { font-size: .8rem; color: var(--faint); direction: ltr; unicode-bidi: isolate; }
 [dir="rtl"] .appbar .sub { text-align: right; }
 .bar-end { display: flex; align-items: center; gap: .5rem; }
@@ -283,3 +287,14 @@ pre.code .hit { color: var(--danger); }
 }
 
 @media (prefers-reduced-motion: reduce) { .core .bar, .meter i, body { transition: none; } }
+
+/* IFOKNR in the Swamp Ninja lettering, as outlines; one picture per theme. */
+.sig-row { margin: 2px 0 10px; }
+.sig { height: 18px; width: auto; display: block; }
+.sig-light { display: none; }
+:root[data-theme="light"] .sig-dark { display: none; }
+:root[data-theme="light"] .sig-light { display: block; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) .sig-dark { display: none; }
+  :root:not([data-theme="dark"]) .sig-light { display: block; }
+}