87bdacc22b
New Features: - 📄 Interactive page overview map showing issue severity - Color-coded page cards (red=critical, yellow=warning, green=good) - Click page cards to jump to that page's issues - Collapsible sections for each page - Issue grouping: Document-wide vs Page-specific - Visual icons for each issue category (🏗️📋🖼️🎨 etc) - Severity icons (🚨❌⚠️ℹ️✅) - Better "How to Fix" recommendations - Page sections collapse/expand with ▼▶ indicators Improvements: - Much easier to navigate multi-page PDFs - Visual heat map shows problem areas at a glance - Grouped by page makes fixing issues more systematic - Category icons help identify issue types quickly 🤖 Generated with Claude Code
1170 lines
44 KiB
HTML
1170 lines
44 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Enterprise PDF Accessibility Checker</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=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #FFC407;
|
||
--primary-dark: #e6b006;
|
||
--primary-darker: #cc9d05;
|
||
--black: #000000;
|
||
--success: #10b981;
|
||
--warning: #f59e0b;
|
||
--error: #ef4444;
|
||
--critical: #dc2626;
|
||
--info: #3b82f6;
|
||
--bg: #fafafa;
|
||
--surface: #ffffff;
|
||
--text: #000000;
|
||
--text-light: #4a4a4a;
|
||
--border: #e0e0e0;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
header {
|
||
background: var(--black);
|
||
border-bottom: 3px solid var(--primary);
|
||
padding: 30px 0;
|
||
margin-bottom: 40px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.card h2 {
|
||
font-size: 24px;
|
||
margin-bottom: 20px;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* Upload Area */
|
||
.upload-area {
|
||
border: 3px dashed var(--border);
|
||
border-radius: 12px;
|
||
padding: 60px 40px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.upload-area.dragover {
|
||
border-color: var(--primary);
|
||
background: rgba(37, 99, 235, 0.05);
|
||
}
|
||
|
||
.upload-area input[type="file"] {
|
||
display: none;
|
||
}
|
||
|
||
.upload-icon {
|
||
font-size: 64px;
|
||
margin-bottom: 20px;
|
||
color: var(--black);
|
||
}
|
||
|
||
.upload-text {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.upload-hint {
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--black);
|
||
color: var(--primary);
|
||
border: 2px solid var(--primary);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--primary);
|
||
color: var(--black);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--border);
|
||
color: var(--text);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #cbd5e1;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Progress */
|
||
.progress-container {
|
||
display: none;
|
||
padding: 20px;
|
||
background: #f1f5f9;
|
||
border-radius: 8px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.progress-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
|
||
.progress-percent {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 8px;
|
||
background: var(--border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: var(--primary);
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.progress-log {
|
||
background: white;
|
||
border: 2px solid var(--border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.log-header {
|
||
background: var(--black);
|
||
color: var(--primary);
|
||
padding: 12px 16px;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
border-bottom: 2px solid var(--primary);
|
||
}
|
||
|
||
.log-content {
|
||
padding: 16px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 13px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.log-entry {
|
||
padding: 8px 12px;
|
||
margin-bottom: 8px;
|
||
border-radius: 4px;
|
||
background: #f8f9fa;
|
||
border-left: 3px solid #ddd;
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
|
||
.log-entry.success {
|
||
background: rgba(16, 185, 129, 0.1);
|
||
border-left-color: var(--success);
|
||
color: #065f46;
|
||
}
|
||
|
||
.log-entry.warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
border-left-color: var(--warning);
|
||
color: #92400e;
|
||
}
|
||
|
||
.log-entry.error {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border-left-color: var(--error);
|
||
color: #991b1b;
|
||
}
|
||
|
||
.log-entry.info {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
border-left-color: var(--info);
|
||
color: #1e40af;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Results */
|
||
.results {
|
||
display: none;
|
||
}
|
||
|
||
.score-display {
|
||
text-align: center;
|
||
padding: 40px;
|
||
background: linear-gradient(135deg, var(--black) 0%, #1a1a1a 50%, var(--black) 100%);
|
||
border: 3px solid var(--primary);
|
||
border-radius: 12px;
|
||
color: white;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.score-display::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--primary);
|
||
}
|
||
|
||
.score-number {
|
||
font-size: 72px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.score-label {
|
||
font-size: 20px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-card.critical {
|
||
background: rgba(220, 38, 38, 0.1);
|
||
border: 2px solid var(--critical);
|
||
}
|
||
|
||
.stat-card.error {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border: 2px solid var(--error);
|
||
}
|
||
|
||
.stat-card.warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
border: 2px solid var(--warning);
|
||
}
|
||
|
||
.stat-card.info {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
border: 2px solid var(--info);
|
||
}
|
||
|
||
.stat-card.success {
|
||
background: rgba(16, 185, 129, 0.1);
|
||
border: 2px solid var(--success);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* Issues */
|
||
.issue {
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid;
|
||
}
|
||
|
||
.issue.CRITICAL {
|
||
background: rgba(220, 38, 38, 0.05);
|
||
border-left-color: var(--critical);
|
||
}
|
||
|
||
.issue.ERROR {
|
||
background: rgba(239, 68, 68, 0.05);
|
||
border-left-color: var(--error);
|
||
}
|
||
|
||
.issue.WARNING {
|
||
background: rgba(245, 158, 11, 0.05);
|
||
border-left-color: var(--warning);
|
||
}
|
||
|
||
.issue.INFO {
|
||
background: rgba(59, 130, 246, 0.05);
|
||
border-left-color: var(--info);
|
||
}
|
||
|
||
.issue.SUCCESS {
|
||
background: rgba(16, 185, 129, 0.05);
|
||
border-left-color: var(--success);
|
||
}
|
||
|
||
.issue-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: start;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.issue-category {
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.issue-badge {
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.issue-badge.CRITICAL { background: var(--critical); color: white; }
|
||
.issue-badge.ERROR { background: var(--error); color: white; }
|
||
.issue-badge.WARNING { background: var(--warning); color: white; }
|
||
.issue-badge.INFO { background: var(--info); color: white; }
|
||
.issue-badge.SUCCESS { background: var(--success); color: white; }
|
||
|
||
.issue-description {
|
||
color: var(--text);
|
||
margin-bottom: 10px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.issue-meta {
|
||
display: flex;
|
||
gap: 20px;
|
||
font-size: 14px;
|
||
color: var(--text-light);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.issue-recommendation {
|
||
background: white;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
border-left: 3px solid var(--success);
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.issue-recommendation strong {
|
||
color: var(--success);
|
||
}
|
||
|
||
/* Filters */
|
||
.filters {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 8px 16px;
|
||
border: 2px solid var(--border);
|
||
border-radius: 6px;
|
||
background: white;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.filter-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.filter-btn:hover {
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* Loading */
|
||
.loading {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 3px solid rgba(255,255,255,.3);
|
||
border-radius: 50%;
|
||
border-top-color: white;
|
||
animation: spin 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: 10px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.api-config {
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
background: #f1f5f9;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 12px;
|
||
color: var(--text-light);
|
||
margin-top: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container">
|
||
<h1>🔍 Enterprise PDF Accessibility Checker</h1>
|
||
<p class="subtitle">Comprehensive WCAG 2.1 compliance validation with AI-powered analysis</p>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="container">
|
||
<!-- Upload Section -->
|
||
<div class="card" id="uploadSection">
|
||
<h2>Upload PDF Document</h2>
|
||
|
||
<div class="upload-area" id="uploadArea">
|
||
<div class="upload-icon">📄</div>
|
||
<div class="upload-text">Drop your PDF here or click to browse</div>
|
||
<div class="upload-hint">Maximum file size: 50MB</div>
|
||
<input type="file" id="fileInput" accept=".pdf">
|
||
</div>
|
||
|
||
<div class="api-config">
|
||
<h3 style="margin-bottom: 15px;">Check Options</h3>
|
||
<div class="form-group" style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
|
||
<input type="checkbox" id="quickMode" style="width: auto; height: 18px; cursor: pointer;">
|
||
<label for="quickMode" style="cursor: pointer; margin: 0; font-weight: 600;">
|
||
⚡ Quick Mode (Skip AI analysis, OCR, and color contrast)
|
||
</label>
|
||
</div>
|
||
<div class="help-text" style="margin-top: -15px; margin-bottom: 20px;">
|
||
Quick mode runs basic checks only - great for initial scans. Completes in ~10 seconds vs ~2 minutes.
|
||
</div>
|
||
|
||
<div style="background: #f0f9ff; border-left: 3px solid #3b82f6; padding: 15px; border-radius: 6px; margin-top: 20px;">
|
||
<div style="font-weight: 600; margin-bottom: 5px;">🔑 API Keys</div>
|
||
<div style="font-size: 14px; color: #4a4a4a;">
|
||
API keys are configured in the <code style="background: white; padding: 2px 6px; border-radius: 3px;">.env</code> file on the server.
|
||
<br>Edit <code style="background: white; padding: 2px 6px; border-radius: 3px;">.env</code> to add your Anthropic and Google API keys.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="progress-container" id="progressContainer">
|
||
<div class="progress-header">
|
||
<div class="progress-text" id="progressText">Uploading...</div>
|
||
<div class="progress-percent" id="progressPercent">0%</div>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill" style="width: 0%"></div>
|
||
</div>
|
||
|
||
<!-- Debug/Progress Log -->
|
||
<div class="progress-log" id="progressLog">
|
||
<div class="log-header">🔍 Processing Details</div>
|
||
<div class="log-content" id="logContent">
|
||
<div class="log-entry">⏳ Initializing...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Results Section -->
|
||
<div class="results" id="resultsSection">
|
||
<div class="card">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||
<h2>Accessibility Report</h2>
|
||
<button class="btn btn-secondary" onclick="resetCheck()">Check Another PDF</button>
|
||
</div>
|
||
|
||
<div class="score-display">
|
||
<div class="score-number" id="scoreNumber">--</div>
|
||
<div class="score-label">Accessibility Score</div>
|
||
</div>
|
||
|
||
<div class="stats-grid" id="statsGrid">
|
||
<!-- Stats will be inserted here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Issues & Recommendations</h2>
|
||
|
||
<div class="filters">
|
||
<button class="filter-btn active" onclick="filterIssues('all')">All</button>
|
||
<button class="filter-btn" onclick="filterIssues('CRITICAL')">Critical</button>
|
||
<button class="filter-btn" onclick="filterIssues('ERROR')">Errors</button>
|
||
<button class="filter-btn" onclick="filterIssues('WARNING')">Warnings</button>
|
||
<button class="filter-btn" onclick="filterIssues('INFO')">Info</button>
|
||
</div>
|
||
|
||
<div id="issuesList">
|
||
<!-- Issues will be inserted here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentJobId = null;
|
||
let currentFilter = 'all';
|
||
let allIssues = [];
|
||
let pollInterval = null;
|
||
let pollCount = 0;
|
||
|
||
// Logging functions
|
||
function addLog(message, type = 'info') {
|
||
const logContent = document.getElementById('logContent');
|
||
const entry = document.createElement('div');
|
||
entry.className = `log-entry ${type}`;
|
||
|
||
const timestamp = new Date().toLocaleTimeString();
|
||
entry.innerHTML = `<strong>${timestamp}</strong> ${message}`;
|
||
|
||
logContent.appendChild(entry);
|
||
logContent.scrollTop = logContent.scrollHeight;
|
||
}
|
||
|
||
function clearLog() {
|
||
const logContent = document.getElementById('logContent');
|
||
logContent.innerHTML = '<div class="log-entry">⏳ Initializing...</div>';
|
||
}
|
||
|
||
function updateProgress(percent, message) {
|
||
document.getElementById('progressFill').style.width = percent + '%';
|
||
document.getElementById('progressPercent').textContent = percent + '%';
|
||
document.getElementById('progressText').textContent = message;
|
||
}
|
||
|
||
// Upload area drag and drop
|
||
const uploadArea = document.getElementById('uploadArea');
|
||
const fileInput = document.getElementById('fileInput');
|
||
|
||
uploadArea.addEventListener('click', () => fileInput.click());
|
||
|
||
uploadArea.addEventListener('dragover', (e) => {
|
||
e.preventDefault();
|
||
uploadArea.classList.add('dragover');
|
||
});
|
||
|
||
uploadArea.addEventListener('dragleave', () => {
|
||
uploadArea.classList.remove('dragover');
|
||
});
|
||
|
||
uploadArea.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
uploadArea.classList.remove('dragover');
|
||
|
||
const files = e.dataTransfer.files;
|
||
if (files.length > 0) {
|
||
handleFile(files[0]);
|
||
}
|
||
});
|
||
|
||
fileInput.addEventListener('change', (e) => {
|
||
if (e.target.files.length > 0) {
|
||
handleFile(e.target.files[0]);
|
||
}
|
||
});
|
||
|
||
async function handleFile(file) {
|
||
if (!file.name.toLowerCase().endsWith('.pdf')) {
|
||
alert('Please select a PDF file');
|
||
return;
|
||
}
|
||
|
||
// Show progress
|
||
clearLog();
|
||
document.getElementById('progressContainer').style.display = 'block';
|
||
updateProgress(0, 'Preparing upload...');
|
||
addLog('📄 File selected: ' + file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)', 'info');
|
||
|
||
// Upload file
|
||
const formData = new FormData();
|
||
formData.append('pdf', file);
|
||
formData.append('action', 'upload');
|
||
|
||
try {
|
||
updateProgress(10, 'Uploading file...');
|
||
addLog('⬆️ Uploading to server...', 'info');
|
||
|
||
const response = await fetch('api.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
currentJobId = result.data.job_id;
|
||
updateProgress(20, 'Upload complete');
|
||
addLog('✅ Upload successful - Job ID: ' + currentJobId, 'success');
|
||
addLog('📊 File size: ' + (file.size / 1024 / 1024).toFixed(2) + ' MB', 'info');
|
||
|
||
// Small delay for visual feedback
|
||
await new Promise(resolve => setTimeout(resolve, 500));
|
||
startCheck();
|
||
} else {
|
||
addLog('❌ Upload failed: ' + result.error, 'error');
|
||
alert('Upload failed: ' + result.error);
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
}
|
||
} catch (error) {
|
||
addLog('❌ Upload error: ' + error.message, 'error');
|
||
alert('Upload failed: ' + error.message);
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
}
|
||
}
|
||
|
||
async function startCheck() {
|
||
updateProgress(25, 'Initializing accessibility check...');
|
||
addLog('🔧 Preparing accessibility analysis...', 'info');
|
||
|
||
const formData = new FormData();
|
||
formData.append('action', 'check');
|
||
formData.append('job_id', currentJobId);
|
||
|
||
// Add quick mode flag
|
||
const quickMode = document.getElementById('quickMode').checked;
|
||
if (quickMode) {
|
||
formData.append('quick_mode', '1');
|
||
addLog('⚡ Quick mode enabled - skipping expensive checks', 'info');
|
||
}
|
||
|
||
// API keys are read from .env file on the server
|
||
addLog('🔑 Using API keys from server .env file', 'info');
|
||
|
||
try {
|
||
updateProgress(30, 'Starting analysis...');
|
||
addLog('🚀 Launching Python checker with venv...', 'info');
|
||
|
||
const response = await fetch('api.php', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
updateProgress(35, 'Analysis started');
|
||
addLog('✅ Python process started successfully', 'success');
|
||
addLog('⏱️ Estimated time: 2-5 minutes depending on document complexity', 'info');
|
||
pollStatus();
|
||
} else {
|
||
addLog('❌ Check failed: ' + result.error, 'error');
|
||
alert('Check failed: ' + result.error);
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
}
|
||
} catch (error) {
|
||
addLog('❌ Check error: ' + error.message, 'error');
|
||
alert('Check failed: ' + error.message);
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
}
|
||
}
|
||
|
||
async function pollStatus() {
|
||
pollCount = 0;
|
||
|
||
const checkStages = [
|
||
{ percent: 40, message: 'Loading PDF...', log: '📖 Reading PDF structure and metadata' },
|
||
{ percent: 45, message: 'Extracting text...', log: '📝 Extracting text from all pages' },
|
||
{ percent: 50, message: 'Analyzing document structure...', log: '🏗️ Checking PDF tagging and structure' },
|
||
{ percent: 55, message: 'Checking metadata...', log: '📋 Validating title, author, language' },
|
||
{ percent: 60, message: 'Analyzing images...', log: '🖼️ Processing images with AI (this may take a while)' },
|
||
{ percent: 65, message: 'Running OCR quality check...', log: '🔍 Analyzing text clarity and OCR confidence' },
|
||
{ percent: 70, message: 'Checking color contrast...', log: '🎨 Calculating WCAG contrast ratios' },
|
||
{ percent: 75, message: 'Analyzing readability...', log: '📚 Computing Flesch scores and grade levels' },
|
||
{ percent: 80, message: 'Validating links...', log: '🔗 Checking link text quality' },
|
||
{ percent: 85, message: 'Checking forms and headings...', log: '📄 Validating form fields and heading structure' },
|
||
{ percent: 90, message: 'Running final checks...', log: '✓ Font embedding, bookmarks, security' },
|
||
{ percent: 95, message: 'Compiling results...', log: '📊 Generating accessibility report' }
|
||
];
|
||
|
||
let stageIndex = 0;
|
||
|
||
const checkStatus = async () => {
|
||
pollCount++;
|
||
|
||
// Update simulated progress
|
||
if (stageIndex < checkStages.length && pollCount % 2 === 0) {
|
||
const stage = checkStages[stageIndex];
|
||
updateProgress(stage.percent, stage.message);
|
||
addLog(stage.log, 'info');
|
||
stageIndex++;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`api.php?action=status&job_id=${currentJobId}`);
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
if (result.data.status === 'completed') {
|
||
clearInterval(pollInterval);
|
||
updateProgress(98, 'Loading results...');
|
||
addLog('✅ Analysis complete! Loading results...', 'success');
|
||
addLog('⏱️ Total time: ' + Math.round(pollCount * 2) + ' seconds', 'info');
|
||
loadResults();
|
||
} else if (result.data.status === 'processing') {
|
||
// Still processing
|
||
if (pollCount === 1) {
|
||
addLog('⚙️ Python venv activated successfully', 'success');
|
||
addLog('🔬 Running comprehensive WCAG 2.1 analysis...', 'info');
|
||
}
|
||
|
||
if (pollCount > 60) {
|
||
addLog('⚠️ Analysis taking longer than expected (complex document)', 'warning');
|
||
}
|
||
|
||
// Timeout after 150 polls (5 minutes)
|
||
if (pollCount > 150) {
|
||
clearInterval(pollInterval);
|
||
addLog('❌ Analysis timed out after 5 minutes', 'error');
|
||
addLog('💡 Try using Quick Mode for faster results', 'info');
|
||
|
||
// Try to get debug info
|
||
try {
|
||
const debugResp = await fetch(`api.php?action=debug&job_id=${currentJobId}`);
|
||
const debugResult = await debugResp.json();
|
||
if (debugResult.success && debugResult.data.error_log) {
|
||
addLog('🔍 Error log: ' + debugResult.data.error_log.substring(0, 500), 'error');
|
||
}
|
||
} catch (e) {
|
||
console.error('Debug fetch failed:', e);
|
||
}
|
||
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
alert('Analysis timed out. Check the error log or try Quick Mode.');
|
||
}
|
||
} else if (result.data.status === 'failed' || result.data.status === 'error') {
|
||
clearInterval(pollInterval);
|
||
addLog('❌ Analysis failed', 'error');
|
||
if (result.data.error_log) {
|
||
addLog('🔍 Error: ' + result.data.error_log.substring(0, 500), 'error');
|
||
}
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
alert('Analysis failed. Check the error log for details.');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Status check failed:', error);
|
||
addLog('⚠️ Status check error (retrying...): ' + error.message, 'warning');
|
||
}
|
||
};
|
||
|
||
// Check immediately
|
||
checkStatus();
|
||
|
||
// Then check every 2 seconds
|
||
pollInterval = setInterval(checkStatus, 2000);
|
||
}
|
||
|
||
async function loadResults() {
|
||
updateProgress(100, 'Complete!');
|
||
addLog('📥 Fetching results from server...', 'info');
|
||
|
||
try {
|
||
const response = await fetch(`api.php?action=result&job_id=${currentJobId}`);
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
addLog('✅ Results loaded successfully', 'success');
|
||
addLog('📊 Accessibility Score: ' + result.data.accessibility_score + '/100', 'success');
|
||
addLog('🔍 Total Issues Found: ' + result.data.total_issues, 'info');
|
||
addLog('📈 Critical: ' + result.data.severity_counts.critical +
|
||
' | Errors: ' + result.data.severity_counts.error +
|
||
' | Warnings: ' + result.data.severity_counts.warning, 'info');
|
||
|
||
// Wait a moment so user can see the final logs
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
displayResults(result.data);
|
||
} else {
|
||
addLog('❌ Failed to load results: ' + result.error, 'error');
|
||
alert('Failed to load results: ' + result.error);
|
||
}
|
||
} catch (error) {
|
||
addLog('❌ Error loading results: ' + error.message, 'error');
|
||
alert('Failed to load results: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function displayResults(data) {
|
||
// Hide upload, show results
|
||
document.getElementById('uploadSection').style.display = 'none';
|
||
document.getElementById('resultsSection').style.display = 'block';
|
||
|
||
// Display score
|
||
document.getElementById('scoreNumber').textContent = data.accessibility_score;
|
||
|
||
// Display stats
|
||
const statsGrid = document.getElementById('statsGrid');
|
||
statsGrid.innerHTML = `
|
||
<div class="stat-card critical">
|
||
<div class="stat-number">${data.severity_counts.critical}</div>
|
||
<div class="stat-label">Critical</div>
|
||
</div>
|
||
<div class="stat-card error">
|
||
<div class="stat-number">${data.severity_counts.error}</div>
|
||
<div class="stat-label">Errors</div>
|
||
</div>
|
||
<div class="stat-card warning">
|
||
<div class="stat-number">${data.severity_counts.warning}</div>
|
||
<div class="stat-label">Warnings</div>
|
||
</div>
|
||
<div class="stat-card info">
|
||
<div class="stat-number">${data.severity_counts.info}</div>
|
||
<div class="stat-label">Info</div>
|
||
</div>
|
||
<div class="stat-card success">
|
||
<div class="stat-number">${data.severity_counts.success}</div>
|
||
<div class="stat-label">Success</div>
|
||
</div>
|
||
`;
|
||
|
||
// Store and display issues
|
||
allIssues = data.issues;
|
||
displayIssues(allIssues);
|
||
}
|
||
|
||
function displayIssues(issues) {
|
||
const issuesList = document.getElementById('issuesList');
|
||
|
||
if (issues.length === 0) {
|
||
issuesList.innerHTML = '<p style="text-align: center; color: var(--text-light); padding: 40px;">No issues to display</p>';
|
||
return;
|
||
}
|
||
|
||
// Group issues by page and category
|
||
const pageGroups = {};
|
||
const documentWideIssues = [];
|
||
|
||
issues.forEach(issue => {
|
||
if (issue.page_number) {
|
||
if (!pageGroups[issue.page_number]) {
|
||
pageGroups[issue.page_number] = [];
|
||
}
|
||
pageGroups[issue.page_number].push(issue);
|
||
} else {
|
||
documentWideIssues.push(issue);
|
||
}
|
||
});
|
||
|
||
// Create page overview map
|
||
const pageNumbers = Object.keys(pageGroups).map(Number).sort((a, b) => a - b);
|
||
const pageOverview = pageNumbers.length > 0 ? `
|
||
<div style="background: white; padding: 20px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||
<h3 style="margin-bottom: 15px; font-size: 18px;">📄 Page Overview</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px;">
|
||
${pageNumbers.map(pageNum => {
|
||
const pageIssues = pageGroups[pageNum];
|
||
const criticalCount = pageIssues.filter(i => i.severity === 'CRITICAL').length;
|
||
const errorCount = pageIssues.filter(i => i.severity === 'ERROR').length;
|
||
const warningCount = pageIssues.filter(i => i.severity === 'WARNING').length;
|
||
|
||
let bgColor = '#10b981'; // Success green
|
||
let iconColor = 'white';
|
||
if (criticalCount > 0) {
|
||
bgColor = '#dc2626'; // Critical red
|
||
} else if (errorCount > 0) {
|
||
bgColor = '#ef4444'; // Error red
|
||
} else if (warningCount > 0) {
|
||
bgColor = '#f59e0b'; // Warning yellow
|
||
iconColor = 'black';
|
||
}
|
||
|
||
return `
|
||
<div onclick="scrollToPage(${pageNum})" style="cursor: pointer; background: ${bgColor}; color: ${iconColor}; padding: 15px 10px; border-radius: 8px; text-align: center; transition: transform 0.2s; font-weight: 600;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
||
<div style="font-size: 12px; opacity: 0.9;">Page</div>
|
||
<div style="font-size: 20px;">${pageNum}</div>
|
||
<div style="font-size: 11px; margin-top: 5px;">${pageIssues.length} issue${pageIssues.length !== 1 ? 's' : ''}</div>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
</div>
|
||
` : '';
|
||
|
||
// Build the issues HTML
|
||
let issuesHTML = pageOverview;
|
||
|
||
// Document-wide issues first
|
||
if (documentWideIssues.length > 0) {
|
||
issuesHTML += `
|
||
<div id="page-document" style="margin-bottom: 30px;">
|
||
<h3 style="font-size: 20px; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer;" onclick="togglePageSection('document')">
|
||
📋 Document-Wide Issues (${documentWideIssues.length})
|
||
<span id="toggle-document" style="float: right;">▼</span>
|
||
</h3>
|
||
<div id="section-document" style="display: block;">
|
||
${documentWideIssues.map(issue => createIssueCard(issue)).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// Then page-specific issues
|
||
pageNumbers.forEach(pageNum => {
|
||
const pageIssues = pageGroups[pageNum];
|
||
const criticalCount = pageIssues.filter(i => i.severity === 'CRITICAL').length;
|
||
const errorCount = pageIssues.filter(i => i.severity === 'ERROR').length;
|
||
const warningCount = pageIssues.filter(i => i.severity === 'WARNING').length;
|
||
|
||
issuesHTML += `
|
||
<div id="page-${pageNum}" style="margin-bottom: 30px;">
|
||
<h3 style="font-size: 20px; margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer;" onclick="togglePageSection(${pageNum})">
|
||
📄 Page ${pageNum} - ${pageIssues.length} Issue${pageIssues.length !== 1 ? 's' : ''}
|
||
${criticalCount > 0 ? `<span style="background: #dc2626; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${criticalCount} Critical</span>` : ''}
|
||
${errorCount > 0 ? `<span style="background: #ef4444; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${errorCount} Error${errorCount !== 1 ? 's' : ''}</span>` : ''}
|
||
${warningCount > 0 ? `<span style="background: #f59e0b; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px;">${warningCount} Warning${warningCount !== 1 ? 's' : ''}</span>` : ''}
|
||
<span id="toggle-${pageNum}" style="float: right;">▼</span>
|
||
</h3>
|
||
<div id="section-${pageNum}" style="display: block;">
|
||
${pageIssues.map(issue => createIssueCard(issue)).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
issuesList.innerHTML = issuesHTML;
|
||
}
|
||
|
||
function createIssueCard(issue) {
|
||
const iconMap = {
|
||
'CRITICAL': '🚨',
|
||
'ERROR': '❌',
|
||
'WARNING': '⚠️',
|
||
'INFO': 'ℹ️',
|
||
'SUCCESS': '✅'
|
||
};
|
||
|
||
const categoryIconMap = {
|
||
'Document Structure': '🏗️',
|
||
'Metadata': '📋',
|
||
'Language': '🌐',
|
||
'Text Accessibility': '📝',
|
||
'Images': '🖼️',
|
||
'Color Contrast': '🎨',
|
||
'Readability': '📚',
|
||
'Link Text': '🔗',
|
||
'Forms': '📄',
|
||
'Tables': '📊',
|
||
'Headings': '📑',
|
||
'Navigation': '🧭',
|
||
'Fonts': '🔤',
|
||
'Security': '🔒',
|
||
'OCR Quality': '🔍'
|
||
};
|
||
|
||
const icon = iconMap[issue.severity] || '•';
|
||
const categoryIcon = Object.keys(categoryIconMap).find(key => issue.category.includes(key))
|
||
? categoryIconMap[Object.keys(categoryIconMap).find(key => issue.category.includes(key))]
|
||
: '📌';
|
||
|
||
return `
|
||
<div class="issue ${issue.severity}" style="margin-bottom: 15px; border-left: 4px solid var(--${issue.severity.toLowerCase()});">
|
||
<div class="issue-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||
<div class="issue-category" style="display: flex; align-items: center; gap: 8px;">
|
||
<span style="font-size: 20px;">${categoryIcon}</span>
|
||
<span>${issue.category}</span>
|
||
</div>
|
||
<span class="issue-badge ${issue.severity}" style="display: flex; align-items: center; gap: 5px;">
|
||
<span>${icon}</span>
|
||
<span>${issue.severity}</span>
|
||
</span>
|
||
</div>
|
||
<div class="issue-description">${issue.description}</div>
|
||
${issue.wcag_criterion ? `<div class="issue-meta"><span>📋 WCAG ${issue.wcag_criterion}</span></div>` : ''}
|
||
${issue.recommendation ? `<div class="issue-recommendation"><strong>💡 How to Fix:</strong> ${issue.recommendation}</div>` : ''}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function togglePageSection(pageNum) {
|
||
const section = document.getElementById(`section-${pageNum}`);
|
||
const toggle = document.getElementById(`toggle-${pageNum}`);
|
||
if (section.style.display === 'none') {
|
||
section.style.display = 'block';
|
||
toggle.textContent = '▼';
|
||
} else {
|
||
section.style.display = 'none';
|
||
toggle.textContent = '▶';
|
||
}
|
||
}
|
||
|
||
function scrollToPage(pageNum) {
|
||
const element = document.getElementById(`page-${pageNum}`);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
// Briefly highlight the section
|
||
element.style.background = '#fff3cd';
|
||
setTimeout(() => {
|
||
element.style.background = '';
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
function filterIssues(severity) {
|
||
currentFilter = severity;
|
||
|
||
// Update filter buttons
|
||
document.querySelectorAll('.filter-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
if (event && event.target) {
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
// Filter issues
|
||
const filtered = severity === 'all'
|
||
? allIssues
|
||
: allIssues.filter(issue => issue.severity === severity);
|
||
|
||
displayIssues(filtered);
|
||
}
|
||
|
||
function resetCheck() {
|
||
if (pollInterval) {
|
||
clearInterval(pollInterval);
|
||
pollInterval = null;
|
||
}
|
||
pollCount = 0;
|
||
document.getElementById('uploadSection').style.display = 'block';
|
||
document.getElementById('resultsSection').style.display = 'none';
|
||
document.getElementById('progressContainer').style.display = 'none';
|
||
document.getElementById('fileInput').value = '';
|
||
currentJobId = null;
|
||
clearLog();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|