Spaces:

sakthi07
/

resumebuilder

Configuration error

App Files Files Community

resumebuilder / templates /create_projects.html

sakthi07

pushing to hugging face

ab028ac 4 months ago

raw

history blame contribute delete

19 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Projects - AI Resume Builder</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	body {
	background-color: #f8f9fa;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	.form-container {
	max-width: 900px;
	margin: 40px auto;
	padding: 30px;
	background: white;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	.section-title {
	color: #2c3e50;
	margin-bottom: 30px;
	text-align: center;
	font-weight: 600;
	}
	.btn-logout {
	position: absolute;
	top: 20px;
	right: 20px;
	}
	.form-label {
	font-weight: 500;
	margin-bottom: 8px;
	color: #495057;
	}
	.form-control:focus {
	border-color: #4e73df;
	box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
	}
	.navigation-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e9ecef;
	}
	.error-message {
	color: #e74c3c;
	font-size: 0.875rem;
	margin-top: 5px;
	}
	.progress-indicator {
	margin-bottom: 30px;
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	}
	.progress-indicator span {
	display: inline-block;
	margin: 0 10px;
	}
	.progress-indicator span.active {
	color: #4e73df;
	font-weight: 600;
	}
	.project-item {
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;
	}
	.project-item.has-error {
	border-color: #e74c3c;
	background-color: #fdf2f2;
	}
	.btn-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	color: #e74c3c;
	background: white;
	border: 1px solid #e74c3c;
	padding: 5px 10px;
	border-radius: 5px;
	transition: all 0.3s;
	}
	.btn-remove:hover {
	color: white;
	background-color: #e74c3c;
	}
	.btn-add {
	margin-bottom: 20px;
	background-color: #28a745;
	border: none;
	color: white;
	}
	.btn-add:hover {
	background-color: #218838;
	color: white;
	}
	.present-checkbox {
	margin-top: 10px;
	}
	.date-inputs {
	display: flex;
	gap: 10px;
	}
	.date-inputs .form-control {
	flex: 1;
	}
	.empty-state {
	text-align: center;
	padding: 40px;
	color: #6c757d;
	}
	.empty-state i {
	font-size: 3rem;
	margin-bottom: 20px;
	color: #dee2e6;
	}
	.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	}
	.optional-badge {
	background-color: #6c757d;
	color: white;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	margin-left: 5px;
	}
	</style>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
	<a class="navbar-brand" href="{{ url_for('profile') }}">AI Resume Builder</a>
	<div class="ms-auto">
	<a href="{{ url_for('logout') }}" class="btn btn-outline-light">
	<i class="fas fa-sign-out-alt"></i> Logout
	</a>
	</div>
	</div>
	</nav>

	<div class="container">
	<div class="form-container">
	<div class="progress-indicator">
	<span>Introduction</span>
	<span>→</span>
	<span>Profile Summary</span>
	<span>→</span>
	<span>Work Experience</span>
	<span>→</span>
	<span class="active">Projects</span>
	<span>→</span>
	<span>Education</span>
	<span>→</span>
	<span>Skills</span>
	<span>→</span>
	<span>Achievements</span>
	<span>→</span>
	<span>Preview</span>
	</div>

	<div class="section-header">
	<h2 class="section-title mb-0">Projects</h2>
	<button type="button" class="btn btn-add" onclick="addProject()">
	<i class="fas fa-plus"></i> Add Project
	</button>
	</div>

	{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
	{% for category, message in messages %}
	<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
	{{ message }}
	<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
	</div>
	{% endfor %}
	{% endif %}
	{% endwith %}

	<form method="POST" action="{{ url_for('create_projects') }}" id="projectsForm">
	<div id="projectsContainer">
	{% if form_data and form_data.projects %}
	{% for project in form_data.projects %}
	<div class="project-item">
	<button type="button" class="btn btn-sm btn-remove" onclick="removeProject(this)">
	<i class="fas fa-times"></i>
	</button>

	<div class="row">
	<div class="col-md-6 mb-3">
	<label class="form-label">Organization <span class="optional-badge">Optional</span></label>
	<input type="text" class="form-control" name="organization[]" value="{{ project.organization }}">
	</div>
	<div class="col-md-6 mb-3">
	<label class="form-label required">Project Title</label>
	<input type="text" class="form-control" name="title[]" value="{{ project.title }}" required>
	</div>
	</div>

	<div class="row">
	<div class="col-md-6 mb-3">
	<label class="form-label required">Start Date</label>
	<div class="date-inputs">
	<select class="form-control" name="start_month[]" required>
	<option value="">Month</option>
	{% for i in range(1, 13) %}
	<option value="{{ i }}" {% if project.start_month == i %}selected{% endif %}>
	{{ i }}
	</option>
	{% endfor %}
	</select>
	<select class="form-control" name="start_year[]" required>
	<option value="">Year</option>
	{% for year in range(1980, current_year + 1) %}
	<option value="{{ year }}" {% if project.start_year == year %}selected{% endif %}>
	{{ year }}
	</option>
	{% endfor %}
	</select>
	</div>
	</div>
	<div class="col-md-6 mb-3">
	<label class="form-label">End Date</label>
	<div class="date-inputs">
	<select class="form-control" name="end_month[]" {% if project.is_present %}disabled{% endif %}>
	<option value="">Month</option>
	{% for i in range(1, 13) %}
	<option value="{{ i }}" {% if project.end_month == i %}selected{% endif %}>
	{{ i }}
	</option>
	{% endfor %}
	</select>
	<select class="form-control" name="end_year[]" {% if project.is_present %}disabled{% endif %}>
	<option value="">Year</option>
	{% for year in range(1980, current_year + 1) %}
	<option value="{{ year }}" {% if project.end_year == year %}selected{% endif %}>
	{{ year }}
	</option>
	{% endfor %}
	</select>
	</div>
	<div class="present-checkbox">
	<div class="form-check">
	<input class="form-check-input" type="checkbox" name="is_present[]" id="present_project_{{ loop.index0 }}"
	{% if project.is_present %}checked{% endif %}
	onchange="toggleEndDate(this)">
	<label class="form-check-label" for="present_project_{{ loop.index0 }}">
	Present
	</label>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-3">
	<label class="form-label">Description</label>
	<textarea class="form-control" name="remarks[]" rows="3" placeholder="Describe the project, your role, technologies used, and outcomes...">{{ project.remarks }}</textarea>
	</div>
	</div>
	{% endfor %}
	{% else %}
	<div class="empty-state">
	<i class="fas fa-project-diagram"></i>
	<h5>No Projects Added</h5>
	<p>Click "Add Project" to add your project experience</p>
	</div>
	{% endif %}
	</div>

	<div class="navigation-buttons">
	<div>
	<a href="{{ url_for('create_work_experience') }}" class="btn btn-outline-secondary">
	<i class="fas fa-arrow-left"></i> Back
	</a>
	<button type="button" class="btn btn-outline-primary" onclick="skipToEducation()">
	Skip <i class="fas fa-forward"></i>
	</button>
	</div>
	<div>
	<button type="submit" class="btn btn-primary">
	Next <i class="fas fa-arrow-right"></i>
	</button>
	</div>
	</div>
	</form>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<script>
	let projectCount = {{ form_data.projects\|length if form_data and form_data.projects else 0 }};

	function addProject() {
	const container = document.getElementById('projectsContainer');
	const emptyState = container.querySelector('.empty-state');
	if (emptyState) {
	emptyState.remove();
	}

	const div = document.createElement('div');
	div.className = 'project-item';
	div.innerHTML = `
	<button type="button" class="btn btn-sm btn-remove" onclick="removeProject(this)">
	<i class="fas fa-times"></i>
	</button>

	<div class="row">
	<div class="col-md-6 mb-3">
	<label class="form-label">Organization <span class="optional-badge">Optional</span></label>
	<input type="text" class="form-control" name="organization[]">
	</div>
	<div class="col-md-6 mb-3">
	<label class="form-label required">Project Title</label>
	<input type="text" class="form-control" name="title[]" required>
	</div>
	</div>

	<div class="row">
	<div class="col-md-6 mb-3">
	<label class="form-label required">Start Date</label>
	<div class="date-inputs">
	<select class="form-control" name="start_month[]" required>
	<option value="">Month</option>
	${generateMonthOptions()}
	</select>
	<select class="form-control" name="start_year[]" required>
	<option value="">Year</option>
	${generateYearOptions()}
	</select>
	</div>
	</div>
	<div class="col-md-6 mb-3">
	<label class="form-label">End Date</label>
	<div class="date-inputs">
	<select class="form-control" name="end_month[]">
	<option value="">Month</option>
	${generateMonthOptions()}
	</select>
	<select class="form-control" name="end_year[]">
	<option value="">Year</option>
	${generateYearOptions()}
	</select>
	</div>
	<div class="present-checkbox">
	<div class="form-check">
	<input class="form-check-input" type="checkbox" name="is_present[]" id="present_project_${projectCount}" onchange="toggleEndDate(this)">
	<label class="form-check-label" for="present_project_${projectCount}">
	Present
	</label>
	</div>
	</div>
	</div>
	</div>

	<div class="mb-3">
	<label class="form-label">Description</label>
	<textarea class="form-control" name="remarks[]" rows="3" placeholder="Describe the project, your role, technologies used, and outcomes..."></textarea>
	</div>
	`;

	container.appendChild(div);
	projectCount++;
	}

	function removeProject(button) {
	const item = button.closest('.project-item');
	item.remove();

	const container = document.getElementById('projectsContainer');
	const remainingItems = container.querySelectorAll('.project-item');

	if (remainingItems.length === 0) {
	container.innerHTML = `
	<div class="empty-state">
	<i class="fas fa-project-diagram"></i>
	<h5>No Projects Added</h5>
	<p>Click "Add Project" to add your project experience</p>
	</div>
	`;
	}
	}

	function toggleEndDate(checkbox) {
	const item = checkbox.closest('.project-item');
	const endMonth = item.querySelector('select[name="end_month[]"]');
	const endYear = item.querySelector('select[name="end_year[]"]');

	if (checkbox.checked) {
	endMonth.disabled = true;
	endYear.disabled = true;
	endMonth.value = '';
	endYear.value = '';
	} else {
	endMonth.disabled = false;
	endYear.disabled = false;
	}
	}

	function skipToEducation() {
	document.getElementById('projectsForm').action = '{{ url_for("create_education") }}';
	document.getElementById('projectsForm').submit();
	}

	function generateMonthOptions() {
	let options = '';
	for (let i = 1; i <= 12; i++) {
	options += `<option value="${i}">${i}</option>`;
	}
	return options;
	}

	function generateYearOptions() {
	const currentYear = new Date().getFullYear();
	let options = '';
	for (let year = 1980; year <= currentYear + 1; year++) {
	options += `<option value="${year}">${year}</option>`;
	}
	return options;
	}
	</script>
	</body>
	</html>