96 lines
3.8 KiB
JavaScript
96 lines
3.8 KiB
JavaScript
// Screen Test - Main JS
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const form = document.getElementById('idea-form');
|
|
const submitButton = form.querySelector('button[type="submit"]');
|
|
const personasContainer = document.getElementById('personas-container');
|
|
const personasGrid = document.getElementById('personas-grid');
|
|
|
|
if (form) {
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const audience = document.getElementById('target-audience').value;
|
|
const idea = document.getElementById('business-idea').value;
|
|
|
|
if (!audience || !idea) {
|
|
alert('Please fill out both Target Audience and Business Idea fields.');
|
|
return;
|
|
}
|
|
|
|
// --- Loading State ---
|
|
const originalButtonText = submitButton.innerHTML;
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
Generating...
|
|
`;
|
|
personasContainer.classList.add('d-none');
|
|
personasGrid.innerHTML = '';
|
|
|
|
|
|
// --- API Call ---
|
|
fetch('api/generate_personas.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ audience, idea }),
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(err => { throw new Error(err.error || 'An unknown error occurred.') });
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// --- Render Personas ---
|
|
if (data.personas && data.personas.length > 0) {
|
|
renderPersonas(data.personas);
|
|
personasContainer.classList.remove('d-none');
|
|
setTimeout(() => {
|
|
personasContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}, 100);
|
|
} else {
|
|
throw new Error('The AI did not return any personas. Please try refining your inputs.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert(`An error occurred: ${error.message}`);
|
|
})
|
|
.finally(() => {
|
|
// --- Reset Button ---
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalButtonText;
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderPersonas(personas) {
|
|
const personaGradients = [
|
|
'persona-gradient-1',
|
|
'persona-gradient-2',
|
|
'persona-gradient-3'
|
|
];
|
|
|
|
personasGrid.innerHTML = personas.map((persona, index) => `
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card persona-card h-100 rounded-4 shadow-lg border-0 ${personaGradients[index % 3]}">
|
|
<div class="card-body p-4">
|
|
<h3 class="card-title fw-bold">${persona.name}</h3>
|
|
<p class="card-subtitle mb-2 text-white-75">${persona.age}, ${persona.occupation}</p>
|
|
<div class="mt-4">
|
|
<h6 class="fw-semibold">Traits:</h6>
|
|
<p>${persona.traits}</p>
|
|
<h6 class="fw-semibold">Concerns:</h6>
|
|
<p>${persona.concerns}</p>
|
|
<h6 class="fw-semibold">Style:</h6>
|
|
<p>${persona.style}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
}); |