设计一个“实验室管理系统”的后台页面，模块名称为“数据分析决策子系统”。页面用于展示实验运行的多维度数据统计和趋势分析，支持图表展示、维度切换、关键指标查看等功能。页面风格专业蓝白色，支持大屏查看。 --- ### 1. 顶部页头 - 系统名称：“实验室管理系统” - 当前模块标题：“数据分析决策子系统” - 页头右侧显示当前用户：admin，带头像和退出菜单 - 背景为深蓝色，白色字体，科技感强 --- ### 2. 左侧导航菜单（灰色背景） 菜单项包括： - 实验计划管理 - 实验任务管理 - 实验设备管理 - 实验场地管理 - ✅ 数据分析决策（当前高亮） - 系统设置 --- ### 3. 主页面内容（右侧） 页面布局为多个**统计卡片 + 图表面板 + 数据维度切换区**组合，分模块展示。 --- #### 3.1 核心指标统计卡片区（顶部四个横向卡片） 每个卡片以图标 + 主要数字 + 简短描述组成： - 📅 本月新增实验计划：32 项 - ✅ 当前进行中任务：14 个 - 🧪 本季度使用设备次数：216 次 - 🧱 实验场地利用率：78.4% 卡片背景为浅蓝、浅绿、浅紫、浅橙，视觉对比强，图标美观 --- #### 3.2 数据分析图表区（中部主模块） 采用 2 行 × 2 列布局，共 4 个核心图表区域： **图表1：任务完成趋势（折线图）** - X轴为月份，Y轴为已完成任务数量 - 显示近12个月的变化趋势 - 可切换查看不同实验类别趋势（环境、电磁、计量） **图表2：实验计划状态分布（饼图）** - 展示当前计划状态占比（未开始、进行中、已完成、暂停） - 彩色标签高对比显示 **图表3：设备使用强度（柱状图）** - 横轴为设备名称或类别（最多前10项） - 纵轴为使用频次 - 可切换为“按部门分类”或“按类型分类” **图表4：场地利用时段热力图（时间热力图）** - 横轴为小时（0~24），纵轴为实验场地 - 颜色越深表示利用率越高，适用于资源调度优化 --- #### 3.3 数据维度筛选区（可选上方浮动筛选栏） - 日期范围选择器（默认显示最近30天） - 筛选条件：实验类别 / 所属部门 / 负责人 - 筛选按钮（蓝色），重置按钮 --- #### 3.4 页面底部：数据导出与报告功能 - 导出按钮：支持导出当前筛选数据为PDF/Excel - 生成月度统计报告按钮（灰色） - 按钮组右侧备注：“统计结果来源于系统各模块，支持自定义模板” --- ### 页面风格要求： - 全页面响应式设计，适配大屏、笔记本 - 图表样式统一（ECharts风格），色彩有序不跳色 - 使用现代仪表盘风格布局，卡片+图表混排 - 文字简洁，图表说明清晰，交互友好 - Initial Deployment
2c2d3f7
verified
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>实验室管理系统 | 数据分析决策子系统</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0d2869', | |
| secondary: '#1890ff', | |
| darkblue: '#091a44', | |
| lightblue: '#e6f7ff', | |
| }, | |
| boxShadow: { | |
| 'dashboard': '0 4px 20px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.1)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 220px 1fr; | |
| grid-template-rows: 70px 1fr auto; | |
| height: 100vh; | |
| } | |
| .sidebar { | |
| grid-row: 1 / span 3; | |
| } | |
| .header { | |
| grid-column: 2; | |
| } | |
| .main-container { | |
| grid-column: 2; | |
| overflow-y: scroll; | |
| } | |
| .footer { | |
| grid-column: 2; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 340px; | |
| width: 100%; | |
| } | |
| .heatmap-grid { | |
| display: grid; | |
| grid-template-columns: repeat(24, 1fr); | |
| grid-template-rows: repeat(4, 20px); | |
| grid-gap: 3px; | |
| margin-top: 10px; | |
| } | |
| .heatmap-cell { | |
| border-radius: 2px; | |
| cursor: pointer; | |
| } | |
| .avatar-ring { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: linear-gradient(135deg, #60c7ff, #456ff8); | |
| } | |
| /* Custom scrollbar for the main container */ | |
| .main-container::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .main-container::-webkit-scrollbar-track { | |
| background: #f7f9fc; | |
| } | |
| .main-container::-webkit-scrollbar-thumb { | |
| background-color: #c5d0e6; | |
| border-radius: 4px; | |
| } | |
| .main-container::-webkit-scrollbar-thumb:hover { | |
| background-color: #a3b1d0; | |
| } | |
| .stat-card { | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .nav-item { | |
| position: relative; | |
| transition: all 0.2s; | |
| } | |
| .nav-item.active::before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| height: 60%; | |
| width: 4px; | |
| background: #1890ff; | |
| border-top-right-radius: 3px; | |
| border-bottom-right-radius: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-grid bg-gray-50"> | |
| <!-- 顶部页头 --> | |
| <header class="header bg-primary text-white flex items-center justify-between px-7 border-b border-primary/70"> | |
| <div class="flex items-center"> | |
| <h1 class="text-xl font-bold mr-6">实验室管理系统</h1> | |
| <div class="flex items-center"> | |
| <div class="w-px h-6 bg-gray-400/30 mx-4"></div> | |
| <div class="font-medium text-blue-100"> | |
| <i class="fas fa-chart-pie mr-2"></i> | |
| 数据分析决策子系统 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group"> | |
| <div class="flex items-center cursor-pointer py-2"> | |
| <div class="avatar-ring"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div class="ml-3 text-sm">admin</div> | |
| <i class="fas fa-chevron-down ml-2 text-sm opacity-80"></i> | |
| </div> | |
| <div class="absolute bg-white rounded-lg shadow-lg py-2 right-0 w-44 top-full mt-1 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-200 z-10"> | |
| <div class="text-gray-700 py-2 px-4 hover:bg-gray-50 cursor-pointer flex items-center"> | |
| <i class="fas fa-user-circle text-gray-500 mr-3 w-5"></i> | |
| <span>个人中心</span> | |
| </div> | |
| <div class="text-red-500 py-2 px-4 hover:bg-red-50 cursor-pointer flex items-center border-t"> | |
| <i class="fas fa-sign-out-alt mr-3 w-5"></i> | |
| <span>退出登录</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 左侧导航 --> | |
| <nav class="sidebar bg-gray-800 py-6 text-gray-300"> | |
| <nav class="mt-6"> | |
| <ul class="space-y-1 px-3"> | |
| <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50"> | |
| <i class="fas fa-calendar-check mr-3 w-5"></i> | |
| <span>实验计划管理</span> | |
| </li> | |
| <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50"> | |
| <i class="fas fa-tasks mr-3 w-5"></i> | |
| <span>实验任务管理</span> | |
| </li> | |
| <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50"> | |
| <i class="fas fa-microscope mr-3 w-5"></i> | |
| <span>实验设备管理</span> | |
| </li> | |
| <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50"> | |
| <i class="fas fa-map-marked-alt mr-3 w-5"></i> | |
| <span>实验场地管理</span> | |
| </li> | |
| <li class="nav-item active px-4 py-3 text-sm font-medium rounded-lg bg-gray-900 text-white"> | |
| <i class="fas fa-chart-line mr-3 w-5"></i> | |
| <span>数据分析决策</span> | |
| </li> | |
| <li class="nav-item px-4 py-3 text-sm rounded-lg hover:bg-gray-700/50"> | |
| <i class="fas fa-cog mr-3 w-5"></i> | |
| <span>系统设置</span> | |
| </li> | |
| </ul> | |
| </nav> | |
| </nav> | |
| <!-- 主内容区 --> | |
| <main class="main-container p-7 overflow-y-auto"> | |
| <!-- 数据筛选区 --> | |
| <div class="bg-white rounded-xl shadow-dashboard p-6 mb-6"> | |
| <div class="flex flex-wrap items-center gap-4"> | |
| <h3 class="text-lg font-semibold mr-4">数据筛选</h3> | |
| <div class="flex items-center"> | |
| <span class="text-gray-500 mr-2"><i class="far fa-calendar-alt"></i> 日期:</span> | |
| <div class="flex border rounded-lg overflow-hidden"> | |
| <input type="date" class="px-3 py-1 text-sm w-40" value="2023-06-01"> | |
| <span class="px-2 py-1 bg-gray-100 text-gray-500">至</span> | |
| <input type="date" class="px-3 py-1 text-sm w-40" value="2023-06-30"> | |
| </div> | |
| </div> | |
| <div class="ml-2"> | |
| <span class="text-gray-500 mr-2"><i class="far fa-flask"></i> 类别:</span> | |
| <select class="border rounded-lg px-3 py-1.5 text-sm w-32"> | |
| <option>全部</option> | |
| <option>环境实验</option> | |
| <option>电磁实验</option> | |
| <option>计量实验</option> | |
| <option>生物实验</option> | |
| </select> | |
| </div> | |
| <div class="ml-2"> | |
| <span class="text-gray-500 mr-2"><i class="fas fa-building"></i> 部门:</span> | |
| <select class="border rounded-lg px-3 py-1.5 text-sm w-32"> | |
| <option>全部</option> | |
| <option>研发一部</option> | |
| <option>研发二部</option> | |
| <option>质检中心</option> | |
| </select> | |
| </div> | |
| <div class="ml-2"> | |
| <span class="text-gray-500 mr-2"><i class="fas fa-user-tie"></i> 负责人:</span> | |
| <select class="border rounded-lg px-3 py-1.5 text-sm w-32"> | |
| <option>全部</option> | |
| <option>张教授</option> | |
| <option>李博士</option> | |
| <option>王工</option> | |
| </select> | |
| </div> | |
| <div class="flex flex-1 justify-end gap-3"> | |
| <button class="px-4 py-1.5 bg-gray-100 rounded-lg text-gray-700 hover:bg-gray-200 transition-colors"> | |
| <i class="fas fa-sync mr-2"></i> 重置 | |
| </button> | |
| <button class="px-4 py-1.5 bg-blue-500 rounded-lg text-white hover:bg-blue-600 transition-colors"> | |
| <i class="fas fa-filter mr-2"></i> 筛选数据 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 核心指标区 --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="stat-card bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-calendar-plus text-white text-xl"></i> | |
| </div> | |
| <div class="text-3xl font-bold text-blue-700">32</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-gray-500 text-sm">本月新增实验计划</div> | |
| <div class="text-green-600 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 20.3% | |
| <span class="text-gray-500 text-xs ml-2">较上月</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-br from-green-50 to-green-100 rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between"> | |
| <div class="w-12 h-12 rounded-lg bg-green-500 flex items-center justify-center"> | |
| <i class="fas fa-tasks text-white text-xl"></i> | |
| </div> | |
| <div class="text-3xl font-bold text-green-700">14</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-gray-500 text-sm">当前进行中任务</div> | |
| <div class="text-red-600 text-sm mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 2.8% | |
| <span class="text-gray-500 text-xs ml-2">较上月</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-500 flex items-center justify-center"> | |
| <i class="fas fa-microscope text-white text-xl"></i> | |
| </div> | |
| <div class="text-3xl font-bold text-purple-700">216</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-gray-500 text-sm">本季度使用设备次数</div> | |
| <div class="text-green-600 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 15.6% | |
| <span class="text-gray-500 text-xs ml-2">较上季</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between"> | |
| <div class="w-12 h-12 rounded-lg bg-orange-500 flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-white text-xl"></i> | |
| </div> | |
| <div class="text-3xl font-bold text-orange-700">78.4%</div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="text-gray-500 text-sm">实验场地利用率</div> | |
| <div class="text-green-600 text-sm mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8.2% | |
| <span class="text-gray-500 text-xs ml-2">较上季</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表区域 - 第一行 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- 任务完成趋势图 --> | |
| <div class="bg-white rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="font-semibold">任务完成趋势</div> | |
| <div class="flex text-sm"> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-500 rounded-lg mr-2">近12个月</button> | |
| <select class="border rounded-lg px-3 py-1 text-xs"> | |
| <option>环境实验</option> | |
| <option>电磁实验</option> | |
| <option>计量实验</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="taskTrendChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 实验计划状态分布 --> | |
| <div class="bg-white rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="font-semibold">实验计划状态分布</div> | |
| <div class="text-sm text-gray-500"><i class="far fa-clock mr-1"></i> 截至: 2023-06-30</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="planStatusChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 图表区域 - 第二行 --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- 设备使用强度 --> | |
| <div class="bg-white rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="font-semibold">设备使用强度</div> | |
| <div class="flex text-sm"> | |
| <button class="px-3 py-1 mr-1 bg-blue-50 text-blue-500 rounded-lg">按设备</button> | |
| <button class="px-3 py-1 rounded-lg border text-gray-600 hover:bg-gray-100">按部门</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="deviceUsageChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- 场地利用时段热力图 --> | |
| <div class="bg-white rounded-xl shadow-dashboard p-5"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="font-semibold">场地利用时段热力图</div> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-500 mr-3">利用率:</span> | |
| <div class="flex h-4 rounded overflow-hidden"> | |
| <div class="w-4 bg-blue-100"></div> | |
| <div class="w-4 bg-blue-300"></div> | |
| <div class="w-4 bg-blue-500"></div> | |
| <div class="w-4 bg-blue-700"></div> | |
| <div class="w-4 bg-blue-900"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <div class="text-gray-500 text-xs">#101实验室</div> | |
| <div class="text-gray-500 text-xs">78.4%</div> | |
| </div> | |
| <div class="heatmap-grid"> | |
| <!-- Dynamically generated cells would be here --> | |
| <!-- Simplified static representation --> | |
| <div class="heatmap-cell bg-blue-100"></div> | |
| <div class="heatmap-cell bg-blue-300"></div> | |
| <div class="heatmap-cell bg-blue-500"></div> | |
| <!-- ... 96 in total --> | |
| </div> | |
| <div class="flex justify-between mt-8 mb-2"> | |
| <div class="text-gray-500 text-xs">#208分析室</div> | |
| <div class="text-gray-500 text-xs">65.2%</div> | |
| </div> | |
| <div class="heatmap-grid"> | |
| <!-- Similar grid for another room --> | |
| </div> | |
| <div class="flex justify-between mt-8 mb-2"> | |
| <div class="text-gray-500 text-xs">#305测试房</div> | |
| <div class="text-gray-500 text-xs">82.1%</div> | |
| </div> | |
| <div class="heatmap-grid"> | |
| <!-- Similar grid for another room --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 页脚区域 --> | |
| <div class="footer bg-white rounded-xl shadow-dashboard p-5 mt-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| 统计结果来源于系统各模块，支持自定义模板 | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="flex items-center px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"> | |
| <i class="far fa-file-pdf text-red-500 mr-2"></i> | |
| <span>导出PDF</span> | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition-colors"> | |
| <i class="far fa-file-excel mr-2"></i> | |
| <span>导出Excel</span> | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"> | |
| <i class="fas fa-list-alt mr-2"></i> | |
| <span>生成月度报告</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // 初始化完成后渲染图表 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // 任务完成趋势图 - 折线图 | |
| const taskTrend = document.getElementById('taskTrendChart'); | |
| new Chart(taskTrend, { | |
| type: 'line', | |
| data: { | |
| labels: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'], | |
| datasets: [{ | |
| label: '已完成任务数量', | |
| data: [56, 62, 68, 75, 84, 90, 87, 78, 92, 96, 102, 110], | |
| borderColor: '#1890ff', | |
| backgroundColor: 'rgba(24, 144, 255, 0.1)', | |
| borderWidth: 2, | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 计划状态分布 - 饼图 | |
| const planStatus = document.getElementById('planStatusChart'); | |
| new Chart(planStatus, { | |
| type: 'pie', | |
| data: { | |
| labels: ['未开始', '进行中', '已完成', '暂停'], | |
| datasets: [{ | |
| data: [12, 28, 45, 15], | |
| backgroundColor: [ | |
| '#36A2EB', | |
| '#4BC0C0', | |
| '#FFCE56', | |
| '#FF6384' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| padding: 15 | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 设备使用强度 - 柱状图 | |
| const deviceUsage = document.getElementById('deviceUsageChart'); | |
| new Chart(deviceUsage, { | |
| type: 'bar', | |
| data: { | |
| labels: ['质谱仪', '离心机', '光谱仪', '电镜', '显微镜', '核磁共振'], | |
| datasets: [{ | |
| label: '使用次数', | |
| data: [82, 96, 63, 78, 57, 45], | |
| backgroundColor: [ | |
| 'rgba(24, 144, 255, 0.7)', | |
| 'rgba(65, 176, 255, 0.7)', | |
| 'rgba(106, 198, 255, 0.7)', | |
| 'rgba(146, 217, 255, 0.7)', | |
| 'rgba(186, 236, 255, 0.7)', | |
| 'rgba(226, 246, 255, 0.7)' | |
| ], | |
| borderRadius: 4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(0, 0, 0, 0.05)' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </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=maomaobj/lab5" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |