Tendify Pro Resume Builder<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n tendify: {\r\n dark: '#0B0F19',\r\n card: '#161D30',\r\n accent: '#6366F1',\r\n accentHover: '#4F46E5',\r\n textMuted: '#94A3B8'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style>\r\n :root {\r\n --bg-color: #0b0f19;\r\n --card-color: #161d30;\r\n --accent-color: #6366f1;\r\n --text-main: #f8fafc;\r\n --text-muted: #94a3b8;\r\n }\r\n \r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-main);\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Perfect dark scrollbars *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #0B0F19;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #1E293B;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #6366F1;\r\n }\r\n\r\n \/* Real A4 Canvas styling *\/\r\n .resume-paper {\r\n width: 210mm;\r\n min-height: 297mm;\r\n padding: 20mm;\r\n margin: 0 auto;\r\n background: #ffffff;\r\n color: #1e293b;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);\r\n position: relative;\r\n box-sizing: border-box;\r\n word-wrap: break-word;\r\n }\r\n\r\n .preview-scale {\r\n transform-origin: top center;\r\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n \/* Essential print layouts to avoid page splitting issues *\/\r\n @media print {\r\n body {\r\n background: white !important;\r\n color: black !important;\r\n }\r\n .no-print {\r\n display: none !important;\r\n }\r\n .print-full-width {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n box-shadow: none !important;\r\n }\r\n .resume-paper {\r\n width: 210mm !important;\r\n height: 297mm !important;\r\n padding: 15mm !important;\r\n box-shadow: none !important;\r\n margin: 0 !important;\r\n page-break-after: avoid;\r\n page-break-before: avoid;\r\n }\r\n .break-inside-avoid {\r\n page-break-inside: avoid;\r\n break-inside: avoid;\r\n }\r\n @page {\r\n size: A4;\r\n margin: 0;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#0B0F19] text-slate-100 min-h-screen flex flex-col selection:bg-indigo-500 selection:text-white\">\r\n\r\n <header class=\"no-print bg-[#161D30] border-b border-slate-800 px-6 py-4 sticky top-0 z-50 shadow-md\">\r\n <div class=\"max-w-[1600px] mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500\/20\">\r\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-xl font-bold bg-gradient-to-r from-white to-indigo-200 bg-clip-text text-transparent\">Tendify Resume Builder <span class=\"text-xs bg-indigo-600 text-white font-semibold py-0.5 px-2 rounded-full ml-1\">PRO<\/span><\/h1>\r\n <p class=\"text-xs text-indigo-400 font-medium\">Create elegant, ATS-friendly resumes instantly with advanced controls<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap items-center gap-3\">\r\n <button onclick=\"importJSON()\" class=\"px-3 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg border border-slate-700 transition flex items-center gap-1.5\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"><\/path><\/svg>\r\n Import JSON\r\n <\/button>\r\n <button onclick=\"exportJSON()\" class=\"px-3 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg border border-slate-700 transition flex items-center gap-1.5\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"><\/path><\/svg>\r\n Export JSON\r\n <\/button>\r\n <button onclick=\"window.print()\" class=\"px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-lg shadow-indigo-600\/30 transition flex items-center gap-2\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z\"><\/path><\/svg>\r\n Export PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"toast-box\" class=\"no-print fixed bottom-5 right-5 z-[100] transform translate-y-10 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <div class=\"bg-indigo-950 border border-indigo-500\/30 text-indigo-200 px-4 py-3 rounded-xl shadow-2xl flex items-center gap-2.5\">\r\n <span id=\"toast-icon\">\u2728<\/span>\r\n <p id=\"toast-message\" class=\"text-sm font-medium\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <dialog id=\"confirm-modal\" class=\"bg-[#161D30] text-slate-100 p-6 rounded-2xl border border-slate-800 max-w-sm w-full shadow-2xl backdrop:bg-black\/80\">\r\n <h4 class=\"text-base font-bold mb-2 text-red-400 flex items-center gap-2\">\r\n \u26a0\ufe0f Warning Action\r\n <\/h4>\r\n <p id=\"confirm-text\" class=\"text-xs text-slate-400 mb-6 leading-relaxed\">Are you absolutely sure you want to proceed with this action? This cannot be undone.<\/p>\r\n <div class=\"flex justify-end gap-2.5\">\r\n <button onclick=\"document.getElementById('confirm-modal').close()\" class=\"px-3.5 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg transition\">Cancel<\/button>\r\n <button id=\"confirm-action-btn\" class=\"px-4 py-1.5 text-xs bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition\">Confirm<\/button>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <main class=\"flex-1 flex flex-col lg:flex-row max-w-[1600px] w-full mx-auto p-4 lg:p-6 gap-6 overflow-hidden\">\r\n \r\n \r\n <section class=\"no-print w-full lg:w-[45%] flex flex-col gap-6 overflow-y-auto max-h-[calc(100vh-140px)] pr-2\">\r\n \r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-4 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Customize Resume Style & Fonts\r\n <\/h3>\r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-4\">\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Template Style<\/label>\r\n <select id=\"setting-template\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"modern\">Modern Professional<\/option>\r\n <option value=\"classic\">Executive Classic<\/option>\r\n <option value=\"twocolumn\">Two-Column layout<\/option>\r\n <option value=\"minimalist\">Minimalist Tech<\/option>\r\n <option value=\"creative\">Creative Bold<\/option>\r\n <option value=\"academic\">Academic \/ Research CV<\/option>\r\n <option value=\"compact\">Compact Content-Dense<\/option>\r\n <option value=\"startup\">Sleek Startup Badge<\/option>\r\n <option value=\"elegant\">Elegant Serif Regal<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Color Palette<\/label>\r\n <div class=\"flex items-center gap-2\">\r\n <input type=\"color\" id=\"setting-color\" value=\"#6366F1\" onchange=\"renderResume()\" class=\"w-10 h-8 bg-transparent border-0 cursor-pointer rounded\">\r\n <select id=\"setting-color-preset\" onchange=\"applyColorPreset(this.value)\" class=\"flex-1 bg-[#0B0F19] border border-slate-700 rounded-lg px-1.5 py-2 text-xs text-slate-200 focus:outline-none\">\r\n <option value=\"custom\">Custom Color<\/option>\r\n <option value=\"#6366F1\">Tendify Indigo<\/option>\r\n <option value=\"#0D9488\">Teal Modern<\/option>\r\n <option value=\"#991B1B\">Crimson Executive<\/option>\r\n <option value=\"#B45309\">Amber Classic<\/option>\r\n <option value=\"#334155\">Slate Tech<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Text Alignment<\/label>\r\n <select id=\"setting-direction\" onchange=\"toggleDirection()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"ltr\">LTR (English)<\/option>\r\n <option value=\"rtl\">RTL (Persian\/Arabic)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Font Style<\/label>\r\n <select id=\"setting-font\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"sans-serif\">Modern Sans-Serif<\/option>\r\n <option value=\"serif\">Classic Serif<\/option>\r\n <option value=\"monospace\">Tech Monospace<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Font Size Scale<\/label>\r\n <select id=\"setting-fontsize\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"sm\">Small (High Density)<\/option>\r\n <option value=\"md\" selected>Medium<\/option>\r\n <option value=\"lg\">Large<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Line Spacing<\/label>\r\n <select id=\"setting-spacing\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"tight\">Tight<\/option>\r\n <option value=\"normal\" selected>Normal<\/option>\r\n <option value=\"relaxed\">Relaxed<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mt-4 pt-4 border-t border-slate-800\/60\">\r\n <div>\r\n <label class=\"flex items-center gap-2 cursor-pointer text-xs text-slate-400\">\r\n <input type=\"checkbox\" id=\"setting-show-photo\" checked onchange=\"togglePhotoVisibility()\" class=\"rounded border-slate-700 bg-[#0B0F19] text-indigo-600 focus:ring-indigo-500 h-4 w-4\">\r\n Show Profile Picture\r\n <\/label>\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <button onclick=\"triggerResetConfirmation()\" class=\"py-1 px-3 text-xs bg-red-950\/40 hover:bg-red-900\/60 text-red-200 rounded-lg border border-red-800 transition\">\r\n Reset Content\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <button onclick=\"toggleDetailsCollapse('headings-panel')\" class=\"w-full flex justify-between items-center text-sm font-bold text-slate-200 uppercase tracking-wider\">\r\n <span class=\"flex items-center gap-2\"><span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Customize Section Headings<\/span>\r\n <span id=\"headings-panel-indicator\" class=\"text-xs text-slate-400\">Expand \u25be<\/span>\r\n <\/button>\r\n <div id=\"headings-panel\" class=\"hidden grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 pt-4 border-t border-slate-800\">\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Summary Title<\/label>\r\n <input type=\"text\" id=\"head-summary\" value=\"Summary\" oninput=\"updateHeading('summary', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Work Experience Title<\/label>\r\n <input type=\"text\" id=\"head-experience\" value=\"Work Experience\" oninput=\"updateHeading('experience', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Education Title<\/label>\r\n <input type=\"text\" id=\"head-education\" value=\"Education\" oninput=\"updateHeading('education', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Projects Title<\/label>\r\n <input type=\"text\" id=\"head-projects\" value=\"Projects\" oninput=\"updateHeading('projects', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Skills Title<\/label>\r\n <input type=\"text\" id=\"head-skills\" value=\"Skills\" oninput=\"updateHeading('skills', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Languages Title<\/label>\r\n <input type=\"text\" id=\"head-languages\" value=\"Languages\" oninput=\"updateHeading('languages', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Certifications Title<\/label>\r\n <input type=\"text\" id=\"head-certs\" value=\"Certifications\" oninput=\"updateHeading('certs', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">References Title<\/label>\r\n <input type=\"text\" id=\"head-refs\" value=\"References\" oninput=\"updateHeading('refs', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-4 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Personal Details\r\n <\/h3>\r\n \r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 mb-4 pb-4 border-b border-slate-800\/80\">\r\n <div class=\"relative group\">\r\n <img decoding=\"async\" id=\"profile-img-preview\" src=\"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\" class=\"w-16 h-16 rounded-xl object-cover border border-slate-700 bg-slate-900 shadow-md\">\r\n <button onclick=\"removeProfileImage()\" class=\"absolute -top-1.5 -right-1.5 bg-red-600\/90 hover:bg-red-700 text-white text-[10px] p-1 rounded-full shadow transition leading-none\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"flex-1 w-full\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Upload Photo (A4 Print-safe)<\/label>\r\n <input type=\"file\" id=\"photo-uploader\" accept=\"image\/*\" onchange=\"uploadPhoto()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2 py-1.5 text-xs text-slate-400 focus:outline-none file:mr-3 file:py-1 file:px-2.5 file:rounded file:border-0 file:text-[10px] file:font-semibold file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 file:cursor-pointer\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Full Name<\/label>\r\n <input type=\"text\" id=\"info-name\" placeholder=\"John Doe\" oninput=\"updateField('name', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Job Title<\/label>\r\n <input type=\"text\" id=\"info-title\" placeholder=\"Senior Frontend Developer\" oninput=\"updateField('title', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Email Address<\/label>\r\n <input type=\"email\" id=\"info-email\" placeholder=\"john.doe@example.com\" oninput=\"updateField('email', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Phone Number<\/label>\r\n <input type=\"text\" id=\"info-phone\" placeholder=\"+1 (555) 019-2834\" oninput=\"updateField('phone', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Location \/ Address<\/label>\r\n <input type=\"text\" id=\"info-location\" placeholder=\"New York, USA\" oninput=\"updateField('location', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Website or Portfolio<\/label>\r\n <input type=\"text\" id=\"info-website\" placeholder=\"https:\/\/johndoe.dev\" oninput=\"updateField('website', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Professional Summary<\/label>\r\n <textarea id=\"info-summary\" rows=\"3\" placeholder=\"Write a brief professional summary...\" oninput=\"updateField('summary', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Work Experience\r\n <\/h3>\r\n <button onclick=\"addExperience()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Work<\/button>\r\n <\/div>\r\n <div id=\"experience-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Education History\r\n <\/h3>\r\n <button onclick=\"addEducation()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Edu<\/button>\r\n <\/div>\r\n <div id=\"education-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Key Projects\r\n <\/h3>\r\n <button onclick=\"addProject()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Project<\/button>\r\n <\/div>\r\n <div id=\"projects-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Certifications\r\n <\/h3>\r\n <button onclick=\"addCertification()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Cert<\/button>\r\n <\/div>\r\n <div id=\"certifications-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> References\r\n <\/h3>\r\n <button onclick=\"addReference()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Ref<\/button>\r\n <\/div>\r\n <div id=\"references-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-2 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Skills\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400 mb-2\">Separate with commas (e.g., React, Node, SQL)<\/p>\r\n <textarea id=\"info-skills\" rows=\"4\" placeholder=\"React, Node.js, Python, AWS...\" oninput=\"updateField('skills', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-2 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Languages\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400 mb-2\">Separate with commas (e.g., English (C2), Persian (Native))<\/p>\r\n <textarea id=\"info-languages\" rows=\"4\" placeholder=\"English (Full), Farsi (Native)...\" oninput=\"updateField('languages', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Custom Custom Section\r\n <\/h3>\r\n <button onclick=\"addCustomSectionItem()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Item<\/button>\r\n <\/div>\r\n <div class=\"mb-4\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Custom Section Header Name<\/label>\r\n <input type=\"text\" id=\"info-customSectionTitle\" placeholder=\"Awards & Achievements\" oninput=\"updateField('customSectionTitle', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div id=\"custom-sections-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n \r\n <section class=\"print-full-width w-full lg:w-[55%] flex flex-col items-center overflow-y-auto max-h-[calc(100vh-140px)] bg-slate-950 rounded-2xl p-4 border border-slate-800 shadow-2xl relative\">\r\n \r\n <div class=\"no-print w-full flex justify-between items-center bg-[#161D30] px-4 py-2 rounded-xl mb-4 border border-slate-800 shadow-lg\">\r\n <span class=\"text-xs font-semibold text-slate-300 flex items-center gap-1.5\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\r\n Live Interactive A4 Preview\r\n <\/span>\r\n <div class=\"flex items-center gap-2\">\r\n <button onclick=\"zoomPreview(0.9)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-slate-300 transition text-xs font-bold\">A-<\/button>\r\n <span id=\"zoom-level\" class=\"text-xs text-slate-400 min-w-[40px] text-center font-mono\">90%<\/span>\r\n <button onclick=\"zoomPreview(1.1)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-slate-300 transition text-xs font-bold\">A+<\/button>\r\n <button onclick=\"zoomPreview(1.0, true)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-indigo-400 transition text-xs\">Reset<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"preview-wrapper\" class=\"w-full overflow-x-auto flex justify-center pb-8\">\r\n <div id=\"resume-preview\" class=\"resume-paper preview-scale text-left\" style=\"transform: scale(0.9);\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n <footer class=\"no-print bg-[#0B0F19] border-t border-slate-850 py-4 text-center text-xs text-slate-500\">\r\n <div class=\"max-w-7xl mx-auto px-4 flex flex-col sm:flex-row justify-between items-center gap-2\">\r\n <span>Powered by <a href=\"https:\/\/tendify.net\" target=\"_blank\" class=\"text-indigo-400 hover:underline\">Tendify.Net<\/a><\/span>\r\n <span>100% Free • Fully ATS Optimized Layouts • No Markups • Auto-saving<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <dialog id=\"json-modal\" class=\"bg-[#161D30] text-slate-100 p-6 rounded-2xl border border-slate-800 max-w-md w-full shadow-2xl backdrop:bg-black\/60\">\r\n <h3 class=\"text-lg font-bold mb-3 text-indigo-400\">Import Resume Config JSON<\/h3>\r\n <p class=\"text-xs text-slate-400 mb-4\">Paste your exported Tendify Resume JSON data structure here to restore edits instantly.<\/p>\r\n <textarea id=\"json-input\" rows=\"8\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg p-3 text-xs font-mono text-slate-300 focus:outline-none focus:border-indigo-500 mb-4\" placeholder=\"{ ... }\"><\/textarea>\r\n <div class=\"flex justify-end gap-2\">\r\n <button onclick=\"document.getElementById('json-modal').close()\" class=\"px-4 py-2 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg transition\">Cancel<\/button>\r\n <button onclick=\"applyImportJSON()\" class=\"px-4 py-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition font-semibold\">Load Configuration<\/button>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <script>\r\n \/\/ Robust sample data for instantaneous startup rendering\r\n const defaultData = {\r\n name: \"Alexander Mercer\",\r\n title: \"Senior Full-Stack Engineer\",\r\n email: \"alex.mercer@tendify.net\",\r\n phone: \"+1 (555) 382-9018\",\r\n location: \"San Francisco, CA\",\r\n website: \"https:\/\/tendify.net\",\r\n profileImage: \"\",\r\n showPhoto: true,\r\n fontSize: \"md\",\r\n summary: \"Innovative and detail-oriented Full-Stack Developer with over 6 years of experience building secure, high-performance web applications. Expertise in React, Node.js, cloud architecture, and designing intuitive user experiences. Passionate about writing clean, maintainable code and solving complex software challenges.\",\r\n skills: \"React, Node.js, TypeScript, Next.js, Docker, Kubernetes, AWS, PostgreSQL, GraphQL, Tailwind CSS, System Design, CI\/CD Pipelines\",\r\n languages: \"English (Native), Spanish (Conversational), Persian (Beginner)\",\r\n headings: {\r\n summary: \"Summary\",\r\n experience: \"Work Experience\",\r\n education: \"Education\",\r\n projects: \"Projects\",\r\n skills: \"Skills\",\r\n languages: \"Languages\",\r\n certs: \"Certifications\",\r\n refs: \"References\",\r\n custom: \"Awards & Achievements\"\r\n },\r\n experience: [\r\n {\r\n id: 1,\r\n company: \"TechNexus Solutions\",\r\n position: \"Lead Web Developer\",\r\n period: \"2023 - Present\",\r\n description: \"Spearheaded development of a cloud-based SaaS platform utilizing React and Node.js. Optimized database queries which reduced load times by 40%. Led a team of 5 engineers delivering high-quality sprints.\"\r\n },\r\n {\r\n id: 2,\r\n company: \"DevVibe Studio\",\r\n position: \"Software Engineer\",\r\n period: \"2021 - 2023\",\r\n description: \"Developed and maintained highly responsive user interfaces using Next.js and Tailwind. Integrated robust RESTful APIs. Implemented end-to-end testing with Jest\/Cypress, improving code coverage by 25%.\"\r\n }\r\n ],\r\n education: [\r\n {\r\n id: 1,\r\n school: \"University of Technology\",\r\n degree: \"Bachelor of Science in Computer Science\",\r\n period: \"2017 - 2021\",\r\n description: \"Graduated with honors. Specialization in Software Engineering & Database Management Systems.\"\r\n }\r\n ],\r\n projects: [\r\n {\r\n id: 1,\r\n name: \"Automated Deployment Engine\",\r\n tech: \"Go, Docker, AWS\",\r\n description: \"Built a customized server deployment orchestrator that syncs Docker containers automatically on repository push events.\"\r\n }\r\n ],\r\n certifications: [\r\n { id: 1, title: \"AWS Solutions Architect Associate\", issuer: \"Amazon Web Services\", year: \"2024\" },\r\n { id: 2, title: \"Certified Kubernetes Administrator (CKA)\", issuer: \"Cloud Native Computing Foundation\", year: \"2023\" }\r\n ],\r\n references: [\r\n { id: 1, name: \"Sarah Jenkins\", company: \"VP of Engineering, TechNexus\", contact: \"sarah@nexus.io\" }\r\n ],\r\n customSectionTitle: \"Awards & Key Accomplishments\",\r\n customSectionItems: [\r\n { id: 1, heading: \"Winner of Global FinTech Hackathon\", text: \"Achieved 1st place out of 250 teams creating an AI-based financial analyzer app.\" }\r\n ]\r\n };\r\n\r\n \/\/ Initialize state variables\r\n let resumeData = JSON.parse(localStorage.getItem('tendify_resume_pro_data')) || {...defaultData};\r\n \r\n \/\/ Ensure nesting keys are completely covered during object restorations\r\n if (!resumeData.headings) resumeData.headings = {...defaultData.headings};\r\n if (!resumeData.certifications) resumeData.certifications = [...defaultData.certifications];\r\n if (!resumeData.references) resumeData.references = [...defaultData.references];\r\n if (!resumeData.customSectionItems) resumeData.customSectionItems = [...defaultData.customSectionItems];\r\n if (resumeData.showPhoto === undefined) resumeData.showPhoto = true;\r\n if (!resumeData.fontSize) resumeData.fontSize = \"md\";\r\n\r\n let currentScale = 0.9;\r\n\r\n \/\/ Custom non-blocking modal confirmation dialog\r\n function showConfirm(text, onConfirm) {\r\n const modal = document.getElementById('confirm-modal');\r\n const confirmBtn = document.getElementById('confirm-action-btn');\r\n document.getElementById('confirm-text').innerText = text;\r\n \r\n \/\/ Re-bind action execution\r\n confirmBtn.onclick = function() {\r\n onConfirm();\r\n modal.close();\r\n };\r\n modal.showModal();\r\n }\r\n\r\n \/\/ Custom beautiful slide toast notices\r\n function showToast(message, icon = \"\u2728\") {\r\n const toast = document.getElementById('toast-box');\r\n document.getElementById('toast-icon').innerText = icon;\r\n document.getElementById('toast-message').innerText = message;\r\n \r\n toast.classList.remove('translate-y-10', 'opacity-0');\r\n toast.classList.add('translate-y-0', 'opacity-100');\r\n \r\n setTimeout(() => {\r\n toast.classList.remove('translate-y-0', 'opacity-100');\r\n toast.classList.add('translate-y-10', 'opacity-0');\r\n }, 3000);\r\n }\r\n\r\n function triggerResetConfirmation() {\r\n showConfirm(\"Are you sure you want to reset all configurations? All custom information will be permanently deleted.\", () => {\r\n resumeData = JSON.parse(JSON.stringify(defaultData));\r\n saveAndRender();\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n showToast(\"Editor and values restored successfully\", \"\ud83d\udd04\");\r\n });\r\n }\r\n\r\n \/\/ General key-field setter\r\n function updateField(key, value) {\r\n resumeData[key] = value;\r\n saveAndRender();\r\n }\r\n\r\n function updateHeading(key, value) {\r\n resumeData.headings[key] = value;\r\n saveAndRender();\r\n }\r\n\r\n function toggleDetailsCollapse(elementId) {\r\n const panel = document.getElementById(elementId);\r\n const indicator = document.getElementById(elementId + '-indicator');\r\n if (panel.classList.contains('hidden')) {\r\n panel.classList.remove('hidden');\r\n indicator.innerText = \"Collapse \u25b4\";\r\n } else {\r\n panel.classList.add('hidden');\r\n indicator.innerText = \"Expand \u25be\";\r\n }\r\n }\r\n\r\n \/\/ Auto localstorage save triggers\r\n function saveAndRender() {\r\n localStorage.setItem('tendify_resume_pro_data', JSON.stringify(resumeData));\r\n renderResume();\r\n }\r\n\r\n \/\/ Load all flat settings in editor panel\r\n function loadInputValues() {\r\n document.getElementById('info-name').value = resumeData.name || '';\r\n document.getElementById('info-title').value = resumeData.title || '';\r\n document.getElementById('info-email').value = resumeData.email || '';\r\n document.getElementById('info-phone').value = resumeData.phone || '';\r\n document.getElementById('info-location').value = resumeData.location || '';\r\n document.getElementById('info-website').value = resumeData.website || '';\r\n document.getElementById('info-summary').value = resumeData.summary || '';\r\n document.getElementById('info-skills').value = resumeData.skills || '';\r\n document.getElementById('info-languages').value = resumeData.languages || '';\r\n document.getElementById('setting-show-photo').checked = resumeData.showPhoto;\r\n \r\n \/\/ Custom Headings\r\n document.getElementById('head-summary').value = resumeData.headings.summary || '';\r\n document.getElementById('head-experience').value = resumeData.headings.experience || '';\r\n document.getElementById('head-education').value = resumeData.headings.education || '';\r\n document.getElementById('head-projects').value = resumeData.headings.projects || '';\r\n document.getElementById('head-skills').value = resumeData.headings.skills || '';\r\n document.getElementById('head-languages').value = resumeData.headings.languages || '';\r\n document.getElementById('head-certs').value = resumeData.headings.certs || '';\r\n document.getElementById('head-refs').value = resumeData.headings.refs || '';\r\n \r\n document.getElementById('info-customSectionTitle').value = resumeData.customSectionTitle || '';\r\n\r\n \/\/ Set Photo preview\r\n const preview = document.getElementById('profile-img-preview');\r\n if (resumeData.profileImage) {\r\n preview.src = resumeData.profileImage;\r\n } else {\r\n preview.src = \"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\";\r\n }\r\n }\r\n\r\n \/\/ Base64 image reader for single-file self containments\r\n function uploadPhoto() {\r\n const file = document.getElementById('photo-uploader').files[0];\r\n if (file) {\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n resumeData.profileImage = e.target.result;\r\n document.getElementById('profile-img-preview').src = e.target.result;\r\n saveAndRender();\r\n showToast(\"Photo updated successfully\", \"\ud83d\udcf8\");\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n function removeProfileImage() {\r\n resumeData.profileImage = \"\";\r\n document.getElementById('profile-img-preview').src = \"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\";\r\n document.getElementById('photo-uploader').value = '';\r\n saveAndRender();\r\n showToast(\"Photo removed from configuration\", \"\ud83d\uddd1\ufe0f\");\r\n }\r\n\r\n function togglePhotoVisibility() {\r\n resumeData.showPhoto = document.getElementById('setting-show-photo').checked;\r\n saveAndRender();\r\n }\r\n\r\n \/\/ --- Lists Manipulation Section with Dynamic DOM generation ---\r\n\r\n \/\/ Helper for reordering list elements\r\n function moveInList(arrayName, index, direction) {\r\n const list = resumeData[arrayName];\r\n if (direction === 'up' && index > 0) {\r\n const temp = list[index];\r\n list[index] = list[index - 1];\r\n list[index - 1] = temp;\r\n } else if (direction === 'down' && index < list.length - 1) {\r\n const temp = list[index];\r\n list[index] = list[index + 1];\r\n list[index + 1] = temp;\r\n }\r\n saveAndRender();\r\n renderAllDynamicInputs();\r\n }\r\n\r\n \/\/ Render Work Exp\r\n function renderExperienceInputs() {\r\n const container = document.getElementById('experience-list');\r\n container.innerHTML = '';\r\n resumeData.experience.forEach((exp, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('experience', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('experience', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeExperience(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Company Name\" value=\"${exp.company}\" oninput=\"updateExpField(${idx}, 'company', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Job Position\" value=\"${exp.position}\" oninput=\"updateExpField(${idx}, 'position', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Period (e.g., 2021 - Present)\" value=\"${exp.period}\" oninput=\"updateExpField(${idx}, 'period', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <textarea placeholder=\"Description & accomplishments...\" rows=\"3\" oninput=\"updateExpField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${exp.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addExperience() {\r\n resumeData.experience.push({ company: '', position: '', period: '', description: '' });\r\n saveAndRender();\r\n renderExperienceInputs();\r\n }\r\n function updateExpField(idx, key, val) {\r\n resumeData.experience[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeExperience(idx) {\r\n resumeData.experience.splice(idx, 1);\r\n saveAndRender();\r\n renderExperienceInputs();\r\n }\r\n\r\n \/\/ Render Education\r\n function renderEducationInputs() {\r\n const container = document.getElementById('education-list');\r\n container.innerHTML = '';\r\n resumeData.education.forEach((edu, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('education', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('education', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeEducation(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"School\" value=\"${edu.school}\" oninput=\"updateEduField(${idx}, 'school', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Degree \/ Major\" value=\"${edu.degree}\" oninput=\"updateEduField(${idx}, 'degree', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Period\" value=\"${edu.period}\" oninput=\"updateEduField(${idx}, 'period', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <textarea placeholder=\"Description, achievements...\" rows=\"2\" oninput=\"updateEduField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${edu.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addEducation() {\r\n resumeData.education.push({ school: '', degree: '', period: '', description: '' });\r\n saveAndRender();\r\n renderEducationInputs();\r\n }\r\n function updateEduField(idx, key, val) {\r\n resumeData.education[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeEducation(idx) {\r\n resumeData.education.splice(idx, 1);\r\n saveAndRender();\r\n renderEducationInputs();\r\n }\r\n\r\n \/\/ Render Projects\r\n function renderProjectsInputs() {\r\n const container = document.getElementById('projects-list');\r\n container.innerHTML = '';\r\n resumeData.projects.forEach((proj, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('projects', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('projects', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeProject(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Project Title\" value=\"${proj.name}\" oninput=\"updateProjField(${idx}, 'name', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Technologies\" value=\"${proj.tech}\" oninput=\"updateProjField(${idx}, 'tech', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <textarea placeholder=\"Description and outcome achievements...\" rows=\"2\" oninput=\"updateProjField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${proj.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addProject() {\r\n resumeData.projects.push({ name: '', tech: '', description: '' });\r\n saveAndRender();\r\n renderProjectsInputs();\r\n }\r\n function updateProjField(idx, key, val) {\r\n resumeData.projects[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeProject(idx) {\r\n resumeData.projects.splice(idx, 1);\r\n saveAndRender();\r\n renderProjectsInputs();\r\n }\r\n\r\n \/\/ Render Certifications\r\n function renderCertificationsInputs() {\r\n const container = document.getElementById('certifications-list');\r\n container.innerHTML = '';\r\n resumeData.certifications.forEach((cert, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Cert #${idx+1}<\/span>\r\n <button onclick=\"removeCertification(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-3 gap-2\">\r\n <input type=\"text\" placeholder=\"Title\" value=\"${cert.title}\" oninput=\"updateCertField(${idx}, 'title', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 col-span-2\">\r\n <input type=\"text\" placeholder=\"Year\" value=\"${cert.year}\" oninput=\"updateCertField(${idx}, 'year', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Issuer\" value=\"${cert.issuer}\" oninput=\"updateCertField(${idx}, 'issuer', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addCertification() {\r\n resumeData.certifications.push({ title: '', issuer: '', year: '' });\r\n saveAndRender();\r\n renderCertificationsInputs();\r\n }\r\n function updateCertField(idx, key, val) {\r\n resumeData.certifications[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeCertification(idx) {\r\n resumeData.certifications.splice(idx, 1);\r\n saveAndRender();\r\n renderCertificationsInputs();\r\n }\r\n\r\n \/\/ Render References\r\n function renderReferencesInputs() {\r\n const container = document.getElementById('references-list');\r\n container.innerHTML = '';\r\n resumeData.references.forEach((ref, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Ref #${idx+1}<\/span>\r\n <button onclick=\"removeReference(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Name\" value=\"${ref.name}\" oninput=\"updateRefField(${idx}, 'name', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Company\/Relation\" value=\"${ref.company}\" oninput=\"updateRefField(${idx}, 'company', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Contact Email \/ Phone\" value=\"${ref.contact}\" oninput=\"updateRefField(${idx}, 'contact', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addReference() {\r\n resumeData.references.push({ name: '', company: '', contact: '' });\r\n saveAndRender();\r\n renderReferencesInputs();\r\n }\r\n function updateRefField(idx, key, val) {\r\n resumeData.references[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeReference(idx) {\r\n resumeData.references.splice(idx, 1);\r\n saveAndRender();\r\n renderReferencesInputs();\r\n }\r\n\r\n \/\/ Custom Sections Items Management\r\n function renderCustomSectionInputs() {\r\n const container = document.getElementById('custom-sections-list');\r\n container.innerHTML = '';\r\n resumeData.customSectionItems.forEach((item, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Custom Item #${idx+1}<\/span>\r\n <button onclick=\"removeCustomSectionItem(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Key Subtitle \/ Award Title\" value=\"${item.heading}\" oninput=\"updateCustomField(${idx}, 'heading', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <textarea placeholder=\"Details text...\" rows=\"2\" oninput=\"updateCustomField(${idx}, 'text', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 resize-none\">${item.text}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addCustomSectionItem() {\r\n resumeData.customSectionItems.push({ heading: '', text: '' });\r\n saveAndRender();\r\n renderCustomSectionInputs();\r\n }\r\n function updateCustomField(idx, key, val) {\r\n resumeData.customSectionItems[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeCustomSectionItem(idx) {\r\n resumeData.customSectionItems.splice(idx, 1);\r\n saveAndRender();\r\n renderCustomSectionInputs();\r\n }\r\n\r\n function renderAllDynamicInputs() {\r\n renderExperienceInputs();\r\n renderEducationInputs();\r\n renderProjectsInputs();\r\n renderCertificationsInputs();\r\n renderReferencesInputs();\r\n renderCustomSectionInputs();\r\n }\r\n\r\n \/\/ Quick Colors Preset application\r\n function applyColorPreset(presetHex) {\r\n if (presetHex !== 'custom') {\r\n document.getElementById('setting-color').value = presetHex;\r\n renderResume();\r\n }\r\n }\r\n\r\n \/\/ Direction toggles for RTL \/ LTR layout adaptations\r\n function toggleDirection() {\r\n const dir = document.getElementById('setting-direction').value;\r\n const preview = document.getElementById('resume-preview');\r\n preview.dir = dir;\r\n if (dir === 'rtl') {\r\n preview.classList.remove('text-left');\r\n preview.classList.add('text-right');\r\n } else {\r\n preview.classList.remove('text-right');\r\n preview.classList.add('text-left');\r\n }\r\n renderResume();\r\n showToast(\"Document direction modified: \" + dir.toUpperCase(), \"\u2195\ufe0f\");\r\n }\r\n\r\n \/\/ Zoom scaling controls\r\n function zoomPreview(val, reset = false) {\r\n const preview = document.getElementById('resume-preview');\r\n const zoomText = document.getElementById('zoom-level');\r\n if (reset) {\r\n currentScale = 0.9;\r\n } else {\r\n if (val > 1 && currentScale < 1.4) currentScale += 0.05;\r\n if (val < 1 && currentScale > 0.4) currentScale -= 0.05;\r\n }\r\n preview.style.transform = `scale(${currentScale.toFixed(2)})`;\r\n zoomText.innerText = `${Math.round(currentScale * 100)}%`;\r\n }\r\n\r\n \/\/ Import\/Export Logic blocks\r\n function importJSON() {\r\n document.getElementById('json-input').value = '';\r\n document.getElementById('json-modal').showModal();\r\n }\r\n\r\n function applyImportJSON() {\r\n try {\r\n const imported = JSON.parse(document.getElementById('json-input').value);\r\n if (imported && typeof imported === 'object') {\r\n resumeData = imported;\r\n \r\n \/\/ Fallbacks for critical nonexisting values\r\n if (!resumeData.headings) resumeData.headings = {...defaultData.headings};\r\n if (!resumeData.certifications) resumeData.certifications = [];\r\n if (!resumeData.references) resumeData.references = [];\r\n if (!resumeData.customSectionItems) resumeData.customSectionItems = [];\r\n \r\n saveAndRender();\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n \r\n document.getElementById('json-modal').close();\r\n showToast(\"Configuration loaded successfully\", \"\ud83d\udcc2\");\r\n } else {\r\n showToast(\"Invalid JSON file architecture\", \"\u274c\");\r\n }\r\n } catch (e) {\r\n showToast(\"Failed to parse JSON file structure\", \"\u274c\");\r\n }\r\n }\r\n\r\n function exportJSON() {\r\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(resumeData, null, 2));\r\n const dlAnchorElem = document.createElement('a');\r\n dlAnchorElem.setAttribute(\"href\", dataStr);\r\n dlAnchorElem.setAttribute(\"download\", `tendify_resume_${resumeData.name.replace(\/\\s+\/g, '_').toLowerCase()}.json`);\r\n dlAnchorElem.click();\r\n showToast(\"Configuration JSON file exported\", \"\ud83d\udcbe\");\r\n }\r\n\r\n \/\/ --- 9 Core Templates Render Engine (ATS Optimized) ---\r\n\r\n function renderResume() {\r\n const preview = document.getElementById('resume-preview');\r\n const template = document.getElementById('setting-template').value;\r\n const primaryColor = document.getElementById('setting-color').value;\r\n const font = document.getElementById('setting-font').value;\r\n const spacing = document.getElementById('setting-spacing').value;\r\n const sizeScale = document.getElementById('setting-fontsize').value;\r\n\r\n \/\/ Set global font classes\r\n let fontClass = 'font-sans';\r\n if (font === 'serif') fontClass = 'font-serif';\r\n if (font === 'monospace') fontClass = 'font-mono';\r\n\r\n let lineSpacing = 'leading-normal';\r\n if (spacing === 'tight') lineSpacing = 'leading-tight';\r\n if (spacing === 'relaxed') lineSpacing = 'leading-relaxed';\r\n\r\n \/\/ Base font sizing definitions\r\n let fontSizeClass = 'text-xs';\r\n let titleSizeClass = 'text-3xl';\r\n let sectionTitleClass = 'text-sm';\r\n if (sizeScale === 'sm') {\r\n fontSizeClass = 'text-[11px]';\r\n titleSizeClass = 'text-2xl';\r\n sectionTitleClass = 'text-xs';\r\n } else if (sizeScale === 'lg') {\r\n fontSizeClass = 'text-sm';\r\n titleSizeClass = 'text-4xl';\r\n sectionTitleClass = 'text-base';\r\n }\r\n\r\n preview.className = `resume-paper preview-scale ${fontClass} ${lineSpacing} ${fontSizeClass}`;\r\n\r\n \/\/ Helper rendering loops\r\n const skillTags = resumeData.skills.split(',').map(s => s.trim()).filter(s => s.length > 0);\r\n const skillsHtml = skillTags.map(skill => `\r\n <span class=\"inline-block bg-slate-100 text-slate-800 font-medium border border-slate-200 rounded px-2 py-0.5\" style=\"font-size: 0.9em\">${skill}<\/span>\r\n `).join('');\r\n\r\n const langTags = resumeData.languages.split(',').map(l => l.trim()).filter(l => l.length > 0);\r\n const langHtml = langTags.map(lang => `\r\n <span class=\"inline-block border border-slate-300 text-slate-700 px-2 py-0.5 rounded\" style=\"font-size: 0.9em\">${lang}<\/span>\r\n `).join('');\r\n\r\n \/\/ Experiences loop\r\n const experienceHtml = resumeData.experience.map(exp => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${exp.position} <span class=\"text-slate-400 font-normal\">•<\/span> <span class=\"font-semibold text-slate-700\">${exp.company}<\/span><\/h4>\r\n <span class=\"font-medium text-slate-500 whitespace-nowrap\" style=\"font-size: 0.9em\">${exp.period}<\/span>\r\n <\/div>\r\n <p class=\"text-slate-600 mt-1 whitespace-pre-line leading-relaxed\" style=\"font-size: 0.95em\">${exp.description}<\/p>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Education loop\r\n const educationHtml = resumeData.education.map(edu => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${edu.degree}<\/h4>\r\n <span class=\"font-medium text-slate-500 whitespace-nowrap\" style=\"font-size: 0.9em\">${edu.period}<\/span>\r\n <\/div>\r\n <div class=\"font-semibold text-slate-700 mt-0.5\" style=\"font-size: 0.95em\">${edu.school}<\/div>\r\n ${edu.description ? `<p class=\"text-slate-600 mt-0.5\" style=\"font-size: 0.9em\">${edu.description}<\/p>` : ''}\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Projects loop\r\n const projectsHtml = resumeData.projects.map(proj => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${proj.name}<\/h4>\r\n <span class=\"font-mono text-slate-500 italic\" style=\"font-size: 0.85em\">${proj.tech}<\/span>\r\n <\/div>\r\n <p class=\"text-slate-600 mt-1\" style=\"font-size: 0.95em\">${proj.description}<\/p>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Certifications list\r\n const certsHtml = resumeData.certifications.length > 0 ? resumeData.certifications.map(cert => `\r\n <div class=\"mb-2 break-inside-avoid flex justify-between items-baseline\">\r\n <span class=\"text-slate-800 font-semibold\">${cert.title} <span class=\"font-normal text-slate-500\">(${cert.issuer})<\/span><\/span>\r\n <span class=\"text-slate-500 font-medium\" style=\"font-size: 0.95em\">${cert.year}<\/span>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ References list\r\n const refsHtml = resumeData.references.length > 0 ? resumeData.references.map(ref => `\r\n <div class=\"mb-2 break-inside-avoid\">\r\n <div class=\"font-bold text-slate-800\">${ref.name}<\/div>\r\n <div class=\"text-slate-600\" style=\"font-size: 0.9em\">${ref.company} • <span class=\"font-mono\">${ref.contact}<\/span><\/div>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ Custom Section list\r\n const customSecHtml = resumeData.customSectionItems.length > 0 ? resumeData.customSectionItems.map(item => `\r\n <div class=\"mb-2 break-inside-avoid\">\r\n <div class=\"font-bold text-slate-800\">${item.heading}<\/div>\r\n <p class=\"text-slate-600 mt-0.5\" style=\"font-size: 0.95em\">${item.text}<\/p>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ Profile photo element HTML\r\n const photoHtml = (resumeData.profileImage && resumeData.showPhoto) ? `\r\n <div class=\"flex-shrink-0\">\r\n <img decoding=\"async\" src=\"${resumeData.profileImage}\" class=\"w-20 h-20 object-cover rounded-full border-2\" style=\"border-color: ${primaryColor}\">\r\n <\/div>\r\n ` : '';\r\n\r\n const contactsHeaderHtml = `\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1.5 text-slate-600 justify-start mt-2\">\r\n ${resumeData.email ? `<span class=\"flex items-center gap-1\"><strong>Email:<\/strong> ${resumeData.email}<\/span>` : ''}\r\n ${resumeData.phone ? `<span class=\"flex items-center gap-1\"><strong>Phone:<\/strong> ${resumeData.phone}<\/span>` : ''}\r\n ${resumeData.location ? `<span class=\"flex items-center gap-1\"><strong>Loc:<\/strong> ${resumeData.location}<\/span>` : ''}\r\n ${resumeData.website ? `<span class=\"flex items-center gap-1\"><strong>Web:<\/strong> <a href=\"${resumeData.website}\" target=\"_blank\" class=\"underline\" style=\"color: ${primaryColor}\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/span>` : ''}\r\n <\/div>\r\n `;\r\n\r\n \/\/ --- 1. MODERN PROFESSIONAL ---\r\n if (template === 'modern') {\r\n preview.innerHTML = `\r\n <header class=\"border-b-4 pb-4 mb-5 flex gap-4 items-center\" style=\"border-color: ${primaryColor}\">\r\n ${photoHtml}\r\n <div class=\"flex-1\">\r\n <h1 class=\"${titleSizeClass} font-extrabold tracking-tight text-slate-950 mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"font-bold tracking-wider uppercase\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n ${contactsHeaderHtml}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.summary}<\/h3>\r\n <p class=\"text-slate-700 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.projects}<\/h3>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.certs}<\/h3>\r\n ${certsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.customSectionTitle}<\/h3>\r\n ${customSecHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n ${skillTags.length > 0 ? `\r\n <section>\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.skills}<\/h3>\r\n <div class=\"flex flex-wrap gap-1.5\">${skillsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <section>\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.languages}<\/h3>\r\n <div class=\"flex flex-wrap gap-1.5\">${langHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n\r\n ${refsHtml ? `\r\n <section class=\"mt-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.refs}<\/h3>\r\n <div class=\"grid grid-cols-2 gap-4\">${refsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n `;\r\n } \r\n \r\n \/\/ --- 2. EXECUTIVE CLASSIC ---\r\n else if (template === 'classic') {\r\n preview.innerHTML = `\r\n <header class=\"text-center pb-4 mb-5 border-b border-slate-300\">\r\n ${photoHtml ? `<div class=\"flex justify-center mb-3\">${photoHtml}<\/div>` : ''}\r\n <h1 class=\"${titleSizeClass} font-serif font-bold text-slate-900 mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"tracking-widest uppercase font-semibold mb-3\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-x-4 gap-y-1 text-slate-600\">\r\n ${resumeData.email ? `<span><strong>Email:<\/strong> ${resumeData.email}<\/span>` : ''}\r\n ${resumeData.phone ? `<span><strong>Phone:<\/strong> ${resumeData.phone}<\/span>` : ''}\r\n ${resumeData.location ? `<span><strong>Location:<\/strong> ${resumeData.location}<\/span>` : ''}\r\n ${resumeData.website ? `<span><strong>Website:<\/strong> <a href=\"${resumeData.website}\" class=\"underline\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/span>` : ''}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5 text-center\">\r\n <p class=\"text-slate-700 italic px-6 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"flex flex-col gap-5\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n <\/div>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.education}<\/h3>\r\n <\/div>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.projects}<\/h3>\r\n <\/div>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.certs}<\/h3>\r\n <\/div>\r\n <div class=\"px-6\">${certsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.customSectionTitle}<\/h3>\r\n <\/div>\r\n <div class=\"px-6\">${customSecHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-4 border-t pt-4\">\r\n ${skillTags.length > 0 ? `\r\n <section>\r\n <h4 class=\"font-bold uppercase tracking-wider mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.skills}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${skillsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <section>\r\n <h4 class=\"font-bold uppercase tracking-wider mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.languages}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${langHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n } \r\n \r\n \/\/ --- 3. TWO-COLUMN LAYOUT ---\r\n else if (template === 'twocolumn') {\r\n preview.innerHTML = `\r\n <div class=\"grid grid-cols-3 gap-6\">\r\n \r\n <div class=\"col-span-1 pr-4 border-r border-slate-200\" style=\"border-color: ${primaryColor}25\">\r\n ${photoHtml ? `<div class=\"mb-4\">${photoHtml}<\/div>` : ''}\r\n <h1 class=\"text-2xl font-black text-slate-900 leading-none mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"font-bold mb-4\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n \r\n <div class=\"flex flex-col gap-3 mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">Contact<\/h4>\r\n ${resumeData.email ? `<div class=\"text-slate-700\"><strong>Email:<\/strong><br>${resumeData.email}<\/div>` : ''}\r\n ${resumeData.phone ? `<div class=\"text-slate-700\"><strong>Phone:<\/strong><br>${resumeData.phone}<\/div>` : ''}\r\n ${resumeData.location ? `<div class=\"text-slate-700\"><strong>Loc:<\/strong><br>${resumeData.location}<\/div>` : ''}\r\n ${resumeData.website ? `<div class=\"text-slate-700\"><strong>Web:<\/strong><br><a href=\"${resumeData.website}\" class=\"underline\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/div>` : ''}\r\n <\/div>\r\n\r\n ${skillTags.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.skills}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${skillsHtml}<\/div>\r\n <\/div>\r\n ` : ''}\r\n\r\n ${langTags.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.languages}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${langHtml}<\/div>\r\n <\/div>\r\n ` : ''}\r\n\r\n ${refsHtml ? `\r\n <div>\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.refs}<\/h4>\r\n ${refsHtml}\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n\r\n \r\n <div class=\"col-span-2\">\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.summary}<\/h3>\r\n <p class=\"text-slate-700 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.projects}<\/h3>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.certs}<\/h3>\r\n ${certsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.customSectionTitle}<\/h3>\r\n ${customSecHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 4. MINIMALIST TECH (Clean Monospace Look) ---\r\n else if (template === 'minimalist') {\r\n preview.innerHTML = `\r\n <div class=\"font-mono\">\r\n <header class=\"border-b border-dashed border-slate-400 pb-4 mb-4 flex justify-between items-start\">\r\n <div>\r\n <h1 class=\"text-2xl font-bold text-slate-900 uppercase\">${resumeData.name}<\/h1>\r\n <p class=\"text-sm tracking-tight text-slate-700\">${resumeData.title}<\/p>\r\n <\/div>\r\n <div class=\"text-right text-xs text-slate-600\">\r\n ${resumeData.email ? `<div>Email: ${resumeData.email}<\/div>` : ''}\r\n ${resumeData.phone ? `<div>Phone: ${resumeData.phone}<\/div>` : ''}\r\n ${resumeData.location ? `<div>Loc: ${resumeData.location}<\/div>` : ''}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-1\">> ${resumeData.headings.summary}<\/div>\r\n <p class=\"text-slate-600 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.experience}<\/div>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.education}<\/div>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${skillTags.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.skills}<\/div>\r\n <p class=\"text-slate-600\">${skillTags.join(' | ')}<\/p>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 5. CREATIVE BOLD ---\r\n else if (template === 'creative') {\r\n preview.innerHTML = `\r\n <div class=\"grid grid-cols-4 gap-6\">\r\n \r\n <div class=\"col-span-4 p-6 rounded-xl flex gap-5 items-center text-white\" style=\"background: ${primaryColor}\">\r\n ${photoHtml}\r\n <div>\r\n <h1 class=\"text-3xl font-black\">${resumeData.name}<\/h1>\r\n <p class=\"text-sm uppercase tracking-widest opacity-90 font-medium\">${resumeData.title}<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"col-span-1 flex flex-col gap-5 border-r border-slate-100 pr-3\">\r\n <div class=\"text-slate-700\">\r\n <h3 class=\"font-bold uppercase text-xs mb-2\" style=\"color: ${primaryColor}\">Contact<\/h3>\r\n <p class=\"text-xs break-all\">${resumeData.email}<\/p>\r\n <p class=\"text-xs mt-1\">${resumeData.phone}<\/p>\r\n <p class=\"text-xs mt-1\">${resumeData.location}<\/p>\r\n <\/div>\r\n\r\n ${skillTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-xs mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.skills}<\/h3>\r\n <div class=\"flex flex-col gap-1\">${skillTags.map(s => `<span class=\"text-xs\">• ${s}<\/span>`).join('')}<\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n\r\n <div class=\"col-span-3\">\r\n ${resumeData.summary ? `\r\n <div class=\"mb-4\">\r\n <p class=\"text-slate-700 text-sm italic leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/div>\r\n ` : ''}\r\n \r\n ${resumeData.experience.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h3 class=\"font-black border-b-2 pb-1 mb-3 uppercase text-xs\" style=\"color: ${primaryColor}; border-color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/div>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-black border-b-2 pb-1 mb-3 uppercase text-xs\" style=\"color: ${primaryColor}; border-color: ${primaryColor}\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 6. ACADEMIC \/ RESEARCH CV ---\r\n else if (template === 'academic') {\r\n preview.innerHTML = `\r\n <div class=\"font-serif\">\r\n <header class=\"text-center pb-4 border-b-2 border-double border-slate-900 mb-6\">\r\n <h1 class=\"text-3xl font-normal text-slate-950\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs italic text-slate-700 mt-1\">${resumeData.title}<\/p>\r\n <div class=\"text-xs mt-2 text-slate-600\">\r\n ${resumeData.email} | ${resumeData.phone} | ${resumeData.location}\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"flex flex-col gap-5 text-justify\">\r\n ${resumeData.summary ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">I. Research Profile<\/h3>\r\n <p class=\"text-slate-800\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">II. Appointments<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">III. Education Background<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 7. COMPACT CONTENT-DENSE ---\r\n else if (template === 'compact') {\r\n preview.innerHTML = `\r\n <header class=\"flex justify-between items-center border-b pb-2 mb-3\">\r\n <div>\r\n <h1 class=\"text-xl font-bold text-slate-950\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs font-semibold\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n <\/div>\r\n <div class=\"text-right text-[10px] text-slate-600\">\r\n <div>${resumeData.email} | ${resumeData.phone}<\/div>\r\n <div>${resumeData.location} | ${resumeData.website}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-2 leading-tight\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-3 mt-1\">\r\n ${skillTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.skills}<\/h3>\r\n <p class=\"text-slate-600 text-[10px]\">${skillTags.join(', ')}<\/p>\r\n <\/div>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.languages}<\/h3>\r\n <p class=\"text-slate-600 text-[10px]\">${langTags.join(', ')}<\/p>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 8. SLEEK STARTUP BADGE ---\r\n else if (template === 'startup') {\r\n preview.innerHTML = `\r\n <header class=\"mb-5 flex gap-4 items-center\">\r\n ${photoHtml}\r\n <div>\r\n <span class=\"inline-block px-2 py-0.5 text-[9px] font-bold text-white uppercase tracking-widest rounded mb-1\" style=\"background: ${primaryColor}\">Available Immediately<\/span>\r\n <h1 class=\"text-2xl font-black text-slate-900\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs font-semibold text-slate-600\">${resumeData.title}<\/p>\r\n <div class=\"flex gap-2 text-[10px] text-slate-400 mt-1\">\r\n <span>${resumeData.email}<\/span> • <span>${resumeData.phone}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-4\">\r\n ${resumeData.summary ? `\r\n <section class=\"p-3 bg-slate-50 rounded-lg border-l-4\" style=\"border-color: ${primaryColor}\">\r\n <p class=\"text-slate-600\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold text-xs uppercase mb-2 tracking-wider\" style=\"color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 9. ELEGANT SERIF REGAL ---\r\n else if (template === 'elegant') {\r\n preview.innerHTML = `\r\n <div class=\"font-serif\">\r\n <header class=\"text-center pb-5 mb-5 border-b border-slate-200\">\r\n <h1 class=\"text-3xl text-slate-900 uppercase font-light tracking-widest mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs tracking-widest text-slate-500 uppercase\">${resumeData.title}<\/p>\r\n <div class=\"text-[10px] text-slate-400 italic mt-3\">\r\n ${resumeData.email} • ${resumeData.phone} • ${resumeData.location}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5 text-center px-10\">\r\n <p class=\"text-slate-700 italic leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-1 gap-5\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"text-center font-bold text-slate-850 border-b pb-1 mb-3 uppercase tracking-widest text-xs\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"text-center font-bold text-slate-850 border-b pb-1 mb-3 uppercase tracking-widest text-xs\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ --- Window Initializations ---\r\n window.onload = function() {\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n renderResume();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-2ef8819 e-flex e-con-boxed e-con e-parent\" data-id=\"2ef8819\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c82374 elementor-widget elementor-widget-spacer\" data-id=\"5c82374\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-3da0264 e-flex e-con-boxed e-con e-parent\" data-id=\"3da0264\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-972b3b4 elementor-widget elementor-widget-wd_text_block\" data-id=\"972b3b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<h2><span style=\"color: #000000;\">Land Your Dream Job with Our Free ATS Resume Builder<\/span><\/h2><div class=\"container\"><p class=\"lead-text\"><span style=\"color: #000000;\">Did you know that over 75% of resumes are filtered out by Applicant Tracking Systems (ATS) before they ever reach a human recruiter? We bridge the gap between your talent and global hiring systems.<\/span><\/p><p><span style=\"color: #000000;\">Our <strong>Professional Resume Maker<\/strong> is specifically designed to bypass rigid automated screening filters while presenting a stunning, highly polished premium aesthetic to human HR managers. Featuring 9 dynamic, fully customizable layouts, you can craft a world-class professional CV in less than 10 minutes\u2014completely free.<\/span><\/p><h2><span style=\"color: #000000;\">Why Choose Tendify's ATS-Friendly Resume Creator?<\/span><\/h2><p><span style=\"color: #000000;\">Unlike standard, generic word processors or restrictive visual CV tools that export heavy unreadable graphics, Tendify utilizes native, clean layout rendering. This ensures that parsing algorithms can easily index your text, skills, and chronological work experience.<\/span><\/p><p><span style=\"color: #000000;\"><\/span><\/p><table class=\"features-table\"><tbody><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">100% ATS-Compliant Layouts<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Every template is designed with geometric precision, ensuring structured headings and parsed fields that match top-tier ATS platforms used globally.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">9 Premium Design Ecosystems<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Seamlessly switch between 9 distinct professional aesthetics\u2014ranging from clean corporate minimal styles to high-impact modern layouts.<\/span><\/div><\/td><\/tr><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">Instant Live Preview & Scale<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Tweak your details and immediately visualize the physical print page with interactive scale, custom padding, and font typography controls.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">Data Privacy First<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Your private information belongs entirely to you. Tendify stores your data locally in your browser cache. No sign-ups, no databases, zero tracking.<\/span><\/div><\/td><\/tr><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">Full Localization Support<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Build your career profile effortlessly in both English (LTR) and Persian\/Arabic (RTL) formats with dedicated text direction switches.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">Seamless JSON Import\/Export<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Save your master resume structure as a standalone backup file. Re-upload it anytime to instantly refresh or customize your CV.<\/span><\/div><\/td><\/tr><\/tbody><\/table><h2><span style=\"color: #000000;\">How to Build Your Professional Resume in 4 Simple Steps<\/span><\/h2><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 1<\/span><\/div><h3><span style=\"color: #000000;\">Input Your Professional Information<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Begin filling out the intuitive sidebar fields. Enter your full contact details, craft a compelling professional summary, map out your career timeline under Work Experience, and list your core technical skills.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 2<\/span><\/div><h3><span style=\"color: #000000;\">Choose Your Perfect Design Style<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Navigate to the \"Templates\" tab on the sidebar. Choose from 9 unique layout structural combinations. Switching templates will instantly re-arrange your data without losing entered text.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 3<\/span><\/div><h3><span style=\"color: #000000;\">Customize Typography, Padding, and Alignment<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Tailor the fine details using our visual configuration panel. Switch between crisp sans-serif or editorial serif font styles, adjust vertical elements or outer page margins, and toggle LTR\/RTL text direction.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 4<\/span><\/div><h3><span style=\"color: #000000;\">Export to Standard A4 PDF<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Click the Print \/ Export PDF button. The built-in workspace sets standard browser print parameters automatically. Save your layout directly to your system as a clean, searchable vector PDF optimized for AI scanners.<\/span><\/p><\/div><div class=\"tips-box\"><h2><span style=\"color: #000000;\">Pro-Tips for Maximizing Your ATS Score<\/span><\/h2><ul class=\"tips-list\"><li><span style=\"color: #000000;\"><strong>Use Exact Keywords:<\/strong> Cross-reference the target job description and inject identical technical terms directly into your \"Skills\" and \"Experience\" fields.<\/span><\/li><li><span style=\"color: #000000;\"><strong>Stick to Chronological Structures:<\/strong> Our templates prioritize structural timelines, which parsing bots heavily favor for calculating years of active experience.<\/span><\/li><li><span style=\"color: #000000;\"><strong>Keep Bullet Points Quantifiable:<\/strong> Instead of just listing responsibilities, write things like: <em>\"Increased operational efficiency by 24% over a 6-month cycle.\"<\/em><\/span><\/li><\/ul><\/div><div class=\"cta-section\"><h3><span style=\"color: #000000;\">Ready to craft your competitive edge?<\/span><\/h3><p style=\"font-size: 0.95rem; margin-bottom: 10px;\"><span style=\"color: #000000;\">Launch the interactive application and unlock global corporate opportunities with an elite-tier presentation.<\/span><\/p><\/div><\/div><p>\u00a0<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Professional Resume Maker is specifically designed to bypass rigid automated screening filters while presenting a stunning, highly polished premium aesthetic to human HR managers. Featuring 9 dynamic, fully customizable layouts, you can craft a world-class professional CV in less than 10 minutes\u2014completely free.<\/p>","protected":false},"author":15,"featured_media":18723,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-18719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/comments?post=18719"}],"version-history":[{"count":4,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719\/revisions"}],"predecessor-version":[{"id":18724,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719\/revisions\/18724"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18723"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Tendify Pro Resume Builder<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n tendify: {\r\n dark: '#0B0F19',\r\n card: '#161D30',\r\n accent: '#6366F1',\r\n accentHover: '#4F46E5',\r\n textMuted: '#94A3B8'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n \r\n <style>\r\n :root {\r\n --bg-color: #0b0f19;\r\n --card-color: #161d30;\r\n --accent-color: #6366f1;\r\n --text-main: #f8fafc;\r\n --text-muted: #94a3b8;\r\n }\r\n \r\n body {\r\n background-color: var(--bg-color);\r\n color: var(--text-main);\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Perfect dark scrollbars *\/\r\n ::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: #0B0F19;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: #1E293B;\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #6366F1;\r\n }\r\n\r\n \/* Real A4 Canvas styling *\/\r\n .resume-paper {\r\n width: 210mm;\r\n min-height: 297mm;\r\n padding: 20mm;\r\n margin: 0 auto;\r\n background: #ffffff;\r\n color: #1e293b;\r\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);\r\n position: relative;\r\n box-sizing: border-box;\r\n word-wrap: break-word;\r\n }\r\n\r\n .preview-scale {\r\n transform-origin: top center;\r\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n \/* Essential print layouts to avoid page splitting issues *\/\r\n @media print {\r\n body {\r\n background: white !important;\r\n color: black !important;\r\n }\r\n .no-print {\r\n display: none !important;\r\n }\r\n .print-full-width {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n box-shadow: none !important;\r\n }\r\n .resume-paper {\r\n width: 210mm !important;\r\n height: 297mm !important;\r\n padding: 15mm !important;\r\n box-shadow: none !important;\r\n margin: 0 !important;\r\n page-break-after: avoid;\r\n page-break-before: avoid;\r\n }\r\n .break-inside-avoid {\r\n page-break-inside: avoid;\r\n break-inside: avoid;\r\n }\r\n @page {\r\n size: A4;\r\n margin: 0;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#0B0F19] text-slate-100 min-h-screen flex flex-col selection:bg-indigo-500 selection:text-white\">\r\n\r\n <header class=\"no-print bg-[#161D30] border-b border-slate-800 px-6 py-4 sticky top-0 z-50 shadow-md\">\r\n <div class=\"max-w-[1600px] mx-auto flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <div class=\"flex items-center gap-3\">\r\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-500\/20\">\r\n <svg class=\"w-6 h-6 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"><\/path>\r\n <\/svg>\r\n <\/div>\r\n <div>\r\n <h1 class=\"text-xl font-bold bg-gradient-to-r from-white to-indigo-200 bg-clip-text text-transparent\">Tendify Resume Builder <span class=\"text-xs bg-indigo-600 text-white font-semibold py-0.5 px-2 rounded-full ml-1\">PRO<\/span><\/h1>\r\n <p class=\"text-xs text-indigo-400 font-medium\">Create elegant, ATS-friendly resumes instantly with advanced controls<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"flex flex-wrap items-center gap-3\">\r\n <button onclick=\"importJSON()\" class=\"px-3 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg border border-slate-700 transition flex items-center gap-1.5\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12\"><\/path><\/svg>\r\n Import JSON\r\n <\/button>\r\n <button onclick=\"exportJSON()\" class=\"px-3 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg border border-slate-700 transition flex items-center gap-1.5\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"><\/path><\/svg>\r\n Export JSON\r\n <\/button>\r\n <button onclick=\"window.print()\" class=\"px-4 py-2 text-sm bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-lg shadow-indigo-600\/30 transition flex items-center gap-2\">\r\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z\"><\/path><\/svg>\r\n Export PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div id=\"toast-box\" class=\"no-print fixed bottom-5 right-5 z-[100] transform translate-y-10 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <div class=\"bg-indigo-950 border border-indigo-500\/30 text-indigo-200 px-4 py-3 rounded-xl shadow-2xl flex items-center gap-2.5\">\r\n <span id=\"toast-icon\">\u2728<\/span>\r\n <p id=\"toast-message\" class=\"text-sm font-medium\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <dialog id=\"confirm-modal\" class=\"bg-[#161D30] text-slate-100 p-6 rounded-2xl border border-slate-800 max-w-sm w-full shadow-2xl backdrop:bg-black\/80\">\r\n <h4 class=\"text-base font-bold mb-2 text-red-400 flex items-center gap-2\">\r\n \u26a0\ufe0f Warning Action\r\n <\/h4>\r\n <p id=\"confirm-text\" class=\"text-xs text-slate-400 mb-6 leading-relaxed\">Are you absolutely sure you want to proceed with this action? This cannot be undone.<\/p>\r\n <div class=\"flex justify-end gap-2.5\">\r\n <button onclick=\"document.getElementById('confirm-modal').close()\" class=\"px-3.5 py-1.5 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg transition\">Cancel<\/button>\r\n <button id=\"confirm-action-btn\" class=\"px-4 py-1.5 text-xs bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition\">Confirm<\/button>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <main class=\"flex-1 flex flex-col lg:flex-row max-w-[1600px] w-full mx-auto p-4 lg:p-6 gap-6 overflow-hidden\">\r\n \r\n \r\n <section class=\"no-print w-full lg:w-[45%] flex flex-col gap-6 overflow-y-auto max-h-[calc(100vh-140px)] pr-2\">\r\n \r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-4 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Customize Resume Style & Fonts\r\n <\/h3>\r\n <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-4\">\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Template Style<\/label>\r\n <select id=\"setting-template\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"modern\">Modern Professional<\/option>\r\n <option value=\"classic\">Executive Classic<\/option>\r\n <option value=\"twocolumn\">Two-Column layout<\/option>\r\n <option value=\"minimalist\">Minimalist Tech<\/option>\r\n <option value=\"creative\">Creative Bold<\/option>\r\n <option value=\"academic\">Academic \/ Research CV<\/option>\r\n <option value=\"compact\">Compact Content-Dense<\/option>\r\n <option value=\"startup\">Sleek Startup Badge<\/option>\r\n <option value=\"elegant\">Elegant Serif Regal<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Color Palette<\/label>\r\n <div class=\"flex items-center gap-2\">\r\n <input type=\"color\" id=\"setting-color\" value=\"#6366F1\" onchange=\"renderResume()\" class=\"w-10 h-8 bg-transparent border-0 cursor-pointer rounded\">\r\n <select id=\"setting-color-preset\" onchange=\"applyColorPreset(this.value)\" class=\"flex-1 bg-[#0B0F19] border border-slate-700 rounded-lg px-1.5 py-2 text-xs text-slate-200 focus:outline-none\">\r\n <option value=\"custom\">Custom Color<\/option>\r\n <option value=\"#6366F1\">Tendify Indigo<\/option>\r\n <option value=\"#0D9488\">Teal Modern<\/option>\r\n <option value=\"#991B1B\">Crimson Executive<\/option>\r\n <option value=\"#B45309\">Amber Classic<\/option>\r\n <option value=\"#334155\">Slate Tech<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Text Alignment<\/label>\r\n <select id=\"setting-direction\" onchange=\"toggleDirection()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"ltr\">LTR (English)<\/option>\r\n <option value=\"rtl\">RTL (Persian\/Arabic)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Font Style<\/label>\r\n <select id=\"setting-font\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"sans-serif\">Modern Sans-Serif<\/option>\r\n <option value=\"serif\">Classic Serif<\/option>\r\n <option value=\"monospace\">Tech Monospace<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Font Size Scale<\/label>\r\n <select id=\"setting-fontsize\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"sm\">Small (High Density)<\/option>\r\n <option value=\"md\" selected>Medium<\/option>\r\n <option value=\"lg\">Large<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1.5\">Line Spacing<\/label>\r\n <select id=\"setting-spacing\" onchange=\"renderResume()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-indigo-500\">\r\n <option value=\"tight\">Tight<\/option>\r\n <option value=\"normal\" selected>Normal<\/option>\r\n <option value=\"relaxed\">Relaxed<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 mt-4 pt-4 border-t border-slate-800\/60\">\r\n <div>\r\n <label class=\"flex items-center gap-2 cursor-pointer text-xs text-slate-400\">\r\n <input type=\"checkbox\" id=\"setting-show-photo\" checked onchange=\"togglePhotoVisibility()\" class=\"rounded border-slate-700 bg-[#0B0F19] text-indigo-600 focus:ring-indigo-500 h-4 w-4\">\r\n Show Profile Picture\r\n <\/label>\r\n <\/div>\r\n <div class=\"flex justify-end\">\r\n <button onclick=\"triggerResetConfirmation()\" class=\"py-1 px-3 text-xs bg-red-950\/40 hover:bg-red-900\/60 text-red-200 rounded-lg border border-red-800 transition\">\r\n Reset Content\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <button onclick=\"toggleDetailsCollapse('headings-panel')\" class=\"w-full flex justify-between items-center text-sm font-bold text-slate-200 uppercase tracking-wider\">\r\n <span class=\"flex items-center gap-2\"><span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Customize Section Headings<\/span>\r\n <span id=\"headings-panel-indicator\" class=\"text-xs text-slate-400\">Expand \u25be<\/span>\r\n <\/button>\r\n <div id=\"headings-panel\" class=\"hidden grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4 pt-4 border-t border-slate-800\">\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Summary Title<\/label>\r\n <input type=\"text\" id=\"head-summary\" value=\"Summary\" oninput=\"updateHeading('summary', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Work Experience Title<\/label>\r\n <input type=\"text\" id=\"head-experience\" value=\"Work Experience\" oninput=\"updateHeading('experience', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Education Title<\/label>\r\n <input type=\"text\" id=\"head-education\" value=\"Education\" oninput=\"updateHeading('education', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Projects Title<\/label>\r\n <input type=\"text\" id=\"head-projects\" value=\"Projects\" oninput=\"updateHeading('projects', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Skills Title<\/label>\r\n <input type=\"text\" id=\"head-skills\" value=\"Skills\" oninput=\"updateHeading('skills', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Languages Title<\/label>\r\n <input type=\"text\" id=\"head-languages\" value=\"Languages\" oninput=\"updateHeading('languages', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">Certifications Title<\/label>\r\n <input type=\"text\" id=\"head-certs\" value=\"Certifications\" oninput=\"updateHeading('certs', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-[10px] text-slate-400 mb-1\">References Title<\/label>\r\n <input type=\"text\" id=\"head-refs\" value=\"References\" oninput=\"updateHeading('refs', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-4 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Personal Details\r\n <\/h3>\r\n \r\n \r\n <div class=\"flex flex-col sm:flex-row items-center gap-4 mb-4 pb-4 border-b border-slate-800\/80\">\r\n <div class=\"relative group\">\r\n <img decoding=\"async\" id=\"profile-img-preview\" src=\"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\" class=\"w-16 h-16 rounded-xl object-cover border border-slate-700 bg-slate-900 shadow-md\">\r\n <button onclick=\"removeProfileImage()\" class=\"absolute -top-1.5 -right-1.5 bg-red-600\/90 hover:bg-red-700 text-white text-[10px] p-1 rounded-full shadow transition leading-none\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"flex-1 w-full\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Upload Photo (A4 Print-safe)<\/label>\r\n <input type=\"file\" id=\"photo-uploader\" accept=\"image\/*\" onchange=\"uploadPhoto()\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-2 py-1.5 text-xs text-slate-400 focus:outline-none file:mr-3 file:py-1 file:px-2.5 file:rounded file:border-0 file:text-[10px] file:font-semibold file:bg-indigo-600 file:text-white hover:file:bg-indigo-700 file:cursor-pointer\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Full Name<\/label>\r\n <input type=\"text\" id=\"info-name\" placeholder=\"John Doe\" oninput=\"updateField('name', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Job Title<\/label>\r\n <input type=\"text\" id=\"info-title\" placeholder=\"Senior Frontend Developer\" oninput=\"updateField('title', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Email Address<\/label>\r\n <input type=\"email\" id=\"info-email\" placeholder=\"john.doe@example.com\" oninput=\"updateField('email', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Phone Number<\/label>\r\n <input type=\"text\" id=\"info-phone\" placeholder=\"+1 (555) 019-2834\" oninput=\"updateField('phone', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Location \/ Address<\/label>\r\n <input type=\"text\" id=\"info-location\" placeholder=\"New York, USA\" oninput=\"updateField('location', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs text-slate-400 mb-1\">Website or Portfolio<\/label>\r\n <input type=\"text\" id=\"info-website\" placeholder=\"https:\/\/johndoe.dev\" oninput=\"updateField('website', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"mt-4\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Professional Summary<\/label>\r\n <textarea id=\"info-summary\" rows=\"3\" placeholder=\"Write a brief professional summary...\" oninput=\"updateField('summary', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Work Experience\r\n <\/h3>\r\n <button onclick=\"addExperience()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Work<\/button>\r\n <\/div>\r\n <div id=\"experience-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Education History\r\n <\/h3>\r\n <button onclick=\"addEducation()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Edu<\/button>\r\n <\/div>\r\n <div id=\"education-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Key Projects\r\n <\/h3>\r\n <button onclick=\"addProject()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Project<\/button>\r\n <\/div>\r\n <div id=\"projects-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Certifications\r\n <\/h3>\r\n <button onclick=\"addCertification()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Cert<\/button>\r\n <\/div>\r\n <div id=\"certifications-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> References\r\n <\/h3>\r\n <button onclick=\"addReference()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Ref<\/button>\r\n <\/div>\r\n <div id=\"references-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-2 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Skills\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400 mb-2\">Separate with commas (e.g., React, Node, SQL)<\/p>\r\n <textarea id=\"info-skills\" rows=\"4\" placeholder=\"React, Node.js, Python, AWS...\" oninput=\"updateField('skills', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <div>\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider mb-2 flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Languages\r\n <\/h3>\r\n <p class=\"text-xs text-slate-400 mb-2\">Separate with commas (e.g., English (C2), Persian (Native))<\/p>\r\n <textarea id=\"info-languages\" rows=\"4\" placeholder=\"English (Full), Farsi (Native)...\" oninput=\"updateField('languages', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none resize-none\"><\/textarea>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-[#161D30] rounded-2xl p-5 border border-slate-800 shadow-xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h3 class=\"text-sm font-bold text-slate-200 uppercase tracking-wider flex items-center gap-2\">\r\n <span class=\"w-1.5 h-4 bg-indigo-500 rounded\"><\/span> Custom Custom Section\r\n <\/h3>\r\n <button onclick=\"addCustomSectionItem()\" class=\"px-3 py-1 text-xs bg-indigo-600\/20 hover:bg-indigo-600 text-indigo-300 hover:text-white border border-indigo-500\/30 rounded-lg transition\">+ Add Item<\/button>\r\n <\/div>\r\n <div class=\"mb-4\">\r\n <label class=\"block text-xs text-slate-400 mb-1\">Custom Section Header Name<\/label>\r\n <input type=\"text\" id=\"info-customSectionTitle\" placeholder=\"Awards & Achievements\" oninput=\"updateField('customSectionTitle', this.value)\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:outline-none\">\r\n <\/div>\r\n <div id=\"custom-sections-list\" class=\"flex flex-col gap-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n \r\n <section class=\"print-full-width w-full lg:w-[55%] flex flex-col items-center overflow-y-auto max-h-[calc(100vh-140px)] bg-slate-950 rounded-2xl p-4 border border-slate-800 shadow-2xl relative\">\r\n \r\n <div class=\"no-print w-full flex justify-between items-center bg-[#161D30] px-4 py-2 rounded-xl mb-4 border border-slate-800 shadow-lg\">\r\n <span class=\"text-xs font-semibold text-slate-300 flex items-center gap-1.5\">\r\n <span class=\"w-2 h-2 rounded-full bg-emerald-500 animate-pulse\"><\/span>\r\n Live Interactive A4 Preview\r\n <\/span>\r\n <div class=\"flex items-center gap-2\">\r\n <button onclick=\"zoomPreview(0.9)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-slate-300 transition text-xs font-bold\">A-<\/button>\r\n <span id=\"zoom-level\" class=\"text-xs text-slate-400 min-w-[40px] text-center font-mono\">90%<\/span>\r\n <button onclick=\"zoomPreview(1.1)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-slate-300 transition text-xs font-bold\">A+<\/button>\r\n <button onclick=\"zoomPreview(1.0, true)\" class=\"p-1.5 bg-slate-800 hover:bg-slate-750 rounded text-indigo-400 transition text-xs\">Reset<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"preview-wrapper\" class=\"w-full overflow-x-auto flex justify-center pb-8\">\r\n <div id=\"resume-preview\" class=\"resume-paper preview-scale text-left\" style=\"transform: scale(0.9);\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n <footer class=\"no-print bg-[#0B0F19] border-t border-slate-850 py-4 text-center text-xs text-slate-500\">\r\n <div class=\"max-w-7xl mx-auto px-4 flex flex-col sm:flex-row justify-between items-center gap-2\">\r\n <span>Powered by <a href=\"https:\/\/tendify.net\" target=\"_blank\" class=\"text-indigo-400 hover:underline\">Tendify.Net<\/a><\/span>\r\n <span>100% Free • Fully ATS Optimized Layouts • No Markups • Auto-saving<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <dialog id=\"json-modal\" class=\"bg-[#161D30] text-slate-100 p-6 rounded-2xl border border-slate-800 max-w-md w-full shadow-2xl backdrop:bg-black\/60\">\r\n <h3 class=\"text-lg font-bold mb-3 text-indigo-400\">Import Resume Config JSON<\/h3>\r\n <p class=\"text-xs text-slate-400 mb-4\">Paste your exported Tendify Resume JSON data structure here to restore edits instantly.<\/p>\r\n <textarea id=\"json-input\" rows=\"8\" class=\"w-full bg-[#0B0F19] border border-slate-700 rounded-lg p-3 text-xs font-mono text-slate-300 focus:outline-none focus:border-indigo-500 mb-4\" placeholder=\"{ ... }\"><\/textarea>\r\n <div class=\"flex justify-end gap-2\">\r\n <button onclick=\"document.getElementById('json-modal').close()\" class=\"px-4 py-2 text-xs bg-slate-800 hover:bg-slate-750 text-slate-300 rounded-lg transition\">Cancel<\/button>\r\n <button onclick=\"applyImportJSON()\" class=\"px-4 py-2 text-xs bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition font-semibold\">Load Configuration<\/button>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <script>\r\n \/\/ Robust sample data for instantaneous startup rendering\r\n const defaultData = {\r\n name: \"Alexander Mercer\",\r\n title: \"Senior Full-Stack Engineer\",\r\n email: \"alex.mercer@tendify.net\",\r\n phone: \"+1 (555) 382-9018\",\r\n location: \"San Francisco, CA\",\r\n website: \"https:\/\/tendify.net\",\r\n profileImage: \"\",\r\n showPhoto: true,\r\n fontSize: \"md\",\r\n summary: \"Innovative and detail-oriented Full-Stack Developer with over 6 years of experience building secure, high-performance web applications. Expertise in React, Node.js, cloud architecture, and designing intuitive user experiences. Passionate about writing clean, maintainable code and solving complex software challenges.\",\r\n skills: \"React, Node.js, TypeScript, Next.js, Docker, Kubernetes, AWS, PostgreSQL, GraphQL, Tailwind CSS, System Design, CI\/CD Pipelines\",\r\n languages: \"English (Native), Spanish (Conversational), Persian (Beginner)\",\r\n headings: {\r\n summary: \"Summary\",\r\n experience: \"Work Experience\",\r\n education: \"Education\",\r\n projects: \"Projects\",\r\n skills: \"Skills\",\r\n languages: \"Languages\",\r\n certs: \"Certifications\",\r\n refs: \"References\",\r\n custom: \"Awards & Achievements\"\r\n },\r\n experience: [\r\n {\r\n id: 1,\r\n company: \"TechNexus Solutions\",\r\n position: \"Lead Web Developer\",\r\n period: \"2023 - Present\",\r\n description: \"Spearheaded development of a cloud-based SaaS platform utilizing React and Node.js. Optimized database queries which reduced load times by 40%. Led a team of 5 engineers delivering high-quality sprints.\"\r\n },\r\n {\r\n id: 2,\r\n company: \"DevVibe Studio\",\r\n position: \"Software Engineer\",\r\n period: \"2021 - 2023\",\r\n description: \"Developed and maintained highly responsive user interfaces using Next.js and Tailwind. Integrated robust RESTful APIs. Implemented end-to-end testing with Jest\/Cypress, improving code coverage by 25%.\"\r\n }\r\n ],\r\n education: [\r\n {\r\n id: 1,\r\n school: \"University of Technology\",\r\n degree: \"Bachelor of Science in Computer Science\",\r\n period: \"2017 - 2021\",\r\n description: \"Graduated with honors. Specialization in Software Engineering & Database Management Systems.\"\r\n }\r\n ],\r\n projects: [\r\n {\r\n id: 1,\r\n name: \"Automated Deployment Engine\",\r\n tech: \"Go, Docker, AWS\",\r\n description: \"Built a customized server deployment orchestrator that syncs Docker containers automatically on repository push events.\"\r\n }\r\n ],\r\n certifications: [\r\n { id: 1, title: \"AWS Solutions Architect Associate\", issuer: \"Amazon Web Services\", year: \"2024\" },\r\n { id: 2, title: \"Certified Kubernetes Administrator (CKA)\", issuer: \"Cloud Native Computing Foundation\", year: \"2023\" }\r\n ],\r\n references: [\r\n { id: 1, name: \"Sarah Jenkins\", company: \"VP of Engineering, TechNexus\", contact: \"sarah@nexus.io\" }\r\n ],\r\n customSectionTitle: \"Awards & Key Accomplishments\",\r\n customSectionItems: [\r\n { id: 1, heading: \"Winner of Global FinTech Hackathon\", text: \"Achieved 1st place out of 250 teams creating an AI-based financial analyzer app.\" }\r\n ]\r\n };\r\n\r\n \/\/ Initialize state variables\r\n let resumeData = JSON.parse(localStorage.getItem('tendify_resume_pro_data')) || {...defaultData};\r\n \r\n \/\/ Ensure nesting keys are completely covered during object restorations\r\n if (!resumeData.headings) resumeData.headings = {...defaultData.headings};\r\n if (!resumeData.certifications) resumeData.certifications = [...defaultData.certifications];\r\n if (!resumeData.references) resumeData.references = [...defaultData.references];\r\n if (!resumeData.customSectionItems) resumeData.customSectionItems = [...defaultData.customSectionItems];\r\n if (resumeData.showPhoto === undefined) resumeData.showPhoto = true;\r\n if (!resumeData.fontSize) resumeData.fontSize = \"md\";\r\n\r\n let currentScale = 0.9;\r\n\r\n \/\/ Custom non-blocking modal confirmation dialog\r\n function showConfirm(text, onConfirm) {\r\n const modal = document.getElementById('confirm-modal');\r\n const confirmBtn = document.getElementById('confirm-action-btn');\r\n document.getElementById('confirm-text').innerText = text;\r\n \r\n \/\/ Re-bind action execution\r\n confirmBtn.onclick = function() {\r\n onConfirm();\r\n modal.close();\r\n };\r\n modal.showModal();\r\n }\r\n\r\n \/\/ Custom beautiful slide toast notices\r\n function showToast(message, icon = \"\u2728\") {\r\n const toast = document.getElementById('toast-box');\r\n document.getElementById('toast-icon').innerText = icon;\r\n document.getElementById('toast-message').innerText = message;\r\n \r\n toast.classList.remove('translate-y-10', 'opacity-0');\r\n toast.classList.add('translate-y-0', 'opacity-100');\r\n \r\n setTimeout(() => {\r\n toast.classList.remove('translate-y-0', 'opacity-100');\r\n toast.classList.add('translate-y-10', 'opacity-0');\r\n }, 3000);\r\n }\r\n\r\n function triggerResetConfirmation() {\r\n showConfirm(\"Are you sure you want to reset all configurations? All custom information will be permanently deleted.\", () => {\r\n resumeData = JSON.parse(JSON.stringify(defaultData));\r\n saveAndRender();\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n showToast(\"Editor and values restored successfully\", \"\ud83d\udd04\");\r\n });\r\n }\r\n\r\n \/\/ General key-field setter\r\n function updateField(key, value) {\r\n resumeData[key] = value;\r\n saveAndRender();\r\n }\r\n\r\n function updateHeading(key, value) {\r\n resumeData.headings[key] = value;\r\n saveAndRender();\r\n }\r\n\r\n function toggleDetailsCollapse(elementId) {\r\n const panel = document.getElementById(elementId);\r\n const indicator = document.getElementById(elementId + '-indicator');\r\n if (panel.classList.contains('hidden')) {\r\n panel.classList.remove('hidden');\r\n indicator.innerText = \"Collapse \u25b4\";\r\n } else {\r\n panel.classList.add('hidden');\r\n indicator.innerText = \"Expand \u25be\";\r\n }\r\n }\r\n\r\n \/\/ Auto localstorage save triggers\r\n function saveAndRender() {\r\n localStorage.setItem('tendify_resume_pro_data', JSON.stringify(resumeData));\r\n renderResume();\r\n }\r\n\r\n \/\/ Load all flat settings in editor panel\r\n function loadInputValues() {\r\n document.getElementById('info-name').value = resumeData.name || '';\r\n document.getElementById('info-title').value = resumeData.title || '';\r\n document.getElementById('info-email').value = resumeData.email || '';\r\n document.getElementById('info-phone').value = resumeData.phone || '';\r\n document.getElementById('info-location').value = resumeData.location || '';\r\n document.getElementById('info-website').value = resumeData.website || '';\r\n document.getElementById('info-summary').value = resumeData.summary || '';\r\n document.getElementById('info-skills').value = resumeData.skills || '';\r\n document.getElementById('info-languages').value = resumeData.languages || '';\r\n document.getElementById('setting-show-photo').checked = resumeData.showPhoto;\r\n \r\n \/\/ Custom Headings\r\n document.getElementById('head-summary').value = resumeData.headings.summary || '';\r\n document.getElementById('head-experience').value = resumeData.headings.experience || '';\r\n document.getElementById('head-education').value = resumeData.headings.education || '';\r\n document.getElementById('head-projects').value = resumeData.headings.projects || '';\r\n document.getElementById('head-skills').value = resumeData.headings.skills || '';\r\n document.getElementById('head-languages').value = resumeData.headings.languages || '';\r\n document.getElementById('head-certs').value = resumeData.headings.certs || '';\r\n document.getElementById('head-refs').value = resumeData.headings.refs || '';\r\n \r\n document.getElementById('info-customSectionTitle').value = resumeData.customSectionTitle || '';\r\n\r\n \/\/ Set Photo preview\r\n const preview = document.getElementById('profile-img-preview');\r\n if (resumeData.profileImage) {\r\n preview.src = resumeData.profileImage;\r\n } else {\r\n preview.src = \"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\";\r\n }\r\n }\r\n\r\n \/\/ Base64 image reader for single-file self containments\r\n function uploadPhoto() {\r\n const file = document.getElementById('photo-uploader').files[0];\r\n if (file) {\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n resumeData.profileImage = e.target.result;\r\n document.getElementById('profile-img-preview').src = e.target.result;\r\n saveAndRender();\r\n showToast(\"Photo updated successfully\", \"\ud83d\udcf8\");\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n function removeProfileImage() {\r\n resumeData.profileImage = \"\";\r\n document.getElementById('profile-img-preview').src = \"https:\/\/placehold.co\/150x150\/1e293b\/a5b4fc?text=Photo\";\r\n document.getElementById('photo-uploader').value = '';\r\n saveAndRender();\r\n showToast(\"Photo removed from configuration\", \"\ud83d\uddd1\ufe0f\");\r\n }\r\n\r\n function togglePhotoVisibility() {\r\n resumeData.showPhoto = document.getElementById('setting-show-photo').checked;\r\n saveAndRender();\r\n }\r\n\r\n \/\/ --- Lists Manipulation Section with Dynamic DOM generation ---\r\n\r\n \/\/ Helper for reordering list elements\r\n function moveInList(arrayName, index, direction) {\r\n const list = resumeData[arrayName];\r\n if (direction === 'up' && index > 0) {\r\n const temp = list[index];\r\n list[index] = list[index - 1];\r\n list[index - 1] = temp;\r\n } else if (direction === 'down' && index < list.length - 1) {\r\n const temp = list[index];\r\n list[index] = list[index + 1];\r\n list[index + 1] = temp;\r\n }\r\n saveAndRender();\r\n renderAllDynamicInputs();\r\n }\r\n\r\n \/\/ Render Work Exp\r\n function renderExperienceInputs() {\r\n const container = document.getElementById('experience-list');\r\n container.innerHTML = '';\r\n resumeData.experience.forEach((exp, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('experience', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('experience', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeExperience(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Company Name\" value=\"${exp.company}\" oninput=\"updateExpField(${idx}, 'company', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Job Position\" value=\"${exp.position}\" oninput=\"updateExpField(${idx}, 'position', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Period (e.g., 2021 - Present)\" value=\"${exp.period}\" oninput=\"updateExpField(${idx}, 'period', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <textarea placeholder=\"Description & accomplishments...\" rows=\"3\" oninput=\"updateExpField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${exp.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addExperience() {\r\n resumeData.experience.push({ company: '', position: '', period: '', description: '' });\r\n saveAndRender();\r\n renderExperienceInputs();\r\n }\r\n function updateExpField(idx, key, val) {\r\n resumeData.experience[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeExperience(idx) {\r\n resumeData.experience.splice(idx, 1);\r\n saveAndRender();\r\n renderExperienceInputs();\r\n }\r\n\r\n \/\/ Render Education\r\n function renderEducationInputs() {\r\n const container = document.getElementById('education-list');\r\n container.innerHTML = '';\r\n resumeData.education.forEach((edu, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('education', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('education', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeEducation(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"School\" value=\"${edu.school}\" oninput=\"updateEduField(${idx}, 'school', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Degree \/ Major\" value=\"${edu.degree}\" oninput=\"updateEduField(${idx}, 'degree', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Period\" value=\"${edu.period}\" oninput=\"updateEduField(${idx}, 'period', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <textarea placeholder=\"Description, achievements...\" rows=\"2\" oninput=\"updateEduField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${edu.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addEducation() {\r\n resumeData.education.push({ school: '', degree: '', period: '', description: '' });\r\n saveAndRender();\r\n renderEducationInputs();\r\n }\r\n function updateEduField(idx, key, val) {\r\n resumeData.education[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeEducation(idx) {\r\n resumeData.education.splice(idx, 1);\r\n saveAndRender();\r\n renderEducationInputs();\r\n }\r\n\r\n \/\/ Render Projects\r\n function renderProjectsInputs() {\r\n const container = document.getElementById('projects-list');\r\n container.innerHTML = '';\r\n resumeData.projects.forEach((proj, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div class=\"flex items-center gap-1.5\">\r\n <button onclick=\"moveInList('projects', ${idx}, 'up')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25b2<\/button>\r\n <button onclick=\"moveInList('projects', ${idx}, 'down')\" class=\"text-xs px-2 py-0.5 bg-slate-800 rounded hover:bg-slate-700 text-slate-300\">\u25bc<\/button>\r\n <\/div>\r\n <button onclick=\"removeProject(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Project Title\" value=\"${proj.name}\" oninput=\"updateProjField(${idx}, 'name', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Technologies\" value=\"${proj.tech}\" oninput=\"updateProjField(${idx}, 'tech', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200\">\r\n <\/div>\r\n <textarea placeholder=\"Description and outcome achievements...\" rows=\"2\" oninput=\"updateProjField(${idx}, 'description', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 resize-none\">${proj.description}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addProject() {\r\n resumeData.projects.push({ name: '', tech: '', description: '' });\r\n saveAndRender();\r\n renderProjectsInputs();\r\n }\r\n function updateProjField(idx, key, val) {\r\n resumeData.projects[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeProject(idx) {\r\n resumeData.projects.splice(idx, 1);\r\n saveAndRender();\r\n renderProjectsInputs();\r\n }\r\n\r\n \/\/ Render Certifications\r\n function renderCertificationsInputs() {\r\n const container = document.getElementById('certifications-list');\r\n container.innerHTML = '';\r\n resumeData.certifications.forEach((cert, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Cert #${idx+1}<\/span>\r\n <button onclick=\"removeCertification(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-3 gap-2\">\r\n <input type=\"text\" placeholder=\"Title\" value=\"${cert.title}\" oninput=\"updateCertField(${idx}, 'title', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 col-span-2\">\r\n <input type=\"text\" placeholder=\"Year\" value=\"${cert.year}\" oninput=\"updateCertField(${idx}, 'year', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Issuer\" value=\"${cert.issuer}\" oninput=\"updateCertField(${idx}, 'issuer', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addCertification() {\r\n resumeData.certifications.push({ title: '', issuer: '', year: '' });\r\n saveAndRender();\r\n renderCertificationsInputs();\r\n }\r\n function updateCertField(idx, key, val) {\r\n resumeData.certifications[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeCertification(idx) {\r\n resumeData.certifications.splice(idx, 1);\r\n saveAndRender();\r\n renderCertificationsInputs();\r\n }\r\n\r\n \/\/ Render References\r\n function renderReferencesInputs() {\r\n const container = document.getElementById('references-list');\r\n container.innerHTML = '';\r\n resumeData.references.forEach((ref, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Ref #${idx+1}<\/span>\r\n <button onclick=\"removeReference(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-2\">\r\n <input type=\"text\" placeholder=\"Name\" value=\"${ref.name}\" oninput=\"updateRefField(${idx}, 'name', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <input type=\"text\" placeholder=\"Company\/Relation\" value=\"${ref.company}\" oninput=\"updateRefField(${idx}, 'company', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Contact Email \/ Phone\" value=\"${ref.contact}\" oninput=\"updateRefField(${idx}, 'contact', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addReference() {\r\n resumeData.references.push({ name: '', company: '', contact: '' });\r\n saveAndRender();\r\n renderReferencesInputs();\r\n }\r\n function updateRefField(idx, key, val) {\r\n resumeData.references[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeReference(idx) {\r\n resumeData.references.splice(idx, 1);\r\n saveAndRender();\r\n renderReferencesInputs();\r\n }\r\n\r\n \/\/ Custom Sections Items Management\r\n function renderCustomSectionInputs() {\r\n const container = document.getElementById('custom-sections-list');\r\n container.innerHTML = '';\r\n resumeData.customSectionItems.forEach((item, idx) => {\r\n container.innerHTML += `\r\n <div class=\"bg-[#0B0F19] p-4 rounded-xl border border-slate-750 relative flex flex-col gap-2\">\r\n <div class=\"flex justify-between items-center mb-1\">\r\n <span class=\"text-[10px] text-slate-500 font-semibold\">Custom Item #${idx+1}<\/span>\r\n <button onclick=\"removeCustomSectionItem(${idx})\" class=\"text-red-400 hover:text-red-300 text-xs font-semibold\">Delete<\/button>\r\n <\/div>\r\n <input type=\"text\" placeholder=\"Key Subtitle \/ Award Title\" value=\"${item.heading}\" oninput=\"updateCustomField(${idx}, 'heading', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200\">\r\n <textarea placeholder=\"Details text...\" rows=\"2\" oninput=\"updateCustomField(${idx}, 'text', this.value)\" class=\"bg-[#161D30] border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 resize-none\">${item.text}<\/textarea>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n function addCustomSectionItem() {\r\n resumeData.customSectionItems.push({ heading: '', text: '' });\r\n saveAndRender();\r\n renderCustomSectionInputs();\r\n }\r\n function updateCustomField(idx, key, val) {\r\n resumeData.customSectionItems[idx][key] = val;\r\n saveAndRender();\r\n }\r\n function removeCustomSectionItem(idx) {\r\n resumeData.customSectionItems.splice(idx, 1);\r\n saveAndRender();\r\n renderCustomSectionInputs();\r\n }\r\n\r\n function renderAllDynamicInputs() {\r\n renderExperienceInputs();\r\n renderEducationInputs();\r\n renderProjectsInputs();\r\n renderCertificationsInputs();\r\n renderReferencesInputs();\r\n renderCustomSectionInputs();\r\n }\r\n\r\n \/\/ Quick Colors Preset application\r\n function applyColorPreset(presetHex) {\r\n if (presetHex !== 'custom') {\r\n document.getElementById('setting-color').value = presetHex;\r\n renderResume();\r\n }\r\n }\r\n\r\n \/\/ Direction toggles for RTL \/ LTR layout adaptations\r\n function toggleDirection() {\r\n const dir = document.getElementById('setting-direction').value;\r\n const preview = document.getElementById('resume-preview');\r\n preview.dir = dir;\r\n if (dir === 'rtl') {\r\n preview.classList.remove('text-left');\r\n preview.classList.add('text-right');\r\n } else {\r\n preview.classList.remove('text-right');\r\n preview.classList.add('text-left');\r\n }\r\n renderResume();\r\n showToast(\"Document direction modified: \" + dir.toUpperCase(), \"\u2195\ufe0f\");\r\n }\r\n\r\n \/\/ Zoom scaling controls\r\n function zoomPreview(val, reset = false) {\r\n const preview = document.getElementById('resume-preview');\r\n const zoomText = document.getElementById('zoom-level');\r\n if (reset) {\r\n currentScale = 0.9;\r\n } else {\r\n if (val > 1 && currentScale < 1.4) currentScale += 0.05;\r\n if (val < 1 && currentScale > 0.4) currentScale -= 0.05;\r\n }\r\n preview.style.transform = `scale(${currentScale.toFixed(2)})`;\r\n zoomText.innerText = `${Math.round(currentScale * 100)}%`;\r\n }\r\n\r\n \/\/ Import\/Export Logic blocks\r\n function importJSON() {\r\n document.getElementById('json-input').value = '';\r\n document.getElementById('json-modal').showModal();\r\n }\r\n\r\n function applyImportJSON() {\r\n try {\r\n const imported = JSON.parse(document.getElementById('json-input').value);\r\n if (imported && typeof imported === 'object') {\r\n resumeData = imported;\r\n \r\n \/\/ Fallbacks for critical nonexisting values\r\n if (!resumeData.headings) resumeData.headings = {...defaultData.headings};\r\n if (!resumeData.certifications) resumeData.certifications = [];\r\n if (!resumeData.references) resumeData.references = [];\r\n if (!resumeData.customSectionItems) resumeData.customSectionItems = [];\r\n \r\n saveAndRender();\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n \r\n document.getElementById('json-modal').close();\r\n showToast(\"Configuration loaded successfully\", \"\ud83d\udcc2\");\r\n } else {\r\n showToast(\"Invalid JSON file architecture\", \"\u274c\");\r\n }\r\n } catch (e) {\r\n showToast(\"Failed to parse JSON file structure\", \"\u274c\");\r\n }\r\n }\r\n\r\n function exportJSON() {\r\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(resumeData, null, 2));\r\n const dlAnchorElem = document.createElement('a');\r\n dlAnchorElem.setAttribute(\"href\", dataStr);\r\n dlAnchorElem.setAttribute(\"download\", `tendify_resume_${resumeData.name.replace(\/\\s+\/g, '_').toLowerCase()}.json`);\r\n dlAnchorElem.click();\r\n showToast(\"Configuration JSON file exported\", \"\ud83d\udcbe\");\r\n }\r\n\r\n \/\/ --- 9 Core Templates Render Engine (ATS Optimized) ---\r\n\r\n function renderResume() {\r\n const preview = document.getElementById('resume-preview');\r\n const template = document.getElementById('setting-template').value;\r\n const primaryColor = document.getElementById('setting-color').value;\r\n const font = document.getElementById('setting-font').value;\r\n const spacing = document.getElementById('setting-spacing').value;\r\n const sizeScale = document.getElementById('setting-fontsize').value;\r\n\r\n \/\/ Set global font classes\r\n let fontClass = 'font-sans';\r\n if (font === 'serif') fontClass = 'font-serif';\r\n if (font === 'monospace') fontClass = 'font-mono';\r\n\r\n let lineSpacing = 'leading-normal';\r\n if (spacing === 'tight') lineSpacing = 'leading-tight';\r\n if (spacing === 'relaxed') lineSpacing = 'leading-relaxed';\r\n\r\n \/\/ Base font sizing definitions\r\n let fontSizeClass = 'text-xs';\r\n let titleSizeClass = 'text-3xl';\r\n let sectionTitleClass = 'text-sm';\r\n if (sizeScale === 'sm') {\r\n fontSizeClass = 'text-[11px]';\r\n titleSizeClass = 'text-2xl';\r\n sectionTitleClass = 'text-xs';\r\n } else if (sizeScale === 'lg') {\r\n fontSizeClass = 'text-sm';\r\n titleSizeClass = 'text-4xl';\r\n sectionTitleClass = 'text-base';\r\n }\r\n\r\n preview.className = `resume-paper preview-scale ${fontClass} ${lineSpacing} ${fontSizeClass}`;\r\n\r\n \/\/ Helper rendering loops\r\n const skillTags = resumeData.skills.split(',').map(s => s.trim()).filter(s => s.length > 0);\r\n const skillsHtml = skillTags.map(skill => `\r\n <span class=\"inline-block bg-slate-100 text-slate-800 font-medium border border-slate-200 rounded px-2 py-0.5\" style=\"font-size: 0.9em\">${skill}<\/span>\r\n `).join('');\r\n\r\n const langTags = resumeData.languages.split(',').map(l => l.trim()).filter(l => l.length > 0);\r\n const langHtml = langTags.map(lang => `\r\n <span class=\"inline-block border border-slate-300 text-slate-700 px-2 py-0.5 rounded\" style=\"font-size: 0.9em\">${lang}<\/span>\r\n `).join('');\r\n\r\n \/\/ Experiences loop\r\n const experienceHtml = resumeData.experience.map(exp => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${exp.position} <span class=\"text-slate-400 font-normal\">•<\/span> <span class=\"font-semibold text-slate-700\">${exp.company}<\/span><\/h4>\r\n <span class=\"font-medium text-slate-500 whitespace-nowrap\" style=\"font-size: 0.9em\">${exp.period}<\/span>\r\n <\/div>\r\n <p class=\"text-slate-600 mt-1 whitespace-pre-line leading-relaxed\" style=\"font-size: 0.95em\">${exp.description}<\/p>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Education loop\r\n const educationHtml = resumeData.education.map(edu => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${edu.degree}<\/h4>\r\n <span class=\"font-medium text-slate-500 whitespace-nowrap\" style=\"font-size: 0.9em\">${edu.period}<\/span>\r\n <\/div>\r\n <div class=\"font-semibold text-slate-700 mt-0.5\" style=\"font-size: 0.95em\">${edu.school}<\/div>\r\n ${edu.description ? `<p class=\"text-slate-600 mt-0.5\" style=\"font-size: 0.9em\">${edu.description}<\/p>` : ''}\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Projects loop\r\n const projectsHtml = resumeData.projects.map(proj => `\r\n <div class=\"mb-3 break-inside-avoid\">\r\n <div class=\"flex justify-between items-baseline\">\r\n <h4 class=\"font-bold text-slate-900 leading-tight\">${proj.name}<\/h4>\r\n <span class=\"font-mono text-slate-500 italic\" style=\"font-size: 0.85em\">${proj.tech}<\/span>\r\n <\/div>\r\n <p class=\"text-slate-600 mt-1\" style=\"font-size: 0.95em\">${proj.description}<\/p>\r\n <\/div>\r\n `).join('');\r\n\r\n \/\/ Certifications list\r\n const certsHtml = resumeData.certifications.length > 0 ? resumeData.certifications.map(cert => `\r\n <div class=\"mb-2 break-inside-avoid flex justify-between items-baseline\">\r\n <span class=\"text-slate-800 font-semibold\">${cert.title} <span class=\"font-normal text-slate-500\">(${cert.issuer})<\/span><\/span>\r\n <span class=\"text-slate-500 font-medium\" style=\"font-size: 0.95em\">${cert.year}<\/span>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ References list\r\n const refsHtml = resumeData.references.length > 0 ? resumeData.references.map(ref => `\r\n <div class=\"mb-2 break-inside-avoid\">\r\n <div class=\"font-bold text-slate-800\">${ref.name}<\/div>\r\n <div class=\"text-slate-600\" style=\"font-size: 0.9em\">${ref.company} • <span class=\"font-mono\">${ref.contact}<\/span><\/div>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ Custom Section list\r\n const customSecHtml = resumeData.customSectionItems.length > 0 ? resumeData.customSectionItems.map(item => `\r\n <div class=\"mb-2 break-inside-avoid\">\r\n <div class=\"font-bold text-slate-800\">${item.heading}<\/div>\r\n <p class=\"text-slate-600 mt-0.5\" style=\"font-size: 0.95em\">${item.text}<\/p>\r\n <\/div>\r\n `).join('') : '';\r\n\r\n \/\/ Profile photo element HTML\r\n const photoHtml = (resumeData.profileImage && resumeData.showPhoto) ? `\r\n <div class=\"flex-shrink-0\">\r\n <img decoding=\"async\" src=\"${resumeData.profileImage}\" class=\"w-20 h-20 object-cover rounded-full border-2\" style=\"border-color: ${primaryColor}\">\r\n <\/div>\r\n ` : '';\r\n\r\n const contactsHeaderHtml = `\r\n <div class=\"flex flex-wrap gap-x-4 gap-y-1.5 text-slate-600 justify-start mt-2\">\r\n ${resumeData.email ? `<span class=\"flex items-center gap-1\"><strong>Email:<\/strong> ${resumeData.email}<\/span>` : ''}\r\n ${resumeData.phone ? `<span class=\"flex items-center gap-1\"><strong>Phone:<\/strong> ${resumeData.phone}<\/span>` : ''}\r\n ${resumeData.location ? `<span class=\"flex items-center gap-1\"><strong>Loc:<\/strong> ${resumeData.location}<\/span>` : ''}\r\n ${resumeData.website ? `<span class=\"flex items-center gap-1\"><strong>Web:<\/strong> <a href=\"${resumeData.website}\" target=\"_blank\" class=\"underline\" style=\"color: ${primaryColor}\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/span>` : ''}\r\n <\/div>\r\n `;\r\n\r\n \/\/ --- 1. MODERN PROFESSIONAL ---\r\n if (template === 'modern') {\r\n preview.innerHTML = `\r\n <header class=\"border-b-4 pb-4 mb-5 flex gap-4 items-center\" style=\"border-color: ${primaryColor}\">\r\n ${photoHtml}\r\n <div class=\"flex-1\">\r\n <h1 class=\"${titleSizeClass} font-extrabold tracking-tight text-slate-950 mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"font-bold tracking-wider uppercase\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n ${contactsHeaderHtml}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.summary}<\/h3>\r\n <p class=\"text-slate-700 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.projects}<\/h3>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.certs}<\/h3>\r\n ${certsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section class=\"mb-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.customSectionTitle}<\/h3>\r\n ${customSecHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-4\">\r\n ${skillTags.length > 0 ? `\r\n <section>\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.skills}<\/h3>\r\n <div class=\"flex flex-wrap gap-1.5\">${skillsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <section>\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.languages}<\/h3>\r\n <div class=\"flex flex-wrap gap-1.5\">${langHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n\r\n ${refsHtml ? `\r\n <section class=\"mt-4\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-widest border-b pb-1 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}40\">${resumeData.headings.refs}<\/h3>\r\n <div class=\"grid grid-cols-2 gap-4\">${refsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n `;\r\n } \r\n \r\n \/\/ --- 2. EXECUTIVE CLASSIC ---\r\n else if (template === 'classic') {\r\n preview.innerHTML = `\r\n <header class=\"text-center pb-4 mb-5 border-b border-slate-300\">\r\n ${photoHtml ? `<div class=\"flex justify-center mb-3\">${photoHtml}<\/div>` : ''}\r\n <h1 class=\"${titleSizeClass} font-serif font-bold text-slate-900 mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"tracking-widest uppercase font-semibold mb-3\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n <div class=\"flex flex-wrap justify-center gap-x-4 gap-y-1 text-slate-600\">\r\n ${resumeData.email ? `<span><strong>Email:<\/strong> ${resumeData.email}<\/span>` : ''}\r\n ${resumeData.phone ? `<span><strong>Phone:<\/strong> ${resumeData.phone}<\/span>` : ''}\r\n ${resumeData.location ? `<span><strong>Location:<\/strong> ${resumeData.location}<\/span>` : ''}\r\n ${resumeData.website ? `<span><strong>Website:<\/strong> <a href=\"${resumeData.website}\" class=\"underline\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/span>` : ''}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5 text-center\">\r\n <p class=\"text-slate-700 italic px-6 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"flex flex-col gap-5\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n <\/div>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.education}<\/h3>\r\n <\/div>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.projects}<\/h3>\r\n <\/div>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.headings.certs}<\/h3>\r\n <\/div>\r\n <div class=\"px-6\">${certsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section>\r\n <div class=\"text-center mb-3\">\r\n <h3 class=\"${sectionTitleClass} font-bold uppercase tracking-wider inline-block border-b-2 px-4 pb-0.5\" style=\"border-color: ${primaryColor}; color: ${primaryColor}\">${resumeData.customSectionTitle}<\/h3>\r\n <\/div>\r\n <div class=\"px-6\">${customSecHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-4 border-t pt-4\">\r\n ${skillTags.length > 0 ? `\r\n <section>\r\n <h4 class=\"font-bold uppercase tracking-wider mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.skills}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${skillsHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <section>\r\n <h4 class=\"font-bold uppercase tracking-wider mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.languages}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${langHtml}<\/div>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n } \r\n \r\n \/\/ --- 3. TWO-COLUMN LAYOUT ---\r\n else if (template === 'twocolumn') {\r\n preview.innerHTML = `\r\n <div class=\"grid grid-cols-3 gap-6\">\r\n \r\n <div class=\"col-span-1 pr-4 border-r border-slate-200\" style=\"border-color: ${primaryColor}25\">\r\n ${photoHtml ? `<div class=\"mb-4\">${photoHtml}<\/div>` : ''}\r\n <h1 class=\"text-2xl font-black text-slate-900 leading-none mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"font-bold mb-4\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n \r\n <div class=\"flex flex-col gap-3 mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">Contact<\/h4>\r\n ${resumeData.email ? `<div class=\"text-slate-700\"><strong>Email:<\/strong><br>${resumeData.email}<\/div>` : ''}\r\n ${resumeData.phone ? `<div class=\"text-slate-700\"><strong>Phone:<\/strong><br>${resumeData.phone}<\/div>` : ''}\r\n ${resumeData.location ? `<div class=\"text-slate-700\"><strong>Loc:<\/strong><br>${resumeData.location}<\/div>` : ''}\r\n ${resumeData.website ? `<div class=\"text-slate-700\"><strong>Web:<\/strong><br><a href=\"${resumeData.website}\" class=\"underline\">${resumeData.website.replace(\/(^\\w+:|^)\\\/\\\/\/, '')}<\/a><\/div>` : ''}\r\n <\/div>\r\n\r\n ${skillTags.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.skills}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${skillsHtml}<\/div>\r\n <\/div>\r\n ` : ''}\r\n\r\n ${langTags.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.languages}<\/h4>\r\n <div class=\"flex flex-wrap gap-1\">${langHtml}<\/div>\r\n <\/div>\r\n ` : ''}\r\n\r\n ${refsHtml ? `\r\n <div>\r\n <h4 class=\"font-bold uppercase tracking-wider border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.refs}<\/h4>\r\n ${refsHtml}\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n\r\n \r\n <div class=\"col-span-2\">\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-2\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.summary}<\/h3>\r\n <p class=\"text-slate-700 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.projects.length > 0 ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.projects}<\/h3>\r\n ${projectsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${certsHtml ? `\r\n <section class=\"mb-5\">\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.headings.certs}<\/h3>\r\n ${certsHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${customSecHtml ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase tracking-widest border-b pb-0.5 mb-3\" style=\"color: ${primaryColor}; border-color: ${primaryColor}30\">${resumeData.customSectionTitle}<\/h3>\r\n ${customSecHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 4. MINIMALIST TECH (Clean Monospace Look) ---\r\n else if (template === 'minimalist') {\r\n preview.innerHTML = `\r\n <div class=\"font-mono\">\r\n <header class=\"border-b border-dashed border-slate-400 pb-4 mb-4 flex justify-between items-start\">\r\n <div>\r\n <h1 class=\"text-2xl font-bold text-slate-900 uppercase\">${resumeData.name}<\/h1>\r\n <p class=\"text-sm tracking-tight text-slate-700\">${resumeData.title}<\/p>\r\n <\/div>\r\n <div class=\"text-right text-xs text-slate-600\">\r\n ${resumeData.email ? `<div>Email: ${resumeData.email}<\/div>` : ''}\r\n ${resumeData.phone ? `<div>Phone: ${resumeData.phone}<\/div>` : ''}\r\n ${resumeData.location ? `<div>Loc: ${resumeData.location}<\/div>` : ''}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-1\">> ${resumeData.headings.summary}<\/div>\r\n <p class=\"text-slate-600 leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.experience}<\/div>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.education}<\/div>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${skillTags.length > 0 ? `\r\n <section class=\"mb-4\">\r\n <div class=\"font-bold text-slate-800 uppercase mb-2\">> ${resumeData.headings.skills}<\/div>\r\n <p class=\"text-slate-600\">${skillTags.join(' | ')}<\/p>\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 5. CREATIVE BOLD ---\r\n else if (template === 'creative') {\r\n preview.innerHTML = `\r\n <div class=\"grid grid-cols-4 gap-6\">\r\n \r\n <div class=\"col-span-4 p-6 rounded-xl flex gap-5 items-center text-white\" style=\"background: ${primaryColor}\">\r\n ${photoHtml}\r\n <div>\r\n <h1 class=\"text-3xl font-black\">${resumeData.name}<\/h1>\r\n <p class=\"text-sm uppercase tracking-widest opacity-90 font-medium\">${resumeData.title}<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"col-span-1 flex flex-col gap-5 border-r border-slate-100 pr-3\">\r\n <div class=\"text-slate-700\">\r\n <h3 class=\"font-bold uppercase text-xs mb-2\" style=\"color: ${primaryColor}\">Contact<\/h3>\r\n <p class=\"text-xs break-all\">${resumeData.email}<\/p>\r\n <p class=\"text-xs mt-1\">${resumeData.phone}<\/p>\r\n <p class=\"text-xs mt-1\">${resumeData.location}<\/p>\r\n <\/div>\r\n\r\n ${skillTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-xs mb-2\" style=\"color: ${primaryColor}\">${resumeData.headings.skills}<\/h3>\r\n <div class=\"flex flex-col gap-1\">${skillTags.map(s => `<span class=\"text-xs\">• ${s}<\/span>`).join('')}<\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n\r\n <div class=\"col-span-3\">\r\n ${resumeData.summary ? `\r\n <div class=\"mb-4\">\r\n <p class=\"text-slate-700 text-sm italic leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/div>\r\n ` : ''}\r\n \r\n ${resumeData.experience.length > 0 ? `\r\n <div class=\"mb-5\">\r\n <h3 class=\"font-black border-b-2 pb-1 mb-3 uppercase text-xs\" style=\"color: ${primaryColor}; border-color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/div>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-black border-b-2 pb-1 mb-3 uppercase text-xs\" style=\"color: ${primaryColor}; border-color: ${primaryColor}\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 6. ACADEMIC \/ RESEARCH CV ---\r\n else if (template === 'academic') {\r\n preview.innerHTML = `\r\n <div class=\"font-serif\">\r\n <header class=\"text-center pb-4 border-b-2 border-double border-slate-900 mb-6\">\r\n <h1 class=\"text-3xl font-normal text-slate-950\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs italic text-slate-700 mt-1\">${resumeData.title}<\/p>\r\n <div class=\"text-xs mt-2 text-slate-600\">\r\n ${resumeData.email} | ${resumeData.phone} | ${resumeData.location}\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"flex flex-col gap-5 text-justify\">\r\n ${resumeData.summary ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">I. Research Profile<\/h3>\r\n <p class=\"text-slate-800\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">II. Appointments<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold border-b border-slate-900 pb-0.5 text-xs uppercase mb-2\">III. Education Background<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 7. COMPACT CONTENT-DENSE ---\r\n else if (template === 'compact') {\r\n preview.innerHTML = `\r\n <header class=\"flex justify-between items-center border-b pb-2 mb-3\">\r\n <div>\r\n <h1 class=\"text-xl font-bold text-slate-950\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs font-semibold\" style=\"color: ${primaryColor}\">${resumeData.title}<\/p>\r\n <\/div>\r\n <div class=\"text-right text-[10px] text-slate-600\">\r\n <div>${resumeData.email} | ${resumeData.phone}<\/div>\r\n <div>${resumeData.location} | ${resumeData.website}<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-2 leading-tight\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-2 gap-3 mt-1\">\r\n ${skillTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.skills}<\/h3>\r\n <p class=\"text-slate-600 text-[10px]\">${skillTags.join(', ')}<\/p>\r\n <\/div>\r\n ` : ''}\r\n ${langTags.length > 0 ? `\r\n <div>\r\n <h3 class=\"font-bold uppercase text-[10px] tracking-wider border-b pb-0.5 mb-1 text-slate-800\">${resumeData.headings.languages}<\/h3>\r\n <p class=\"text-slate-600 text-[10px]\">${langTags.join(', ')}<\/p>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 8. SLEEK STARTUP BADGE ---\r\n else if (template === 'startup') {\r\n preview.innerHTML = `\r\n <header class=\"mb-5 flex gap-4 items-center\">\r\n ${photoHtml}\r\n <div>\r\n <span class=\"inline-block px-2 py-0.5 text-[9px] font-bold text-white uppercase tracking-widest rounded mb-1\" style=\"background: ${primaryColor}\">Available Immediately<\/span>\r\n <h1 class=\"text-2xl font-black text-slate-900\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs font-semibold text-slate-600\">${resumeData.title}<\/p>\r\n <div class=\"flex gap-2 text-[10px] text-slate-400 mt-1\">\r\n <span>${resumeData.email}<\/span> • <span>${resumeData.phone}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-4\">\r\n ${resumeData.summary ? `\r\n <section class=\"p-3 bg-slate-50 rounded-lg border-l-4\" style=\"border-color: ${primaryColor}\">\r\n <p class=\"text-slate-600\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"font-bold text-xs uppercase mb-2 tracking-wider\" style=\"color: ${primaryColor}\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ --- 9. ELEGANT SERIF REGAL ---\r\n else if (template === 'elegant') {\r\n preview.innerHTML = `\r\n <div class=\"font-serif\">\r\n <header class=\"text-center pb-5 mb-5 border-b border-slate-200\">\r\n <h1 class=\"text-3xl text-slate-900 uppercase font-light tracking-widest mb-1\">${resumeData.name}<\/h1>\r\n <p class=\"text-xs tracking-widest text-slate-500 uppercase\">${resumeData.title}<\/p>\r\n <div class=\"text-[10px] text-slate-400 italic mt-3\">\r\n ${resumeData.email} • ${resumeData.phone} • ${resumeData.location}\r\n <\/div>\r\n <\/header>\r\n\r\n ${resumeData.summary ? `\r\n <section class=\"mb-5 text-center px-10\">\r\n <p class=\"text-slate-700 italic leading-relaxed\">${resumeData.summary}<\/p>\r\n <\/section>\r\n ` : ''}\r\n\r\n <div class=\"grid grid-cols-1 gap-5\">\r\n ${resumeData.experience.length > 0 ? `\r\n <section>\r\n <h3 class=\"text-center font-bold text-slate-850 border-b pb-1 mb-3 uppercase tracking-widest text-xs\">${resumeData.headings.experience}<\/h3>\r\n ${experienceHtml}\r\n <\/section>\r\n ` : ''}\r\n\r\n ${resumeData.education.length > 0 ? `\r\n <section>\r\n <h3 class=\"text-center font-bold text-slate-850 border-b pb-1 mb-3 uppercase tracking-widest text-xs\">${resumeData.headings.education}<\/h3>\r\n ${educationHtml}\r\n <\/section>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n }\r\n\r\n \/\/ --- Window Initializations ---\r\n window.onload = function() {\r\n loadInputValues();\r\n renderAllDynamicInputs();\r\n renderResume();\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-2ef8819 e-flex e-con-boxed e-con e-parent\" data-id=\"2ef8819\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c82374 elementor-widget elementor-widget-spacer\" data-id=\"5c82374\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-3da0264 e-flex e-con-boxed e-con e-parent\" data-id=\"3da0264\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-972b3b4 elementor-widget elementor-widget-wd_text_block\" data-id=\"972b3b4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wd_text_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"wd-text-block reset-last-child text-left\">\n\t\t\t\n\t\t\t<h2><span style=\"color: #000000;\">Land Your Dream Job with Our Free ATS Resume Builder<\/span><\/h2><div class=\"container\"><p class=\"lead-text\"><span style=\"color: #000000;\">Did you know that over 75% of resumes are filtered out by Applicant Tracking Systems (ATS) before they ever reach a human recruiter? We bridge the gap between your talent and global hiring systems.<\/span><\/p><p><span style=\"color: #000000;\">Our <strong>Professional Resume Maker<\/strong> is specifically designed to bypass rigid automated screening filters while presenting a stunning, highly polished premium aesthetic to human HR managers. Featuring 9 dynamic, fully customizable layouts, you can craft a world-class professional CV in less than 10 minutes\u2014completely free.<\/span><\/p><h2><span style=\"color: #000000;\">Why Choose Tendify's ATS-Friendly Resume Creator?<\/span><\/h2><p><span style=\"color: #000000;\">Unlike standard, generic word processors or restrictive visual CV tools that export heavy unreadable graphics, Tendify utilizes native, clean layout rendering. This ensures that parsing algorithms can easily index your text, skills, and chronological work experience.<\/span><\/p><p><span style=\"color: #000000;\"><\/span><\/p><table class=\"features-table\"><tbody><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">100% ATS-Compliant Layouts<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Every template is designed with geometric precision, ensuring structured headings and parsed fields that match top-tier ATS platforms used globally.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">9 Premium Design Ecosystems<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Seamlessly switch between 9 distinct professional aesthetics\u2014ranging from clean corporate minimal styles to high-impact modern layouts.<\/span><\/div><\/td><\/tr><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">Instant Live Preview & Scale<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Tweak your details and immediately visualize the physical print page with interactive scale, custom padding, and font typography controls.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">Data Privacy First<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Your private information belongs entirely to you. Tendify stores your data locally in your browser cache. No sign-ups, no databases, zero tracking.<\/span><\/div><\/td><\/tr><tr><td><div class=\"feature-title\"><span style=\"color: #000000;\">Full Localization Support<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Build your career profile effortlessly in both English (LTR) and Persian\/Arabic (RTL) formats with dedicated text direction switches.<\/span><\/div><\/td><td><div class=\"feature-title\"><span style=\"color: #000000;\">Seamless JSON Import\/Export<\/span><\/div><div class=\"feature-desc\"><span style=\"color: #000000;\">Save your master resume structure as a standalone backup file. Re-upload it anytime to instantly refresh or customize your CV.<\/span><\/div><\/td><\/tr><\/tbody><\/table><h2><span style=\"color: #000000;\">How to Build Your Professional Resume in 4 Simple Steps<\/span><\/h2><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 1<\/span><\/div><h3><span style=\"color: #000000;\">Input Your Professional Information<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Begin filling out the intuitive sidebar fields. Enter your full contact details, craft a compelling professional summary, map out your career timeline under Work Experience, and list your core technical skills.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 2<\/span><\/div><h3><span style=\"color: #000000;\">Choose Your Perfect Design Style<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Navigate to the \"Templates\" tab on the sidebar. Choose from 9 unique layout structural combinations. Switching templates will instantly re-arrange your data without losing entered text.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 3<\/span><\/div><h3><span style=\"color: #000000;\">Customize Typography, Padding, and Alignment<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Tailor the fine details using our visual configuration panel. Switch between crisp sans-serif or editorial serif font styles, adjust vertical elements or outer page margins, and toggle LTR\/RTL text direction.<\/span><\/p><\/div><div class=\"step-block\"><div class=\"step-number\"><span style=\"color: #000000;\">STEP 4<\/span><\/div><h3><span style=\"color: #000000;\">Export to Standard A4 PDF<\/span><\/h3><p style=\"margin-bottom: 0; font-size: 0.95rem;\"><span style=\"color: #000000;\">Click the Print \/ Export PDF button. The built-in workspace sets standard browser print parameters automatically. Save your layout directly to your system as a clean, searchable vector PDF optimized for AI scanners.<\/span><\/p><\/div><div class=\"tips-box\"><h2><span style=\"color: #000000;\">Pro-Tips for Maximizing Your ATS Score<\/span><\/h2><ul class=\"tips-list\"><li><span style=\"color: #000000;\"><strong>Use Exact Keywords:<\/strong> Cross-reference the target job description and inject identical technical terms directly into your \"Skills\" and \"Experience\" fields.<\/span><\/li><li><span style=\"color: #000000;\"><strong>Stick to Chronological Structures:<\/strong> Our templates prioritize structural timelines, which parsing bots heavily favor for calculating years of active experience.<\/span><\/li><li><span style=\"color: #000000;\"><strong>Keep Bullet Points Quantifiable:<\/strong> Instead of just listing responsibilities, write things like: <em>\"Increased operational efficiency by 24% over a 6-month cycle.\"<\/em><\/span><\/li><\/ul><\/div><div class=\"cta-section\"><h3><span style=\"color: #000000;\">Ready to craft your competitive edge?<\/span><\/h3><p style=\"font-size: 0.95rem; margin-bottom: 10px;\"><span style=\"color: #000000;\">Launch the interactive application and unlock global corporate opportunities with an elite-tier presentation.<\/span><\/p><\/div><\/div><p>\u00a0<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Professional Resume Maker is specifically designed to bypass rigid automated screening filters while presenting a stunning, highly polished premium aesthetic to human HR managers. Featuring 9 dynamic, fully customizable layouts, you can craft a world-class professional CV in less than 10 minutes\u2014completely free.<\/p>","protected":false},"author":15,"featured_media":18723,"comment_status":"open","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[767],"tags":[],"class_list":["post-18719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-b2b-online-tools"],"_links":{"self":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/comments?post=18719"}],"version-history":[{"count":4,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719\/revisions"}],"predecessor-version":[{"id":18724,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/posts\/18719\/revisions\/18724"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media\/18723"}],"wp:attachment":[{"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/media?parent=18719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/categories?post=18719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tendify.net\/ar\/wp-json\/wp\/v2\/tags?post=18719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}