1765 lines
No EOL
76 KiB
HTML
1765 lines
No EOL
76 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>KI-Lead Management System - Energie360</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
|
||
min-height: 100vh;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #00594c 0%, #00a88e 100%);
|
||
color: white;
|
||
padding: 30px 40px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 28px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header .subtitle {
|
||
font-size: 16px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
background: #f8f9fa;
|
||
border-bottom: 2px solid #e9ecef;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-button {
|
||
padding: 15px 25px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #495057;
|
||
transition: all 0.3s;
|
||
white-space: nowrap;
|
||
border-bottom: 3px solid transparent;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.tab-button.active {
|
||
background: white;
|
||
color: #00594c;
|
||
border-bottom-color: #00a88e;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
padding: 40px;
|
||
animation: fadeIn 0.3s;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
h2 {
|
||
color: #00594c;
|
||
margin-bottom: 20px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
h3 {
|
||
color: #00594c;
|
||
margin: 25px 0 15px 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.card {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #00a88e;
|
||
}
|
||
|
||
.card h4 {
|
||
color: #00594c;
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.card p, .card ul {
|
||
color: #495057;
|
||
line-height: 1.6;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card ul {
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.timeline-marker {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #00a88e;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.timeline-content {
|
||
flex: 1;
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.timeline-content h4 {
|
||
color: #00594c;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.interface-demo {
|
||
background: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.interface-demo h4 {
|
||
color: #00594c;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.demo-screen {
|
||
background: white;
|
||
border: 2px solid #dee2e6;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.demo-label {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
text-transform: uppercase;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.phase-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.phase-card {
|
||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border-top: 3px solid #00a88e;
|
||
}
|
||
|
||
.phase-card h4 {
|
||
color: #00594c;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.phase-card .duration {
|
||
color: #00a88e;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.support-area {
|
||
background: #e8f5f2;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
margin: 10px 0;
|
||
border-left: 3px solid #00a88e;
|
||
}
|
||
|
||
.support-area h5 {
|
||
color: #00594c;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.support-area ul {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.support-area li {
|
||
padding: 4px 0;
|
||
color: #495057;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.support-area li:before {
|
||
content: "→ ";
|
||
color: #00a88e;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.metrics-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.metric-card {
|
||
background: white;
|
||
border: 1px solid #dee2e6;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-card .value {
|
||
font-size: 24px;
|
||
color: #00a88e;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.metric-card .label {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.process-details {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.ai-human-split {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.ai-section, .human-section {
|
||
background: #f8f9fa;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border-left: 3px solid;
|
||
}
|
||
|
||
.ai-section {
|
||
border-left-color: #00a88e;
|
||
}
|
||
|
||
.human-section {
|
||
border-left-color: #00594c;
|
||
}
|
||
|
||
.ai-section h5, .human-section h5 {
|
||
color: #00594c;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ai-section ul, .human-section ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.ai-section li, .human-section li {
|
||
font-size: 13px;
|
||
margin-bottom: 5px;
|
||
color: #495057;
|
||
}
|
||
|
||
.kpi-section {
|
||
background: #e8f5f2;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border-left: 3px solid #00a88e;
|
||
}
|
||
|
||
.kpi-section h5 {
|
||
color: #00594c;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.kpi-section ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.kpi-section li {
|
||
font-size: 13px;
|
||
margin-bottom: 5px;
|
||
color: #495057;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.ai-human-split {
|
||
grid-template-columns: 1fr;
|
||
gap: 15px;
|
||
}
|
||
}
|
||
|
||
.comparison-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.current-state, .future-state {
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border-left: 3px solid;
|
||
}
|
||
|
||
.current-state {
|
||
background: #fff5f5;
|
||
border-left-color: #dc3545;
|
||
}
|
||
|
||
.future-state {
|
||
background: #f0fff4;
|
||
border-left-color: #28a745;
|
||
}
|
||
|
||
.current-state h5, .future-state h5 {
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.current-state h5 {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.future-state h5 {
|
||
color: #28a745;
|
||
}
|
||
|
||
.current-state ul, .future-state ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.current-state li, .future-state li {
|
||
font-size: 13px;
|
||
margin-bottom: 5px;
|
||
color: #495057;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.comparison-section {
|
||
grid-template-columns: 1fr;
|
||
gap: 15px;
|
||
}
|
||
}
|
||
|
||
/* Offerte Tab Styles */
|
||
.offerte-phase {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 25px;
|
||
margin: 20px 0;
|
||
border-left: 4px solid #00a88e;
|
||
}
|
||
|
||
.phase-summary {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.phase-summary h4 {
|
||
color: #00594c;
|
||
margin-bottom: 15px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.cost-breakdown {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 6px;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.cost-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f1f3f4;
|
||
}
|
||
|
||
.cost-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.cost-item.total {
|
||
border-top: 2px solid #00a88e;
|
||
border-bottom: none;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #00594c;
|
||
}
|
||
|
||
.cost-item .label {
|
||
color: #495057;
|
||
}
|
||
|
||
.cost-item .value {
|
||
color: #00594c;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.phase-details {
|
||
background: #e8f5f2;
|
||
padding: 20px;
|
||
border-radius: 6px;
|
||
border-left: 3px solid #00a88e;
|
||
}
|
||
|
||
.phase-details h5 {
|
||
color: #00594c;
|
||
margin-bottom: 15px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.phase-details ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.phase-details li {
|
||
margin-bottom: 8px;
|
||
color: #495057;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.total-overview {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 25px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.total-costs, .payment-terms, .additional-info {
|
||
background: #f8f9fa;
|
||
padding: 25px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #00a88e;
|
||
}
|
||
|
||
.total-costs h4, .payment-terms h4, .additional-info h4 {
|
||
color: #00594c;
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.cost-summary {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 6px;
|
||
border: 1px solid #dee2e6;
|
||
}
|
||
|
||
.cost-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f1f3f4;
|
||
}
|
||
|
||
.cost-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.cost-row.total-row {
|
||
border-top: 2px solid #00a88e;
|
||
border-bottom: none;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #00594c;
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.payment-terms ul, .additional-info ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.payment-terms li, .additional-info li {
|
||
margin-bottom: 10px;
|
||
color: #495057;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.total-overview {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.cost-item, .cost-row {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
}
|
||
|
||
/* Customer Tasks Styles */
|
||
.customer-tasks h5 {
|
||
color: #00594c;
|
||
margin: 15px 0 10px 0;
|
||
font-size: 14px;
|
||
border-bottom: 1px solid #dee2e6;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.customer-tasks h5:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.customer-tasks ul {
|
||
margin: 10px 0 15px 20px;
|
||
}
|
||
|
||
.customer-tasks li {
|
||
margin-bottom: 6px;
|
||
color: #495057;
|
||
line-height: 1.4;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>KI-gestütztes Lead Management System</h1>
|
||
<div class="subtitle">Implementierungskonzept für Energie360° - Geschäftsbereich Lösungen</div>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button class="tab-button active" onclick="switchTab(event, 'overview')">Übersicht</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'journey')">Customer Journey</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'process')">Geschäftsprozess</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'interfaces')">Interfaces & Touchpoints</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'roadmap')">Implementierungs-Roadmap</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'offerte')">Offerte</button>
|
||
<button class="tab-button" onclick="switchTab(event, 'support')">Unterstützungsbereiche</button>
|
||
</div>
|
||
|
||
<div id="overview" class="tab-content active">
|
||
<h2>Projektübersicht</h2>
|
||
|
||
<div class="card">
|
||
<h4>Ausgangslage</h4>
|
||
<p>Energie360° transformiert sich zum Anbieter ausschliesslich erneuerbarer Energie bis 2040. Der Geschäftsbereich "Lösungen" fokussiert auf integrale Energielösungen und Contracting für Neubauprojekte.</p>
|
||
</div>
|
||
|
||
<h3>Aktueller Zustand "Heute"</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Personal & Kapazität</h4>
|
||
<ul>
|
||
<li><strong>5 Verkaufspersonen</strong> bearbeiten Leads</li>
|
||
<li><strong>100 Leads pro Jahr</strong> werden bearbeitet</li>
|
||
<li><strong>2 Stunden pro Lead</strong> bis zur Qualifikation</li>
|
||
<li><strong>Manuelle Prozesse</strong> dominieren den Workflow</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Datenquellen & Timing</h4>
|
||
<ul>
|
||
<li><strong>Hauptquelle: Baublatt</strong> (eher spät im Projektzyklus)</li>
|
||
<li>Manuelle Recherche auf SIMAP und espazium</li>
|
||
<li>Reaktive Bearbeitung statt proaktiver Früherkennung</li>
|
||
<li>Begrenzte Marktabdeckung durch Zeitmangel</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Prozessineffizienzen</h4>
|
||
<ul>
|
||
<li>Hoher manueller Aufwand bei der Lead-Generierung</li>
|
||
<li>Keine systematische Qualifikation und Priorisierung</li>
|
||
<li>Fehlende Integration zwischen Datenquellen</li>
|
||
<li>Begrenzte Skalierbarkeit der Lead-Generierung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Zielsetzung</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Quantitative Ziele</h4>
|
||
<ul>
|
||
<li>Steigerung von 100 auf 500+ Leads pro Jahr</li>
|
||
<li>Reduktion der Bearbeitungszeit von 2 auf 0.5 Stunden pro Lead</li>
|
||
<li>Früherkennung 3-6 Monate vor Wettbewerb</li>
|
||
<li>100% Marktabdeckung der Zielregionen</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Qualitative Ziele</h4>
|
||
<ul>
|
||
<li>Automatisierte Qualifikation und Bewertung</li>
|
||
<li>Integration in bestehende CRM-Systeme</li>
|
||
<li>Messbare Steigerung der Lead-Qualität</li>
|
||
<li>Proaktive statt reaktive Lead-Generierung</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Organisatorische Ziele</h4>
|
||
<ul>
|
||
<li>Fokus der Verkaufspersonen auf qualifizierte Leads</li>
|
||
<li>Skalierbare Leadgenerierung ohne Personalaufbau</li>
|
||
<li>Systematische Marktbeobachtung</li>
|
||
<li>Zeitvorsprung gegenüber Wettbewerb</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Kernkomponenten des Systems</h3>
|
||
|
||
<div class="phase-grid">
|
||
<div class="phase-card">
|
||
<h4>Scout-Agent</h4>
|
||
<p>Automatisierte Suche auf SIMAP, Baublatt, espazium</p>
|
||
</div>
|
||
<div class="phase-card">
|
||
<h4>Enricher-Agent</h4>
|
||
<p>Anreicherung mit Projektdetails, Fernwärmeprüfung, SIA-Phasen</p>
|
||
</div>
|
||
<div class="phase-card">
|
||
<h4>Scorer-Agent</h4>
|
||
<p>Bewertung nach definierten Kriterien, Qualifikation</p>
|
||
</div>
|
||
<div class="phase-card">
|
||
<h4>Stakeholder-Agent</h4>
|
||
<p>Identifikation von Entscheidungsträgern und Kontaktdaten</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="journey" class="tab-content">
|
||
<h2>Customer Journey - Energie360° Perspektive</h2>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">1</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Discovery</h4>
|
||
<p><strong>Status heute:</strong> Manuelle Recherche, reaktive Bearbeitung</p>
|
||
<p><strong>Mit KI-System:</strong> Automatisierte Früherkennung in SIA Phase 2-3</p>
|
||
<p><strong>Output:</strong> Qualifizierte Lead-Liste mit Scoring</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">2</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Enrichment</h4>
|
||
<p><strong>Automatisiert:</strong> Projektdaten, Stakeholder, Fernwärme-Check</p>
|
||
<p><strong>Zeit:</strong> Von Stunden auf Minuten reduziert</p>
|
||
<p><strong>Qualität:</strong> Strukturierte, vollständige Datensätze</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">3</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Qualification</h4>
|
||
<p><strong>Kriterien:</strong> Projektgrösse, Fernwärme-Status, Bauphase</p>
|
||
<p><strong>Priorisierung:</strong> Automatisches Scoring und Ranking</p>
|
||
<p><strong>Integration:</strong> Direkte Übergabe an Vertriebsteam</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">4</div>
|
||
<div class="timeline-content">
|
||
<h4>Vertriebsprozess</h4>
|
||
<p><strong>Timing:</strong> Kontaktaufnahme in optimaler Projektphase</p>
|
||
<p><strong>Ansatz:</strong> Datengestützte Ansprache mit relevanten Lösungen</p>
|
||
<p><strong>Tracking:</strong> Lückenlose Dokumentation im CRM</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Mehrwert für Vertriebsteam</h3>
|
||
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="value">75%</div>
|
||
<div class="label">Zeitersparnis Recherche</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">3-6 Mo</div>
|
||
<div class="label">Frühere Projekterkennung</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">5x</div>
|
||
<div class="label">Mehr qualifizierte Leads</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">100%</div>
|
||
<div class="label">Marktabdeckung Region</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="process" class="tab-content">
|
||
<h2>Geschäftsprozess - Lead Management Energie360°</h2>
|
||
|
||
<div class="card">
|
||
<h4>Prozessübersicht</h4>
|
||
<p>Der Lead Management Prozess von Energie360° ist ein strukturierter, iterativer Prozess, der durch KI-gestützte Automatisierung und menschliche Expertise optimiert wird. Jeder Prozessschritt hat definierte KPIs und klare Verantwortlichkeiten.</p>
|
||
</div>
|
||
|
||
<h3>Vergleich: Heute vs. Mit KI-System</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Personal & Kapazität</h4>
|
||
<div class="comparison-section">
|
||
<div class="current-state">
|
||
<h5>🔴 Heute</h5>
|
||
<ul>
|
||
<li><strong>5 Verkaufspersonen</strong></li>
|
||
<li><strong>100 Leads pro Jahr</strong></li>
|
||
<li><strong>2 Stunden pro Lead</strong> bis Qualifikation</li>
|
||
<li>Manuelle Bearbeitung dominiert</li>
|
||
</ul>
|
||
</div>
|
||
<div class="future-state">
|
||
<h5>🟢 Mit KI-System</h5>
|
||
<ul>
|
||
<li><strong>5 Verkaufspersonen</strong> (kein Personalaufbau)</li>
|
||
<li><strong>500+ Leads pro Jahr</strong> (5x Steigerung)</li>
|
||
<li><strong>0.5 Stunden pro Lead</strong> bis Qualifikation</li>
|
||
<li>KI-gestützte Automatisierung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Datenquellen & Timing</h4>
|
||
<div class="comparison-section">
|
||
<div class="current-state">
|
||
<h5>🔴 Heute</h5>
|
||
<ul>
|
||
<li><strong>Hauptquelle: Baublatt</strong></li>
|
||
<li>Eher spät im Projektzyklus</li>
|
||
<li>Manuelle Recherche auf SIMAP/espazium</li>
|
||
<li>Reaktive Bearbeitung</li>
|
||
</ul>
|
||
</div>
|
||
<div class="future-state">
|
||
<h5>🟢 Mit KI-System</h5>
|
||
<ul>
|
||
<li><strong>Alle Quellen automatisiert</strong></li>
|
||
<li>Früherkennung in SIA Phase 2-3</li>
|
||
<li>Kontinuierliche Überwachung</li>
|
||
<li>Proaktive Lead-Generierung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Prozesseffizienz</h4>
|
||
<div class="comparison-section">
|
||
<div class="current-state">
|
||
<h5>🔴 Heute</h5>
|
||
<ul>
|
||
<li>Hoher manueller Aufwand</li>
|
||
<li>Keine systematische Qualifikation</li>
|
||
<li>Begrenzte Marktabdeckung</li>
|
||
<li>Ineffiziente Ressourcenallokation</li>
|
||
</ul>
|
||
</div>
|
||
<div class="future-state">
|
||
<h5>🟢 Mit KI-System</h5>
|
||
<ul>
|
||
<li>75% Zeitersparnis im Gesamtprozess</li>
|
||
<li>Automatisierte Qualifikation & Scoring</li>
|
||
<li>100% Marktabdeckung der Zielregionen</li>
|
||
<li>Optimierte Ressourcenallokation</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Prozessschritte mit KPI-Definition</h3>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">1</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Discovery & Sourcing</h4>
|
||
<div class="process-details">
|
||
<div class="ai-human-split">
|
||
<div class="ai-section">
|
||
<h5>🤖 KI-Unterstützung (80%)</h5>
|
||
<ul>
|
||
<li>Automatisierte Überwachung von SIMAP, Baublatt, espazium</li>
|
||
<li>Früherkennung in SIA Phase 2-3</li>
|
||
<li>Automatische Filterung nach Projektgröße (>50 WE oder >50'000 m²)</li>
|
||
<li>Deduplizierung und Qualitätsprüfung</li>
|
||
</ul>
|
||
</div>
|
||
<div class="human-section">
|
||
<h5>👥 Menschliche Leistung (20%)</h5>
|
||
<ul>
|
||
<li>Überprüfung der KI-Ergebnisse</li>
|
||
<li>Manuelle Recherche bei speziellen Projekten</li>
|
||
<li>Qualitätskontrolle der automatisierten Daten</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-section">
|
||
<h5>📊 KPIs</h5>
|
||
<ul>
|
||
<li><strong>Lead-Volume:</strong> 50-100 neue Leads pro Monat (MVP)</li>
|
||
<li><strong>Früherkennung:</strong> 2-4 Monate vor Wettbewerb (realistisch)</li>
|
||
<li><strong>Qualitätsrate:</strong> 70% der Leads erfüllen Mindestkriterien (MVP)</li>
|
||
<li><strong>Bearbeitungszeit:</strong> Von 2 Stunden auf 0.5 Stunden pro Lead reduziert</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">2</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Enrichment & Research</h4>
|
||
<div class="process-details">
|
||
<div class="ai-human-split">
|
||
<div class="ai-section">
|
||
<h5>🤖 KI-Unterstützung (70%)</h5>
|
||
<ul>
|
||
<li>Automatische Anreicherung mit Projektdetails</li>
|
||
<li>Fernwärme-Perimeter Mapping</li>
|
||
<li>Stakeholder-Identifikation aus öffentlichen Quellen</li>
|
||
<li>Technische Spezifikationen Extraktion</li>
|
||
<li>Kontaktdaten Validierung</li>
|
||
</ul>
|
||
</div>
|
||
<div class="human-section">
|
||
<h5>👥 Menschliche Leistung (30%)</h5>
|
||
<ul>
|
||
<li>Vertiefte Recherche bei komplexen Projekten</li>
|
||
<li>Netzwerk-basierte Kontaktaufnahme</li>
|
||
<li>Qualitätsbewertung der angereicherten Daten</li>
|
||
<li>Strategische Bewertung der Projektchancen</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-section">
|
||
<h5>📊 KPIs</h5>
|
||
<ul>
|
||
<li><strong>Datenvollständigkeit:</strong> 75% der Leads haben vollständige Informationen (MVP)</li>
|
||
<li><strong>Bearbeitungszeit:</strong> Von 2 Stunden auf 0.5 Stunden pro Lead</li>
|
||
<li><strong>Stakeholder-Identifikation:</strong> Durchschnittlich 2-3 Kontakte pro Projekt (MVP)</li>
|
||
<li><strong>Fernwärme-Coverage:</strong> 80% der Projekte sind auf Fernwärme geprüft (MVP)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">3</div>
|
||
<div class="timeline-content">
|
||
<h4>Lead Qualification & Scoring</h4>
|
||
<div class="process-details">
|
||
<div class="ai-human-split">
|
||
<div class="ai-section">
|
||
<h5>🤖 KI-Unterstützung (85%)</h5>
|
||
<ul>
|
||
<li>Automatisches Scoring nach definierten Kriterien</li>
|
||
<li>Priorisierung basierend auf Projektgröße und Phase</li>
|
||
<li>Fernwärme-Potential Bewertung</li>
|
||
<li>Wettbewerbsanalyse und Marktpositionierung</li>
|
||
<li>Automatische Kategorisierung nach Region/Team</li>
|
||
</ul>
|
||
</div>
|
||
<div class="human-section">
|
||
<h5>👥 Menschliche Leistung (15%)</h5>
|
||
<ul>
|
||
<li>Überprüfung der Scoring-Ergebnisse</li>
|
||
<li>Strategische Anpassung der Bewertungskriterien</li>
|
||
<li>Manuelle Priorisierung bei Grenzfällen</li>
|
||
<li>Qualitätskontrolle der automatisierten Bewertungen</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-section">
|
||
<h5>📊 KPIs</h5>
|
||
<ul>
|
||
<li><strong>Scoring-Genauigkeit:</strong> 80% der Leads werden korrekt kategorisiert (MVP)</li>
|
||
<li><strong>Qualifizierungsrate:</strong> 70% der Leads erreichen Vertrieb (MVP)</li>
|
||
<li><strong>Priorisierungsgenauigkeit:</strong> 75% der High-Priority Leads werden bestätigt (MVP)</li>
|
||
<li><strong>Bearbeitungszeit:</strong> Von 2 Stunden auf 0.5 Stunden pro Lead</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">4</div>
|
||
<div class="timeline-content">
|
||
<h4>Sales Handover & Assignment</h4>
|
||
<div class="process-details">
|
||
<div class="ai-human-split">
|
||
<div class="ai-section">
|
||
<h5>🤖 KI-Unterstützung (60%)</h5>
|
||
<ul>
|
||
<li>Automatische Zuweisung nach Regionen/Teams</li>
|
||
<li>Workload-Balancing zwischen Vertriebsmitarbeitern</li>
|
||
<li>Automatische Lead-Import in CRM-Systeme</li>
|
||
<li>Status-Synchronisation und Tracking</li>
|
||
</ul>
|
||
</div>
|
||
<div class="human-section">
|
||
<h5>👥 Menschliche Leistung (40%)</h5>
|
||
<ul>
|
||
<li>Überprüfung der automatischen Zuweisungen</li>
|
||
<li>Manuelle Anpassung bei speziellen Anforderungen</li>
|
||
<li>Qualitätskontrolle vor Vertriebsübergabe</li>
|
||
<li>Strategische Entscheidungen bei Grenzfällen</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-section">
|
||
<h5>📊 KPIs</h5>
|
||
<ul>
|
||
<li><strong>Übergabegeschwindigkeit:</strong> 95% der Leads werden innerhalb 24h zugewiesen</li>
|
||
<li><strong>Zuweisungsgenauigkeit:</strong> 90% der Leads werden dem richtigen Team zugewiesen</li>
|
||
<li><strong>CRM-Integration:</strong> 100% der Leads sind im CRM verfügbar</li>
|
||
<li><strong>Workload-Balance:</strong> Maximale Abweichung von 20% zwischen Teams</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">5</div>
|
||
<div class="timeline-content">
|
||
<h4>Sales Execution & Follow-up</h4>
|
||
<div class="process-details">
|
||
<div class="ai-human-split">
|
||
<div class="ai-section">
|
||
<h5>🤖 KI-Unterstützung (40%)</h5>
|
||
<ul>
|
||
<li>Automatisierte Reminder-Systeme</li>
|
||
<li>Optimierte Kommunikationsstrategien</li>
|
||
<li>Lead-Scoring Updates basierend auf Interaktionen</li>
|
||
<li>Automatische Wiedervorlage-Planung</li>
|
||
</ul>
|
||
</div>
|
||
<div class="human-section">
|
||
<h5>👥 Menschliche Leistung (60%)</h5>
|
||
<ul>
|
||
<li>Persönliche Kontaktaufnahme mit Entscheidungsträgern</li>
|
||
<li>Vertriebsgespräche und Präsentationen</li>
|
||
<li>Strategische Verhandlungen</li>
|
||
<li>Beziehungsaufbau und -pflege</li>
|
||
<li>Vertragsabschluss und -verhandlung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="kpi-section">
|
||
<h5>📊 KPIs</h5>
|
||
<ul>
|
||
<li><strong>Kontaktaufnahme:</strong> 90% der Leads werden innerhalb 48h kontaktiert</li>
|
||
<li><strong>Konversionsrate:</strong> 25% der qualifizierten Leads werden zu Kunden</li>
|
||
<li><strong>Durchschnittlicher Deal-Value:</strong> CHF 500'000 - 2'000'000</li>
|
||
<li><strong>Sales Cycle:</strong> Durchschnittlich 6-12 Monate</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Prozess-Performance Dashboard</h3>
|
||
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="value">75%</div>
|
||
<div class="label">Zeitersparnis Gesamtprozess (MVP)</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">2-4 Mo</div>
|
||
<div class="label">Frühere Projekterkennung (realistisch)</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">3x</div>
|
||
<div class="label">Mehr qualifizierte Leads (MVP)</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">80%</div>
|
||
<div class="label">Marktabdeckung Region (MVP)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Organisatorische Verantwortlichkeiten</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Marketing Team (Lead Generation)</h4>
|
||
<ul>
|
||
<li>Überwachung der KI-Scouts</li>
|
||
<li>Qualitätskontrolle der generierten Leads</li>
|
||
<li>Optimierung der Scoring-Kriterien</li>
|
||
<li>Reporting und Performance-Monitoring</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Sales Development (Lead Qualification)</h4>
|
||
<ul>
|
||
<li>Manuelle Überprüfung der KI-Bewertungen</li>
|
||
<li>Vertiefte Recherche bei komplexen Projekten</li>
|
||
<li>Strategische Bewertung der Projektchancen</li>
|
||
<li>Übergabe an Account Manager</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Account Manager (Sales Execution)</h4>
|
||
<ul>
|
||
<li>Persönliche Kontaktaufnahme</li>
|
||
<li>Vertriebsgespräche und Präsentationen</li>
|
||
<li>Vertragsabschluss und -verhandlung</li>
|
||
<li>Kundenbeziehungspflege</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>IT/Data Team (System Support)</h4>
|
||
<ul>
|
||
<li>KI-System Wartung und Optimierung</li>
|
||
<li>CRM-Integration und -Support</li>
|
||
<li>Datenqualitäts-Monitoring</li>
|
||
<li>Performance-Optimierung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>MVP-Fokus & Realistische Ziele</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Phase 1: MVP (2-3 Monate)</h4>
|
||
<ul>
|
||
<li><strong>Fokus:</strong> Baublatt + 2-3 weitere Quellen</li>
|
||
<li><strong>Scoring:</strong> Einfacher Algorithmus (SIA Phase, Budget, Region)</li>
|
||
<li><strong>Ziel:</strong> 50-100 qualifizierte Leads pro Monat</li>
|
||
<li><strong>Qualität:</strong> 70% der Leads erfüllen Mindestkriterien</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Phase 2: Erweiterung (Monate 4-6)</h4>
|
||
<ul>
|
||
<li><strong>Fokus:</strong> LinkedIn, Baublatt Premium, SIA</li>
|
||
<li><strong>Scoring:</strong> Machine Learning Optimierung</li>
|
||
<li><strong>Ziel:</strong> 100-200 Leads pro Monat</li>
|
||
<li><strong>Qualität:</strong> 80% der Leads erfüllen Mindestkriterien</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Phase 3: Vollintegration (Monate 7-9)</h4>
|
||
<ul>
|
||
<li><strong>Fokus:</strong> Vollständige Automatisierung</li>
|
||
<li><strong>Scoring:</strong> Erweiterte KI-Modelle</li>
|
||
<li><strong>Ziel:</strong> 200+ Leads pro Monat</li>
|
||
<li><strong>Qualität:</strong> 85% der Leads erfüllen Mindestkriterien</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Kritische Erfolgsfaktoren</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Datenqualität & -aktualität</h4>
|
||
<ul>
|
||
<li>Kontinuierliche Validierung der Datenquellen</li>
|
||
<li>Automatisierte Qualitätskontrolle</li>
|
||
<li>Regelmäßige Updates der Scoring-Kriterien</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Mensch-KI-Kollaboration</h4>
|
||
<ul>
|
||
<li>Klare Aufgabenteilung zwischen KI und Mensch</li>
|
||
<li>Kontinuierliches Training der KI-Systeme</li>
|
||
<li>Feedback-Loops für Prozessoptimierung</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Change Management</h4>
|
||
<ul>
|
||
<li>Frühzeitige Einbindung aller Stakeholder</li>
|
||
<li>Schrittweise Einführung der neuen Prozesse</li>
|
||
<li>Kontinuierliches Training und Support</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="interfaces" class="tab-content">
|
||
<h2>User Interfaces & Touchpoints</h2>
|
||
|
||
<div class="interface-demo">
|
||
<h4>1. Dashboard - Zentrale Übersicht</h4>
|
||
<div class="demo-screen">
|
||
<div class="demo-label">Primäres Interface</div>
|
||
<p><strong>Zugriff:</strong> Web-basiert, responsive Design</p>
|
||
<p><strong>Funktionen:</strong></p>
|
||
<ul>
|
||
<li>Lead-Pipeline Visualisierung</li>
|
||
<li>Filterbare Projektliste mit Scoring</li>
|
||
<li>Kartenansicht für geografische Verteilung</li>
|
||
<li>Quick Actions für Statusänderungen</li>
|
||
</ul>
|
||
<p><strong>Integration:</strong> Single Sign-On mit Energie360° Systemen</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="interface-demo">
|
||
<h4>2. Conversational Interface - KI-Assistent</h4>
|
||
<div class="demo-screen">
|
||
<div class="demo-label">Interaktive Abfragen</div>
|
||
<p><strong>Zugriff:</strong> Chat-Interface in Dashboard oder MS Teams</p>
|
||
<p><strong>Use Cases:</strong></p>
|
||
<ul>
|
||
<li>"Zeige mir alle Projekte >100 WE in Phase 3"</li>
|
||
<li>"Welche Leads haben keinen Fernwärmeanschluss?"</li>
|
||
<li>"Erstelle Wochenreport für Region Mittelland"</li>
|
||
<li>"Finde Kontaktdaten für Projekt XY"</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="interface-demo">
|
||
<h4>3. CRM Integration</h4>
|
||
<div class="demo-screen">
|
||
<div class="demo-label">Nahtlose Systemintegration</div>
|
||
<p><strong>Automatisierungen:</strong></p>
|
||
<ul>
|
||
<li>Lead-Import mit vollständigen Metadaten</li>
|
||
<li>Automatische Zuweisung nach Regionen/Teams</li>
|
||
<li>Status-Synchronisation bidirektional</li>
|
||
<li>Aktivitäten-Tracking und Reminder</li>
|
||
</ul>
|
||
<p><strong>Unterstützte Systeme:</strong> HubSpot, Salesforce, Microsoft Dynamics</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="interface-demo">
|
||
<h4>4. Reporting & Analytics</h4>
|
||
<div class="demo-screen">
|
||
<div class="demo-label">Power BI Integration</div>
|
||
<p><strong>Standard-Reports:</strong></p>
|
||
<ul>
|
||
<li>Weekly Lead Summary (automatisch montags)</li>
|
||
<li>Conversion Funnel Analysis</li>
|
||
<li>Regional Market Coverage</li>
|
||
<li>Competitor Activity Tracking</li>
|
||
</ul>
|
||
<p><strong>Export:</strong> Excel, PDF, direkter E-Mail-Versand</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="roadmap" class="tab-content">
|
||
<h2>Implementierungs-Roadmap</h2>
|
||
|
||
<div class="phase-grid">
|
||
<div class="phase-card">
|
||
<h4>Phase 1: MVP (2-3 Monate)</h4>
|
||
<div class="duration">Wochen 1-12</div>
|
||
<ul>
|
||
<li><strong>Lead Discovery:</strong> Baublatt + 2-3 weitere Quellen</li>
|
||
<li><strong>Basis Scoring:</strong> Einfacher Algorithmus (SIA Phase, Budget, Region)</li>
|
||
<li><strong>Dashboard:</strong> Grundfunktionen für Sales Team</li>
|
||
<li><strong>CRM:</strong> HubSpot Integration (Basis)</li>
|
||
<li><strong>Ziel:</strong> 50-100 qualifizierte Leads pro Monat</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Funktionsfähiges System mit 50-100 Leads/Monat</p>
|
||
</div>
|
||
|
||
<div class="phase-card">
|
||
<h4>Phase 2: Erweiterung (Monate 4-6)</h4>
|
||
<div class="duration">Wochen 13-24</div>
|
||
<ul>
|
||
<li><strong>Erweiterte Quellen:</strong> LinkedIn, Baublatt Premium, SIA</li>
|
||
<li><strong>Scoring Optimierung:</strong> Machine Learning Modelle</li>
|
||
<li><strong>Dashboard:</strong> Erweiterte Analytics & Reports</li>
|
||
<li><strong>KI-Agenten:</strong> Scout, Enricher, Scorer</li>
|
||
<li><strong>Ziel:</strong> 100-200 Leads pro Monat</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Vollständiges System mit erweiterten Quellen</p>
|
||
</div>
|
||
|
||
<div class="phase-card">
|
||
<h4>Phase 3: Vollintegration (Monate 7-9)</h4>
|
||
<div class="duration">Wochen 25-36</div>
|
||
<ul>
|
||
<li><strong>Workflow Engine:</strong> Vollständige Automatisierung</li>
|
||
<li><strong>Stakeholder-Agent:</strong> Vollständige Integration</li>
|
||
<li><strong>Power BI:</strong> Erweiterte Reports & Analytics</li>
|
||
<li><strong>Teams Integration:</strong> Vollständige Kollaboration</li>
|
||
<li><strong>Ziel:</strong> 200+ Leads pro Monat</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Integrierte Lösung im Produktivbetrieb</p>
|
||
</div>
|
||
|
||
<div class="phase-card">
|
||
<h4>Phase 4: Skalierung (Monate 10-12)</h4>
|
||
<div class="duration">Ab Woche 37</div>
|
||
<ul>
|
||
<li><strong>Performance:</strong> Optimierung für größere Volumen</li>
|
||
<li><strong>Predictive Analytics:</strong> Erweiterte Vorhersagemodelle</li>
|
||
<li><strong>Skalierung:</strong> Weitere Regionen & Märkte</li>
|
||
<li><strong>KI-Optimierung:</strong> Kontinuierliche Verbesserung</li>
|
||
<li><strong>Ziel:</strong> Skalierung auf andere Regionen</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Skalierbare Lösung für Expansion</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Kritische Erfolgsfaktoren</h3>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Datenqualität</h4>
|
||
<ul>
|
||
<li>Validierung der Datenquellen</li>
|
||
<li>Deduplizierung und Bereinigung</li>
|
||
<li>Kontinuierliche Qualitätskontrolle</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Change Management</h4>
|
||
<ul>
|
||
<li>Frühzeitige Einbindung Vertriebsteam</li>
|
||
<li>Schrittweise Einführung</li>
|
||
<li>Kontinuierliches Training</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Technische Integration</h4>
|
||
<ul>
|
||
<li>API-Dokumentation bestehender Systeme</li>
|
||
<li>Datenschutz und Compliance</li>
|
||
<li>Performance-Monitoring</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="offerte" class="tab-content">
|
||
<h2>ValueOn Offerte - KI-Lead Management System</h2>
|
||
|
||
<div class="card">
|
||
<h4>Offerte Übersicht</h4>
|
||
<p>Diese Offerte von ValueOn für Energie360° ist in 4 Phasen unterteilt, die jeweils unabhängig bestellt werden können. Jede Phase beinhaltet die entsprechenden Projektmanagement-Anteile und kann separat abgerechnet werden.</p>
|
||
<p><strong>Wichtiger Hinweis:</strong> Dies ist eine Schätzung des Mengengerüstes, wie wir das Projekt zusammen ausführen könnten. Der konkrete Aufgabensplit zwischen Kunde (Energie360°) und ValueOn ist noch zu klären und kann je nach Verfügbarkeit und Präferenzen angepasst werden.</p>
|
||
<p><strong>Tagessätze ValueOn (exkl. MWSt):</strong></p>
|
||
<ul>
|
||
<li><strong>ValueOn Experte:</strong> CHF 2'150.- pro Tag</li>
|
||
<li><strong>ValueOn PowerOn Development Team:</strong> CHF 950.- pro Tag</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Phase 1: MVP (2-3 Monate)</h3>
|
||
<div class="offerte-phase">
|
||
<div class="phase-summary">
|
||
<h4>📋 Phase 1: MVP - Funktionsfähiges System</h4>
|
||
<div class="cost-breakdown">
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn Experte:</span>
|
||
<span class="value">4 Tage × CHF 2'150 = CHF 8'600</span>
|
||
</div>
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn PowerOn Development Team:</span>
|
||
<span class="value">65 Tage × CHF 950 = CHF 61'750</span>
|
||
</div>
|
||
<div class="cost-item total">
|
||
<span class="label">Gesamt Phase 1:</span>
|
||
<span class="value">CHF 70'350</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phase-details">
|
||
<h5>Inkludierte Leistungen:</h5>
|
||
<ul>
|
||
<li><strong>Lead Discovery Setup:</strong> Scout-Agent für Baublatt + 2-3 weitere Quellen</li>
|
||
<li><strong>Basis Scoring Algorithmus:</strong> Einfacher Scoring (SIA Phase, Budget, Region)</li>
|
||
<li><strong>Dashboard Grundfunktionen:</strong> Grundlegende Features für Sales Team</li>
|
||
<li><strong>HubSpot CRM Integration:</strong> Basis-Integration für Lead-Export</li>
|
||
<li><strong>Testing & Validation:</strong> Testen mit 50-100 realen Leads</li>
|
||
<li><strong>Projektmanagement:</strong> 2 Monate × 1 Tag/Monat = 2 Tage</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Funktionsfähiges MVP-System mit 50-100 Leads/Monat</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Phase 2: Erweiterung (Monate 4-6)</h3>
|
||
<div class="offerte-phase">
|
||
<div class="phase-summary">
|
||
<h4>📋 Phase 2: Erweiterung - Vollständiges System</h4>
|
||
<div class="cost-breakdown">
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn Experte:</span>
|
||
<span class="value">4 Tage × CHF 2'150 = CHF 8'600</span>
|
||
</div>
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn PowerOn Development Team:</span>
|
||
<span class="value">75 Tage × CHF 950 = CHF 71'250</span>
|
||
</div>
|
||
<div class="cost-item total">
|
||
<span class="label">Gesamt Phase 2:</span>
|
||
<span class="value">CHF 79'850</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phase-details">
|
||
<h5>Inkludierte Leistungen:</h5>
|
||
<ul>
|
||
<li><strong>Erweiterte Datenquellen:</strong> LinkedIn, Baublatt Premium, SIA</li>
|
||
<li><strong>Scoring Optimierung:</strong> ML-basierte Scoring-Modelle</li>
|
||
<li><strong>Dashboard Analytics:</strong> Erweiterte Analytics & Reports</li>
|
||
<li><strong>KI-Agenten Integration:</strong> Scout, Enricher, Scorer Agenten</li>
|
||
<li><strong>Performance Testing:</strong> Testen mit 100-200 Leads/Monat</li>
|
||
<li><strong>Projektmanagement:</strong> 3 Monate × 1 Tag/Monat = 3 Tage</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Vollständiges System mit erweiterten Quellen</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Phase 3: Vollintegration (Monate 7-9)</h3>
|
||
<div class="offerte-phase">
|
||
<div class="phase-summary">
|
||
<h4>📋 Phase 3: Vollintegration - Produktionsreife Lösung</h4>
|
||
<div class="cost-breakdown">
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn Experte:</span>
|
||
<span class="value">6 Tage × CHF 2'150 = CHF 12'900</span>
|
||
</div>
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn PowerOn Development Team:</span>
|
||
<span class="value">75 Tage × CHF 950 = CHF 71'250</span>
|
||
</div>
|
||
<div class="cost-item total">
|
||
<span class="label">Gesamt Phase 3:</span>
|
||
<span class="value">CHF 84'150</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phase-details">
|
||
<h5>Inkludierte Leistungen:</h5>
|
||
<ul>
|
||
<li><strong>Workflow Engine:</strong> Vollständige Automatisierung der Workflows</li>
|
||
<li><strong>Stakeholder-Agent:</strong> Vollständige Integration</li>
|
||
<li><strong>Power BI Integration:</strong> Erweiterte Reports & Analytics</li>
|
||
<li><strong>Teams Integration:</strong> Vollständige Microsoft Teams Integration</li>
|
||
<li><strong>End-to-End Testing:</strong> Testen der vollständigen Integration</li>
|
||
<li><strong>Projektmanagement:</strong> 3 Monate × 1 Tag/Monat = 3 Tage</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Integrierte Lösung im Produktivbetrieb</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Phase 4: Skalierung (Monate 10-12)</h3>
|
||
<div class="offerte-phase">
|
||
<div class="phase-summary">
|
||
<h4>📋 Phase 4: Skalierung - Expansion & Optimierung</h4>
|
||
<div class="cost-breakdown">
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn Experte:</span>
|
||
<span class="value">6 Tage × CHF 2'150 = CHF 12'900</span>
|
||
</div>
|
||
<div class="cost-item">
|
||
<span class="label">ValueOn PowerOn Development Team:</span>
|
||
<span class="value">80 Tage × CHF 950 = CHF 76'000</span>
|
||
</div>
|
||
<div class="cost-item total">
|
||
<span class="label">Gesamt Phase 4:</span>
|
||
<span class="value">CHF 88'900</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phase-details">
|
||
<h5>Inkludierte Leistungen:</h5>
|
||
<ul>
|
||
<li><strong>Performance Optimierung:</strong> Optimierung für größere Volumen</li>
|
||
<li><strong>Predictive Analytics:</strong> Erweiterte Vorhersagemodelle</li>
|
||
<li><strong>Regionale Skalierung:</strong> Vorbereitung für Expansion</li>
|
||
<li><strong>KI-Optimierung:</strong> Kontinuierliche Verbesserung der KI-Modelle</li>
|
||
<li><strong>Dokumentation & Training:</strong> Vollständige Dokumentation und Team-Training</li>
|
||
<li><strong>Projektmanagement:</strong> 3 Monate × 1 Tag/Monat = 3 Tage</li>
|
||
</ul>
|
||
<p><strong>Deliverable:</strong> Skalierbare Lösung für Expansion</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Mitwirkungspflicht des Kunden (Energie360°)</h3>
|
||
<div class="card">
|
||
<h4>Wichtiger Hinweis zur Aufgabenteilung</h4>
|
||
<p>Die folgenden Kundenaufgaben basieren auf der detaillierten Aufwandsschätzung und sind von Energie360° sicherzustellen. ValueOn hat die Projektmanagement-Kosten bereits inkludiert. Energie360° kann auch Leistungen an ValueOn übertragen, falls gewünscht.</p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Phase 1: MVP (2-3 Monate)</h4>
|
||
<div class="customer-tasks">
|
||
<h5>Kundenaufgaben (30 Personentage):</h5>
|
||
<ul>
|
||
<li><strong>Lead Discovery Setup:</strong> 5 Tage (Fachliche Inputs, Anforderungen)</li>
|
||
<li><strong>Basis Scoring Algorithmus:</strong> 5 Tage (Geschäftsregeln, Scoring-Kriterien)</li>
|
||
<li><strong>Dashboard Grundfunktionen:</strong> 5 Tage (UI/UX Anforderungen, Workflow-Definition)</li>
|
||
<li><strong>HubSpot CRM Integration:</strong> 5 Tage (CRM-Konfiguration, Datenmapping)</li>
|
||
<li><strong>Testing & Validation:</strong> 10 Tage (Endnutzer-Tests, Validierung der Leads)</li>
|
||
</ul>
|
||
<h5>Übertragbare Aufgaben (an ValueOn):</h5>
|
||
<ul>
|
||
<li>Zusätzliche Testing-Unterstützung (5-10 Tage)</li>
|
||
<li>Endnutzer-Training (5 Tage)</li>
|
||
<li>Erweiterte Dokumentation (5 Tage)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Phase 2: Erweiterung (Monate 4-6)</h4>
|
||
<div class="customer-tasks">
|
||
<h5>Kundenaufgaben (30 Personentage):</h5>
|
||
<ul>
|
||
<li><strong>Erweiterte Datenquellen:</strong> 5 Tage (Zugangsdaten, API-Keys, Anforderungen)</li>
|
||
<li><strong>Scoring Optimierung:</strong> 5 Tage (ML-Training, Validierung, Feedback)</li>
|
||
<li><strong>Dashboard Analytics:</strong> 5 Tage (Reporting-Anforderungen, KPIs)</li>
|
||
<li><strong>KI-Agenten Integration:</strong> 5 Tage (Workflow-Definition, Geschäftsregeln)</li>
|
||
<li><strong>Performance Testing:</strong> 10 Tage (Erweiterte Tests, Skalierungstests)</li>
|
||
</ul>
|
||
<h5>Übertragbare Aufgaben (an ValueOn):</h5>
|
||
<ul>
|
||
<li>Zusätzliche Testing-Unterstützung (5-10 Tage)</li>
|
||
<li>Erweiterte Dokumentation (5 Tage)</li>
|
||
<li>Performance-Optimierung (5 Tage)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Phase 3: Vollintegration (Monate 7-9)</h4>
|
||
<div class="customer-tasks">
|
||
<h5>Kundenaufgaben (35 Personentage):</h5>
|
||
<ul>
|
||
<li><strong>Workflow Engine:</strong> 5 Tage (Geschäftsprozesse, Automatisierungsregeln)</li>
|
||
<li><strong>Stakeholder-Agent:</strong> 5 Tage (Stakeholder-Kriterien, Kontaktstrategien)</li>
|
||
<li><strong>Power BI Integration:</strong> 5 Tage (Reporting-Anforderungen, Dashboard-Design)</li>
|
||
<li><strong>Teams Integration:</strong> 5 Tage (Teams-Konfiguration, Workflow-Integration)</li>
|
||
<li><strong>End-to-End Testing:</strong> 15 Tage (Vollständige Systemtests, Go-Live Tests)</li>
|
||
</ul>
|
||
<h5>Übertragbare Aufgaben (an ValueOn):</h5>
|
||
<ul>
|
||
<li>Zusätzliche Testing-Unterstützung (10-15 Tage)</li>
|
||
<li>Go-Live Support (10 Tage)</li>
|
||
<li>Erweiterte Dokumentation (10 Tage)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Phase 4: Skalierung (Monate 10-12)</h4>
|
||
<div class="customer-tasks">
|
||
<h5>Kundenaufgaben (40 Personentage):</h5>
|
||
<ul>
|
||
<li><strong>Performance Optimierung:</strong> 5 Tage (Performance-Anforderungen, Skalierungskriterien)</li>
|
||
<li><strong>Predictive Analytics:</strong> 5 Tage (Analytics-Anforderungen, Vorhersagemodelle)</li>
|
||
<li><strong>Regionale Skalierung:</strong> 15 Tage (Regionale Expansion, Marktanalyse)</li>
|
||
<li><strong>KI-Optimierung:</strong> 5 Tage (KI-Modell-Feedback, Optimierungskriterien)</li>
|
||
<li><strong>Dokumentation & Training:</strong> 10 Tage (Team-Training, Dokumentations-Review)</li>
|
||
</ul>
|
||
<h5>Übertragbare Aufgaben (an ValueOn):</h5>
|
||
<ul>
|
||
<li>Zusätzliche Skalierungsplanung (10-15 Tage)</li>
|
||
<li>Erweiterte Dokumentation (10 Tage)</li>
|
||
<li>Team-Training (10 Tage)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Flexibilität bei der Aufgabenteilung</h4>
|
||
<p><strong>Option 1:</strong> Energie360° übernimmt alle Kundenaufgaben gemäß der Aufwandsschätzung</p>
|
||
<p><strong>Option 2:</strong> Energie360° überträgt zusätzliche Aufgaben an ValueOn (erhöht die ValueOn-Kosten entsprechend)</p>
|
||
<p><strong>Option 3:</strong> Gemischter Ansatz je nach Phase und Verfügbarkeit</p>
|
||
<p><em>Die konkrete Aufgabenteilung wird in einem separaten Workshop definiert und kann je nach Projektfortschritt angepasst werden.</em></p>
|
||
</div>
|
||
|
||
<h3>Gesamtübersicht & Zahlungsmodalitäten</h3>
|
||
<div class="total-overview">
|
||
<div class="total-costs">
|
||
<h4>💰 Gesamtkosten ValueOn</h4>
|
||
<div class="cost-summary">
|
||
<div class="cost-row">
|
||
<span>Phase 1 (MVP):</span>
|
||
<span>CHF 70'350</span>
|
||
</div>
|
||
<div class="cost-row">
|
||
<span>Phase 2 (Erweiterung):</span>
|
||
<span>CHF 79'850</span>
|
||
</div>
|
||
<div class="cost-row">
|
||
<span>Phase 3 (Vollintegration):</span>
|
||
<span>CHF 84'150</span>
|
||
</div>
|
||
<div class="cost-row">
|
||
<span>Phase 4 (Skalierung):</span>
|
||
<span>CHF 88'900</span>
|
||
</div>
|
||
<div class="cost-row total-row">
|
||
<span><strong>Gesamt ValueOn:</strong></span>
|
||
<span><strong>CHF 323'250</strong></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payment-terms">
|
||
<h4>💳 Zahlungsmodalitäten</h4>
|
||
<ul>
|
||
<li><strong>Phase 1:</strong> 50% bei Auftrag, 50% bei Abnahme</li>
|
||
<li><strong>Phase 2:</strong> 50% bei Auftrag, 50% bei Abnahme</li>
|
||
<li><strong>Phase 3:</strong> 50% bei Auftrag, 50% bei Abnahme</li>
|
||
<li><strong>Phase 4:</strong> 50% bei Auftrag, 50% bei Abnahme</li>
|
||
<li><strong>Projektmanagement:</strong> Monatlich in Rechnung gestellt</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="additional-info">
|
||
<h4>ℹ️ Zusätzliche Informationen</h4>
|
||
<ul>
|
||
<li><strong>Gültigkeit:</strong> Diese Offerte ist 3 Monate gültig</li>
|
||
<li><strong>Start:</strong> Jede Phase kann unabhängig gestartet werden</li>
|
||
<li><strong>Dauer:</strong> Jede Phase dauert 2-3 Monate</li>
|
||
<li><strong>Team:</strong> Dediziertes ValueOn-Team für das gesamte Projekt</li>
|
||
<li><strong>Support:</strong> 3 Monate Support nach Abschluss jeder Phase inklusive</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="support" class="tab-content">
|
||
<h2>Unterstützungsbereiche</h2>
|
||
|
||
<h3>Strategische Begleitung</h3>
|
||
<div class="support-area">
|
||
<h5>Projektmanagement & Governance</h5>
|
||
<ul>
|
||
<li>Projektstrukturierung und Meilenstein-Definition</li>
|
||
<li>Stakeholder-Management und Change-Begleitung</li>
|
||
<li>Risikomanagement und Mitigation-Strategien</li>
|
||
<li>Erfolgsmessung und KPI-Definition</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="support-area">
|
||
<h5>Prozessoptimierung</h5>
|
||
<ul>
|
||
<li>Analyse bestehender Lead-Prozesse</li>
|
||
<li>Definition optimaler Workflows</li>
|
||
<li>Integration in Vertriebsmethodik</li>
|
||
<li>Continuous Improvement Framework</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Technische Umsetzung</h3>
|
||
<div class="support-area">
|
||
<h5>Architektur & Development</h5>
|
||
<ul>
|
||
<li>Solution Architecture Design</li>
|
||
<li>API-Development und Integration</li>
|
||
<li>Cloud-Infrastructure Setup (Azure/AWS)</li>
|
||
<li>Security und Compliance Implementation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="support-area">
|
||
<h5>KI & Data Science</h5>
|
||
<ul>
|
||
<li>KI-Agenten Entwicklung und Training</li>
|
||
<li>Natural Language Processing für Dokumentenanalyse</li>
|
||
<li>Scoring-Algorithmen Optimierung</li>
|
||
<li>Predictive Analytics Modelle</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="support-area">
|
||
<h5>Integration & Automation</h5>
|
||
<ul>
|
||
<li>CRM-Integration (HubSpot, Salesforce)</li>
|
||
<li>Power Platform Automatisierung</li>
|
||
<li>Data Pipeline Development</li>
|
||
<li>Monitoring und Alerting Setup</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Operative Unterstützung</h3>
|
||
<div class="support-area">
|
||
<h5>Training & Enablement</h5>
|
||
<ul>
|
||
<li>Anwendertraining für Vertriebsteam</li>
|
||
<li>Administrator-Schulung</li>
|
||
<li>Best Practice Workshops</li>
|
||
<li>Dokumentation und Handbücher</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="support-area">
|
||
<h5>Support & Wartung</h5>
|
||
<ul>
|
||
<li>Technischer Support (SLA-basiert)</li>
|
||
<li>Regelmässige System-Updates</li>
|
||
<li>Performance-Optimierung</li>
|
||
<li>Datenqualitäts-Monitoring</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Zusammenarbeitsmodell</h3>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h4>Agile Delivery</h4>
|
||
<p>2-Wochen Sprints mit klaren Deliverables. Enge Zusammenarbeit mit Product Owner von Energie360°. Regelmässige Reviews und Retrospektiven.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Hybrid Team</h4>
|
||
<p>Kombination aus Energie360° Domain-Experten und externen Spezialisten. Knowledge Transfer als integraler Bestandteil.</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h4>Flexible Skalierung</h4>
|
||
<p>Bedarfsgerechte Ressourcen je Projektphase. Von strategischer Beratung bis hands-on Development.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Investitionsschätzung</h3>
|
||
<div class="metrics-grid">
|
||
<div class="metric-card">
|
||
<div class="value">16-20</div>
|
||
<div class="label">Wochen bis Go-Live</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">3-4</div>
|
||
<div class="label">FTE während Entwicklung</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">0.5</div>
|
||
<div class="label">FTE laufender Betrieb</div>
|
||
</div>
|
||
<div class="metric-card">
|
||
<div class="value">6-9</div>
|
||
<div class="label">Monate ROI</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchTab(evt, tabName) {
|
||
var i, tabcontent, tabbuttons;
|
||
|
||
tabcontent = document.getElementsByClassName("tab-content");
|
||
for (i = 0; i < tabcontent.length; i++) {
|
||
tabcontent[i].classList.remove("active");
|
||
}
|
||
|
||
tabbuttons = document.getElementsByClassName("tab-button");
|
||
for (i = 0; i < tabbuttons.length; i++) {
|
||
tabbuttons[i].classList.remove("active");
|
||
}
|
||
|
||
document.getElementById(tabName).classList.add("active");
|
||
evt.currentTarget.classList.add("active");
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |