index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI SDL Digital Twin Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 新增科技感数字人样式 */
        .digital-human {
            position: relative;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: linear-gradient(145deg, #00d1ff, #0061ff);
            box-shadow: 0 0 30px rgba(0, 209, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .digital-human::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                transparent, 
                transparent, 
                transparent, 
                #00f2ff
            );
            animation: rotate 4s linear infinite;
        }
        
        .digital-human::after {
            content: "";
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: linear-gradient(145deg, #00d1ff, #0061ff);
        }
        
        .digital-human-core {
            position: relative;
            z-index: 10;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(0, 0, 50, 0.7);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }
        
        .digital-human-eyes {
            display: flex;
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .digital-human-eye {
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
        }
        
        .digital-human-eye::after {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            width: 10px;
            height: 10px;
            background: #00d1ff;
            border-radius: 50%;
            box-shadow: 0 0 10px #00d1ff;
            animation: blink 4s infinite;
        }
        
        .digital-human-mouth {
            width: 40px;
            height: 10px;
            background: white;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }
        
        .digital-human-mouth::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ff2a6d;
            border-radius: 5px;
            transform: scaleX(0.8);
            transform-origin: left;
            animation: speak 2s infinite alternate;
        }
        
        .digital-human-halo {
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 2px solid rgba(0, 209, 255, 0.3);
            animation: pulse 3s infinite;
        }
        
        .digital-human-halo:nth-child(2) {
            width: 200px;
            height: 200px;
            animation-delay: 0.5s;
        }
        
        .digital-human-halo:nth-child(3) {
            width: 220px;
            height: 220px;
            animation-delay: 1s;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes blink {
            0%, 45%, 55%, 100% { transform: scale(1); }
            50% { transform: scale(1, 0.1); }
        }
        
        @keyframes speak {
            0%, 100% { transform: scaleX(0.8); }
            50% { transform: scaleX(1.2); }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.2); opacity: 0; }
        }
        
        /* 原有样式保持不变 */
        @keyframes flow {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: 0; }
        }
        
        .flow-arrow {
            stroke-dasharray: 10;
            animation: flow 2s linear infinite;
        }
        
        .risk-high {
            border-left: 4px solid #ef4444;
        }
        
        .risk-medium {
            border-left: 4px solid #f59e0b;
        }
        
        .risk-low {
            border-left: 4px solid #10b981;
        }
        
        .code-line-error {
            position: relative;
        }
        
        .code-line-error::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background: repeating-linear-gradient(45deg, #ef4444, #ef4444 2px, transparent 2px, transparent 4px);
        }
        
        .architecture-diagram {
            width: 100%;
            height: 400px;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: auto;
        }
        
        .threat-model {
            width: 100%;
            height: 400px;
            background-color: #f9fafb;
            border-radius: 0.5rem;
        }
        
        .threat-node {
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .threat-node:hover {
            filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
        }
        
        .request-flow {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .request-step {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .request-arrow {
            width: 20px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #6b7280;
        }
        
        .request-box {
            flex: 1;
            padding: 1rem;
            background-color: #f3f4f6;
            border-radius: 0.5rem;
            font-family: monospace;
            white-space: pre-wrap;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- 只修改了数字人部分，其他部分保持不变 -->
    <!-- ... 前面的header和stats部分保持不变 ... -->

    <!-- Main Dashboard -->
    <div class="flex-1 flex space-x-6">
        <!-- SDL Process Visualization -->
        <div class="flex-1 bg-white rounded-xl shadow-sm p-6 relative">
            <h2 class="text-lg font-semibold mb-4">SDL Process Analysis</h2>
            
            <div class="relative h-full" style="min-height: 500px;">
                <!-- Circular SDL Process -->
                <div class="absolute inset-0 flex items-center justify-center">
                    <svg width="100%" height="100%" viewBox="0 0 600 600" class="max-w-xl mx-auto">
                        <!-- Data Flow Arrows -->
                        <path id="flow-1" d="M300,100 A200,200 0 0,1 500,300 L480,300 A180,180 0 0,0 300,120 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
                        <path id="flow-2" d="M500,300 A200,200 0 0,1 300,500 L300,480 A180,180 0 0,0 480,300 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
                        <path id="flow-3" d="M300,500 A200,200 0 0,1 100,300 L120,300 A180,180 0 0,0 300,480 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
                        <path id="flow-4" d="M100,300 A200,200 0 0,1 300,100 L300,120 A180,180 0 0,0 120,300 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
                        
                        <!-- 科技感数字人 -->
                        <foreignObject x="220" y="220" width="160" height="160">
                            <div class="digital-human" xmlns="http://www.w3.org/1999/xhtml">
                                <div class="digital-human-halo"></div>
                                <div class="digital-human-halo"></div>
                                <div class="digital-human-halo"></div>
                                <div class="digital-human-core">
                                    <div class="digital-human-eyes">
                                        <div class="digital-human-eye"></div>
                                        <div class="digital-human-eye"></div>
                                    </div>
                                    <div class="text-xs mb-1">AI SECURITY</div>
                                    <div class="digital-human-mouth"></div>
                                </div>
                            </div>
                        </foreignObject>
                        
                        <!-- Requirement Design Phase -->
                        <g class="cursor-pointer" onclick="showPhaseDetails('requirement')">
                            <circle cx="300" cy="100" r="60" fill="#f0fdf4" stroke="#4ade80" stroke-width="3" />
                            <text x="300" y="100" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#15803d">Requirement</text>
                            <text x="300" y="120" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#15803d">4 risks</text>
                            <circle cx="300" cy="140" r="4" fill="#ef4444" class="animate-pulse" />
                        </g>
                        
                        <!-- Code Change Phase -->
                        <g class="cursor-pointer" onclick="showPhaseDetails('code')">
                            <circle cx="500" cy="300" r="60" fill="#eff6ff" stroke="#60a5fa" stroke-width="3" />
                            <text x="500" y="290" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#1d4ed8">Code</text>
                            <text x="500" y="310" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#1d4ed8">6 risks</text>
                            <circle cx="500" cy="330" r="4" fill="#ef4444" class="animate-pulse" />
                        </g>
                        
                        <!-- Security Testing Phase -->
                        <g class="cursor-pointer" onclick="showPhaseDetails('testing')">
                            <circle cx="300" cy="500" r="60" fill="#fef2f2" stroke="#f87171" stroke-width="3" />
                            <text x="300" y="490" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#b91c1c">Testing</text>
                            <text x="300" y="510" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#b91c1c">3 risks</text>
                            <circle cx="300" y="530" r="4" fill="#ef4444" class="animate-pulse" />
                        </g>
                        
                        <!-- Release Phase -->
                        <g class="cursor-pointer" onclick="showPhaseDetails('release')">
                            <circle cx="100" cy="300" r="60" fill="#f5f3ff" stroke="#a78bfa" stroke-width="3" />
                            <text x="100" y="290" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#6d28d9">Release</text>
                            <text x="100" y="310" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#6d28d9">2 risks</text>
                            <circle cx="100" y="330" r="4" fill="#ef4444" class="animate-pulse" />
                        </g>
                        
                        <!-- Production Phase -->
                        <g class="cursor-pointer" onclick="showPhaseDetails('production')">
                            <circle cx="300" cy="300" r="180" fill="none" stroke="#fcd34d" stroke-width="3" stroke-dasharray="5,5" />
                            <text x="300" y="240" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#92400e">Production</text>
                            <text x="300" y="260" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#92400e">3 risks</text>
                            <circle cx="300" y="280" r="4" fill="#ef4444" class="animate-pulse" />
                        </g>
                    </svg>
                </div>
            </div>
            
            <!-- Analysis Log -->
            <div class="mt-6 border-t pt-4">
                <h3 class="text-sm font-semibold text-gray-500 mb-2">Real-time Analysis Log</h3>
                <div class="bg-gray-50 rounded-lg p-3 h-40 overflow-y-auto text-sm space-y-2" id="analysis-log">
                    <div class="text-green-600">✓ Completed analysis: Alipay National Subsidy Project requirements</div>
                    <div class="text-green-600">✓ Completed analysis: Cloud Storage Optimization Project code review</div>
                    <div class="text-blue-600">→ Analyzing: Payment Gateway API security testing</div>
                    <div class="text-green-600">✓ Completed analysis: User Management System release check</div>
                    <div class="text-blue-600">→ Analyzing: E-commerce Platform production monitoring</div>
                    <div class="text-red-600">⚠ Found 2 high risks in Financial Reporting Module</div>
                </div>
            </div>
        </div>
        
        <!-- Risk Alerts -->
        <div class="w-80 bg-white rounded-xl shadow-sm p-6 flex flex-col">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold">Risk Alerts</h2>
                <div class="text-sm text-gray-500" id="alert-count">5 new</div>
            </div>
            
            <div class="flex-1 overflow-y-auto space-y-3" id="risk-alerts">
                <div class="p-3 rounded-lg risk-high cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('alipay-subsidy')">
                    <div class="font-medium">Alipay National Subsidy</div>
                    <div class="text-sm text-gray-600">Requirement, Code</div>
                    <div class="text-xs mt-1">
                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">SQL Injection</span>
                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Privilege Escalation</span>
                    </div>
                </div>
                
                <div class="p-3 rounded-lg risk-medium cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('cloud-storage')">
                    <div class="font-medium">Cloud Storage Optimization</div>
                    <div class="text-sm text-gray-600">Code, Testing</div>
                    <div class="text-xs mt-1">
                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">XSS</span>
                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Insecure Deserialization</span>
                    </div>
                </div>
                
                <div class="p-3 rounded-lg risk-high cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('payment-gateway')">
                    <div class="font-medium">Payment Gateway API</div>
                    <div class="text-sm text-gray-600">Testing</div>
                    <div class="text-xs mt-1">
                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Broken Authentication</span>
                    </div>
                </div>
                
                <div class="p-3 rounded-lg risk-low cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('user-management')">
                    <div class="font-medium">User Management System</div>
                    <div class="text-sm text-gray-600">Release</div>
                    <div class="text-xs mt-1">
                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Missing Security Headers</span>
                    </div>
                </div>
                
                <div class="p-3 rounded-lg risk-medium cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('ecommerce-platform')">
                    <div class="font-medium">E-commerce Platform</div>
                    <div class="text-sm text-gray-600">Production</div>
                    <div class="text-xs mt-1">
                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Suspicious Activity</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ... 后面的modal和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/testtest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>