Spaces:

sakthi07
/

resumebuilder

Configuration error

File size: 21,641 Bytes

ab028ac

<!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>