KhalidMarjan.com logo with a green dot icon and white stylized text
Let's talk

Free Website SEO Audit

 

 

 

 

 

 

body { font-family: 'Inter', sans-serif; } /* Custom pulsing animation for the button */ @keyframes pulse-ring { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } .btn-pulse { animation: pulse-ring 2s infinite; } /* Loading Bar Animation */ .loading-bar-fill { transition: width 0.5s ease-in-out; } /* Smooth fade in for results */ .fade-in { animation: fadeIn 1s ease-in forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

KM
Khalid Marjan
 
 
Limited Time Offer

Is Your Website Costing You Money?

Get a Free SEO Audit Instantly. Uncover the hidden errors killing your traffic and conversions.

No Credit Card Required Instant Analysis Actionable Insights

Enter Your Details to Start Scanning

 
 
 
 
 

Please include https://

© 2023 Khalid Marjan Digital. All rights reserved.

// --- CONFIGURATION --- // 1. EMAILJS CONFIGURATION // Sign up at https://www.emailjs.com/ const EMAILJS_PUBLIC_KEY = "Gd82GKinFS5Wj-GYZ"; const EMAILJS_SERVICE_ID = "service_42516ee"; const EMAILJS_TEMPLATE_ID = "template_4lafykf"; // 2. PAGESPEED INSIGHTS API CONFIGURATION // Get key: https://developers.google.com/speed/docs/insights/v5/get-started const PAGESPEED_API_KEY = "AIzaSyD-468i8P9lq99BuIV7ILg9yxuh9jGXO98"; // Initialize EmailJS (function() { // Only initialize if key is set, otherwise console warning if(EMAILJS_PUBLIC_KEY !== "YOUR_PUBLIC_KEY"){ emailjs.init(EMAILJS_PUBLIC_KEY); } else { console.warn("EmailJS Public Key not set. Emails will not send."); } })(); // DOM Elements const form = document.getElementById('leadForm'); const submitBtn = document.getElementById('submitBtn'); const loadingSection = document.getElementById('loadingSection'); const reportSection = document.getElementById('reportSection'); const progressBar = document.getElementById('progressBar'); const loadingText = document.getElementById('loadingText'); form.addEventListener('submit', function(e) { e.preventDefault(); // 1. Get Data const formData = { fullName: document.getElementById('fullName').value, businessName: document.getElementById('businessName').value, phone: document.getElementById('phone').value, email: document.getElementById('email').value, website: document.getElementById('website').value }; // 2. UI Updates: Hide Form Button, Show Loader submitBtn.classList.add('hidden'); loadingSection.classList.remove('hidden'); // 3. Send Email (Background) sendLeadData(formData); // 4. Start Loading Animation & Audit runAuditSequence(formData.website); }); function sendLeadData(data) { // Check if user has configured keys if (EMAILJS_PUBLIC_KEY === "YOUR_PUBLIC_KEY") { console.log("Simulating Email Send (Keys not configured):", data); return; } // Send via EmailJS emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, { from_name: data.fullName, business_name: data.businessName, phone_number: data.phone, reply_to: data.email, website_url: data.website, to_email: "info@khalidmarjan.com" }).then( function(response) { console.log('SUCCESS!', response.status, response.text); }, function(error) { console.log('FAILED...', error); } ); } async function runAuditSequence(url) { const steps = [ { text: "Resolving Host...", time: 500 }, { text: "Scanning Meta Tags...", time: 1500 }, { text: "Analyzing Image Compression...", time: 2500 }, { text: "Checking Server Response Time...", time: 3500 }, { text: "Generating Preliminary Report...", time: 4500 } ]; // Show simulated logs setTimeout(() => { document.getElementById('log1').classList.remove('opacity-0'); }, 1000); setTimeout(() => { document.getElementById('log2').classList.remove('opacity-0'); }, 2000); setTimeout(() => { document.getElementById('log3').classList.remove('opacity-0'); }, 3000); // Progress Bar Animation let progress = 0; const interval = setInterval(() => { progress += 1; progressBar.style.width = `${progress}%`; // Update text based on progress if(progress < 30) loadingText.innerText = steps[1].text; else if(progress < 60) loadingText.innerText = steps[2].text; else if(progress = 100) { clearInterval(interval); finishAudit(url); } }, 50); // Complete in approx 5 seconds } async function finishAudit(url) { let resultData; // Try Fetching Real Data try { if (PAGESPEED_API_KEY !== "YOUR_PAGESPEED_API_KEY") { resultData = await fetchPageSpeedData(url); } else { throw new Error("No API Key"); } } catch (error) { console.log("Using Simulation Mode due to error or missing key:", error); resultData = simulateAuditData(); } renderReport(resultData, url); } async function fetchPageSpeedData(url) { const endpoint = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(url)}&strategy=mobile&key=${PAGESPEED_API_KEY}`; const response = await fetch(endpoint); const data = await response.json(); // Extract metrics const score = data.lighthouseResult.categories.performance.score * 100; const lcp = data.lighthouseResult.audits['largest-contentful-paint'].displayValue; const cls = data.lighthouseResult.audits['cumulative-layout-shift'].displayValue; return { score: Math.round(score), lcp: lcp, cls: cls, errors: [ "Main thread work is blocked", "Serve images in next-gen formats", "Eliminate render-blocking resources" ] }; } function simulateAuditData() { // Generate random score between 60 and 80 const randomScore = Math.floor(Math.random() * (80 - 60 + 1)) + 60; return { score: randomScore, lcp: (Math.random() * (4.5 - 2.5) + 2.5).toFixed(1) + " s", // Random LCP between 2.5s and 4.5s cls: (Math.random() * (0.5 - 0.1) + 0.1).toFixed(2), // Random CLS errors: [ "Missing Meta Descriptions", "Image Optimization Required (Oversized Assets)", "Slow Server Response Time (TTFB > 1.2s)" ] }; } function renderReport(data, url) { // Hide Loader loadingSection.classList.add('hidden'); // Show Report reportSection.classList.remove('hidden'); // Populate Data document.getElementById('reportUrl').innerText = url; // Score Logic (Colors) const scoreEl = document.getElementById('performanceScore'); const scoreRing = document.getElementById('scoreRing'); scoreEl.innerText = data.score; if(data.score >= 90) { scoreRing.classList.add('border-green-500', 'text-green-600'); } else if (data.score >= 50) { scoreRing.classList.add('border-yellow-500', 'text-yellow-600'); } else { scoreRing.classList.add('border-red-500', 'text-red-600'); } // Web Vitals document.getElementById('lcpScore').innerText = data.lcp; document.getElementById('clsScore').innerText = data.cls; // Update Bars (Visual representation only) // Logic: Lower LCP is better (invert logic for bar width), CLS lower is better document.getElementById('lcpBar').style.width = "75%"; document.getElementById('lcpBar').classList.add('bg-yellow-400'); document.getElementById('clsBar').classList.add('bg-yellow-400'); // Errors List const errorList = document.getElementById('errorList'); errorList.innerHTML = ""; // Clear existing data.errors.forEach(err => { const li = document.createElement('li'); li.innerText = err; errorList.appendChild(li); }); // Scroll to report reportSection.scrollIntoView({ behavior: 'smooth' }); }

Scroll to Top