| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Verification Result — MatrixLab</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| body { font-family: 'Inter', system-ui, sans-serif; background: #0a0a0f; color: #e4e4e7; min-height: 100vh; } |
| .glass { background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; } |
| .gradient-text { background: linear-gradient(135deg, #06b6d4, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
| .badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500; } |
| pre { background: rgba(0,0,0,0.4); border-radius: 8px; padding: 12px; font-size: 12px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; } |
| </style> |
| </head> |
| <body> |
| <nav class="sticky top-0 z-50 border-b border-white/5 bg-[#0a0a0f]/80 backdrop-blur-xl"> |
| <div class="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between"> |
| <a href="/" class="flex items-center gap-3"> |
| <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-cyan-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">ML</div> |
| <span class="gradient-text text-lg font-bold">MatrixLab Sandbox</span> |
| </a> |
| <a href="/" class="text-sm text-zinc-500 hover:text-cyan-400">New Verification</a> |
| </div> |
| </nav> |
|
|
| <main class="max-w-4xl mx-auto px-6 py-12"> |
| |
| <div class="flex items-start justify-between mb-8"> |
| <div> |
| <div class="flex items-center gap-3 mb-2"> |
| <span class="badge {% if run.status == 'success' %}bg-green-500/10 text-green-400 border border-green-500/20{% elif run.status == 'warning' %}bg-yellow-500/10 text-yellow-400 border border-yellow-500/20{% else %}bg-red-500/10 text-red-400 border border-red-500/20{% endif %}"> |
| {% if run.status == 'success' %}PASSED{% elif run.status == 'warning' %}WARNINGS{% else %}FAILED{% endif %} |
| </span> |
| <span class="badge bg-white/5 text-zinc-400 border border-white/10">{{ run.language }}</span> |
| <span class="badge bg-white/5 text-zinc-400 border border-white/10">{{ run.framework }}</span> |
| </div> |
| <h1 class="text-2xl font-bold text-zinc-200">{{ run.filename }}</h1> |
| <p class="text-sm text-zinc-500 mt-1">{{ run.summary }}</p> |
| </div> |
| <div class="text-right text-xs text-zinc-600"> |
| <div>Run: {{ run.id }}</div> |
| <div>{{ run.files_count }} files</div> |
| </div> |
| </div> |
|
|
| |
| <div class="space-y-4"> |
| {% for step in run.steps %} |
| <div class="glass p-5"> |
| <div class="flex items-center justify-between mb-2"> |
| <div class="flex items-center gap-3"> |
| {% if step.status == 'success' %} |
| <div class="w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center"> |
| <svg class="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg> |
| </div> |
| {% elif step.status == 'warning' %} |
| <div class="w-6 h-6 rounded-full bg-yellow-500/20 flex items-center justify-center"> |
| <svg class="w-3.5 h-3.5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg> |
| </div> |
| {% elif step.status == 'error' %} |
| <div class="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center"> |
| <svg class="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> |
| </div> |
| {% else %} |
| <div class="w-6 h-6 rounded-full bg-zinc-700 flex items-center justify-center"> |
| <div class="w-2 h-2 rounded-full bg-zinc-500"></div> |
| </div> |
| {% endif %} |
| <span class="font-semibold text-zinc-300 capitalize">{{ step.name }}</span> |
| </div> |
| <span class="text-xs {% if step.status == 'success' %}text-green-400{% elif step.status == 'warning' %}text-yellow-400{% elif step.status == 'error' %}text-red-400{% else %}text-zinc-500{% endif %}">{{ step.status }}</span> |
| </div> |
| <p class="text-sm text-zinc-400 ml-9">{{ step.message }}</p> |
| {% if step.logs %} |
| <pre class="mt-3 ml-9 text-zinc-400">{{ step.logs }}</pre> |
| {% endif %} |
| </div> |
| {% endfor %} |
| </div> |
|
|
| <div class="mt-8 flex gap-4"> |
| <a href="/" class="px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-500 to-purple-600 text-white font-bold text-sm">Verify Another</a> |
| <a href="/runs/{{ run.id }}" class="px-6 py-3 rounded-xl bg-white/5 border border-white/10 text-zinc-300 font-medium text-sm">API Response</a> |
| </div> |
| </main> |
| </body> |
| </html> |
|
|
