منشئ السيرة الذاتية (CV) | اصنع سيرتك الذاتية اون لاين مجاناً :root { --primary-color: #2c3e50; /* كحلي */ --secondary-color: #3498db; /* أزرق */ --light-color: #f4f6f7; --dark-color: #333; --border-radius: 8px; --cv-font: 'Almarai', 'Segoe UI', Tahoma, sans-serif; } body { font-family: 'Cairo', sans-serif; margin: 0; background-color: var(--light-color); color: var(--dark-color); } .main-container { display: flex; min-height: 100vh; } .form-section { width: 45%; padding: 30px; background-color: #fff; overflow-y: auto; border-left: 1px solid #ddd; } .preview-section { width: 55%; padding: 30px; background-color: #f9f9f9; overflow-y: auto; } @media (max-width: 992px) { .main-container { flex-direction: column-reverse; } /* المعاينة أولاً على الموبايل */ .form-section, .preview-section { width: 100%; box-sizing: border-box; } } h1, h2 { color: var(--primary-color); text-align: center; } h3 { color: var(--secondary-color); border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 25px;} .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ccc; border-radius: var(--border-radius); box-sizing: border-box; } .form-group textarea { resize: vertical; min-height: 80px; } .dynamic-section { border: 1px solid #e0e0e0; padding: 15px; border-radius: var(--border-radius); margin-bottom: 10px; background-color: #fafafa; } .action-buttons { display: flex; gap: 10px; margin-top: 15px; } .action-buttons button { background-color: var(--secondary-color); color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: var(--border-radius); transition: background-color 0.3s; } .action-buttons button.danger { background-color: #e74c3c; } .action-buttons button:hover { opacity: 0.9; } .final-actions { text-align: center; margin-top: 30px; } .final-actions button { background-color: var(--primary-color); padding: 15px 30px; font-size: 1.1em; } .print-note { text-align: center; font-size: 0.9em; color: #777; margin-top: 10px; } /* --- CV Preview Styles --- */ #cv-preview-wrapper { background-color: white; box-shadow: 0 0 15px rgba(0,0,0,0.1); } #cv-preview { padding: 40px; font-family: var(--cv-font); } .cv-header { text-align: center; border-bottom: 2px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 20px;} .cv-header h1 { margin: 0; color: #111; font-size: 2.2em;} .cv-header p { margin: 5px 0 0; font-size: 1.2em; color: var(--secondary-color); } .cv-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; font-size: 0.9em; margin-top: 15px;} .cv-section h2 { font-size: 1.4em; color: var(--primary-color); border-bottom: 2px solid var(--secondary-color); padding-bottom: 5px; margin: 25px 0 15px; text-align: right;} .cv-item { margin-bottom: 15px; } .cv-item h3 { font-size: 1.1em; margin: 0; padding: 0; border: none; color: #333; } .cv-item .sub-heading { color: #555; margin: 2px 0 5px; font-size: 0.95em; } .cv-item ul { padding-right: 20px; margin: 5px 0; } .cv-skills ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .cv-skills li { background: #eaf3fa; color: var(--secondary-color); padding: 5px 12px; border-radius: 15px; font-size: 0.9em;} /* --- Print Styles - النسخة المصححة --- */ @media print { body { margin: 0; background: #fff; } .form-section, .preview-section h2, .final-actions, .print-note { display: none; } .preview-section { width: 100%; padding: 0; } #cv-preview-wrapper { box-shadow: none; } } معاينة مباشرة منشئ السيرة الذاتية المعلومات الشخصية الاسم الكامل المسمى الوظيفي معلومات الاتصال رقم الهاتف البريد الإلكتروني العنوان الملخص الاحترافي الخبرة العملية إضافة خبرة التعليم إضافة تعليم المهارات طباعة / حفظ كـ PDF عند الطباعة، اختر "Save as PDF" من قائمة الطابعات لحفظ الملف. document.addEventListener('DOMContentLoaded', () => { const cvGeneratorApp = { elements: { form: document.getElementById('cv-form'), preview: document.getElementById('cv-preview'), addExpBtn: document.getElementById('add-experience-btn'), addEduBtn: document.getElementById('add-education-btn'), expFields: document.getElementById('experience-fields'), eduFields: document.getElementById('education-fields'), printBtn: document.getElementById('print-cv-btn'), }, init() { this.attachEventListeners(); this.addExperienceField(); this.addEducationField(); this.updatePreview(); }, attachEventListeners() { this.elements.form.addEventListener('input', () => this.updatePreview()); this.elements.addExpBtn.addEventListener('click', () => this.addExperienceField()); this.elements.addEduBtn.addEventListener('click', () => this.addEducationField()); this.elements.printBtn.addEventListener('click', () => window.print()); this.elements.expFields.addEventListener('click', e => this.removeDynamicField(e)); this.elements.eduFields.addEventListener('click', e => this.removeDynamicField(e)); }, addExperienceField() { const div = document.createElement('div'); div.className = 'dynamic-section'; div.innerHTML = ` إزالة `; this.elements.expFields.appendChild(div); this.updatePreview(); div.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, addEducationField() { const div = document.createElement('div'); div.className = 'dynamic-section'; div.innerHTML = ` إزالة `; this.elements.eduFields.appendChild(div); this.updatePreview(); div.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, removeDynamicField(e) { if (e.target.classList.contains('remove-btn')) { e.target.closest('.dynamic-section').remove(); this.updatePreview(); } }, updatePreview() { const data = this.getFormData(); this.elements.preview.innerHTML = this.generateCVHtml(data); }, getFormData() { return { fullName: document.getElementById('full-name').value, jobTitle: document.getElementById('job-title').value, phone: document.getElementById('phone').value, email: document.getElementById('email').value, address: document.getElementById('address').value, summary: document.getElementById('summary').value, experience: Array.from(this.elements.expFields.children).map(div => ({ title: div.querySelector('.exp-title').value, company: div.querySelector('.exp-company').value, dates: div.querySelector('.exp-dates').value, desc: div.querySelector('.exp-desc').value.split('\n').filter(line => line.trim() !== ''), })), education: Array.from(this.elements.eduFields.children).map(div => ({ degree: div.querySelector('.edu-degree').value, school: div.querySelector('.edu-school').value, dates: div.querySelector('.edu-dates').value, })), skills: document.getElementById('skills').value.split(',').map(s => s.trim()).filter(s => s) }; }, generateCVHtml(data) { const sanitize = (str) => str ? str.replace(//g, ">") : ''; const experienceHtml = data.experience.map(exp => ` ${sanitize(exp.title) || 'المسمى الوظيفي'} ${sanitize(exp.company) || 'اسم الشركة'} | ${sanitize(exp.dates) || 'الفترة'} ${exp.desc.length > 0 ? `${exp.desc.map(d => `${sanitize(d)}`).join('')}` : ''} `).join(''); const educationHtml = data.education.map(edu => ` ${sanitize(edu.degree) || 'الدرجة العلمية'} ${sanitize(edu.school) || 'المؤسسة التعليمية'} | ${sanitize(edu.dates) || 'التاريخ'} `).join(''); const skillsHtml = data.skills.length > 0 ? `${data.skills.map(s => `${sanitize(s)}`).join('')}` : ''; return ` ${sanitize(data.fullName) || 'الاسم الكامل'} ${sanitize(data.jobTitle) || 'المسمى الوظيفي'} ${data.phone ? `${sanitize(data.phone)}` : ''} ${data.email ? `${sanitize(data.email)}` : ''} ${data.address ? `${sanitize(data.address)}` : ''} الملخص الاحترافي ${sanitize(data.summary).replace(/\n/g, '') || 'اكتب ملخصك هنا...'} ${experienceHtml ? `الخبرة العملية${experienceHtml}` : ''} ${educationHtml ? `التعليم${educationHtml}` : ''} ${skillsHtml ? `المهارات${skillsHtml}` : ''} `; } }; cvGeneratorApp.init(); });
