add custom icons

D David Veksler · 1 year ago b8f44ca0cdcf4aded7be5ca8be89e5cced91f504
Parent: ef12be1a9

1 file changed +33 −11

Diff

diff --git a/anduril-products.html b/anduril-products.html
index 2022131..8c64cac 100644
--- a/anduril-products.html
+++ b/anduril-products.html
@@ -185,6 +185,7 @@
         opacity: 0.8;
         margin-right: 0.6rem;
         color: var(--anduril-text-secondary); /* Subtle icon color */
+        vertical-align: -0.125em; /* Align custom SVGs better with text */
       }
       .card-content-wrapper {
         padding: 1.3rem;
@@ -796,9 +797,14 @@
             <div class="info-card card-force-protection" id="card-maritime-intrusion">
               <div class="card-body">
                 <h5>
-                  <i class="bi bi-shield-half"></i> Maritime Counter Intrusion
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16">
+                    <path d="M5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.777 11.777 0 0 1-2.517 2.453 7.009 7.009 0 0 1-1.048.605c-.26.132-.52.25-.75.354a.933.933 0 0 1-.524 0c-.23-.104-.49-.222-.75-.354a7.007 7.007 0 0 1-1.048-.605 11.772 11.772 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
+                    <path d="M3 7.75c.5 0 1 .25 1.5.75S5.5 9.25 6 9.25s1-.25 1.5-.75S8.5 7.75 9 7.75s1 .25 1.5.75S11.5 9.25 12 9.25s1-.25 1.5-.75" stroke="var(--anduril-bg-secondary)" stroke-width="1.2" fill="none" stroke-linecap="round"/>
+                    <path d="M3 10.25c.5 0 1 .25 1.5.75S5.5 11.75 6 11.75s1-.25 1.5-.75S8.5 10.25 9 10.25s1 .25 1.5.75S11.5 11.75 12 11.75s1-.25 1.5-.75" stroke="var(--anduril-bg-secondary)" stroke-width="1.2" fill="none" stroke-linecap="round"/>
+                  </svg>
+                  Maritime Counter Intrusion
                   <!-- Icon changed from bi-tsunami -->
-                  <!-- TODO: Replace with custom SVG icon: Shielded ship or coastline defense graphic -->
+                  <!-- TODO: Replace with custom SVG icon: Shielded ship or coastline defense graphic - DONE -->
                 </h5>
                 <div class="card-content-wrapper">
                   <p class="summary">
@@ -1111,9 +1117,9 @@
             <div class="info-card card-air" id="card-barracuda">
               <div class="card-body">
                 <h5>
-                  <i class="bi bi-caret-right-fill"></i> Barracuda / Barracuda-M
+                  <i class="bi bi-rocket"></i> Barracuda / Barracuda-M
                   <!-- Icon changed from bi-fast-forward-fill -->
-                  <!-- TODO: Replace with custom SVG icon: Sleek missile shape -->
+                  <!-- TODO: Replace with custom SVG icon: Sleek missile shape - Replaced with bi-rocket -->
                 </h5>
                 <div class="card-content-wrapper">
                   <p class="summary">
@@ -1865,9 +1871,13 @@
             <div class="info-card card-underwater" id="card-copperhead">
               <div class="card-body">
                 <h5>
-                  <i class="bi bi-hdd-fill"></i> Copperhead / Copperhead-M
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16">
+                    <path d="M8.523 2.985C5.561 2.985 3 4.884 3 7.5c0 2.617 2.561 4.515 5.523 4.515C11.485 12.015 14 10.117 14 7.5c0-2.616-2.515-4.515-5.477-4.515zM4 7.5c0-1.774 1.783-3.215 4.523-3.215C11.263 4.285 13 5.726 13 7.5s-1.737 3.215-4.477 3.215C5.783 10.715 4 9.274 4 7.5z"/>
+                    <path d="M2 6.5h1.5V6H2v.5zm0 1H1V7h1v.5zm0 1H2v.5h1.5V8H2v-.5zm11-2V6h1.5v.5H13zm.5 1.5H13V7h1.5v.5H13V8h.5v-.5z"/>
+                  </svg>
+                  Copperhead / Copperhead-M
                   <!-- Icon changed from bi-vinyl-fill -->
-                  <!-- TODO: Replace with custom SVG icon: Torpedo / UUV munition shape -->
+                  <!-- TODO: Replace with custom SVG icon: Torpedo / UUV munition shape - DONE -->
                 </h5>
                 <div class="card-content-wrapper">
                   <p class="summary">
@@ -1964,9 +1974,15 @@
           <div class="col-lg-4 col-md-6">
             <div class="info-card card-underwater" id="card-dive-ld">
               <div class="card-body">
-                <h5><i class="bi bi-box-arrow-in-down"></i> Dive-LD</h5>
-                <!-- Icon changed from bi-aspect-ratio-fill -->
-                <!-- TODO: Replace with custom SVG icon: AUV/Submarine shape -->
+                <h5>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16">
+                    <path d="M13.5 8c0-1.597-1.163-2.92-2.758-3.341L10.5 4h-5l-.242.659C3.663 5.08 2.5 6.403 2.5 8s1.163 2.92 2.758 3.341L5.5 12h5l.242-.659C12.337 10.92 13.5 9.597 13.5 8zM3.5 8c0-1.115.81-2.071 1.91-.257L5.5 11h5l.09-.257c1.1-.1816 1.91-1.142 1.91-2.243s-.81-2.071-1.91-.257L10.5 5H5.5l-.09.257C4.31 6.071 3.5 6.991 3.5 8z"/>
+                    <path d="M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+                  </svg>
+                  Dive-LD
+                  <!-- Icon changed from bi-aspect-ratio-fill -->
+                  <!-- TODO: Replace with custom SVG icon: AUV/Submarine shape - DONE -->
+                </h5>
                 <div class="card-content-wrapper">
                   <p class="summary">
                     Reliable and flexible Large Displacement AUV for littoral and deep-water (up to 6000m) survey,
@@ -2074,8 +2090,14 @@
           <div class="col-lg-4 col-md-6">
             <div class="info-card card-underwater" id="card-dive-xl">
               <div class="card-body">
-                <h5><i class="bi bi-align-bottom"></i> Dive-XL</h5>
-                <!-- TODO: Replace with custom SVG icon: Larger, more robust AUV/Submarine shape -->
+                <h5>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi" viewBox="0 0 16 16">
+                    <path d="M14.5 7.5C14.5 6.022 13.254 5 11.5 5h-7C2.746 5 1.5 6.022 1.5 7.5v1C1.5 9.978 2.746 11 4.5 11h7c1.754 0 3-1.022 3-2.5v-1zM2.5 7.5c0-.98.879-1.875 2-1.875h7c1.121 0 2 .895 2 1.875v1c0 .98-.879 1.875-2 1.875h-7c-1.121 0-2-.895-2-1.875v-1z"/>
+                    <path d="M7.5 4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5H9V4.5a.5.5 0 0 1-.5-.5h-1a.5.5 0 0 1-.5.5V5h-.5v-.5zM7.5 11v.5h.5V12h1v-.5h.5V11h-2z"/>
+                  </svg>
+                  Dive-XL
+                  <!-- TODO: Replace with custom SVG icon: Larger, more robust AUV/Submarine shape - DONE -->
+                </h5>
                 <div class="card-content-wrapper">
                   <p class="summary">
                     Extra Large AUV (XL-AUV) with highly configurable architecture for multiple large payloads and