EV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EV Ecosystem Block Diagram</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.diagram-wrapper {
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
max-width: 900px;
width: 100%;
}
h2 {
text-align: center;
color: #1e293b;
margin-bottom: 40px;
font-size: 1.4rem;
letter-spacing: 0.5px;
}
.blocks {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 0;
position: relative;
}
.block {
flex: 1;
border-radius: 12px;
padding: 28px 20px;
text-align: center;
position: relative;
z-index: 1;
}
.block-user {
background: #dbeafe;
border: 2px solid #3b82f6;
}
.block-courier {
background: #fef9c3;
border: 2px solid #eab308;
margin: 0 10px;
}
.block-infra {
background: #dcfce7;
border: 2px solid #22c55e;
}
.block-icon {
font-size: 2.4rem;
margin-bottom: 10px;
}
.block-title {
font-weight: 700;
font-size: 1rem;
color: #1e293b;
margin-bottom: 14px;
}
.block-items {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
font-size: 0.85rem;
color: #475569;
line-height: 1.8;
}
.block-items li::before {
content: "• ";
color: #94a3b8;
}
.arrows {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
padding: 0 calc(33% / 2);
position: relative;
}
.arrow-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
}
.arrow-line {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
color: #64748b;
font-style: italic;
}
.arrow-right::after {
content: "→";
font-size: 1.1rem;
color: #94a3b8;
}
.arrow-left::before {
content: "←";
font-size: 1.1rem;
color: #94a3b8;
}
/* Connector lines between blocks */
.connector {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80px;
flex-shrink: 0;
gap: 6px;
z-index: 0;
}
.conn-label {
font-size: 0.7rem;
color: #64748b;
font-style: italic;
text-align: center;
background: white;
padding: 2px 4px;
border-radius: 4px;
}
.conn-arrow {
display: flex;
align-items: center;
width: 100%;
justify-content: center;
color: #94a3b8;
font-size: 1.1rem;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="diagram-wrapper">
<h2>EV Ecosystem — Block Diagram</h2>
<div class="row">
<!-- Block 1: End User Facility -->
<div class="block block-user">
<div class="block-icon">🚗</div>
<div class="block-title">End User Facility</div>
<ul class="block-items">
<li>EV owners / drivers</li>
<li>Charging demand</li>
<li>Battery swap requests</li>
<li>Journey scheduling</li>
<li>Payment & billing</li>
</ul>
</div>
<!-- Connector 1 -->
<div class="connector">
<div class="conn-arrow">→</div>
<div class="conn-label">Delivery request</div>
<div class="conn-label">Battery pickup</div>
<div class="conn-arrow">←</div>
<div class="conn-label">Charged battery</div>
</div>
<!-- Block 2: Courier Activity -->
<div class="block block-courier">
<div class="block-icon">🚚</div>
<div class="block-title">Courier Activity</div>
<ul class="block-items">
<li>Battery transport</li>
<li>Route optimisation</li>
<li>Pick-up & drop-off</li>
<li>Fleet management</li>
<li>Tracking & logistics</li>
</ul>
</div>
<!-- Connector 2 -->
<div class="connector">
<div class="conn-arrow">→</div>
<div class="conn-label">Depleted battery</div>
<div class="conn-arrow">←</div>
<div class="conn-label">Charged battery</div>
<div class="conn-label">Collection schedule</div>
</div>
<!-- Block 3: Battery Charging Infrastructure -->
<div class="block block-infra">
<div class="block-icon">⚡</div>
<div class="block-title">Battery Charging Infrastructure</div>
<ul class="block-items">
<li>Charging stations</li>
<li>Grid connection</li>
<li>Battery storage</li>
<li>Energy management</li>
<li>Maintenance & monitoring</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment