From 2d793dfbae75fa07a0f5251d1caba75f54673d52 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 11 Jul 2025 16:26:04 +0530 Subject: [PATCH] Update all agent templates with modern html-agents design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Redesigned Data Analyzer with glassmorphism effects and two-column layout - Updated Job Posting Generator with organized form sections and orange theme - Refreshed Social Ads Generator with simplified platform selection and pink theme - Modernized Weather Reporter with streamlined radio interface and blue theme - Implemented consistent full-width gradient backgrounds across all agents - Added interactive processing status indicators with step-by-step feedback - Enhanced form validation and user experience patterns - Maintained Django functionality while adopting fast and simple design patterns 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .../templates/data_analyzer/detail.html | 1821 +++++++---------- .../job_posting_generator/detail.html | 1507 ++++++-------- .../social_ads_generator/detail.html | 1569 ++++++-------- .../templates/weather_reporter/detail.html | 1744 ++++++---------- 4 files changed, 2688 insertions(+), 3953 deletions(-) diff --git a/data_analyzer/templates/data_analyzer/detail.html b/data_analyzer/templates/data_analyzer/detail.html index de0cedb..6764f20 100644 --- a/data_analyzer/templates/data_analyzer/detail.html +++ b/data_analyzer/templates/data_analyzer/detail.html @@ -1,917 +1,421 @@ +{% extends 'base.html' %} {% load static %} - - - - - - Data Analyzer Agent - NetCop AI Hub - - - -
- - - -
- -
-

- 📊 Data Analyzer Agent -

-

- Analyze your PDF documents and generate comprehensive insights with statistical analysis and trend detection. -

-
- 💰 Cost: 5.00 AED -
-
- - - {% if messages %} - {% for message in messages %} -
- {{ message }} -
- {% endfor %} - {% endif %} - - -
- -
-
- {% csrf_token %} - - -
-

📁 Upload Your Data File

- -
-
-
📊
-
- Choose or drag your data file here -
-
- Supports PDF files only (up to 10MB) -
-
- - - - -
-
- - -
-

🔍 Analysis Type

- -
- - - - - -
-
- - - {% if processing %} -
-
- ⏳ Processing... -
-
- {{ processing_status|default:"Analyzing your data file..." }} -
-
- {% endif %} -
-
- - -
- -
-

💳 Your Wallet

- -
-
- {% if user.is_authenticated %} - {{ user.wallet_balance|floatformat:2 }} AED - {% else %} - 0.00 AED - {% endif %} -
-
- Available Balance -
-
- - {% if user.is_authenticated %} - {% if user.wallet_balance >= 5.00 %} - - {% else %} -
- Insufficient balance! You need 5.00 AED. -
- - 💰 Top Up Wallet - - {% endif %} - {% else %} - - 🔑 Login to Continue - - {% endif %} -
- - -
-

- 💡 How it works -

-
    -
  • - • - Upload PDF files for analysis -
    • -
  • - • - Choose your analysis depth -
    • -
  • - • - Get AI-powered insights -
    • -
  • - • - Download comprehensive reports -
    • -
-
-
-
- - - {% if analysis_results %} -
- -
-
✅
-

- Data Analysis Results -

-
- ✅ Complete -
-
- - -
-

- 📊 Analysis Report -

- -
- {{ analysis_results.analysis|default:""|cut:"(Demo mode - N8N integration will be activated in production)" }} -
- - {% if analysis_results.file_info %} -
-
- 📄 File Information -
-
- File: {{ analysis_results.file_info.name }}
- Size: {{ analysis_results.file_info.size }}
- Type: {{ analysis_results.file_info.type }}
- Processed: {{ analysis_results.processed_at|date:"F j, Y g:i A" }} -
-
- {% endif %} -
- - -
- - - -
-
- {% endif %} -
- - -
-
-

- © 2024 NetCop AI Hub. Powered by AI agents. -

-
-
-
+ +{% block title %}Data Analyzer Agent - NetCop AI Hub{% endblock %} + +{% block extra_css %} + +{% endblock %} + +{% block content %} +
+
+ +
+ +
+ +
+

📁 Upload Your Data File

- // Update wallet balance if provided - if (result.wallet_balance !== undefined) { - updateWalletBalance(result.wallet_balance); - } +
+
📊
+
+ Choose or drag your data file here +
+
+ Supports PDF, CSV, Excel files (up to 10MB) +
+
- // Poll for results - pollForResults(result.request_id); - } else { - showToast(`❌ Error: ${result.error}`, 'error'); - resetForm(); - } - - } catch (error) { - showToast(`❌ Network error: ${error.message}`, 'error'); - resetForm(); - } - } - - // Poll for analysis results - async function pollForResults(requestId, maxAttempts = 30) { - let attempts = 0; - - const pollInterval = setInterval(async () => { - attempts++; - - try { - const response = await fetch(`{% url 'data_analyzer:result' '00000000-0000-0000-0000-000000000000' %}`.replace('00000000-0000-0000-0000-000000000000', requestId)); - const result = await response.json(); + - if (result.success && result.status === 'completed') { - clearInterval(pollInterval); + +
+ + +
+

🔍 Analysis Type

+ +
+ - // Update wallet balance after successful completion - if (result.wallet_balance !== undefined) { - updateWalletBalance(result.wallet_balance); - } + - displayResults(result); - resetForm(); // Form stays ready with current file - showToast('✅ Analysis completed and payment processed!', 'success'); - } else if (result.status === 'failed') { - clearInterval(pollInterval); - showToast('❌ Analysis failed - no charge applied', 'error'); - resetForm(); - } else if (attempts >= maxAttempts) { - clearInterval(pollInterval); - showToast('⚠️ Analysis is taking longer than expected', 'error'); - resetForm(); - } - // Continue polling if still processing - - } catch (error) { - clearInterval(pollInterval); - showToast(`❌ Error checking results: ${error.message}`, 'error'); - resetForm(); - } - }, 2000); // Poll every 2 seconds - } - - // Display analysis results - function displayResults(result) { - hideProcessingStatus(); - - // Create results HTML - const resultsHtml = ` -
- -
+ +
+
+ + + + + + - -
-

- 📊 Analysis Report -

- -
- ${result.report_text || result.analysis_results || 'No analysis content available'} -
- -
-
- 📄 Processing Information -
-
- Processing Time: ${result.processing_time ? result.processing_time.toFixed(2) + 's' : 'N/A'}
- Status: ${result.status}
- Completed: ${new Date().toLocaleString()} -
-
+
+
- -
- - - - -
- `; +
- // Find the main grid container and insert results after it - const gridContainer = document.querySelector('.grid'); - const existingResults = document.querySelector('.analysis-results'); - if (existingResults) { - existingResults.remove(); - } - - // Insert results right after the main grid (below the form) - gridContainer.insertAdjacentHTML('afterend', resultsHtml); - - // Scroll to results smoothly - setTimeout(() => { - document.querySelector('.analysis-results').scrollIntoView({ - behavior: 'smooth', - block: 'start' - }); - }, 100); + +
+
+

💳 Your Wallet

+ +
{{ user.wallet_balance|floatformat:2 }} AED
+
Available Balance
+ + +
+ +
+

💡 How it works

+
    +
  • Upload PDF, CSV, or Excel files
    • +
  • Choose your analysis depth
    • +
  • Get AI-powered insights
    • +
  • Download comprehensive reports
    • +
+
+
+
+
+
+{% endblock %} + +{% block extra_js %} + - - \ No newline at end of file + setTimeout(() => { + toast.remove(); + }, 3000); + } + +{% endblock %} \ No newline at end of file diff --git a/job_posting_generator/templates/job_posting_generator/detail.html b/job_posting_generator/templates/job_posting_generator/detail.html index b2fc5c4..c377c1d 100644 --- a/job_posting_generator/templates/job_posting_generator/detail.html +++ b/job_posting_generator/templates/job_posting_generator/detail.html @@ -1,850 +1,689 @@ +{% extends 'base.html' %} {% load static %} - - - - - - Job Posting Generator Agent - NetCop AI Hub - - - -
- - - -
- -
-

- 💼 Job Posting Generator Agent -

-

- Create professional job postings with detailed requirements, company culture integration, and SEO optimization. -

-
- 💰 Cost: 4.00 AED -
-
- - - {% if messages %} - {% for message in messages %} -
- {{ message }} -
- {% endfor %} - {% endif %} - - -
- -
-
- {% csrf_token %} - - -
-

📝 Basic Information

- -
-
- - -
- -
- - -
-
- -
- - -
- Include key responsibilities, day-to-day tasks, and what success looks like in this role. -
-
-
- - -
-

🎯 Position Details

- -
-
- - -
- -
- - -
-
- -
-
- - -
- -
- - -
-
-
- - -
-

🏢 Company Information

- -
- - -
- Optional: Include company website for better context and SEO. -
-
- -
- - -
- Optional: Specific application instructions, required documents, or contact information. -
-
-
- - -
-
- ⏳ Processing... -
-
- Creating your professional job posting... -
-
-
-
- - -
- -
-

💳 Your Wallet

- -
-
- {% if user.is_authenticated %} - {{ user.wallet_balance|floatformat:2 }} AED - {% else %} - 0.00 AED - {% endif %} -
-
- Available Balance -
-
- - {% if user.is_authenticated %} - {% if user.wallet_balance >= 4.00 %} - - {% else %} -
- Insufficient balance! You need 4.00 AED. -
- - 💰 Top Up Wallet - - {% endif %} - {% else %} - - 🔑 Login to Continue - - {% endif %} -
- - -
-

- 💡 How it works -

-
    -
  • - • - Enter job and company details -
    • -
  • - • - AI generates professional posting -
    • -
  • - • - Includes requirements & culture -
    • -
  • - • - SEO optimized for job boards -
    • -
-
-
-
- - -
- -
-
✅
-

- Professional Job Posting -

-
- ✅ Complete -
-
- - -
- -
- - -
- - - + } + +{% endblock %} - +{% block content %} +
+
+ + {% if messages %} + {% for message in messages %} +
+ {{ message }} +
+ {% endfor %} + {% endif %} + + +
+ +
+

📝 Job Posting Details

+ +
+ {% csrf_token %} + + +
+

Basic Information

+ + + + + + + + + +
+ + +
+

Job Requirements

+ + + + + + + + + +
+ + +
+

Additional Details (Optional)

+ + + + + + + + + +
+
+
+ + +
+
💼
+
Creating Job Posting...
+
Crafting professional job description...
+
+ + +
+
+
✅
+

Generated Job Posting

+
✅ Complete
+
+ +
+ +
+ +
+ + +
- -
-
-

- © 2024 NetCop AI Hub. Powered by AI agents. -

+ +
+
+

💳 Your Wallet

+ +
+ {% if user.is_authenticated %} + {{ user.wallet_balance|floatformat:2 }} AED + {% else %} + 0.00 AED + {% endif %} +
+
Available Balance
+ + {% if user.is_authenticated %} + {% if user.wallet_balance >= 4.00 %} + + {% else %} +
+ Insufficient balance! You need 4.00 AED. +
+ + 💰 Top Up Wallet + + {% endif %} + {% else %} + + 🔑 Login to Continue + + {% endif %}
-
+ +
+

💡 How it works

+
    +
  • Fill in job details and requirements
    • +
  • Add company info and benefits
    • +
  • Choose posting style and tone
    • +
  • Get professional job description
    • +
+
+
+
+{% endblock %} + +{% block extra_js %} + - - \ No newline at end of file + } + + // Download job posting as text file + function downloadJobPosting() { + const jobText = generateJobText(); + const blob = new Blob([jobText], { type: 'text/plain' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'job-posting-' + Date.now() + '.txt'; + a.click(); + URL.revokeObjectURL(url); + showToast('💾 Job posting downloaded!', 'success'); + } + + // Generate job text for copy/download + function generateJobText() { + const content = document.querySelector('#jobContent'); + if (content) { + return content.textContent || content.innerText || ''; + } + return 'No job posting content available'; + } + + // Reset form for creating another job posting + function resetForm() { + document.getElementById('jobPostingForm').reset(); + document.getElementById('jobResults').style.display = 'none'; + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + showToast('Form reset! Ready for another job posting.', 'success'); + } + + // Simple toast notification + function showToast(message, type = 'info') { + const toast = document.createElement('div'); + toast.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 12px 20px; + border-radius: 8px; + color: white; + font-weight: 600; + z-index: 1000; + ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'} + `; + toast.textContent = message; + document.body.appendChild(toast); + + setTimeout(() => { + toast.remove(); + }, 3000); + } + + // Update wallet balance display + function updateWalletBalance(newBalance) { + const balanceElements = document.querySelectorAll('[data-wallet-balance]'); + balanceElements.forEach(element => { + element.textContent = `${newBalance.toFixed(2)} AED`; + }); + window.currentWalletBalance = newBalance; + } + + // Display job posting results + function displayResults(result) { + const resultsContainer = document.getElementById('jobResults'); + const contentContainer = document.getElementById('jobContent'); + + if (result.success && result.status === 'completed') { + contentContainer.textContent = result.content || result.job_posting_content || result.output_text || 'Job posting generated successfully!'; + resultsContainer.style.display = 'block'; + + // Update wallet balance if provided + if (result.wallet_balance !== undefined) { + updateWalletBalance(result.wallet_balance); + } + + showToast('✅ Job posting created and payment processed!', 'success'); + } else { + showToast('❌ Failed to generate job posting - no charge applied', 'error'); + } + } + + // Poll for results + function pollForResults(requestId) { + let pollCount = 0; + const maxPolls = 30; // 30 seconds maximum + + const pollInterval = setInterval(() => { + pollCount++; + + fetch(`/agents/job-posting-generator/status/${requestId}/`) + .then(response => response.json()) + .then(result => { + if (result.status === 'completed' || result.status === 'failed') { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + + displayResults(result); + } else if (pollCount >= maxPolls) { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + showToast('❌ Processing timeout - please try again', 'error'); + } + }) + .catch(error => { + console.error('Error polling results:', error); + if (pollCount >= maxPolls) { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + showToast('❌ Network error - please try again', 'error'); + } + }); + }, 1000); + } + + // Handle form submission + document.getElementById('jobPostingForm').addEventListener('submit', function(e) { + e.preventDefault(); + + if (!isFormValid()) { + showToast('Please fill in all required fields', 'error'); + return; + } + + // Check user authentication + {% if not user.is_authenticated %} + window.location.href = "{% url 'authentication:login' %}"; + return; + {% endif %} + + // Check wallet balance + const balance = {{ user.wallet_balance|default:0 }}; + if (balance < 4.00) { + showToast('Insufficient balance! You need 4.00 AED.', 'error'); + setTimeout(() => { + window.location.href = "{% url 'core:wallet' %}"; + }, 2000); + return; + } + + // Show processing status with steps + document.getElementById('processingStatus').style.display = 'block'; + document.getElementById('processButton').disabled = true; + document.getElementById('processButton').innerHTML = '⏳ Processing...'; + document.getElementById('jobResults').style.display = 'none'; + + const steps = [ + 'Analyzing job requirements...', + 'Structuring job description...', + 'Optimizing for recruitment...', + 'Adding company branding...', + 'Finalizing professional format...' + ]; + + let currentStep = 0; + const stepInterval = setInterval(() => { + if (currentStep < steps.length) { + document.getElementById('statusText').textContent = steps[currentStep]; + currentStep++; + } else { + clearInterval(stepInterval); + } + }, 800); + + // Submit form via AJAX + const formData = new FormData(this); + + fetch(window.location.href, { + method: 'POST', + body: formData, + headers: { + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(response => response.json()) + .then(result => { + clearInterval(stepInterval); + if (result.success && result.request_id) { + // Start polling for results + pollForResults(result.request_id); + } else { + // Handle immediate response + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + + if (result.error) { + showToast(`❌ ${result.error}`, 'error'); + } else { + displayResults(result); + } + } + }) + .catch(error => { + clearInterval(stepInterval); + console.error('Error:', error); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '💼 Generate Job Posting (4.00 AED)'; + showToast('❌ Network error - please try again', 'error'); + }); + }); + +{% endblock %} \ No newline at end of file diff --git a/social_ads_generator/templates/social_ads_generator/detail.html b/social_ads_generator/templates/social_ads_generator/detail.html index 03e29ad..a68e899 100644 --- a/social_ads_generator/templates/social_ads_generator/detail.html +++ b/social_ads_generator/templates/social_ads_generator/detail.html @@ -1,941 +1,660 @@ +{% extends 'base.html' %} {% load static %} - - - - - - Social Ads Generator Agent - NetCop AI Hub - - - -
- - - -
- -
-

- 📱 Social Ads Generator Agent -

-

- Create compelling social media advertisements with platform-optimized copy, audience targeting suggestions, and A/B test variants. -

-
- 💰 Cost: 7.00 AED -
-
- - - {% if messages %} - {% for message in messages %} -
- {{ message }} -
- {% endfor %} - {% endif %} - - -
- -
-
- {% csrf_token %} - - -
-

📝 Describe Your Product/Service

- -
- - -
- Be specific about features, benefits, and target audience for better results. -
-
-
- - -
-

📱 Target Platform

- -
- - - - - - - - - - - -
-
- - -
-

⚙️ Additional Options

- - -
- -
- Emojis can increase engagement but may not be suitable for all brands. -
-
- - -
- - -
-
- - -
-
- ⏳ Processing... -
-
- Creating your social media ad... -
-
-
-
- - -
- -
-

💳 Your Wallet

- -
-
- {% if user.is_authenticated %} - {{ user.wallet_balance|floatformat:2 }} AED - {% else %} - 0.00 AED - {% endif %} -
-
- Available Balance -
-
- - {% if user.is_authenticated %} - {% if user.wallet_balance >= 7.00 %} - - {% else %} -
- Insufficient balance! You need 7.00 AED. -
- - 💰 Top Up Wallet - - {% endif %} - {% else %} - - 🔑 Login to Continue - - {% endif %} -
- - -
-

- 💡 How it works -

-
    -
  • - • - Describe your product/service -
    • -
  • - • - Choose target platform -
    • -
  • - • - Get optimized ad copy -
    • -
  • - • - Includes A/B test variants -
    • -
-
-
-
- - -
- -
-
✅
-

- Social Media Ad Copy -

-
- ✅ Complete -
-
- - -
-

- 📱 Optimized for Platform -

-
- - -
-

- 📝 Generated Ad Copy -

- -
- -
- -
-
- #️⃣ Suggested Hashtags -
-
- -
-
- -
-
- Generated: Just now -
-
-
- - -
- - - + } + +{% endblock %} - +{% block content %} + +
+{% endblock %} + +{% block extra_js %} + - - \ No newline at end of file + } + + // Download social ads as text file + function downloadSocialAds() { + const adText = generateAdText(); + const blob = new Blob([adText], { type: 'text/plain' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'social-ads-' + Date.now() + '.txt'; + a.click(); + URL.revokeObjectURL(url); + showToast('💾 Social ads downloaded!', 'success'); + } + + // Generate ad text for copy/download + function generateAdText() { + const content = document.querySelector('#adContent'); + if (content) { + return content.textContent || content.innerText || ''; + } + return 'No ad content available'; + } + + // Reset form for creating another ad + function resetForm() { + document.getElementById('socialAdsForm').reset(); + document.getElementById('adResults').style.display = 'none'; + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + showToast('Form reset! Ready for another ad campaign.', 'success'); + } + + // Simple toast notification + function showToast(message, type = 'info') { + const toast = document.createElement('div'); + toast.style.cssText = ` + position: fixed; + top: 20px; + right: 20px; + padding: 12px 20px; + border-radius: 8px; + color: white; + font-weight: 600; + z-index: 1000; + ${type === 'success' ? 'background: #10b981;' : 'background: #ef4444;'} + `; + toast.textContent = message; + document.body.appendChild(toast); + + setTimeout(() => { + toast.remove(); + }, 3000); + } + + // Update wallet balance display + function updateWalletBalance(newBalance) { + const balanceElements = document.querySelectorAll('[data-wallet-balance]'); + balanceElements.forEach(element => { + element.textContent = `${newBalance.toFixed(2)} AED`; + }); + window.currentWalletBalance = newBalance; + } + + // Display social ads results + function displayResults(result) { + const resultsContainer = document.getElementById('adResults'); + const contentContainer = document.getElementById('adContent'); + + if (result.success && result.status === 'completed') { + contentContainer.textContent = result.content || result.ad_copy_content || result.output_text || 'Social ads generated successfully!'; + resultsContainer.style.display = 'block'; + + // Update wallet balance if provided + if (result.wallet_balance !== undefined) { + updateWalletBalance(result.wallet_balance); + } + + showToast('✅ Social ads created and payment processed!', 'success'); + } else { + showToast('❌ Failed to generate ads - no charge applied', 'error'); + } + } + + // Poll for results + function pollForResults(requestId) { + let pollCount = 0; + const maxPolls = 30; // 30 seconds maximum + + const pollInterval = setInterval(() => { + pollCount++; + + fetch(`/agents/social-ads-generator/status/${requestId}/`) + .then(response => response.json()) + .then(result => { + if (result.status === 'completed' || result.status === 'failed') { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + + displayResults(result); + } else if (pollCount >= maxPolls) { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + showToast('❌ Processing timeout - please try again', 'error'); + } + }) + .catch(error => { + console.error('Error polling results:', error); + if (pollCount >= maxPolls) { + clearInterval(pollInterval); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + showToast('❌ Network error - please try again', 'error'); + } + }); + }, 1000); + } + + // Handle form submission + document.getElementById('socialAdsForm').addEventListener('submit', function(e) { + e.preventDefault(); + + if (!isFormValid()) { + showToast('Please fill in all required fields', 'error'); + return; + } + + // Check user authentication + {% if not user.is_authenticated %} + window.location.href = "{% url 'authentication:login' %}"; + return; + {% endif %} + + // Check wallet balance + const balance = {{ user.wallet_balance|default:0 }}; + if (balance < 7.00) { + showToast('Insufficient balance! You need 7.00 AED.', 'error'); + setTimeout(() => { + window.location.href = "{% url 'core:wallet' %}"; + }, 2000); + return; + } + + // Show processing status with steps + document.getElementById('processingStatus').style.display = 'block'; + document.getElementById('processButton').disabled = true; + document.getElementById('processButton').innerHTML = '⏳ Processing...'; + document.getElementById('adResults').style.display = 'none'; + + const steps = [ + 'Analyzing product information...', + 'Understanding target platforms...', + 'Crafting engaging headlines...', + 'Writing compelling copy...', + 'Optimizing for each platform...' + ]; + + let currentStep = 0; + const stepInterval = setInterval(() => { + if (currentStep < steps.length) { + document.getElementById('statusText').textContent = steps[currentStep]; + currentStep++; + } else { + clearInterval(stepInterval); + } + }, 800); + + // Submit form via AJAX + const formData = new FormData(this); + + fetch(window.location.href, { + method: 'POST', + body: formData, + headers: { + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(response => response.json()) + .then(result => { + clearInterval(stepInterval); + if (result.success && result.request_id) { + // Start polling for results + pollForResults(result.request_id); + } else { + // Handle immediate response + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + + if (result.error) { + showToast(`❌ ${result.error}`, 'error'); + } else { + displayResults(result); + } + } + }) + .catch(error => { + clearInterval(stepInterval); + console.error('Error:', error); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '📢 Generate Social Ads (7.00 AED)'; + showToast('❌ Network error - please try again', 'error'); + }); + }); + +{% endblock %} \ No newline at end of file diff --git a/weather_reporter/templates/weather_reporter/detail.html b/weather_reporter/templates/weather_reporter/detail.html index 0bcf561..d38b323 100644 --- a/weather_reporter/templates/weather_reporter/detail.html +++ b/weather_reporter/templates/weather_reporter/detail.html @@ -1,1141 +1,673 @@ +{% extends 'base.html' %} {% load static %} - - - - - - Weather Reporter Agent - NetCop AI Hub - - - -
- - + {% endfor %} + {% endif %} -
- -
-

- 🌤️ Weather Reporter Agent -

-

- Get detailed weather reports for any location worldwide with current conditions, forecasts, and weather alerts. -

-
- 💰 Cost: {{ agent.price }} AED -
+ +
+
+

🌤️ Weather Reporter

+ +
+ {% csrf_token %} + + +
+ + +
Examples: "New York", "London, UK", "Tokyo, Japan", "37.7749,-122.4194"
+
+ + +
+ +
+ + + + + +
+
+
- - {% if messages %} - {% for message in messages %} -
- {{ message }} -
- {% endfor %} - {% endif %} + +
+
⏳
+
Getting Weather Data...
+
Fetching latest weather information for your location
+
- -
- -
-
- {% csrf_token %} - - -
-

📍 Enter Location

- -
- -
- Examples: "New York", "London, UK", "Tokyo, Japan", "37.7749,-122.4194" -
-
-
- - -
-

📊 Report Type

- -
- - - - - -
-
- - - {% if processing %} -
-
- ⏳ Processing... -
-
- {{ processing_status|default:"Getting weather data..." }} -
-
- {% endif %} -
+ +
+
+
✅
+

Weather Report

+
✅ Complete
- -
- -
-

💳 Your Wallet

- -
-
- {% if user.is_authenticated %} - {{ user.wallet_balance|floatformat:2 }} AED - {% else %} - 0.00 AED - {% endif %} -
-
- Available Balance -
-
- - {% if user.is_authenticated %} - {% if user.wallet_balance >= agent.price %} - - {% else %} -
- Insufficient balance! You need {{ agent.price }} AED. -
- - 💰 Top Up Wallet - - {% endif %} - {% else %} - - 🔑 Login to Continue - - {% endif %} -
- - -
-

- 💡 How it works -

-
    -
  • - • - Enter any location worldwide -
    • -
  • - • - Choose your report type -
    • -
  • - • - Get real-time weather data -
    • -
  • - • - Download or copy results -
    • -
-
+
+ +
+ +
+ + +
- - - {% if weather_results %} -
- -
-
✅
-

- Weather Report -

-
- ✅ Complete -
-
- - -
-

- 🌍 {{ weather_results.location }} -

-
- Generated at {{ weather_results.generated_at|date:"F j, Y g:i A" }} -
-
- - - {% if weather_results.current %} -
-

- 🌡️ Current Weather -

- -
-
-
- weather -
-
- {{ weather_results.current.temperature }}°C -
-
- {{ weather_results.current.weather_description }} -
-
- -
-
Feels Like
-
{{ weather_results.current.feels_like }}°C
-
- -
-
Humidity
-
{{ weather_results.current.humidity }}%
-
- -
-
Wind Speed
-
{{ weather_results.current.wind_speed }} km/h
-
- -
-
Pressure
-
{{ weather_results.current.pressure }} hPa
-
- -
-
Visibility
-
{{ weather_results.current.visibility }} km
-
-
-
- {% endif %} - - - {% if weather_results.forecast %} -
-

- 📅 5-Day Forecast -

- -
- {% for day in weather_results.forecast|slice:":5" %} -
-
- {{ day.date|date:"D" }} -
- weather -
- {{ day.temp }}°C -
-
- {{ day.description }} -
-
- {% endfor %} -
-
- {% endif %} - - -
- - - -
-
- {% endif %}
- -
-
-

- © 2024 NetCop AI Hub. Powered by AI agents. -

-
-
-
- - - - \ No newline at end of file + }, 800); + + // Submit form via AJAX + const formData = new FormData(this); + + fetch(window.location.href, { + method: 'POST', + body: formData, + headers: { + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(response => response.json()) + .then(result => { + clearInterval(stepInterval); + if (result.success && result.request_id) { + // Start polling for results + pollForResults(result.request_id); + } else { + // Handle immediate response + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '🌤️ Get Weather Report (2.00 AED)'; + + if (result.error) { + showToast(`❌ ${result.error}`, 'error'); + } else { + displayResults(result); + } + } + }) + .catch(error => { + clearInterval(stepInterval); + console.error('Error:', error); + document.getElementById('processingStatus').style.display = 'none'; + document.getElementById('processButton').disabled = false; + document.getElementById('processButton').innerHTML = '🌤️ Get Weather Report (2.00 AED)'; + showToast('❌ Network error - please try again', 'error'); + }); + }); + +{% endblock %} \ No newline at end of file