Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Repo Sync AI</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: #fbfbfd; | |
| color: #1d1d1f; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| background-color: #f5f5f7; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); | |
| border: 1px solid rgba(0, 0, 0, 0.03); | |
| } | |
| .badge-premium { | |
| background: linear-gradient(45deg, #FF9A9E 0%, #FAD0C4 99%, #FAD0C4 100%); | |
| color: white; | |
| font-weight: 500; | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .hover-scale { | |
| transition: all 0.2s ease; | |
| } | |
| .hover-scale:hover { | |
| transform: scale(1.02); | |
| } | |
| .nav-item-active { | |
| background: rgba(0, 122, 255, 0.1); | |
| color: #007AFF; | |
| } | |
| .nav-item-active svg { | |
| color: #007AFF; | |
| } | |
| .test-coverage-high { | |
| background-color: rgba(52, 199, 89, 0.05); | |
| border-left: 3px solid #34C759; | |
| } | |
| .test-coverage-medium { | |
| background-color: rgba(255, 204, 0, 0.05); | |
| border-left: 3px solid #FFCC00; | |
| } | |
| .test-coverage-low { | |
| background-color: rgba(255, 59, 48, 0.05); | |
| border-left: 3px solid #FF3B30; | |
| } | |
| .status-badge { | |
| font-size: 12px; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-weight: 500; | |
| } | |
| .status-approved { | |
| background-color: rgba(52, 199, 89, 0.1); | |
| color: #34C759; | |
| } | |
| .status-pending { | |
| background-color: rgba(255, 204, 0, 0.1); | |
| color: #FFCC00; | |
| } | |
| .status-rejected { | |
| background-color: rgba(255, 59, 48, 0.1); | |
| color: #FF3B30; | |
| } | |
| .status-running { | |
| background-color: rgba(0, 122, 255, 0.1); | |
| color: #007AFF; | |
| } | |
| .status-passed { | |
| background-color: rgba(52, 199, 89, 0.1); | |
| color: #34C759; | |
| } | |
| .status-failed { | |
| background-color: rgba(255, 59, 48, 0.1); | |
| color: #FF3B30; | |
| } | |
| .quick-action-btn { | |
| transition: all 0.2s ease; | |
| border: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .quick-action-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); | |
| } | |
| .quick-action-btn i { | |
| transition: transform 0.2s ease; | |
| } | |
| .quick-action-btn:hover i { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-20 md:w-56 flex-shrink-0 border-r border-gray-100"> | |
| <div class="p-4 flex items-center justify-center md:justify-start"> | |
| <i class="fas fa-robot text-blue-500 text-2xl"></i> | |
| <h1 class="text-xl font-semibold ml-2 hidden md:block">Repo Sync</h1> | |
| </div> | |
| <nav class="p-2 md:p-4"> | |
| <div class="space-y-1"> | |
| <a href="#" class="nav-item-active flex items-center justify-center md:justify-start p-3 rounded-lg"> | |
| <i class="fas fa-tachometer-alt w-5 text-gray-500"></i> | |
| <span class="ml-3 hidden md:block">Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-code-branch w-5 text-gray-500"></i> | |
| <span class="ml-3 hidden md:block">Repositories</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-tasks w-5 text-gray-500"></i> | |
| <span class="ml-3 hidden md:block">Agents</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-center md:justify-start p-3 rounded-lg hover:bg-gray-100"> | |
| <i class="fas fa-vial w-5 text-gray-500"></i> | |
| <span class="ml-3 hidden md:block">Tests</span> | |
| <span class="badge-premium text-xs px-2 py-1 rounded-full ml-2 hidden md:block">PRO</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation with Quick Actions --> | |
| <header class="bg-white border-b border-gray-100"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <h2 class="text-xl font-semibold">Dashboard</h2> | |
| <div class="flex items-center space-x-2"> | |
| <!-- Quick Actions - Now in the header --> | |
| <div class="hidden md:flex items-center space-x-2 mr-4"> | |
| <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm"> | |
| <i class="fas fa-plus text-blue-500 mr-2"></i> | |
| <span>Add Repo</span> | |
| </button> | |
| <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm"> | |
| <i class="fas fa-robot text-green-500 mr-2"></i> | |
| <span>New Agent</span> | |
| </button> | |
| <button class="quick-action-btn bg-white px-3 py-2 rounded-lg flex items-center text-sm relative"> | |
| <i class="fas fa-vial text-purple-500 mr-2"></i> | |
| <span>Generate Tests</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="relative"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div> | |
| <span class="absolute -bottom-1 -right-1 bg-gradient-to-r from-pink-500 to-orange-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center"> | |
| <i class="fas fa-crown text-xs"></i> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <!-- Stats Cards with Quick Action Buttons for Mobile --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="card p-5 hover-scale"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Repos</p> | |
| <h3 class="text-2xl font-semibold mt-1">12</h3> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center"> | |
| <i class="fas fa-code-branch text-blue-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-5 hover-scale"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">AI Agents</p> | |
| <h3 class="text-2xl font-semibold mt-1">8</h3> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-5 hover-scale"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Open PRs</p> | |
| <h3 class="text-2xl font-semibold mt-1">7</h3> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center"> | |
| <i class="fas fa-code-pull-request text-green-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card p-5 hover-scale relative"> | |
| <div class="absolute top-3 right-3"> | |
| <span class="badge-premium text-xs px-2 py-1 rounded-full">PRO</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-500">Test Coverage</p> | |
| <h3 class="text-2xl font-semibold mt-1">87%</h3> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center"> | |
| <i class="fas fa-vial text-indigo-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Quick Actions (hidden on desktop) --> | |
| <div class="mb-6 md:hidden"> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mb-2"> | |
| <i class="fas fa-plus text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">Add Repo</h4> | |
| </button> | |
| <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mb-2"> | |
| <i class="fas fa-robot text-green-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">New Agent</h4> | |
| </button> | |
| <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center relative"> | |
| <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mb-2"> | |
| <i class="fas fa-vial text-purple-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">Generate Tests</h4> | |
| </button> | |
| <button class="quick-action-btn bg-white p-4 rounded-lg flex flex-col items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center mb-2"> | |
| <i class="fas fa-shield-alt text-red-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">Security Scan</h4> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Test Automation Section --> | |
| <div class="mb-6"> | |
| <div class="card overflow-hidden"> | |
| <div class="p-5 border-b border-gray-100 flex items-center justify-between"> | |
| <h3 class="font-semibold text-lg">Test Automation</h3> | |
| <button class="text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1.5 rounded-lg"> | |
| Generate Tests | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-100"> | |
| <!-- Test Coverage --> | |
| <div class="p-5"> | |
| <h4 class="font-medium text-gray-700 mb-3">Test Coverage</h4> | |
| <div class="space-y-3"> | |
| <div class="p-3 rounded test-coverage-high"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">react-app</span> | |
| <span class="font-semibold text-green-500">92%</span> | |
| </div> | |
| <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2"> | |
| <div class="bg-green-500 h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded test-coverage-medium"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">api-service</span> | |
| <span class="font-semibold text-yellow-500">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2"> | |
| <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded test-coverage-low"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">data-service</span> | |
| <span class="font-semibold text-red-500">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-100 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-500 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- GitHub Actions --> | |
| <div class="p-5"> | |
| <h4 class="font-medium text-gray-700 mb-3">GitHub Actions</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="font-medium">Test Workflows</span> | |
| <span class="status-badge status-running">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Automated test runs</p> | |
| </div> | |
| <div> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="font-medium">Coverage Reports</span> | |
| <span class="status-badge status-running">Active</span> | |
| </div> | |
| <p class="text-sm text-gray-500">PR coverage reports</p> | |
| </div> | |
| <div class="pt-2"> | |
| <button class="w-full text-sm border border-gray-200 hover:border-gray-300 rounded-lg px-3 py-1.5 text-gray-700 hover:bg-gray-50 transition-colors"> | |
| Add Workflow | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Test Runs --> | |
| <div class="p-5"> | |
| <h4 class="font-medium text-gray-700 mb-3">Recent Test Runs</h4> | |
| <div class="space-y-3"> | |
| <div class="p-3 border border-gray-100 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">react-app</span> | |
| <span class="status-badge status-passed">Passed</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Unit Tests • 2m 34s</p> | |
| </div> | |
| <div class="p-3 border border-gray-100 rounded-lg"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium">api-service</span> | |
| <span class="status-badge status-failed">1 Failed</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Integration Tests • 4m 12s</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Two Column Layout --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Agent Status --> | |
| <div> | |
| <div class="card overflow-hidden"> | |
| <div class="p-5 border-b border-gray-100"> | |
| <h3 class="font-semibold text-lg">Agent Status</h3> | |
| </div> | |
| <div class="p-5"> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-4"> | |
| <svg class="w-10 h-10" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#34C759" | |
| stroke-width="3" | |
| stroke-dasharray="75, 100" | |
| /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Code Review</h4> | |
| <p class="text-sm text-gray-500">react-app</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span> | |
| Active | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative mr-4"> | |
| <svg class="w-10 h-10" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#007AFF" | |
| stroke-width="3" | |
| stroke-dasharray="42, 100" | |
| /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Security Scanner</h4> | |
| <p class="text-sm text-gray-500">api-service</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span class="w-2 h-2 rounded-full bg-blue-500 mr-1"></span> | |
| Running | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center relative"> | |
| <div class="relative mr-4"> | |
| <svg class="w-10 h-10" viewBox="0 0 36 36"> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#e6e6e6" | |
| stroke-width="3" | |
| /> | |
| <path | |
| d="M18 2.0845 | |
| a 15.9155 15.9155 0 0 1 0 31.831 | |
| a 15.9155 15.9155 0 0 1 0 -31.831" | |
| fill="none" | |
| stroke="#AF52DE" | |
| stroke-width="3" | |
| stroke-dasharray="90, 100" | |
| /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Test Generator</h4> | |
| <p class="text-sm text-gray-500">data-service</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <span class="w-2 h-2 rounded-full bg-purple-500 mr-1"></span> | |
| Running | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pull Requests --> | |
| <div> | |
| <div class="card overflow-hidden"> | |
| <div class="p-5 border-b border-gray-100"> | |
| <h3 class="font-semibold text-lg">Pull Requests</h3> | |
| </div> | |
| <div class="divide-y divide-gray-100"> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-check text-green-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium">Security improvements</h4> | |
| <span class="status-badge status-approved">Approved</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Fixed 3 security vulnerabilities</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-400"> | |
| <span class="mr-3">#42</span> | |
| <span>react-app</span> | |
| <span class="mx-2">•</span> | |
| <span>2h ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-clock text-yellow-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium">Architecture refactor</h4> | |
| <span class="status-badge status-pending">Pending</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Improved module separation</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-400"> | |
| <span class="mr-3">#43</span> | |
| <span>api-service</span> | |
| <span class="mx-2">•</span> | |
| <span>5h ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer relative"> | |
| <div class="flex items-start"> | |
| <div class="mr-3"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-times text-red-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium">Performance optimizations</h4> | |
| <span class="status-badge status-rejected">Rejected</span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Tests failed (3/45)</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-400"> | |
| <span class="mr-3">#41</span> | |
| <span>data-service</span> | |
| <span class="mx-2">•</span> | |
| <span>1d ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample data for the dashboard | |
| const dashboardData = { | |
| repositories: [ | |
| { name: 'react-app', coverage: 92 }, | |
| { name: 'api-service', coverage: 78 }, | |
| { name: 'data-service', coverage: 45 } | |
| ], | |
| agents: [ | |
| { name: 'Code Review', status: 'active', progress: 75, repo: 'react-app' }, | |
| { name: 'Security Scanner', status: 'running', progress: 42, repo: 'api-service' }, | |
| { name: 'Test Generator', status: 'running', progress: 90, repo: 'data-service' } | |
| ], | |
| pullRequests: [ | |
| { id: 42, title: 'Security improvements', status: 'approved', repo: 'react-app', time: '2h ago' }, | |
| { id: 43, title: 'Architecture refactor', status: 'pending', repo: 'api-service', time: '5h ago' }, | |
| { id: 41, title: 'Performance optimizations', status: 'rejected', repo: 'data-service', time: '1d ago' } | |
| ] | |
| }; | |
| // Event listeners for interactive elements | |
| document.querySelectorAll('.hover-scale').forEach(element => { | |
| element.addEventListener('mouseenter', () => { | |
| element.style.transform = 'scale(1.02)'; | |
| }); | |
| element.addEventListener('mouseleave', () => { | |
| element.style.transform = 'scale(1)'; | |
| }); | |
| }); | |
| // Quick action buttons hover effects | |
| document.querySelectorAll('.quick-action-btn').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| const icon = button.querySelector('i'); | |
| if (icon) { | |
| icon.style.transform = 'scale(1.1)'; | |
| } | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| const icon = button.querySelector('i'); | |
| if (icon) { | |
| icon.style.transform = 'scale(1)'; | |
| } | |
| }); | |
| }); | |
| // Generate tests button functionality | |
| document.querySelectorAll('[data-action="generate-tests"]').forEach(button => { | |
| button.addEventListener('click', () => { | |
| alert('Initiating AI-powered test generation...'); | |
| }); | |
| }); | |
| </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=dwarfplanet/fluxcx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |