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
440 lines
20 KiB
HTML
440 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 Items - Responsive Test</title>
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #0a0a0a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Ensure full responsive behavior */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Test container to simulate the extension environment */
|
|
.test-container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
/* Breakpoint indicator */
|
|
.breakpoint-indicator {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: #ff9900;
|
|
color: #000;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
z-index: 10000;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Breakpoint Indicator -->
|
|
<div class="breakpoint-indicator" id="breakpoint-indicator">
|
|
Desktop (≥769px)
|
|
</div>
|
|
|
|
<div class="test-container">
|
|
<!-- Your Enhanced Items Content with the responsive design applied -->
|
|
<div class="amazon-ext-enhanced-items-content" role="main" id="main-content">
|
|
|
|
<!-- Header -->
|
|
<div class="enhanced-items-header">
|
|
<h2>Enhanced Items</h2>
|
|
</div>
|
|
|
|
<!-- Add Item Form -->
|
|
<div class="add-enhanced-item-form" role="search" aria-label="Add new enhanced item" style="position: relative;">
|
|
<input type="url"
|
|
class="enhanced-url-input"
|
|
placeholder="Amazon-URL eingeben für automatische Extraktion..."
|
|
aria-label="Amazon product URL"
|
|
aria-describedby="url-validation-feedback url-help-text"
|
|
aria-invalid="false"
|
|
tabindex="1">
|
|
|
|
<div class="url-validation-container">
|
|
<div class="validation-feedback" id="url-validation-feedback" role="status" aria-live="polite">
|
|
<div class="validation-icon"></div>
|
|
<div class="validation-message"></div>
|
|
</div>
|
|
<div class="input-guidance" id="url-help-text" style="display: none;">
|
|
<div class="guidance-content">
|
|
<div class="guidance-title">💡 Tipp</div>
|
|
<div class="guidance-text">Fügen Sie eine Amazon-Produktseite-URL ein</div>
|
|
<div class="guidance-examples">
|
|
<div class="example-title">Beispiele:</div>
|
|
<div class="example-url">amazon.de/dp/B08N5WRWNW</div>
|
|
<div class="example-url">amazon.com/gp/product/B08N5WRWNW</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="extract-btn" type="button" aria-label="Field 2" tabindex="2" aria-describedby="extract-btn-help">
|
|
Extrahieren & Hinzufügen
|
|
</button>
|
|
|
|
<button class="help-button"
|
|
aria-label="Hilfe für Amazon-URL eingeben"
|
|
type="button"
|
|
tabindex="3"
|
|
style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);">
|
|
❓
|
|
</button>
|
|
|
|
<div id="extract-btn-help" class="sr-only">
|
|
Extract product data from the entered URL and generate AI title suggestions.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Indicator (hidden by default) -->
|
|
<div class="extraction-progress" style="display: none;">
|
|
<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>
|
|
|
|
<!-- Messages (hidden by default) -->
|
|
<div class="error-message" style="display: none;"></div>
|
|
<div class="success-message" style="display: none;"></div>
|
|
|
|
<!-- Enhanced Item List with your actual item -->
|
|
<div class="enhanced-item-list" role="region" aria-label="Enhanced items list">
|
|
|
|
<!-- Your ROCKBROS Item with full responsive design -->
|
|
<div class="enhanced-item"
|
|
data-item-id="B08WX56W96"
|
|
role="article"
|
|
aria-labelledby="item-title-1"
|
|
aria-describedby="item-desc-1"
|
|
tabindex="0">
|
|
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title" id="item-title-1">
|
|
ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS
|
|
</h3>
|
|
<div class="item-price-display">
|
|
<span class="price" aria-label="Preis: 12 Euro">12.00 EUR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7"
|
|
target="_blank"
|
|
class="item-url"
|
|
rel="noopener noreferrer"
|
|
aria-label="Produkt auf Amazon anzeigen (öffnet in neuem Tab)">
|
|
<span class="url-icon">🔗</span>
|
|
https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektieren...
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date" aria-label="Erstellt am 11. Januar 2026 um 16:14 Uhr">
|
|
Erstellt: 11.01.2026, 16:14
|
|
</span>
|
|
<span class="manual-badge" aria-label="Manuell erstellter Titel">Manuell</span>
|
|
</div>
|
|
|
|
<!-- Original Title Section (hidden by default) -->
|
|
<div class="original-title-section" style="display: none;">
|
|
<div class="original-title-label">Original-Titel:</div>
|
|
<div class="original-title-text">
|
|
ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Item Actions with responsive design -->
|
|
<div class="item-actions" role="group" aria-label="Item actions">
|
|
<button class="toggle-original-btn"
|
|
data-item-id="B08WX56W96"
|
|
type="button"
|
|
aria-pressed="false"
|
|
title="Original-Titel anzeigen/verbergen">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Original</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">O</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button class="edit-item-btn"
|
|
data-item-id="B08WX56W96"
|
|
type="button"
|
|
title="Item bearbeiten">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Bearbeiten</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">E</span>
|
|
</span>
|
|
</button>
|
|
|
|
<button class="delete-item-btn"
|
|
data-item-id="B08WX56W96"
|
|
type="button"
|
|
title="Item löschen">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Löschen</span>
|
|
<span class="keyboard-shortcut">
|
|
<span class="kbd">Del</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Screen Reader Description -->
|
|
<div id="item-desc-1" class="sr-only">
|
|
Produkt: ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS.
|
|
Preis: 12.00 EUR.
|
|
Erstellt: 11.01.2026, 16:14.
|
|
Manueller Titel.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add a second item for better testing -->
|
|
<div class="enhanced-item"
|
|
data-item-id="B08N5WRWNW"
|
|
role="article"
|
|
aria-labelledby="item-title-2"
|
|
aria-describedby="item-desc-2"
|
|
tabindex="0">
|
|
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title" id="item-title-2">
|
|
Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone
|
|
</h3>
|
|
<div class="item-price-display">
|
|
<span class="price" aria-label="Preis: 899 Euro und 99 Cent">€899.99</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://amazon.de/dp/B08N5WRWNW"
|
|
target="_blank"
|
|
class="item-url"
|
|
rel="noopener noreferrer"
|
|
aria-label="Produkt auf Amazon anzeigen (öffnet in neuem Tab)">
|
|
<span class="url-icon">🔗</span>
|
|
amazon.de/dp/B08N5WRWNW
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date" aria-label="Erstellt am 15. Januar 2026 um 13:58 Uhr">
|
|
Erstellt: 15.01.2026, 13:58
|
|
</span>
|
|
<span class="ai-badge" aria-label="KI-generierter Titel">KI-Titel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-actions" role="group" aria-label="Item actions">
|
|
<button class="toggle-original-btn"
|
|
data-item-id="B08N5WRWNW"
|
|
type="button"
|
|
aria-pressed="false">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Original</span>
|
|
</button>
|
|
|
|
<button class="edit-item-btn"
|
|
data-item-id="B08N5WRWNW"
|
|
type="button">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Bearbeiten</span>
|
|
</button>
|
|
|
|
<button class="delete-item-btn"
|
|
data-item-id="B08N5WRWNW"
|
|
type="button">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Löschen</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="item-desc-2" class="sr-only">
|
|
Produkt: Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone.
|
|
Preis: €899.99.
|
|
Erstellt: 15.01.2026, 13:58.
|
|
KI-generierter Titel.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Breakpoint Detection
|
|
function updateBreakpointIndicator() {
|
|
const indicator = document.getElementById('breakpoint-indicator');
|
|
const width = window.innerWidth;
|
|
|
|
if (width <= 480) {
|
|
indicator.textContent = 'Mobile (≤480px)';
|
|
indicator.style.background = '#dc3545';
|
|
indicator.style.color = '#fff';
|
|
} else if (width <= 768) {
|
|
indicator.textContent = 'Tablet (481px-768px)';
|
|
indicator.style.background = '#ffc107';
|
|
indicator.style.color = '#000';
|
|
} else {
|
|
indicator.textContent = 'Desktop (≥769px)';
|
|
indicator.style.background = '#28a745';
|
|
indicator.style.color = '#fff';
|
|
}
|
|
}
|
|
|
|
// Item Actions
|
|
function setupItemActions() {
|
|
// Toggle Original Title
|
|
document.querySelectorAll('.toggle-original-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const itemId = btn.dataset.itemId;
|
|
const item = document.querySelector(`[data-item-id="${itemId}"]`);
|
|
const originalSection = item.querySelector('.original-title-section');
|
|
const isPressed = btn.getAttribute('aria-pressed') === 'true';
|
|
|
|
btn.setAttribute('aria-pressed', !isPressed);
|
|
btn.querySelector('.btn-text').textContent = isPressed ? 'Original' : 'Verbergen';
|
|
|
|
if (originalSection) {
|
|
originalSection.style.display = isPressed ? 'none' : 'block';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Edit Item
|
|
document.querySelectorAll('.edit-item-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
alert('Bearbeiten-Dialog würde hier geöffnet werden');
|
|
});
|
|
});
|
|
|
|
// Delete Item
|
|
document.querySelectorAll('.delete-item-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
if (confirm('Sind Sie sicher, dass Sie dieses Item löschen möchten?')) {
|
|
btn.closest('.enhanced-item').remove();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Extract Button
|
|
function setupExtractButton() {
|
|
const extractBtn = document.querySelector('.extract-btn');
|
|
const progressContainer = document.querySelector('.extraction-progress');
|
|
|
|
if (extractBtn) {
|
|
extractBtn.addEventListener('click', () => {
|
|
extractBtn.disabled = true;
|
|
extractBtn.textContent = 'Extrahiere...';
|
|
progressContainer.style.display = 'block';
|
|
|
|
// Simulate progress
|
|
simulateProgress();
|
|
|
|
setTimeout(() => {
|
|
extractBtn.disabled = false;
|
|
extractBtn.textContent = 'Extrahieren & Hinzufügen';
|
|
progressContainer.style.display = 'none';
|
|
}, 5000);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Simulate Progress Steps
|
|
function simulateProgress() {
|
|
const steps = document.querySelectorAll('.progress-step');
|
|
|
|
steps.forEach((step, index) => {
|
|
setTimeout(() => {
|
|
// Remove previous active states
|
|
steps.forEach(s => s.classList.remove('active', 'completed'));
|
|
|
|
// Add completed to previous steps
|
|
for (let i = 0; i < index; i++) {
|
|
steps[i].classList.add('completed');
|
|
steps[i].querySelector('.step-status').textContent = '✓';
|
|
}
|
|
|
|
// Add active to current step
|
|
step.classList.add('active');
|
|
step.querySelector('.step-status').textContent = '⏳';
|
|
|
|
// Complete last step
|
|
if (index === steps.length - 1) {
|
|
setTimeout(() => {
|
|
step.classList.remove('active');
|
|
step.classList.add('completed');
|
|
step.querySelector('.step-status').textContent = '✓';
|
|
}, 800);
|
|
}
|
|
}, index * 800);
|
|
});
|
|
}
|
|
|
|
// Help Button
|
|
document.querySelector('.help-button')?.addEventListener('click', () => {
|
|
const helpText = document.getElementById('url-help-text');
|
|
const isVisible = helpText.style.display !== 'none';
|
|
helpText.style.display = isVisible ? 'none' : 'block';
|
|
});
|
|
|
|
// Initialize
|
|
window.addEventListener('load', () => {
|
|
updateBreakpointIndicator();
|
|
setupItemActions();
|
|
setupExtractButton();
|
|
});
|
|
|
|
window.addEventListener('resize', updateBreakpointIndicator);
|
|
</script>
|
|
</body>
|
|
</html> |