| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Analysis Result - Sarva Conquerors</title>
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
| <style>
|
|
|
| :root {
|
| --primary: #a855f7;
|
| --glass-bg: rgba(15, 23, 42, 0.7);
|
| --glass-border: rgba(255, 255, 255, 0.1);
|
| --text-main: #ffffff;
|
| --text-muted: #94a3b8;
|
| }
|
|
|
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
|
|
|
| body {
|
| background-color: #02040a;
|
| color: var(--text-main);
|
| min-height: 100vh;
|
| display: flex;
|
| flex-direction: column;
|
|
|
| background-image:
|
| radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
|
| radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
|
| radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px),
|
| linear-gradient(to bottom, #0f172a 0%, #02040a 100%);
|
| background-size: 550px 550px, 350px 350px, 250px 250px, 100% 100%;
|
| background-position: 0 0, 40px 60px, 130px 270px, 0 0;
|
| }
|
|
|
|
|
| .navbar {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| padding: 1.5rem 3rem;
|
| background: rgba(2, 4, 10, 0.8);
|
| backdrop-filter: blur(10px);
|
| border-bottom: 1px solid var(--glass-border);
|
| }
|
| .logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }
|
| .logo i { color: var(--primary); margin-right: 8px; }
|
| .nav-right { color: var(--text-muted); font-size: 0.9rem; }
|
|
|
|
|
| .container {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| padding: 2rem;
|
| max-width: 1200px;
|
| margin: 0 auto;
|
| width: 100%;
|
| }
|
|
|
|
|
| .result-card {
|
| background: var(--glass-bg);
|
| border: 1px solid var(--glass-border);
|
| border-radius: 24px;
|
| padding: 2rem;
|
| width: 100%;
|
| backdrop-filter: blur(16px);
|
| box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
| }
|
|
|
|
|
| .image-grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 2rem;
|
| margin-bottom: 2rem;
|
| }
|
|
|
| .image-wrapper {
|
| position: relative;
|
| border-radius: 16px;
|
| overflow: hidden;
|
| border: 1px solid var(--glass-border);
|
| background: rgba(0,0,0,0.3);
|
| aspect-ratio: 1 / 1;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .image-wrapper img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| transition: transform 0.5s ease;
|
| }
|
|
|
| .image-wrapper:hover img { transform: scale(1.05); }
|
|
|
|
|
| .badge {
|
| position: absolute;
|
| top: 15px;
|
| left: 15px;
|
| background: rgba(0, 0, 0, 0.7);
|
| backdrop-filter: blur(4px);
|
| padding: 6px 14px;
|
| border-radius: 30px;
|
| font-size: 0.85rem;
|
| font-weight: 600;
|
| border: 1px solid var(--glass-border);
|
| z-index: 2;
|
| }
|
| .badge.input { color: #cbd5e1; }
|
| .badge.output { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
|
|
|
|
|
| .stats-bar {
|
| background: rgba(255, 255, 255, 0.03);
|
| border-radius: 12px;
|
| padding: 1.5rem;
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| border: 1px solid var(--glass-border);
|
| margin-bottom: 2rem;
|
| }
|
|
|
| .stat-item {
|
| display: flex;
|
| align-items: center;
|
| gap: 15px;
|
| }
|
| .stat-icon {
|
| font-size: 2rem;
|
| color: #4ade80;
|
| background: rgba(74, 222, 128, 0.1);
|
| width: 50px; height: 50px;
|
| display: flex; align-items: center; justify-content: center;
|
| border-radius: 50%;
|
| }
|
| .stat-info h3 { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
|
| .stat-info p { font-size: 1.8rem; font-weight: 700; color: white; }
|
|
|
|
|
| .actions {
|
| display: flex;
|
| justify-content: center;
|
| gap: 15px;
|
| }
|
|
|
| .btn {
|
| text-decoration: none;
|
| padding: 12px 28px;
|
| border-radius: 50px;
|
| font-weight: 600;
|
| transition: all 0.3s;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(135deg, #a855f7, #6366f1);
|
| color: white;
|
| box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
|
| }
|
| .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6); }
|
|
|
| .btn-secondary {
|
| background: transparent;
|
| border: 1px solid rgba(255,255,255,0.2);
|
| color: white;
|
| }
|
| .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .image-grid { grid-template-columns: 1fr; }
|
| .navbar { padding: 1rem; }
|
| .stats-bar { flex-direction: column; gap: 1rem; text-align: center; }
|
| .stat-item { flex-direction: column; }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| <nav class="navbar">
|
| <div class="logo"><i class="fa-solid fa-earth-americas"></i> Sarva Conquerors</div>
|
| <div class="nav-right">Mission Status: <span style="color: #4ade80;">COMPLETE</span></div>
|
| </nav>
|
|
|
| <div class="container">
|
|
|
| <div class="result-card">
|
| <div class="image-grid">
|
| <div class="image-wrapper">
|
| <div class="badge input"><i class="fa-solid fa-satellite"></i> Input SAR</div>
|
| <img src="{{ uploaded_image_url }}" alt="Uploaded SAR Image">
|
| </div>
|
|
|
| <div class="image-wrapper" style="border-color: rgba(74, 222, 128, 0.3);">
|
| <div class="badge output"><i class="fa-solid fa-wand-magic-sparkles"></i> Colorized Output</div>
|
| <img src="{{ colorized_image_url }}" alt="Colorized Output">
|
| </div>
|
| </div>
|
|
|
| <div class="stats-bar">
|
| <div class="stat-item">
|
| <div class="stat-icon"><i class="fa-solid fa-leaf"></i></div>
|
| <div class="stat-info">
|
| <h3>Greenery Index</h3>
|
| <p>{{ greenery_rate }}</p>
|
| </div>
|
| </div>
|
| <div style="text-align: right; color: #94a3b8; font-size: 0.9rem;">
|
| <p><i class="fa-solid fa-check-circle"></i> Pipeline Execution Successful</p>
|
| <p>Model: GAN-SAR-v2.0</p>
|
| </div>
|
| </div>
|
|
|
| <div class="actions">
|
| <a href="{{ colorized_image_url }}" download="colorized_output.jpg" class="btn btn-secondary">
|
| <i class="fa-solid fa-download"></i> Download Image
|
| </a>
|
| <a href="/" class="btn btn-primary">
|
| <i class="fa-solid fa-rotate-right"></i> Process Another
|
| </a>
|
| </div>
|
|
|
| </div>
|
| </div>
|
|
|
| </body>
|
| </html> |
