mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 12:52:59 +00:00
✨ Improve social ads generator user experience
UX IMPROVEMENTS: - Reduce excessive toast notifications - only show for critical actions - Add smooth auto-scroll when processing starts (scrolls to processing section) - Add smooth auto-scroll when results appear (scrolls to results section) - Disable submit button during processing with loading state (⏳ Generating...) - Remove unnecessary toasts for download (file download is confirmation enough) - Remove toast for form reset (visual feedback is sufficient) - Simplify copy notification text - Add scroll to form when reset button is clicked BEHAVIOR CHANGES: - Toast notifications now only appear for: - Form validation errors (important) - Processing completion success/failure (important) - Copy to clipboard success/failure (user needs feedback) - Auto-scroll provides visual feedback for processing flow - Button states clearly indicate processing status - Smoother overall user interaction flow These changes create a more polished, less noisy user experience while maintaining important feedback for critical actions. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
5cacfb19d0
commit
e75e814567
@ -88,16 +88,29 @@ const SocialAdsUtils = {
|
||||
const processingStatus = document.getElementById('processingStatus');
|
||||
const resultsContainer = document.getElementById('resultsContainer');
|
||||
|
||||
if (processingStatus) processingStatus.style.display = 'block';
|
||||
if (processingStatus) {
|
||||
processingStatus.style.display = 'block';
|
||||
|
||||
// Smooth scroll to processing section
|
||||
processingStatus.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
}
|
||||
if (resultsContainer) resultsContainer.style.display = 'none';
|
||||
|
||||
this.showToast('🚀 Creating your social ads...', 'success');
|
||||
},
|
||||
|
||||
// Hide processing status
|
||||
hideProcessing() {
|
||||
const processingStatus = document.getElementById('processingStatus');
|
||||
if (processingStatus) processingStatus.style.display = 'none';
|
||||
|
||||
// Re-enable submit button
|
||||
const submitBtn = document.getElementById('generateBtn');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = '📢 Generate Social Ads (4.00 AED)';
|
||||
}
|
||||
},
|
||||
|
||||
// Display social ads results
|
||||
@ -120,9 +133,17 @@ const SocialAdsUtils = {
|
||||
this.renderSecureContent(resultsContent, adContent);
|
||||
}
|
||||
|
||||
// Show results container
|
||||
// Show results container and scroll to it
|
||||
if (resultsContainer) {
|
||||
resultsContainer.style.display = 'block';
|
||||
|
||||
// Smooth scroll to results after a brief delay for rendering
|
||||
setTimeout(() => {
|
||||
resultsContainer.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Update wallet balance if provided
|
||||
@ -130,6 +151,7 @@ const SocialAdsUtils = {
|
||||
this.updateWalletBalance(result.wallet_balance);
|
||||
}
|
||||
|
||||
// Show success notification only for final result
|
||||
this.showToast('✅ Social ads created successfully!', 'success');
|
||||
} else if (result.error) {
|
||||
this.hideProcessing();
|
||||
@ -329,9 +351,9 @@ function copyResults() {
|
||||
if (content) {
|
||||
const text = content.textContent || '';
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
SocialAdsUtils.showToast('📋 Social ads copied to clipboard!', 'success');
|
||||
SocialAdsUtils.showToast('📋 Copied to clipboard!', 'success');
|
||||
}).catch(() => {
|
||||
SocialAdsUtils.showToast('❌ Failed to copy to clipboard', 'error');
|
||||
SocialAdsUtils.showToast('❌ Copy failed', 'error');
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -348,7 +370,7 @@ function downloadResults() {
|
||||
a.download = 'social-ads-results.txt';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
SocialAdsUtils.showToast('💾 Social ads downloaded!', 'success');
|
||||
// No toast for download - file download is confirmation enough
|
||||
}
|
||||
}
|
||||
|
||||
@ -369,7 +391,13 @@ function resetForm() {
|
||||
const fields = ['description', 'social_platform', 'include_emoji'];
|
||||
fields.forEach(fieldName => clearFieldError(fieldName));
|
||||
|
||||
SocialAdsUtils.showToast('🔄 Form reset - ready for new social ads', 'success');
|
||||
// Scroll back to form
|
||||
const form_section = document.getElementById('agentForm');
|
||||
if (form_section) {
|
||||
form_section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
// No toast for reset - visual feedback is enough
|
||||
}
|
||||
|
||||
// Quick Agent Access Functions
|
||||
@ -444,9 +472,15 @@ function handleFormSubmission(e) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show processing status
|
||||
// Show processing status and disable submit button
|
||||
SocialAdsUtils.showProcessing();
|
||||
|
||||
const submitBtn = document.getElementById('generateBtn');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = '⏳ Generating...';
|
||||
}
|
||||
|
||||
// Submit form with AJAX
|
||||
const formData = new FormData(e.target);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user