mirror of
https://github.com/r7254028-coder/cv-builder.git
synced 2026-07-21 14:34:44 +00:00
Add files via upload
This commit is contained in:
Rasul702
79
index.html
Normal file
79
index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CV Builder</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="app-header">
|
||||
<div>
|
||||
<h1>CV Builder</h1>
|
||||
<p class="creator-credit">
|
||||
Created by <strong>Rasul Mushtaq Hussien</strong> | <span>Department of Data Science, College of Excellence, University of Baghdad</span>
|
||||
</p>
|
||||
</div>
|
||||
<button id="theme-toggle">Toggle Theme</button>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<section class="editor card">
|
||||
<h2>Personal Info</h2>
|
||||
|
||||
<input type="file" id="photo-input" accept="image/*">
|
||||
|
||||
<input id="name-input" placeholder="Full Name">
|
||||
<input id="role-input" placeholder="Job Title">
|
||||
<input id="email-input" placeholder="Email">
|
||||
<input id="phone-input" placeholder="Phone">
|
||||
<input id="location-input" placeholder="Location (e.g., Baghdad, Iraq)">
|
||||
|
||||
<textarea id="about-input" placeholder="Summary"></textarea>
|
||||
<textarea id="exp-input" placeholder="Work Experience"></textarea>
|
||||
<textarea id="edu-input" placeholder="Education"></textarea>
|
||||
|
||||
<h3>Custom Sections</h3>
|
||||
<div id="custom-editor"></div>
|
||||
<button id="add-section">+ Add Section</button>
|
||||
|
||||
<button class="export-btn" onclick="window.print()">Export PDF</button>
|
||||
</section>
|
||||
|
||||
<section class="preview card" id="cv-preview">
|
||||
|
||||
<div class="header">
|
||||
<img id="preview-photo" alt="Profile Photo">
|
||||
|
||||
<h1 id="preview-name">Mohammad Ali</h1>
|
||||
<p id="preview-role">Job Title</p>
|
||||
<p class="contact-info">
|
||||
<span id="preview-location">Baghdad, Iraq</span>
|
||||
<span id="preview-email">mohammad.ali@email.com</span>
|
||||
<span id="preview-phone">+123 456 7890</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content" id="preview-content">
|
||||
<div class="section">
|
||||
<h3>Summary</h3>
|
||||
<p id="preview-about">Experienced software engineer skilled in web development and project management.</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Experience</h3>
|
||||
<p id="preview-exp">Software Engineer at Google (2020 - present)</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Education</h3>
|
||||
<p id="preview-edu">B.Sc. Computer Science - University of Baghdad (2015 - 2019)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
76
script.js
Normal file
76
script.js
Normal file
@@ -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 = `
|
||||
<input placeholder="Section Title">
|
||||
<textarea placeholder="Content"></textarea>
|
||||
<button>Remove</button>
|
||||
`;
|
||||
|
||||
const preview = document.createElement("div");
|
||||
preview.className = "section";
|
||||
preview.innerHTML = `<h3></h3><p></p>`;
|
||||
|
||||
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);
|
||||
};
|
||||
264
style.css
Normal file
264
style.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user