templates/ad_reward.html

{% extends "base.html" %}

{% block title %}Watch Ad & Earn Credits{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-200 dark:border-gray-700">
            <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                Watch Ad & Earn Credits
            </h1>
        </div>
        
        <div class="px-6 py-4">
            <div class="flex flex-col lg:flex-row gap-6">
                <div class="w-full lg:w-2/3">
                    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 mb-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-2">How it works</h2>
                        <p class="text-gray-600 dark:text-gray-300 mb-4">
                            Watch a short advertisement to earn credits that you can use to generate content with our AI tools.
                        </p>
                        <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 mb-4">
                            <li>Complete the ad to earn {{ tool.cost }} credits</li>
                            <li>You will be redirected back to the tool automatically</li>
                            <li>Your credits will be available immediately</li>
                        </ul>
                    </div>
                    
                    <!-- Ad Container -->
                    <div id="ad-container" class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden relative">
                        <div id="ad-placeholder" class="flex flex-col items-center justify-center p-10 text-center">
                            <div class="mb-4">
                                <svg class="w-16 h-16 text-gray-400 dark:text-gray-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <p class="text-gray-600 dark:text-gray-300 mb-6">Loading advertisement...</p>
                            <button id="start-ad-btn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                Start Watching
                            </button>
                        </div>
                        
                        <div id="ad-content" class="hidden">
                            <!-- This is where the actual ad will be displayed -->
                            {% if reward_ad and reward_ad.success %}
                                {{ reward_ad.ad_code|safe }}
                            {% else %}
                                <div class="p-6 text-center">
                                    <p class="text-red-500">Sorry, no ads are available at the moment. Please try again later.</p>
                                </div>
                            {% endif %}
                        </div>
                        
                        <div id="ad-completed" class="hidden flex flex-col items-center justify-center p-10 text-center">
                            <div class="mb-4">
                                <svg class="w-16 h-16 text-green-500 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">Thank You!</h3>
                            <p class="text-gray-600 dark:text-gray-300 mb-6">
                                You've earned <span class="font-bold text-green-500">{{ tool.cost }} credits</span>
                            </p>
                            <a href="{{ return_url }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                Return to Tool
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="w-full lg:w-1/3">
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-6">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Your Balance</h2>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-yellow-500 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-gray-900 dark:text-white font-semibold" id="current-credits">{{ user_credits }}</span>
                            </div>
                            <div>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                                    Credits
                                </span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Tool info -->
                    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Tool Information</h2>
                        <div class="flex items-center mb-2">
                            <span class="text-gray-600 dark:text-gray-300">{{ tool.name }}</span>
                        </div>
                        <div class="flex items-center mb-2">
                            <span class="text-gray-600 dark:text-gray-300 mr-2">Cost:</span>
                            <span class="font-semibold text-gray-900 dark:text-white">{{ tool.cost }} credits</span>
                        </div>
                        <p class="text-gray-600 dark:text-gray-300 text-sm">
                            {{ tool.description }}
                        </p>
                    </div>
                    
                    <!-- Sidebar ad -->
                    <div class="mt-6">
                        {% if sidebar_ad and sidebar_ad.success %}
                            {{ sidebar_ad.ad_code|safe }}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>

    // Set up variables from Jinja templates

    var toolId = "{{ tool.id }}";

    var returnUrl = "{{ return_url }}";

    {% if reward_ad and reward_ad.success %}

    var hasRewardAd = true;

    var impressionId = "{{ reward_ad.impression_id }}";

    {% else %}

    var hasRewardAd = false;

    var impressionId = null;

    {% endif %}

    

    // Get DOM elements

    var adContainer = document.getElementById('ad-container');

    var adPlaceholder = document.getElementById('ad-placeholder');

    var adContent = document.getElementById('ad-content');

    var adCompleted = document.getElementById('ad-completed');

    var startAdBtn = document.getElementById('start-ad-btn');

    var currentCredits = document.getElementById('current-credits');

    

    // Set up event listener for ad start button

    startAdBtn.addEventListener('click', function() {

        adPlaceholder.classList.add('hidden');

        adContent.classList.remove('hidden');

        

        // Simulate ad completion after a delay

        var adDuration = hasRewardAd ? 5000 : 3000;

        setTimeout(function() {

            completeAd(impressionId);

        }, adDuration);

    });

    

    // Handle ad completion

    function completeAd(adImpressionId) {

        // Hide ad content

        adContent.classList.add('hidden');

        

        // Show loading spinner

        var loadingEl = document.createElement('div');

        loadingEl.className = 'flex justify-center items-center p-10';

        loadingEl.innerHTML = 

            '<svg class="animate-spin h-10 w-10 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +

                '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +

                '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +

            '</svg>';

        adContainer.appendChild(loadingEl);

        

        // Send completion to server

        fetch('/api/ads/complete', {

            method: 'POST',

            headers: {

                'Content-Type': 'application/json'

            },

            body: JSON.stringify({

                ad_type: 'reward_video',

                impression_id: adImpressionId,

                tool_id: toolId

            })

        })

        .then(function(response) { 

            return response.json(); 

        })

        .then(function(data) {

            // Remove loading spinner

            adContainer.removeChild(loadingEl);

            

            if (data.success) {

                // Update credits display

                if (currentCredits) {

                    currentCredits.textContent = data.current_credits;

                }

                

                // Also update header credits if available

                var headerCredits = document.getElementById('user-credits');

                if (headerCredits) {

                    headerCredits.textContent = data.current_credits;

                }

                

                // Show completion message

                adCompleted.classList.remove('hidden');

                

                // Show success toast

                showToast('You earned ' + data.credits_earned + ' credits!', 'success');

                

                // Redirect after delay if auto-redirect is enabled

                setTimeout(function() {

                    window.location.href = returnUrl;

                }, 3000);

            } else {

                // Show error message

                showToast('Error: ' + data.error, 'error');

                adPlaceholder.classList.remove('hidden');

                startAdBtn.textContent = 'Try Again';

            }

        })

        .catch(function(error) {

            console.error('Error:', error);

            // Remove loading spinner

            adContainer.removeChild(loadingEl);

            // Show error message

            showToast('Network error, please try again', 'error');

            adPlaceholder.classList.remove('hidden');

            startAdBtn.textContent = 'Try Again';

        });

    }

</script>
{% endblock %}