app/templates/google_ads/display.html

{% extends "base.html" %}

{% block title %}Google Display Ads Scraper{% endblock %}

{% block content %}
<div class="container mt-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('google_ads.index') }}">Google Ads</a></li>
            <li class="breadcrumb-item active" aria-current="page">Display Ads</li>
        </ol>
    </nav>

    <h1 class="mb-4">Google Display Ads Scraper</h1>
    
    <div class="card">
        <div class="card-header bg-success text-white">
            <h5 class="card-title mb-0">Scrape Display Ads from a Website</h5>
        </div>
        <div class="card-body">
            <form id="display-form" method="post">
                <div class="mb-3">
                    <label for="url" class="form-label">Target URL</label>
                    <input type="url" class="form-control" id="url" name="url" required 
                           placeholder="https://example.com">
                    <div class="form-text">Enter a website URL that displays Google Ads.</div>
                </div>
                
                <div class="mb-3">
                    <label for="scroll_count" class="form-label">Scroll Count</label>
                    <input type="number" class="form-control" id="scroll_count" name="scroll_count" 
                           value="5" min="1" max="20">
                    <div class="form-text">How many times to scroll the page to load dynamic content (1-20).</div>
                </div>
                
                <button type="submit" class="btn btn-success" id="submit-btn">Start Scraping</button>
            </form>
            
            <div id="result-container" class="mt-4 d-none">
                <div class="alert alert-info">
                    <h5>Scraping in Progress</h5>
                    <p>Your Google Display Ads scraping task has been started. This may take a few minutes.</p>
                    <p>Task ID: <span id="task-id"></span></p>
                    <p>You can view results once the task is complete.</p>
                    <a href="{{ url_for('google_ads.view_results') }}?type=display" class="btn btn-info">View Results</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card mt-4">
        <div class="card-header bg-info text-white">
            <h5 class="card-title mb-0">Tips for Display Ad Scraping</h5>
        </div>
        <div class="card-body">
            <ul>
                <li>Choose websites that are known to display Google Ads.</li>
                <li>News sites, blogs, and content-heavy websites often have more display ads.</li>
                <li>Some websites may block automated scraping.</li>
                <li>The tool looks for iframes with Google Ads signatures.</li>
                <li>Not all ads may be captured due to dynamic loading or anti-scraping measures.</li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        $('#display-form').on('submit', function(e) {
            e.preventDefault();
            
            const submitBtn = $('#submit-btn');
            submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');
            
            $.ajax({
                url: "{{ url_for('google_ads.display_ads') }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(response) {
                    $('#result-container').removeClass('d-none');
                    $('#task-id').text(response.task_id);
                    submitBtn.prop('disabled', false).text('Start Scraping');
                },
                error: function(xhr) {
                    alert('Error: ' + xhr.responseJSON.message);
                    submitBtn.prop('disabled', false).text('Start Scraping');
                }
            });
        });
    });
</script>
{% endblock %}