Spaces:

capta1n
/

landingpage4-0

Running

App Files Files Community

landingpage4-0 / index.html

capta1n

Add 3 files

2341c07 verified 9 months ago

raw

history blame contribute delete

77.4 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI SDL 数字孪生仪表盘</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
	}

	@keyframes pulse {
	0% { opacity: 0.7; }
	50% { opacity: 1; }
	100% { opacity: 0.7; }
	}

	@keyframes pulse-glow {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
	}

	@keyframes data-flow {
	0% { stroke-dashoffset: 100; }
	100% { stroke-dashoffset: 0; }
	}

	@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	@keyframes scanning {
	0% { transform: translateX(-100%) rotate(45deg); }
	100% { transform: translateX(100%) rotate(45deg); }
	}

	@keyframes flicker {
	0% { opacity: 0.5; }
	50% { opacity: 1; }
	100% { opacity: 0.5; }
	}

	.floating {
	animation: float 3s ease-in-out infinite;
	}

	.pulse {
	animation: pulse 2s ease-in-out infinite;
	}

	.pulse-glow {
	animation: pulse-glow 1.5s infinite;
	}

	.data-flow {
	stroke-dasharray: 10;
	animation: data-flow 2s linear infinite;
	}

	.rotate {
	animation: rotate 2s linear infinite;
	}

	.scanning {
	position: relative;
	overflow: hidden;
	}

	.scanning::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
	to bottom,
	rgba(16, 185, 129, 0.1) 0%,
	rgba(16, 185, 129, 0.3) 50%,
	rgba(16, 185, 129, 0.1) 100%
	);
	transform: rotate(45deg);
	animation: scanning 3s linear infinite;
	}

	.flicker {
	animation: flicker 1.5s ease-in-out infinite alternate;
	}

	.code-block {
	font-family: 'Courier New', monospace;
	background-color: #1e293b;
	color: #f8fafc;
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	}

	.vulnerability-line {
	background-color: #7f1d1d;
	padding: 0.2rem;
	border-radius: 0.2rem;
	}

	.threat-model {
	background-color: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	padding: 1rem;
	position: relative;
	}

	.risk-tag {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	}

	.progress-ring__circle {
	transition: stroke-dashoffset 0.5s;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	}

	.highlight-box {
	position: relative;
	border-left: 4px solid;
	padding-left: 1rem;
	margin-bottom: 1rem;
	}

	.highlight-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 0.25rem;
	z-index: -1;
	}

	.circular-node {
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: all 0.3s ease;
	}

	.circular-node:hover {
	transform: scale(1.1);
	z-index: 10;
	}

	.stats-card {
	transition: all 0.3s ease;
	position: relative;
	}

	.stats-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}

	.stats-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: #10b981;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.stats-card:hover::before {
	opacity: 1;
	}

	.active-scan {
	position: relative;
	}

	.active-s scan::after {
	content: "分析中...";
	position: absolute;
	bottom: -20px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0.75rem;
	color: #10b981;
	font-weight: 600;
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<!-- 导航栏 -->
	<nav class="bg-green-800 text-white shadow-lg">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-16 items-center">
	<div class="flex items-center">
	<div class="flex-shrink-0 flex items-center">
	<i class="fas fa-robot text-2xl mr-2"></i>
	<span class="text-xl font-bold">AI SDL 数字孪生</span>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="bg-green-700 px-3 py-2 rounded-md text-sm font-medium">仪表盘</a>
	<a href="#alerts" class="text-green-200 hover:bg-green-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">风险警报</a>
	<a href="#projects" class="text-green-200 hover:bg-green-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">风险项目</a>
	</div>
	</div>
	</div>
	</div>
	</nav>

	<!-- 主内容区 -->
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
	<!-- 仪表盘区域 -->
	<section id="dashboard">
	<div class="mb-8">
	<h1 class="text-3xl font-bold text-gray-900">安全风险仪表盘</h1>
	<p class="mt-2 text-gray-600">所有项目的安全风险综合视图</p>
	</div>

	<div class="flex flex-col lg:flex-row gap-8">
	<!-- 左侧栏 - 统计和可视化 -->
	<div class="lg:w-2/3">
	<!-- 实时统计面板 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 scanning">
	<div class="p-6">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-xl font-bold text-gray-900">实时分析仪表盘</h2>
	<div class="flex items-center">
	<div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
	<span class="text-sm font-medium text-green-600">正在扫描</span>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
	<div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
	<i class="fas fa-file-alt"></i>
	</div>
	<div>
	<h4 class="text-sm font-medium text-gray-700">需求分析</h4>
	<p class="text-xl font-bold text-gray-900 flicker">24</p>
	<p class="text-xs text-gray-500">发现2个威胁</p>
	</div>
	</div>
	</div>

	<div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
	<i class="fas fa-code"></i>
	</div>
	<div>
	<h4 class="text-sm font-medium text-gray-700">代码扫描</h4>
	<p class="text-xl font-bold text-gray-900 flicker">120,842 <span class="text-sm">行</span></p>
	<p class="text-xs text-gray-500">1个严重漏洞</p>
	</div>
	</div>
	</div>

	<div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
	<i class="fas fa-shield-alt"></i>
	</div>
	<div>
	<h4 class="text-sm font-medium text-gray-700">测试完成</h4>
	<p class="text-xl font-bold text-gray-900 flicker">18/42</p>
	<p class="text-xs text-gray-500">发现1个中等风险</p>
	</div>
	</div>
	</div>

	<div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
	<i class="fas fa-rocket"></i>
	</div>
	<div>
	<h4 class="text-sm font-medium text-gray-700">发布验证</h4>
	<p class="text-xl font-bold text-gray-900 flicker">3</p>
	<p class="text-xs text-gray-500">所有检查通过</p>
	</div>
	</div>
	</div>

	<div class="stats-card bg-gray-50 p-4 rounded-lg active-scan">
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-10 w-10 flex items-center justify-center text-green-600 mr-3 flicker">
	<i class="fas fa-server"></i>
	</div>
	<div>
	<h4 class="text-sm font-medium text-gray-700">生产服务</h4>
	<p class="text-xl font-bold text-gray-900 flicker">5</p>
	<p class="text-xs text-gray-500">无活跃事件</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 圆形SDL流程可视化 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 p-6">
	<div class="relative h-96">
	<div class="absolute inset-0 flex items-center justify-center">
	<svg width="100%" height="100%" viewBox="0 0 500 500" class="absolute">
	<!-- 数据流箭头 -->
	<defs>
	<marker id="arrowhead" markerWidth="10" markerHeight="7"
	refX="0" refY="3.5" orient="auto">
	<polygon points="0 0, 10 3.5, 0 7" fill="#10b981" />
	</marker>
	</defs>

	<!-- 数据流圆形路径 -->
	<path id="data-path" d="M250,100 A150,150 0 1,1 250,400 A150,150 0 1,1 250,100"
	fill="none" stroke="#10b981" stroke-width="2" stroke-dasharray="10,5"
	class="data-flow" />

	<!-- 沿路径的动画箭头 -->
	<circle cx="250" cy="100" r="5" fill="#10b981">
	<animateMotion dur="10s" repeatCount="indefinite">
	<mpath xlink:href="#data-path"/>
	</animateMotion>
	</circle>
	</svg>

	<!-- 需求设计节点 -->
	<div class="circular-node bg-green-50 border-2 border-green-200" style="top: 10%; left: 50%; transform: translateX(-50%);">
	<div class="relative w-16 h-16 mb-2">
	<svg class="w-full h-full" viewBox="0 0 36 36">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e2e8f0"
	stroke-width="3"
	/>
	<path
	class="progress-ring__circle"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="78, 100"
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<i class="fas fa-lightbulb text-green-600 text-xl"></i>
	</div>
	</div>
	<div class="text-xs font-medium text-gray-700">需求设计</div>
	<div class="text-xs text-gray-500 mt-1">78% 已分析</div>
	<div class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs pulse-glow">2</div>
	</div>

	<!-- 代码变更节点 -->
	<div class="circular-node bg-green-50 border-2 border-green-200" style="top: 30%; right: 10%;">
	<div class="relative w-16 h-16 mb-2">
	<svg class="w-full h-full" viewBox="0 0 36 36">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e2e8f0"
	stroke-width="3"
	/>
	<path
	class="progress-ring__circle"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="45, 100"
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<i class="fas fa-code text-green-600 text-xl"></i>
	</div>
	</div>
	<div class="text-xs font-medium text-gray-700">代码变更</div>
	<div class="text-xs text-gray-500 mt-1">45% 已分析</div>
	<div class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs pulse-glow">1</div>
	</div>

	<!-- 安全测试节点 -->
	<div class="circular-node bg-green-50 border-2 border-green-200" style="bottom: 20%; right: 20%;">
	<div class="relative w-16 h-16 mb-2">
	<svg class="w-full h-full" viewBox="0 0 36 36">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e2e8f0"
	stroke-width="3"
	/>
	<path
	class="progress-ring__circle"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="32, 100"
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<i class="fas fa-shield-alt text-green-600 text-xl"></i>
	</div>
	</div>
	<div class="text-xs font-medium text-gray-700">安全测试</div>
	<div class="text-xs text-gray-500 mt-1">32% 已分析</div>
	<div class="absolute -top-2 -right-2 bg-yellow-500 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs">1</div>
	</div>

	<!-- 发布节点 -->
	<div class="circular-node bg-green-50 border-2 border-green-200" style="bottom: 20%; left: 20%;">
	<div class="relative w-16 h-16 mb-2">
	<svg class="w-full h-full" viewBox="0 0 36 36">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e2e8f0"
	stroke-width="3"
	/>
	<path
	class="progress-ring__circle"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="90, 100"
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<i class="fas fa-rocket text-green-600 text-xl"></i>
	</div>
	</div>
	<div class="text-xs font-medium text-gray-700">发布</div>
	<div class="text-xs text-gray-500 mt-1">90% 已分析</div>
	</div>

	<!-- 生产节点 -->
	<div class="circular-node bg-green-50 border-2 border-green-200" style="top: 30%; left: 10%;">
	<div class="relative w-16 h-16 mb-2">
	<svg class="w-full h-full" viewBox="0 0 36 36">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e2e8f0"
	stroke-width="3"
	/>
	<path
	class="progress-ring__circle"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="65, 100"
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<i class="fas fa-globe text-green-600 text-xl"></i>
	</div>
	</div>
	<div class="text-xs font-medium text-gray-700">生产环境</div>
	<div class="text-xs text-gray-500 mt-1">65% 已分析</div>
	</div>

	<!-- 中心AI头像 -->
	<div class="absolute inset-0 flex items-center justify-center">
	<div class="relative">
	<div class="floating">
	<img class="h-24 w-24 object-contain" src="https://img.icons8.com/color/480/robot-3.png" alt="AI SDL 数字孪生">
	</div>
	<div class="absolute bottom-0 right-0 bg-green-500 text-white rounded-full h-8 w-8 flex items-center justify-center">
	<i class="fas fa-bolt"></i>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- 风险项目区域 -->
	<section id="projects" class="mb-8">
	<h2 class="text-2xl font-bold text-gray-900 mb-4">风险项目列表</h2>

	<div class="bg-white shadow overflow-hidden rounded-lg">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">风险</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<!-- 项目1 -->
	<tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('alipay-subsidy')">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center text-red-600">
	<i class="fas fa-exclamation-triangle"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">支付宝国补项目</div>
	<div class="text-sm text-gray-500">政府补贴系统</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">高风险</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2">
	<div class="bg-red-500 h-2 rounded-full" style="width: 65%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">65% 已分析</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="risk-tag bg-red-100 text-red-800">SQL注入</span>
	<span class="risk-tag bg-red-100 text-red-800">授权绕过</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<button class="text-green-600 hover:text-green-900">查看详情</button>
	</td>
	</tr>

	<!-- 项目2 -->
	<tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('merchant-portal')">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-orange-100 rounded-full flex items-center justify-center text-orange-600">
	<i class="fas fa-exclamation-circle"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">商户门户 v2.0</div>
	<div class="text-sm text-gray-500">商户管理仪表盘</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">中等风险</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2">
	<div class="bg-orange-500 h-2 rounded-full" style="width: 42%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">42% 已分析</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="risk-tag bg-orange-100 text-orange-800">XSS</span>
	<span class="risk-tag bg-yellow-100 text-yellow-800">输入验证</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<button class="text-green-600 hover:text-green-900">查看详情</button>
	</td>
	</tr>

	<!-- 项目3 -->
	<tr class="hover:bg-gray-50 cursor-pointer" onclick="showProjectDetail('payment-gateway')">
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600">
	<i class="fas fa-info-circle"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">支付网关</div>
	<div class="text-sm text-gray-500">支付处理微服务</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">低风险</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2">
	<div class="bg-yellow-500 h-2 rounded-full" style="width: 88%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">88% 已分析</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="risk-tag bg-yellow-100 text-yellow-800">硬编码凭证</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
	<button class="text-green-600 hover:text-green-900">查看详情</button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</section>
	</div>

	<!-- 右侧栏 - 风险警报 -->
	<div class="lg:w-1/3">
	<section id="alerts" class="mb-8">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-2xl font-bold text-gray-900">风险警报</h2>
	<div class="flex items-center">
	<span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full mr-2">3 新警报</span>
	<button class="text-sm text-green-600 hover:text-green-800">查看全部</button>
	</div>
	</div>

	<div class="bg-white shadow overflow-hidden rounded-lg">
	<div class="divide-y divide-gray-200">
	<!-- 严重警报 -->
	<div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="showProjectDetail('alipay-subsidy')">
	<div class="flex items-start">
	<div class="flex-shrink-0 pt-1">
	<div class="bg-red-500 rounded-full h-8 w-8 flex items-center justify-center text-white">
	<i class="fas fa-exclamation-triangle"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-red-700">支付宝国补项目</h3>
	<span class="text-xs text-gray-500">10 分钟前</span>
	</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>在代码和需求设计阶段检测到多个风险</p>
	</div>
	<div class="mt-2">
	<span class="risk-tag bg-red-100 text-red-800">SQL注入</span>
	<span class="risk-tag bg-red-100 text-red-800">授权绕过</span>
	<span class="risk-tag bg-yellow-100 text-yellow-800">数据验证</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 高警报 -->
	<div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="showProjectDetail('merchant-portal')">
	<div class="flex items-start">
	<div class="flex-shrink-0 pt-1">
	<div class="bg-orange-500 rounded-full h-8 w-8 flex items-center justify-center text-white">
	<i class="fas fa-exclamation-circle"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-orange-700">商户门户 v2.0</h3>
	<span class="text-xs text-gray-500">25 分钟前</span>
	</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>安全测试在3个端点发现XSS漏洞</p>
	</div>
	<div class="mt-2">
	<span class="risk-tag bg-orange-100 text-orange-800">跨站脚本</span>
	<span class="risk-tag bg-yellow-100 text-yellow-800">输入验证</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 中等警报 -->
	<div class="p-4 hover:bg-gray-50 cursor-pointer transition" onclick="showProjectDetail('payment-gateway')">
	<div class="flex items-start">
	<div class="flex-shrink-0 pt-1">
	<div class="bg-yellow-500 rounded-full h-8 w-8 flex items-center justify-center text-white">
	<i class="fas fa-info-circle"></i>
	</div>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-yellow-700">支付网关微服务</h3>
	<span class="text-xs text-gray-500">1 小时前</span>
	</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>在配置文件中发现硬编码凭证</p>
	</div>
	<div class="mt-2">
	<span class="risk-tag bg-yellow-100 text-yellow-800">敏感数据暴露</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 分析详情面板 -->
	<div class="bg-gray-50 p-6 rounded-lg">
	<h3 class="text-lg font-semibold text-gray-900 mb-4">分析洞察</h3>

	<div class="space-y-4">
	<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
	<h4 class="text-sm font-medium text-gray-700 mb-2">当前焦点</h4>
	<div class="flex items-center">
	<div class="bg-green-100 rounded-full h-8 w-8 flex items-center justify-center text-green-600 mr-3">
	<i class="fas fa-code"></i>
	</div>
	<div>
	<p class="text-sm text-gray-900">代码变更分析</p>
	<p class="text-xs text-gray-500">正在扫描支付处理模块</p>
	</div>
	</div>
	</div>

	<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
	<h4 class="text-sm font-medium text-gray-700 mb-2">近期发现</h4>
	<div class="space-y-3">
	<div class="flex items-start">
	<div class="bg-red-100 rounded-full h-6 w-6 flex items-center justify-center text-red-600 mr-2 mt-0.5">
	<i class="fas fa-exclamation-triangle text-xs"></i>
	</div>
	<div>
	<p class="text-sm text-gray-900">SQL注入漏洞</p>
	<p class="text-xs text-gray-500">在补贴支付处理中</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="bg-yellow-100 rounded-full h-6 w-6 flex items-center justify-center text-yellow-600 mr-2 mt-0.5">
	<i class="fas fa-info-circle text-xs"></i>
	</div>
	<div>
	<p class="text-sm text-gray-900">硬编码凭证</p>
	<p class="text-xs text-gray-500">在支付网关配置中</p>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
	<h4 class="text-sm font-medium text-gray-700 mb-2">下一步</h4>
	<div class="flex items-start">
	<div class="bg-blue-100 rounded-full h-6 w-6 flex items-center justify-center text-blue-600 mr-2 mt-0.5">
	<i class="fas fa-shield-alt text-xs"></i>
	</div>
	<div>
	<p class="text-sm text-gray-900">安全测试阶段</p>
	<p class="text-xs text-gray-500">约15分钟后开始</p>
	</div>
	</div>
	</div>
	</div>

	<div class="mt-6 pt-4 border-t border-gray-200">
	<button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md flex items-center justify-center transition">
	<i class="fas fa-bell mr-2"></i> 获取通知
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>
	</main>

	<!-- 项目详情模态框 -->
	<div id="projectDetailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
	<div class="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white max-h-screen overflow-y-auto">
	<div class="flex justify-between items-center pb-3 border-b">
	<h3 id="projectDetailTitle" class="text-2xl font-bold text-gray-900"></h3>
	<button onclick="hideProjectDetail()" class="text-gray-400 hover:text-gray-600">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div id="projectDetailContent" class="py-4">
	<!-- 内容将动态加载 -->
	</div>
	</div>
	</div>

	<script>
	// 示例项目数据
	const projects = {
	'alipay-subsidy': {
	title: '支付宝国补项目',
	description: '支付宝平台的政府补贴分发系统',
	status: 'high-risk',
	progress: 65,
	risks: [
	{ type: 'SQL注入', severity: 'high', phase: 'code' },
	{ type: '授权绕过', severity: 'high', phase: 'requirements' },
	{ type: '数据验证', severity: 'medium', phase: 'requirements' }
	],
	requirements: {
	content: `该系统允许政府机构直接将补贴分发到公民的支付宝账户。功能包括：

	- 批量支付处理
	- 收款人验证
	- 报告和分析

	架构图:
	[前端] -> [API网关] -> [补贴服务] -> [支付服务] -> [支付宝集成]`,
	analysis: [
	{
	scenario: '批量支付处理',
	riskPoint: '批量操作没有速率限制',
	riskType: '拒绝服务',
	recommendation: '实施速率限制和批量大小限制'
	},
	{
	scenario: '收款人验证',
	riskPoint: '仅依赖手机号验证',
	riskType: '授权绕过',
	recommendation: '对高价值交易实施多因素验证'
	}
	]
	},
	code: {
	content: `// SubsidyService.java - 处理补贴支付
	public class SubsidyService {
	public void processPayment(String userId, BigDecimal amount) {
	// 易受攻击的SQL查询
	String query = "UPDATE accounts SET balance = balance + " + amount +
	" WHERE user_id = '" + userId + "'";

	// 执行查询
	database.execute(query);

	// 记录交易
	logger.log("Processed payment of " + amount + " to user " + userId);
	}
	}`,
	analysis: [
	{
	vulnerability: 'SQL注入',
	description: '直接将用户输入拼接到SQL查询中',
	code: 'String query = "UPDATE accounts SET balance = balance + " + amount + " WHERE user_id = \'" + userId + "\'";',
	recommendation: '使用带有参数化查询的预处理语句'
	}
	]
	},
	securityTesting: {
	content: `测试API端点: POST /api/subsidies

	易受攻击的请求:
	POST /api/subsidies HTTP/1.1
	Content-Type: application/json

	{
	"recipient": "1234567890",
	"amount": "1000.00",
	"reference": "<script>alert(1)</script>"
	}`,
	analysis: [
	{
	endpoint: 'POST /api/subsidies',
	payload: 'reference字段中的XSS负载',
	description: 'reference字段没有正确编码就反射了用户输入'
	}
	]
	},
	release: {
	content: '发布候选版本v1.2.5包含对5个已识别漏洞中的3个的修复',
	analysis: [
	{
	unresolved: '收款人验证中的授权绕过',
	phase: 'requirements',
	risk: '中等'
	},
	{
	unresolved: '支付处理中的SQL注入',
	phase: 'code',
	risk: '高'
	}
	]
	},
	production: {
	content: '尚未部署到生产环境',
	analysis: []
	}
	},
	'merchant-portal': {
	title: '商户门户 v2.0',
	description: '商户管理其支付宝集成的仪表盘',
	status: 'medium-risk',
	progress: 42,
	risks: [
	{ type: '跨站脚本', severity: 'medium', phase: 'security-testing' },
	{ type: '输入验证', severity: 'low', phase: 'security-testing' }
	],
	requirements: {
	content: `商户门户提供:

	- 交易历史和报告
	- 支付管理
	- API密钥管理
	- 客户支持集成

	架构:
	[React前端] -> [Node.js API] -> [各种微服务]`,
	analysis: [
	{
	scenario: 'API密钥管理',
	riskPoint: '密钥生成没有速率限制',
	riskType: '资源耗尽',
	recommendation: '实施速率限制和配额'
	}
	]
	},
	code: {
	content: `// API密钥生成端点
	app.post('/api/keys', (req, res) => {
	const { merchantId } = req.body;

	// 生成API密钥
	const apiKey = generateApiKey();

	// 存储到数据库
	db.query(\`INSERT INTO api_keys (merchant_id, key) VALUES (${merchantId}, '${apiKey}')\`);

	// 返回给客户端
	res.json({ key: apiKey });
	});`,
	analysis: [
	{
	vulnerability: 'SQL注入',
	description: '直接将用户输入拼接到SQL查询中',
	code: 'db.query(`INSERT INTO api_keys (merchant_id, key) VALUES (${merchantId}, \'${apiKey}\')`);',
	recommendation: '使用参数化查询'
	}
	]
	},
	securityTesting: {
	content: `测试API端点: GET /api/transactions

	易受攻击的请求:
	GET /api/transactions?search=<script>alert('XSS')</script> HTTP/1.1`,
	analysis: [
	{
	endpoint: 'GET /api/transactions',
	payload: '搜索参数中的XSS负载',
	description: '搜索参数没有正确编码就反射了用户输入'
	}
	]
	},
	release: {
	content: '发布候选版本v2.0.0-rc3包含对XSS漏洞的修复',
	analysis: []
	},
	production: {
	content: '生产环境当前运行v1.9.4，没有关键问题',
	analysis: []
	}
	},
	'payment-gateway': {
	title: '支付网关微服务',
	description: '核心支付处理服务',
	status: 'low-risk',
	progress: 88,
	risks: [
	{ type: '敏感数据暴露', severity: 'medium', phase: 'code' }
	],
	requirements: {
	content: `支付网关处理:

	- 信用卡处理
	- 银行转账
	- 数字钱包支付
	- 欺诈检测

	架构:
	[客户端] -> [支付网关] -> [处理器] -> [银行]`,
	analysis: [
	{
	scenario: '欺诈检测',
	riskPoint: '没有记录欺诈检测规则',
	riskType: '可审计性',
	recommendation: '实施详细的审计日志'
	}
	]
	},
	code: {
	content: `# config.py - 支付网关配置

	DATABASE = {
	'host': 'payment-db.internal',
	'user': 'admin',
	'password': 'supersecret123', # 硬编码凭证
	'name': 'payment_gateway'
	}

	API_KEYS = {
	'stripe': 'sk_live_abcd1234',
	'alipay': 'live_xyz789'
	}`,
	analysis: [
	{
	vulnerability: '硬编码凭证',
	description: '敏感凭证存储在源代码中',
	code: '\'password\': \'supersecret123\'',
	recommendation: '使用环境变量或密钥管理系统'
	}
	]
	},
	securityTesting: {
	content: `测试API端点: POST /api/payments

	近期测试中未发现漏洞`,
	analysis: []
	},
	release: {
	content: '发布候选版本v3.1.2包含对硬编码凭证的修复',
	analysis: []
	},
	production: {
	content: '生产环境当前运行v3.0.9，没有活跃事件',
	analysis: []
	}
	}
	};

	// 显示项目详情
	function showProjectDetail(projectId) {
	const project = projects[projectId];
	if (!project) return;

	document.getElementById('projectDetailTitle').textContent = project.title;

	let content = `
	<div class="mb-6">
	<p class="text-gray-700 mb-4">${escapeHtml(project.description)}</p>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="text-sm font-medium text-gray-500 mb-1">状态</h4>
	<p class="font-medium ${project.status === 'high-risk' ? 'text-red-600' : project.status === 'medium-risk' ? 'text-orange-600' : 'text-yellow-600'}">
	${project.status === 'high-risk' ? '高风险' : project.status === 'medium-risk' ? '中等风险' : '低风险'}
	</p>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="text-sm font-medium text-gray-500 mb-1">进度</h4>
	<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
	<div class="h-2 rounded-full ${project.status === 'high-risk' ? 'bg-red-500' : project.status === 'medium-risk' ? 'bg-orange-500' : 'bg-yellow-500'}" style="width: ${project.progress}%"></div>
	</div>
	<p class="text-xs text-gray-500 mt-1">${project.progress}% 完成</p>
	</div>

	<div class="bg-gray-50 p-4 rounded-lg">
	<h4 class="text-sm font-medium text-gray-500 mb-1">检测到的风险</h4>
	<div class="mt-1">
	${project.risks.map(risk => `
	<span class="risk-tag ${risk.severity === 'high' ? 'bg-red-100 text-red-800' : risk.severity === 'medium' ? 'bg-orange-100 text-orange-800' : 'bg-yellow-100 text-yellow-800'}">
	${escapeHtml(risk.type)}
	</span>
	`).join('')}
	</div>
	</div>
	</div>
	</div>

	<div class="border-t pt-6">
	<h3 class="text-lg font-bold text-gray-900 mb-4">SDL阶段分析</h3>

	<div class="space-y-8">
	<!-- 需求 -->
	<div>
	<div class="flex items-center mb-3">
	<div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
	<i class="fas fa-lightbulb text-xs"></i>
	</div>
	<h4 class="font-semibold text-gray-900">需求设计</h4>
	</div>

	<div class="ml-9">
	<div class="highlight-box border-green-500 mb-4">
	<h5 class="font-medium text-gray-900 mb-2">内容</h5>
	<div class="text-sm text-gray-700 whitespace-pre-line">${escapeHtml(project.requirements.content)}</div>
	</div>

	<div class="highlight-box border-green-500">
	<h5 class="font-medium text-gray-900 mb-2">安全分析结果</h5>
	${project.requirements.analysis.length > 0 ? `
	<div class="space-y-4">
	${project.requirements.analysis.map(item => `
	<div class="bg-white p-3 rounded-lg border border-gray-200">
	<div class="font-medium">${escapeHtml(item.scenario)}</div>
	<div class="text-sm mt-1"><span class="font-medium">风险:</span> ${escapeHtml(item.riskPoint)} (${escapeHtml(item.riskType)})</div>
	<div class="text-sm mt-1"><span class="font-medium">建议:</span> ${escapeHtml(item.recommendation)}</div>
	</div>
	`).join('')}
	</div>
	` : '<p class="text-sm text-gray-500">此阶段未检测到风险</p>'}
	</div>
	</div>
	</div>

	<!-- 代码 -->
	<div>
	<div class="flex items-center mb-3">
	<div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
	<i class="fas fa-code text-xs"></i>
	</div>
	<h4 class="font-semibold text-gray-900">代码变更</h4>
	</div>

	<div class="ml-9">
	<div class="highlight-box border-green-500 mb-4">
	<h5 class="font-medium text-gray-900 mb-2">内容</h5>
	<div class="code-block">${escapeHtml(project.code.content)}</div>
	</div>

	<div class="highlight-box border-green-500">
	<h5 class="font-medium text-gray-900 mb-2">安全分析结果</h5>
	${project.code.analysis.length > 0 ? `
	<div class="space-y-4">
	${project.code.analysis.map(item => `
	<div class="bg-white p-3 rounded-lg border border-gray-200">
	<div class="font-medium">${escapeHtml(item.vulnerability)}</div>
	<div class="text-sm mt-1"><span class="font-medium">描述:</span> ${escapeHtml(item.description)}</div>
	<div class="text-sm mt-1"><span class="font-medium">易受攻击代码:</span> <span class="code-block vulnerability-line">${escapeHtml(item.code)}</span></div>
	<div class="text-sm mt-1"><span class="font-medium">建议:</span> ${escapeHtml(item.recommendation)}</div>
	</div>
	`).join('')}
	</div>
	` : '<p class="text-sm text-gray-500">此阶段未检测到风险</p>'}
	</div>
	</div>
	</div>

	<!-- 安全测试 -->
	<div>
	<div class="flex items-center mb-3">
	<div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
	<i class="fas fa-shield-alt text-xs"></i>
	</div>
	<h4 class="font-semibold text-gray-900">安全测试</h4>
	</div>

	<div class="ml-9">
	<div class="highlight-box border-green-500 mb-4">
	<h5 class="font-medium text-gray-900 mb-2">内容</h5>
	<div class="code-block">${escapeHtml(project.securityTesting.content)}</div>
	</div>

	<div class="highlight-box border-green-500">
	<h5 class="font-medium text-gray-900 mb-2">安全分析结果</h5>
	${project.securityTesting.analysis.length > 0 ? `
	<div class="space-y-4">
	${project.securityTesting.analysis.map(item => `
	<div class="bg-white p-3 rounded-lg border border-gray-200">
	<div class="font-medium">${escapeHtml(item.endpoint)}</div>
	<div class="text-sm mt-1"><span class="font-medium">负载:</span> <span class="code-block">${escapeHtml(item.payload)}</span></div>
	<div class="text-sm mt-1"><span class="font-medium">描述:</span> ${escapeHtml(item.description)}</div>
	</div>
	`).join('')}
	</div>
	` : '<p class="text-sm text-gray-500">此阶段未检测到风险</p>'}
	</div>
	</div>
	</div>

	<!-- 发布 -->
	<div>
	<div class="flex items-center mb-3">
	<div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
	<i class="fas fa-rocket text-xs"></i>
	</div>
	<h4 class="font-semibold text-gray-900">发布</h4>
	</div>

	<div class="ml-9">
	<div class="highlight-box border-green-500 mb-4">
	<h5 class="font-medium text-gray-900 mb-2">内容</h5>
	<p class="text-sm text-gray-700">${escapeHtml(project.release.content)}</p>
	</div>

	<div class="highlight-box border-green-500">
	<h5 class="font-medium text-gray-900 mb-2">安全分析结果</h5>
	${project.release.analysis.length > 0 ? `
	<div class="space-y-4">
	${project.release.analysis.map(item => `
	<div class="bg-white p-3 rounded-lg border border-gray-200">
	<div class="font-medium">未解决的${escapeHtml(item.phase)}风险</div>
	<div class="text-sm mt-1"><span class="font-medium">风险:</span> ${escapeHtml(item.unresolved)}</div>
	<div class="text-sm mt-1"><span class="font-medium">严重性:</span> <span class="${item.risk === 'High' ? 'text-red-600' : item.risk === 'Medium' ? 'text-orange-600' : 'text-yellow-600'}">${escapeHtml(item.risk)}</span></div>
	</div>
	`).join('')}
	</div>
	` : '<p class="text-sm text-gray-500">所有已识别的风险都已解决</p>'}
	</div>
	</div>
	</div>

	<!-- 生产 -->
	<div>
	<div class="flex items-center mb-3">
	<div class="bg-green-600 rounded-full h-6 w-6 flex items-center justify-center text-white mr-3">
	<i class="fas fa-globe text-xs"></i>
	</div>
	<h4 class="font-semibold text-gray-900">生产环境</h4>
	</div>

	<div class="ml-9">
	<div class="highlight-box border-green-500 mb-4">
	<h5 class="font-medium text-gray-900 mb-2">内容</h5>
	<p class="text-sm text-gray-700">${escapeHtml(project.production.content)}</p>
	</div>

	<div class="highlight-box border-green-500">
	<h5 class="font-medium text-gray-900 mb-2">安全分析结果</h5>
	${project.production.analysis.length > 0 ? `
	<div class="space-y-4">
	${project.production.analysis.map(item => `
	<div class="bg-white p-3 rounded-lg border border-gray-200">
	<div class="font-medium">${escapeHtml(item.vulnerability)}</div>
	<div class="text-sm mt-1"><span class="font-medium">状态:</span> ${escapeHtml(item.status)}</div>
	<div class="text-sm mt-1"><span class="font-medium">建议:</span> ${escapeHtml(item.recommendation)}</div>
	</div>
	`).join('')}
	</div>
	` : '<p class="text-sm text-gray-500">生产环境中未检测到活跃威胁</p>'}
	</div>
	</div>
	</div>
	</div>
	</div>
	`;

	document.getElementById('projectDetailContent').innerHTML = content;
	document.getElementById('projectDetailModal').classList.remove('hidden');
	}

	// 隐藏项目详情
	function hideProjectDetail() {
	document.getElementById('projectDetailModal').classList.add('hidden');
	}

	// 转义HTML防止XSS
	function escapeHtml(unsafe) {
	if (!unsafe) return '';
	return unsafe.toString()
	.replace(/&/g, "&")
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/"/g, """)
	.replace(/'/g, "'");
	}

	// 模拟进度更新
	function simulateProgressUpdates() {
	const nodes = document.querySelectorAll('.circular-node');
	const stats = document.querySelectorAll('.text-xl.font-bold');
	const statCards = document.querySelectorAll('.stats-card');

	setInterval(() => {
	nodes.forEach(node => {
	const progressRing = node.querySelector('.progress-ring__circle');
	const progressText = node.querySelector('.text-xs.text-gray-500');
	const riskCounter = node.querySelector('.bg-red-500, .bg-yellow-500');

	if (progressRing && progressText) {
	const currentProgress = parseInt(progressRing.getAttribute('stroke-dasharray').split(',')[0]);
	const newProgress = Math.min(currentProgress + Math.floor(Math.random() * 5), 100);

	progressRing.setAttribute('stroke-dasharray', `${newProgress}, 100`);
	progressText.textContent = `${newProgress}% 已分析`;

	// 随机添加/移除风险计数器
	if (riskCounter && Math.random() > 0.8) {
	const currentCount = parseInt(riskCounter.textContent);
	if (currentCount > 0 && Math.random() > 0.5) {
	riskCounter.textContent = currentCount - 1;
	if (currentCount - 1 === 0) {
	riskCounter.classList.remove('pulse-glow');
	riskCounter.classList.add('bg-green-500');
	riskCounter.innerHTML = '<i class="fas fa-check text-xs"></i>';
	}
	} else if (currentCount < 3) {
	riskCounter.textContent = currentCount + 1;
	if (riskCounter.classList.contains('bg-yellow-500') && currentCount + 1 >= 2) {
	riskCounter.classList.remove('bg-yellow-500');
	riskCounter.classList.add('bg-red-500');
	}
	riskCounter.classList.add('pulse-glow');
	}
	}
	}
	});

	// 更新统计数字
	stats.forEach(stat => {
	const currentValue = parseInt(stat.textContent.replace(/,/g, ''));
	if (!isNaN(currentValue)) {
	const increment = Math.floor(Math.random() * 100);
	const newValue = currentValue + increment;
	stat.textContent = newValue.toLocaleString();
	}
	});

	// 随机闪烁统计卡片
	statCards.forEach(card => {
	if (Math.random() > 0.7) {
	card.classList.add('flicker');
	setTimeout(() => {
	card.classList.remove('flicker');
	}, 1000);
	}
	});
	}, 3000);
	}

	// 初始化
	document.addEventListener('DOMContentLoaded', () => {
	simulateProgressUpdates();
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/landingpage4-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>