Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[37288f42] Docs: Dashboard Precision Update v2.2 - 1:1 DGS Replica & Layout Alignment Fix

Browse Source
This commit is contained in:
Floke
2026-06-02 06:30:15 +00:00
parent d3178c6e71
commit 5178a0cf3f
1 changed files with 104 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
docs/Praesentation/Sales_Intelligence_Cockpit_CLevel_v2.html
View File

@@ -29,20 +29,20 @@
padding: 0;
}
/* 1080p Optimization - Maximum Whitespace */
/* 1080p Precision Layout */
.slide {
min-height: 140vh; /* High whitespace between sections */
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10%;
padding: 0 8%;
position: relative;
}
.split-layout {
display: grid;
grid-template-cols: 38% 52%;
grid-template-cols: 35% 55%;
width: 100%;
height: 100%;
align-items: center;
@@ -51,53 +51,52 @@
.story-content {
z-index: 10;
max-width: 500px;
}
.visual-area {
position: relative;
height: 500px;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end; /* Right-aligned */
justify-content: flex-end;
}
/* UI Element Styling - Compressed & Authentic */
/* DGS Dashboard UI - 1:1 Replica */
.dashboard-card {
background: white;
border: 1px solid #cbd5e1;
border-radius: 0.75rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
padding: 1.25rem;
border-radius: 0.5rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 580px;
max-width: 720px;
}
.system-header {
.card-header {
padding: 1.5rem;
border-bottom: 1px solid #f1f5f9;
}
.badge-red { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.badge-orange { background: #ffedd5; color: #c2410c; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.data-grid {
display: grid;
grid-template-cols: repeat(8, 1fr);
padding: 1rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
padding: 0.5rem 1rem;
margin: -1.25rem -1.25rem 1.25rem -1.25rem;
border-radius: 0.75rem 0.75rem 0 0;
display: flex;
gap: 0.5rem;
border-top: 1px solid #f1f5f9;
align-items: center;
text-align: center;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; }
.kpi-card {
background: white;
border-radius: 1rem;
border: 1px solid #e2e8f0;
padding: 2rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.data-cell { font-size: 11px; font-weight: 600; color: #334155; }
.data-label { font-size: 9px; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }
/* Scrollytelling Transitions */
.visual-element {
position: absolute;
opacity: 0;
transform: translateY(80px);
transform: translateY(40px);
pointer-events: none;
width: 100%;
display: flex;
@@ -119,13 +118,12 @@
z-index: 110;
}
/* Solid White Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1.5rem 4rem;
padding: 1.5rem 3rem;
background: #ffffff;
z-index: 100;
border-bottom: 1px solid #f1f5f9;
@@ -135,65 +133,49 @@
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.logo-img {
width: 14rem;
}
.logo-img { width: 14rem; }
h2 {
letter-spacing: -0.05em;
line-height: 1.0;
font-size: 5rem;
letter-spacing: -0.04em;
line-height: 1.1;
font-size: 4.5rem;
font-weight: 800;
margin-bottom: 3rem;
margin-bottom: 2rem;
}
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.6rem; color: #475569; font-weight: 400; }
.highlight-blue {
color: var(--robo-blue);
}
.text-2xl { font-size: 1.5rem; color: #475569; font-weight: 400; }
</style>
</head>
<body>
<div class="progress-bar" id="progressBar" style="width: 0%;"></div>
<!-- Header -->
<header>
<img src="ROBOPLANET-Logo-2024_blue-black_4c.svg" alt="RoboPlanet Logo" class="logo-img">
<div class="text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">Board Presentation | Executive Strategic Briefing</div>
</header>
<main id="main" class="pt-32">
<main id="main">
<!-- Slide 1: Ausgangslage -->
<section class="slide" id="slide1">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Ausgangslage</span>
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Status Quo</span>
<h2>Verteilte <br><span class="text-slate-200">Sichten.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
<p class="text-2xl leading-relaxed">
Daten waren vorhanden – aber nicht operativ nutzbar.
</p>
<div class="space-y-6">
<div class="flex items-center gap-4 text-xl font-bold text-slate-800">
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Manuelle Excel-Reports
</div>
<div class="flex items-center gap-4 text-xl font-bold text-slate-800">
<div class="w-2 h-2 rounded-full bg-blue-700"></div> Fragmentiertes Wissen
</div>
</div>
</div>
<div class="visual-area">
<div class="visual-element active" id="visual1">
<div class="relative w-[450px]">
<div class="kpi-card shadow-2xl border-slate-200 transform -rotate-2">
<div class="h-4 w-full bg-slate-50 rounded mb-2"></div>
<div class="relative w-[500px]">
<div class="bg-white border border-slate-200 p-8 rounded-xl shadow-2xl transform -rotate-2">
<div class="h-4 w-full bg-slate-50 rounded mb-4"></div>
<div class="h-4 w-2/3 bg-slate-50 rounded"></div>
</div>
<div class="kpi-card shadow-2xl border-slate-200 absolute top-12 left-8 transform rotate-3 bg-white">
<div class="h-4 w-full bg-slate-50 rounded mb-2"></div>
<div class="bg-white border border-slate-200 p-8 rounded-xl shadow-2xl absolute top-10 left-10 transform rotate-3">
<div class="h-4 w-full bg-slate-50 rounded mb-4"></div>
<div class="h-4 w-1/2 bg-slate-50 rounded"></div>
</div>
</div>
@@ -202,15 +184,14 @@
</div>
</section>
<!-- Slide 2: Das Cockpit -->
<!-- Slide 2: Das Cockpit (DGS GmbH 1:1) -->
<section class="slide" id="slide2">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Die Lösung</span>
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Die Lösung</span>
<h2>Das <br><span class="text-blue-700">Cockpit.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
Alles Wesentliche auf einer Seite. <br>
Sofortige operative Klarheit.
<p class="text-2xl leading-relaxed mb-10">
Eine operative Ansicht für jeden Account.
</p>
<div class="bg-blue-50 border-l-[6px] border-blue-600 p-8 rounded-r-2xl">
<p class="text-blue-900 text-xl font-bold italic">"Eine Seite statt zehn Klicks."</p>
@@ -219,44 +200,31 @@
<div class="visual-area">
<div class="visual-element" id="visual2">
<div class="dashboard-card">
<div class="system-header">
<div class="dot"></div><div class="dot"></div><div class="dot"></div>
<span class="text-[9px] font-bold text-slate-300 ml-2 uppercase">RoboPlanet CRM | Account Detail View</span>
<div class="card-header">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-2xl font-black text-slate-900 leading-tight">DGS GmbH</h3>
<div class="text-blue-600 font-bold text-sm">(Paul Goliasch)</div>
</div>
<div class="text-right">
<div class="text-2xl font-black text-slate-900">56.996 €</div>
</div>
</div>
<div class="flex gap-2 mb-4">
<span class="badge-red">overdue date</span>
<span class="badge-orange">missing contract type</span>
</div>
<div class="text-sm font-semibold text-slate-500 italic">3 x CC1 Pro mit Nachlass</div>
</div>
<div class="flex justify-between items-center mb-4 pb-4 border-b border-slate-100">
<div>
<h3 class="text-xl font-black text-slate-900 leading-tight">DGS GmbH</h3>
<div class="text-blue-600 font-bold text-[10px]">Paul Goliasch | Neuching</div>
</div>
<div class="text-right">
<div class="text-xl font-black text-slate-900">56.996 €</div>
<div class="text-[8px] font-bold text-slate-400 uppercase">Deal Volumen</div>
</div>
</div>
<div class="grid grid-cols-4 gap-2 mb-4">
<div class="p-2 bg-slate-50 rounded text-center">
<div class="text-[7px] font-bold text-slate-400 mb-0.5">CALL</div>
<div class="text-[10px] font-bold">Gestern</div>
</div>
<div class="p-2 bg-slate-50 rounded text-center">
<div class="text-[7px] font-bold text-slate-400 mb-0.5">STATUS</div>
<div class="text-[10px] font-bold text-blue-700 uppercase">Offen</div>
</div>
<div class="p-2 bg-red-50 rounded text-center border border-red-100">
<div class="text-[7px] font-bold text-red-400 mb-0.5">TIME</div>
<div class="text-[10px] font-bold text-red-600 uppercase">Overdue</div>
</div>
<div class="p-2 bg-slate-50 rounded text-center">
<div class="text-[7px] font-bold text-slate-400 mb-0.5">TYPE</div>
<div class="text-[10px] font-bold uppercase">Robotics</div>
</div>
</div>
<div class="p-3 bg-white border border-slate-100 rounded shadow-sm flex justify-between items-center">
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-blue-600 animate-pulse"></div>
<span class="text-[11px] font-bold text-slate-700">Angebot nachfassen</span>
</div>
<span class="text-[8px] font-bold text-slate-400 uppercase">Morgen</span>
<!-- 1:1 Dashboard Row -->
<div class="data-grid">
<div><div class="data-label">ORT</div><div class="data-cell">📍 3.12.25</div></div>
<div><div class="data-label">CALL</div><div class="data-cell">📞 29.4.26</div></div>
<div><div class="data-label">MAIL</div><div class="data-cell">✉️ 1.12.25</div></div>
<div><div class="data-label">NÄCHSTER</div><div class="data-cell">Keine</div></div>
<div><div class="data-label">STATUS</div><div class="data-cell text-blue-700 font-bold">Open</div></div>
<div><div class="data-label">TERMIN</div><div class="data-cell">30.5.26</div></div>
<div class="col-span-2 text-right pr-4"><div class="data-label">SUMME</div><div class="data-cell text-slate-900 text-lg font-black">56.996 €</div></div>
</div>
</div>
</div>
@@ -268,30 +236,27 @@
<section class="slide" id="slide3">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Performance</span>
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Performance</span>
<h2>Vom Überblick <br><span class="text-blue-600">zur Aktion.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
Kein Rückspiegel. <br>Ein aktives Steuerungs-Tool.
</p>
<div class="bg-slate-50 p-10 rounded-[2.5rem] border border-slate-100">
<div class="bg-slate-50 p-10 rounded-2xl border border-slate-100">
<div class="text-7xl font-black text-blue-600 mb-2">~20%</div>
<div class="text-xl font-bold text-slate-800">Response Quote</div>
<p class="text-lg text-slate-500 mt-4 italic">Innerhalb von 10 Tagen erzielt.</p>
<p class="text-lg text-slate-500 mt-4">Innerhalb von 10 Tagen durch systemgestützte Rückrufbitten.</p>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual3">
<div class="kpi-card w-[400px] border-blue-200">
<div class="font-bold text-lg italic text-slate-800 mb-8 flex items-center gap-3">
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
<div class="bg-white border border-blue-200 p-10 rounded-2xl shadow-2xl w-[400px]">
<div class="flex items-center gap-4 mb-8">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
</div>
Aktion: Bulk-Rückrufbitte
<div class="font-bold text-xl italic">Bulk-Rückrufbitte</div>
</div>
<div class="h-3 w-full bg-slate-100 rounded-full overflow-hidden mb-4">
<div class="h-full bg-blue-600 w-[20%] rounded-full shadow-lg"></div>
<div class="h-full bg-blue-600 w-[20%] rounded-full"></div>
</div>
<div class="flex justify-between text-[10px] font-bold text-slate-400 uppercase tracking-widest">
<div class="flex justify-between text-[10px] font-bold text-slate-400 uppercase">
<span>70 Kontakte</span>
<span class="text-blue-700">14 Reaktionen</span>
</div>
@@ -305,33 +270,23 @@
<section class="slide" id="slide4">
<div class="split-layout">
<div class="story-content">
<span class="text-red-600 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Transparenz</span>
<span class="text-red-600 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Steuerung</span>
<h2>Ehrliche <br><span class="text-red-600">Pipeline.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
Gute Steuerung beginnt mit der Realität. <br>Bereinigung statt Hoffnung.
</p>
<div class="kpi-card border-red-100 bg-red-50/20 p-8">
<div class="bg-red-50/30 border-l-[6px] border-red-600 p-10 rounded-r-2xl">
<div class="text-6xl font-black text-red-600 mb-2">+44%</div>
<div class="text-xl font-bold text-slate-800 uppercase">Bereinigtes Lost-Volumen</div>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual4">
<div class="dashboard-card w-[450px]">
<div class="text-[9px] font-bold text-slate-400 uppercase tracking-[0.3em] mb-10 text-center">Pipeline Bereinigung (Volume)</div>
<div class="space-y-10">
<div class="bg-white border border-slate-200 p-10 rounded-2xl shadow-2xl w-[450px]">
<div class="space-y-12">
<div>
<div class="flex justify-between text-xs font-bold mb-2">
<span class="text-slate-400">MÄRZ 26</span>
<span class="text-slate-800">1,42 Mio. €</span>
</div>
<div class="flex justify-between text-xs font-bold mb-3"><span class="text-slate-400">MÄRZ 26</span><span class="text-slate-800">1,42 Mio. €</span></div>
<div class="h-5 w-full bg-slate-100 rounded-full overflow-hidden"><div class="h-full bg-slate-300 w-[42%] rounded-full"></div></div>
</div>
<div>
<div class="flex justify-between text-xs font-bold mb-2 text-red-600">
<span>MAI 26</span>
<span>2,05 Mio. €</span>
</div>
<div class="flex justify-between text-xs font-bold mb-3 text-red-600"><span>MAI 26</span><span>2,05 Mio. €</span></div>
<div class="h-5 w-full bg-slate-100 rounded-full shadow-inner"><div class="h-full bg-red-600 w-[65%] rounded-full"></div></div>
</div>
</div>
@@ -345,43 +300,33 @@
<section class="slide" id="slide5">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Intelligence</span>
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-6 block">Intelligence</span>
<h2>Management <br><span class="text-blue-700">Cockpit.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
Erfolgsmuster erkennen. <br>Stagnation vermeiden.
</p>
<div class="space-y-8">
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Pipeline Velocity Analyse
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Pipeline Velocity
</div>
<div class="text-xl font-bold text-slate-800 flex items-center gap-4">
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Winning Habits Tracking
<div class="w-1.5 h-1.5 rounded-full bg-blue-700"></div> Winning Habits
</div>
</div>
</div>
<div class="visual-area">
<div class="visual-element" id="visual5">
<div class="dashboard-card w-[500px]">
<div class="grid grid-cols-3 gap-4 mb-8 text-center border-b border-slate-50 pb-8">
<div class="bg-white border border-slate-200 p-8 rounded-2xl shadow-2xl w-[500px]">
<div class="grid grid-cols-3 gap-4 mb-8 text-center border-b border-slate-100 pb-8">
<div><div class="text-blue-700 font-black text-2xl">12d</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Response</div></div>
<div><div class="text-blue-700 font-black text-2xl">4.8</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Calls/Deal</div></div>
<div><div class="text-blue-700 font-black text-2xl">+159%</div><div class="text-[8px] font-bold text-slate-400 uppercase mt-1">Uplift</div></div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-blue-50/50 rounded border border-blue-100">
<div class="flex items-center gap-3">
<div class="flex items-center gap-2">
<div class="w-7 h-7 bg-blue-700 rounded-full flex items-center justify-center text-[8px] font-bold text-white italic">PH</div>
<span class="text-[11px] font-bold">Pierre Hollein | LIVE</span>
</div>
<span class="text-[8px] font-bold text-blue-700 uppercase">Vorführung</span>
</div>
<div class="flex items-center justify-between p-3 bg-slate-50 rounded">
<div class="flex items-center gap-3">
<div class="w-7 h-7 bg-slate-300 rounded-full flex items-center justify-center text-[8px] font-bold text-white italic">IA</div>
<span class="text-[11px] font-bold text-slate-600">Ibrahim Akar</span>
</div>
<span class="text-[8px] font-bold text-slate-400 uppercase">Angebot</span>
</div>
</div>
</div>
</div>
@@ -393,15 +338,9 @@
<section class="slide" id="slide6">
<div class="split-layout">
<div class="story-content">
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Potenzial</span>
<span class="text-blue-700 font-bold uppercase tracking-[0.25em] text-xs mb-8 block">Potential</span>
<h2>Nächster <br><span class="text-blue-600">Hebel.</span></h2>
<p class="text-2xl leading-relaxed mb-12">
68% der Accounts im CRM <br>ohne Ansprechpartner.
</p>
<div class="bg-blue-600 text-white p-10 rounded-[2.5rem] shadow-2xl">
<div class="text-7xl font-black mb-2">68%</div>
<div class="text-xl font-bold italic">White Space Accounts</div>
</div>
<p class="text-2xl mb-10">68% der Accounts ohne Ansprechpartner.</p>
</div>
<div class="visual-area">
<div class="visual-element" id="visual6">
@@ -419,20 +358,19 @@
<div class="w-full text-center max-w-5xl mx-auto pt-20">
<h2 class="text-[8.5rem] mb-20 italic leading-none tracking-tighter">Vertrieb. <span class="text-blue-700">Steuerbar.</span></h2>
<div class="grid grid-cols-3 gap-12 mb-20">
<div class="p-10 kpi-card shadow-xl border-slate-200 text-left">
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
<div class="text-blue-700 font-black text-3xl mb-4">Transparent</div>
<p class="text-lg text-slate-500 font-medium">Alle Daten auf einer Seite.</p>
</div>
<div class="p-10 kpi-card shadow-xl border-slate-200 text-left">
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
<div class="text-blue-700 font-black text-3xl mb-4">Priorisiert</div>
<p class="text-lg text-slate-500 font-medium">Vom Alarm zur Aktion.</p>
<p class="text-lg text-slate-500 font-medium">Alarm zur Aktion.</p>
</div>
<div class="p-10 kpi-card shadow-xl border-slate-200 text-left">
<div class="p-10 bg-white border border-slate-200 rounded-2xl shadow-xl text-left">
<div class="text-blue-700 font-black text-3xl mb-4">Handlungsfähig</div>
<p class="text-lg text-slate-500 font-medium">Echte Hebel statt Listen.</p>
</div>
</div>
<p class="text-3xl text-slate-400 italic font-light leading-relaxed">"Du katapultierst uns damit definitiv in eine modernere Zukunft."</p>
</div>
</section>
@@ -465,22 +403,22 @@
start: "top center",
end: "bottom center",
onEnter: () => {
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 1, ease: "power3.out" });
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" });
},
onLeave: () => {
if (index < slides.length - 1) {
gsap.to(`#${visualId}`, { opacity: 0, y: -60, duration: 0.7 });
gsap.to(`#${visualId}`, { opacity: 0, y: -40, duration: 0.5 });
}
},
onEnterBack: () => {
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 1 });
gsap.to(`#${visualId}`, { opacity: 1, y: 0, duration: 0.8 });
},
onLeaveBack: () => {
gsap.to(`#${visualId}`, { opacity: 0, y: 60, duration: 0.7 });
gsap.to(`#${visualId}`, { opacity: 0, y: 40, duration: 0.5 });
}
});
}
});
</script>
</body>
</html>
</html>