| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Processed Results</title> |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /> |
| <style> |
| :root { |
| --primary: #ee4410; |
| --secondary: #ff9f0a; |
| --bg-dark: #0a0a0c; |
| --card-bg: rgba(30, 30, 35, 0.7); |
| --text-glow: 0 0 10px rgba(238, 68, 16, 0.5); |
| } |
| |
| body { |
| background-color: var(--bg-dark); |
| font-family: 'Outfit', sans-serif; |
| color: #f5f5f7; |
| overflow-x: hidden; |
| background: radial-gradient(circle at 50% 50%, #1a1a1f 0%, #0a0a0c 100%); |
| min-height: 100vh; |
| } |
| |
| .glass-card { |
| background: var(--card-bg); |
| backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 20px; |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| padding: 2rem; |
| margin-bottom: 2rem; |
| } |
| |
| .glass-card:hover { |
| transform: translateY(-5px); |
| border-color: rgba(238, 68, 16, 0.3); |
| box-shadow: 0 20px 45px rgba(238, 68, 16, 0.1); |
| } |
| |
| .premium-title { |
| background: linear-gradient(135deg, #fff 0%, #aaa 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| font-weight: 600; |
| letter-spacing: -1px; |
| text-shadow: var(--text-glow); |
| margin-bottom: 1.5rem; |
| } |
| |
| .section-title { |
| color: var(--primary); |
| font-size: 1.1rem; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| margin-bottom: 1.5rem; |
| display: flex; |
| align-items: center; |
| } |
| |
| .section-title::after { |
| content: ''; |
| flex: 1; |
| height: 1px; |
| background: linear-gradient(90deg, var(--primary), transparent); |
| margin-left: 1rem; |
| } |
| |
| .data-item { |
| margin-bottom: 1.5rem; |
| border-left: 3px solid var(--primary); |
| padding-left: 1rem; |
| animation: fadeIn 0.6s ease-out forwards; |
| opacity: 0; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateX(-10px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| .data-label { |
| color: #8e8e93; |
| font-size: 0.85rem; |
| margin-bottom: 0.2rem; |
| } |
| |
| .data-value { |
| font-size: 1.1rem; |
| color: #fff; |
| list-style: none; |
| padding: 0; |
| } |
| |
| .data-value li { |
| margin-bottom: 0.4rem; |
| } |
| |
| .result-img-container { |
| border-radius: 15px; |
| overflow: hidden; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| position: relative; |
| } |
| |
| .result-img-container img { |
| width: 100%; |
| height: auto; |
| display: block; |
| transition: transform 0.5s ease; |
| } |
| |
| .result-img-container:hover img { |
| transform: scale(1.05); |
| } |
| |
| .btn-premium { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| border: none; |
| color: white; |
| padding: 0.8rem 2rem; |
| border-radius: 30px; |
| font-weight: 600; |
| box-shadow: 0 5px 15px rgba(238, 68, 16, 0.3); |
| text-decoration: none; |
| transition: all 0.3s ease; |
| display: inline-block; |
| } |
| |
| .btn-premium:hover { |
| transform: scale(1.05); |
| box-shadow: 0 8px 25px rgba(238, 68, 16, 0.5); |
| color: #fff; |
| } |
| |
| .alert-premium { |
| background: rgba(40, 40, 45, 0.9); |
| border: 1px solid var(--primary); |
| color: #fff; |
| border-radius: 12px; |
| padding: 1rem; |
| animation: slideDown 0.5s cubic-bezier(0.19, 1, 0.22, 1); |
| } |
| |
| @keyframes slideDown { |
| from { transform: translateY(-50px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| |
| .debug-panel { |
| margin-top: 4rem; |
| padding: 2rem; |
| background: rgba(0, 0, 0, 0.3); |
| border-top: 1px solid rgba(255, 255, 255, 0.05); |
| font-family: monospace; |
| font-size: 0.8rem; |
| color: #666; |
| } |
| </style> |
| </style> |
| </head> |
|
|
| <body> |
| <div class="container py-5"> |
| {% with messages = get_flashed_messages() %} |
| {% if messages %} |
| <div class="alert-premium mb-4" id="flash-message"> |
| {{ messages[0] }} |
| </div> |
| {% endif %} |
| {% endwith %} |
|
|
| <div class="d-flex align-items-center justify-content-between mb-5"> |
| <h1 class="premium-title mb-0">Extraction Analysis <small style="font-size: 0.7rem; color: var(--primary); letter-spacing: 1px; font-weight: 400;">v2.1 GOLD</small></h1> |
| <a href="{{ url_for('reset_upload') }}" class="btn-premium">Process New Image</a> |
| </div> |
|
|
| {% if data %} |
| <div class="row g-4"> |
| |
| <div class="col-lg-5"> |
| <div class="glass-card"> |
| <h3 class="section-title">Source Image</h3> |
| {% if Img %} |
| {% for filename, result_path in Img.items() %} |
| <div class="result-img-container mb-3"> |
| <img src="{{ result_path }}" alt="Analyzed Document" /> |
| </div> |
| <p class="text-muted small">File: {{ filename | basename }}</p> |
| {% endfor %} |
| {% else %} |
| <div class="p-4 text-center text-muted">No image path available</div> |
| {% endif %} |
| </div> |
| </div> |
|
|
| |
| <div class="col-lg-7"> |
| <div class="glass-card"> |
| <h3 class="section-title">Verified Details</h3> |
| |
| <div class="row"> |
| |
| <div class="col-md-6"> |
| {% if data.name %} |
| <div class="data-item" style="animation-delay: 0.1s"> |
| <div class="data-label">Full Name</div> |
| <ul class="data-value"> |
| {% for val in data.name %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
|
|
| {% if data.Designation %} |
| <div class="data-item" style="animation-delay: 0.2s"> |
| <div class="data-label">Designation</div> |
| <ul class="data-value"> |
| {% for val in data.Designation %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
|
|
| {% if data.Company %} |
| <div class="data-item" style="animation-delay: 0.3s"> |
| <div class="data-label">Organization</div> |
| <ul class="data-value"> |
| {% for val in data.Company %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
| </div> |
|
|
| |
| <div class="col-md-6"> |
| {% if data.contact_number %} |
| <div class="data-item" style="animation-delay: 0.4s"> |
| <div class="data-label">Phone Numbers</div> |
| <ul class="data-value"> |
| {% for val in data.contact_number %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
|
|
| {% if data.email %} |
| <div class="data-item" style="animation-delay: 0.5s"> |
| <div class="data-label">Email Addresses</div> |
| <ul class="data-value"> |
| {% for val in data.email %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
|
|
| {% if data.Location %} |
| <div class="data-item" style="animation-delay: 0.6s"> |
| <div class="data-label">Address</div> |
| <ul class="data-value"> |
| {% for val in data.Location %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
|
|
| {% if data.Link %} |
| <div class="data-item" style="animation-delay: 0.7s"> |
| <div class="data-label">Social/Web Links</div> |
| <ul class="data-value"> |
| {% for val in data.Link %}<li>{{ val }}</li>{% endfor %} |
| </ul> |
| </div> |
| {% endif %} |
| </div> |
| </div> |
|
|
|
|
| {% if data.status_message %} |
| <div class="mt-4 pt-3 border-top border-secondary text-end"> |
| <span class="badge rounded-pill bg-dark text-muted" style="font-size: 0.65rem; border: 1px solid rgba(255,255,255,0.05)">{{ data.status_message }}</span> |
| </div> |
| {% endif %} |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="debug-panel rounded"> |
| <h5 class="mb-3" style="color: #444; font-size: 0.9rem">SYSTEM_LOG :: RAW_EXTRACTION_BUFFER</h5> |
| {% for filename, raw in data.extracted_text.items() %} |
| <div class="mb-4"> |
| <div class="mb-1 text-primary">>> {{ filename | basename }}</div> |
| <div class="p-3 bg-black rounded" style="color: #0f0; opacity: 0.8; font-size: 0.85rem"> |
| {{ raw }} |
| </div> |
| </div> |
| {% endfor %} |
| </div> |
|
|
| {% else %} |
| <div class="text-center glass-card py-5"> |
| <h2 class="premium-title">Waiting for Data...</h2> |
| <p class="text-muted">No analysis results found in session.</p> |
| <a href="{{ url_for('index') }}" class="btn-premium mt-3">Back to Upload</a> |
| </div> |
| {% endif %} |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script> |
| <script> |
| |
| setTimeout(function () { |
| let flashMessage = document.getElementById("flash-message"); |
| if (flashMessage) { |
| flashMessage.style.transition = "all 0.8s ease"; |
| flashMessage.style.opacity = 0; |
| flashMessage.style.transform = "translateY(-20px)"; |
| setTimeout(() => flashMessage.remove(), 800); |
| } |
| }, 4000); |
| </script> |
| </body> |
| </html> |
|
|
| </html> |
| |
