Files
myAi/web/wwwroot/cv-matcher/index.html
T
2026-05-06 10:56:02 +03:00

199 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyAi.ro · AI CV Matcher</title>
<meta name="description" content="Upload a CV PDF, provide a job link or description, and compare the job requirements against extracted CV context." />
<meta name="author" content="Mihes Gelu" />
<meta property="og:title" content="MyAi.ro · AI CV Matcher" />
<meta property="og:description" content="AI-powered CV-to-job matching demo." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://myai.ro/cv-matcher/" />
<meta name="theme-color" content="#071326" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" href="/img/favicon-256.png" />
<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;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/myai.css" />
</head>
<body>
<div class="site-shell">
<header class="header" id="top">
<div class="container nav-wrap">
<a class="brand" href="/" aria-label="MyAi.ro home">
<span class="brand-mark">
<img src="/img/myai-logo.svg" alt="MyAi.ro">
</span>
<span>
<span class="brand-text">MyAi.ro</span>
<small data-i18n="cv.brand">CV Matcher</small>
</span>
</a>
<nav class="nav" id="mainNav" aria-label="Primary navigation">
<a href="/" data-i18n="nav.navigator">Navigator</a>
<a href="#matcher" data-i18n="nav.matcher">Matcher</a>
<a href="#contact" data-i18n="nav.contact">Contact</a>
</nav>
<div class="nav-actions">
<div class="lang-switch" aria-label="Language selector">
<button class="lang-flag" data-lang="ro" aria-label="Română">
<img src="/img/flags/ro.svg" alt="RO">
</button>
<button class="lang-flag" data-lang="en" aria-label="English">
<img src="/img/flags/en.svg" alt="EN">
</button>
</div>
</div>
<button class="menu-toggle" id="menuToggle" aria-expanded="false" aria-controls="mainNav">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<main>
<section class="hero matcher-hero">
<div class="container hero-grid">
<div class="hero-copy">
<span class="eyebrow" data-i18n="cv.eyebrow">AI CV Matcher</span>
<h1 data-i18n="cv.title">Upload your CV, add a job link, and see how well they match.</h1>
<p class="hero-text" data-i18n="cv.text">The backend should extract text from the PDF, create RAG context from your CV, retrieve relevant experience for the job, then score strengths, gaps and next actions.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#matcher" data-i18n="cv.try">Try matcher</a>
<a class="btn btn-secondary" href="/" data-i18n="cv.back">Back to navigator</a>
</div>
</div>
<div class="hero-card ai-console-card banner-card">
<img class="showcase-banner" src="/img/myai-banner.svg" alt="MyAi.ro AI engineering banner">
<div class="console-line">
<span>1</span>
<b data-i18n="cv.step1">PDF text extraction</b>
</div>
<div class="console-line">
<span>2</span>
<b data-i18n="cv.step2">CV chunking + embeddings</b>
</div>
<div class="console-line">
<span>3</span>
<b data-i18n="cv.step3">Job URL/description parsing</b>
</div>
<div class="console-line">
<span>4</span>
<b data-i18n="cv.step4">Match score + evidence</b>
</div>
</div>
</div>
</section>
<section class="section" id="matcher">
<div class="container matcher-grid">
<form class="ai-panel" id="cvMatcherForm">
<span class="eyebrow" data-i18n="cv.input">Input</span>
<h2 data-i18n="cv.details">CV and job details</h2>
<label class="file-drop" for="cvFile">
<strong data-i18n="cv.upload">Upload CV PDF</strong>
<span id="cvFileName" data-i18n="cv.fileHint">PDF only, max size handled by backend</span>
<input type="file" id="cvFile" accept="application/pdf" required />
</label>
<label>
<span data-i18n="cv.jobLink">Job link</span>
<input type="url" id="jobUrl" placeholder="https://company.com/careers/job" />
</label>
<label>
<span data-i18n="cv.jobDescription">Or paste job description</span>
<textarea id="jobDescription" rows="8" data-i18n-placeholder="cv.jobPlaceholder" placeholder="Paste the job description if the page cannot be crawled."></textarea>
</label>
<div class="consent-inline">
<input type="checkbox" id="gdprConsent" required />
<label for="gdprConsent" data-i18n="cv.gdpr">I agree that my CV is processed and stored.</label>
</div>
<button id="matchSubmit" type="submit" class="btn btn-primary" data-i18n="cv.submit">Extract CV and match job</button>
<strong id="matcherMsg" class="form-message"></strong>
</form>
<aside class="ai-panel result-panel">
<span class="eyebrow" data-i18n="cv.result">Result</span>
<h2 data-i18n="cv.analysis">Match analysis</h2>
<div id="matchResult" class="empty-result" data-i18n="cv.empty">Upload a CV and provide a job link or description to generate a result.</div>
</aside>
</div>
</section>
<section class="section contact" id="contact">
<div class="container contact-grid">
<div>
<span class="eyebrow" data-i18n="nav.contact">Contact</span>
<h2 data-i18n="cv.contactTitle">Want this adapted for your workflow?</h2>
<p data-i18n="cv.contactText">This form uses the existing template contact API endpoint.</p>
<div class="contact-list">
<div>
<span data-i18n="contact.person">Contact person</span>
<strong>Mihes Gelu</strong>
</div>
<div>
<span data-i18n="contact.phone">Phone</span>
<strong>
<a href="tel:+40722523764">+40 722-523-764</a>
</strong>
</div>
</div>
</div>
<form class="contact-form" id="contactForm">
<label>
<span data-i18n="form.name">Name</span>
<input type="text" id="name" data-i18n-placeholder="form.namePlaceholder" placeholder="Your name" required />
</label>
<label>
<span data-i18n="form.email">Email</span>
<input type="email" id="email" data-i18n-placeholder="form.emailPlaceholder" placeholder="name@company.com" required />
</label>
<label>
<span data-i18n="form.message">Message</span>
<textarea id="message" rows="6" data-i18n-placeholder="form.messagePlaceholder" placeholder="Tell me what you want to build." required></textarea>
</label>
<button id="submit" type="submit" class="btn btn-primary" data-i18n="form.send">Send message</button>
<strong id="msgSubmit" class="form-message"></strong>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-wrap">
<p>
©
<span id="year"></span> MyAi.ro ·
<span data-i18n="footer.rights">All rights reserved</span>
</p>
<div class="footer-links footer-legal">
<a data-legal="terms" href="/legal/terms-en.html" target="_blank" data-i18n="legal.terms">Terms</a>
<a data-legal="privacy" href="/legal/privacy-en.html" target="_blank" data-i18n="legal.privacy">Privacy</a>
<a data-legal="cookies" href="/legal/cookies-en.html" target="_blank" data-i18n="legal.cookies">Cookies</a>
</div>
<a href="#top" class="back-to-top btn btn-dark btn-sm shadow" data-i18n="footer.top">Back to top</a>
</div>
</footer>
</div>
<div id="contactLoader" class="loader-overlay" style="display:none;">
<div class="loader-box" data-i18n="status.sending">Sending...</div>
</div>
<div id="cookieBanner" class="cookie-overlay" style="display:none;">
<div class="cookie-box">
<div class="cookie-text">
<strong data-i18n="cookies.title">Cookies</strong>
<br>
<span data-i18n="cookies.text">We use necessary cookies and, with your consent, analytics through Google Tag Manager.</span>
<a data-legal="privacy" href="/legal/privacy-en.html" target="_blank" data-i18n="cookies.policy">Privacy policy</a>.
</div>
<div class="cookie-actions">
<button id="cookieReject" class="btn btn-warning btn-sm" data-i18n="cookies.reject">Reject</button>
<button id="cookieNecessary" class="btn btn-warning btn-sm" data-i18n="cookies.necessary">Necessary only</button>
<button id="cookieAccept" class="btn btn-primary btn-sm" data-i18n="cookies.accept">Accept analytics</button>
</div>
</div>
</div>
<a href="#" id="cookieManage" class="cookie-manage btn btn-dark btn-sm shadow" style="display:none;" data-i18n="cookies.settings">Cookie settings</a>
<script src="/js/vendor/jquery-1.12.4.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>