evigraph_slide_widget.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EviGraph Slide Widget</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&family=Outfit:wght@600;700;800;900&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: transparent;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1700px;
    height: 1200px;
    overflow: hidden;
  }
  .widget-card {
    width: 1700px;
    height: 1200px;
    background: #FFFFFF;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
  }
  .grid-pattern {
    position: absolute;
    inset: 0;
    background-image: 
      radial-gradient(circle at 1px 1px, rgba(30, 58, 138, 0.07) 1.5px, transparent 0),
      linear-gradient(to right, rgba(30, 58, 138, 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(30, 58, 138, 0.03) 1px, transparent 1px);
    background-size: 28px 28px, 56px 56px, 56px 56px;
    pointer-events: none;
  }
  svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
</head>
<body>
<div class="widget-card">
  <div class="grid-pattern"></div>

  <svg viewBox="0 0 1700 1200" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- Drop Shadows -->
      <filter id="shadow-card" x="-15%" y="-15%" width="130%" height="130%">
        <feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#0F172A" flood-opacity="0.10"/>
      </filter>
      <filter id="shadow-core" x="-25%" y="-25%" width="150%" height="150%">
        <feDropShadow dx="0" dy="10" stdDeviation="16" flood-color="#1E3A8A" flood-opacity="0.30"/>
      </filter>

      <!-- Gradients -->
      <linearGradient id="core-grad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#1E3A8A" />
        <stop offset="60%" stop-color="#0F172A" />
        <stop offset="100%" stop-color="#020617" />
      </linearGradient>

      <!-- Arrow Markers -->
      <marker id="m-blue" viewBox="0 0 12 12" refX="8" refY="6" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 1 2 L 10 6 L 1 10 z" fill="#2563EB" />
      </marker>
      <marker id="m-red" viewBox="0 0 12 12" refX="8" refY="6" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 1 2 L 10 6 L 1 10 z" fill="#E11D48" />
      </marker>
      <marker id="m-green" viewBox="0 0 12 12" refX="8" refY="6" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 1 2 L 10 6 L 1 10 z" fill="#059669" />
      </marker>
    </defs>

    <!-- Top Badge Header -->
    <g transform="translate(850, 52)">
      <rect x="-340" y="-24" width="680" height="48" rx="24" fill="#EFF6FF" stroke="#3B82F6" stroke-width="2"/>
      <text y="7" text-anchor="middle" font-family="'Outfit', sans-serif" font-weight="900" font-size="22" fill="#1E3A8A" letter-spacing="1">
        EviGraph: MULTI-SOURCE INTELLIGENCE FUSION
      </text>
    </g>

    <!-- Center Coordinate: CX=850, CY=620 -->
    <!-- Orbit Rings -->
    <circle cx="850" cy="620" r="440" fill="none" stroke="#CBD5E1" stroke-width="2" stroke-dasharray="8 6"/>
    <circle cx="850" cy="620" r="310" fill="none" stroke="#94A3B8" stroke-width="1.5" stroke-dasharray="6 4" opacity="0.7"/>

    <!-- Cross-Source Warning Connectors -->
    <!-- CCTV (Top) to RTO (Top-Left) -->
    <path d="M 720 255 Q 560 275 510 375" fill="none" stroke="#E11D48" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#m-red)"/>
    <g transform="translate(615, 295)">
      <rect x="-105" y="-14" width="210" height="28" rx="14" fill="#FFF1F2" stroke="#E11D48" stroke-width="1.5"/>
      <text y="5" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="800" font-size="11" fill="#BE123C">
        ⚠️ Plate Mismatch Alert
      </text>
    </g>

    <!-- Telecom (Top-Right) to Banking (Bottom-Right) -->
    <path d="M 1290 470 Q 1380 620 1290 770" fill="none" stroke="#059669" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#m-green)"/>
    <g transform="translate(1365, 620)">
      <rect x="-105" y="-14" width="210" height="28" rx="14" fill="#ECFDF5" stroke="#059669" stroke-width="1.5"/>
      <text y="5" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="800" font-size="11" fill="#047857">
        🔗 Mule Account &amp; SIM Link
      </text>
    </g>

    <!-- GPS (Bottom-Left) to FIR (Bottom) -->
    <path d="M 540 880 Q 670 990 730 1000" fill="none" stroke="#2563EB" stroke-width="3" stroke-dasharray="6 4" marker-end="url(#m-blue)"/>
    <g transform="translate(620, 975)">
      <rect x="-105" y="-14" width="210" height="28" rx="14" fill="#EFF6FF" stroke="#2563EB" stroke-width="1.5"/>
      <text y="5" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="800" font-size="11" fill="#1D4ED8">
        📍 Crime Dwell Correlation
      </text>
    </g>

    <!-- Radial Spokes into Hub -->
    <g stroke-linecap="round">
      <line x1="850" y1="310" x2="850" y2="470" stroke="#0284C7" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="850" cy="390" r="6" fill="#0284C7"/>

      <line x1="1130" y1="460" x2="985" y2="545" stroke="#059669" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="1060" cy="502" r="6" fill="#059669"/>

      <line x1="1130" y1="780" x2="985" y2="695" stroke="#D97706" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="1060" cy="738" r="6" fill="#D97706"/>

      <line x1="850" y1="930" x2="850" y2="770" stroke="#7C3AED" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="850" cy="850" r="6" fill="#7C3AED"/>

      <line x1="570" y1="780" x2="715" y2="695" stroke="#2563EB" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="640" cy="738" r="6" fill="#2563EB"/>

      <line x1="570" y1="460" x2="715" y2="545" stroke="#E11D48" stroke-width="4" stroke-dasharray="8 5"/>
      <circle cx="640" cy="502" r="6" fill="#E11D48"/>
    </g>

    <!-- ==================== CENTRAL HUB ==================== -->
    <g transform="translate(850, 620)" filter="url(#shadow-core)">
      <circle cx="0" cy="0" r="150" fill="none" stroke="#93C5FD" stroke-width="6" stroke-dasharray="12 8"/>
      <circle cx="0" cy="0" r="135" fill="none" stroke="#2563EB" stroke-width="3" />
      <circle cx="0" cy="0" r="120" fill="url(#core-grad)" stroke="#60A5FA" stroke-width="3" />

      <!-- Center Logo & Branding -->
      <g transform="translate(0, -60)">
        <polygon points="0,-18 16,-8 16,10 0,18 -16,10 -16,-8" fill="#2563EB" stroke="#93C5FD" stroke-width="2"/>
        <path d="M -6 -1 L -1 5 L 7 -4" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      </g>

      <text y="-14" text-anchor="middle" font-family="'Outfit', sans-serif" font-weight="900" font-size="34" fill="#FFFFFF" letter-spacing="1">
        EviGraph
      </text>
      <text y="9" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="800" font-size="13" fill="#38BDF8" letter-spacing="1.5">
        KNOWLEDGE GRAPH
      </text>
      <text y="28" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="11" fill="#94A3B8">
        [NEURO-SYMBOLIC CORE]
      </text>

      <line x1="-80" y1="42" x2="80" y2="42" stroke="rgba(255, 255, 255, 0.25)" stroke-width="1"/>

      <g transform="translate(0, 62)">
        <rect x="-95" y="-11" width="190" height="22" rx="11" fill="#0F172A" stroke="#3B82F6" stroke-width="1"/>
        <text y="4" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="700" font-size="11" fill="#FFFFFF">
          ⚡ Multi-Hop &lt;100ms
        </text>
      </g>
      <g transform="translate(0, 89)">
        <rect x="-95" y="-11" width="190" height="22" rx="11" fill="#0F172A" stroke="#10B981" stroke-width="1"/>
        <text y="4" text-anchor="middle" font-family="'Inter', sans-serif" font-weight="700" font-size="11" fill="#FFFFFF">
          🛡️ Sec 65B Audit Trail
        </text>
      </g>
    </g>

    <!-- ==================== 6 SATELLITE CARDS (FULL WIDTH, NO CLIPPING) ==================== -->

    <!-- 1. TOP: CCTV & ANPR (850, 215) -->
    <g transform="translate(850, 215)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#0284C7" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#0284C7"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        📹 CCTV &amp; ANPR Vision
      </text>
      <rect x="58" y="-32" width="112" height="20" rx="10" fill="#E0F2FE" stroke="#0284C7" stroke-width="1"/>
      <text x="114" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#0369A1">
        YOLOv8 + OCR
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Real-time Indian plate parsing (36 States)
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Vehicle re-ID &amp; video surveillance OCR
      </text>
    </g>

    <!-- 2. TOP-RIGHT: TELECOM (1330, 420) -->
    <g transform="translate(1330, 420)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#059669" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#059669"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        📱 Telecom CDR &amp; IPDR
      </text>
      <rect x="62" y="-32" width="108" height="20" rx="10" fill="#D1FAE5" stroke="#059669" stroke-width="1"/>
      <text x="116" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#047857">
        Call Bursts
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Burner SIM &amp; cloned IMEI/IMSI pairs
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Call burst spikes &amp; night frequency
      </text>
    </g>

    <!-- 3. BOTTOM-RIGHT: BANKING (1330, 820) -->
    <g transform="translate(1330, 820)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#D97706" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#D97706"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        🏦 Bank &amp; Hawala Flows
      </text>
      <rect x="68" y="-32" width="102" height="20" rx="10" fill="#FEF3C7" stroke="#D97706" stroke-width="1"/>
      <text x="119" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#B45309">
        Mule Rings
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Rapid smurfing transfers (&lt;₹50,000)
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Shell co &amp; cooperative mule funnels
      </text>
    </g>

    <!-- 4. BOTTOM: FIR & LEGAL (850, 1025) -->
    <g transform="translate(850, 1025)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#7C3AED" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#7C3AED"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        ⚖️ Police FIRs &amp; Legal NLP
      </text>
      <rect x="60" y="-32" width="110" height="20" rx="10" fill="#F3E8FF" stroke="#7C3AED" stroke-width="1"/>
      <text x="115" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#6D28D9">
        Sec 65B Audit
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • IPC/BNS statutory section extraction
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Section 65B digital evidence chain
      </text>
    </g>

    <!-- 5. BOTTOM-LEFT: GPS (370, 820) -->
    <g transform="translate(370, 820)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#2563EB" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#2563EB"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        📍 GPS &amp; Mobility Dwells
      </text>
      <rect x="62" y="-32" width="108" height="20" rx="10" fill="#EFF6FF" stroke="#2563EB" stroke-width="1"/>
      <text x="116" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#1D4ED8">
        Co-Presence
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Cell tower sector dwell trajectories
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • 15-minute rendezvous proximity buffer
      </text>
    </g>

    <!-- 6. TOP-LEFT: VAHAN RTO (370, 420) -->
    <g transform="translate(370, 420)" filter="url(#shadow-card)">
      <rect x="-195" y="-72" width="390" height="144" rx="16" fill="#FFFFFF" stroke="#E11D48" stroke-width="2.5"/>
      <path d="M -195 -56 Q -195 -72 -179 -72 L 179 -72 Q 195 -72 195 -56 L 195 -50 L -195 -50 Z" fill="#E11D48"/>
      <text x="-170" y="-18" font-family="'Outfit', sans-serif" font-weight="800" font-size="20" fill="#0F172A">
        🚗 Vahan RTO Registry
      </text>
      <rect x="62" y="-32" width="108" height="20" rx="10" fill="#FFF1F2" stroke="#E11D48" stroke-width="1"/>
      <text x="116" y="-18" text-anchor="middle" font-family="'JetBrains Mono', monospace" font-weight="700" font-size="10" fill="#BE123C">
        RTO Registry
      </text>
      <text x="-170" y="14" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Vehicle identity &amp; engine cross-check
      </text>
      <text x="-170" y="37" font-family="'Inter', sans-serif" font-weight="600" font-size="13.5" fill="#1E293B">
        • Cloned plate &amp; stolen vehicle alerts
      </text>
    </g>

    <!-- Bottom Highlights -->
    <g transform="translate(850, 1165)">
      <text text-anchor="middle" font-family="'Inter', sans-serif" font-weight="800" font-size="14" fill="#64748B" letter-spacing="1">
        ✦ NEURO-SYMBOLIC GRAPH ENGINE &nbsp;·&nbsp; ✦ CROSS-SOURCE CONTRADICTION CHECK &nbsp;·&nbsp; ✦ COURT-ADMISSIBLE SEC 65B
      </text>
    </g>

  </svg>
</div>
</body>
</html>