this.updateAnalysis(analysis);
}
await this.delay(1500);
}
// Final narration
this.updateNarration("Budget calculation complete! Daena's Finance Agent has processed all parameters and provided
comprehensive financial analysis with detailed ROI projections.");
}
async animateValue(componentId, finalValue) {
const element = document.getElementById(componentId);
const startValue = 0;
const duration = 1000;
const steps = 50;
const stepValue = (finalValue - startValue) / steps;
const stepDuration = duration / steps;
for (let i = 0; i <= steps; i++) { if (!this.isExecuting) break; const currentValue=Math.round(startValue +
(stepValue * i)); element.textContent=this.formatCurrency(currentValue); await this.delay(stepDuration); } }
updateAnalysis(analysis) { document.getElementById('roiProjection').textContent=`${analysis.roi}%`;
document.getElementById('paybackPeriod').textContent=`${analysis.paybackPeriod} months`;
document.getElementById('riskLevel').textContent=analysis.riskLevel;
document.getElementById('confidenceScore').textContent=`${analysis.confidence}%`; } formatCurrency(amount) {
return new Intl.NumberFormat('en-US', { style: 'currency' , currency: 'USD' , minimumFractionDigits: 0,
maximumFractionDigits: 0 }).format(amount); } updateNarration(text) { this.narrationText.innerHTML=`
${text}
`;
}
toggleNarration() {
// Toggle narration audio if available
if (this.narrationAudio.paused) {
this.narrationAudio.play().catch(e => console.log('Narration failed:', e));
this.playNarrationBtn.textContent = '⏸ Pause Narration';
this.isNarrationPlaying = true;
} else {
this.narrationAudio.pause();
this.playNarrationBtn.textContent = '🎵 Play Narration';
this.isNarrationPlaying = false;
}
}
rewindNarration() {
this.narrationAudio.currentTime = Math.max(0, this.narrationAudio.currentTime - 10);
}
forwardNarration() {
this.narrationAudio.currentTime = Math.min(this.narrationAudio.duration, this.narrationAudio.currentTime + 10);
}
toggleSpeed() {
const speeds = [1, 1.25, 1.5, 2];
const currentIndex = speeds.indexOf(this.currentSpeed);
const nextIndex = (currentIndex + 1) % speeds.length;
this.currentSpeed = speeds[nextIndex];
this.narrationAudio.playbackRate = this.currentSpeed;
this.speedBtn.textContent = `${this.currentSpeed}x`;
this.speedBtn.classList.toggle('active', this.currentSpeed !== 1);
}
seekNarration(e) {
const rect = this.narrationProgress.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const percentage = clickX / rect.width;
this.narrationAudio.currentTime = percentage * this.narrationAudio.duration;
}
updateProgress() {
if (this.narrationAudio.duration) {
const percentage = (this.narrationAudio.currentTime / this.narrationAudio.duration) * 100;
this.narrationProgressFill.style.width = `${percentage}%`;
this.updateTimeDisplay();
}
}
updateTimeDisplay() {
const current = this.formatTime(this.narrationAudio.currentTime);
const total = this.formatTime(this.narrationAudio.duration);
this.timeDisplay.textContent = `${current} / ${total}`;
}
formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
onNarrationEnd() {
this.isNarrationPlaying = false;
this.playNarrationBtn.textContent = '🎵 Play Narration';
// Auto-stop demo when narration ends
if (this.isExecuting) {
this.stopDemo();
}
}
toggleBackgroundMusic() {
if (this.backgroundMusic.paused) {
this.backgroundMusic.play().catch(e => console.log('Background music failed:', e));
this.playMusicBtn.textContent = '⏸ Stop Music';
} else {
this.backgroundMusic.pause();
this.playMusicBtn.textContent = '🎶 Background Music';
}
}
setVolume(value) {
const volume = value / 100;
this.narrationAudio.volume = volume;
this.backgroundMusic.volume = volume * 0.3; // Keep background music quieter
}
delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
hideLoading() {
setTimeout(() => {
document.getElementById('loadingOverlay').style.opacity = '0';
setTimeout(() => {
document.getElementById('loadingOverlay').style.display = 'none';
}, 500);
}, 2000);
}
}
// Initialize demo when page loads
document.addEventListener('DOMContentLoaded', () => {
new BudgetCalculationDemo();
// Handle orientation changes
function handleOrientationChange() {
const calculatorContainer = document.querySelector('.calculator-container');
const navbar = document.querySelector('.navbar');
setTimeout(() => {
const isLandscape = window.innerWidth > window.innerHeight;
if (calculatorContainer) {
if (isLandscape && window.innerWidth <= 1024) { calculatorContainer.style.gridTemplateColumns='1fr 1fr' ; } else
if (window.innerWidth <=768) { calculatorContainer.style.gridTemplateColumns='1fr' ; } } if (navbar) { if
(isLandscape) { navbar.style.minHeight='40px' ; } else { navbar.style.minHeight='50px' ; } } }, 100); } //
Listen for orientation changes window.addEventListener('orientationchange', handleOrientationChange);
window.addEventListener('resize', handleOrientationChange); // Initial orientation check
handleOrientationChange(); });