Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>DeepSeek Agent Management System</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> | |
.virtual-btn { | |
background-color: #f3f4f6; | |
border: 1px solid #e5e7eb; | |
border-radius: 0.375rem; | |
padding: 0.5rem 1rem; | |
cursor: pointer; | |
transition: all 0.2s; | |
display: inline-flex; | |
align-items: center; | |
gap: 0.5rem; | |
} | |
.virtual-btn:hover { | |
background-color: #e5e7eb; | |
border-color: #d1d5db; | |
} | |
.virtual-btn:active { | |
background-color: #d1d5db; | |
} | |
.directory-tree { | |
max-height: 70vh; | |
overflow-y: auto; | |
} | |
.agent-card:hover { | |
transform: translateY(-2px); | |
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
} | |
.progress-ring__circle { | |
transition: stroke-dashoffset 0.35s; | |
transform: rotate(-90deg); | |
transform-origin: 50% 50%; | |
} | |
@keyframes pulse { | |
0%, 100% { opacity: 1; } | |
50% { opacity: 0.5; } | |
} | |
.animate-pulse { | |
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
} | |
</style> | |
</head> | |
<body class="bg-gray-50 text-gray-800"> | |
<div class="container mx-auto px-4 py-8"> | |
<!-- Header --> | |
<header class="mb-8"> | |
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
<div> | |
<h1 class="text-3xl font-bold text-indigo-700">DeepSeek Agent Orchestrator</h1> | |
<p class="text-gray-600">Autonomous agents for directory monitoring and processing</p> | |
</div> | |
<div class="flex items-center gap-4"> | |
<div class="relative"> | |
<input type="text" placeholder="Search agents..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
</div> | |
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> | |
<i class="fas fa-plus"></i> New Agent | |
</button> | |
</div> | |
</div> | |
</header> | |
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
<!-- Left Panel - Directory Structure --> | |
<div class="lg:col-span-1 bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-4 border-b border-gray-200 bg-indigo-50"> | |
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2"> | |
<i class="fas fa-folder-tree"></i> Directory Structure | |
</h2> | |
<div class="mt-2 flex items-center gap-2"> | |
<span class="text-sm text-gray-500">Root: </span> | |
<span class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">x:\ROOT</span> | |
</div> | |
</div> | |
<div class="p-4 directory-tree"> | |
<div class="space-y-1"> | |
<div class="directory-item" data-path="x:\ROOT"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>ROOT</span> | |
</div> | |
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">3 agents</span> | |
</div> | |
<div class="ml-4 pl-4 border-l border-gray-200 mt-1 space-y-1"> | |
<!-- Subdirectories would be dynamically generated --> | |
<div class="directory-item" data-path="x:\ROOT\Data"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>Data</span> | |
</div> | |
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">1 agent</span> | |
</div> | |
</div> | |
<div class="directory-item" data-path="x:\ROOT\Processing"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>Processing</span> | |
</div> | |
</div> | |
</div> | |
<div class="directory-item" data-path="x:\ROOT\Archive"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>Archive</span> | |
</div> | |
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">2 agents</span> | |
</div> | |
<div class="ml-4 pl-4 border-l border-gray-200 mt-1 space-y-1"> | |
<div class="directory-item" data-path="x:\ROOT\Archive\2023"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>2023</span> | |
</div> | |
</div> | |
</div> | |
<div class="directory-item" data-path="x:\ROOT\Archive\2024"> | |
<div class="flex items-center justify-between py-1 px-2 hover:bg-gray-100 rounded cursor-pointer"> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span>2024</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="p-4 border-t border-gray-200 bg-gray-50"> | |
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg flex items-center justify-center gap-2"> | |
<i class="fas fa-plus"></i> Add Directory | |
</button> | |
</div> | |
</div> | |
<!-- Middle Panel - Agent Management --> | |
<div class="lg:col-span-2 space-y-6"> | |
<!-- Current Directory Info --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-4 border-b border-gray-200 bg-indigo-50"> | |
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2"> | |
<i class="fas fa-map-marker-alt"></i> Selected Directory | |
</h2> | |
</div> | |
<div class="p-4"> | |
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
<div> | |
<div class="flex items-center gap-2"> | |
<i class="fas fa-folder text-yellow-500"></i> | |
<span class="font-mono text-lg">x:\ROOT\Archive</span> | |
</div> | |
<div class="mt-2 flex flex-wrap gap-2"> | |
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-database text-indigo-500"></i> 45.7 GB | |
</span> | |
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-file text-indigo-500"></i> 1,245 files | |
</span> | |
<span class="text-xs bg-gray-100 px-2 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-folder text-indigo-500"></i> 32 subdirs | |
</span> | |
</div> | |
</div> | |
<div class="flex gap-2"> | |
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"> | |
<i class="fas fa-robot"></i> Deploy Agent | |
</button> | |
<button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2"> | |
<i class="fas fa-cog"></i> Configure | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Active Agents --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-4 border-b border-gray-200 bg-indigo-50"> | |
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2"> | |
<i class="fas fa-robot"></i> Active Agents (2) | |
</h2> | |
</div> | |
<div class="p-4 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
<!-- Agent Card 1 --> | |
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200"> | |
<div class="flex justify-between items-start"> | |
<div> | |
<h3 class="font-semibold text-lg">Archive Monitor</h3> | |
<p class="text-sm text-gray-500">Monitors archive directory for new files</p> | |
</div> | |
<div class="flex items-center gap-2"> | |
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span> | |
<button class="text-gray-400 hover:text-gray-600"> | |
<i class="fas fa-ellipsis-v"></i> | |
</button> | |
</div> | |
</div> | |
<div class="mt-4 flex items-center justify-between"> | |
<div class="flex items-center gap-2"> | |
<div class="relative w-10 h-10"> | |
<svg class="w-full h-full" viewBox="0 0 36 36"> | |
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle> | |
<circle cx="18" cy="18" r="16" fill="none" stroke="#4f46e5" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="25"></circle> | |
</svg> | |
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-indigo-700">75%</div> | |
</div> | |
<div> | |
<div class="text-sm font-medium">Processing</div> | |
<div class="text-xs text-gray-500">12 files in queue</div> | |
</div> | |
</div> | |
<div class="text-right"> | |
<div class="text-xs text-gray-500">Last activity</div> | |
<div class="text-sm font-medium">2 min ago</div> | |
</div> | |
</div> | |
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between"> | |
<button class="text-xs bg-red-50 text-red-600 hover:bg-red-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-stop"></i> Stop | |
</button> | |
<button class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-chart-line"></i> Stats | |
</button> | |
<button class="text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-cog"></i> Configure | |
</button> | |
</div> | |
</div> | |
<!-- Agent Card 2 --> | |
<div class="agent-card bg-white border border-gray-200 rounded-lg p-4 transition-all duration-200"> | |
<div class="flex justify-between items-start"> | |
<div> | |
<h3 class="font-semibold text-lg">Cleanup Bot</h3> | |
<p class="text-sm text-gray-500">Removes old files based on rules</p> | |
</div> | |
<div class="flex items-center gap-2"> | |
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Idle</span> | |
<button class="text-gray-400 hover:text-gray-600"> | |
<i class="fas fa-ellipsis-v"></i> | |
</button> | |
</div> | |
</div> | |
<div class="mt-4 flex items-center justify-between"> | |
<div class="flex items-center gap-2"> | |
<div class="relative w-10 h-10"> | |
<svg class="w-full h-full" viewBox="0 0 36 36"> | |
<circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="2"></circle> | |
<circle cx="18" cy="18" r="16" fill="none" stroke="#4f46e5" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="100"></circle> | |
</svg> | |
<div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-indigo-700">0%</div> | |
</div> | |
<div> | |
<div class="text-sm font-medium">Waiting</div> | |
<div class="text-xs text-gray-500">Next run in 1h 23m</div> | |
</div> | |
</div> | |
<div class="text-right"> | |
<div class="text-xs text-gray-500">Last activity</div> | |
<div class="text-sm font-medium">5h ago</div> | |
</div> | |
</div> | |
<div class="mt-4 pt-4 border-t border-gray-100 flex justify-between"> | |
<button class="text-xs bg-green-50 text-green-600 hover:bg-green-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-play"></i> Start | |
</button> | |
<button class="text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-chart-line"></i> Stats | |
</button> | |
<button class="text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 px-3 py-1 rounded-full flex items-center gap-1"> | |
<i class="fas fa-cog"></i> Configure | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Agent Templates --> | |
<div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-4 border-b border-gray-200 bg-indigo-50"> | |
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2"> | |
<i class="fas fa-magic"></i> Agent Templates | |
</h2> | |
</div> | |
<div class="p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
<!-- Template 1 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-eye"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">File Monitor</h3> | |
<p class="text-sm text-gray-500 mt-1">Watches for new/changed files</p> | |
</div> | |
</div> | |
</div> | |
<!-- Template 2 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-archive"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">Auto-Archiver</h3> | |
<p class="text-sm text-gray-500 mt-1">Moves files based on rules</p> | |
</div> | |
</div> | |
</div> | |
<!-- Template 3 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-broom"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">Cleanup Bot</h3> | |
<p class="text-sm text-gray-500 mt-1">Deletes old/unneeded files</p> | |
</div> | |
</div> | |
</div> | |
<!-- Template 4 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-sync-alt"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">Sync Agent</h3> | |
<p class="text-sm text-gray-500 mt-1">Syncs with other directories</p> | |
</div> | |
</div> | |
</div> | |
<!-- Template 5 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-search"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">Content Scanner</h3> | |
<p class="text-sm text-gray-500 mt-1">Analyzes file contents</p> | |
</div> | |
</div> | |
</div> | |
<!-- Template 6 --> | |
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:bg-indigo-50 transition-colors duration-200 cursor-pointer"> | |
<div class="flex items-start gap-3"> | |
<div class="bg-indigo-100 text-indigo-700 p-2 rounded-lg"> | |
<i class="fas fa-plus"></i> | |
</div> | |
<div> | |
<h3 class="font-medium">Custom Agent</h3> | |
<p class="text-sm text-gray-500 mt-1">Create your own agent</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Virtual Input Control Panel --> | |
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-4 border-b border-gray-200 bg-indigo-50"> | |
<h2 class="text-xl font-semibold text-indigo-700 flex items-center gap-2"> | |
<i class="fas fa-keyboard"></i> Virtual Input Controls | |
</h2> | |
</div> | |
<div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
<div> | |
<h3 class="font-medium mb-2">Mouse Controls</h3> | |
<div class="grid grid-cols-3 gap-2"> | |
<button class="virtual-btn" data-action="mouse-move" data-args="0,-10"> | |
<i class="fas fa-arrow-up"></i> | |
</button> | |
<button class="virtual-btn" data-action="mouse-move" data-args="-10,0"> | |
<i class="fas fa-arrow-left"></i> | |
</button> | |
<button class="virtual-btn" data-action="mouse-click"> | |
<i class="fas fa-mouse-pointer"></i> | |
</button> | |
<button class="virtual-btn" data-action="mouse-move" data-args="10,0"> | |
<i class="fas fa-arrow-right"></i> | |
</button> | |
<button class="virtual-btn" data-action="mouse-move" data-args="0,10"> | |
<i class="fas fa-arrow-down"></i> | |
</button> | |
<button class="virtual-btn" data-action="mouse-right-click"> | |
<i class="fas fa-hand-pointer"></i> | |
</button> | |
</div> | |
</div> | |
<div> | |
<h3 class="font-medium mb-2">Keyboard Input</h3> | |
<div class="flex gap-2"> | |
<input type="text" id="virtual-keyboard-input" class="flex-1 border rounded px-3 py-2" placeholder="Type text..."> | |
<button class="virtual-btn" data-action="keyboard-type"> | |
<i class="fas fa-paper-plane"></i> Send | |
</button> | |
</div> | |
</div> | |
<div> | |
<h3 class="font-medium mb-2">System Actions</h3> | |
<div class="flex flex-wrap gap-2"> | |
<button class="virtual-btn" data-action="screenshot"> | |
<i class="fas fa-camera"></i> Screenshot | |
</button> | |
<button class="virtual-btn" data-action="execute-python"> | |
<i class="fab fa-python"></i> Run Python | |
</button> | |
<button class="virtual-btn" data-action="browse-files"> | |
<i class="fas fa-folder-open"></i> Browse Files | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Status Bar --> | |
<div class="mt-4 bg-white rounded-xl shadow-md overflow-hidden"> | |
<div class="p-3 bg-gray-800 text-white flex flex-wrap items-center justify-between gap-2"> | |
<div class="flex items-center gap-4"> | |
<div class="flex items-center gap-2"> | |
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> | |
<span class="text-sm">System: Operational</span> | |
</div> | |
<div class="hidden md:flex items-center gap-2"> | |
<i class="fas fa-microchip text-blue-300"></i> | |
<span class="text-sm">CPU: 24%</span> | |
</div> | |
<div class="hidden md:flex items-center gap-2"> | |
<i class="fas fa-memory text-purple-300"></i> | |
<span class="text-sm">RAM: 3.2/16 GB</span> | |
</div> | |
</div> | |
<div class="text-sm"> | |
<span class="hidden sm:inline">Agents:</span> | |
<span class="text-green-400">12 active</span>, | |
<span class="text-yellow-400">3 idle</span>, | |
<span class="text-red-400">0 stopped</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script> | |
// Virtual Input Controller | |
document.querySelectorAll('.virtual-btn').forEach(btn => { | |
btn.addEventListener('click', async function() { | |
const action = this.dataset.action; | |
const args = this.dataset.args ? JSON.parse(this.dataset.args) : null; | |
try { | |
let result; | |
switch(action) { | |
case 'mouse-move': | |
result = await virtualMouseMove(...args); | |
break; | |
case 'mouse-click': | |
result = await virtualMouseClick(); | |
break; | |
case 'mouse-right-click': | |
result = await virtualMouseClick(true); | |
break; | |
case 'keyboard-type': | |
const text = document.getElementById('virtual-keyboard-input').value; | |
result = await virtualKeyboardType(text); | |
break; | |
case 'screenshot': | |
result = await takeScreenshot(); | |
break; | |
case 'execute-python': | |
result = await executePython(); | |
break; | |
case 'browse-files': | |
result = await browseFiles(); | |
break; | |
} | |
console.log(`${action} result:`, result); | |
} catch (error) { | |
console.error('Virtual input error:', error); | |
} | |
}); | |
}); | |
// Virtual input functions | |
async function virtualMouseMove(x, y) { | |
// In a real implementation, this would use PyAutoGUI or similar | |
console.log(`Moving mouse by ${x},${y}`); | |
return {success: true, x, y}; | |
} | |
async function virtualMouseClick(rightClick = false) { | |
console.log(`Performing ${rightClick ? 'right' : 'left'} click`); | |
return {success: true, clickType: rightClick ? 'right' : 'left'}; | |
} | |
async function virtualKeyboardType(text) { | |
console.log(`Typing: ${text}`); | |
return {success: true, text}; | |
} | |
async function takeScreenshot() { | |
// In Electron app this would use desktopCapturer | |
// In browser extension this would use chrome.tabs.captureVisibleTab | |
console.log('Taking screenshot'); | |
return {success: true, image: 'screenshot-data'}; | |
} | |
async function executePython() { | |
// Would connect to backend Python service | |
console.log('Executing Python script'); | |
return {success: true, output: 'Python execution result'}; | |
} | |
async function browseFiles() { | |
// Would use file input or Electron dialog | |
console.log('Opening file browser'); | |
return {success: true, files: []}; | |
} | |
// Simple directory tree interaction | |
document.querySelectorAll('.directory-item').forEach(item => { | |
item.addEventListener('click', function() { | |
// Remove active class from all items | |
document.querySelectorAll('.directory-item').forEach(i => { | |
i.querySelector('div').classList.remove('bg-indigo-100', 'text-indigo-800'); | |
}); | |
// Add active class to clicked item | |
this.querySelector('div').classList.add('bg-indigo-100', 'text-indigo-800'); | |
// In a real app, you would load the directory content here | |
console.log('Selected directory:', this.dataset.path); | |
}); | |
}); | |
// Agent card hover effects | |
document.querySelectorAll('.agent-card').forEach(card => { | |
card.addEventListener('mouseenter', function() { | |
this.classList.add('shadow-lg'); | |
}); | |
card.addEventListener('mouseleave', function() { | |
this.classList.remove('shadow-lg'); | |
}); | |
}); | |
// Template selection | |
document.querySelectorAll('[class*="border-gray-200"]').forEach(template => { | |
template.addEventListener('click', function() { | |
// In a real app, this would open a configuration modal | |
console.log('Selected template:', this.querySelector('h3').textContent); | |
}); | |
}); | |
</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=MaxHeadspace/deepseek-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |