Update templates/result.html

templates/result.html

@@ -5,244 +5,321 @@
     <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: #1c1c1e;
-            font-family: "Poppins", sans-serif;
+            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;
         }
 
-        h1 {
-            color: #e5e5e7;
-            text-align: center;
+        .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;
         }
 
-        .cont {
-            background-color: #2c2c2e;
-            padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-            transition: 1s ease;
+        .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: #ee4410;
-            font-size: 1.5rem;
-            font-weight: bold;
-            margin-top: 20px;
-            border-bottom: 2px solid #ee4410;
-            padding-bottom: 10px;
+            color: var(--primary);
+            font-size: 1.1rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
         }
 
-        .card {
-            background-color: #3a3a3c;
-            color: #f5f5f7;
-            border-radius: 10px;
-            margin-bottom: 15px;
-            padding: 15px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-            transition: background-color 0.3s ease;
+        .section-title::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: linear-gradient(90deg, var(--primary), transparent);
+            margin-left: 1rem;
         }
 
-        .card:hover {
-            background-color: #3a3a3c98;
+        .data-item {
+            margin-bottom: 1.5rem;
+            border-left: 3px solid var(--primary);
+            padding-left: 1rem;
+            animation: fadeIn 0.6s ease-out forwards;
+            opacity: 0;
         }
 
-        .card-title {
-            color: #ee4410;
-            font-size: 1.2rem;
-            font-weight: bold;
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateX(-10px); }
+            to { opacity: 1; transform: translateX(0); }
         }
 
-        .card-text {
-            color: #d1d1d6;
-            font-size: 1rem;
+        .data-label {
+            color: #8e8e93;
+            font-size: 0.85rem;
+            margin-bottom: 0.2rem;
         }
 
-        ul {
-            list-style-type: none;
-            padding-left: 0;
+        .data-value {
+            font-size: 1.1rem;
+            color: #fff;
+            list-style: none;
+            padding: 0;
         }
 
-        li::before {
-            content: "• ";
-            color: #ee4410;
+        .data-value li {
+            margin-bottom: 0.4rem;
         }
 
-        .btn-reset {
-            background-color: #ff9f0a;
-            color: white;
+        .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;
-            padding: 10px 20px;
-            border-radius: 5px;
-            transition: background-color 0.3s ease;
-            margin-bottom: 20px;
+            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;
         }
 
-        .btn-reset:hover {
-            background-color: #e03a2f;
+        .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);
         }
 
-        .alert {
-            text-align: center;
-            position: absolute;
-            top: 0;
-            right: 15%;
+        @keyframes slideDown {
+            from { transform: translateY(-50px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
         }
 
-        .image-container img {
-            max-width: 100%;
-            border-radius: 10px;
+        .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">
-        {% with messages = get_flashed_messages() %} {% if messages %}
-        <div class="alert alert-success mt-4 " id="flash-message">
+    <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>
+        {% endif %} 
+        {% endwith %}
 
-    <div class="container cont mt-5">
-        <div class="d-flex align-items-center justify-content-between">
-            <h1>Extracted Details From Image</h1>
-            <!-- Reset Button -->
-            <div class="text-center mt-4">
-                <a href="{{ url_for('reset_upload') }}" class="btn btn-reset">Reset & Upload New File</a>
-            </div>
+        <div class="d-flex align-items-center justify-content-between mb-5">
+            <h1 class="premium-title mb-0">Extraction Analysis</h1>
+            <a href="{{ url_for('reset_upload') }}" class="btn-premium">Process New Image</a>
         </div>
 
         {% if data %}
-        <!-- Personal Information Section -->
-        <section>
-            <h3 class="section-title">Extracted Information</h3>
-            <div class="row">
-                <!-- Image Container on the Left -->
-                <div class="col-md-6 image-container">
-                   <div class="card">
-                        <div class="card-body">
-                    {% if data.extracted_text.items() %}
-                    <h5 class="card-title">Extracted Image:</h5>
-                    <ul>
+        <div class="row g-4">
+            <!-- Source Image Column -->
+            <div class="col-lg-5">
+                <div class="glass-card">
+                    <h3 class="section-title">Source Image</h3>
+                    {% if data.extracted_text %}
                         {% for filename, text in data.extracted_text.items() %}
-                        <!--<li>{{ filename }}:</li>-->
-                        <img src="{{ Img[filename] }}" alt="Processed Image" class="img-fluid" />
+                        <div class="result-img-container mb-3">
+                            <img src="{{ Img[filename] }}" alt="Analyzed Document" />
+                        </div>
+                        <p class="text-muted small">File: {{ filename | basename }}</p>
                         {% endfor %}
-                    </ul>
+                    {% else %}
+                        <div class="p-4 text-center text-muted">No image path available</div>
                     {% endif %}
-                          </div>
-                     </div>
                 </div>
+            </div>
 
-                <!-- Extracted Text on the Right -->
-                <div class="col-md-6">
-                    <div class="card">
-                        <div class="card-body">
-                            {% if data.name and data.name is iterable and data.name is not string %}
-                            <h5 class="card-title">Name:</h5>
-                            <ul>
-                                {% for value in data.name %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+            <!-- Extracted Details Column -->
+            <div class="col-lg-7">
+                <div class="glass-card">
+                    <h3 class="section-title">Verified Details</h3>
+                    
+                    <div class="row">
+                        <!-- Left Data Sub-col -->
+                        <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 and data.Designation is iterable and data.Designation is not string %}
-                            <h5 class="card-title">Designation:</h5>
-                            <ul>
-                                {% for value in data.Designation %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                            {% 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.contact_number and data.contact_number is iterable and data.contact_number is not string %}
-                            <h5 class="card-title">Contact number:</h5>
-                            <ul>
-                                {% for value in data.contact_number %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                            {% 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>
 
-                            {% if data.email and data.email is iterable and data.email is not string %}
-                            <h5 class="card-title">Email:</h5>
-                            <ul>
-                                {% for value in data.email %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                        <!-- Right Data Sub-col -->
+                        <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.Location and data.Location is iterable and data.Location is not string %}
-                            <h5 class="card-title">Location:</h5>
-                            <ul>
-                                {% for value in data.Location %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                            {% 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.Link and data.Link is iterable and data.Link is not string %}
-                            <h5 class="card-title">Link:</h5>
-                            <ul>
-                                {% for value in data.Link %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                            {% 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.Company and data.Company is iterable and data.Company is not string %}
-                            <h5 class="card-title">Organisation:</h5>
-                            <ul>
-                                {% for value in data.Company %}
-                                {% if value|lower != 'not found' %}
-                                <li>{{ value }}</li>
-                                {% endif %}
-                                {% endfor %}
-                            </ul>
+                            {% 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 not (data.name or data.contact_number or data.email or data.Location or data.Designation or data.Company or data.Link) %}
+                    <div class="text-center py-5">
+                        <p class="text-muted">No specific entities detected high-confidence.</p>
+                        <p class="small">Check the "Raw Information" panel below for OCR output.</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        <!-- Debug / Raw Output Panel -->
+        <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>
-        </section>
+            {% endfor %}
+        </div>
 
         {% else %}
-        <p>No data available. Please process a file.</p>
+        <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 src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script>
+        // Auto-remove flash messages
         setTimeout(function () {
             let flashMessage = document.getElementById("flash-message");
             if (flashMessage) {
-                flashMessage.style.transition = "opacity 1s ease";
+                flashMessage.style.transition = "all 0.8s ease";
                 flashMessage.style.opacity = 0;
-                setTimeout(() => flashMessage.remove(), 1000);
+                flashMessage.style.transform = "translateY(-20px)";
+                setTimeout(() => flashMessage.remove(), 800);
             }
-        }, 3000);
+        }, 4000);
     </script>
 </body>
+</html>
 
 </html>