', fontSize: 48, fontWeight: 400, letterSpacing: 0, lineHeight: 1.2, textCase: 'none', textColor: '#000000', strokeWidth: 0, strokeColor: '#000000', rotateX: 0, rotateY: 0, rotateZ: 0, skewX: 0, textAlign: 'left', shadowPreset: 'none', shadowColor: '#000000', shadowBlur: 0, shadowX: 0, shadowY: 0, bgMode: 'solid', bgColor: '#ffffff', bgColorEnd: '#eeeeee', bgRadius: 12, effect: 'none' }; // Decode the saved text if it came from localStorage if(saved) { this.state.text = this.state.text.replace(/\\n/g, '\n'); } this.history = [JSON.stringify(this.state)]; this.historyIndex = 0; this.init(); } init() { this.cacheDOM(); this.bindEvents(); this.syncUI(); this.render(); } cacheDOM() { this.dom = { input: document.getElementById('casc-text-input'), preview: document.getElementById('preview-text'), previewBox: document.getElementById('preview-box'), panels: document.querySelectorAll('.casc-panel'), tabs: document.querySelectorAll('.casc-tab'), toast: document.getElementById('toast'), undo: document.getElementById('undo-btn'), redo: document.getElementById('redo-btn') }; } bindEvents() { const update = (key, val) => this.updateState(key, val); this.dom.input.oninput = (e) => update('text', e.target.value); ['font-size', 'font-weight', 'letter-spacing', 'line-height', 'text-case', 'text-color', 'stroke-width', 'stroke-color', 'rotate-x', 'rotate-y', 'rotate-z', 'skew-x', 'text-align', 'shadow-preset', 'shadow-color', 'shadow-blur', 'shadow-x', 'shadow-y', 'bg-mode', 'bg-color', 'bg-color-end', 'bg-radius'].forEach(id => { const el = document.getElementById(id); const key = id.replace(/-([a-z])/g, g => g[1].toUpperCase()); el.oninput = (e) => { if (id === 'shadow-preset') this.applyShadowPreset(e.target.value); else update(key, e.target.value); if (id === 'bg-mode') document.getElementById('bg-gradient-controls').style.display = (e.target.value === 'gradient') ? 'block' : 'none'; }; }); this.dom.tabs.forEach(tab => { tab.onclick = () => { this.dom.tabs.forEach(t => t.classList.remove('active')); this.dom.panels.forEach(p => p.classList.remove('active')); tab.classList.add('active'); document.getElementById(`${tab.dataset.tab}-panel`).classList.add('active'); }; }); document.querySelectorAll('.casc-preset-btn').forEach(btn => btn.onclick = () => this.applyEffect(btn.dataset.effect)); document.querySelectorAll('.casc-symbol-btn').forEach(btn => btn.onclick = () => { const s = this.dom.input.selectionStart, e = this.dom.input.selectionEnd, t = this.dom.input.value; this.dom.input.value = t.substring(0, s) + btn.dataset.sym + t.substring(e); update('text', this.dom.input.value); }); this.dom.undo.onclick = () => this.jumpHistory(-1); this.dom.redo.onclick = () => this.jumpHistory(1); document.getElementById('download-png').onclick = () => this.download(); document.getElementById('copy-clipboard').onclick = () => this.copyToClipboard(); document.getElementById('copy-css').onclick = () => this.copyCSS(); document.getElementById('reset-all').onclick = () => { if(confirm('Reset all settings?')) { localStorage.removeItem('casc-session-v3'); location.reload(); }}; } updateState(key, val) { this.state[key] = val; this.render(); // create a safe copy for history (encoding newlines for JSON) let safeState = {...this.state}; safeState.text = safeState.text.replace(/\n/g, '\\n'); const snap = JSON.stringify(safeState); if (snap !== this.history[this.historyIndex]) { this.history = this.history.slice(0, this.historyIndex + 1); this.history.push(snap); this.historyIndex++; } localStorage.setItem('casc-session-v3', snap); this.updateHistoryButtons(); } jumpHistory(dir) { this.historyIndex += dir; let restored = JSON.parse(this.history[this.historyIndex]); restored.text = restored.text.replace(/\\n/g, '\n'); this.state = restored; this.syncUI(); this.render(); } updateHistoryButtons() { this.dom.undo.disabled = this.historyIndex === 0; this.dom.redo.disabled = this.historyIndex === this.history.length - 1; } applyShadowPreset(preset) { const p = { none: { shadowX: 0, shadowY: 0, shadowBlur: 0 }, subtle: { shadowX: 2, shadowY: 2, shadowBlur: 5, shadowColor: '#00000033' }, classic: { shadowX: 5, shadowY: 5, shadowBlur: 10, shadowColor: '#00000066' }, dramatic: { shadowX: 15, shadowY: 15, shadowBlur: 20, shadowColor: '#00000088' }, 'neon-glow': { shadowX: 0, shadowY: 0, shadowBlur: 15, shadowColor: '#ffffff' }, 'retro-thick': { shadowX: 6, shadowY: 6, shadowBlur: 0, shadowColor: '#111111' } }; Object.assign(this.state, p[preset]); this.state.shadowPreset = preset; this.syncUI(); this.updateState('shadowPreset', preset); } applyEffect(effect) { this.state.effect = effect; if (effect === 'solid-black') { this.state.textColor = '#000000'; this.state.strokeWidth = 0; } else if (effect === 'neon') { this.state.textColor = '#ffffff'; this.state.shadowPreset = 'neon-glow'; this.applyShadowPreset('neon-glow'); } else if (effect === 'outline') { this.state.strokeWidth = 2; this.state.strokeColor = '#000000'; } this.updateState('effect', effect); } render() { const s = this.state, p = this.dom.preview, b = this.dom.previewBox; // Need to handle newlines and HTML escaping for code let formattedText = s.textCase === 'uppercase' ? s.text.toUpperCase() : s.textCase === 'lowercase' ? s.text.toLowerCase() : (s.textCase === 'capitalize' ? s.text.replace(/\b\w/g, c => c.toUpperCase()) : s.text); // Escape HTML tags to prevent XSS but allow displaying code formattedText = formattedText.replace(/&/g, "&").replace(//g, ">"); // Convert newlines to breaks and spaces to non-breaking spaces for monospace layout formattedText = formattedText.replace(/\n/g, '
').replace(/ /g, '  '); p.innerHTML = formattedText; p.style.cssText = `font-family: 'Cascadia Code', monospace !important; font-size: ${s.fontSize}px; font-weight: ${s.fontWeight}; letter-spacing: ${s.letterSpacing}px; line-height: ${s.lineHeight}; text-align: ${s.textAlign}; transform: rotateX(${s.rotateX}deg) rotateY(${s.rotateY}deg) rotateZ(${s.rotateZ}deg) skewX(${s.skewX}deg); white-space: nowrap; padding: 40px;`; p.style.color = s.effect === 'outline' ? 'transparent' : (s.effect === 'glass' ? 'rgba(255,255,255,0.7)' : (s.effect === 'charcoal' ? '#333333' : s.textColor)); p.style.webkitTextStroke = s.strokeWidth > 0 ? `${s.strokeWidth}px ${s.strokeColor}` : 'none'; let currentShadow = `${s.shadowX}px ${s.shadowY}px ${s.shadowBlur}px ${s.shadowColor}`; if (s.effect === 'neon') currentShadow = `0 0 10px #000000, 0 0 20px #000000, 0 0 40px #555555`; if (s.effect === 'glass') currentShadow = `0 4px 10px rgba(0,0,0,0.1)`; if (s.effect === 'charcoal') currentShadow = `1px 1px 0px #111111`; p.style.textShadow = currentShadow; p.style.background = 'none'; p.style.webkitBackgroundClip = 'initial'; p.style.webkitTextFillColor = 'initial'; if (s.effect === 'monochrome-gradient') { p.style.background = 'linear-gradient(to right, #000000, #777777, #000000)'; p.style.webkitBackgroundClip = 'text'; p.style.webkitTextFillColor = 'transparent'; } else if (s.effect === 'silver-silk') { p.style.background = 'linear-gradient(to bottom, #f0f0f0, #999999)'; p.style.webkitBackgroundClip = 'text'; p.style.webkitTextFillColor = 'transparent'; } else if (s.effect === 'outline') { p.style.webkitTextFillColor = 'transparent'; } b.style.borderRadius = `${s.bgRadius}px`; b.style.background = s.bgMode === 'gradient' ? `linear-gradient(135deg, ${s.bgColor}, ${s.bgColorEnd})` : s.bgColor; this.updateLabels(); } updateLabels() { const m = { 'size-val': 'fontSize', 'weight-val': 'fontWeight', 'space-val': 'letterSpacing', 'line-val': 'lineHeight', 'rotx-val': 'rotateX', 'roty-val': 'rotateY', 'rotz-val': 'rotateZ', 'skew-val': 'skewX', 'blur-val': 'shadowBlur', 'offsetx-val': 'shadowX', 'offsety-val': 'shadowY', 'radius-val': 'bgRadius' }; for (let [id, k] of Object.entries(m)) document.getElementById(id).textContent = this.state[k]; document.getElementById('color-hex').textContent = this.state.textColor.toUpperCase(); } syncUI() { const s = this.state; this.dom.input.value = s.text; ['font-size', 'font-weight', 'letter-spacing', 'line-height', 'text-case', 'text-color', 'stroke-width', 'stroke-color', 'rotate-x', 'rotate-y', 'rotate-z', 'skew-x', 'text-align', 'shadow-preset', 'shadow-color', 'shadow-blur', 'shadow-x', 'shadow-y', 'bg-mode', 'bg-color', 'bg-color-end', 'bg-radius'].forEach(id => { const k = id.replace(/-([a-z])/g, g => g[1].toUpperCase()); document.getElementById(id).value = s[k]; }); if (s.bgMode === 'gradient') document.getElementById('bg-gradient-controls').style.display = 'block'; else document.getElementById('bg-gradient-controls').style.display = 'none'; } async download() { const canvas = await html2canvas(this.dom.previewBox, { backgroundColor: null, scale: 2 }); const link = document.createElement('a'); link.download = `cascadia-design.png`; link.href = canvas.toDataURL(); link.click(); this.showToast('Downloaded!'); } async copyToClipboard() { try { const canvas = await html2canvas(this.dom.previewBox, { backgroundColor: null, scale: 2 }); canvas.toBlob(async blob => { const item = new ClipboardItem({ "image/png": blob }); await navigator.clipboard.write([item]); this.showToast('Copied to Clipboard!'); }); } catch (e) { this.showToast('Update browser for Copy feature'); } } copyCSS() { const s = this.state; const css = `.cascadia-text {\n font-family: 'Cascadia Code', monospace;\n font-size: ${s.fontSize}px;\n font-weight: ${s.fontWeight};\n color: ${s.textColor};\n text-shadow: ${s.shadowX}px ${s.shadowY}px ${s.shadowBlur}px ${s.shadowColor};\n transform: rotateX(${s.rotateX}deg) rotateY(${s.rotateY}deg) rotateZ(${s.rotateZ}deg) skewX(${s.skewX}deg);\n}`; navigator.clipboard.writeText(css); this.showToast('CSS Copied!'); } showToast(msg) { this.dom.toast.textContent = msg; this.dom.toast.classList.add('show'); setTimeout(() => this.dom.toast.classList.remove('show'), 2500); } } document.addEventListener('DOMContentLoaded', () => new ProFontGenerator());