|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>WebTest AI | Automated Website Analysis</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
body { |
|
font-family: 'Inter', sans-serif; |
|
background-color: #ffffff; |
|
color: #343541; |
|
} |
|
|
|
.chatgpt-bg { |
|
background-color: #343541; |
|
} |
|
|
|
.chatgpt-light-bg { |
|
background-color: #444654; |
|
} |
|
|
|
.chatgpt-green { |
|
background-color: #10a37f; |
|
} |
|
|
|
.chatgpt-green-hover:hover { |
|
background-color: #0d8c6d; |
|
} |
|
|
|
.chatgpt-text-green { |
|
color: #10a37f; |
|
} |
|
|
|
.chatgpt-border { |
|
border-color: #565869; |
|
} |
|
|
|
.chatgpt-message { |
|
background-color: #444654; |
|
} |
|
|
|
.chatgpt-user-message { |
|
background-color: #343541; |
|
} |
|
|
|
.loading-spinner { |
|
width: 48px; |
|
height: 48px; |
|
border: 5px solid rgba(255, 255, 255, 0.2); |
|
border-radius: 50%; |
|
border-top-color: #ffffff; |
|
animation: spin 1s ease-in-out infinite; |
|
} |
|
|
|
@keyframes spin { |
|
to { transform: rotate(360deg); } |
|
} |
|
|
|
.tab-button { |
|
position: relative; |
|
padding-bottom: 8px; |
|
} |
|
|
|
.tab-button.active::after { |
|
content: ''; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
height: 2px; |
|
background-color: #10a37f; |
|
animation: underline 0.3s ease-out; |
|
} |
|
|
|
@keyframes underline { |
|
from { transform: scaleX(0); } |
|
to { transform: scaleX(1); } |
|
} |
|
|
|
.code-block { |
|
background-color: #343541; |
|
color: #ffffff; |
|
padding: 12px; |
|
border-radius: 6px; |
|
font-family: 'Menlo', 'Monaco', 'Courier New', monospace; |
|
font-size: 14px; |
|
overflow-x: auto; |
|
} |
|
|
|
.progress-ring { |
|
transform: rotate(-90deg); |
|
} |
|
|
|
.progress-ring-circle { |
|
stroke-dasharray: 283; |
|
stroke-dashoffset: 283; |
|
transition: stroke-dashoffset 0.6s ease; |
|
} |
|
|
|
|
|
::-webkit-scrollbar { |
|
width: 8px; |
|
} |
|
|
|
::-webkit-scrollbar-track { |
|
background: #343541; |
|
} |
|
|
|
::-webkit-scrollbar-thumb { |
|
background: #565869; |
|
border-radius: 4px; |
|
} |
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
background: #6e6f80; |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
<div class="chatgpt-bg min-h-[320px]"> |
|
<div class="container mx-auto px-4 py-8"> |
|
<header class="flex justify-between items-center mb-12"> |
|
<div class="flex items-center"> |
|
<div class="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center mr-3"> |
|
<i class="fas fa-bolt text-white text-xl"></i> |
|
</div> |
|
<h1 class="text-white text-2xl font-bold">WebTest AI</h1> |
|
</div> |
|
<nav class="hidden md:flex space-x-8"> |
|
<a href="#" class="text-white/80 hover:text-white transition">Features</a> |
|
<a href="#" class="text-white/80 hover:text-white transition">Pricing</a> |
|
<a href="#" class="text-white/80 hover:text-white transition">Docs</a> |
|
<a href="#" class="text-white/80 hover:text-white transition">Contact</a> |
|
</nav> |
|
<button class="bg-white text-gray-800 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> |
|
Sign In |
|
</button> |
|
</header> |
|
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
<h2 class="text-4xl font-bold text-white mb-6">Automated Website Testing & Analysis</h2> |
|
<p class="text-xl text-white/80 mb-8">AI-powered insights for performance, accessibility, and UX best practices</p> |
|
|
|
<div class="bg-white/5 rounded-xl p-1 shadow-lg"> |
|
<div class="flex flex-col md:flex-row gap-1 bg-white/5 rounded-lg"> |
|
<input type="url" id="urlInput" placeholder="Enter website URL (e.g., https://example.com)" |
|
class="flex-grow px-5 py-4 bg-white/5 text-white placeholder-white/50 rounded-lg focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
<button id="runTestsBtn" class="chatgpt-green hover:chatgpt-green-hover text-white px-6 py-4 rounded-lg font-medium transition flex items-center justify-center"> |
|
<i class="fas fa-play mr-2"></i> Analyze |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-6 flex flex-wrap justify-center gap-4"> |
|
<div class="flex items-center text-white/80 text-sm"> |
|
<i class="fas fa-check-circle mr-2 text-white"></i> Automated testing |
|
</div> |
|
<div class="flex items-center text-white/80 text-sm"> |
|
<i class="fas fa-check-circle mr-2 text-white"></i> AI recommendations |
|
</div> |
|
<div class="flex items-center text-white/80 text-sm"> |
|
<i class="fas fa-check-circle mr-2 text-white"></i> Accessibility audit |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container mx-auto px-4 py-12 -mt-20"> |
|
<div id="loadingIndicator" class="hidden"> |
|
<div class="bg-white rounded-xl shadow-lg p-8 text-center max-w-2xl mx-auto"> |
|
<div class="loading-spinner mx-auto mb-6"></div> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Analyzing your website</h3> |
|
<p class="text-gray-500 mb-6">We're running comprehensive tests and generating AI-powered insights...</p> |
|
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-4"> |
|
<div id="progressBar" class="chatgpt-green h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
<p id="progressText" class="text-sm text-gray-500">Initializing analysis engine</p> |
|
|
|
<div id="aiChatContainer" class="mt-8 text-left hidden"> |
|
<h4 class="text-lg font-medium text-gray-800 mb-3">AI Analysis Progress</h4> |
|
<div id="aiChat" class="space-y-3 max-h-60 overflow-y-auto p-4 bg-gray-50 rounded-lg"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="resultsContainer" class="hidden"> |
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12"> |
|
<div class="flex overflow-x-auto px-6 border-b chatgpt-border"> |
|
<button class="tab-button active px-4 py-4 font-medium text-gray-500 hover:text-gray-800 transition" data-tab="summary"> |
|
Summary |
|
</button> |
|
<button class="tab-button px-4 py-4 font-medium text-gray-500 hover:text-gray-800 transition" data-tab="functional"> |
|
Functional Tests |
|
</button> |
|
<button class="tab-button px-4 py-4 font-medium text-gray-500 hover:text-gray-800 transition" data-tab="ux"> |
|
UX Analysis |
|
</button> |
|
<button class="tab-button px-4 py-4 font-medium text-gray-500 hover:text-gray-800 transition" data-tab="accessibility"> |
|
Accessibility |
|
</button> |
|
<button class="tab-button px-4 py-4 font-medium text-gray-500 hover:text-gray-800 transition" data-tab="ai"> |
|
AI Review |
|
</button> |
|
</div> |
|
|
|
<div id="summary" class="tab-content p-8"> |
|
<div class="flex flex-col md:flex-row gap-8 mb-8"> |
|
<div class="flex-1"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Test Overview</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
<div class="bg-gray-50 p-5 rounded-xl"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-medium text-gray-700">Functional Tests</h4> |
|
<span id="functionalScore" class="text-gray-500">0/0</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div id="functionalProgress" class="chatgpt-green h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
<div class="bg-gray-50 p-5 rounded-xl"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-medium text-gray-700">UX Score</h4> |
|
<span id="uxScore" class="text-gray-500">0%</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div id="uxProgress" class="chatgpt-green h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
<div class="bg-gray-50 p-5 rounded-xl"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-medium text-gray-700">Accessibility</h4> |
|
<span id="accessibilityScore" class="text-gray-500">0/100</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div id="accessibilityProgress" class="chatgpt-green h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
<div class="bg-gray-50 p-5 rounded-xl"> |
|
<div class="flex items-center justify-between mb-3"> |
|
<h4 class="font-medium text-gray-700">Performance</h4> |
|
<span id="performanceScore" class="text-gray-500">0/100</span> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
<div id="performanceProgress" class="chatgpt-green h-2 rounded-full" style="width: 0%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-64 flex flex-col items-center justify-center"> |
|
<div class="relative w-40 h-40 mb-4"> |
|
<svg class="progress-ring w-full h-full" viewBox="0 0 100 100"> |
|
<circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50"/> |
|
<circle id="overallScoreRing" class="progress-ring-circle text-green-600" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="45" cx="50" cy="50"/> |
|
</svg> |
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
<span id="overallScore" class="text-3xl font-bold text-gray-800">0%</span> |
|
</div> |
|
</div> |
|
<p class="text-gray-500 text-center">Overall website score based on all test criteria</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-8"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Key Findings</h3> |
|
<div id="keyFindings" class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div class="mb-8"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Visual Issues</h3> |
|
<div id="visualIssues" class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div class="flex flex-col md:flex-row gap-4 justify-between items-center pt-6 border-t border-gray-200"> |
|
<div class="text-sm text-gray-500"> |
|
Analysis completed: <span id="analysisDate" class="font-medium">Just now</span> |
|
</div> |
|
<div class="flex gap-3"> |
|
<button id="downloadReportBtn" class="chatgpt-green hover:chatgpt-green-hover text-white px-5 py-2.5 rounded-lg font-medium transition flex items-center"> |
|
<i class="fas fa-download mr-2"></i> Download Report |
|
</button> |
|
<button id="shareResultsBtn" class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-5 py-2.5 rounded-lg font-medium transition flex items-center"> |
|
<i class="fas fa-share-alt mr-2"></i> Share |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="functional" class="tab-content p-8 hidden"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Functional Test Results</h3> |
|
<p class="text-gray-500 mb-6">Automated tests performed using headless browser technology</p> |
|
|
|
<div id="functionalResults" class="space-y-4"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div id="ux" class="tab-content p-8 hidden"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">UX Analysis</h3> |
|
<p class="text-gray-500 mb-6">Identified UX issues based on industry best practices</p> |
|
|
|
<div id="uxResults" class="space-y-6"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div id="accessibility" class="tab-content p-8 hidden"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Accessibility Issues</h3> |
|
<p class="text-gray-500 mb-6">WCAG 2.1 compliance issues identified</p> |
|
|
|
<div id="accessibilityResults" class="space-y-4"> |
|
|
|
</div> |
|
</div> |
|
|
|
<div id="ai" class="tab-content p-8 hidden"> |
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">AI-Powered Code Review</h3> |
|
<p class="text-gray-500 mb-6">Advanced analysis of HTML/CSS structure and patterns</p> |
|
|
|
<div id="aiAnalysisResults" class="space-y-8"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> |
|
<div class="bg-white p-6 rounded-xl shadow"> |
|
<div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4"> |
|
<i class="fas fa-bolt text-blue-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-lg mb-2">Lightning Fast</h4> |
|
<p class="text-gray-500">Get comprehensive test results in seconds with our optimized testing engine.</p> |
|
</div> |
|
<div class="bg-white p-6 rounded-xl shadow"> |
|
<div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4"> |
|
<i class="fas fa-robot text-purple-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-lg mb-2">AI-Powered</h4> |
|
<p class="text-gray-500">Our AI identifies issues human testers might miss and provides actionable recommendations.</p> |
|
</div> |
|
<div class="bg-white p-6 rounded-xl shadow"> |
|
<div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4"> |
|
<i class="fas fa-chart-line text-green-600 text-xl"></i> |
|
</div> |
|
<h4 class="font-semibold text-lg mb-2">Detailed Reports</h4> |
|
<p class="text-gray-500">Export professional PDF reports to share with your team or clients.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
<div class="container mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
|
<div> |
|
<h5 class="text-lg font-semibold mb-4">WebTest AI</h5> |
|
<p class="text-gray-400">Automated website testing powered by AI for developers and designers.</p> |
|
</div> |
|
<div> |
|
<h5 class="text-lg font-semibold mb-4">Product</h5> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h5 class="text-lg font-semibold mb-4">Resources</h5> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h5 class="text-lg font-semibold mb-4">Company</h5> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 WebTest AI. All rights reserved.</p> |
|
<div class="flex space-x-6"> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github"></i></a> |
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin"></i></a> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const mockTestResults = { |
|
functional: [ |
|
{ name: "Page Load", status: "pass", description: "The page loaded successfully within 2.1 seconds." }, |
|
{ name: "Main Navigation", status: "pass", description: "All navigation links are working correctly." }, |
|
{ name: "Contact Form Submission", status: "fail", description: "Form submission fails with 500 error.", element: "#contact-form" }, |
|
{ name: "Mobile Responsiveness", status: "pass", description: "Page layout adapts well to mobile screens." }, |
|
{ name: "Image Loading", status: "fail", description: "3 images failed to load (404 errors).", elements: [".hero-image", ".product-img-2", ".logo"] }, |
|
{ name: "Button Functionality", status: "fail", description: "2 buttons are not clickable on mobile.", elements: [".cta-button", ".menu-toggle"] } |
|
], |
|
ux: [ |
|
{ issue: "Color Misuse", severity: "high", description: "Red color used for confirmation buttons which typically indicate danger.", recommendation: "Use green or blue for confirmation actions. Reserve red for destructive actions.", element: ".confirm-btn", screenshot: "https://via.placeholder.com/600x400/FF0000/FFFFFF?text=Red+Confirmation+Button" }, |
|
{ issue: "Button Placement", severity: "medium", description: "Primary call-to-action button is not prominent enough.", recommendation: "Increase button size by 20% and use a more contrasting color.", element: ".primary-cta", screenshot: "https://via.placeholder.com/600x400/CCCCCC/000000?text=Weak+CTA" }, |
|
{ issue: "Form Labels", severity: "high", description: "5 form fields are missing proper labels.", recommendation: "Add descriptive labels to all form fields and ensure they're properly associated.", elements: ["#email-input", "#password-input", "#search-field"], screenshot: "https://via.placeholder.com/600x400/FFFFFF/000000?text=Unlabeled+Form" } |
|
], |
|
accessibility: [ |
|
{ issue: "Missing Alt Text", severity: "high", description: "9 images are missing alt text attributes.", recommendation: "Add descriptive alt text to all images for screen readers.", elements: [".hero-image", ".product-img", ".logo"], screenshot: "https://via.placeholder.com/600x400/FFFFFF/000000?text=Image+No+Alt" }, |
|
{ issue: "Heading Structure", severity: "medium", description: "Heading levels skip from h2 to h4 creating hierarchy confusion.", recommendation: "Maintain a consistent heading hierarchy (h1 > h2 > h3).", elements: ["h2.main-title", "h4.subsection"], screenshot: "https://via.placeholder.com/600x400/FFFFFF/000000?text=Heading+Structure" }, |
|
{ issue: "Low Contrast", severity: "medium", description: "Text contrast ratio of 3.8:1 for body text (should be at least 4.5:1).", recommendation: "Increase contrast between text and background colors.", elements: [".light-text", ".footer-links"], screenshot: "https://via.placeholder.com/600x400/CCCCCC/FFFFFF?text=Low+Contrast" } |
|
], |
|
aiAnalysis: [ |
|
{ |
|
category: "HTML Structure", |
|
findings: [ |
|
"Semantic HTML misuse: 4 divs could be replaced with proper semantic elements (nav, section, article)", |
|
"Missing lang attribute in html tag", |
|
"No viewport meta tag for responsive behavior" |
|
], |
|
recommendations: [ |
|
"Replace generic divs with semantic HTML5 elements", |
|
"Add lang attribute to html tag (e.g., <html lang='en'>)", |
|
"Add viewport meta tag: <meta name='viewport' content='width=device-width, initial-scale=1'>" |
|
], |
|
codeExamples: [ |
|
{ |
|
bad: "<div class='nav'>...</div>", |
|
good: "<nav>...</nav>" |
|
}, |
|
{ |
|
bad: "<div class='content-section'>...</div>", |
|
good: "<section>...</section>" |
|
} |
|
] |
|
}, |
|
{ |
|
category: "CSS Practices", |
|
findings: [ |
|
"Overuse of !important (12 instances)", |
|
"Color values defined in multiple places (inconsistent branding)", |
|
"Media queries not mobile-first" |
|
], |
|
recommendations: [ |
|
"Remove all !important declarations and refactor specificity", |
|
"Use CSS variables for brand colors", |
|
"Restructure media queries to follow mobile-first approach" |
|
], |
|
codeExamples: [ |
|
{ |
|
bad: ".button { color: red !important; }", |
|
good: ":root { --primary-color: #EF4444; }\n.button { color: var(--primary-color); }" |
|
} |
|
] |
|
}, |
|
{ |
|
category: "JavaScript", |
|
findings: [ |
|
"jQuery used where native methods would suffice", |
|
"No error handling for API calls", |
|
"Event listeners not properly removed" |
|
], |
|
recommendations: [ |
|
"Replace simple jQuery selectors with document.querySelector", |
|
"Add try/catch blocks for all API calls", |
|
"Implement proper cleanup of event listeners" |
|
], |
|
codeExamples: [ |
|
{ |
|
bad: "$('.button').click(function() {...});", |
|
good: "document.querySelector('.button').addEventListener('click', () => {...});" |
|
} |
|
] |
|
} |
|
], |
|
summary: { |
|
functionalScore: "3/6", |
|
functionalPercentage: 50, |
|
uxScore: "45%", |
|
accessibilityScore: "68/100", |
|
performanceScore: "82/100", |
|
overallScore: 65, |
|
keyFindings: [ |
|
"Critical accessibility issue: 9 images missing alt text", |
|
"Form submission fails with server error", |
|
"Color misuse: red used for confirmation actions", |
|
"Semantic HTML structure needs improvement", |
|
"Multiple CSS anti-patterns detected" |
|
], |
|
screenshots: [ |
|
{ |
|
url: "https://via.placeholder.com/600x400/FF0000/FFFFFF?text=Red+Confirmation+Button", |
|
description: "Red color used for confirmation button" |
|
}, |
|
{ |
|
url: "https://via.placeholder.com/600x400/FFFFFF/000000?text=Unlabeled+Form", |
|
description: "Form fields missing labels" |
|
} |
|
] |
|
} |
|
}; |
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
document.querySelectorAll('.tab-button').forEach(b => { |
|
b.classList.remove('active', 'text-gray-800'); |
|
b.classList.add('text-gray-500'); |
|
}); |
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden')); |
|
|
|
btn.classList.add('active', 'text-gray-800'); |
|
btn.classList.remove('text-gray-500'); |
|
const tabId = btn.getAttribute('data-tab'); |
|
document.getElementById(tabId).classList.remove('hidden'); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('runTestsBtn').addEventListener('click', async () => { |
|
const url = document.getElementById('urlInput').value.trim(); |
|
if (!url) { |
|
alert('Please enter a valid URL'); |
|
return; |
|
} |
|
|
|
|
|
document.getElementById('loadingIndicator').classList.remove('hidden'); |
|
document.getElementById('resultsContainer').classList.add('hidden'); |
|
document.getElementById('aiChatContainer').classList.remove('hidden'); |
|
|
|
|
|
addAIMessage("Initializing website analysis for: " + url); |
|
addAIMessage("Starting headless browser session to capture page structure..."); |
|
|
|
|
|
let progress = 0; |
|
const progressInterval = setInterval(() => { |
|
progress += Math.random() * 10; |
|
if (progress > 100) progress = 100; |
|
document.getElementById('progressBar').style.width = `${progress}%`; |
|
document.getElementById('progressText').textContent = getProgressMessage(progress); |
|
|
|
|
|
if (progress > 20 && progress < 25) { |
|
addAIMessage("Capturing page structure and generating test cases..."); |
|
} |
|
if (progress > 40 && progress < 45) { |
|
addAIMessage("Analyzing color usage and contrast ratios..."); |
|
} |
|
if (progress > 60 && progress < 65) { |
|
addAIMessage("Evaluating semantic HTML structure..."); |
|
} |
|
if (progress > 80 && progress < 85) { |
|
addAIMessage("Generating improvement recommendations..."); |
|
} |
|
|
|
if (progress === 100) { |
|
clearInterval(progressInterval); |
|
addAIMessage("Analysis complete! Generating final report..."); |
|
setTimeout(() => { |
|
showResults(); |
|
}, 1000); |
|
} |
|
}, 500); |
|
}); |
|
|
|
function addAIMessage(message) { |
|
const chatContainer = document.getElementById('aiChat'); |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = 'flex items-start'; |
|
messageDiv.innerHTML = ` |
|
<div class="flex-shrink-0 mr-3 mt-1"> |
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
|
<i class="fas fa-robot text-blue-600"></i> |
|
</div> |
|
</div> |
|
<div class="bg-gray-100 px-4 py-2 rounded-lg text-gray-700">${message}</div> |
|
`; |
|
chatContainer.appendChild(messageDiv); |
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
} |
|
|
|
function getProgressMessage(progress) { |
|
if (progress < 20) return "Initializing AI analysis engine..."; |
|
if (progress < 40) return "Capturing page structure..."; |
|
if (progress < 60) return "Running automated tests..."; |
|
if (progress < 80) return "Analyzing UX patterns..."; |
|
if (progress < 95) return "Generating recommendations..."; |
|
return "Finalizing report..."; |
|
} |
|
|
|
function showResults() { |
|
document.getElementById('loadingIndicator').classList.add('hidden'); |
|
document.getElementById('resultsContainer').classList.remove('hidden'); |
|
|
|
|
|
const now = new Date(); |
|
document.getElementById('analysisDate').textContent = now.toLocaleString(); |
|
|
|
|
|
const overallScore = mockTestResults.summary.overallScore; |
|
const circumference = 283; |
|
const offset = circumference - (overallScore / 100) * circumference; |
|
document.getElementById('overallScoreRing').style.strokeDashoffset = offset; |
|
document.getElementById('overallScore').textContent = `${overallScore}%`; |
|
|
|
|
|
document.getElementById('functionalScore').textContent = mockTestResults.summary.functionalScore; |
|
document.getElementById('functionalProgress').style.width = `${mockTestResults.summary.functionalPercentage}%`; |
|
document.getElementById('uxScore').textContent = mockTestResults.summary.uxScore; |
|
document.getElementById('uxProgress').style.width = mockTestResults.summary.uxScore; |
|
document.getElementById('accessibilityScore').textContent = mockTestResults.summary.accessibilityScore; |
|
document.getElementById('accessibilityProgress').style.width = mockTestResults.summary.accessibilityScore; |
|
document.getElementById('performanceScore').textContent = mockTestResults.summary.performanceScore; |
|
document.getElementById('performanceProgress').style.width = mockTestResults.summary.performanceScore; |
|
|
|
const keyFindingsContainer = document.getElementById('keyFindings'); |
|
keyFindingsContainer.innerHTML = ''; |
|
mockTestResults.summary.keyFindings.forEach(finding => { |
|
const div = document.createElement('div'); |
|
div.className = 'bg-gray-50 p-4 rounded-lg'; |
|
div.innerHTML = ` |
|
<div class="flex items-start"> |
|
<span class="flex-shrink-0 mt-1 mr-3"> |
|
<i class="fas ${finding.includes('Critical') ? 'fa-exclamation-circle text-red-500' : 'fa-info-circle text-blue-500'}"></i> |
|
</span> |
|
<span class="text-gray-700">${finding}</span> |
|
</div> |
|
`; |
|
keyFindingsContainer.appendChild(div); |
|
}); |
|
|
|
|
|
const visualIssuesContainer = document.getElementById('visualIssues'); |
|
visualIssuesContainer.innerHTML = ''; |
|
mockTestResults.summary.screenshots.forEach(screenshot => { |
|
const div = document.createElement('div'); |
|
div.className = 'bg-white p-3 rounded-lg border border-gray-200'; |
|
div.innerHTML = ` |
|
<img src="${screenshot.url}" alt="${screenshot.description}" class="w-full h-auto rounded mb-2"> |
|
<p class="text-sm text-gray-600">${screenshot.description}</p> |
|
`; |
|
visualIssuesContainer.appendChild(div); |
|
}); |
|
|
|
|
|
const functionalResultsContainer = document.getElementById('functionalResults'); |
|
functionalResultsContainer.innerHTML = ''; |
|
mockTestResults.functional.forEach(test => { |
|
const div = document.createElement('div'); |
|
div.className = `p-4 rounded-lg mb-3 ${ |
|
test.status === 'pass' ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200' |
|
}`; |
|
|
|
let elementsHtml = ''; |
|
if (test.element) { |
|
elementsHtml = `<p class="mt-1 text-sm text-gray-500">Element: <code class="bg-gray-100 px-1 py-0.5 rounded">${test.element}</code></p>`; |
|
} else if (test.elements) { |
|
elementsHtml = `<p class="mt-1 text-sm text-gray-500">Elements: ${test.elements.map(el => `<code class="bg-gray-100 px-1 py-0.5 rounded">${el}</code>`).join(', ')}</p>`; |
|
} |
|
|
|
div.innerHTML = ` |
|
<div class="flex justify-between items-start"> |
|
<h3 class="font-medium">${test.name}</h3> |
|
<span class="px-3 py-1 rounded-full text-xs font-medium ${ |
|
test.status === 'pass' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' |
|
}"> |
|
${test.status === 'pass' ? 'PASS' : 'FAIL'} |
|
</span> |
|
</div> |
|
<p class="mt-2 text-gray-600">${test.description}</p> |
|
${elementsHtml} |
|
`; |
|
functionalResultsContainer.appendChild(div); |
|
}); |
|
|
|
|
|
const uxResultsContainer = document.getElementById('uxResults'); |
|
uxResultsContainer.innerHTML = ''; |
|
mockTestResults.ux.forEach(issue => { |
|
const div = document.createElement('div'); |
|
div.className = `p-5 rounded-lg border ${ |
|
issue.severity === 'high' ? 'border-red-200 bg-red-50' : |
|
issue.severity === 'medium' ? 'border-yellow-200 bg-yellow-50' : |
|
'border-green-200 bg-green-50' |
|
}`; |
|
|
|
let screenshotHtml = ''; |
|
if (issue.screenshot) { |
|
screenshotHtml = ` |
|
<div class="mt-4"> |
|
<p class="text-sm text-gray-500 mb-1">Screenshot:</p> |
|
<img src="${issue.screenshot}" alt="${issue.issue}" class="w-full h-auto rounded"> |
|
</div> |
|
`; |
|
} |
|
|
|
div.innerHTML = ` |
|
<div class="flex justify-between items-start"> |
|
<h3 class="font-medium">${issue.issue}</h3> |
|
<span class="px-3 py-1 rounded-full text-xs font-medium ${ |
|
issue.severity === 'high' ? 'bg-red-100 text-red-800' : |
|
issue.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : |
|
'bg-green-100 text-green-800' |
|
}"> |
|
${issue.severity.toUpperCase()} |
|
</span> |
|
</div> |
|
<p class="mt-2 text-gray-600">${issue.description}</p> |
|
${issue.element ? `<p class="mt-1 text-sm text-gray-500">Element: <code class="bg-gray-100 px-1 py-0.5 rounded">${issue.element}</code></p>` : ''} |
|
<div class="mt-3 p-3 bg-white rounded border border-gray-200"> |
|
<h4 class="font-medium text-gray-800 mb-1">Recommendation</h4> |
|
<p class="text-gray-700">${issue.recommendation}</p> |
|
</div> |
|
${screenshotHtml} |
|
`; |
|
uxResultsContainer.appendChild(div); |
|
}); |
|
|
|
|
|
const accessibilityResultsContainer = document.getElementById('accessibilityResults'); |
|
accessibilityResultsContainer.innerHTML = ''; |
|
mockTestResults.accessibility.forEach(issue => { |
|
const div = document.createElement('div'); |
|
div.className = `p-5 rounded-lg border ${ |
|
issue.severity === 'high' ? 'border-red-200 bg-red-50' : |
|
issue.severity === 'medium' ? 'border-yellow-200 bg-yellow-50' : |
|
'border-green-200 bg-green-50' |
|
}`; |
|
|
|
let screenshotHtml = ''; |
|
if (issue.screenshot) { |
|
screenshotHtml = ` |
|
<div class="mt-4"> |
|
<p class="text-sm text-gray-500 mb-1">Screenshot:</p> |
|
<img src="${issue.screenshot}" alt="${issue.issue}" class="w-full h-auto rounded"> |
|
</div> |
|
`; |
|
} |
|
|
|
div.innerHTML = ` |
|
<div class="flex justify-between items-start"> |
|
<h3 class="font-medium">${issue.issue}</h3> |
|
<span class="px-3 py-1 rounded-full text-xs font-medium ${ |
|
issue.severity === 'high' ? 'bg-red-100 text-red-800' : |
|
issue.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : |
|
'bg-green-100 text-green-800' |
|
}"> |
|
${issue.severity.toUpperCase()} |
|
</span> |
|
</div> |
|
<p class="mt-2 text-gray-600">${issue.description}</p> |
|
${issue.elements ? `<p class="mt-1 text-sm text-gray-500">Elements: ${issue.elements.map(el => `<code class="bg-gray-100 px-1 py-0.5 rounded">${el}</code>`).join(', ')}</p>` : ''} |
|
<div class="mt-3 p-3 bg-white rounded border border-gray-200"> |
|
<h4 class="font-medium text-gray-800 mb-1">Recommendation</h4> |
|
<p class="text-gray-700">${issue.recommendation}</p> |
|
</div> |
|
${screenshotHtml} |
|
`; |
|
accessibilityResultsContainer.appendChild(div); |
|
}); |
|
|
|
|
|
const aiAnalysisContainer = document.getElementById('aiAnalysisResults'); |
|
aiAnalysisContainer.innerHTML = ''; |
|
mockTestResults.aiAnalysis.forEach(category => { |
|
const div = document.createElement('div'); |
|
div.className = 'bg-white p-5 rounded-lg border border-gray-200 shadow-sm'; |
|
|
|
let findingsHtml = '<ul class="list-disc pl-5 mt-2 space-y-1">'; |
|
category.findings.forEach(finding => { |
|
findingsHtml += `<li class="text-gray-700">${finding}</li>`; |
|
}); |
|
findingsHtml += '</ul>'; |
|
|
|
let recommendationsHtml = '<ul class="list-disc pl-5 mt-2 space-y-1">'; |
|
category.recommendations.forEach(recommendation => { |
|
recommendationsHtml += `<li class="text-green-600">${recommendation}</li>`; |
|
}); |
|
recommendationsHtml += '</ul>'; |
|
|
|
let codeExamplesHtml = ''; |
|
if (category.codeExamples && category.codeExamples.length > 0) { |
|
codeExamplesHtml = '<div class="mt-4 space-y-4">'; |
|
category.codeExamples.forEach(example => { |
|
codeExamplesHtml += ` |
|
<div> |
|
<p class="text-sm font-medium text-gray-700 mb-1">Bad Practice:</p> |
|
<div class="code-block">${example.bad}</div> |
|
<p class="text-sm font-medium text-gray-700 mt-3 mb-1">Recommended:</p> |
|
<div class="code-block">${example.good}</div> |
|
</div> |
|
`; |
|
}); |
|
codeExamplesHtml += '</div>'; |
|
} |
|
|
|
div.innerHTML = ` |
|
<h3 class="text-lg font-semibold text-gray-800 mb-3">${category.category}</h3> |
|
<div class="mt-3"> |
|
<h4 class="font-medium text-gray-700">Findings:</h4> |
|
${findingsHtml} |
|
</div> |
|
<div class="mt-4"> |
|
<h4 class="font-medium text-green-600">Recommendations:</h4> |
|
${recommendationsHtml} |
|
</div> |
|
${codeExamplesHtml} |
|
`; |
|
aiAnalysisContainer.appendChild(div); |
|
}); |
|
} |
|
|
|
|
|
document.getElementById('downloadReportBtn').addEventListener('click', () => { |
|
alert('In a real implementation, this would generate and download a PDF report with all test results and AI recommendations.'); |
|
}); |
|
|
|
|
|
document.getElementById('shareResultsBtn').addEventListener('click', () => { |
|
alert('In a real implementation, this would allow sharing results via email or generating a shareable link.'); |
|
}); |
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
|
|
|
|
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Doeee/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
