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