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
306 lines
15 KiB
HTML
306 lines
15 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 Interface Test - Beautiful Glassmorphism Design</title>
|
|
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
|
|
min-height: 100vh;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
|
|
.demo-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.demo-title {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 3rem;
|
|
background: linear-gradient(135deg, #ff9900, #ff7700);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.demo-section h2 {
|
|
color: #ff9900;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-container">
|
|
<h1 class="demo-title">Enhanced Interface - Beautiful Glassmorphism Design</h1>
|
|
|
|
<!-- Enhanced Items Panel Demo -->
|
|
<div class="demo-section">
|
|
<h2>Enhanced Items Panel</h2>
|
|
<div class="amazon-ext-enhanced-items-content">
|
|
<div class="enhanced-items-header">
|
|
<h2>Enhanced Items</h2>
|
|
<div class="add-enhanced-item-form">
|
|
<input
|
|
type="url"
|
|
class="enhanced-url-input"
|
|
placeholder="Amazon-URL eingeben für automatische Extraktion..."
|
|
value="https://amazon.de/dp/B08N5WRWNW"
|
|
/>
|
|
<button class="extract-btn" type="button">Extrahieren & Hinzufügen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Indicator Demo -->
|
|
<div class="extraction-progress">
|
|
<div class="progress-header">
|
|
<h4>Verarbeitung läuft...</h4>
|
|
</div>
|
|
<div class="progress-steps">
|
|
<div class="progress-step completed" data-step="validate">
|
|
<span class="step-icon">🔍</span>
|
|
<span class="step-text">URL validieren...</span>
|
|
<span class="step-status completed">✅</span>
|
|
</div>
|
|
<div class="progress-step completed" data-step="extract">
|
|
<span class="step-icon">📦</span>
|
|
<span class="step-text">Produktdaten extrahieren...</span>
|
|
<span class="step-status completed">✅</span>
|
|
</div>
|
|
<div class="progress-step active" data-step="ai">
|
|
<span class="step-icon">🤖</span>
|
|
<span class="step-text">KI-Titelvorschläge generieren...</span>
|
|
<span class="step-status active">⏳</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>
|
|
|
|
<!-- Title Selection Demo -->
|
|
<div class="title-selection-container">
|
|
<div class="title-selection-header">
|
|
<h3 class="selection-title">Titel auswählen:</h3>
|
|
</div>
|
|
|
|
<div class="title-options">
|
|
<div class="title-option ai-generated selected">
|
|
<span class="option-label">KI-Vorschlag 1:</span>
|
|
<span class="option-text">Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone</span>
|
|
</div>
|
|
<div class="title-option ai-generated">
|
|
<span class="option-label">KI-Vorschlag 2:</span>
|
|
<span class="option-text">Galaxy S21 Ultra: High-End Android Smartphone mit 5G</span>
|
|
</div>
|
|
<div class="title-option ai-generated">
|
|
<span class="option-label">KI-Vorschlag 3:</span>
|
|
<span class="option-text">Samsung S21 Ultra - Professional Mobile Device</span>
|
|
</div>
|
|
<div class="title-option original">
|
|
<span class="option-label">Original:</span>
|
|
<span class="option-text">Samsung Galaxy S21 Ultra 5G Smartphone 128GB Phantom Black</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selection-actions">
|
|
<button class="confirm-selection-btn">Auswahl bestätigen</button>
|
|
<button class="skip-ai-btn">Ohne KI fortfahren</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced Item Cards Demo -->
|
|
<div class="enhanced-item-list">
|
|
<div class="enhanced-item">
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title">Samsung Galaxy S21 Ultra - Premium 5G Flagship</h3>
|
|
<div class="item-price-display">
|
|
<span class="price">€899.99 EUR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://amazon.de/dp/B08N5WRWNW" target="_blank" class="item-url">
|
|
<span class="url-icon">🔗</span>
|
|
amazon.de/dp/B08N5WRWNW
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date">Erstellt: 11.01.2026, 13:58</span>
|
|
<span class="ai-badge">KI-Titel</span>
|
|
</div>
|
|
|
|
<div class="original-title-section" style="display: none;">
|
|
<div class="original-title-label">Original-Titel:</div>
|
|
<div class="original-title-text">Samsung Galaxy S21 Ultra 5G Smartphone 128GB Phantom Black</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-actions">
|
|
<button class="toggle-original-btn">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Original</span>
|
|
</button>
|
|
<button class="edit-item-btn">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Bearbeiten</span>
|
|
</button>
|
|
<button class="delete-item-btn">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Löschen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="enhanced-item">
|
|
<div class="item-main-content">
|
|
<div class="item-header">
|
|
<h3 class="item-custom-title">Apple MacBook Pro M2 - Professional Laptop für Entwickler</h3>
|
|
<div class="item-price-display">
|
|
<span class="price">€1,299.00 EUR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-details">
|
|
<div class="item-url-section">
|
|
<a href="https://amazon.de/dp/B0B3C57RQJ" target="_blank" class="item-url">
|
|
<span class="url-icon">🔗</span>
|
|
amazon.de/dp/B0B3C57RQJ
|
|
</a>
|
|
</div>
|
|
|
|
<div class="item-meta">
|
|
<span class="created-date">Erstellt: 10.01.2026, 15:22</span>
|
|
<span class="ai-badge">KI-Titel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item-actions">
|
|
<button class="toggle-original-btn">
|
|
<span class="btn-icon">👁️</span>
|
|
<span class="btn-text">Original</span>
|
|
</button>
|
|
<button class="edit-item-btn">
|
|
<span class="btn-icon">✏️</span>
|
|
<span class="btn-text">Bearbeiten</span>
|
|
</button>
|
|
<button class="delete-item-btn">
|
|
<span class="btn-icon">🗑️</span>
|
|
<span class="btn-text">Löschen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Success Message Demo -->
|
|
<div class="success-message">
|
|
Enhanced Item erfolgreich erstellt! 🎉
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Add some interactive demo functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Toggle original title functionality
|
|
document.querySelectorAll('.toggle-original-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const itemEl = this.closest('.enhanced-item');
|
|
const originalSection = itemEl.querySelector('.original-title-section');
|
|
|
|
if (originalSection.style.display === 'none') {
|
|
originalSection.style.display = 'block';
|
|
this.classList.add('active');
|
|
this.title = 'Original-Titel verbergen';
|
|
} else {
|
|
originalSection.style.display = 'none';
|
|
this.classList.remove('active');
|
|
this.title = 'Original-Titel anzeigen';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Title selection functionality
|
|
document.querySelectorAll('.title-option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// Remove selected class from all options
|
|
document.querySelectorAll('.title-option').forEach(opt => {
|
|
opt.classList.remove('selected');
|
|
});
|
|
|
|
// Add selected class to clicked option
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// Extract button demo
|
|
document.querySelector('.extract-btn').addEventListener('click', function() {
|
|
const progressEl = document.querySelector('.extraction-progress');
|
|
progressEl.style.display = 'block';
|
|
|
|
// Simulate progress steps
|
|
const steps = ['validate', 'extract', 'ai', 'select', 'save'];
|
|
let currentStep = 0;
|
|
|
|
const interval = setInterval(() => {
|
|
if (currentStep < steps.length) {
|
|
// Mark current step as completed
|
|
const stepEl = document.querySelector(`[data-step="${steps[currentStep]}"]`);
|
|
stepEl.classList.remove('active');
|
|
stepEl.classList.add('completed');
|
|
|
|
currentStep++;
|
|
|
|
// Mark next step as active
|
|
if (currentStep < steps.length) {
|
|
const nextStepEl = document.querySelector(`[data-step="${steps[currentStep]}"]`);
|
|
nextStepEl.classList.add('active');
|
|
} else {
|
|
// All steps completed
|
|
setTimeout(() => {
|
|
progressEl.style.display = 'none';
|
|
// Reset steps
|
|
document.querySelectorAll('.progress-step').forEach(step => {
|
|
step.classList.remove('active', 'completed');
|
|
});
|
|
// Show first two as completed for demo
|
|
document.querySelector('[data-step="validate"]').classList.add('completed');
|
|
document.querySelector('[data-step="extract"]').classList.add('completed');
|
|
document.querySelector('[data-step="ai"]').classList.add('active');
|
|
}, 1000);
|
|
clearInterval(interval);
|
|
}
|
|
}
|
|
}, 800);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |