133 lines
7.0 KiB
PHP
133 lines
7.0 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">
|
|
<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>
|
|
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="fullName" class="form-label">Full Name</label>
|
|
<input type="text" class="form-control form-control-lg" id="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" 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" 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" 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" placeholder="yourportfolio.com">
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-end">
|
|
<button type="submit" class="btn btn-primary btn-lg">Next: Experience →</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|