vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
zzlgreat
2025-11-05 10:56:56 +08:00
parent 467dad8449
commit fc37df4385
3499 changed files with 1063743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

735
public/htmls/博通交换机.html Normal file
View File

@@ -0,0 +1,735 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>博通交换机概念分析</title>
<link href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
min-height: 100vh;
}
.card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
}
.card-header {
background: rgba(15, 23, 42, 0.5);
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.highlight {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
}
.timeline-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #3b82f6;
position: absolute;
left: -6px;
top: 6px;
}
.timeline-line {
position: absolute;
left: 0;
top: 18px;
bottom: 0;
width: 1px;
background-color: rgba(148, 163, 184, 0.2);
}
.table th {
background-color: rgba(15, 23, 42, 0.7);
color: #94a3b8;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.table td {
border-color: rgba(148, 163, 184, 0.1);
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.badge-blue {
background-color: rgba(59, 130, 246, 0.2);
color: #93c5fd;
}
.badge-purple {
background-color: rgba(139, 92, 246, 0.2);
color: #c4b5fd;
}
.badge-green {
background-color: rgba(16, 185, 129, 0.2);
color: #6ee7b7;
}
.badge-amber {
background-color: rgba(245, 158, 11, 0.2);
color: #fcd34d;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.section-title {
position: relative;
padding-left: 1rem;
margin-bottom: 1.5rem;
}
.section-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
border-radius: 2px;
}
.key-point {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.75rem;
}
.key-point::before {
content: "•";
position: absolute;
left: 0.5rem;
color: #3b82f6;
font-weight: bold;
}
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.card {
margin-bottom: 1rem;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- 标题部分 -->
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold mb-4">
<span class="highlight">博通交换机</span>概念深度分析
</h1>
<p class="text-lg text-slate-400 max-w-3xl mx-auto">
从技术突破到商业化落地，解析博通交换机在AI算力网络中的核心地位与投资价值
</p>
</div>
<!-- 概念事件时间线 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">概念事件时间线</h2>
</div>
<div class="card-body p-6">
<div class="relative pl-8">
<div class="timeline-line"></div>
<div class="relative mb-6">
<div class="timeline-dot"></div>
<div class="mb-2">
<span class="badge badge-blue">2024年6月</span>
</div>
<h3 class="text-lg font-semibold mb-1">博通发布Tomahawk 6（TH6）交换芯片</h3>
<p class="text-slate-400">带宽从51.2Tbps跃升至102.4Tbps，单端口支持1.6T，标志着以太网正式进入1.6T时代</p>
</div>
<div class="relative mb-6">
<div class="timeline-dot"></div>
<div class="mb-2">
<span class="badge badge-blue">2024年12月</span>
</div>
<h3 class="text-lg font-semibold mb-1">TH6已启动交付</h3>
<p class="text-slate-400">首批客户包括谷歌、Meta、微软等头部CSP，预计2025年7月全面上市</p>
</div>
<div class="relative mb-6">
<div class="timeline-dot"></div>
<div class="mb-2">
<span class="badge badge-blue">2025年3月</span>
</div>
<h3 class="text-lg font-semibold mb-1">博通上调AI收入指引</h3>
<p class="text-slate-400">AI收入指引至1400亿美元（2027年），其中网络业务占比30%，TH6成为核心增量</p>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<div class="mb-2">
<span class="badge badge-blue">2025年7月</span>
</div>
<h3 class="text-lg font-semibold mb-1">CPO交换机小批量出货</h3>
<p class="text-slate-400">英伟达CPO交换机出货，博通CPO交换机小批量出货（4万台/年），良率问题待解</p>
</div>
</div>
</div>
</div>
<!-- 核心观点摘要 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">核心观点摘要</h2>
</div>
<div class="card-body p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-slate-800/50 p-5 rounded-lg border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center mr-3">
<i class="fas fa-chart-line text-blue-400"></i>
</div>
<h3 class="text-lg font-semibold">阶段判断</h3>
</div>
<p class="text-slate-400">博通交换机已从"技术验证"进入"商业化落地"阶段，TH6的1.6T升级是AI网络从十万卡迈向百万卡集群的关键基础设施</p>
</div>
<div class="bg-slate-800/50 p-5 rounded-lg border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mr-3">
<i class="fas fa-rocket text-purple-400"></i>
</div>
<h3 class="text-lg font-semibold">核心驱动力</h3>
</div>
<p class="text-slate-400">AI算力需求爆发（百万卡集群）+以太网替代InfiniBand（成本优势）+CPO技术突破（功耗降低70%）</p>
</div>
<div class="bg-slate-800/50 p-5 rounded-lg border border-slate-700/50">
<div class="flex items-center mb-3">
<div class="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center mr-3">
<i class="fas fa-gem text-green-400"></i>
</div>
<h3 class="text-lg font-semibold">未来潜力</h3>
</div>
<p class="text-slate-400">2025-2027年，博通AI网络收入CAGR或超50%，TH6和CPO交换机将贡献主要增量</p>
</div>
</div>
</div>
</div>
<!-- 核心逻辑与市场认知分析 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">核心逻辑与市场认知分析</h2>
</div>
<div class="card-body p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="section-title text-lg font-semibold">核心驱动力</h3>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg">
<h4 class="font-semibold text-blue-400 mb-2">技术突破</h4>
<div class="key-point">TH6芯片：102.4Tbps带宽+1.6T端口，支持两层CLOS架构，减少交换层级，光模块用量下降30%</div>
<div class="key-point">CPO技术：博通Bailly方案集成硅光引擎，功耗降低70%，解决1.6T以上光模块散热瓶颈</div>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<h4 class="font-semibold text-purple-400 mb-2">需求爆发</h4>
<div class="key-point">集群规模：海外数据中心从十万卡向百万卡演进，网络带宽需求指数级增长</div>
<div class="key-point">以太网替代：Meta、微软等CSP转向以太网方案，博通市占率超70%</div>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<h4 class="font-semibold text-green-400 mb-2">成本优势</h4>
<div class="key-point">以太网方案成本较InfiniBand低20%（Spectrum-X vs IB）</div>
</div>
</div>
</div>
<div>
<h3 class="section-title text-lg font-semibold">市场热度与预期差</h3>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg">
<h4 class="font-semibold text-amber-400 mb-2">市场热度</h4>
<div class="key-point">新闻热度：2025年6月TH6交付消息推动博通股价创历史新高</div>
<div class="key-point">研报密集度：2024Q4以来，15篇研报聚焦博通交换机，一致预期2025年为"800G/1.6T元年"</div>
<div class="key-point">情绪分歧：市场对CPO良率（当前50%）和1.6T量产进度存在担忧</div>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg">
<h4 class="font-semibold text-red-400 mb-2">预期差分析</h4>
<div class="key-point">CPO渗透率：市场认为CPO需到2026年才主流，但博通2025年已出货4万台</div>
<div class="key-point">国产替代：盛科通信25.6T芯片测试中，或分流博通中端市场</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 关键催化剂与未来发展路径 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">关键催化剂与未来发展路径</h2>
</div>
<div class="card-body p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="section-title text-lg font-semibold">近期催化剂（3-6个月）</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-bolt text-blue-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">TH6规模出货</h4>
<p class="text-slate-400 text-sm">2025年7月全面上市，验证百万卡集群需求</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-cogs text-purple-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">CPO良率提升</h4>
<p class="text-slate-400 text-sm">台积电罗博特科设备订单显示，2025年CPO产能可达10万台</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-handshake text-green-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">Meta/字节订单落地</h4>
<p class="text-slate-400 text-sm">Meta第三代MTIA和字节XPU集群或追加TH6订单</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="section-title text-lg font-semibold">长期路径（2025-2027）</h3>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-blue-500">
<h4 class="font-semibold mb-1">2025年</h4>
<p class="text-slate-400 text-sm">800G交换机放量，TH6渗透率10%-20%</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-purple-500">
<h4 class="font-semibold mb-1">2026年</h4>
<p class="text-slate-400 text-sm">CPO成为主流，1.6T端口占比超50%</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-green-500">
<h4 class="font-semibold mb-1">2027年</h4>
<p class="text-slate-400 text-sm">博通AI网络收入达420亿美元（1400亿×30%），以太网份额超80%</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 产业链与核心公司深度剖析 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">产业链与核心公司深度剖析</h2>
</div>
<div class="card-body p-6">
<div class="mb-6">
<h3 class="section-title text-lg font-semibold">产业链图谱</h3>
<div class="flex flex-wrap justify-center gap-4 mt-4">
<div class="bg-slate-800/50 px-4 py-2 rounded-lg border border-slate-700/50">
<span class="text-blue-400 font-semibold">上游：</span>
<span class="text-slate-300">博通（芯片）、罗博特科（CPO设备）、天孚通信（光引擎）</span>
</div>
<div class="bg-slate-800/50 px-4 py-2 rounded-lg border border-slate-700/50">
<span class="text-purple-400 font-semibold">中游：</span>
<span class="text-slate-300">锐捷网络（白盒交换机）、菲菱科思（ODM代工）</span>
</div>
<div class="bg-slate-800/50 px-4 py-2 rounded-lg border border-slate-700/50">
<span class="text-green-400 font-semibold">下游：</span>
<span class="text-slate-300">谷歌、Meta、微软（CSP）</span>
</div>
</div>
</div>
<div>
<h3 class="section-title text-lg font-semibold">核心玩家对比</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>公司</th>
<th>角色</th>
<th>优势</th>
<th>风险</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-semibold text-blue-400">博通</td>
<td>芯片龙头</td>
<td>TH6技术领先，客户绑定深</td>
<td>依赖台积电产能</td>
</tr>
<tr>
<td class="font-semibold text-purple-400">锐捷网络</td>
<td>白盒交换机</td>
<td>字节/腾讯核心供应商，400G份额第一</td>
<td>毛利率仅25%（vs Arista 60%）</td>
</tr>
<tr>
<td class="font-semibold text-green-400">盛科通信</td>
<td>国产替代</td>
<td>25.6T芯片测试中，政策扶持</td>
<td>技术落后博通1-2代</td>
</tr>
<tr>
<td class="font-semibold text-amber-400">罗博特科</td>
<td>CPO设备</td>
<td>台积电唯一供应商，订单饱满</td>
<td>产能瓶颈</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 潜在风险与挑战 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">潜在风险与挑战</h2>
</div>
<div class="card-body p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-red-500">
<h3 class="font-semibold mb-2">技术风险</h3>
<p class="text-slate-400">CPO良率低于80%时成本过高</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-amber-500">
<h3 class="font-semibold mb-2">商业化风险</h3>
<p class="text-slate-400">1.6T光模块量产进度或低于预期</p>
</div>
</div>
<div class="space-y-4">
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-purple-500">
<h3 class="font-semibold mb-2">竞争风险</h3>
<p class="text-slate-400">英伟达NVLink Fusion开放授权，威胁以太网份额</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border-l-4 border-blue-500">
<h3 class="font-semibold mb-2">信息矛盾</h3>
<p class="text-slate-400">新闻称TH6"超预期"，但专家指出2025年出货量仍小；国产替代进度：盛科25.6T芯片测试 vs 博通技术领先2年</p>
</div>
</div>
</div>
</div>
</div>
<!-- 综合结论与投资启示 -->
<div class="card rounded-xl shadow-lg mb-8 overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">综合结论与投资启示</h2>
</div>
<div class="card-body p-6">
<div class="mb-6">
<h3 class="section-title text-lg font-semibold">阶段判断</h3>
<p class="text-slate-400">从主题炒作（2024年概念期）进入基本面驱动（2025年订单落地）</p>
</div>
<div class="mb-6">
<h3 class="section-title text-lg font-semibold">投资方向</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700/50">
<h4 class="font-semibold text-blue-400 mb-2">最纯标的</h4>
<p class="text-slate-400">博通（AVGO）——直接受益于TH6和CPO放量</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700/50">
<h4 class="font-semibold text-purple-400 mb-2">弹性标的</h4>
<p class="text-slate-400">锐捷网络（301165）——字节/腾讯订单驱动，但需跟踪毛利率</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700/50">
<h4 class="font-semibold text-green-400 mb-2">设备环节</h4>
<p class="text-slate-400">罗博特科（CPO设备稀缺性）</p>
</div>
</div>
</div>
<div>
<h3 class="section-title text-lg font-semibold">关键跟踪指标</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-chart-bar text-blue-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">TH6出货量</h4>
<p class="text-slate-400 text-sm">2025年Q3财报验证百万卡集群需求</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-percentage text-purple-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">CPO良率</h4>
<p class="text-slate-400 text-sm">台积电罗博特科设备订单是否达80%以上</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-sync-alt text-green-400 text-sm"></i>
</div>
<div>
<h4 class="font-semibold mb-1">国产替代</h4>
<p class="text-slate-400 text-sm">盛科25.6T芯片是否通过华为/新华三验证</p>
</div>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg border border-slate-700/50">
<p class="text-center font-semibold text-lg">
博通交换机是AI算力网络的"卖铲人"，短期看TH6订单，长期看CPO技术垄断。需警惕国产替代和英伟达生态反扑。
</p>
</div>
</div>
</div>
<!-- 关联股票数据表格 -->
<div class="card rounded-xl shadow-lg overflow-hidden">
<div class="card-header px-6 py-4">
<h2 class="text-xl font-bold text-white">关联股票数据</h2>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table w-full">
<thead>
<tr>
<th>股票名称</th>
<th>行业</th>
<th>项目</th>
<th>产业链/具体</th>
<th>来源</th>
<th>关联原因</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-semibold">罗博特科</td>
<td><span class="badge badge-blue">CPO</span></td>
<td>封装设备</td>
<td>参股公司ficonTEC主要客户包括英特尔、思科、博通、Nvidia等</td>
<td><span class="badge badge-green">互动</span></td>
<td>公司通过参股公司间接服务博通等核心客户</td>
</tr>
<tr>
<td class="font-semibold">天孚通信</td>
<td><span class="badge badge-blue">CPO</span></td>
<td>光引擎</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">太辰光</td>
<td><span class="badge badge-blue">CPO</span></td>
<td>光连接</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">新易盛</td>
<td><span class="badge badge-blue">CPO</span></td>
<td>光模块</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">中际旭创</td>
<td><span class="badge badge-blue">CPO</span></td>
<td>光模块</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">胜宏科技</td>
<td><span class="badge badge-purple">PCB供货</span></td>
<td>-</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">生益电子</td>
<td><span class="badge badge-purple">PCB供货</span></td>
<td>-</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">沪电股份</td>
<td><span class="badge badge-purple">PCB供货</span></td>
<td>-</td>
<td>-</td>
<td><span class="badge badge-amber">网传信息</span></td>
<td>市场传闻涉及博通供应链合作</td>
</tr>
<tr>
<td class="font-semibold">一博科技</td>
<td><span class="badge badge-purple">PCB供货</span></td>
<td>-</td>
<td>已与上述客户建立合作关系</td>
<td><span class="badge badge-green">互动</span></td>
<td>公司官方确认与博通等客户存在合作</td>
</tr>
<tr>
<td class="font-semibold">菲菱科思</td>
<td><span class="badge badge-green">其他博通合作</span></td>
<td>-</td>
<td>迭代数据中心交换机至12.8T，开发基于博通芯片3.2T/2.0T产品</td>
<td><span class="badge badge-green">公告</span></td>
<td>公司公告披露与博通芯片合作项目</td>
</tr>
<tr>
<td class="font-semibold">锐捷网络</td>
<td><span class="badge badge-green">其他博通合作</span></td>
<td>-</td>
<td>进口交换机芯片主要用于数据中心交换机，如博通TH系列芯片</td>
<td><span class="badge badge-green">互动</span></td>
<td>公司官方披露使用博通芯片情况</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
<script>
tsParticles.load("particles-js", {
particles: {
number: {
value: 30,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#3b82f6"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#3b82f6",
opacity: 0.2,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 0.5
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
</script>
</body>
</html>
```