456 lines
No EOL
16 KiB
HTML
456 lines
No EOL
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PowerOn AI Platform - Komponenten & Fortschritt</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
}
|
|
h1 {
|
|
color: #2c3e50;
|
|
text-align: center;
|
|
border-bottom: 3px solid #3498db;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 30px;
|
|
font-size: 2.5em;
|
|
}
|
|
h2 {
|
|
color: #34495e;
|
|
margin-top: 40px;
|
|
border-left: 4px solid #3498db;
|
|
padding-left: 15px;
|
|
font-size: 1.8em;
|
|
}
|
|
.chart-section {
|
|
margin: 40px 0;
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
height: 500px;
|
|
margin: 20px 0;
|
|
}
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
.summary-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.summary-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.summary-number {
|
|
font-size: 3em;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
.summary-label {
|
|
font-size: 1.1em;
|
|
opacity: 0.9;
|
|
}
|
|
.status-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 15px;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.legend-color {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
}
|
|
.complete { background: #27ae60; }
|
|
.in-progress { background: #f39c12; }
|
|
.pending { background: #e74c3c; }
|
|
.legend-item.complete { background: rgba(39, 174, 96, 0.1); color: #27ae60; }
|
|
.legend-item.in-progress { background: rgba(243, 156, 18, 0.1); color: #f39c12; }
|
|
.legend-item.pending { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
|
|
.details-section {
|
|
margin: 40px 0;
|
|
padding: 25px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
border: 2px solid #e9ecef;
|
|
}
|
|
.component-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.component-item {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid;
|
|
background: #f8f9fa;
|
|
}
|
|
.component-item.complete { border-left-color: #27ae60; }
|
|
.component-item.in-progress { border-left-color: #f39c12; }
|
|
.component-item.pending { border-left-color: #e74c3c; }
|
|
.component-name {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.component-status {
|
|
font-size: 0.9em;
|
|
opacity: 0.8;
|
|
}
|
|
.progress-indicator {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #ecf0f1;
|
|
border-radius: 4px;
|
|
margin-top: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.progress-bar.complete { background: #27ae60; }
|
|
.progress-bar.in-progress { background: #f39c12; }
|
|
.progress-bar.pending { background: #e74c3c; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🚀 PowerOn AI Platform</h1>
|
|
<h2>Komponenten & Fortschritt Übersicht</h2>
|
|
|
|
<!-- Summary Statistics -->
|
|
<div class="summary-grid">
|
|
<div class="summary-card">
|
|
<div class="summary-number">85%</div>
|
|
<div class="summary-label">Gesamtfortschritt</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-number">8</div>
|
|
<div class="summary-label">Methoden implementiert</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-number">5</div>
|
|
<div class="summary-label">Hauptkomponenten</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-number">4</div>
|
|
<div class="summary-label">Release-Phasen</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Legend -->
|
|
<div class="status-legend">
|
|
<div class="legend-item complete">
|
|
<div class="legend-color complete"></div>
|
|
<span>Abgeschlossen (100%)</span>
|
|
</div>
|
|
<div class="legend-item in-progress">
|
|
<div class="legend-color in-progress"></div>
|
|
<span>In Bearbeitung (60-90%)</span>
|
|
</div>
|
|
<div class="legend-item pending">
|
|
<div class="legend-color pending"></div>
|
|
<span>Ausstehend (0-60%)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chart -->
|
|
<div class="chart-section">
|
|
<h2>📊 Komponenten-Fortschritt</h2>
|
|
<div class="chart-container">
|
|
<canvas id="componentsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Component Status -->
|
|
<div class="details-section">
|
|
<h2>🔍 Detaillierter Komponenten-Status</h2>
|
|
<div class="component-list">
|
|
<div class="component-item complete">
|
|
<div class="component-name">Backend-Implementierung</div>
|
|
<div class="component-status">100% abgeschlossen</div>
|
|
<div class="progress-indicator">
|
|
<div class="progress-bar complete" style="width: 100%"></div>
|
|
</div>
|
|
<ul style="margin-top: 10px; font-size: 0.9em;">
|
|
<li>8 Methoden implementiert</li>
|
|
<li>ServiceCenter erstellt</li>
|
|
<li>Document Processing</li>
|
|
<li>Workflow Management</li>
|
|
</ul>
|
|
</div>
|
|
<div class="component-item in-progress">
|
|
<div class="component-name">Frontend-UI</div>
|
|
<div class="component-status">90% abgeschlossen</div>
|
|
<div class="progress-indicator">
|
|
<div class="progress-bar in-progress" style="width: 90%"></div>
|
|
</div>
|
|
<ul style="margin-top: 10px; font-size: 0.9em;">
|
|
<li>Workflow-UI implementiert</li>
|
|
<li>User Connectors</li>
|
|
<li>Login-System</li>
|
|
<li>Real-time Updates fehlen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="component-item in-progress">
|
|
<div class="component-name">Modul-Testing</div>
|
|
<div class="component-status">80% abgeschlossen</div>
|
|
<div class="progress-indicator">
|
|
<div class="progress-bar in-progress" style="width: 80%"></div>
|
|
</div>
|
|
<ul style="margin-top: 10px; font-size: 0.9em;">
|
|
<li>Workflow-Tests implementiert</li>
|
|
<li>Methoden-Signaturen validiert</li>
|
|
<li>Dokumentenübergabe getestet</li>
|
|
<li>End-to-End Tests fehlen</li>
|
|
</ul>
|
|
</div>
|
|
<div class="component-item pending">
|
|
<div class="component-name">Workflow-Testing</div>
|
|
<div class="component-status">40% abgeschlossen</div>
|
|
<div class="progress-indicator">
|
|
<div class="progress-bar pending" style="width: 40%"></div>
|
|
</div>
|
|
<ul style="margin-top: 10px; font-size: 0.9em;">
|
|
<li>Task-Erstellung implementiert</li>
|
|
<li>Action-Execution-System vorhanden</li>
|
|
<li>Workflow-Ausführung in Bearbeitung</li>
|
|
<li>Handover-Testing ausstehend</li>
|
|
</ul>
|
|
</div>
|
|
<div class="component-item pending">
|
|
<div class="component-name">Sicherheit & Validierung</div>
|
|
<div class="component-status">20% abgeschlossen</div>
|
|
<div class="progress-indicator">
|
|
<div class="progress-bar pending" style="width: 20%"></div>
|
|
</div>
|
|
<ul style="margin-top: 10px; font-size: 0.9em;">
|
|
<li>Grundlegende Authentifizierung</li>
|
|
<li>Input Validation ausstehend</li>
|
|
<li>Session-Management ausstehend</li>
|
|
<li>Data Protection ausstehend</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Methods Chart -->
|
|
<div class="chart-section">
|
|
<h2>🔧 Methoden-Implementierung</h2>
|
|
<div class="chart-container">
|
|
<canvas id="methodsChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Main Components Chart
|
|
const componentsCtx = document.getElementById('componentsChart').getContext('2d');
|
|
const componentsChart = new Chart(componentsCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
'Backend-Implementierung',
|
|
'Frontend-UI',
|
|
'Modul-Testing',
|
|
'Workflow-Testing',
|
|
'Sicherheit & Validierung'
|
|
],
|
|
datasets: [{
|
|
label: 'Fortschritt (%)',
|
|
data: [100, 90, 80, 40, 20],
|
|
backgroundColor: [
|
|
'#27ae60', // Complete
|
|
'#f39c12', // In Progress
|
|
'#f39c12', // In Progress
|
|
'#e74c3c', // Pending
|
|
'#e74c3c' // Pending
|
|
],
|
|
borderColor: [
|
|
'#229954',
|
|
'#e67e22',
|
|
'#e67e22',
|
|
'#c0392b',
|
|
'#c0392b'
|
|
],
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Komponenten-Fortschritt in Prozent',
|
|
font: {
|
|
size: 16,
|
|
weight: 'bold'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
},
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.1)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
maxRotation: 45,
|
|
minRotation: 45
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 2000,
|
|
easing: 'easeInOutQuart'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Methods Chart
|
|
const methodsCtx = document.getElementById('methodsChart').getContext('2d');
|
|
const methodsChart = new Chart(methodsCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [
|
|
'Web-Recherche',
|
|
'SharePoint',
|
|
'PowerPoint',
|
|
'Outlook',
|
|
'Operator',
|
|
'Dokumente',
|
|
'Code',
|
|
'Excel'
|
|
],
|
|
datasets: [{
|
|
label: 'Implementierungsstatus',
|
|
data: [100, 100, 100, 100, 100, 100, 100, 100],
|
|
backgroundColor: '#27ae60',
|
|
borderColor: '#229954',
|
|
borderWidth: 2,
|
|
borderRadius: 6,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Alle 8 Methoden sind vollständig implementiert',
|
|
font: {
|
|
size: 16,
|
|
weight: 'bold'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
}
|
|
},
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.1)'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
maxRotation: 45,
|
|
minRotation: 45
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 1500,
|
|
easing: 'easeInOutQuart'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Add hover effects to summary cards
|
|
document.querySelectorAll('.summary-card').forEach(card => {
|
|
card.addEventListener('mouseenter', function() {
|
|
this.style.transform = 'translateY(-8px) scale(1.02)';
|
|
});
|
|
card.addEventListener('mouseleave', function() {
|
|
this.style.transform = 'translateY(0) scale(1)';
|
|
});
|
|
});
|
|
|
|
// Add click effects to component items
|
|
document.querySelectorAll('.component-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
this.style.transform = 'scale(0.98)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 150);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |