Spaces:

sakthi07
/

resumebuilder

Configuration error

App Files Files Community

resumebuilder / templates /create_preview.html

sakthi07

pushing to hugging face

ab028ac 4 months ago

raw

history blame contribute delete

21.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Preview Profile - 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">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.css">
	<style>
	body {
	background-color: #f8f9fa;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}
	.preview-container {
	max-width: 1200px;
	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;
	}
	.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;
	}
	.preview-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-bottom: 30px;
	}
	.reorder-panel {
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	}
	.reorder-panel h5 {
	color: #495057;
	margin-bottom: 15px;
	}
	.help-text {
	font-size: 0.875rem;
	color: #6c757d;
	margin-bottom: 15px;
	}
	.sortable-list {
	list-style: none;
	padding: 0;
	}
	.sortable-item {
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 12px 15px;
	margin-bottom: 8px;
	cursor: move;
	display: flex;
	align-items: center;
	transition: all 0.3s;
	}
	.sortable-item:hover {
	border-color: #4e73df;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.sortable-item.dragging {
	opacity: 0.5;
	}
	.sortable-item.sortable-ghost {
	background: #f8f9fa;
	}
	.sortable-item .drag-handle {
	color: #6c757d;
	margin-right: 10px;
	}
	.sortable-item.fixed {
	background-color: #e9ecef;
	cursor: not-allowed;
	opacity: 0.7;
	}
	.sortable-item.fixed .drag-handle {
	display: none;
	}
	.preview-panel {
	background-color: #ffffff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 30px;
	min-height: 600px;
	}
	.preview-section {
	margin-bottom: 25px;
	padding: 15px;
	border-left: 4px solid #4e73df;
	background-color: #f8f9fa;
	}
	.preview-section h5 {
	color: #2c3e50;
	margin-bottom: 15px;
	font-weight: 600;
	}
	.preview-section h6 {
	color: #495057;
	margin-bottom: 10px;
	}
	.contact-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
	gap: 10px;
	}
	.contact-item {
	display: flex;
	align-items: center;
	color: #495057;
	font-size: 0.9rem;
	}
	.contact-item i {
	margin-right: 5px;
	width: 16px;
	}
	.experience-item, .project-item, .education-item {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #dee2e6;
	}
	.experience-item:last-child, .project-item:last-child, .education-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
	}
	.date-range {
	color: #6c757d;
	font-size: 0.9rem;
	font-weight: 500;
	}
	.skills-grid, .achievements-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}
	.skill-tag, .achievement-tag {
	background-color: #4e73df;
	color: white;
	padding: 4px 12px;
	border-radius: 15px;
	font-size: 0.85rem;
	}
	.achievement-tag {
	background-color: #28a745;
	}
	.action-buttons {
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e9ecef;
	}
	.empty-state {
	text-align: center;
	color: #6c757d;
	font-style: italic;
	padding: 20px;
	}
	.ai-generated-badge {
	background-color: #17a2b8;
	color: white;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	margin-left: 10px;
	}
	@media (max-width: 768px) {
	.preview-layout {
	grid-template-columns: 1fr;
	}
	.contact-info {
	flex-direction: column;
	align-items: flex-start;
	}
	}
	</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="preview-container">
	<div class="progress-indicator">
	<span>Introduction</span>
	<span>→</span>
	<span>Profile Summary</span>
	<span>→</span>
	<span>Work Experience</span>
	<span>→</span>
	<span>Projects</span>
	<span>→</span>
	<span>Education</span>
	<span>→</span>
	<span>Skills</span>
	<span>→</span>
	<span>Achievements</span>
	<span>→</span>
	<span class="active">Preview</span>
	</div>

	<h2 class="section-title">Preview Your Profile</h2>

	{% 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 %}

	<div class="preview-layout">
	<div class="reorder-panel">
	<h5><i class="fas fa-arrows-alt"></i> Arrange Your Sections</h5>
	<p class="help-text">
	Drag and drop sections to reorder them. Introduction and Profile Summary are fixed at the top.
	</p>
	<ul id="sortableSections" class="sortable-list">
	<li class="sortable-item fixed" data-section="introduction">
	<i class="fas fa-user"></i> Introduction
	</li>
	<li class="sortable-item fixed" data-section="profile_summary">
	<i class="fas fa-file-alt"></i> Profile Summary
	</li>
	{% if work_experiences %}
	<li class="sortable-item" data-section="work_experience">
	<i class="fas fa-grip-vertical drag-handle"></i>
	<i class="fas fa-briefcase"></i> Work Experience
	</li>
	{% endif %}
	{% if projects %}
	<li class="sortable-item" data-section="projects">
	<i class="fas fa-grip-vertical drag-handle"></i>
	<i class="fas fa-project-diagram"></i> Projects
	</li>
	{% endif %}
	{% if educations %}
	<li class="sortable-item" data-section="education">
	<i class="fas fa-grip-vertical drag-handle"></i>
	<i class="fas fa-graduation-cap"></i> Education
	</li>
	{% endif %}
	{% if skills %}
	<li class="sortable-item" data-section="skills">
	<i class="fas fa-grip-vertical drag-handle"></i>
	<i class="fas fa-tools"></i> Skills
	</li>
	{% endif %}
	{% if achievements %}
	<li class="sortable-item" data-section="achievements">
	<i class="fas fa-grip-vertical drag-handle"></i>
	<i class="fas fa-trophy"></i> Achievements
	</li>
	{% endif %}
	</ul>
	</div>

	<div class="preview-panel">
	<div id="previewContent">
	<!-- Introduction Section -->
	{% if intro %}
	<div class="preview-section" data-section="introduction">
	<h5><i class="fas fa-user"></i> Introduction</h5>
	<h3 class="text-center mb-3">{{ intro.name }}</h3>
	<div class="contact-info">
	<div class="contact-item">
	<i class="fas fa-envelope"></i> {{ intro.email }}
	</div>
	<div class="contact-item">
	<i class="fas fa-phone"></i> {{ intro.phone }}
	</div>
	{% if intro.linkedin %}
	<div class="contact-item">
	<i class="fab fa-linkedin"></i> LinkedIn
	</div>
	{% endif %}
	{% if intro.github %}
	<div class="contact-item">
	<i class="fab fa-github"></i> GitHub
	</div>
	{% endif %}
	{% if intro.website %}
	<div class="contact-item">
	<i class="fas fa-globe"></i> Website
	</div>
	{% endif %}
	</div>
	</div>
	{% endif %}

	<!-- Profile Summary Section -->
	{% if summary %}
	<div class="preview-section" data-section="profile_summary">
	<h5>
	<i class="fas fa-file-alt"></i> Profile Summary
	{% if summary.ai_generated %}
	<span class="ai-generated-badge">AI Generated</span>
	{% endif %}
	</h5>
	<p>{{ summary.summary }}</p>
	</div>
	{% endif %}

	<!-- Dynamic sections will be inserted here based on order -->
	</div>
	</div>
	</div>

	<form method="POST" action="{{ url_for('create_preview') }}" id="previewForm">
	<input type="hidden" name="section_order" id="sectionOrderInput" value='[]'>

	<div class="action-buttons">
	<div>
	<a href="{{ url_for('create_achievements') }}" class="btn btn-outline-secondary">
	<i class="fas fa-arrow-left"></i> Back
	</a>
	</div>
	<div>
	<button type="button" class="btn btn-danger" onclick="confirmClear()">
	<i class="fas fa-trash"></i> Clear All
	</button>
	<button type="submit" name="action" value="submit" class="btn btn-primary">
	<i class="fas fa-check"></i> Submit Profile
	</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 src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
	<script>
	// Initialize sortable
	const sortable = new Sortable(document.getElementById('sortableSections'), {
	animation: 150,
	ghostClass: 'sortable-ghost',
	dragClass: 'dragging',
	handle: '.drag-handle',
	filter: '.fixed',
	onEnd: function(evt) {
	updateSectionOrder();
	updatePreview();
	}
	});

	// Get all sections data
	const sectionsData = {
	introduction: {% if intro %}true{% else %}false{% endif %},
	profile_summary: {% if summary %}true{% else %}false{% endif %},
	work_experience: {% if work_experiences %}true{% else %}false{% endif %},
	projects: {% if projects %}true{% else %}false{% endif %},
	education: {% if educations %}true{% else %}false{% endif %},
	skills: {% if skills %}true{% else %}false{% endif %},
	achievements: {% if achievements %}true{% else %}false{% endif %}
	};

	// Render templates for each section
	const sectionTemplates = {
	work_experience: `
	{% for exp in work_experiences %}
	<div class="experience-item">
	<h6>{{ exp.title }}</h6>
	<p class="text-muted mb-1">{{ exp.organization }}</p>
	<p class="date-range mb-2">
	{{ exp.start_month }}/{{ exp.start_year }} -
	{% if exp.end_year %}{{ exp.end_month }}/{{ exp.end_year }}{% else %}Present{% endif %}
	</p>
	{% if exp.remarks %}
	<p class="mb-0">{{ exp.remarks }}</p>
	{% endif %}
	</div>
	{% endfor %}
	`,
	projects: `
	{% for project in projects %}
	<div class="project-item">
	<h6>{{ project.title }}</h6>
	{% if project.organization %}
	<p class="text-muted mb-1">{{ project.organization }}</p>
	{% endif %}
	<p class="date-range mb-2">
	{{ project.start_month }}/{{ project.start_year }} -
	{% if project.end_year %}{{ project.end_month }}/{{ project.end_year }}{% else %}Present{% endif %}
	</p>
	{% if project.remarks %}
	<p class="mb-0">{{ project.remarks }}</p>
	{% endif %}
	</div>
	{% endfor %}
	`,
	education: `
	{% for edu in educations %}
	<div class="education-item">
	<h6>{{ edu.title }}</h6>
	<p class="text-muted mb-1">{{ edu.organization }}</p>
	<p class="date-range mb-2">
	{{ edu.start_month }}/{{ edu.start_year }} -
	{% if edu.end_year %}{{ edu.end_month }}/{{ edu.end_year }}{% else %}Present{% endif %}
	</p>
	{% if edu.remarks %}
	<p class="mb-0">{{ edu.remarks }}</p>
	{% endif %}
	</div>
	{% endfor %}
	`,
	skills: `
	<div class="skills-grid">
	{% for skill in skills %}
	<span class="skill-tag">{{ skill.skill }}</span>
	{% endfor %}
	</div>
	`,
	achievements: `
	<div class="achievements-grid">
	{% for achievement in achievements %}
	<span class="achievement-tag">{{ achievement.achievement }}</span>
	{% endfor %}
	</div>
	`
	};

	function updateSectionOrder() {
	const items = document.querySelectorAll('#sortableSections .sortable-item');
	const order = [];

	items.forEach(item => {
	const section = item.dataset.section;
	if (section && sectionsData[section]) {
	order.push(section);
	}
	});

	document.getElementById('sectionOrderInput').value = JSON.stringify(order);
	}

	function updatePreview() {
	const items = document.querySelectorAll('#sortableSections .sortable-item');
	const previewContent = document.getElementById('previewContent');

	// Keep introduction and summary
	const fixedSections = previewContent.querySelectorAll('[data-section="introduction"], [data-section="profile_summary"]');
	const newContent = Array.from(fixedSections);

	// Add dynamic sections in order
	items.forEach(item => {
	const section = item.dataset.section;
	if (section && section !== 'introduction' && section !== 'profile_summary' && sectionsData[section]) {
	const sectionDiv = document.createElement('div');
	sectionDiv.className = 'preview-section';
	sectionDiv.dataset.section = section;

	let title = '';
	switch(section) {
	case 'work_experience':
	title = '<i class="fas fa-briefcase"></i> Work Experience';
	break;
	case 'projects':
	title = '<i class="fas fa-project-diagram"></i> Projects';
	break;
	case 'education':
	title = '<i class="fas fa-graduation-cap"></i> Education';
	break;
	case 'skills':
	title = '<i class="fas fa-tools"></i> Skills';
	break;
	case 'achievements':
	title = '<i class="fas fa-trophy"></i> Achievements';
	break;
	}

	sectionDiv.innerHTML = `<h5>${title}</h5>${sectionTemplates[section]}`;
	newContent.push(sectionDiv);
	}
	});

	previewContent.innerHTML = '';
	newContent.forEach(section => previewContent.appendChild(section));
	}

	function confirmClear() {
	if (confirm('Are you sure you want to clear all your profile data? This action cannot be undone.')) {
	document.getElementById('previewForm').innerHTML +=
	'<input type="hidden" name="action" value="clear">';
	document.getElementById('previewForm').submit();
	}
	}

	// Initialize on page load
	document.addEventListener('DOMContentLoaded', function() {
	updateSectionOrder();
	updatePreview();
	});
	</script>
	</body>
	</html>