⚡ Quick Presets:
0 Characters
0 Words
0 Numbers
🔤
View all 40+ fancy number styles below. Use Customize & Effects tabs to style your results!
Current Effect:
No Effect Applied
❤️ No Favorites Yet
Click the heart button on any style to save it here for quick access!
🔢 Start Creating Fancy Numbers!
Enter your numbers or text above to see them transformed into 40+ stylish effects!
🔢 Fancy Numbers Generator
Original: ${this.escapeHtml(this.state.text)}
`;
let currentCategory = '';
results.forEach(r => {
if (r.category !== currentCategory) {
if (currentCategory) content += '
\n';
content += `
${r.category}
\n`;
currentCategory = r.category;
}
content += `
${r.style}
${this.escapeHtml(r.text)}
\n`;
});
content += '
\n\n';
this.downloadFile(content, 'fancy-numbers.html', 'text/html');
this.showToast('🌐 Downloaded as HTML!');
}
downloadAsJson(results) {
const data = {
original: this.state.text,
generated: new Date().toISOString(),
settings: {
effect: this.state.activeEffect,
frame: this.state.borderFrame,
fontSize: this.state.fontSize,
textColor: this.state.textColor,
bgColor: this.state.bgColor
},
results: results
};
this.downloadFile(JSON.stringify(data, null, 2), 'fancy-numbers.json', 'application/json');
this.showToast('📊 Downloaded as JSON!');
}
copyShareLink() {
const params = new URLSearchParams({
text: this.state.text || '',
effect: this.state.activeEffect || 'none',
frame: this.state.borderFrame || 'none'
});
const shareUrl = `${window.location.origin}${window.location.pathname}?${params.toString()}`;
navigator.clipboard.writeText(shareUrl).then(() => {
this.showToast('🔗 Share link copied!');
}).catch(() => {
this.showToast('❌ Could not copy link');
});
}
downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
// Copy All Functionality
setupCopyAll() {
const copyAllBtn = document.getElementById('fn-copy-all');
if (!copyAllBtn) return;
copyAllBtn.addEventListener('click', () => {
this.copyAllStyles();
});
}
copyAllStyles() {
const text = this.state.text;
if (!text) {
this.showToast('⚠️ Enter some text first!');
return;
}
const results = this.getAllResults(text);
let clipboardText = `🔢 Fancy Numbers Generator\n`;
clipboardText += `Original: ${text}\n`;
clipboardText += `${'─'.repeat(40)}\n\n`;
let currentCategory = '';
results.forEach(r => {
if (r.category !== currentCategory) {
clipboardText += `\n【 ${r.category} 】\n`;
currentCategory = r.category;
}
clipboardText += `${r.text}\n`;
});
navigator.clipboard.writeText(clipboardText).then(() => {
this.showToast(`✅ Copied all ${results.length} styles!`);
// Visual feedback on button
const btn = document.getElementById('fn-copy-all');
if (btn) {
const originalHTML = btn.innerHTML;
btn.innerHTML = '
✅ Copied!';
setTimeout(() => {
btn.innerHTML = originalHTML;
}, 2000);
}
}).catch(() => {
this.showToast('❌ Copy failed');
});
}
}
// Initialize
let fnGenerator;
document.addEventListener('DOMContentLoaded', () => {
fnGenerator = new FancyNumbersGenerator();
});
