Spaces:

capta1n
/

bas555

Running

bas555 / index.html

根据以下方案生成对应的产品：好的，根据您的澄清，“AI Hacker Agent”在用户交互层面，尤其是其核心的“规划Agent”和“人工确认/编辑”部分，是一个AI对话框或智能会话界面。这意味着用户可以通过自然语言与系统进行交互，提出攻防演练需求，并对AI生成的规划进行审查和修改。我将更新原PRD中的相关部分，以体现这一重要特性。产品需求文档 (PRD) - AI Hacker Agent 智能攻防演练平台 (更新版) 引言 1.1 文档目的本文档旨在详细描述 AI Hacker Agent 智能攻防演练平台的产品需求、功能范围、用户体验和非功能性要求。它将作为产品、研发、测试和设计团队的参考依据，指导产品的开发与实现。特别地，本次更新明确了核心“AI Hacker Agent”模块的用户交互方式将以AI对话框的形式呈现，提供更为直观和智能的人机协作体验。 1.2 产品背景随着网络攻击的日益复杂化和自动化，传统的人工渗透测试和攻防演练面临效率低下、覆盖不足等挑战。本平台旨在通过结合 AI 技术和自动化能力，构建一个智能化的攻防演练系统，实现攻击剧本的智能生成、攻击过程的自动化执行、攻击效果的实时验证以及防守响应的分析总结。通过引入AI对话框作为核心交互方式，进一步降低用户操作门槛，提升用户体验，使得安全专家能够更自然、更高效地与AI协作。 1.3 产品愿景构建一个自主学习、持续迭代的智能攻防演练平台，赋能企业实现常态化、体系化的红蓝对抗能力，有效发现并修复安全漏洞，提升安全防护韧性。通过智能化的对话交互，使得平台能够更好地理解用户意图，并提供更加定制化、智能化的攻防演练服务。 1.4 目标用户安全分析师/安全专家 (Security Analyst/Expert): 主要使用者，通过AI对话框进行交互，负责配置剧本、审查攻击计划、分析报告。渗透测试工程师 (Penetration Tester): 利用平台进行自动化测试，提高工作效率。红队成员 (Red Team Member): 进行模拟攻击演练。蓝队成员 (Blue Team Member): 分析平台输出的防御响应信息，改进防御策略。安全管理员 (Security Administrator): 监控平台运行状态，管理资产和剧本。产品目标与范围 2.1 业务目标提高攻防演练的自动化程度和效率。通过AI对话框，提供更自然、更智能的人机交互体验。通过 AI 赋能，提升攻击路径规划的智能化水平。提供全面的攻击效果验证和防守响应分析。降低人工攻防演练的成本和复杂性。常态化发现并修复企业内部潜在的安全风险。 2.2 产品范围本产品将覆盖从攻击剧本管理、智能规划、自动化执行、效果验证、报告生成到数据解读的全生命周期。 2.3 核心功能概览智能攻击剧本管理: 提供剧本的配置、编辑、调试及智能生成能力。 AI 驱动的攻击规划 (通过AI对话框交互): 基于AI智能规划攻击路径和任务，并通过对话框呈现和交互。人机协作与确认 (通过AI对话框交互): 关键环节提供人工审查与干预机制，通过对话形式完成。多类型资产自动化攻击: 支持对主机、邮件、边界等多种类型资产的自动化渗透。攻击验证与对抗分析: 实时验证攻击效果，并分析防守方的响应。可视化报告与数据解读: 生成专业报告，并提供智能化的数据分析与解读。数据集成与资产管理: 整合内外部安全数据，统一管理目标资产信息。功能需求 (Functional Requirements) 3.1 模块1: Prompt 攻击剧本配置库描述: 管理和配置用于智能攻防演练的各类攻击剧本。 FR-1.1 剧本管理: FR-1.1.1 剧本创建与编辑: 用户能够通过界面创建、编辑和保存攻击剧本。 FR-1.1.2 剧本调试: 提供剧本调试功能，确保剧本逻辑正确和有效性，调试后可保存。 FR-1.1.3 剧本分类: 支持将剧本分类为“全链路剧本”、“主机巡检剧本”、“边界巡检剧本”、“邮件剧本”等，方便查找和管理。 FR-1.1.4 剧本版本控制: 支持剧本的版本管理，可回溯历史版本。 FR-1.1.5 剧本导入/导出: 支持剧本的导入和导出功能。 3.2 模块2: AI Hacker Agent 核心引擎 (主要交互通过AI对话框实现) 描述: 平台的核心逻辑处理单元，负责攻击规划、任务分发、执行、对抗和总结。此模块与用户的交互将主要通过一个AI对话框界面进行，模拟人类对话，实现更自然高效的人机协作。 FR-2.1 AI Hacker Agent 对话交互界面: FR-2.1.1 对话输入: 用户可以通过自然语言在对话框中输入攻击目标、演练类型、特定约束或初始Prompt，作为规划Agent的输入。 FR-2.1.2 对话输出: 规划Agent生成的攻击计划、任务详情、疑问或需要用户确认的信息将以对话形式返回给用户。 FR-2.1.3 多轮对话支持: 支持多轮对话，允许用户逐步细化需求、澄清疑问或进行多次修改和确认。 FR-2.1.4 上下文理解: AI对话框能够理解对话上下文，并根据历史对话内容进行智能响应。 FR-2.2 攻击规划 Agent (集成于AI对话框后端): FR-2.2.1 智能路径规划: 根据AI对话框中接收到的用户需求和目标资产信息，智能分析并规划出可行的攻击路径和任务序列。 FR-2.2.2 剧本解析与分解: 能够解析复杂剧本，将其分解为可执行的原子任务。 FR-2.2.3 情报适配: 能够结合实时情报数据，调整攻击规划。 FR-2.2.4 规划呈现: 将生成的攻击计划以清晰、易懂的对话形式呈现给用户，可能包括图示或概览。 FR-2.3 人工确认/编辑 (通过AI对话框完成): FR-2.3.1 对话式审查与确认: 用户可以在AI对话框中审查规划Agent生成的攻击计划，并通过自然语言进行确认或提出修改意见。 FR-2.3.2 对话式修改与调整: 允许用户通过对话方式对攻击计划的局部或整体进行调整、修改或补充，AI根据用户指令进行重新规划或微调。 FR-2.3.3 审批与推进: 确认后的攻击计划通过对话框触发进入下一步执行阶段。 FR-2.4 Agent Router (任务分发): FR-2.4.1 任务调度: 根据AI对话框确认的攻击计划，将任务分发给相应的攻击执行Agent。 FR-2.4.2 并发与优先级管理: 支持多任务并发执行，并可配置任务优先级。 FR-2.5 攻击执行 Agent (Attack Execution Agent): FR-2.5.1 多类型执行能力: 生产主机巡检Agent：负责对生产环境主机进行漏洞扫描和渗透。办公主机巡检：负责对办公环境主机进行安全检查。邮件巡检：负责模拟邮件钓鱼、附件投递等攻击。边界巡检：负责对网络边界设备、服务进行扫描和渗透。全链路巡检：负责模拟完整的攻击链条，贯穿多个环节。 FR-2.5.2 任务执行与状态反馈: 实时执行接收到的攻击任务，并向核心引擎反馈执行状态（成功/失败/进行中）。 FR-2.5.3 数据采集: 攻击执行过程中，自动采集攻击结果数据，如漏洞发现、成功渗透的证据等。 FR-2.6 攻击对抗 Agent (Attack Confrontation Agent): FR-2.6.1 攻击验证: 接收攻击执行Agent的输出结果，自动验证攻击是否成功，例如通过Shell执行、文件创建、数据外传等方式验证。 FR-2.6.2 防守信息分析: 能够分析防守方的响应（如WAF告警、IDS拦截、终端防护阻断等），判断防守措施的有效性。 FR-2.6.3 失败反馈与迭代 (通过AI对话框提示): 若攻击失败，将失败信息反馈给规划Agent，并通过AI对话框向用户提示失败原因，促使规划Agent迭代生成新的攻击任务（形成自适应循环）。 FR-2.6.4 攻击步骤记录: 记录详细的攻击执行步骤和关键事件。 FR-2.7 演练总结 Agent (Exercise Summary Agent): FR-2.7.1 演练总结: 汇总攻击执行和对抗验证的结果，对整个演练过程进行总结。 FR-2.7.2 可视化报告生成: 基于演练数据，自动生成结构化、可视化的攻防演练报告。报告内容包括攻击路径、漏洞发现、攻击成功率、防守响应情况等。 FR-2.7.3 防守响应信息采集: 收集并整理防守响应的详细信息，为后续防御改进提供依据。 3.3 模块3: 攻击任务列表描述: 展示和管理所有历史及进行中的攻击任务。 FR-3.1 任务列表展示: 提供界面展示所有攻击任务，包括“全链路演练任务”、“生产主机”、“边界巡检”、“办公主机”、“邮件巡检”等类型。 FR-3.2 任务状态: 清晰展示每个任务的当前状态（待启动、进行中、已完成、失败等）。 FR-3.3 任务详情查看: 用户可点击任务查看详细执行进度、结果摘要。 FR-3.4 任务创建: 允许用户手动创建攻击任务（除了Agent自动创建的任务）。 3.4 模块4: 攻击数据解读描述: 对攻防演练的结果数据进行深度分析和智能解读。 FR-4.1 总结报告生成: 自动生成完整、专业的总结报告，涵盖攻防演练的各个方面。 FR-4.2 情况分析与要点提取: 对演练过程中发现的威胁、漏洞和防守弱点进行智能分析，提取关键要点和建议。 FR-4.3 Chat 对话解读: 提供基于自然语言处理的交互式解读功能，用户可以通过对话方式查询演练结果，获取更深层次的洞察。 FR-4.4 结果推送: 支持将报告和关键结果通过邮件、IM等方式推送到指定接收人。 3.5 模块5: MCP Tools (管理控制平台工具) 描述: 提供平台管理、剧本调用、资产选择和Agent管理等辅助工具。 FR-5.1 剧本调用: 用户可在界面上直接选择和调用已有的攻击剧本发起演练。 FR-5.2 资产选择: 提供资产选择器，用户可指定攻击目标资产（如特定主机、IP段、应用等）。 FR-5.3 垂类巡检管理: 支持对特定垂类巡检（主机、邮件、边界）进行配置和管理。 FR-5.4 新 Agent 管理: 允许系统管理员注册和管理新的攻击 Agent，如“浏览器/远程shell执行”等，以扩展攻击能力。 FR-5.5 攻击任务创建: 提供用户界面，允许用户通过MCP Tools手动创建攻击任务。 3.6 模块6: 数据管理与集成描述: 负责平台所需数据的存储、管理和外部数据集成。 FR-6.1 攻击剧本库 (5): FR-6.1.1 DLP 剧本: 存储数据防泄漏相关的攻击剧本。 FR-6.1.2 ATT&CK 攻击剧本: 存储基于 MITRE ATT&CK 框架的攻击剧本。 FR-6.1.3 攻击剧本生成 Agent: 具备根据用户输入或历史数据智能生成新攻击剧本的能力。 FR-6.2 资产库 (Asset Library): FR-6.2.1 人员信息数据: 存储与攻防演练相关的人员信息。 FR-6.2.2 设备库 (Mac/Win): 存储企业内部 Mac/Windows 设备信息。 FR-6.2.2 应用数据: 存储企业应用系统信息（URL、端口、版本等）。 FR-6.2.4 IP 数据: 存储 IP 地址资产信息。 FR-6.2.5 RASP 部署率: 记录应用程序运行时自我保护（RASP）的部署情况。 FR-6.2.6 ATP 版本: 记录高级威胁防护（ATP）系统的版本信息。 FR-6.3 外部引入数据: FR-6.3.1 云亮心跳: 集成外部云安全平台的实时心跳数据。 FR-6.3.2 其他外部威胁情报/漏洞库: 支持集成其他外部安全数据源。 FR-6.4 数据采集: FR-6.4.1 攻击结果: 集中存储所有攻击执行Agent产出的攻击结果数据。 FR-6.4.2 攻击返回详情: 存储攻击过程中返回的详细信息和日志。 FR-6.4.3 防守响应信息: 存储防守方（如安全设备、安全团队）的响应数据。非功能性需求 (Non-Functional Requirements) 4.1 性能 (Performance) 响应时间: 核心操作（如攻击规划生成、任务分发）应在秒级响应。AI对话框的响应时间应低于2秒，以保证流畅的交互体验。并发能力: 平台应支持同时执行多个攻击任务，且不影响整体性能。吞吐量: 能够处理大量数据采集和报告生成任务。 4.2 安全性 (Security) 权限管理: 严格的用户角色和权限控制，确保数据和操作的隔离。数据加密: 敏感数据（如攻击剧本内容、资产信息、对话内容）在存储和传输过程中应加密。审计日志: 记录所有关键操作和系统事件，便于溯源和审计，包括AI对话框中的关键交互。沙箱机制: 攻击执行Agent应具备沙箱机制，防止攻击行为对生产环境造成不可控影响。 4.3 可用性 (Usability) 用户界面 (UI): 直观、简洁、易于操作的图形用户界面，AI对话框界面应符合主流对话式AI产品的设计规范，提供良好的视觉和交互反馈。用户体验 (UX): 提供流畅的工作流，减少用户操作路径。AI对话框应能够智能引导用户，降低操作复杂性，提升人机协作效率。帮助文档: 提供清晰的用户手册和在线帮助。 4.4 可靠性 (Reliability) 容错性: 系统应具备良好的容错机制，单个模块故障不影响整体系统运行。数据备份与恢复: 定期进行数据备份，并提供快速恢复机制。稳定性: 系统长时间稳定运行，故障率低。 4.5 可扩展性 (Scalability) 模块化设计: 系统采用模块化设计，方便新增功能和Agent。 Agent 扩展: 能够方便地接入新的攻击 Agent 类型。数据存储扩展: 支持存储容量的水平扩展。 AI能力扩展: 能够方便地集成新的AI模型或自然语言处理能力，以提升对话交互的智能性。 4.6 可维护性 (Maintainability) 代码规范: 遵循统一的代码开发规范。日志系统: 完善的日志系统，方便故障排查和性能监控。配置管理: 灵活的配置管理，支持运行时调整。 4.7 兼容性 (Compatibility) 浏览器兼容: 支持主流现代浏览器。操作系统兼容: 攻击Agent应能兼容主流操作系统（Windows, Linux, macOS）。数据接口兼容: 提供标准API接口，方便与第三方系统集成。技术架构概述 (Architecture Overview) （本PRD基于架构图生成，此处仅为对架构图的简要描述，详细架构设计将在技术设计文档中体现）本平台采用分布式 Agent 架构，以 AI Hacker Agent 为核心，实现攻击规划、执行、验证和总结的自动化流程。 Prompt 攻击剧本配置库: 集中管理各类攻击剧本。 AI Hacker Agent: 核心交互层，通过AI对话框作为用户与规划Agent、人工确认/编辑的主要接口。规划 Agent: 基于 AI 智能生成攻击路径。人工确认/编辑: 人机协作的审查环节，通过对话形式进行。 Agent Router: 负责任务分发。攻击执行 Agent 集群: 包括生产主机、办公主机、邮件、边界和全链路等多种类型的执行 Agent，部署在目标环境附近，进行实际攻击操作。攻击对抗 Agent: 负责攻击效果的验证和防守方响应的分析。演练总结 Agent: 生成可视化报告和总结。数据层: 包含攻击剧本库、资产库和外部引入数据，为 Agent 提供数据支撑，并收集攻击结果、防御响应等数据。 MCP Tools: 提供用户操作界面和管理功能。攻击任务列表 & 攻击数据解读: 提供任务监控、报告展示和智能分析能力。附录术语表: (待补充，如Agent, Prompt, RASP, ATP, NLU等) 参考文档: (如相关行业标准、技术规范等) - Initial Deployment

d8c6121 verified 7 months ago

raw

history blame contribute delete

47.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Hacker Agent - Intelligent Cyber Attack Simulation</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>
	/* Custom CSS for animations and special effects */
	.chat-message-enter {
	opacity: 0;
	transform: translateY(10px);
	}
	.chat-message-enter-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 300ms, transform 300ms;
	}
	.attack-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 2s linear forwards;
	}
	@keyframes dash {
	to {
	stroke-dashoffset: 0;
	}
	}
	.glowing-border {
	animation: pulse 2s infinite;
	}
	@keyframes pulse {
	0%, 100% {
	box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
	}
	50% {
	box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
	}
	}
	.attack-animation {
	animation: attackPulse 1.5s infinite;
	}
	@keyframes attackPulse {
	0%, 100% {
	transform: scale(1);
	box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
	}
	50% {
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(220, 38, 38, 0.8);
	}
	}
	.rotate-icon {
	animation: spin 2s linear infinite;
	}
	@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}
	.terminal-font {
	font-family: 'Courier New', monospace;
	}
	</style>
	</head>
	<body class="bg-gray-900 text-gray-100">
	<!-- Main Container -->
	<div class="flex flex-col h-screen">
	<!-- Header -->
	<header class="bg-gray-800 border-b border-gray-700 p-4 flex items-center justify-between">
	<div class="flex items-center space-x-3">
	<div class="bg-blue-500 p-2 rounded-full">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<h1 class="text-2xl font-bold">AI Hacker Agent</h1>
	<span class="px-2 py-1 bg-green-600 rounded-md text-xs font-semibold">v2.0</span>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative group">
	<button class="p-2 rounded-full hover:bg-gray-700">
	<i class="fas fa-bell text-gray-400"></i>
	<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
	</button>
	<div class="hidden group-hover:block absolute right-0 mt-2 w-64 bg-gray-800 border border-gray-700 rounded-md shadow-lg z-10">
	<div class="p-3 border-b border-gray-700">
	<p class="text-sm font-semibold">3 New Alerts</p>
	</div>
	<div class="p-3 text-sm">
	<p class="mb-2"><span class="text-red-400">[Critical]</span> Unauthorized access detected</p>
	<p class="mb-2"><span class="text-yellow-400">[Warning]</span> New CVE-2023-1234 found</p>
	<p><span class="text-blue-400">[Info]</span> System update available</p>
	</div>
	</div>
	</div>
	<div class="flex items-center space-x-2 cursor-pointer">
	<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
	<span class="font-semibold">SA</span>
	</div>
	<span class="text-sm">Security Admin</span>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<div class="flex flex-1 overflow-hidden">
	<!-- Sidebar -->
	<aside class="w-64 bg-gray-800 border-r border-gray-700 flex flex-col">
	<div class="p-4 border-b border-gray-700">
	<h2 class="text-lg font-semibold">Navigation</h2>
	</div>
	<nav class="flex-1 overflow-y-auto">
	<ul>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700 text-blue-400">
	<i class="fas fa-comment-dots mr-3"></i>
	<span>AI Dialog</span>
	</a>
	</li>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700">
	<i class="fas fa-scroll mr-3"></i>
	<span>Attack Scripts</span>
	</a>
	</li>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700">
	<i class="fas fa-list-check mr-3"></i>
	<span>Task List</span>
	</a>
	</li>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700">
	<i class="fas fa-chart-pie mr-3"></i>
	<span>Data Analysis</span>
	</a>
	</li>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700">
	<i class="fas fa-building-shield mr-3"></i>
	<span>Asset Management</span>
	</a>
	</li>
	<li>
	<a href="#" class="flex items-center p-3 hover:bg-gray-700">
	<i class="fas fa-toolbox mr-3"></i>
	<span>MCP Tools</span>
	</a>
	</li>
	</ul>
	</nav>
	<div class="p-4 border-t border-gray-700">
	<div class="bg-gray-900 rounded-lg p-3">
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center mr-3">
	<i class="fas fa-shield-halved"></i>
	</div>
	<div>
	<h4 class="font-medium text-sm">System Status</h4>
	<div class="flex items-center">
	<div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
	<span class="text-xs">All systems operational</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</aside>

	<!-- Main Panel -->
	<main class="flex-1 flex flex-col overflow-hidden bg-gray-900">
	<!-- Task Header -->
	<div class="p-4 border-b border-gray-700 flex items-center justify-between">
	<div>
	<h2 class="text-xl font-bold">AI Dialog Interface</h2>
	<p class="text-sm text-gray-400">Natural language interaction with AI Hacker Agent</p>
	</div>
	<div>
	<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md mr-2">
	<i class="fas fa-plus mr-2"></i> New Attack Simulation
	</button>
	<button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-md">
	<i class="fas fa-question mr-2"></i> Help
	</button>
	</div>
	</div>

	<!-- Main Content Area -->
	<div class="flex-1 flex overflow-hidden">
	<!-- Left Panel - Chat Interface -->
	<div class="w-1/2 border-r border-gray-700 flex flex-col">
	<!-- Chat Header -->
	<div class="p-4 border-b border-gray-700 flex items-center">
	<div class="relative">
	<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<span class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></span>
	</div>
	<div>
	<h3 class="font-semibold">AI Hacker Agent</h3>
	<p class="text-xs text-gray-400">Online - Ready to assist</p>
	</div>
	</div>

	<!-- Chat Messages -->
	<div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4">
	<!-- AI Welcome Message -->
	<div class="flex animate-[chat-message-enter_0.3s_ease-out]">
	<div class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<div>
	<div class="bg-gray-800 rounded-lg p-3 max-w-[80%]">
	<p>Welcome to AI Hacker Agent v2.0. I'm your AI assistant for intelligent cyber attack simulations.</p>
	<p class="mt-2">How can I help you with your security testing today? Here are some examples:</p>
	<ul class="list-disc pl-5 mt-2 space-y-1 text-blue-300">
	<li>"Perform a full network penetration test"</li>
	<li>"Check for SQL injection vulnerabilities"</li>
	<li>"Simulate a phishing email campaign"</li>
	</ul>
	</div>
	<div class="text-xs text-gray-500 mt-1">Today at 10:02 AM</div>
	</div>
	</div>

	<!-- User Example Message -->
	<div class="flex justify-end animate-[chat-message-enter_0.3s_ease-out]">
	<div>
	<div class="bg-blue-600 rounded-lg p-3 max-w-[80%] ml-auto">
	<p>I want to simulate an advanced persistent threat against our web applications and internal network.</p>
	</div>
	<div class="text-xs text-gray-500 mt-1 text-right">Today at 10:03 AM</div>
	</div>
	</div>

	<!-- AI Response -->
	<div class="flex animate-[chat-message-enter_0.3s_ease-out]">
	<div class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<div>
	<div class="bg-gray-800 rounded-lg p-3 max-w-[80%]">
	<p class="font-medium mb-2">I've generated an attack simulation plan targeting web applications and internal networks:</p>

	<div class="bg-gray-900 rounded-md p-3 mb-3 border border-gray-700">
	<h4 class="font-semibold text-blue-300 text-sm mb-1">Attack Simulation Plan</h4>
	<ol class="list-decimal pl-5 space-y-1 text-sm">
	<li>Web Application Scanning (SQLi, XSS, RCE)</li>
	<li>Credential Stuffing via Exposed APIs</li>
	<li>Lateral Movement via SMB/AD Exploits</li>
	<li>Data Exfiltration Simulation</li>
	</ol>
	<div class="flex space-x-2 mt-3">
	<button class="text-xs px-2 py-1 bg-green-600 hover:bg-green-700 rounded">
	<i class="fas fa-check mr-1"></i> Approve
	</button>
	<button class="text-xs px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded" onclick="showEditOptions()">
	<i class="fas fa-pen mr-1"></i> Edit
	</button>
	<button class="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 rounded">
	<i class="fas fa-times mr-1"></i> Reject
	</button>
	</div>
	</div>

	<p>Would you like me to proceed with this plan or make adjustments?</p>
	</div>
	<div class="text-xs text-gray-500 mt-1">Today at 10:03 AM</div>
	</div>
	</div>
	</div>

	<!-- Input Area -->
	<div class="p-4 border-t border-gray-700">
	<div class="flex items-center space-x-2">
	<button class="p-2 rounded-full hover:bg-gray-700">
	<i class="fas fa-paperclip text-gray-400"></i>
	</button>
	<div class="flex-1 relative">
	<input type="text" id="chat-input" placeholder="Type your message or attack request..."
	class="w-full bg-gray-800 rounded-full py-3 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500">
	<button class="absolute right-3 top-3 text-gray-400 hover:text-blue-400">
	<i class="far fa-smile"></i>
	</button>
	</div>
	<button id="send-button" class="p-3 rounded-full bg-blue-600 hover:bg-blue-700">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	<div class="mt-2 text-xs text-gray-500 flex justify-between">
	<div>
	<span class="cursor-pointer hover:text-blue-400"><i class="fas fa-magic mr-1"></i> AI Suggestions</span>
	<span class="mx-2">\|</span>
	<span class="cursor-pointer hover:text-blue-400"><i class="fas fa-history mr-1"></i> History</span>
	</div>
	<div>
	<span class="cursor-pointer hover:text-blue-400">Advanced Options</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Right Panel - Attack Visualization -->
	<div class="w-1/2 flex flex-col bg-gray-800">
	<!-- Attack Visualization Header -->
	<div class="p-4 border-b border-gray-700 flex justify-between items-center">
	<h3 class="font-semibold">Attack Simulation Dashboard</h3>
	<div class="flex space-x-2">
	<button class="p-2 rounded hover:bg-gray-700 text-sm">
	<i class="fas fa-sync-alt mr-1"></i> Refresh
	</button>
	<button class="p-2 rounded hover:bg-gray-700 text-sm">
	<i class="fas fa-sliders-h mr-1"></i> Filters
	</button>
	</div>
	</div>

	<!-- Attack Strategy Visualization -->
	<div class="p-4 border-b border-gray-700">
	<h4 class="font-medium text-sm mb-3 flex items-center">
	<i class="fas fa-project-diagram mr-2 text-blue-400"></i>
	Planned Attack Path
	</h4>
	<div class="relative overflow-auto bg-gray-900 rounded-lg p-4 h-48 flex items-center justify-center glowing-border">
	<svg width="100%" height="100%" viewBox="0 0 400 160" class="min-w-[400px]">
	<!-- Web Server -->
	<rect x="10" y="50" width="80" height="60" rx="5" fill="none" stroke="#3B82F6" stroke-width="2" class="attack-animation" />
	<text x="50" y="90" text-anchor="middle" fill="#fff" font-size="12" font-family="Arial">Web App</text>

	<!-- First Arrow -->
	<path d="M100,80 L130,80" stroke="#3B82F6" stroke-width="2" marker-end="url(#arrowhead)" class="attack-path" />

	<!-- API Gateway -->
	<rect x="140" y="50" width="80" height="60" rx="5" fill="none" stroke="#3B82F6" stroke-width="2" />
	<text x="180" y="90" text-anchor="middle" fill="#fff" font-size="12" font-family="Arial">API</text>

	<!-- Second Arrow -->
	<path d="M230,80 L260,80" stroke="#3B82F6" stroke-width="2" marker-end="url(#arrowhead)" class="attack-path" />

	<!-- Database -->
	<rect x="270" y="50" width="80" height="60" rx="5" fill="none" stroke="#3B82F6" stroke-width="2" />
	<text x="310" y="90" text-anchor="middle" fill="#fff" font-size="12" font-family="Arial">Database</text>

	<!-- Arrowhead definition -->
	<defs>
	<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
	<polygon points="0 0, 10 3.5, 0 7" fill="#3B82F6"/>
	</marker>
	</defs>
	</svg>
	</div>
	</div>

	<!-- Attack Execution Status -->
	<div class="p-4 border-b border-gray-700">
	<h4 class="font-medium text-sm mb-3 flex items-center">
	<i class="fas fa-tasks mr-2 text-green-400"></i>
	Current Task Status
	</h4>
	<div class="space-y-3">
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-3 h-3 rounded-full bg-yellow-400 mr-2 animate-pulse"></div>
	<span class="text-sm">Web Application Scanning</span>
	</div>
	<span class="text-xs bg-gray-700 px-2 py-1 rounded">In Progress</span>
	</div>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
	<span class="text-sm text-gray-400">Credential Stuffing</span>
	</div>
	<span class="text-xs bg-gray-700 px-2 py-1 rounded">Pending</span>
	</div>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
	<span class="text-sm text-gray-400">Lateral Movement</span>
	</div>
	<span class="text-xs bg-gray-700 px-2 py-1 rounded">Pending</span>
	</div>
	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-3 h-3 rounded-full bg-gray-500 mr-2"></div>
	<span class="text-sm text-gray-400">Data Exfiltration</span>
	</div>
	<span class="text-xs bg-gray-700 px-2 py-1 rounded">Pending</span>
	</div>
	</div>
	</div>

	<!-- Asset Details -->
	<div class="p-4 border-b border-gray-700">
	<h4 class="font-medium text-sm mb-3 flex items-center">
	<i class="fas fa-server mr-2 text-purple-400"></i>
	Targeted Assets
	</h4>
	<div class="grid grid-cols-2 gap-2 text-sm">
	<div class="bg-gray-900 p-2 rounded border border-gray-700">
	<div class="flex items-center">
	<i class="fas fa-globe mr-2 text-blue-400"></i>
	<span>Web Server (192.168.1.50)</span>
	</div>
	</div>
	<div class="bg-gray-900 p-2 rounded border border-gray-700">
	<div class="flex items-center">
	<i class="fas fa-database mr-2 text-green-400"></i>
	<span>PostgreSQL (192.168.1.51)</span>
	</div>
	</div>
	<div class="bg-gray-900 p-2 rounded border border-gray-700">
	<div class="flex items-center">
	<i class="fas fa-network-wired mr-2 text-yellow-400"></i>
	<span>Internal Network (/24)</span>
	</div>
	</div>
	<div class="bg-gray-900 p-2 rounded border border-gray-700">
	<div class="flex items-center">
	<i class="fas fa-users mr-2 text-red-400"></i>
	<span>Active Directory</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Quick Actions -->
	<div class="p-4">
	<h4 class="font-medium text-sm mb-3 flex items-center">
	<i class="fas fa-bolt mr-2 text-yellow-400"></i>
	Quick Actions
	</h4>
	<div class="grid grid-cols-3 gap-2">
	<button class="bg-gray-700 hover:bg-gray-600 p-2 rounded-md text-xs">
	<i class="fas fa-stop mr-1"></i> Stop
	</button>
	<button class="bg-blue-600 hover:bg-blue-700 p-2 rounded-md text-xs">
	<i class="fas fa-pause mr-1"></i> Pause
	</button>
	<button class="bg-green-600 hover:bg-green-700 p-2 rounded-md text-xs">
	<i class="fas fa-play mr-1"></i> Resume
	</button>
	<button class="bg-purple-600 hover:bg-purple-700 p-2 rounded-md text-xs">
	<i class="fas fa-file-export mr-1"></i> Export
	</button>
	<button class="bg-yellow-600 hover:bg-yellow-700 p-2 rounded-md text-xs">
	<i class="fas fa-stopwatch mr-1"></i> Schedule
	</button>
	<button class="bg-red-600 hover:bg-red-700 p-2 rounded-md text-xs">
	<i class="fas fa-trash mr-1"></i> Delete
	</button>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<!-- Edit Attack Plan Modal -->
	<div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-gray-800 rounded-lg w-1/2 max-w-2xl">
	<div class="p-4 border-b border-gray-700 flex justify-between items-center">
	<h3 class="font-semibold">Edit Attack Simulation Plan</h3>
	<button onclick="hideEditOptions()" class="text-gray-400 hover:text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="p-4">
	<div class="space-y-4">
	<div class="bg-gray-900 p-3 rounded border border-gray-700">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-medium flex items-center">
	<i class="fas fa-globe mr-2 text-blue-400"></i>
	Web Application Scanning
	</h4>
	<label class="inline-flex items-center cursor-pointer">
	<input type="checkbox" checked class="sr-only peer">
	<div class="relative w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
	</label>
	</div>
	<div class="pl-8">
	<div class="flex items-center mb-1">
	<input id="web-sqli" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="web-sqli" class="ms-2 text-sm">SQL Injection</label>
	</div>
	<div class="flex items-center mb-1">
	<input id="web-xss" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="web-xss" class="ms-2 text-sm">Cross-Site Scripting (XSS)</label>
	</div>
	<div class="flex items-center">
	<input id="web-rce" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="web-rce" class="ms-2 text-sm">Remote Code Execution</label>
	</div>
	</div>
	</div>

	<div class="bg-gray-900 p-3 rounded border border-gray-700">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-medium flex items-center">
	<i class="fas fa-key mr-2 text-green-400"></i>
	Credential Stuffing
	</h4>
	<label class="inline-flex items-center cursor-pointer">
	<input type="checkbox" checked class="sr-only peer">
	<div class="relative w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
	</label>
	</div>
	<div class="pl-8">
	<div class="mb-2">
	<label class="block text-sm mb-1">Target API Endpoint</label>
	<input type="text" value="/api/v1/login" class="bg-gray-800 border border-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
	</div>
	<div class="flex items-center mb-1">
	<input id="use-dictionary" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="use-dictionary" class="ms-2 text-sm">Use Dictionary Attack</label>
	</div>
	<div class="flex items-center">
	<input id="use-cred-stuffing" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="use-cred-stuffing" class="ms-2 text-sm">Use Known Credentials</label>
	</div>
	</div>
	</div>

	<div class="bg-gray-900 p-3 rounded border border-gray-700">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-medium flex items-center">
	<i class="fas fa-arrows-alt mr-2 text-yellow-400"></i>
	Lateral Movement
	</h4>
	<label class="inline-flex items-center cursor-pointer">
	<input type="checkbox" checked class="sr-only peer">
	<div class="relative w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
	</label>
	</div>
	<div class="pl-8">
	<div class="mb-2">
	<label class="block text-sm mb-1">Target Protocol</label>
	<select class="bg-gray-800 border border-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
	<option selected>SMB</option>
	<option>RDP</option>
	<option>Active Directory</option>
	</select>
	</div>
	<div class="flex items-center mb-1">
	<input id="detect-defenses" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="detect-defenses" class="ms-2 text-sm">Detect Defensive Measures</label>
	</div>
	</div>
	</div>

	<div class="bg-gray-900 p-3 rounded border border-gray-700">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-medium flex items-center">
	<i class="fas fa-file-export mr-2 text-red-400"></i>
	Data Exfiltration
	</h4>
	<label class="inline-flex items-center cursor-pointer">
	<input type="checkbox" checked class="sr-only peer">
	<div class="relative w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
	</label>
	</div>
	<div class="pl-8">
	<div class="mb-2">
	<label class="block text-sm mb-1">Exfiltration Method</label>
	<select class="bg-gray-800 border border-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
	<option selected>DNS Tunneling</option>
	<option>HTTP POST</option>
	<option>ICMP</option>
	</select>
	</div>
	<div class="flex items-center">
	<input id="size-limit" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500">
	<label for="size-limit" class="ms-2 text-sm">Limit Data Size (1MB)</label>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="p-4 border-t border-gray-700 flex justify-end space-x-3">
	<button onclick="hideEditOptions()" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-md">
	Cancel
	</button>
	<button onclick="saveEditedPlan()" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md">
	<i class="fas fa-save mr-2"></i> Save Changes
	</button>
	</div>
	</div>
	</div>

	<script>
	// Function to show edit modal
	function showEditOptions() {
	document.getElementById('edit-modal').classList.remove('hidden');
	}

	// Function to hide edit modal
	function hideEditOptions() {
	document.getElementById('edit-modal').classList.add('hidden');
	}

	// Function to save edited plan
	function saveEditedPlan() {
	// In a real app, this would send data to the backend
	hideEditOptions();

	// Add a message to the chat
	const chatMessages = document.getElementById('chat-messages');
	const newMessage = document.createElement('div');
	newMessage.className = 'flex justify-end animate-[chat-message-enter_0.3s_ease-out]';
	newMessage.innerHTML = `
	<div>
	<div class="bg-blue-600 rounded-lg p-3 max-w-[80%] ml-auto">
	<p>I've reviewed and edited the attack plan. Please proceed with these adjustments.</p>
	</div>
	<div class="text-xs text-gray-500 mt-1 text-right">Just now</div>
	</div>
	`;
	chatMessages.appendChild(newMessage);

	// Scroll to bottom
	chatMessages.scrollTop = chatMessages.scrollHeight;

	// Simulate AI response
	setTimeout(() => {
	const aiResponse = document.createElement('div');
	aiResponse.className = 'flex animate-[chat-message-enter_0.3s_ease-out]';
	aiResponse.innerHTML = `
	<div class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<div>
	<div class="bg-gray-800 rounded-lg p-3 max-w-[80%]">
	<p class="font-medium mb-1">Thank you for your adjustments. I'll update the attack simulation plan accordingly.</p>
	<div class="flex space-x-2 mt-2">
	<button class="text-xs px-2 py-1 bg-green-600 hover:bg-green-700 rounded">
	<i class="fas fa-play mr-1"></i> Start Simulation
	</button>
	<button class="text-xs px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded">
	<i class="fas fa-eye mr-1"></i> Preview Changes
	</button>
	</div>
	</div>
	<div class="text-xs text-gray-500 mt-1">Just now</div>
	</div>
	`;
	chatMessages.appendChild(aiResponse);

	// Scroll to bottom
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}, 1500);
	}

	// Handle send button click
	document.getElementById('send-button').addEventListener('click', function() {
	const input = document.getElementById('chat-input');
	const message = input.value.trim();

	if (message) {
	const chatMessages = document.getElementById('chat-messages');

	// Add user message
	const userMessage = document.createElement('div');
	userMessage.className = 'flex justify-end animate-[chat-message-enter_0.3s_ease-out]';
	userMessage.innerHTML = `
	<div>
	<div class="bg-blue-600 rounded-lg p-3 max-w-[80%] ml-auto">
	<p>${message}</p>
	</div>
	<div class="text-xs text-gray-500 mt-1 text-right">Just now</div>
	</div>
	`;
	chatMessages.appendChild(userMessage);

	// Clear input
	input.value = '';

	// Scroll to bottom
	chatMessages.scrollTop = chatMessages.scrollHeight;

	// Simulate AI thinking
	const thinkingDiv = document.createElement('div');
	thinkingDiv.className = 'flex animate-[chat-message-enter_0.3s_ease-out]';
	thinkingDiv.innerHTML = `
	<div class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<div>
	<div class="bg-gray-800 rounded-lg p-3 max-w-[80%] flex items-center">
	<div class="animate-pulse mr-2">AI is thinking</div>
	<div class="flex space-x-1">
	<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
	<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
	<div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
	</div>
	</div>
	</div>
	`;
	chatMessages.appendChild(thinkingDiv);

	// Scroll to bottom again
	chatMessages.scrollTop = chatMessages.scrollHeight;

	// Simulate AI response after delay
	setTimeout(() => {
	// Remove thinking message
	chatMessages.removeChild(thinkingDiv);

	// Add AI response
	const aiResponse = document.createElement('div');
	aiResponse.className = 'flex animate-[chat-message-enter_0.3s_ease-out]';
	aiResponse.innerHTML = `
	<div class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center mr-3">
	<i class="fas fa-robot text-white"></i>
	</div>
	<div>
	<div class="bg-gray-800 rounded-lg p-3 max-w-[80%]">
	<p class="font-medium mb-2">I've analyzed your request and prepared a detailed attack simulation plan:</p>

	<div class="bg-gray-900 rounded-md p-3 mb-3 border border-gray-700">
	<h4 class="font-semibold text-blue-300 text-sm mb-1">Attack Simulation Plan</h4>
	<ol class="list-decimal pl-5 space-y-1 text-sm">
	<li>Initial Reconnaissance (Port Scanning)</li>
	<li>Vulnerability Assessment</li>
	<li>Exploitation Attempts</li>
	<li>Post-Exploitation Activities</li>
	<li>Data Collection & Exfiltration</li>
	</ol>
	<div class="flex space-x-2 mt-3">
	<button class="text-xs px-2 py-1 bg-green-600 hover:bg-green-700 rounded">
	<i class="fas fa-check mr-1"></i> Approve
	</button>
	<button class="text-xs px-2 py-1 bg-blue-600 hover:bg-blue-700 rounded" onclick="showEditOptions()">
	<i class="fas fa-pen mr-1"></i> Edit
	</button>
	<button class="text-xs px-2 py-1 bg-red-600 hover:bg-red-700 rounded">
	<i class="fas fa-times mr-1"></i> Reject
	</button>
	</div>
	</div>

	<p>Would you like me to proceed with this simulation?</p>
	</div>
	<div class="text-xs text-gray-500 mt-1">Just now</div>
	</div>
	`;
	chatMessages.appendChild(aiResponse);

	// Scroll to bottom
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}, 2000);
	}
	});

	// Handle Enter key in chat input
	document.getElementById('chat-input').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	document.getElementById('send-button').click();
	}
	});
	</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/bas555" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>