@casoon/auditmysite
Version:
Professional website analysis suite with robust accessibility testing, Core Web Vitals performance monitoring, SEO analysis, and content optimization insights. Features isolated browser contexts, retry mechanisms, and comprehensive API endpoints for profe
2 lines • 14 kB
TypeScript
export declare const htmlReportTemplate = "<!DOCTYPE html>\n<html lang=\"de\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Accessibility Test Report - {{domain}}</title>\n <meta name=\"description\" content=\"Comprehensive accessibility test report generated by auditmysite\">\n \n <!-- Favicon -->\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>\u267F</text></svg>\">\n \n <!-- CSS -->\n <style>\n /* CSS Variables f\u00FCr Theming */\n :root {\n --primary-color: #2563eb;\n --secondary-color: #64748b;\n --success-color: #10b981;\n --warning-color: #f59e0b;\n --error-color: #ef4444;\n --background-color: #ffffff;\n --surface-color: #f8fafc;\n --text-primary: #1e293b;\n --text-secondary: #64748b;\n --border-color: #e2e8f0;\n --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n }\n\n /* Dark Mode */\n @media (prefers-color-scheme: dark) {\n :root {\n --background-color: #0f172a;\n --surface-color: #1e293b;\n --text-primary: #f1f5f9;\n --text-secondary: #94a3b8;\n --border-color: #334155;\n }\n }\n\n /* Reset und Base Styles */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-primary);\n background-color: var(--background-color);\n transition: background-color 0.3s ease;\n }\n\n /* Header */\n .report-header {\n background: linear-gradient(135deg, var(--primary-color), #1d4ed8);\n color: white;\n padding: 1rem 0;\n box-shadow: var(--shadow-lg);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n\n .report-nav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: bold;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .logo::before {\n content: \"\u267F\";\n font-size: 1.8rem;\n }\n\n .nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n }\n\n .nav-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n transition: background-color 0.2s ease;\n }\n\n .nav-links a:hover {\n background-color: rgba(255, 255, 255, 0.1);\n }\n\n /* Main Content */\n .main-content {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem 1rem;\n }\n\n /* Dashboard */\n .dashboard {\n margin-bottom: 3rem;\n }\n\n .kpi-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .kpi-card {\n background: var(--surface-color);\n padding: 1.5rem;\n border-radius: 0.75rem;\n box-shadow: var(--shadow);\n border: 1px solid var(--border-color);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n\n .kpi-card:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-lg);\n }\n\n .kpi-card h3 {\n color: var(--text-secondary);\n font-size: 0.875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-bottom: 0.5rem;\n }\n\n .kpi-value {\n font-size: 2rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n }\n\n .kpi-trend {\n font-size: 0.875rem;\n font-weight: 500;\n }\n\n .kpi-trend.positive {\n color: var(--success-color);\n }\n\n .kpi-trend.negative {\n color: var(--error-color);\n }\n\n /* Table Styles */\n .table-container {\n background: var(--surface-color);\n border-radius: 0.75rem;\n box-shadow: var(--shadow);\n border: 1px solid var(--border-color);\n margin-bottom: 2rem;\n overflow: hidden;\n }\n\n .table-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--border-color);\n background: var(--background-color);\n }\n\n .table-header h3 {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n }\n\n .copy-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 500;\n transition: background-color 0.2s ease;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .copy-btn:hover {\n background: #1d4ed8;\n }\n\n .copy-btn:active {\n transform: translateY(1px);\n }\n\n .table-wrapper {\n overflow-x: auto;\n }\n\n .data-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 0.875rem;\n }\n\n .data-table th {\n background: var(--background-color);\n padding: 1rem;\n text-align: left;\n font-weight: 600;\n color: var(--text-primary);\n border-bottom: 2px solid var(--border-color);\n position: sticky;\n top: 0;\n z-index: 10;\n }\n\n .data-table td {\n padding: 1rem;\n border-bottom: 1px solid var(--border-color);\n color: var(--text-primary);\n }\n\n .data-table tr:hover {\n background: var(--background-color);\n }\n\n .data-table tr.error {\n background: rgba(239, 68, 68, 0.05);\n }\n\n .data-table tr.warning {\n background: rgba(245, 158, 11, 0.05);\n }\n\n .data-table tr.error:hover {\n background: rgba(239, 68, 68, 0.1);\n }\n\n .data-table tr.warning:hover {\n background: rgba(245, 158, 11, 0.1);\n }\n\n /* No Data States */\n .no-data, .no-issues {\n text-align: center;\n padding: 3rem 1rem;\n color: var(--text-secondary);\n }\n\n .no-data h3, .no-issues h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n color: var(--text-primary);\n }\n\n /* Toast Notification */\n .toast {\n position: fixed;\n top: 2rem;\n right: 2rem;\n background: var(--success-color);\n color: white;\n padding: 1rem 1.5rem;\n border-radius: 0.5rem;\n box-shadow: var(--shadow-lg);\n z-index: 1000;\n transform: translateX(100%);\n transition: transform 0.3s ease;\n }\n\n .toast.show {\n transform: translateX(0);\n }\n\n /* Responsive Design */\n @media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .table-header {\n flex-direction: column;\n gap: 1rem;\n align-items: flex-start;\n }\n \n .data-table {\n font-size: 0.75rem;\n }\n \n .data-table th,\n .data-table td {\n padding: 0.75rem 0.5rem;\n }\n }\n </style>\n</head>\n<body>\n <header class=\"report-header\">\n <nav class=\"report-nav\">\n <div class=\"logo\">auditmysite</div>\n <ul class=\"nav-links\">\n <li><a href=\"#summary\">Summary</a></li>\n <li><a href=\"#issues\">Issues</a></li>\n <li><a href=\"#performance\">Performance</a></li>\n <li><a href=\"#seo\">SEO</a></li>\n </ul>\n </nav>\n </header>\n\n <main class=\"main-content\">\n <!-- Dashboard Section -->\n <section id=\"summary\" class=\"dashboard\">\n <h2 class=\"section-title\">Test Summary</h2>\n <div class=\"kpi-grid\">\n <div class=\"kpi-card\">\n <h3>Success Rate</h3>\n <div class=\"kpi-value\">{{successRate}}%</div>\n <div class=\"kpi-trend positive\">Passed</div>\n </div>\n <div class=\"kpi-card\">\n <h3>Pages Tested</h3>\n <div class=\"kpi-value\">{{testedPages}}/{{totalPages}}</div>\n <div class=\"kpi-trend\">Total Pages</div>\n </div>\n <div class=\"kpi-card\">\n <h3>Total Errors</h3>\n <div class=\"kpi-value\">{{totalErrors}}</div>\n <div class=\"kpi-trend negative\">Issues Found</div>\n </div>\n <div class=\"kpi-card\">\n <h3>Test Duration</h3>\n <div class=\"kpi-value\">{{totalDuration}}</div>\n <div class=\"kpi-trend\">Time Taken</div>\n </div>\n </div>\n </section>\n\n <!-- Issues Section -->\n <section id=\"issues\" class=\"issues-section\">\n <h2 class=\"section-title\">Accessibility Issues</h2>\n {{issues}}\n </section>\n\n <!-- Performance Section -->\n <section id=\"performance\" class=\"issues-section\">\n <h2 class=\"section-title\">Performance Metrics</h2>\n {{performance}}\n </section>\n\n <!-- SEO Section -->\n <section id=\"seo\" class=\"issues-section\">\n <h2 class=\"section-title\">SEO Analysis</h2>\n {{seo}}\n </section>\n </main>\n\n <!-- Toast Notification -->\n <div id=\"toast\" class=\"toast\">\n <span id=\"toast-message\">Copied to clipboard!</span>\n </div>\n\n <!-- JavaScript f\u00FCr Interaktivit\u00E4t -->\n <script>\n // Copy to Clipboard Funktion\n function copyToClipboard(tableId) {\n const table = document.getElementById(tableId);\n if (!table) return;\n\n // Erstelle eine tempor\u00E4re Textarea f\u00FCr das Kopieren\n const textarea = document.createElement('textarea');\n textarea.value = table.innerText;\n document.body.appendChild(textarea);\n textarea.select();\n \n try {\n document.execCommand('copy');\n showToast('Daten in Zwischenablage kopiert!');\n } catch (err) {\n showToast('Fehler beim Kopieren!');\n }\n \n document.body.removeChild(textarea);\n }\n\n // Toast Notification\n function showToast(message) {\n const toast = document.getElementById('toast');\n const toastMessage = document.getElementById('toast-message');\n \n toastMessage.textContent = message;\n toast.classList.add('show');\n \n setTimeout(() => {\n toast.classList.remove('show');\n }, 3000);\n }\n\n // Smooth Scrolling f\u00FCr Navigation\n function initSmoothScrolling() {\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n }\n\n // Dark Mode Toggle\n function initDarkMode() {\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');\n \n function updateTheme() {\n document.documentElement.classList.toggle('dark', prefersDark.matches);\n }\n \n prefersDark.addEventListener('change', updateTheme);\n updateTheme();\n }\n\n // Initialize everything when DOM is loaded\n document.addEventListener('DOMContentLoaded', function() {\n initSmoothScrolling();\n initDarkMode();\n });\n </script>\n</body>\n</html>";
//# sourceMappingURL=template.d.ts.map