Auto commit: 2025-09-17T14:46:11.387Z

assets/css/custom.css

@@ -0,0 +1,115 @@
+
+/* MagiCV Custom Styles */
+/* Palette:
+   Primary: #5D5FEF
+   Secondary: #FACC15
+   Background: #F8F9FA
+   Surface: #FFFFFF
+   Text: #212529
+*/
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #F8F9FA;
+    color: #212529;
+}
+
+h1, h2, h3, h4, h5, h6, .navbar-brand {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+}
+
+.btn-primary {
+    background-color: #5D5FEF;
+    border-color: #5D5FEF;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: #4a4cc7;
+    border-color: #4a4cc7;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.btn-secondary {
+    background-color: #FACC15;
+    border-color: #FACC15;
+    color: #212529;
+    transition: all 0.3s ease;
+}
+
+.btn-secondary:hover {
+    background-color: #e6b800;
+    border-color: #e6b800;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.navbar {
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.navbar-brand {
+    color: #5D5FEF !important;
+    font-weight: 700;
+}
+
+.hero {
+    padding: 6rem 0;
+    background: linear-gradient(45deg, rgba(93, 95, 239, 0.1), rgba(250, 204, 21, 0.1));
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    background: -webkit-linear-gradient(45deg, #5D5FEF, #c367d7);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero .lead {
+    font-size: 1.25rem;
+    color: #6c757d;
+}
+
+.feature-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    background: linear-gradient(45deg, #5D5FEF, #7C7DFF);
+    color: white;
+    margin-bottom: 1rem;
+    box-shadow: 0 4px 15px rgba(93, 95, 239, 0.3);
+}
+
+.section-title {
+    font-weight: 700;
+    margin-bottom: 3rem;
+}
+
+.card {
+    border: none;
+    border-radius: 1rem;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
+}
+
+.cv-preview-img {
+    border-radius: 1rem;
+    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+}
+
+footer {
+    background-color: #FFFFFF;
+}

assets/js/main.js

@@ -0,0 +1,130 @@
+// MagiCV Custom Scripts
+
+document.addEventListener('DOMContentLoaded', function () {
+    console.log("MagiCV loaded!");
+
+    const experienceContainer = document.getElementById('experience-entries');
+    const addExperienceBtn = document.getElementById('add-experience-btn');
+    const experienceTemplate = document.getElementById('experience-template');
+
+    if (addExperienceBtn && experienceContainer && experienceTemplate) {
+        addExperienceBtn.addEventListener('click', () => {
+            const clone = experienceTemplate.content.cloneNode(true);
+            experienceContainer.appendChild(clone);
+            updateRemoveButtons();
+        });
+    }
+
+    function updateRemoveButtons() {
+        const removeButtons = experienceContainer.querySelectorAll('.remove-experience-btn');
+        removeButtons.forEach(button => {
+            button.removeEventListener('click', handleRemoveClick); // Avoid double-binding
+            button.addEventListener('click', handleRemoveClick);
+        });
+    }
+
+    function handleRemoveClick(event) {
+        const entry = event.target.closest('.experience-entry');
+        if (entry) {
+            entry.remove();
+        }
+    }
+    
+    // Initial call to bind to any existing entries
+    updateRemoveButtons();
+
+    const educationContainer = document.getElementById('education-entries');
+    const addEducationBtn = document.getElementById('add-education-btn');
+    const educationTemplate = document.getElementById('education-template');
+
+    if (addEducationBtn && educationContainer && educationTemplate) {
+        addEducationBtn.addEventListener('click', () => {
+            const clone = educationTemplate.content.cloneNode(true);
+            educationContainer.appendChild(clone);
+            updateRemoveEducationButtons();
+        });
+    }
+
+    function updateRemoveEducationButtons() {
+        const removeButtons = educationContainer.querySelectorAll('.remove-education-btn');
+        removeButtons.forEach(button => {
+            button.removeEventListener('click', handleRemoveEducationClick); // Avoid double-binding
+            button.addEventListener('click', handleRemoveEducationClick);
+        });
+    }
+
+    function handleRemoveEducationClick(event) {
+        const entry = event.target.closest('.education-entry');
+        if (entry) {
+            entry.remove();
+        }
+    }
+
+    // Initial call to bind to any existing entries
+    updateRemoveEducationButtons();
+
+    const skillInput = document.getElementById('skill-input');
+    const addSkillBtn = document.getElementById('add-skill-btn');
+    const skillsList = document.getElementById('skills-list');
+    const skillsHiddenInput = document.getElementById('skills-hidden-input');
+
+    if (addSkillBtn && skillInput && skillsList) {
+        addSkillBtn.addEventListener('click', addSkill);
+        skillInput.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault(); // prevent form submission
+                addSkill();
+            }
+        });
+    }
+
+    function addSkill() {
+        const skillText = skillInput.value.trim();
+        if (skillText !== "") {
+            const skillBadge = document.createElement('span');
+            skillBadge.className = 'badge bg-primary d-flex align-items-center fs-6';
+            skillBadge.innerHTML = `
+                ${skillText}
+                <button type="button" class="btn-close btn-close-white ms-2" aria-label="Remove skill"></button>
+            `;
+            
+            skillBadge.querySelector('button').addEventListener('click', function() {
+                skillBadge.remove();
+                updateSkillsInput();
+            });
+
+            skillsList.appendChild(skillBadge);
+            updateSkillsInput();
+            skillInput.value = "";
+            skillInput.focus();
+        }
+    }
+
+    function updateSkillsInput() {
+        const skills = Array.from(skillsList.querySelectorAll('.badge')).map(badge => badge.innerText.trim());
+        skillsHiddenInput.value = skills.join(',');
+    }
+
+    // Section navigation
+    const form = document.getElementById('cv-form');
+    const sections = form.querySelectorAll('[id^="section-"]');
+    const navButtons = form.querySelectorAll('[data-next], [data-prev]');
+
+    navButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const currentSection = button.closest('[id^="section-"]');
+            const targetSectionId = button.dataset.next || button.dataset.prev;
+            const targetSection = document.getElementById(targetSectionId);
+
+            if (currentSection && targetSection) {
+                currentSection.classList.add('d-none');
+                targetSection.classList.remove('d-none');
+                window.scrollTo(0, 0);
+            }
+        });
+    });
+
+    // Add a default experience and education entry on page load
+    addExperienceBtn.click();
+    addEducationBtn.click();
+});

create.php

@@ -0,0 +1,270 @@
+<!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 &rarr;</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">&larr; Back to Personal Details</button>
+                            <button type="button" class="btn btn-primary btn-lg" data-next="section-education">Next: Education &rarr;</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">&larr; Back to Experience</button>
+                            <button type="button" class="btn btn-primary btn-lg" data-next="section-skills">Next: Skills &rarr;</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">&larr; Back to Education</button>
+                            <button type="submit" class="btn btn-success btn-lg">Finish & Preview &rarr;</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">&copy; <?php echo date("Y"); ?> MagiCV. All rights reserved.</p>
+            <p>
+                <a href="#about" class="text-decoration-none">About</a> &middot;
+                <a href="#contact" class="text-decoration-none">Contact</a> &middot;
+                <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>

index.php

@@ -1,131 +1,140 @@
-<?php
+<!DOCTYPE html>
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+    <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    <title>MagiCV &mdash; Where a bit of magic meets your career story</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+    <meta name="description" content="MagiCV is a magically simple CV/Resume generator with live-preview templates, AI text assistance and one-click export.">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <!-- Bootstrap CSS -->
-  <style>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    :root {
+
-      --bg-color-start: #6a11cb;
+    <!-- Google Fonts -->
-      --bg-color-end: #2575fc;
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-      --text-color: #ffffff;
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-      --card-bg-color: rgba(255, 255, 255, 0.01);
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
-      --card-border-color: rgba(255, 255, 255, 0.1);
+
-    }
+    <!-- Custom CSS -->
-    body {
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-      margin: 0;
+
-      font-family: 'Inter', sans-serif;
+    <!-- Open Graph Meta Tags -->
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
+    <meta property="og:title" content="MagiCV &mdash; Magically Simple CVs">
-      color: var(--text-color);
+    <meta property="og:description" content="Create a professional CV in minutes with our live-preview templates and AI assistance.">
-      display: flex;
+    <meta property="og:image" content="https://picsum.photos/seed/magicv-og/1200/630">
-      justify-content: center;
+    <meta property="og:url" content="">
-      align-items: center;
+    <meta property="og:type" content="website">
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
 </head>
 <body>
-  <main>
+
-    <div class="card">
+    <!-- Header -->
-      <h1>Analyzing your requirements and generating your website…</h1>
+    <header>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+        <nav class="navbar navbar-expand-lg fixed-top">
-        <span class="sr-only">Loading…</span>
+            <div class="container">
-      </div>
+                <a class="navbar-brand" href="#">✨ MagiCV</a>
-      <p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+                    <span class="navbar-toggler-icon"></span>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+                </button>
-    </div>
+                <div class="collapse navbar-collapse" id="navbarNav">
-  </main>
+                    <ul class="navbar-nav ms-auto align-items-center">
-  <footer>
+                        <li class="nav-item"><a class="nav-link" href="#templates">Templates</a></li>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+                        <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
-  </footer>
+                        <li class="nav-item"><a class="nav-link" href="#login">Login</a></li>
+                        <li class="nav-item ms-lg-2 mt-2 mt-lg-0">
+                            <a class="btn btn-primary" href="create.php">Create My CV</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="hero">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 mx-auto">
+                        <h1 class="mb-3">MagiCV — where a bit of magic meets your career story</h1>
+                        <p class="lead mb-4">Create a professional CV in minutes. Our magically simple generator features live-preview templates, AI text assistance, and one-click export.</p>
+                        <a href="create.php" class="btn btn-primary btn-lg px-4 me-sm-3">Start Building for Free</a>
+                        <a href="#templates" class="btn btn-outline-secondary btn-lg px-4">See Templates</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section id="features" class="py-5">
+            <div class="container py-5">
+                <h2 class="text-center section-title">Why You'll Love MagiCV</h2>
+                <div class="row text-center g-4">
+                    <div class="col-lg-4 col-md-6">
+                        <div class="card p-4 h-100">
+                            <div class="feature-icon">
+                                <i data-feather="layout"></i>
+                            </div>
+                            <h3 class="h5">Live Preview</h3>
+                            <p>See your changes in real-time as you type. No more guessing how your final CV will look.</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-md-6">
+                        <div class="card p-4 h-100">
+                            <div class="feature-icon">
+                                <i data-feather="zap"></i>
+                            </div>
+                            <h3 class="h5">AI Assistance</h3>
+                            <p>Stuck on what to write? Our AI helps you craft compelling bullet points that get you noticed.</p>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-md-6">
+                        <div class="card p-4 h-100">
+                            <div class="feature-icon">
+                                <i data-feather="arrow-down-circle"></i>
+                            </div>
+                            <h3 class="h5">One-Click Export</h3>
+                            <p>Export your finished CV to PDF with a single click, perfectly formatted and ready to send.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        
+
+        <!-- Showcase Section -->
+        <section id="showcase" class="py-5 bg-white">
+            <div class="container">
+                <div class="row align-items-center g-5">
+                    <div class="col-lg-6">
+                        <h2 class="section-title mb-4">Impress with Professionalism</h2>
+                        <p class="lead mb-4">Choose from a library of beautiful, recruiter-approved templates. From minimal and modern to classic and elegant, find the perfect style to tell your story.</p>
+                    </div>
+                    <div class="col-lg-6">
+                        <img src="assets/pasted-20250917-144228-792440ea.jpg" class="img-fluid rounded-3" alt="Cartoon illustration of a person in glasses holding a CV and notepads.">
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="py-4 mt-5">
+        <div class="container text-center">
+            <p class="mb-0 text-muted">&copy; <?php echo date("Y"); ?> MagiCV. All Rights Reserved.</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>

preview.php

@@ -0,0 +1,28 @@
+<?php
+// preview.php
+
+// This is a placeholder for the CV preview.
+// In a real application, you would use this data to populate a template.
+
+?><!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CV Preview - MagiCV</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css">
+</head>
+<body class="bg-light-gray">
+    <div class="container mt-5">
+        <div class="bg-white p-4 p-md-5 rounded-3 shadow-sm">
+            <h1 class="h3 fw-bold mb-4">CV Preview</h1>
+            <p class="text-muted mb-4">This is a preview of the data you entered. The final CV will be styled based on the template you choose.</p>
+            
+            <h2 class="h4 fw-bold mt-5">Personal Details</h2>
+            <pre><?php print_r($_POST); ?></pre>
+
+        </div>
+    </div>
+</body>
+</html>