425 lines
No EOL
15 KiB
HTML
425 lines
No EOL
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Digital Orchestra Maturity Assessment</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, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
padding: 40px;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
padding-bottom: 30px;
|
|
border-bottom: 3px solid #f0f0f0;
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #7f8c8d;
|
|
font-size: 1.2em;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 30px;
|
|
height: 15px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.orchestra-sections {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section {
|
|
background: #f8f9fa;
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
position: relative;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.section:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.section1 .section-title { color: #3498db; }
|
|
.section2 .section-title { color: #9b59b6; }
|
|
.section3 .section-title { color: #e74c3c; }
|
|
.section4 .section-title { color: #f39c12; }
|
|
|
|
.instrument {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.instrument-name {
|
|
font-weight: 500;
|
|
color: #34495e;
|
|
margin-bottom: 8px;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.instrument-description {
|
|
font-size: 0.85em;
|
|
color: #7f8c8d;
|
|
margin-bottom: 10px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.bar-container {
|
|
position: relative;
|
|
height: 30px;
|
|
background: #ecf0f1;
|
|
border-radius: 8px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.bar {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
transition: width 1s ease-out;
|
|
}
|
|
|
|
.bar-low {
|
|
background: linear-gradient(90deg, #e74c3c, #c0392b);
|
|
}
|
|
|
|
.bar-medium {
|
|
background: linear-gradient(90deg, #f39c12, #e67e22);
|
|
}
|
|
|
|
.bar-high {
|
|
background: linear-gradient(90deg, #27ae60, #229954);
|
|
}
|
|
|
|
.volatility-indicator {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 2px;
|
|
background: rgba(0,0,0,0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.volatility-indicator::before,
|
|
.volatility-indicator::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 8px;
|
|
background: rgba(0,0,0,0.8);
|
|
top: -3px;
|
|
}
|
|
|
|
.volatility-indicator::before {
|
|
left: 0;
|
|
}
|
|
|
|
.volatility-indicator::after {
|
|
right: 0;
|
|
}
|
|
|
|
.maturity-value {
|
|
position: absolute;
|
|
right: -35px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.insights {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.insights h2 {
|
|
margin-bottom: 20px;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.insight-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.insight-item {
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.insight-label {
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.insight-value {
|
|
font-size: 1.8em;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.bar {
|
|
animation: slideIn 1s ease-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>Digital Orchestra Maturity Assessment</h1>
|
|
<div class="subtitle">E-Mobility Business Unit - Strategic Transformation Readiness</div>
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: linear-gradient(90deg, #e74c3c, #c0392b);"></div>
|
|
<span>Low Maturity (0-40%)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: linear-gradient(90deg, #f39c12, #e67e22);"></div>
|
|
<span>Medium Maturity (40-70%)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: linear-gradient(90deg, #27ae60, #229954);"></div>
|
|
<span>High Maturity (70-100%)</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div style="width: 40px; height: 2px; background: black; position: relative;">
|
|
<div style="position: absolute; left: 0; top: -3px; width: 2px; height: 8px; background: black;"></div>
|
|
<div style="position: absolute; right: 0; top: -3px; width: 2px; height: 8px; background: black;"></div>
|
|
</div>
|
|
<span>Volatility Range</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="orchestra-sections">
|
|
<!-- Section 1: Go-to-Market -->
|
|
<div class="section section1">
|
|
<div class="section-header">
|
|
<div class="section-title">Go-to-Market</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Channels</div>
|
|
<div class="instrument-description">Market access via retail, wholesale, eCommerce</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 35%;"></div>
|
|
<div class="volatility-indicator" style="left: 25%; width: 20%;"></div>
|
|
<div class="maturity-value">35%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Offerings</div>
|
|
<div class="instrument-description">Product and/or Service Transformation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 40%;"></div>
|
|
<div class="volatility-indicator" style="left: 30%; width: 25%;"></div>
|
|
<div class="maturity-value">40%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Engagement -->
|
|
<div class="section section2">
|
|
<div class="section-header">
|
|
<div class="section-title">Engagement</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Workforce</div>
|
|
<div class="instrument-description">Knowledge, skills and motivation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-medium" style="width: 60%;"></div>
|
|
<div class="volatility-indicator" style="left: 45%; width: 30%;"></div>
|
|
<div class="maturity-value">60%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Customers</div>
|
|
<div class="instrument-description">New ways to engage customers</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 38%;"></div>
|
|
<div class="volatility-indicator" style="left: 28%; width: 20%;"></div>
|
|
<div class="maturity-value">38%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Partners</div>
|
|
<div class="instrument-description">New ways to involve partners</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-medium" style="width: 50%;"></div>
|
|
<div class="volatility-indicator" style="left: 40%; width: 25%;"></div>
|
|
<div class="maturity-value">50%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Operations -->
|
|
<div class="section section3">
|
|
<div class="section-header">
|
|
<div class="section-title">Operations</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Business Processes</div>
|
|
<div class="instrument-description">Redesign of the process</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 45%;"></div>
|
|
<div class="volatility-indicator" style="left: 35%; width: 20%;"></div>
|
|
<div class="maturity-value">45%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">IT Capability</div>
|
|
<div class="instrument-description">IT support for transformation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-medium" style="width: 48%;"></div>
|
|
<div class="volatility-indicator" style="left: 33%; width: 35%;"></div>
|
|
<div class="maturity-value">48%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Organization -->
|
|
<div class="section section4">
|
|
<div class="section-header">
|
|
<div class="section-title">Organization</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Structure</div>
|
|
<div class="instrument-description">Structural prerequisite for transformation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 42%;"></div>
|
|
<div class="volatility-indicator" style="left: 32%; width: 25%;"></div>
|
|
<div class="maturity-value">42%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Incentives</div>
|
|
<div class="instrument-description">Reward structure to support transformation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-low" style="width: 32%;"></div>
|
|
<div class="volatility-indicator" style="left: 25%; width: 15%;"></div>
|
|
<div class="maturity-value">32%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instrument">
|
|
<div class="instrument-name">Culture</div>
|
|
<div class="instrument-description">Organizational readiness for transformation</div>
|
|
<div class="bar-container">
|
|
<div class="bar bar-medium" style="width: 55%;"></div>
|
|
<div class="volatility-indicator" style="left: 40%; width: 35%;"></div>
|
|
<div class="maturity-value">55%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insights">
|
|
<h2>Key Performance Insights</h2>
|
|
<div class="insight-grid">
|
|
<div class="insight-item">
|
|
<div class="insight-label">Critical Gap</div>
|
|
<div class="insight-value">Incentives (32%)</div>
|
|
</div>
|
|
<div class="insight-item">
|
|
<div class="insight-label">Highest Volatility</div>
|
|
<div class="insight-value">IT Capability & Culture</div>
|
|
</div>
|
|
<div class="insight-item">
|
|
<div class="insight-label">Strongest Area</div>
|
|
<div class="insight-value">Workforce (60%)</div>
|
|
</div>
|
|
<div class="insight-item">
|
|
<div class="insight-label">Average Maturity</div>
|
|
<div class="insight-value">44.5%</div>
|
|
</div>
|
|
<div class="insight-item">
|
|
<div class="insight-label">Priority Focus</div>
|
|
<div class="insight-value">Go-to-Market & Incentives</div>
|
|
</div>
|
|
<div class="insight-item">
|
|
<div class="insight-label">Quick Wins</div>
|
|
<div class="insight-value">Customer Engagement</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |