{"id":5906,"date":"2025-10-27T11:37:00","date_gmt":"2025-10-27T11:37:00","guid":{"rendered":"https:\/\/access4all.uk\/?page_id=5906"},"modified":"2025-11-28T11:36:05","modified_gmt":"2025-11-28T11:36:05","slug":"ai-digital-champion","status":"publish","type":"page","link":"https:\/\/access4all.uk\/index.php\/ai-digital-champion\/","title":{"rendered":"AI Digital Champion"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n        .application-generator {\n            max-width: 800px;\n            margin: 40px auto;\n            padding: 30px;\n            background: #f9f9f9;\n            border-radius: 10px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        }\n        \n        .application-generator h2 {\n            color: #333;\n            margin-bottom: 10px;\n        }\n        \n        .application-generator p.subtitle {\n            color: #666;\n            margin-bottom: 30px;\n        }\n        \n        .form-group {\n            margin-bottom: 25px;\n        }\n        \n        .form-group label {\n            display: block;\n            margin-bottom: 8px;\n            font-weight: 600;\n            color: #444;\n        }\n        \n        .form-group label .required {\n            color: #e74c3c;\n        }\n        \n        .form-group input[type=\"text\"],\n        .form-group input[type=\"email\"],\n        .form-group input[type=\"tel\"],\n        .form-group textarea {\n            width: 100%;\n            padding: 12px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            font-size: 15px;\n            box-sizing: border-box;\n            transition: border-color 0.3s;\n        }\n        \n        .form-group input:focus,\n        .form-group textarea:focus {\n            outline: none;\n            border-color: #3498db;\n        }\n        \n        .form-group textarea {\n            min-height: 120px;\n            resize: vertical;\n            font-family: inherit;\n        }\n        \n        .form-group small {\n            display: block;\n            margin-top: 5px;\n            color: #777;\n            font-size: 13px;\n        }\n        \n        .drop-zone {\n            border: 2px dashed #3498db;\n            border-radius: 5px;\n            padding: 30px;\n            text-align: center;\n            background: #fff;\n            cursor: pointer;\n            transition: all 0.3s;\n        }\n        \n        .drop-zone:hover {\n            background: #f0f8ff;\n            border-color: #2980b9;\n        }\n        \n        .drop-zone.active {\n            background: #e3f2fd;\n            border-color: #1976d2;\n        }\n        \n        .drop-zone input[type=\"file\"] {\n            display: none;\n        }\n        \n        .drop-zone-text {\n            color: #666;\n        }\n        \n        .drop-zone-icon {\n            font-size: 48px;\n            color: #3498db;\n            margin-bottom: 10px;\n        }\n        \n        .file-info {\n            margin-top: 10px;\n            padding: 10px;\n            background: #e8f5e9;\n            border-radius: 5px;\n            color: #2e7d32;\n            display: none;\n        }\n        \n        .submit-btn {\n            background: #3498db;\n            color: white;\n            padding: 15px 40px;\n            border: none;\n            border-radius: 5px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: background 0.3s;\n            width: 100%;\n        }\n        \n        .submit-btn:hover {\n            background: #2980b9;\n        }\n        \n        .submit-btn:disabled {\n            background: #95a5a6;\n            cursor: not-allowed;\n        }\n        \n        .loading {\n            display: none;\n            text-align: center;\n            padding: 20px;\n        }\n        \n        .loading-spinner {\n            border: 4px solid #f3f3f3;\n            border-top: 4px solid #3498db;\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            animation: spin 1s linear infinite;\n            margin: 0 auto 15px;\n        }\n        \n        @keyframes spin {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n        \n        .result {\n            display: none;\n            padding: 20px;\n            background: #e8f5e9;\n            border-radius: 5px;\n            margin-top: 20px;\n        }\n        \n        .result h3 {\n            color: #2e7d32;\n            margin-bottom: 15px;\n        }\n        \n        .result-links {\n            display: flex;\n            gap: 15px;\n            flex-wrap: wrap;\n        }\n        \n        .result-link {\n            flex: 1;\n            min-width: 200px;\n            padding: 15px;\n            background: white;\n            border-radius: 5px;\n            text-decoration: none;\n            color: #333;\n            display: block;\n            transition: transform 0.2s;\n        }\n        \n        .result-link:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        }\n        \n        .result-link strong {\n            display: block;\n            color: #3498db;\n            margin-bottom: 5px;\n        }\n        \n        .error {\n            display: none;\n            padding: 15px;\n            background: #ffebee;\n            border-radius: 5px;\n            color: #c62828;\n            margin-top: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"application-generator\">\n    <h2>AI-Powered Job Application Generator<\/h2>\n    <p class=\"subtitle\">Create a customized cover letter and CV tailored to any job in seconds<\/p>\n    \n    <form id=\"applicationForm\">\n        <!-- Personal Information -->\n        <div class=\"form-group\">\n            <label for=\"applicant_name\">Full Name <span class=\"required\">*<\/span><\/label>\n            <input type=\"text\" id=\"applicant_name\" name=\"applicant_name\" required>\n        <\/div>\n        \n        <div class=\"form-group\">\n            <label for=\"applicant_email\">Email Address <span class=\"required\">*<\/span><\/label>\n            <input type=\"email\" id=\"applicant_email\" name=\"applicant_email\" required>\n        <\/div>\n        \n        <div class=\"form-group\">\n            <label for=\"applicant_phone\">Phone Number <span class=\"required\">*<\/span><\/label>\n            <input type=\"tel\" id=\"applicant_phone\" name=\"applicant_phone\" required>\n        <\/div>\n        \n        <!-- Skills and Experience -->\n        <div class=\"form-group\">\n            <label for=\"skills\">Your Skills &#038; Experience <span class=\"required\">*<\/span><\/label>\n            <textarea id=\"skills\" name=\"skills\" required placeholder=\"List your key skills, experiences, achievements, and qualifications. Be specific about technologies, methodologies, years of experience, etc.\"><\/textarea>\n            <small>The more detail you provide, the better your customized documents will be!<\/small>\n        <\/div>\n        \n        <!-- Optional File Uploads -->\n        <div class=\"form-group\">\n            <label>Current CV\/Resume (Optional)<\/label>\n            <div class=\"drop-zone\" id=\"cvDropZone\">\n                <div class=\"drop-zone-icon\">\ud83d\udcc4<\/div>\n                <div class=\"drop-zone-text\">\n                    <strong>Drag &#038; drop your CV here<\/strong><br>\n                    or click to browse\n                <\/div>\n                <input type=\"file\" id=\"cv_file\" accept=\".pdf,.doc,.docx,.txt\">\n            <\/div>\n            <div class=\"file-info\" id=\"cvFileInfo\"><\/div>\n            <small>Accepted formats: PDF, DOC, DOCX, TXT<\/small>\n        <\/div>\n        \n        <div class=\"form-group\">\n            <label>Current Cover Letter (Optional)<\/label>\n            <div class=\"drop-zone\" id=\"coverLetterDropZone\">\n                <div class=\"drop-zone-icon\">\ud83d\udcdd<\/div>\n                <div class=\"drop-zone-text\">\n                    <strong>Drag &#038; drop your cover letter here<\/strong><br>\n                    or click to browse\n                <\/div>\n                <input type=\"file\" id=\"cover_letter_file\" accept=\".pdf,.doc,.docx,.txt\">\n            <\/div>\n            <div class=\"file-info\" id=\"coverLetterFileInfo\"><\/div>\n            <small>Accepted formats: PDF, DOC, DOCX, TXT<\/small>\n        <\/div>\n        \n        <!-- Job Information -->\n        <div class=\"form-group\">\n            <label for=\"job_title\">Job Title <span class=\"required\">*<\/span><\/label>\n            <input type=\"text\" id=\"job_title\" name=\"job_title\" required placeholder=\"e.g., Senior Software Engineer\">\n        <\/div>\n        \n        <div class=\"form-group\">\n            <label for=\"company_name\">Company Name <span class=\"required\">*<\/span><\/label>\n            <input type=\"text\" id=\"company_name\" name=\"company_name\" required placeholder=\"e.g., Google\">\n        <\/div>\n        \n        <div class=\"form-group\">\n            <label for=\"job_description\">Job Description <span class=\"required\">*<\/span><\/label>\n            <textarea id=\"job_description\" name=\"job_description\" required placeholder=\"Paste the complete job description here, including responsibilities, requirements, and qualifications\"><\/textarea>\n            <small>Copy and paste the entire job posting for best results<\/small>\n        <\/div>\n        \n        <button type=\"submit\" class=\"submit-btn\">Generate My Application Documents<\/button>\n    <\/form>\n    \n    <div class=\"loading\" id=\"loading\">\n        <div class=\"loading-spinner\"><\/div>\n        <p>Creating your customized application documents&#8230;<br>This usually takes 30-60 seconds<\/p>\n    <\/div>\n    \n    <div class=\"result\" id=\"result\">\n        <h3>\u2705 Success! Your Documents Are Ready<\/h3>\n        <div class=\"result-links\" id=\"resultLinks\"><\/div>\n    <\/div>\n    \n    <div class=\"error\" id=\"error\">\n        <strong>\u274c Error<\/strong>\n        <p id=\"errorMessage\"><\/p>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ IMPORTANT: Replace this with your actual n8n webhook URL\n    const WEBHOOK_URL = 'https:\/\/access4all.app.n8n.cloud\/webhook\/30e59250-2834-4d1c-8aca-a98e07118d32';\n    \n    \/\/ File handling\n    const cvDropZone = document.getElementById('cvDropZone');\n    const cvFileInput = document.getElementById('cv_file');\n    const cvFileInfo = document.getElementById('cvFileInfo');\n    \n    const coverLetterDropZone = document.getElementById('coverLetterDropZone');\n    const coverLetterFileInput = document.getElementById('cover_letter_file');\n    const coverLetterFileInfo = document.getElementById('coverLetterFileInfo');\n    \n    \/\/ Set up drag and drop for CV\n    setupDropZone(cvDropZone, cvFileInput, cvFileInfo);\n    setupDropZone(coverLetterDropZone, coverLetterFileInput, coverLetterFileInfo);\n    \n    function setupDropZone(dropZone, fileInput, fileInfo) {\n        \/\/ Click to open file dialog\n        dropZone.addEventListener('click', () => fileInput.click());\n        \n        \/\/ Drag and drop events\n        dropZone.addEventListener('dragover', (e) => {\n            e.preventDefault();\n            dropZone.classList.add('active');\n        });\n        \n        dropZone.addEventListener('dragleave', () => {\n            dropZone.classList.remove('active');\n        });\n        \n        dropZone.addEventListener('drop', (e) => {\n            e.preventDefault();\n            dropZone.classList.remove('active');\n            \n            if (e.dataTransfer.files.length) {\n                fileInput.files = e.dataTransfer.files;\n                displayFileInfo(fileInput, fileInfo);\n            }\n        });\n        \n        \/\/ File input change\n        fileInput.addEventListener('change', () => {\n            displayFileInfo(fileInput, fileInfo);\n        });\n    }\n    \n    function displayFileInfo(fileInput, fileInfo) {\n        if (fileInput.files.length > 0) {\n            const file = fileInput.files[0];\n            fileInfo.textContent = `\u2713 ${file.name} (${(file.size \/ 1024).toFixed(2)} KB)`;\n            fileInfo.style.display = 'block';\n        }\n    }\n    \n    \/\/ Form submission\n    document.getElementById('applicationForm').addEventListener('submit', async (e) => {\n        e.preventDefault();\n        \n        const form = e.target;\n        const submitBtn = form.querySelector('.submit-btn');\n        const loading = document.getElementById('loading');\n        const result = document.getElementById('result');\n        const error = document.getElementById('error');\n        \n        \/\/ Hide previous results\n        result.style.display = 'none';\n        error.style.display = 'none';\n        \n        \/\/ Show loading\n        submitBtn.disabled = true;\n        loading.style.display = 'block';\n        \n        try {\n            \/\/ Prepare form data\n            const formData = {\n                applicant_name: form.applicant_name.value,\n                applicant_email: form.applicant_email.value,\n                applicant_phone: form.applicant_phone.value,\n                skills: form.skills.value,\n                job_title: form.job_title.value,\n                company_name: form.company_name.value,\n                job_description: form.job_description.value\n            };\n            \n            \/\/ Handle file uploads (convert to base64 if needed)\n            if (cvFileInput.files.length > 0) {\n                formData.cv_file = await fileToBase64(cvFileInput.files[0]);\n            }\n            \n            if (coverLetterFileInput.files.length > 0) {\n                formData.cover_letter_file = await fileToBase64(coverLetterFileInput.files[0]);\n            }\n            \n            \/\/ Send to n8n webhook\n            const response = await fetch(WEBHOOK_URL, {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                },\n                body: JSON.stringify(formData)\n            });\n            \n            if (!response.ok) {\n                throw new Error(`Server responded with ${response.status}`);\n            }\n            \n            const data = await response.json();\n            \n            \/\/ Display results\n            loading.style.display = 'none';\n            result.style.display = 'block';\n            \n            const resultLinks = document.getElementById('resultLinks');\n            resultLinks.innerHTML = `\n                <a href=\"${data.coverLetterUrl}\" target=\"_blank\" class=\"result-link\">\n                    <strong>\ud83d\udcc4 Cover Letter<\/strong>\n                    Click to open in Google Docs\n                <\/a>\n                <a href=\"${data.cvUrl}\" target=\"_blank\" class=\"result-link\">\n                    <strong>\ud83d\udccb Customized CV<\/strong>\n                    Click to open in Google Docs\n                <\/a>\n            `;\n            \n            \/\/ Scroll to results\n            result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n            \n        } catch (err) {\n            console.error('Error:', err);\n            loading.style.display = 'none';\n            error.style.display = 'block';\n            document.getElementById('errorMessage').textContent = \n                'Something went wrong. Please try again or contact support if the problem persists. Error: ' + err.message;\n        } finally {\n            submitBtn.disabled = false;\n        }\n    });\n    \n    \/\/ Helper function to convert file to base64\n    function fileToBase64(file) {\n        return new Promise((resolve, reject) => {\n            const reader = new FileReader();\n            reader.readAsDataURL(file);\n            reader.onload = () => resolve(reader.result);\n            reader.onerror = error => reject(error);\n        });\n    }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AI-Powered Job Application Generator Create a customized cover letter and CV tailored to any job in seconds Full Name * Email Address * Phone Number * Your Skills &#038; Experience [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5906","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/comments?post=5906"}],"version-history":[{"count":7,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5906\/revisions"}],"predecessor-version":[{"id":5950,"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/pages\/5906\/revisions\/5950"}],"wp:attachment":[{"href":"https:\/\/access4all.uk\/index.php\/wp-json\/wp\/v2\/media?parent=5906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}