docs: C-Level Präsentation Layout-Refinement - Account-Grouping Visual & Navigations-Logik hinzugefügt
This commit is contained in:
@@ -38,38 +38,96 @@
|
||||
}
|
||||
/* #dashboard-dimmer removed */ .hidden-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.85); z-index: 2; pointer-events: none; } .highlight-cutout { position: absolute; z-index: 10; border: 2px solid var(--robo-blue); box-shadow: 0 0 50px rgba(59, 130, 246, 0.3); border-radius: 1rem; opacity: 0; } /* Scrollytelling content layer */ .slide { position: relative; z-index: 20; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-left: 10%; padding-right: 55%; padding-left: 5%; /* Text on left, dashboard highlights on right */ } .slide-center { padding-right: 10%; text-align: center; align-items: center; } .glass-panel { background: rgba(15, 23, 42, 0.4); backdrop-blur: 12px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 1.5rem; } </style> </head> <body> <!-- Logo --> <div class="fixed top-8 left-8 z-50 w-40 overflow-hidden"> <img src="ROBOPLANET-Logo-2024_blue-white_4c.svg" alt="RoboPlanet Logo" class="w-full"> </div> <!-- STAGE: The Real Dashboard (Simplified Static Reconstruction for Speed) --> <div id="dashboard-stage">
|
||||
|
||||
|
||||
<!-- Vorteile Block -->
|
||||
<div id="block-vorteile" class="stage-block">
|
||||
<div id="block-vorteile" class="stage-block" style="width: 40vw;">
|
||||
<div class="text-[10px] font-bold text-emerald-500 uppercase mb-4 tracking-[0.2em]">Struktur vs. Chaos</div>
|
||||
<div class="space-y-4">
|
||||
<div class="p-4 bg-slate-800/80 rounded-xl border border-emerald-500/30">
|
||||
<div class="text-xl font-bold text-white mb-1">Account-Grouping</div>
|
||||
<div class="text-xs text-slate-400 leading-relaxed">Alle Infos an einem Ort statt in 50 Excel-Spalten.</div>
|
||||
|
||||
<!-- Account-Grouping Visual -->
|
||||
<div class="mt-6 p-6 bg-slate-900 rounded-2xl border border-blue-500/50 shadow-2xl scale-110 origin-left">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-blue-500 uppercase tracking-widest mb-1">Account 360° View</div>
|
||||
<h3 class="text-2xl font-black text-white">Bayernwerk Netz GmbH</h3>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-emerald-500/20 text-emerald-500 text-[10px] font-bold rounded-full border border-emerald-500/20">ACTIVE DEAL</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="p-3 bg-slate-800/50 rounded-lg">
|
||||
<div class="text-[9px] text-slate-500 uppercase font-bold mb-1">Letzte Aktivität</div>
|
||||
<div class="text-xs font-semibold">Angebot versendet (V5)</div>
|
||||
<div class="text-[10px] text-slate-500">vor 2 Tagen • Ibrahim Akar</div>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-600/10 rounded-lg border border-blue-500/20">
|
||||
<div class="text-[9px] text-blue-400 uppercase font-bold mb-1">Nächster Schritt</div>
|
||||
<div class="text-xs font-semibold text-blue-100">Follow-up Call</div>
|
||||
<div class="text-[10px] text-blue-400/70">Morgen, 10:00 Uhr</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2 border-t border-slate-800 pt-4">
|
||||
<div class="flex justify-between text-xs">
|
||||
<span class="text-slate-500 italic">Interaktions-Dichte</span>
|
||||
<span class="text-emerald-500 font-bold">HOCH</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[85%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center text-slate-500 text-[10px] italic">
|
||||
➔ Gruppierung aller Dimensionen (History, Forecast, Tasks) pro Account
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 bg-slate-800/30 rounded-xl border border-slate-700 opacity-50">
|
||||
<div class="text-xs italic">Filterbar. Klickbar. Live.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- UI Levels Block -->
|
||||
<div id="block-ui-levels" class="stage-block">
|
||||
<div class="text-[10px] font-bold text-blue-500 uppercase mb-4 tracking-[0.2em]">Die 3 Ebenen</div>
|
||||
<div class="relative space-y-2 border-l-2 border-blue-500/30 pl-4">
|
||||
<div class="py-2">
|
||||
<div class="text-blue-400 font-bold text-sm">1. Strategie</div>
|
||||
<div class="text-[10px] text-slate-500">Header: Forecast & Trends</div>
|
||||
<div id="block-ui-levels" class="stage-block" style="width: 40vw;">
|
||||
<div class="text-[10px] font-bold text-blue-500 uppercase mb-8 tracking-[0.2em]">Navigations-Logik</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Level 1 -->
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg border border-blue-400/30">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-black text-white">STRATEGIE-HEADER</div>
|
||||
<div class="text-[10px] text-slate-500">Trends & Forecasts für den Vorstand</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="text-white font-bold text-sm">2. Operation</div>
|
||||
<div class="text-[10px] text-slate-500">Body: Aktivitäten-Log</div>
|
||||
<!-- Level 2 -->
|
||||
<div class="flex items-center gap-4 translate-x-8 opacity-70">
|
||||
<div class="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center border border-slate-700">
|
||||
<svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h7"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-slate-300 uppercase tracking-tighter">OPERATIVE LISTE</div>
|
||||
<div class="text-[10px] text-slate-500 italic">Der pulsierende Aktivitäten-Log</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<div class="text-slate-300 font-bold text-sm">3. Detail</div>
|
||||
<div class="text-[10px] text-slate-500">Deep-Dive: Account 360°</div>
|
||||
<!-- Level 3 -->
|
||||
<div class="flex items-center gap-4 translate-x-16 opacity-40">
|
||||
<div class="w-12 h-12 bg-slate-900 rounded-xl flex items-center justify-center border border-slate-800">
|
||||
<svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-slate-600 uppercase tracking-tighter">DEEP DIVE</div>
|
||||
<div class="text-[10px] text-slate-700 italic italic">Jeder Account im Röntgen-Blick</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto space-y-12"> <!-- Section: Performance Grid --> <div id="stage-perf" class="grid grid-cols-4 gap-4 opacity-40"> <div class="bg-slate-900 p-6 rounded-xl border border-slate-800"> <div class="text-[10px] font-bold text-slate-500 uppercase mb-2">Gesamt Volumen</div> <div class="text-2xl font-black text-blue-400">16.054.317 €</div> </div> <div id="stage-stagnation" class="bg-slate-900 p-6 rounded-xl border border-orange-500/50 shadow-[0_0_20px_rgba(249,115,22,0.1)]"> <div class="text-[10px] font-bold text-orange-500 uppercase mb-2">Stagnations-Alarm</div> <div class="text-2xl font-black text-orange-500">1.325.014 €</div> </div> <div class="bg-slate-900 p-6 rounded-xl border border-slate-800"> <div class="text-[10px] font-bold text-slate-500 uppercase mb-2">Forecast (6M)</div> <div class="text-2xl font-black text-blue-500">3.801.962 €</div> </div> <div class="bg-slate-900 p-6 rounded-xl border border-red-500/50 shadow-[0_0_20px_rgba(239,68,68,0.1)]"> <div class="text-[10px] font-bold text-red-500 uppercase mb-2">Rote Liste</div> <div class="text-2xl font-black text-red-500">4.846.297 €</div> </div> </div> <!-- Section: Charts & Pulse --> <div id="stage-charts" class="flex gap-6 opacity-40 h-48"> <div class="flex-1 bg-slate-900 rounded-2xl border border-slate-800 p-6 relative overflow-hidden"> <div class="text-[10px] font-bold text-slate-500 uppercase mb-4">Performance & Hit-Rate Trend</div> <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-blue-500/20 to-transparent"></div> </div> <div class="w-64 bg-slate-900 rounded-2xl border border-slate-800 p-6 text-center"> <div class="text-[10px] font-bold text-slate-500 uppercase mb-2">Ø Cycle Time</div> <div class="text-4xl font-black text-emerald-500 mt-4">105.5</div> <div class="text-[10px] text-emerald-500/50">Tage</div> </div> </div> <!-- Section: Activity Table --> <div id="stage-activity" class="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden opacity-40"> <div class="p-4 border-b border-slate-800 text-[10px] font-bold text-slate-500 uppercase">Aktivitäten-Log</div> <table class="w-full text-left text-xs"> <tr class="border-b border-slate-800/50"> <td class="p-4 text-slate-500 font-mono">27.05.</td> <td class="p-4 font-bold">Bayernwerk Netz GmbH</td> <td class="p-4 text-slate-400 italic">Angebot CC1 Pro V5...</td> <td class="p-4 text-right font-semibold">Ibrahim Akar</td> </tr> <tr class="border-b border-slate-800/50"> <td class="p-4 text-slate-500 font-mono">27.05.</td> <td class="p-4 font-bold">JEDENAK CNC-Technik</td> <td class="p-4 text-slate-400 italic">Vorstellung Pierre Hollein...</td> <td class="p-4 text-right font-semibold">Pierre Hollein</td> </tr> <tr class="border-b border-slate-800/50"> <td class="p-4 text-slate-500 font-mono">27.05.</td> <td class="p-4 font-bold">ProWerk Dienstleistung</td> <td class="p-4 text-slate-400 italic">Follow-up Review...</td> <td class="p-4 text-right font-semibold">Sebastian Hosbach</td> </tr> </table> </div> </div> </div> <!-- MAIN CONTENT SCROLL LAYER --> <main>
|
||||
|
||||
<!-- INTRO -->
|
||||
|
||||
Reference in New Issue
Block a user