Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
488 lines
20 KiB
HTML
488 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Enhanced Item Management - Interactivity Enhancements Test</title>
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: #0a0a0a;
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.test-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.test-section {
|
|
margin-bottom: 40px;
|
|
padding: 20px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.test-section h2 {
|
|
margin-top: 0;
|
|
color: #ff9900;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.test-section p {
|
|
color: #e0e0e0;
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.demo-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.demo-btn {
|
|
padding: 8px 16px;
|
|
background: linear-gradient(135deg, #007acc, #005a9e);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.demo-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(0, 122, 204, 0.4);
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.feature-list li {
|
|
padding: 8px 0;
|
|
color: #a0a0a0;
|
|
position: relative;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.feature-list li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1 style="text-align: center; color: #ff9900; margin-bottom: 40px;">
|
|
Enhanced Item Management - Interactivity Enhancements
|
|
</h1>
|
|
|
|
<!-- Real-time URL Validation Test -->
|
|
<div class="test-section">
|
|
<h2>🔍 Real-time URL Validation</h2>
|
|
<p>Testen Sie die Echtzeit-URL-Validierung mit visueller Rückmeldung:</p>
|
|
|
|
<div class="add-enhanced-item-form">
|
|
<input
|
|
type="url"
|
|
class="enhanced-url-input"
|
|
id="test-url-input"
|
|
placeholder="Amazon-URL eingeben für automatische Extraktion..."
|
|
aria-label="Amazon product URL"
|
|
/>
|
|
<button class="extract-btn" type="button" id="test-extract-btn">Extrahieren & Hinzufügen</button>
|
|
</div>
|
|
|
|
<ul class="feature-list">
|
|
<li>Echtzeit-Validierung während der Eingabe</li>
|
|
<li>Visuelle Rückmeldung (grün/rot/blau)</li>
|
|
<li>Kontextuelle Hilfe-Tooltips</li>
|
|
<li>Tastatur-Navigation (Enter zum Bestätigen)</li>
|
|
<li>Automatische Button-Aktivierung/Deaktivierung</li>
|
|
</ul>
|
|
|
|
<div class="demo-buttons">
|
|
<button class="demo-btn" onclick="testValidUrl()">Gültige URL testen</button>
|
|
<button class="demo-btn" onclick="testInvalidUrl()">Ungültige URL testen</button>
|
|
<button class="demo-btn" onclick="clearUrl()">URL löschen</button>
|
|
<button class="demo-btn" onclick="showUrlHelp()">Hilfe anzeigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title Selection Enhancement Test -->
|
|
<div class="test-section">
|
|
<h2>✏️ Enhanced Title Selection</h2>
|
|
<p>Testen Sie die verbesserte Titel-Auswahl mit Tastatur-Navigation:</p>
|
|
|
|
<div class="title-selection-container" id="test-title-selection">
|
|
<div class="title-selection-header">
|
|
<h3 class="selection-title">Titel auswählen:</h3>
|
|
</div>
|
|
|
|
<div class="title-options">
|
|
<div class="title-option ai-generated" data-index="0" role="button" tabindex="0" aria-selected="false">
|
|
<span class="option-label">KI-Vorschlag 1:</span>
|
|
<span class="option-text">ROCKBROS Fahrradhandschuhe - Premium Winterhandschuhe</span>
|
|
<div class="recommendation-badge">⭐ Empfohlen</div>
|
|
<div class="char-count">52 Zeichen</div>
|
|
</div>
|
|
<div class="title-option ai-generated" data-index="1" role="button" tabindex="-1" aria-selected="false">
|
|
<span class="option-label">KI-Vorschlag 2:</span>
|
|
<span class="option-text">Hochwertige Fahrradhandschuhe für Winter und Herbst</span>
|
|
<div class="char-count">48 Zeichen</div>
|
|
</div>
|
|
<div class="title-option ai-generated" data-index="2" role="button" tabindex="-1" aria-selected="false">
|
|
<span class="option-label">KI-Vorschlag 3:</span>
|
|
<span class="option-text">ROCKBROS Winterhandschuhe - Touchscreen-kompatibel</span>
|
|
<div class="char-count">47 Zeichen</div>
|
|
</div>
|
|
<div class="title-option original" data-index="3" role="button" tabindex="-1" aria-selected="false">
|
|
<span class="option-label">Original:</span>
|
|
<span class="option-text">ROCKBROS Fahrradhandschuhe Herbst Winter Winddicht Warm Touchscreen Handschuhe für Herren Damen</span>
|
|
<div class="char-count">98 Zeichen</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selection-actions">
|
|
<button class="confirm-selection-btn" type="button">Auswahl bestätigen</button>
|
|
<button class="skip-ai-btn" type="button">Ohne KI fortfahren</button>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="feature-list">
|
|
<li>Tastatur-Navigation mit Pfeiltasten (↑↓)</li>
|
|
<li>Enter zum Auswählen, Esc zum Abbrechen</li>
|
|
<li>Empfohlene Auswahl hervorgehoben</li>
|
|
<li>Zeichenzähler für jeden Titel</li>
|
|
<li>Visuelles Feedback bei Auswahl</li>
|
|
<li>Kontextuelle Hilfe und Shortcuts</li>
|
|
</ul>
|
|
|
|
<div class="demo-buttons">
|
|
<button class="demo-btn" onclick="selectFirstOption()">Ersten Vorschlag wählen</button>
|
|
<button class="demo-btn" onclick="selectOriginal()">Original wählen</button>
|
|
<button class="demo-btn" onclick="showTitleHelp()">Tastatur-Hilfe anzeigen</button>
|
|
<button class="demo-btn" onclick="resetTitleSelection()">Auswahl zurücksetzen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Enhancement Test -->
|
|
<div class="test-section">
|
|
<h2>🚀 Enhanced Workflow Progress</h2>
|
|
<p>Testen Sie die erweiterte Fortschrittsanzeige mit kontextueller Hilfe:</p>
|
|
|
|
<div class="extraction-progress" id="test-progress">
|
|
<div class="progress-header">
|
|
<h4>Verarbeitung läuft...</h4>
|
|
</div>
|
|
<div class="progress-steps">
|
|
<div class="progress-step" data-step="validate">
|
|
<span class="step-icon">🔍</span>
|
|
<span class="step-text">URL validieren...</span>
|
|
<span class="step-status"></span>
|
|
</div>
|
|
<div class="progress-step" data-step="extract">
|
|
<span class="step-icon">📦</span>
|
|
<span class="step-text">Produktdaten extrahieren...</span>
|
|
<span class="step-status"></span>
|
|
</div>
|
|
<div class="progress-step" data-step="ai">
|
|
<span class="step-icon">🤖</span>
|
|
<span class="step-text">KI-Titelvorschläge generieren...</span>
|
|
<span class="step-status"></span>
|
|
</div>
|
|
<div class="progress-step" data-step="select">
|
|
<span class="step-icon">✏️</span>
|
|
<span class="step-text">Titel auswählen...</span>
|
|
<span class="step-status"></span>
|
|
</div>
|
|
<div class="progress-step" data-step="save">
|
|
<span class="step-icon">💾</span>
|
|
<span class="step-text">Item speichern...</span>
|
|
<span class="step-status"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="feature-list">
|
|
<li>Kontextuelle Hilfe für jeden Schritt</li>
|
|
<li>Visuelle Fortschrittsanzeige mit Animationen</li>
|
|
<li>Schritt-für-Schritt Erklärungen</li>
|
|
<li>Fehlerbehandlung mit Feedback</li>
|
|
<li>Hover-Tooltips mit detaillierten Informationen</li>
|
|
</ul>
|
|
|
|
<div class="demo-buttons">
|
|
<button class="demo-btn" onclick="simulateProgress()">Fortschritt simulieren</button>
|
|
<button class="demo-btn" onclick="simulateError()">Fehler simulieren</button>
|
|
<button class="demo-btn" onclick="resetProgress()">Fortschritt zurücksetzen</button>
|
|
<button class="demo-btn" onclick="showProgressHelp()">Schritt-Hilfe anzeigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accessibility Features Test -->
|
|
<div class="test-section">
|
|
<h2>♿ Accessibility Features</h2>
|
|
<p>Testen Sie die verbesserten Barrierefreiheits-Features:</p>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
|
|
<div>
|
|
<h4 style="color: #74c0fc; margin-bottom: 12px;">Tastatur-Navigation</h4>
|
|
<ul class="feature-list">
|
|
<li>Tab-Reihenfolge optimiert</li>
|
|
<li>Sichtbare Focus-Indikatoren</li>
|
|
<li>Tastenkürzel verfügbar</li>
|
|
<li>Focus-Trap in Modals</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 style="color: #69db7c; margin-bottom: 12px;">Screen Reader Support</h4>
|
|
<ul class="feature-list">
|
|
<li>ARIA-Labels und -Beschreibungen</li>
|
|
<li>Live-Regionen für Updates</li>
|
|
<li>Semantische HTML-Struktur</li>
|
|
<li>Beschreibende Alt-Texte</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 style="color: #ffd43b; margin-bottom: 12px;">Visuelle Unterstützung</h4>
|
|
<ul class="feature-list">
|
|
<li>Hoher Kontrast verfügbar</li>
|
|
<li>Reduzierte Bewegung unterstützt</li>
|
|
<li>Skalierbare Schriftgrößen</li>
|
|
<li>Farbenblind-freundliche Palette</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-buttons">
|
|
<button class="demo-btn" onclick="testKeyboardNavigation()">Tastatur-Navigation testen</button>
|
|
<button class="demo-btn" onclick="testScreenReader()">Screen Reader Features</button>
|
|
<button class="demo-btn" onclick="toggleHighContrast()">Hoher Kontrast</button>
|
|
<button class="demo-btn" onclick="testReducedMotion()">Reduzierte Bewegung</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load modules -->
|
|
<script type="module">
|
|
import { InteractivityEnhancer } from './src/InteractivityEnhancer.js';
|
|
import { UrlValidator } from './src/UrlValidator.js';
|
|
|
|
// Initialize interactivity enhancer
|
|
const enhancer = new InteractivityEnhancer();
|
|
|
|
// Enhance URL input
|
|
const urlInput = document.getElementById('test-url-input');
|
|
const extractBtn = document.getElementById('test-extract-btn');
|
|
|
|
const urlEnhancement = enhancer.enhanceUrlInput(urlInput, {
|
|
showHelp: true,
|
|
realTimeValidation: true,
|
|
validationDelay: 300,
|
|
onValidationChange: (validation) => {
|
|
urlInput.classList.remove('valid', 'invalid', 'validating');
|
|
if (validation.isValid === true) {
|
|
urlInput.classList.add('valid');
|
|
extractBtn.disabled = false;
|
|
} else if (validation.isValid === false) {
|
|
urlInput.classList.add('invalid');
|
|
extractBtn.disabled = true;
|
|
} else if (validation.isValid === null) {
|
|
extractBtn.disabled = !urlInput.value.trim();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Enhance title selection
|
|
const titleSelection = document.getElementById('test-title-selection');
|
|
const titleEnhancement = enhancer.enhanceTitleSelection(titleSelection, {
|
|
enableKeyboardNavigation: true,
|
|
showHelp: true,
|
|
highlightRecommended: true
|
|
});
|
|
|
|
// Enhance progress
|
|
const progress = document.getElementById('test-progress');
|
|
const progressEnhancement = enhancer.enhanceWorkflowProgress(progress);
|
|
|
|
// Make enhancer available globally for demo functions
|
|
window.enhancer = enhancer;
|
|
window.urlInput = urlInput;
|
|
window.titleSelection = titleSelection;
|
|
window.progress = progress;
|
|
|
|
// Demo functions
|
|
window.testValidUrl = () => {
|
|
urlInput.value = 'https://amazon.de/dp/B08N5WRWNW';
|
|
urlInput.dispatchEvent(new Event('input'));
|
|
};
|
|
|
|
window.testInvalidUrl = () => {
|
|
urlInput.value = 'https://example.com/invalid-url';
|
|
urlInput.dispatchEvent(new Event('input'));
|
|
};
|
|
|
|
window.clearUrl = () => {
|
|
urlInput.value = '';
|
|
urlInput.dispatchEvent(new Event('input'));
|
|
};
|
|
|
|
window.showUrlHelp = () => {
|
|
enhancer.showHelp(urlInput, 'url-input');
|
|
};
|
|
|
|
window.selectFirstOption = () => {
|
|
const firstOption = titleSelection.querySelector('[data-index="0"]');
|
|
firstOption.click();
|
|
};
|
|
|
|
window.selectOriginal = () => {
|
|
const originalOption = titleSelection.querySelector('[data-index="3"]');
|
|
originalOption.click();
|
|
};
|
|
|
|
window.showTitleHelp = () => {
|
|
enhancer.showHelp(titleSelection, 'title-selection');
|
|
};
|
|
|
|
window.resetTitleSelection = () => {
|
|
titleSelection.querySelectorAll('.title-option').forEach(option => {
|
|
option.classList.remove('selected', 'highlighted');
|
|
option.setAttribute('aria-selected', 'false');
|
|
});
|
|
};
|
|
|
|
let progressStep = 0;
|
|
const steps = ['validate', 'extract', 'ai', 'select', 'save'];
|
|
|
|
window.simulateProgress = () => {
|
|
if (progressStep < steps.length) {
|
|
const step = steps[progressStep];
|
|
const stepEl = progress.querySelector(`[data-step="${step}"]`);
|
|
|
|
// Set to active
|
|
stepEl.classList.remove('completed', 'error');
|
|
stepEl.classList.add('active');
|
|
stepEl.querySelector('.step-status').textContent = '⏳';
|
|
|
|
// Show help for active step
|
|
enhancer.showHelp(stepEl, step);
|
|
|
|
setTimeout(() => {
|
|
// Set to completed
|
|
stepEl.classList.remove('active');
|
|
stepEl.classList.add('completed');
|
|
stepEl.querySelector('.step-status').textContent = '✅';
|
|
|
|
enhancer.showFeedback(stepEl, 'success', 'Schritt abgeschlossen', 2000);
|
|
progressStep++;
|
|
|
|
if (progressStep < steps.length) {
|
|
setTimeout(() => window.simulateProgress(), 1000);
|
|
}
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
window.simulateError = () => {
|
|
const step = steps[Math.min(progressStep, steps.length - 1)];
|
|
const stepEl = progress.querySelector(`[data-step="${step}"]`);
|
|
|
|
stepEl.classList.remove('active', 'completed');
|
|
stepEl.classList.add('error');
|
|
stepEl.querySelector('.step-status').textContent = '❌';
|
|
|
|
enhancer.showFeedback(stepEl, 'error', 'Schritt fehlgeschlagen', 3000);
|
|
};
|
|
|
|
window.resetProgress = () => {
|
|
progressStep = 0;
|
|
progress.querySelectorAll('.progress-step').forEach(step => {
|
|
step.classList.remove('active', 'completed', 'error');
|
|
step.querySelector('.step-status').textContent = '';
|
|
});
|
|
};
|
|
|
|
window.showProgressHelp = () => {
|
|
const activeStep = progress.querySelector('.progress-step.active') ||
|
|
progress.querySelector('[data-step="validate"]');
|
|
const stepId = activeStep.getAttribute('data-step');
|
|
enhancer.showHelp(activeStep, stepId);
|
|
};
|
|
|
|
window.testKeyboardNavigation = () => {
|
|
enhancer.showFeedback(
|
|
document.body,
|
|
'info',
|
|
'Verwenden Sie Tab zum Navigieren, Enter zum Aktivieren, Pfeiltasten in Listen',
|
|
5000
|
|
);
|
|
};
|
|
|
|
window.testScreenReader = () => {
|
|
enhancer.showFeedback(
|
|
document.body,
|
|
'info',
|
|
'Screen Reader Features sind aktiv: ARIA-Labels, Live-Regionen, semantische Struktur',
|
|
5000
|
|
);
|
|
};
|
|
|
|
window.toggleHighContrast = () => {
|
|
document.body.style.filter = document.body.style.filter ? '' : 'contrast(150%) brightness(120%)';
|
|
enhancer.showFeedback(
|
|
document.body,
|
|
'info',
|
|
'Hoher Kontrast ' + (document.body.style.filter ? 'aktiviert' : 'deaktiviert'),
|
|
3000
|
|
);
|
|
};
|
|
|
|
window.testReducedMotion = () => {
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
`;
|
|
|
|
if (document.head.contains(style)) {
|
|
document.head.removeChild(style);
|
|
enhancer.showFeedback(document.body, 'info', 'Animationen aktiviert', 3000);
|
|
} else {
|
|
document.head.appendChild(style);
|
|
enhancer.showFeedback(document.body, 'info', 'Reduzierte Bewegung aktiviert', 3000);
|
|
}
|
|
};
|
|
|
|
console.log('Interactivity Enhancements Test loaded successfully!');
|
|
console.log('Available demo functions:', {
|
|
testValidUrl, testInvalidUrl, clearUrl, showUrlHelp,
|
|
selectFirstOption, selectOriginal, showTitleHelp, resetTitleSelection,
|
|
simulateProgress, simulateError, resetProgress, showProgressHelp,
|
|
testKeyboardNavigation, testScreenReader, toggleHighContrast, testReducedMotion
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |