224 lines
10 KiB
JavaScript
224 lines
10 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const generatorForm = document.getElementById('generator-form');
|
|
const resultContainer = document.getElementById('result-container');
|
|
const copyButton = document.getElementById('copy-button');
|
|
const generateButton = generatorForm.querySelector('button[type="submit"]');
|
|
const originalButtonText = generateButton.innerHTML;
|
|
|
|
if (generatorForm) {
|
|
generatorForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const genre = document.getElementById('genre').value;
|
|
const topic = document.getElementById('topic').value;
|
|
|
|
if (!topic.trim()) {
|
|
alert("Please enter a topic.");
|
|
return;
|
|
}
|
|
|
|
// --- UI Changes for Loading State ---
|
|
generateButton.disabled = true;
|
|
generateButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...';
|
|
|
|
resultContainer.style.display = 'block';
|
|
resultContainer.classList.add('loading');
|
|
resultContainer.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
|
|
copyButton.style.display = 'none';
|
|
|
|
// --- API Call ---
|
|
fetch('/api/generate_script.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ genre: genre, topic: topic }),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
// --- Display Success ---
|
|
resultContainer.classList.remove('loading');
|
|
resultContainer.innerHTML = `<p id="script-content">${data.script}</p>`; // Use innerHTML to render <br> tags
|
|
copyButton.style.display = 'block';
|
|
})
|
|
.catch(error => {
|
|
// --- Display Error ---
|
|
resultContainer.classList.remove('loading');
|
|
resultContainer.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
|
|
})
|
|
.finally(() => {
|
|
// --- Reset Button ---
|
|
generateButton.disabled = false;
|
|
generateButton.innerHTML = originalButtonText;
|
|
});
|
|
});
|
|
}
|
|
|
|
if (copyButton) {
|
|
copyButton.addEventListener('click', function () {
|
|
const scriptContent = document.getElementById('script-content').innerText; // Use innerText to get clean text
|
|
navigator.clipboard.writeText(scriptContent).then(() => {
|
|
const originalCopyText = copyButton.innerHTML;
|
|
copyButton.innerHTML = 'Copied!';
|
|
setTimeout(() => {
|
|
copyButton.innerHTML = originalCopyText;
|
|
}, 2000);
|
|
}).catch(err => {
|
|
alert('Failed to copy text.');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Smooth scroll for hero CTA
|
|
const heroCta = document.querySelector('.hero .btn');
|
|
if(heroCta) {
|
|
heroCta.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.querySelector(heroCta.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Social Media Connection Logic
|
|
const socialConnectionSections = document.querySelectorAll('.social-connection');
|
|
socialConnectionSections.forEach(section => {
|
|
const button = section.querySelector('.social-btn');
|
|
const statusIndicator = section.querySelector('.status-indicator');
|
|
|
|
button.addEventListener('click', function() {
|
|
const action = button.dataset.action;
|
|
const platform = section.dataset.platform;
|
|
const isConnected = action === 'connect';
|
|
|
|
fetch('/api/update_connection.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ platform: platform, is_connected: isConnected }),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
if (isConnected) {
|
|
button.dataset.action = 'disconnect';
|
|
button.textContent = 'Disconnect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
|
|
statusIndicator.textContent = 'Connected';
|
|
statusIndicator.classList.remove('not-connected');
|
|
statusIndicator.classList.add('connected');
|
|
} else {
|
|
button.dataset.action = 'connect';
|
|
button.textContent = 'Connect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
|
|
statusIndicator.textContent = 'Not Connected';
|
|
statusIndicator.classList.remove('connected');
|
|
statusIndicator.classList.add('not-connected');
|
|
}
|
|
} else {
|
|
alert('Failed to update connection status.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('An error occurred while updating connection status.');
|
|
});
|
|
});
|
|
});
|
|
|
|
// Report Generation Logic
|
|
const generateReportBtn = document.getElementById('generate-report-btn');
|
|
const reportSection = document.getElementById('report-section');
|
|
const reportContent = document.getElementById('report-content');
|
|
|
|
if (generateReportBtn) {
|
|
generateReportBtn.addEventListener('click', function() {
|
|
reportSection.style.display = 'block';
|
|
reportContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
|
|
|
|
// Simulate report generation
|
|
setTimeout(() => {
|
|
const reportHTML = `
|
|
<div class="kpi-grid">
|
|
<div class="kpi">
|
|
<div class="kpi-value">1.2M</div>
|
|
<div class="kpi-label">Total Followers</div>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-value">5.8%</div>
|
|
<div class="kpi-label">Engagement Rate</div>
|
|
</div>
|
|
<div class="kpi">
|
|
<div class="kpi-value">25.2K</div>
|
|
<div class="kpi-label">Avg. Likes per Post</div>
|
|
</div>
|
|
</div>
|
|
<h4>Top Performing Posts</h4>
|
|
<div class="post-list">
|
|
<div class="post-item">
|
|
<img src="https://images.pexels.com/photos/1787235/pexels-photo-1787235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
|
|
<div class="post-info">
|
|
<div class="post-caption">Unboxing the new tech gadget! You won't believe what it can do.</div>
|
|
<div class="post-stats">Likes: 58.1K | Comments: 2.3K</div>
|
|
</div>
|
|
</div>
|
|
<div class="post-item">
|
|
<img src="https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
|
|
<div class="post-info">
|
|
<div class="post-caption">My morning routine for a productive day. #morningroutine</div>
|
|
<div class="post-stats">Likes: 42.7K | Comments: 1.8K</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
reportContent.innerHTML = reportHTML;
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
// AI Content Strategy Logic
|
|
const discoverStrategyBtn = document.getElementById('discover-strategy-btn');
|
|
const strategySection = document.getElementById('strategy-section');
|
|
const strategyContent = document.getElementById('strategy-content');
|
|
|
|
if (discoverStrategyBtn) {
|
|
discoverStrategyBtn.addEventListener('click', function() {
|
|
strategySection.style.display = 'block';
|
|
strategyContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
|
|
|
|
// --- API Call ---
|
|
fetch('/api/generate_script.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ genre: 'Content Strategy', topic: 'Give me a content strategy for a tech influencer.' }),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.error) {
|
|
throw new Error(data.error);
|
|
}
|
|
// --- Display Success ---
|
|
strategyContent.innerHTML = `<p>${data.script}</p>`;
|
|
})
|
|
.catch(error => {
|
|
// --- Display Error ---
|
|
strategyContent.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
|
|
});
|
|
});
|
|
}
|
|
});
|