469 lines
No EOL
21 KiB
HTML
469 lines
No EOL
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vattenfall E-Mobility DSH - Phase 1 Results</title>
|
|
<link rel="stylesheet" href="../src/styles.css">
|
|
<style>
|
|
.imd-chart-container {
|
|
background: var(--vattenfall-white);
|
|
border-radius: 8px;
|
|
padding: 40px;
|
|
margin: 20px 0;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.imd-chart-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.imd-chart-title {
|
|
color: var(--vattenfall-dark-gray);
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.imd-chart-subtitle {
|
|
color: var(--vattenfall-medium-gray);
|
|
font-size: 1.2em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.imd-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.imd-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.imd-legend-color {
|
|
width: 30px;
|
|
height: 15px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.imd-orchestra-sections {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.imd-section {
|
|
background: var(--vattenfall-white);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
position: relative;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.imd-section:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.imd-section-header {
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.imd-section-title {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.imd-section1 .imd-section-title { color: var(--vattenfall-blue); }
|
|
.imd-section2 .imd-section-title { color: var(--vattenfall-blue); }
|
|
.imd-section3 .imd-section-title { color: var(--vattenfall-blue); }
|
|
.imd-section4 .imd-section-title { color: var(--vattenfall-blue); }
|
|
|
|
.imd-instrument {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.imd-instrument-name {
|
|
font-weight: 500;
|
|
color: var(--vattenfall-dark-gray);
|
|
margin-bottom: 8px;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.imd-instrument-description {
|
|
font-size: 0.85em;
|
|
color: var(--vattenfall-medium-gray);
|
|
margin-bottom: 10px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.imd-bar-container {
|
|
position: relative;
|
|
height: 30px;
|
|
background: var(--vattenfall-light-gray);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
.imd-bar-area {
|
|
position: relative;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.imd-bar {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
transition: width 1s ease-out;
|
|
}
|
|
|
|
.imd-bar-low {
|
|
background: linear-gradient(90deg, #f1c40f, #f39c12);
|
|
}
|
|
|
|
.imd-bar-medium {
|
|
background: linear-gradient(90deg, #90EE90, #32CD32);
|
|
}
|
|
|
|
.imd-bar-high {
|
|
background: linear-gradient(90deg, var(--vattenfall-green), #229954);
|
|
}
|
|
|
|
.imd-volatility-indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 2px;
|
|
background: rgba(0,0,0,0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.imd-volatility-indicator::before,
|
|
.imd-volatility-indicator::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 8px;
|
|
background: rgba(0,0,0,0.8);
|
|
top: -3px;
|
|
}
|
|
|
|
.imd-volatility-indicator::before {
|
|
left: 0;
|
|
}
|
|
|
|
.imd-volatility-indicator::after {
|
|
right: 0;
|
|
}
|
|
|
|
.imd-maturity-value {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
color: var(--vattenfall-dark-gray);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.imd-insights {
|
|
background: var(--vattenfall-white);
|
|
color: var(--vattenfall-dark-gray);
|
|
padding: 25px;
|
|
border-radius: 8px;
|
|
margin-top: 30px;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.imd-insights h2 {
|
|
margin-bottom: 15px;
|
|
font-size: 1.4em;
|
|
color: var(--vattenfall-blue);
|
|
}
|
|
|
|
.imd-insight-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.imd-insight-item {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.imd-insight-label {
|
|
font-size: 0.9em;
|
|
color: var(--vattenfall-medium-gray);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.imd-insight-value {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
color: var(--vattenfall-blue);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.imd-bar {
|
|
animation: slideIn 1s ease-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="presentation-container">
|
|
<!-- Navigation -->
|
|
<div class="navigation">
|
|
<button onclick="window.location.href='slide-05-interviews.html'">Previous</button>
|
|
<span>7 / 9</span>
|
|
<button onclick="window.location.href='slide-07-technical-vision.html'">Next</button>
|
|
</div>
|
|
|
|
<!-- Slide Container -->
|
|
<div class="slide-container">
|
|
<div class="slide active">
|
|
<div class="slide-content">
|
|
<h2>IMD Digital Orchestra Framework</h2>
|
|
|
|
<div class="imd-chart-container">
|
|
<div class="imd-chart-header">
|
|
<h1 class="imd-chart-title">Digital Orchestra Maturity Assessment</h1>
|
|
<div class="imd-chart-subtitle">E-Mobility Business Unit - Strategic Transformation Readiness</div>
|
|
<div class="imd-legend">
|
|
<div class="imd-legend-item">
|
|
<div class="imd-legend-color" style="background: linear-gradient(90deg, #f1c40f, #f39c12);"></div>
|
|
<span>Low Maturity (0-40%)</span>
|
|
</div>
|
|
<div class="imd-legend-item">
|
|
<div class="imd-legend-color" style="background: linear-gradient(90deg, #90EE90, #32CD32);"></div>
|
|
<span>Medium Maturity (40-70%)</span>
|
|
</div>
|
|
<div class="imd-legend-item">
|
|
<div class="imd-legend-color" style="background: linear-gradient(90deg, var(--vattenfall-green), #229954);"></div>
|
|
<span>High Maturity (70-100%)</span>
|
|
</div>
|
|
<div class="imd-legend-item">
|
|
<div style="width: 40px; height: 2px; background: var(--vattenfall-dark-gray); position: relative;">
|
|
<div style="position: absolute; left: 0; top: -3px; width: 2px; height: 8px; background: var(--vattenfall-dark-gray);"></div>
|
|
<div style="position: absolute; right: 0; top: -3px; width: 2px; height: 8px; background: var(--vattenfall-dark-gray);"></div>
|
|
</div>
|
|
<span>Volatility Range</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-orchestra-sections">
|
|
<!-- Section 1: Go-to-Market -->
|
|
<div class="imd-section imd-section1">
|
|
<div class="imd-section-header">
|
|
<div class="imd-section-title">Go-to-Market</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Channels</div>
|
|
<div class="imd-instrument-description">Market access via retail, wholesale, eCommerce</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 35%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 25%; width: 20%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">35%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Offerings</div>
|
|
<div class="imd-instrument-description">Product and/or Service Transformation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 40%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 30%; width: 25%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">40%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Engagement -->
|
|
<div class="imd-section imd-section2">
|
|
<div class="imd-section-header">
|
|
<div class="imd-section-title">Engagement</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Workforce</div>
|
|
<div class="imd-instrument-description">Knowledge, skills and motivation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-medium" style="width: 60%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 45%; width: 30%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">60%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Customers</div>
|
|
<div class="imd-instrument-description">New ways to engage customers</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 38%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 28%; width: 20%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">38%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Partners</div>
|
|
<div class="imd-instrument-description">New ways to involve partners</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-medium" style="width: 50%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 40%; width: 25%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">50%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Operations -->
|
|
<div class="imd-section imd-section3">
|
|
<div class="imd-section-header">
|
|
<div class="imd-section-title">Operations</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Business Processes</div>
|
|
<div class="imd-instrument-description">Redesign of the process</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 45%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 35%; width: 20%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">45%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">IT Capability</div>
|
|
<div class="imd-instrument-description">IT support for transformation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-medium" style="width: 48%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 33%; width: 35%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">48%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Organization -->
|
|
<div class="imd-section imd-section4">
|
|
<div class="imd-section-header">
|
|
<div class="imd-section-title">Organization</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Structure</div>
|
|
<div class="imd-instrument-description">Structural prerequisite for transformation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 42%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 32%; width: 25%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">42%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Incentives</div>
|
|
<div class="imd-instrument-description">Reward structure to support transformation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-low" style="width: 32%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 25%; width: 15%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">32%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-instrument">
|
|
<div class="imd-instrument-name">Culture</div>
|
|
<div class="imd-instrument-description">Organizational readiness for transformation</div>
|
|
<div class="imd-bar-container">
|
|
<div class="imd-bar-area">
|
|
<div class="imd-bar imd-bar-medium" style="width: 55%;"></div>
|
|
<div class="imd-volatility-indicator" style="left: 40%; width: 35%;"></div>
|
|
</div>
|
|
<div class="imd-maturity-value">55%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="imd-insights">
|
|
<h2>Key Performance Insights</h2>
|
|
<div class="imd-insight-grid">
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Critical Gap</div>
|
|
<div class="imd-insight-value">Incentives (32%)</div>
|
|
</div>
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Highest Volatility</div>
|
|
<div class="imd-insight-value">IT Capability & Culture</div>
|
|
</div>
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Strongest Area</div>
|
|
<div class="imd-insight-value">Workforce (60%)</div>
|
|
</div>
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Average Maturity</div>
|
|
<div class="imd-insight-value">44.5%</div>
|
|
</div>
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Priority Focus</div>
|
|
<div class="imd-insight-value">Go-to-Market & Incentives</div>
|
|
</div>
|
|
<div class="imd-insight-item">
|
|
<div class="imd-insight-label">Quick Wins</div>
|
|
<div class="imd-insight-value">Customer Engagement</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |