quality_recticel/py_app/app/templates/download_extension.html

{% extends "base.html" %}

{% block title %}Quality Recticel Print Service Downloads{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-12">
            <div class="text-center">
                <h1 class="display-4">🖨️ Quality Recticel Print Service</h1>
                <p class="lead">Professional Silent Printing Solution for Windows</p>
            </div>
        </div>
    </div>

    <!-- Overview Card -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-10">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0"><EFBFBD> Complete Printing Solution</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>🏆 What You Get:</h5>
                            <ul>
                                <li>✅ <strong>Silent PDF Printing</strong> - No manual downloads</li>
                                <li>✅ <strong>Automatic Detection</strong> - Smart service fallback</li>
                                <li>✅ <strong>Zero Configuration</strong> - Works out of the box</li>
                                <li>✅ <strong>Auto-Start Service</strong> - Boots with Windows</li>
                                <li>✅ <strong>Professional Integration</strong> - Seamless workflow</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5>🔧 System Components:</h5>
                            <ul>
                                <li>🖥️ <strong>Windows Print Service</strong> - Local API (localhost:8765)</li>
                                <li>🌐 <strong>Chrome Extension</strong> - Browser integration</li>
                                <li>📄 <strong>Web Integration</strong> - Smart button detection</li>
                                <li>🔄 <strong>Fallback System</strong> - PDF download backup</li>
                                <li>🛡️ <strong>Security</strong> - Local-only connections</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Download Cards Row -->
    <div class="row justify-content-center">
        <!-- Windows Service Card -->
        <div class="col-md-5 mb-4">
            <div class="card h-100 border-success">
                <div class="card-header bg-success text-white text-center">
                    <h4 class="mb-0">🖥️ Windows Print Service</h4>
                    <small>Core printing engine</small>
                </div>
                <div class="card-body d-flex flex-column">
                    <div class="alert alert-success">
                        <strong>🚀 Install First:</strong> The Windows service provides the printing API and must be installed before the Chrome extension.
                    </div>
                    
                    <h5>📦 Package Contents:</h5>
                    <ul>
                        <li>🔧 <code>install_service.bat</code> - One-click installer</li>
                        <li>🖥️ <code>print_service.py</code> - Main service application</li>
                        <li>⚙️ <code>service_manager.py</code> - Service management</li>
                        <li>🌐 <code>chrome_extension/</code> - Browser extension</li>
                        <li>📚 Complete documentation package</li>
                    </ul>
                    
                    <h5>⚡ Quick Install:</h5>
                    <ol>
                        <li>Download and extract the service package</li>
                        <li><strong>Right-click</strong> <code>install_service.bat</code></li>
                        <li>Select <strong>"Run as administrator"</strong></li>
                        <li>Wait for installation to complete</li>
                    </ol>
                    
                    <div class="text-center mt-auto">
                        <button class="btn btn-success btn-lg mb-2" id="download-service-btn">
                            📥 Download Windows Service
                        </button>
                        <br>
                        <small class="text-muted">Complete package (~50KB)</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Chrome Extension Card -->
        <div class="col-md-5 mb-4">
            <div class="card h-100 border-info">
                <div class="card-header bg-info text-white text-center">
                    <h4 class="mb-0">🌐 Chrome Extension</h4>
                    <small>Browser integration</small>
                </div>
                <div class="card-body d-flex flex-column">
                    <div class="alert alert-info">
                        <strong>🔗 Install Second:</strong> The Chrome extension connects your browser to the Windows service for seamless printing.
                    </div>
                    
                    <h5>🎯 Features:</h5>
                    <ul>
                        <li>🖨️ Silent printing via native messaging</li>
                        <li>🔍 Automatic service detection</li>
                        <li>📊 Print status monitoring</li>
                        <li>🔄 Graceful fallback to PDF download</li>
                        <li>⚙️ Printer management interface</li>
                    </ul>
                    
                    <h5>🚀 Quick Install:</h5>
                    <ol>
                        <li>Download and extract extension files</li>
                        <li>Open Chrome → <code>chrome://extensions/</code></li>
                        <li>Enable <strong>"Developer mode"</strong></li>
                        <li>Click <strong>"Load unpacked"</strong> → Select folder</li>
                    </ol>
                    
                    <div class="text-center mt-auto">
                        <button class="btn btn-info btn-lg mb-2" id="download-extension-btn">
                            📥 Download Chrome Extension
                        </button>
                        <br>
                        <small class="text-muted">Extension package (~15KB)</small>
                        
                        <hr>
                        <div class="text-center">
                            <small class="text-muted">Individual files:</small><br>
                            <a href="{{ url_for('main.extension_files', filename='manifest.json') }}" target="_blank" class="btn btn-sm btn-outline-secondary">manifest.json</a>
                            <a href="{{ url_for('main.extension_files', filename='background.js') }}" target="_blank" class="btn btn-sm btn-outline-secondary">background.js</a>
                            <a href="{{ url_for('main.extension_files', filename='content.js') }}" target="_blank" class="btn btn-sm btn-outline-secondary">content.js</a>
                            <a href="{{ url_for('main.extension_files', filename='popup.html') }}" target="_blank" class="btn btn-sm btn-outline-secondary">popup.html</a>
                            <a href="{{ url_for('main.extension_files', filename='popup.js') }}" target="_blank" class="btn btn-sm btn-outline-secondary">popup.js</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Documentation Section -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-10">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">📚 Documentation & Support</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-header bg-success text-white text-center">
                                    <h6 class="mb-0">⚡ Quick Setup Guide</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p class="card-text">2-minute installation guide with visual steps and troubleshooting tips.</p>
                                    <a href="/static/documentation/QUICK_SETUP.md" target="_blank" class="btn btn-success">
                                        📖 Quick Setup
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-header bg-primary text-white text-center">
                                    <h6 class="mb-0">📋 Complete Guide</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p class="card-text">Comprehensive installation documentation with troubleshooting and API reference.</p>
                                    <a href="/static/documentation/INSTALLATION_GUIDE.md" target="_blank" class="btn btn-primary">
                                        📚 Full Documentation
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card h-100">
                                <div class="card-header bg-info text-white text-center">
                                    <h6 class="mb-0">🛠️ Technical Reference</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p class="card-text">Developer documentation with API specs and customization examples.</p>
                                    <a href="/static/documentation/README.md" target="_blank" class="btn btn-info">
                                        🔧 Developer Docs
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Requirements -->
    <div class="row justify-content-center mb-4">
        <div class="col-md-10">
            <div class="card border-secondary">
                <div class="card-header bg-secondary text-white">
                    <h4 class="mb-0">⚙️ System Requirements & Information</h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>💻 Requirements:</h5>
                            <ul>
                                <li><strong>OS:</strong> Windows 10/11 (64-bit)</li>
                                <li><strong>Python:</strong> 3.8+ (auto-installed if missing)</li>
                                <li><strong>Browser:</strong> Google Chrome (latest)</li>
                                <li><strong>Privileges:</strong> Administrator (for installation only)</li>
                                <li><strong>Network:</strong> Localhost access (no internet required)</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h5>🔍 How It Works:</h5>
                            <div class="alert alert-light">
                                <ol class="mb-0">
                                    <li>🌐 Web page detects service status</li>
                                    <li>🖨️ <strong>Service Available</strong> → Green "Print Labels (Silent)" button</li>
                                    <li>📄 <strong>Service Unavailable</strong> → Blue "Generate PDF" button</li>
                                    <li>🔄 Automatic fallback ensures printing always works</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Buttons -->
    <div class="row justify-content-center mb-5">
        <div class="col-md-8 text-center">
            <div class="card border-dark">
                <div class="card-body">
                    <h5>🚀 Ready to Start?</h5>
                    <p class="text-muted">Installation takes ~5 minutes • Zero maintenance required</p>
                    <div class="btn-group-vertical btn-group-lg" role="group">
                        <a href="{{ url_for('main.print_module') }}" class="btn btn-success btn-lg">
                            🖨️ Go to Print Module
                        </a>
                        <button class="btn btn-secondary" onclick="window.close()">
                            ↩️ Close Window
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Windows Service Download Handler
document.getElementById('download-service-btn').addEventListener('click', function(e) {
    e.preventDefault();
    
    // Show loading state
    const originalText = this.innerHTML;
    this.innerHTML = '⏳ Preparing Windows Service Package...';
    this.disabled = true;
    
    // Create the Windows service package
    fetch('/create_service_package', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Start download
                window.location.href = data.download_url;
                
                // Show success message
                setTimeout(() => {
                    this.innerHTML = '✅ Download Started!';
                }, 500);
                
                // Reset button
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                }, 3000);
            } else {
                alert('Error creating Windows service package: ' + data.error);
                this.innerHTML = originalText;
                this.disabled = false;
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
            this.innerHTML = originalText;
            this.disabled = false;
        });
});

// Chrome Extension Download Handler
document.getElementById('download-extension-btn').addEventListener('click', function(e) {
    e.preventDefault();
    
    // Show loading state
    const originalText = this.innerHTML;
    this.innerHTML = '⏳ Preparing Chrome Extension Package...';
    this.disabled = true;
    
    // Create the extension package
    fetch('/create_extension_package', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Start download
                window.location.href = data.download_url;
                
                // Show success message
                setTimeout(() => {
                    this.innerHTML = '✅ Download Started!';
                }, 500);
                
                // Reset button
                setTimeout(() => {
                    this.innerHTML = originalText;
                    this.disabled = false;
                }, 3000);
            } else {
                alert('Error creating extension package: ' + data.error);
                this.innerHTML = originalText;
                this.disabled = false;
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
            this.innerHTML = originalText;
            this.disabled = false;
        });
});

// Documentation links - track clicks for analytics
document.querySelectorAll('a[href*="/static/documentation/"]').forEach(link => {
    link.addEventListener('click', function(e) {
        // Could add analytics tracking here
        console.log('Documentation accessed:', this.href);
    });
});

// Show installation progress tips
function showInstallationTips() {
    const tips = [
        '💡 Tip: The Windows service automatically starts with your computer',
        '💡 Tip: Both components work together - install the service first',
        '💡 Tip: Check the documentation for troubleshooting common issues',
        '💡 Tip: The system gracefully falls back to PDF downloads if needed'
    ];
    
    let tipIndex = 0;
    const tipContainer = document.createElement('div');
    tipContainer.className = 'alert alert-info position-fixed';
    tipContainer.style.cssText = 'bottom: 20px; right: 20px; max-width: 300px; z-index: 1000;';
    
    function showNextTip() {
        if (tipIndex < tips.length) {
            tipContainer.innerHTML = `
                <button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
                ${tips[tipIndex]}
            `;
            
            if (!document.body.contains(tipContainer)) {
                document.body.appendChild(tipContainer);
            }
            
            tipIndex++;
            setTimeout(showNextTip, 8000); // Show next tip after 8 seconds
        } else {
            setTimeout(() => {
                if (document.body.contains(tipContainer)) {
                    tipContainer.remove();
                }
            }, 5000);
        }
    }
    
    // Start showing tips after 3 seconds
    setTimeout(showNextTip, 3000);
}

// Initialize tips when page loads
document.addEventListener('DOMContentLoaded', showInstallationTips);
</script>
{% endblock %}