Download index.html from capta1n/bas7: direct link, hf CLI and curl.
- Browser
- Download file 29.5 kB
-
https://huggingface.co/spaces/capta1n/bas7/resolve/main/index.html
- Command line
-
hf download hf://spaces/capta1n/bas7/index.html
-
curl -L -o index.html https://huggingface.co/spaces/capta1n/bas7/resolve/main/index.html
29.5 kB
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BAS AI Hacker演练报告</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> | |
| .attack-card { | |
| transition: all 0.3s ease; | |
| transform-origin: center; | |
| height: 120px; | |
| overflow: hidden; | |
| } | |
| .attack-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .attack-card.active { | |
| border-left-width: 4px; | |
| transform: translateY(-5px); | |
| } | |
| .timeline-connector { | |
| position: relative; | |
| height: 4px; | |
| background: linear-gradient(90deg, #e5e7eb, #9ca3af); | |
| } | |
| .timeline-connector::after { | |
| content: ''; | |
| position: absolute; | |
| top: -4px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| transform: translateX(-50%); | |
| } | |
| .severity-badge { | |
| font-size: 0.65rem; | |
| padding: 0.15rem 0.4rem; | |
| } | |
| .severity-critical { | |
| background-color: #fee2e2; | |
| color: #dc2626; | |
| } | |
| .severity-high { | |
| background-color: #fef3c7; | |
| color: #d97706; | |
| } | |
| .severity-emergency { | |
| background-color: #ffedd5; | |
| color: #ea580c; | |
| } | |
| .defense-badge { | |
| font-size: 0.7rem; | |
| padding: 0.2rem 0.5rem; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .arrow { | |
| display: inline-block; | |
| width: 24px; | |
| height: 24px; | |
| text-align: center; | |
| line-height: 24px; | |
| color: #9ca3af; | |
| } | |
| .attacker-node { | |
| background-color: #fee2e2; | |
| border-left: 4px solid #dc2626; | |
| height: 120px; | |
| } | |
| .attack-flow-container { | |
| width: 100%; | |
| overflow-x: auto; | |
| padding-bottom: 1.5rem; | |
| } | |
| .attack-flow-container .flex { | |
| min-width: max-content; | |
| } | |
| .attack-behavior { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-size: 0.7rem; | |
| line-height: 1.2; | |
| color: #4b5563; | |
| } | |
| .stage-badge { | |
| font-size: 0.6rem; | |
| padding: 0.15rem 0.4rem; | |
| background-color: #f3f4f6; | |
| color: #6b7280; | |
| } | |
| .scroll-container { | |
| scrollbar-width: thin; | |
| scrollbar-color: #d1d5db #f3f4f6; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: #f3f4f6; | |
| border-radius: 10px; | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background-color: #d1d5db; | |
| border-radius: 10px; | |
| } | |
| .forensic-item { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .forensic-item:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0.5rem; | |
| top: 0.5rem; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: #3b82f6; | |
| } | |
| .forensic-item:after { | |
| content: ""; | |
| position: absolute; | |
| left: 0.5rem; | |
| top: 1.1rem; | |
| bottom: -0.5rem; | |
| width: 2px; | |
| background-color: #e5e7eb; | |
| } | |
| .forensic-item:last-child:after { | |
| display: none; | |
| } | |
| .alert-icon { | |
| width: 2rem; | |
| height: 2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| } | |
| .alert-critical { | |
| background-color: #fee2e2; | |
| color: #dc2626; | |
| } | |
| .alert-high { | |
| background-color: #fef3c7; | |
| color: #d97706; | |
| } | |
| .alert-emergency { | |
| background-color: #ffedd5; | |
| color: #ea580c; | |
| } | |
| .timeline-marker { | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .timeline-marker:after { | |
| content: ""; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| border-radius: 50%; | |
| background-color: white; | |
| } | |
| .section-divider { | |
| position: relative; | |
| margin: 1.5rem 0; | |
| } | |
| .section-divider:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 50%; | |
| height: 1px; | |
| background-color: #e5e7eb; | |
| } | |
| .section-divider span { | |
| position: relative; | |
| padding: 0 0.5rem; | |
| background-color: white; | |
| z-index: 1; | |
| font-size: 0.75rem; | |
| color: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8 max-w-full"> | |
| <div class="text-center mb-10"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">BAS AI Hacker演练报告</h1> | |
| <p class="text-gray-600 max-w-3xl mx-auto">演练时间:2025-04-23 10:11 ~ 2025-04-23 11:10</p> | |
| </div> | |
| <!-- Defense Detection Summary --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8"> | |
| <div class="border-b border-gray-200 px-6 py-4 bg-gray-50"> | |
| <h3 class="font-semibold text-gray-800">防御检测概览</h3> | |
| </div> | |
| <div id="defense-summary" class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shield-alt text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">拦截率</h4> | |
| <p class="text-2xl font-bold text-blue-600">90%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-bell text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">告警率</h4> | |
| <p class="text-2xl font-bold text-yellow-600">80%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-search text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium text-gray-800">溯源率</h4> | |
| <p class="text-2xl font-bold text-green-600">70%</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Attack Timeline Section --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800">攻击流程时间线</h2> | |
| <p class="text-gray-500 text-sm">点击任意攻击阶段查看详细取证证据</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-500 mr-2">滚动查看完整时间线</span> | |
| <i class="fas fa-chevron-right text-gray-400 text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="attack-flow-container scroll-container"> | |
| <div class="flex space-x-4 items-center pb-2"> | |
| <!-- Attacker Node --> | |
| <div class="attack-card w-48 flex-shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer transition-all duration-300 attacker-node"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user-secret"></i> | |
| </div> | |
| <span class="text-xs font-semibold text-gray-500">攻击源</span> | |
| </div> | |
| </div> | |
| <h3 class="font-semibold text-gray-800 text-sm mb-1">BAS AI Hacker</h3> | |
| <p class="text-xs text-gray-500">发起攻击</p> | |
| </div> | |
| </div> | |
| <div class="arrow"> | |
| <i class="fas fa-arrow-right"></i> | |
| </div> | |
| <!-- Attack cards will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Attack Details Section --> | |
| <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden"> | |
| <div class="border-b border-gray-200 px-6 py-4 bg-gray-50"> | |
| <h3 class="font-semibold text-gray-800">攻击阶段取证详情</h3> | |
| </div> | |
| <div id="attack-details" class="p-6"> | |
| <div class="text-center py-12"> | |
| <div class="mx-auto w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4"> | |
| <i class="fas fa-mouse-pointer text-blue-500 text-2xl"></i> | |
| </div> | |
| <h4 class="text-lg font-medium text-gray-700 mb-2">选择攻击阶段</h4> | |
| <p class="text-gray-500 max-w-md mx-auto">点击时间线上的任意攻击卡片查看攻击行为和触发防御的详细取证信息</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| </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/bas7" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |