admin/34154-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2025-09-17T14:24:57.703Z

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-17 14:24:57 +00:00
parent 91d7f171f3
commit 9522bc839d
4 changed files with 387 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
assets/css/custom.css Normal file
View File

@ -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;
}

6
assets/js/main.js Normal file
View File

@ -0,0 +1,6 @@
// MagiCV Custom Scripts
document.addEventListener('DOMContentLoaded', function () {
// Future interactivity can be added here.
console.log("MagiCV loaded!");
});

132
create.php Normal file
View File

@ -0,0 +1,132 @@
<!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 &rarr;</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">&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>

258
index.php
View File

@ -1,131 +1,139 @@
<?php
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<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=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MagiCV &mdash; Where a bit of magic meets your career story</title>
<meta name="description" content="MagiCV is a magically simple CV/Resume generator with live-preview templates, AI text assistance and one-click export.">
<!-- 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">
<!-- 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=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="MagiCV &mdash; Magically Simple CVs">
<meta property="og:description" content="Create a professional CV in minutes with our live-preview templates and AI assistance.">
<meta property="og:image" content="https://picsum.photos/seed/magicv-og/1200/630">
<meta property="og:url" content="">
<meta property="og:type" content="website">
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
</div>
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
<!-- Header -->
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="#">✨ 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 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="edit"></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="sparkles"></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="download"></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>
<img src="https://picsum.photos/seed/magicv-feature1/800/600" class="img-fluid rounded-3 mb-4" alt="A person happily working on their CV on a laptop.">
</div>
<div class="col-lg-6">
<img src="https://picsum.photos/seed/magicv-preview/800/1131" class="img-fluid cv-preview-img" alt="A beautifully designed CV template preview.">
</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>