174 lines
8.3 KiB
PHP
174 lines
8.3 KiB
PHP
|
|
<link rel="stylesheet" href="assets/css/ev-premium.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<section class="evp-section">
|
|
<!-- Background Decor -->
|
|
<div class="evp-bg-aura aura-red"></div>
|
|
<div class="evp-bg-aura aura-blue"></div>
|
|
<div class="evp-grid-overlay"></div>
|
|
|
|
<div class="evp-container">
|
|
<div class="evp-layout">
|
|
|
|
<!-- LEFT: Strategic Content -->
|
|
<div class="evp-content">
|
|
<div class="evp-tag">
|
|
<span class="status-dot"></span>
|
|
EV-Native Intelligence
|
|
</div>
|
|
|
|
<h2 class="evp-title" style="color:#FFFFFF !important">
|
|
BUILT FOR ELECTRIC.
|
|
<span>NOT ADAPTED.</span>
|
|
</h2>
|
|
|
|
<p class="evp-desc">
|
|
Most logistics software treats EVs as diesel trucks with a battery. Doormile was built EV-first—understanding that electric fleets require fundamentally different intelligence.
|
|
</p>
|
|
|
|
<div class="evp-features">
|
|
<!-- Feature 1 -->
|
|
<div class="evp-feature-card">
|
|
<div class="evp-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93"/></svg>
|
|
</div>
|
|
<h4>Adaptive Routing</h4>
|
|
<p>Battery level, health, and degradation are primary inputs to our route optimization engine.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="evp-feature-card">
|
|
<div class="evp-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64A9 9 0 1 1 5.64 19.36m12.72-12.72L12 12M18.36 6.64L19.77 5.23"/></svg>
|
|
</div>
|
|
<h4>Charging Sync</h4>
|
|
<p>Seamlessly integrate charging stops into routes without compromising strict delivery windows.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="evp-feature-card">
|
|
<div class="evp-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
</div>
|
|
<h4>Energy Paths</h4>
|
|
<p>Advanced terrain and weather models predict energy consumption with 98% accuracy.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="evp-feature-card">
|
|
<div class="evp-icon-box">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|
</div>
|
|
<h4>Total Control</h4>
|
|
<p>Real-time telemetry gives you a god-view of every asset's health and performance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Interactive Dashboard Visual -->
|
|
<div class="evp-visual">
|
|
<div class="evp-dashboard">
|
|
<div class="evp-db-header">
|
|
<div>
|
|
<span class="evp-db-title">Fleet Status</span>
|
|
<h4 class="evp-db-id">DML-001</h4>
|
|
</div>
|
|
<div class="evp-live-tag">
|
|
Live Telemetry
|
|
</div>
|
|
</div>
|
|
|
|
<div class="evp-van-stage">
|
|
<!-- Floating HUD: Battery -->
|
|
<div class="evp-hud-card hud-battery" data-speed="1.2">
|
|
<div class="evp-progress-wrap">
|
|
<svg class="evp-progress-svg" viewBox="0 0 40 40">
|
|
<circle class="evp-progress-circle-bg" cx="20" cy="20" r="18"/>
|
|
<circle class="evp-progress-circle" cx="20" cy="20" r="18" style="stroke-dasharray: 113; stroke-dashoffset: 113;"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="hud-label-small">Battery Charge</div>
|
|
<div class="hud-val-large">82%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating HUD: Location -->
|
|
<div class="evp-hud-card hud-location" data-speed="0.8">
|
|
<div class="hud-label-small">Current Location</div>
|
|
<div class="hud-val-large" style="font-size: 16px;">Downtown HQ</div>
|
|
<div style="font-size: 10px; color: #10B981; margin-top: 5px;">• On Schedule</div>
|
|
</div>
|
|
|
|
<!-- Floating HUD: Route -->
|
|
<div class="evp-hud-card hud-route" data-speed="1.5">
|
|
<div class="hud-label-small">Active Route</div>
|
|
<div class="hud-val-large" style="font-size: 16px;">Zone B delivery</div>
|
|
<div class="hud-route-path">
|
|
<div class="hud-route-line"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<img src="assets/images/premium-ev-van.png" alt="Doormile Premium Electric Van" class="evp-van-image">
|
|
</div>
|
|
|
|
<!-- Metrics Row -->
|
|
<div class="evp-metrics">
|
|
<div class="m-item">
|
|
<div class="m-label">Fuel Saved</div>
|
|
<div class="m-value">40%</div>
|
|
</div>
|
|
<div class="m-item">
|
|
<div class="m-label">Emissions</div>
|
|
<div class="m-value">ZERO</div>
|
|
</div>
|
|
<div class="m-item">
|
|
<div class="m-label">Uptime</div>
|
|
<div class="m-value">98%</div>
|
|
</div>
|
|
<div class="m-item">
|
|
<div class="m-label">Efficiency</div>
|
|
<div class="m-value">3x</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Animate Battery Progress
|
|
setTimeout(() => {
|
|
const circle = document.querySelector('.evp-progress-circle');
|
|
if (circle) {
|
|
circle.style.strokeDashoffset = '20.34'; // 82% of 113
|
|
}
|
|
}, 500);
|
|
|
|
// Subtle Mouse Parallax for HUD cards
|
|
const container = document.querySelector('.evp-visual');
|
|
const cards = document.querySelectorAll('.evp-hud-card');
|
|
|
|
container.addEventListener('mousemove', (e) => {
|
|
const rect = container.getBoundingClientRect();
|
|
const x = e.clientX - rect.left - rect.width / 2;
|
|
const y = e.clientY - rect.top - rect.height / 2;
|
|
|
|
cards.forEach(card => {
|
|
const speed = card.getAttribute('data-speed') || 1;
|
|
card.style.transform = `translate(${x * 0.02 * speed}px, ${y * 0.02 * speed}px)`;
|
|
});
|
|
});
|
|
|
|
container.addEventListener('mouseleave', () => {
|
|
cards.forEach(card => {
|
|
card.style.transform = `translate(0, 0)`;
|
|
});
|
|
});
|
|
});
|
|
</script>
|