271 lines
16 KiB
PHP
271 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Create Your CV - MagiCV</title>
|
|
<meta name="description" content="Start creating your professional CV with MagiCV. Enter your details and see the magic happen.">
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Open Graph Meta Tags -->
|
|
<meta property="og:title" content="MagiCV — Where a bit of magic meets your career story">
|
|
<meta property="og:description" content="A “magically simple” CV generator with live-preview templates, AI text assistance and one-click export.">
|
|
<meta property="og:image" content="https://picsum.photos/seed/magicv-og/1200/630">
|
|
<meta property="og:url" content="[Your App URL]">
|
|
<meta property="og:type" content="website">
|
|
</head>
|
|
<body class="bg-light-gray">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand fw-bold" href="index.php" style="color: #5D5FEF;">MagiCV ✨</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto align-items-center">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#templates">Templates</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#pricing">Pricing</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#login">Login</a>
|
|
</li>
|
|
<li class="nav-item ms-lg-2">
|
|
<a class="btn btn-primary" href="create.php" role="button" style="background-color: #5D5FEF; border-color: #5D5FEF;">Create My CV</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mt-5 pt-4">
|
|
<div class="row">
|
|
<!-- Form Section -->
|
|
<div class="col-lg-7">
|
|
<form id="cv-form" action="preview.php" method="POST">
|
|
<div id="section-personal-details">
|
|
<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm">
|
|
<h1 class="h3 fw-bold mb-4">1. Personal Details</h1>
|
|
<p class="text-muted mb-4">Let's start with the basics. This information will appear at the top of your CV.</p>
|
|
|
|
<div class="mb-3">
|
|
<label for="fullName" class="form-label">Full Name</label>
|
|
<input type="text" class="form-control form-control-lg" id="fullName" name="fullName" placeholder="e.g., Jane Doe">
|
|
</div>
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<input type="email" class="form-control form-control-lg" id="email" name="email" placeholder="e.g., jane.doe@email.com">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="phone" class="form-label">Phone Number</label>
|
|
<input type="tel" class="form-control form-control-lg" id="phone" name="phone" placeholder="e.g., (123) 456-7890">
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label for="linkedin" class="form-label">LinkedIn Profile</label>
|
|
<input type="url" class="form-control form-control-lg" id="linkedin" name="linkedin" placeholder="linkedin.com/in/yourprofile">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="website" class="form-label">Personal Website <span class="text-muted">(Optional)</span></label>
|
|
<input type="url" class="form-control form-control-lg" id="website" name="website" placeholder="yourportfolio.com">
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn btn-primary btn-lg" data-next="section-experience">Next: Experience →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section-experience" class="d-none">
|
|
<!-- Spacer -->
|
|
<div class="my-4"></div>
|
|
|
|
<!-- Experience Section -->
|
|
<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h3 fw-bold mb-0">2. Work Experience</h2>
|
|
<button type="button" id="add-experience-btn" class="btn btn-sm btn-outline-primary d-flex align-items-center">
|
|
<i data-feather="plus" class="me-1" style="width: 16px; height: 16px;"></i>
|
|
Add Experience
|
|
</button>
|
|
</div>
|
|
<p class="text-muted mb-4">Detail your professional history. Start with your most recent job.</p>
|
|
|
|
<div id="experience-entries">
|
|
<!-- Dynamic entries will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Experience Template -->
|
|
<template id="experience-template">
|
|
<div class="experience-entry border rounded-3 p-3 mb-3">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn-close remove-experience-btn" aria-label="Remove"></button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Job Title</label>
|
|
<input type="text" name="job_title[]" class="form-control" placeholder="e.g., Senior Product Manager">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Company</label>
|
|
<input type="text" name="company[]" class="form-control" placeholder="e.g., Google">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Start Date</label>
|
|
<input type="month" name="job_start_date[]" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">End Date</label>
|
|
<input type="month" name="job_end_date[]" class="form-control">
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="form-label">Description</label>
|
|
<textarea name="job_description[]" class="form-control" rows="3" placeholder="Describe your responsibilities and achievements."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Form-wide Actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary btn-lg" data-prev="section-personal-details">← Back to Personal Details</button>
|
|
<button type="button" class="btn btn-primary btn-lg" data-next="section-education">Next: Education →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section-education" class="d-none">
|
|
<!-- Spacer -->
|
|
<div class="my-4"></div>
|
|
|
|
<!-- Education Section -->
|
|
<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2 class="h3 fw-bold mb-0">3. Education</h2>
|
|
<button type="button" id="add-education-btn" class="btn btn-sm btn-outline-primary d-flex align-items-center">
|
|
<i data-feather="plus" class="me-1" style="width: 16px; height: 16px;"></i>
|
|
Add Education
|
|
</button>
|
|
</div>
|
|
<p class="text-muted mb-4">List your academic background.</p>
|
|
|
|
<div id="education-entries">
|
|
<!-- Dynamic entries will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Education Template -->
|
|
<template id="education-template">
|
|
<div class="education-entry border rounded-3 p-3 mb-3">
|
|
<div class="d-flex justify-content-end">
|
|
<button type="button" class="btn-close remove-education-btn" aria-label="Remove"></button>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">School / University</label>
|
|
<input type="text" name="school[]" class="form-control" placeholder="e.g., Harvard University">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Degree & Field of Study</label>
|
|
<input type="text" name="degree[]" class="form-control" placeholder="e.g., B.S. in Computer Science">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">Start Date</label>
|
|
<input type="month" name="edu_start_date[]" class="form-control">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label">End Date</label>
|
|
<input type="month" name="edu_end_date[]" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Form-wide Actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary btn-lg" data-prev="section-experience">← Back to Experience</button>
|
|
<button type="button" class="btn btn-primary btn-lg" data-next="section-skills">Next: Skills →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section-skills" class="d-none">
|
|
<!-- Spacer -->
|
|
<div class="my-4"></div>
|
|
|
|
<!-- Skills Section -->
|
|
<div class="bg-white p-4 p-md-5 rounded-3 shadow-sm">
|
|
<h2 class="h3 fw-bold mb-4">4. Skills</h2>
|
|
<p class="text-muted mb-4">Highlight your key skills. Add them one by one.</p>
|
|
<div class="input-group mb-3">
|
|
<input type="text" id="skill-input" class="form-control form-control-lg" placeholder="e.g., JavaScript">
|
|
<button class="btn btn-outline-primary" type="button" id="add-skill-btn">Add Skill</button>
|
|
</div>
|
|
<div id="skills-list" class="d-flex flex-wrap gap-2">
|
|
<!-- Skills will be added here as badges -->
|
|
</div>
|
|
<input type="hidden" name="skills" id="skills-hidden-input">
|
|
</div>
|
|
|
|
<!-- Form-wide Actions -->
|
|
<div class="d-flex justify-content-between mt-4">
|
|
<button type="button" class="btn btn-secondary btn-lg" data-prev="section-education">← Back to Education</button>
|
|
<button type="submit" class="btn btn-success btn-lg">Finish & Preview →</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Preview Section (Placeholder) -->
|
|
<div class="col-lg-5 d-none d-lg-block">
|
|
<div class="sticky-top" style="top: 100px;">
|
|
<div class="bg-white p-4 rounded-3 shadow-sm">
|
|
<h4 class="fw-bold text-center">Live Preview</h4>
|
|
<p class="text-muted text-center small mb-3">Your CV will update here as you type.</p>
|
|
<img src="https://picsum.photos/seed/magicv-preview/800/1131" class="img-fluid rounded-1 border" alt="A beautifully designed CV template preview.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-white mt-5 py-5">
|
|
<div class="container text-center">
|
|
<p class="text-muted">© <?php echo date("Y"); ?> MagiCV. All rights reserved.</p>
|
|
<p>
|
|
<a href="#about" class="text-decoration-none">About</a> ·
|
|
<a href="#contact" class="text-decoration-none">Contact</a> ·
|
|
<a href="#privacy" class="text-decoration-none">Privacy Policy</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
<!-- Feather Icons -->
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
|
<script>
|
|
feather.replace();
|
|
</script>
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|