ImageDataExtractor2

Sleeping

File size: 6,710 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>File Uploader</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            background-color: #1c1c1e;
            font-family: "Poppins", sans-serif;
            color: #f5f5f7;
            margin: 0;
        }

        h1 {
            color: #e5e5e7;
            text-align: center;
            margin-bottom: 20px;
        }

        .container {
            margin-top: 70px;
        }

        .file-upload-section {
            background-color: #2c2c2e;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
            text-align: center;
        }

        .file-upload-section input[type="file"] {
            margin: 20px 0;
        }

        .file-upload-section input[type="submit"] {
            background-color: #ee4410;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .file-upload-section input[type="submit"]:hover {
            background-color: #ee4410;
        }

        .file-actions a {
            margin: 0 10px;
            text-decoration: none;
            color: #ee4410;
        }

        .file-actions a:hover {
            color: #ee4410;
        }

        .flash-message {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 5px;
            color: #333;
        }

        .alert {
            text-align: center;
            position: sticky;
            top: 0;
            right: 15%;
        }

        /* Loader styles */
        .loader {
            border: 8px solid #f3f3f3;
            border-top: 8px solid #ee4410;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
            display: none;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Top bar styles */
        .top-bar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top-bar h2 {
            color: white;
        }

        /* Navigation tab styles */
        .tab {
            display: flex;
            gap: 10px;
        }

        .tab button {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 10px 16px;
            transition: 0.3s;
            font-size: 17px;
            color: white;
        }

        .tab button:hover {
            background-color: #575757;
        }

        .tab button.active {
            background-color: #444;
        }

        /* Tab content styles */
        .tabcontent {
            display: none;
            padding: 20px;
            margin-top: 70px;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .tab {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <!-- Locked Top Bar with Tabs -->
    <div class="top-bar">
        <h2>Capture AI</h2>
        <!-- Navigation Tabs -->
        <div class="tab">
            <button class="tablink" onclick="openPage('ImageExtractor', this, '#ff4d00')" id="defaultOpen">Visiting Card Data Extractor</button>
            <button class="tablink" onclick="openPage('ResumeParserExtractor', this, '#ff4d00')">Resume Data Extractor</button>
        </div>
    </div>
     <div class="container">
        <h1>Visiting Card Data Extractor</h1>
        <div class="file-upload-section">
            <form id="fileUploadForm" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data">
                <input type="file" name="files" multiple class="form-control" required />
                <input type="submit" value="Upload your Images" class="btn btn-outline-primary" />
            </form>

            {% if session.get('uploaded_files') %}
            <p class="mt-4">
                Uploaded:
                <span class="text-danger">{{ session.get('uploaded_files') }}</span>
            </p>
            <form action="{{ url_for('remove_file') }}" method="post">
                <button type="submit" class="btn btn-outline-danger">
                    <i class="bi bi-trash"></i> Remove Uploaded File
                </button>
            </form>
            {% endif %}
        </div>

        <div class="container">
            <!-- Loader -->
            <div class="loader" id="loader"></div>
        </div>

        {% with messages = get_flashed_messages() %} {% if messages %}
        <div class="alert alert-success mt-4" id="flash-message">
            {{ messages[0] }}
        </div>
        {% endif %} {% endwith %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Loader functionality
        document.getElementById('fileUploadForm').onsubmit = function () {
            document.getElementById('loader').style.display = 'block';
            document.getElementById('tablinks').disabled = true;
            document.getElementById('tablinks active').disabled = true;
        };

        // Flash message auto-hide
        setTimeout(function () {
            let flashMessage = document.getElementById("flash-message");
            if (flashMessage) {
                flashMessage.style.transition = "opacity 1s ease";
                flashMessage.style.opacity = 0;
                setTimeout(() => flashMessage.remove(), 1000);
            }
        }, 3000);

        // Function to open links in the same tab
        function openLink(url) {
            window.location.href = url; // Redirects to the specified URL in the same tab
            // Remove "active" class from all buttons
            const buttons = document.querySelectorAll('.tab button');
            buttons.forEach(button => button.classList.remove('active'));
            // Add "active" class to the clicked button
            element.classList.add('active');
        }
    </script>
</body>

</html>