Browse Source

feat(ui): add brand logo to topnav left side

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
chiappa 1 tuần trước cách đây
mục cha
commit
65c974f268
3 tập tin đã thay đổi với 49 bổ sung1 xóa
  1. 1 0
      .gitignore
  2. 44 0
      ui/public/assets/logo.svg
  3. 4 1
      ui/resources/views/partials/topnav.twig

+ 1 - 0
.gitignore

@@ -7,6 +7,7 @@ public/assets/
 api/public/assets/
 ui/public/assets/*
 !ui/public/assets/.gitkeep
+!ui/public/assets/logo.svg
 
 # Environment
 .env

+ 44 - 0
ui/public/assets/logo.svg

@@ -0,0 +1,44 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="none">
+  <defs>
+    <radialGradient id="s1g-core" cx="50%" cy="45%" r="55%">
+      <stop offset="0%" stop-color="#6ee7b7"/>
+      <stop offset="55%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#054c3c"/>
+    </radialGradient>
+    <radialGradient id="s1g-halo" cx="50%" cy="50%" r="50%">
+      <stop offset="40%" stop-color="#10b981" stop-opacity="0.20"/>
+      <stop offset="100%" stop-color="#10b981" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="s1g-dot" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#34d399"/>
+      <stop offset="100%" stop-color="#059669"/>
+    </linearGradient>
+  </defs>
+
+  <circle cx="50" cy="50" r="48" fill="url(#s1g-halo)"/>
+
+  <g fill="url(#s1g-dot)">
+    <polygon points="50,8.8 53.2,10.4 53.2,13.6 50,15.2 46.8,13.6 46.8,10.4" opacity="1"/>
+    <polygon points="69,14.1 71.8,15.5 71.8,18.7 69,20.1 66.2,18.7 66.2,15.5" opacity="0.85"/>
+    <polygon points="83,28 85.4,29.2 85.4,32 83,33.2 80.6,32 80.6,29.2" opacity="0.65"/>
+    <polygon points="88,48 90,49.2 90,51.8 88,53 86,51.8 86,49.2" opacity="0.45"/>
+    <polygon points="83,66 85.4,67.4 85.4,70.6 83,72 80.6,70.6 80.6,67.4" opacity="0.35"/>
+    <polygon points="69,79.9 71.8,81.3 71.8,84.5 69,85.9 66.2,84.5 66.2,81.3" opacity="0.3"/>
+    <polygon points="50,84.8 53.2,86.4 53.2,89.6 50,91.2 46.8,89.6 46.8,86.4" opacity="0.32"/>
+    <polygon points="31,79.9 33.8,81.3 33.8,84.5 31,85.9 28.2,84.5 28.2,81.3" opacity="0.4"/>
+    <polygon points="17,66 19.4,67.4 19.4,70.6 17,72 14.6,70.6 14.6,67.4" opacity="0.55"/>
+    <polygon points="12,48 14,49.2 14,51.8 12,53 10,51.8 10,49.2" opacity="0.7"/>
+    <polygon points="17,28 19.4,29.2 19.4,32 17,33.2 14.6,32 14.6,29.2" opacity="0.85"/>
+    <polygon points="31,14.1 33.8,15.5 33.8,18.7 31,20.1 28.2,18.7 28.2,15.5" opacity="0.95"/>
+  </g>
+
+  <g stroke="#10b981" stroke-width="0.6" fill="none" stroke-linecap="round" opacity="0.5">
+    <path d="M50 12 L50 36"/>
+    <path d="M31 17.1 L42 38"/>
+    <path d="M69 17.1 L58 38"/>
+  </g>
+
+  <circle cx="50" cy="50" r="15" fill="url(#s1g-core)"/>
+  <circle cx="50" cy="50" r="6.5" fill="#054c3c"/>
+  <circle cx="52.5" cy="47.5" r="2.2" fill="#d1fae5" opacity="0.95"/>
+</svg>

+ 4 - 1
ui/resources/views/partials/topnav.twig

@@ -1,7 +1,10 @@
 <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
     <div class="flex h-16 items-center justify-between gap-4 px-6">
         <div class="flex items-center gap-3">
-            <a href="/app/me" class="font-mono text-lg font-semibold tracking-tight">IRDB</a>
+            <a href="/app/me" class="flex items-center gap-2 font-mono text-lg font-semibold tracking-tight">
+                <img src="/assets/logo.svg" alt="" aria-hidden="true" class="h-8 w-8" />
+                <span>IRDB</span>
+            </a>
             <span class="hidden text-xs text-slate-500 md:inline">IP Reputation Database</span>
         </div>
         <div class="flex flex-1 items-center justify-end gap-3">