File size: 3,511 Bytes
e6ebfa2 07c2a8b e6ebfa2 07c2a8b e6ebfa2 07c2a8b e6ebfa2 07c2a8b e6ebfa2 07c2a8b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
document.addEventListener('DOMContentLoaded', function() {
// Initialize all feature cards
document.querySelectorAll('feature-card').forEach(card => {
feather.replace({ 'data-feather': card.shadowRoot.querySelector('[data-feather]') });
});
const inputText = document.getElementById('inputText');
const generateBtn = document.getElementById('generateBtn');
const downloadBtn = document.getElementById('downloadBtn');
const outputCanvas = document.getElementById('outputCanvas');
const showLines = document.getElementById('showLines');
const fontSizeInput = document.getElementById('fontSize');
const lineHeightInput = document.getElementById('lineHeight');
const letterSpacingInput = document.getElementById('letterSpacing');
// Initialize range inputs
if (fontSizeInput) {
fontSizeInput.addEventListener('input', updatePreview);
}
if (lineHeightInput) {
lineHeightInput.addEventListener('input', updatePreview);
}
if (letterSpacingInput) {
letterSpacingInput.addEventListener('input', updatePreview);
}
generateBtn.addEventListener('click', function() {
const text = inputText.value.trim();
if (!text) {
outputCanvas.innerHTML = '<p class="text-gray-400">Please enter some text first</p>';
return;
}
// Add loading state
generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin"></i> Generating...';
feather.replace();
// Simulate generation (in a real app, this would use a handwriting API)
setTimeout(() => {
const lines = text.split('\n');
let html = '';
if (showLines.checked) {
html += '<div class="relative">';
html += '<div class="absolute inset-0 bg-cyan-50 bg-opacity-20" style="background-image: linear-gradient(to bottom, transparent 95%, rgba(0,0,0,0.1) 95%); background-size: 100% 28px;"></div>';
}
html += '<p class="handwriting text-2xl leading-loose" style="white-space: pre-wrap;">';
for (const line of lines) {
if (line.trim() === '') {
html += '<br>';
} else {
// Add slight variations to make it look more natural
const weightVariation = Math.random() * 0.4 - 0.2;
const sizeVariation = Math.random() * 0.4 - 0.2;
html += `<span style="font-weight: ${400 + weightVariation * 100}; font-size: ${1 + sizeVariation}em">${line}</span>`;
}
html += '\n';
}
html += '</p>';
if (showLines.checked) {
html += '</div>';
}
outputCanvas.innerHTML = html;
// Reset button
generateBtn.innerHTML = '<i data-feather="pen-tool"></i> Generate';
feather.replace();
}, 1000);
});
downloadBtn.addEventListener('click', function() {
alert('In a real implementation, this would download the generated handwriting as an image or PDF.');
});
// Initialize with some sample text
inputText.value = "Dear Diary,\n\nToday I discovered this amazing tool that turns my digital text into beautiful handwriting!\n\nIt's like magic ✨\n\nSincerely,\nMe";
}); |