commit f884871430f274da50269a7868db658d1d4f6986 Author: Rasul702 Date: Fri May 8 19:49:19 2026 +0300 Add files via upload diff --git a/index.html b/index.html new file mode 100644 index 0000000..044cdd9 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + CV Builder + + + + +
+
+

CV Builder

+

+ Created by Rasul Mushtaq Hussien | Department of Data Science, College of Excellence, University of Baghdad +

+
+ +
+ +
+ +
+

Personal Info

+ + + + + + + + + + + + + +

Custom Sections

+
+ + + +
+ +
+ +
+ Profile Photo + +

Mohammad Ali

+

Job Title

+

+ Baghdad, Iraq + mohammad.ali@email.com + +123 456 7890 +

+
+ +
+
+

Summary

+

Experienced software engineer skilled in web development and project management.

+
+
+

Experience

+

Software Engineer at Google (2020 - present)

+
+
+

Education

+

B.Sc. Computer Science - University of Baghdad (2015 - 2019)

+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2beef06 --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ +document.getElementById("theme-toggle").onclick = () => { + document.documentElement.dataset.theme = + document.documentElement.dataset.theme === "dark" ? "light" : "dark"; +}; + +const bind = (input, preview) => { + input.addEventListener("input", () => { + preview.textContent = input.value; + }); +}; + +bind(nameInput = document.getElementById("name-input"), + document.getElementById("preview-name")); + +bind(document.getElementById("role-input"), + document.getElementById("preview-role")); + +bind(document.getElementById("email-input"), + document.getElementById("preview-email")); + +bind(document.getElementById("phone-input"), + document.getElementById("preview-phone")); + +bind(document.getElementById("location-input"), + document.getElementById("preview-location")); + +bind(document.getElementById("about-input"), + document.getElementById("preview-about")); + +bind(document.getElementById("exp-input"), + document.getElementById("preview-exp")); + +bind(document.getElementById("edu-input"), + document.getElementById("preview-edu")); + +document.getElementById("photo-input").addEventListener("change", e => { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = () => { + const img = document.getElementById("preview-photo"); + img.src = reader.result; + img.style.display = "block"; + }; + reader.readAsDataURL(file); +}); + +document.getElementById("add-section").onclick = () => { + const id = Date.now(); + + const editor = document.createElement("div"); + editor.className = "custom-block"; + editor.innerHTML = ` + + + + `; + + const preview = document.createElement("div"); + preview.className = "section"; + preview.innerHTML = `

`; + + const [title, text, remove] = editor.children; + + title.oninput = () => preview.querySelector("h3").textContent = title.value; + text.oninput = () => preview.querySelector("p").textContent = text.value; + + remove.onclick = () => { + editor.remove(); + preview.remove(); + }; + + document.getElementById("custom-editor").appendChild(editor); + document.getElementById("preview-content").appendChild(preview); +}; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d5d0db3 --- /dev/null +++ b/style.css @@ -0,0 +1,264 @@ +:root { + --bg-color: #1a1b26; + --card-bg: #242535; + --text-color: #ffffff; + --text-secondary: #a0a1b3; + --accent-color: #4a6cf7; + --border-color: #3b3c4f; + --input-bg: #2a2b3d; +} + +[data-theme="light"] { + --bg-color: #f4f7f6; + --card-bg: #ffffff; + --text-color: #222222; + --text-secondary: #555555; + --accent-color: #27ae60; + --border-color: #e0e0e0; + --input-bg: #f9f9f9; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Segoe UI", system-ui, sans-serif; + transition: background-color 0.3s, color 0.3s; +} + +body { + background-color: var(--bg-color); + color: var(--text-color); + padding: 20px; + line-height: 1.5; +} + +.app-header { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto 30px; +} + +.app-header h1 { + font-size: 1.9rem; + font-weight: 700; +} + +.creator-credit { + font-size: 0.9rem; + color: var(--text-secondary); +} + +.creator-credit strong { + color: var(--accent-color); +} + +#theme-toggle { + background: var(--card-bg); + color: var(--text-color); + border: 1px solid var(--border-color); + padding: 10px 16px; + border-radius: 8px; + cursor: pointer; +} + +.container { + display: flex; + gap: 30px; + max-width: 1200px; + margin: 0 auto; +} + +.card { + background: var(--card-bg); + padding: 30px; + border-radius: 16px; + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); +} + +.editor { width: 40%; } +.preview { width: 60%; } + +.editor h2 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.editor h3 { + margin: 20px 0 10px; + color: var(--text-secondary); +} + +input, +textarea { + width: 100%; + padding: 14px; + margin-bottom: 14px; + border-radius: 8px; + border: 1px solid var(--border-color); + background: var(--input-bg); + color: var(--text-color); +} + +textarea { + resize: vertical; + min-height: 100px; +} + +input:focus, +textarea:focus { + outline: none; + border-color: var(--accent-color); +} + +#add-section { + width: 100%; + padding: 12px; + border: 2px dashed var(--border-color); + background: transparent; + color: var(--text-secondary); + border-radius: 8px; + cursor: pointer; +} + +.custom-block { + border: 1px solid var(--border-color); + padding: 14px; + border-radius: 10px; + margin-bottom: 12px; +} + +.custom-block button { + background: none; + border: none; + color: #ff5c5c; + cursor: pointer; + margin-top: 6px; +} + +.export-btn { + margin-top: 25px; + width: 100%; + padding: 14px; + background-color: var(--accent-color); + color: white; + border: none; + cursor: pointer; + font-weight: 700; + border-radius: 10px; +} + +.header { + border-bottom: 2px solid var(--border-color); + padding-bottom: 18px; + margin-bottom: 26px; +} + +#preview-photo { + width: 110px; + height: 110px; + border-radius: 50%; + object-fit: cover; + border: 3px solid var(--accent-color); + margin-bottom: 14px; + display: none; +} + +#preview-photo[src] { + display: block; +} + +.header h1 { + font-size: 2.4rem; + font-weight: 700; + margin-bottom: 6px; +} + +#preview-role { + font-size: 1.15rem; + color: var(--text-secondary); + margin-bottom: 14px; +} + +.contact-info { + color: var(--text-secondary); + font-size: 0.95rem; +} + +.contact-info span { + margin-right: 18px; +} + +.section { + margin-bottom: 30px; +} + +.section h3 { + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 700; + letter-spacing: 1px; + color: var(--accent-color); + margin-bottom: 12px; +} + +.section p { + line-height: 1.65; + color: var(--text-secondary); + white-space: pre-wrap; +} + +@media print { + + @page { + margin: 1.5cm; + } + + body { + background: white; + color: black; + padding: 0; + } + + .app-header, + .editor, + #theme-toggle, + #add-section, + .export-btn { + display: none !important; + } + + .container { + display: block; + max-width: 100%; + margin: 0; + } + + .preview { + width: 100%; + box-shadow: none; + padding: 0; + background: white; + } + + .header { + border-bottom: 2px solid #ccc; + } + + .section h3, + .header h1 { + color: black; + } + + .section p, + .contact-info, + #preview-role { + color: black !important; + } + + #preview-photo:not([src]) { + display: none !important; + } +} \ No newline at end of file