<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450">
<defs>
<style>
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.terminal-bg { fill: #0d1117; }
.terminal-header { fill: #161b22; }
.title-bar { fill: #8b949e; font-family: 'SF Mono', Monaco, monospace; font-size: 12px; }
.prompt { fill: #f0b90b; font-family: 'SF Mono', Monaco, monospace; font-size: 14px; font-weight: bold; }
.command { fill: #e6edf3; font-family: 'SF Mono', Monaco, monospace; font-size: 14px; }
.response { fill: #8b949e; font-family: 'SF Mono', Monaco, monospace; font-size: 13px; }
.highlight { fill: #f0b90b; }
.success { fill: #3fb950; }
.info { fill: #58a6ff; }
.warning { fill: #d29922; }
.amount { fill: #a371f7; font-weight: bold; }
.cursor { fill: #f0b90b; animation: blink 1s step-end infinite; }
.bnb-logo { animation: pulse 2s ease-in-out infinite; }
.line1 { animation: fadeIn 0.5s ease-out 0.3s both; }
.line2 { animation: fadeIn 0.5s ease-out 1s both; }
.line3 { animation: fadeIn 0.5s ease-out 1.5s both; }
.line4 { animation: fadeIn 0.5s ease-out 2s both; }
.line5 { animation: fadeIn 0.5s ease-out 2.5s both; }
.line6 { animation: fadeIn 0.5s ease-out 3s both; }
.line7 { animation: fadeIn 0.5s ease-out 4s both; }
.line8 { animation: fadeIn 0.5s ease-out 4.5s both; }
.line9 { animation: fadeIn 0.5s ease-out 5s both; }
.line10 { animation: fadeIn 0.5s ease-out 5.5s both; }
.line11 { animation: fadeIn 0.5s ease-out 6s both; }
.line12 { animation: fadeIn 0.5s ease-out 6.5s both; }
.line13 { animation: fadeIn 0.5s ease-out 7s both; }
</style>
</defs>
<!-- Terminal Window -->
<rect class="terminal-bg" x="0" y="0" width="800" height="450" rx="12"/>
<!-- Terminal Header -->
<rect class="terminal-header" x="0" y="0" width="800" height="40" rx="12"/>
<rect class="terminal-bg" x="0" y="28" width="800" height="15"/>
<!-- Window Controls -->
<circle cx="20" cy="20" r="7" fill="#ff5f56"/>
<circle cx="44" cy="20" r="7" fill="#ffbd2e"/>
<circle cx="68" cy="20" r="7" fill="#27c93f"/>
<!-- BNB Logo in header -->
<g class="bnb-logo" transform="translate(750, 12)">
<circle cx="0" cy="8" r="12" fill="#f0b90b" opacity="0.2"/>
<text x="0" y="13" text-anchor="middle" fill="#f0b90b" font-size="14" font-weight="bold">₿</text>
</g>
<!-- Title -->
<text class="title-bar" x="400" y="25" text-anchor="middle">🔗 BNB Chain MCP — DeFi Tools Demo</text>
<!-- Terminal Content -->
<g transform="translate(25, 60)">
<!-- Prompt 1: Swap Quote -->
<g class="line1">
<text class="prompt" x="0" y="0">bnb-mcp ❯</text>
<text class="command" x="90" y="0">Get swap quote: 1 BNB → CAKE on PancakeSwap</text>
</g>
<!-- Response 1 -->
<g class="line2">
<text class="info" x="0" y="28">⚡ Fetching quote from PancakeSwap V3...</text>
</g>
<g class="line3">
<text class="response" x="0" y="56">┌─────────────────────────────────────────────┐</text>
</g>
<g class="line4">
<text class="response" x="0" y="80">│ 🔄 Swap Quote │</text>
</g>
<g class="line5">
<text class="response" x="0" y="104">│ </text>
<text class="highlight" x="25" y="104">1 BNB</text>
<text class="response" x="75" y="104"> → </text>
<text class="amount" x="100" y="104">245.67 CAKE</text>
<text class="response" x="215" y="104"> │</text>
</g>
<g class="line6">
<text class="response" x="0" y="128">│ Price Impact: </text>
<text class="success" x="115" y="128">0.12%</text>
<text class="response" x="165" y="128"> Gas: </text>
<text class="warning" x="210" y="128">~$0.08</text>
<text class="response" x="275" y="128"> │</text>
</g>
<g class="line7">
<text class="response" x="0" y="152">└─────────────────────────────────────────────┘</text>
</g>
<!-- Prompt 2: TVL Check -->
<g class="line8">
<text class="prompt" x="0" y="195">bnb-mcp ❯</text>
<text class="command" x="90" y="195">Show top DeFi protocols on BNB Chain by TVL</text>
</g>
<!-- Response 2 -->
<g class="line9">
<text class="info" x="0" y="223">📊 Fetching from DefiLlama...</text>
</g>
<g class="line10">
<text class="response" x="0" y="251">┌────────────────────┬────────────────┐</text>
</g>
<g class="line11">
<text class="response" x="0" y="275">│ Protocol │ TVL │</text>
</g>
<g class="line12">
<text class="response" x="0" y="299">├────────────────────┼────────────────┤</text>
<text class="highlight" x="5" y="323">│ 🥞 PancakeSwap │</text>
<text class="amount" x="172" y="323">$2.1B</text>
<text class="response" x="230" y="323"> │</text>
</g>
<g class="line13">
<text class="success" x="5" y="347">│ 🌙 Venus Protocol │</text>
<text class="amount" x="172" y="347">$1.4B</text>
<text class="response" x="230" y="347"> │</text>
<text class="info" x="5" y="371">│ 🔷 Alpaca Finance │</text>
<text class="amount" x="172" y="371">$312M</text>
<text class="response" x="230" y="371"> │</text>
<text class="response" x="0" y="395">└────────────────────┴────────────────┘</text>
</g>
</g>
<!-- Blinking Cursor -->
<rect class="cursor" x="25" y="420" width="12" height="3" rx="1"/>
</svg>
