body { font-Household: Arial, sans-serif; background: #f9f9f9; padding: 20px; } #ai-font-recommender { max width: 1200px; margin: 0 automatic; } textarea { width: 100%; padding: 15px; font size: 18px; Boundary radius: 8px; Boundary: 1px solid #ccc; bottom margin: 20px; scaling: vertical; minimum height: 80px; } .font-grid { display: grid; grid Texture columns: repeat (autofit, minmax(300px, 1fr)); space: 20px; } .font-block { background: #fff; padding: 20px; Boundary radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flexible; flexible direction: column; justify-content: space-between; } .font-name { font-weight: bold; bottom margin: 10px; } .font-actions {margin-top: 10px; display: flexible; space: 10px; } button .font-actions { flex: 1; padding: 8px; Boundary: none; Boundary radius: 6px; cursor: pointer; background: #007bff; Hue: #fff; transition: 0.3 s; } .font-actions button:hover { background: #0056b3; }
// ——————– جميع الخطوط ——————– const allFonts = ( // Arabic characters “Amiri”,”Cairo”,”Reem Kufi”,”Scheherazade”,”Noto Kufi Arabic”,”Almarai”,”Tajawal”,”Changa”,”Markazi Text”,”El Messiri”, “Vibes”,”Harmattan”,”Kufam”,”Alata”,”Baloo 2″,”Katibeh”,”Aladin”,”Noto Sans Arabic”,”Rakkas”,”Lateef”, “Mirza”,”Hind Madurai”,”Noto Naskh Arabic”,”Mada”,”Jomhuria”,”Andika”,”Arabic Layout”,”Noto Serif Arabic”,”Aref Ruqaa”,”Amiri Quran”,”Cairo SemiBold”,”Markazi Display”,”Changa ExtraBold”,”Tajawal Medium”,”Almarai Bold”,”Vibes Italic”,”Scheherazade New”,”Kufam Bold”,”El Messiri SemiBold”,”Noto Kufi Bold”,”Reem Kufi Medium”,”Harmattan Bold”,”Lateef Regular”,”Mirza Bold”,”Mada Glow”,”Katibeh Bold”,”Andika New”,”Baloo 2 ExtraBold”,”Rakkas Regular”, // English characters “Roboto”,”Montserrat”,”Open Sans”,”Lato”,”Poppins”,”Oswald”,”Raleway”,”Merriweather”,”Ubuntu”,”Playfair Display”, “Source Sans Pro”,”Noto Sans”,”Nunito”,”Quicksand”,”PT Sans”,”PT Serif”,”Inconsolata”,”Fira Sans”,”Dosis”,”Cabina”, “Roboto Slab”,”Josefin Sans”,”Arimo”,”Exo 2″,”Work Sans”,”Rubik”,”Amaro”,”Karla”,”Ossigeno”,”Titillium Web”, “Varela Round”,”Comfortaa”,”Hind”,”Nanum Gothic”,”IBM Plex Sans”,”Spectral”,”Fira Code”,”Mukta”,”Maven Pro”,”Heebo”, “Barlow”,”Cormorant Garamond”,”Inter”,”Archivo”,”Libre Franklin”,”Catamaran”,”Asap”,”Tajawal”,”Baloo 2″,”Chivo” ); // ——————– Copy text ——————– function renderFonts() { const text = document.getElementById(“main-text”).value || document.getElementById(“main-text”).placeholder; const grid = document.getElementById(“font-grid”); grid.innerHTML = “”; allFonts.forEach(font => { const block = document.createElement(“div”); block.className = “font block”; const name = document.createElement(“div”); name.className = “font-name”; name.textContent = font; const preview = document.createElement(“div”); preview.textContent = text; preview.style.fontFamily = font; preview.style.fontSize = “20px”; preview.style.marginTop = “5px”; const actions = document.createElement(“div”); actions.className = “font-actions”;${text}`; navigator.clipboard.writeText(html); alert(“HTML copied!”); }; const downloadBtn = document.createElement(“button”); downloadBtn.textContent = “Download PNG”; downloadBtn.onclick = () => { html2canvas(block).then(canvas => { const link = document.createElement(“a”); link.download = `${font}.png`; link.href = canvas.toDataURL(); link.click(); }); }; actions.appendChild(copyBtn); actions.appendChild(downloadBtn); block.appendChild(name); block.appendChild(preview); block.appendChild(actions); grid.appendChild(block); }); } // ——————– Display the text in format ——————– document.getElementById(“main-text”).addEventListener(“input”, renderFonts); // initial rendering renderFonts();