Files
archived-matedroid/palette_preview.html
T
Davide FerrariandClaude Opus 4.5 9b0ed058b8 feat: dynamic car color palettes for battery card
- Add CarColorPalette with per-car-color theming
- Disable Material You dynamic colors (use app theme only)
- Battery card now adapts to car exterior color
- Light mode: White uses warm grey, Black uses darker grey
- Dark mode: Blue-grey for white, warm brown for black
- Semantic colors (green/orange/red) remain fixed for status
- Add palette preview screen for debugging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-21 10:07:44 +01:00

400 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MateDroid Color Palette Preview</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 20px; }
.mode-section { margin-bottom: 40px; }
h1 { margin-bottom: 20px; }
h2 { margin-bottom: 16px; padding: 8px 0; border-bottom: 2px solid #ccc; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.card { border-radius: 16px; padding: 16px; }
.card-label { font-size: 12px; opacity: 0.7; margin-bottom: 4px; }
.status-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; }
.status-left { display: flex; gap: 12px; }
.status-item { display: flex; align-items: center; gap: 4px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; }
.car-image { height: 160px; display: flex; align-items: center; justify-content: center; }
.car-image img { max-height: 100%; max-width: 100%; object-fit: contain; }
.battery-row { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.battery-left { display: flex; align-items: center; gap: 8px; }
.battery-percent { font-size: 28px; font-weight: bold; }
.charging-icon { color: #4CAF50; font-size: 20px; }
.range { text-align: right; }
.range-value { font-size: 16px; font-weight: 500; }
.range-limit { font-size: 12px; opacity: 0.7; }
.progress-bar { height: 8px; border-radius: 4px; margin: 12px 0; position: relative; overflow: hidden; }
.progress-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
.progress-target { position: absolute; top: 0; height: 100%; opacity: 0.3; }
.charging-info { display: flex; justify-content: space-between; font-size: 12px; height: 16px; }
.charging-power { color: #4CAF50; font-weight: 500; }
/* Dark mode background */
.dark-bg { background: #1C1B1F; color: #E6E1E5; padding: 20px; border-radius: 16px; margin-bottom: 40px; }
.dark-bg h2 { border-color: #444; }
</style>
</head>
<body>
<h1>MateDroid Color Palette Preview</h1>
<!-- Light Mode -->
<div class="mode-section">
<h2>Light Mode</h2>
<div class="cards">
<!-- White car - NOW using warm grey like black was -->
<div class="card" style="background: #F5F3F0;">
<div class="card-label" style="color: rgba(42, 37, 32, 0.7);">White (Pearl White)</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(42, 37, 32, 0.7);">
21°C <span style="color: #8B7355; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PPSW_W38B.png" alt="White Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #2A2520;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #2A2520;">312 km</div>
<div class="range-limit" style="color: rgba(42, 37, 32, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(42, 37, 32, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(42, 37, 32, 0.7);">+15.3 kWh</span>
<span style="color: rgba(42, 37, 32, 0.7);">1h 30m</span>
</div>
</div>
<!-- Black car - NOW darker grey than midnight silver -->
<div class="card" style="background: #D8DADC;">
<div class="card-label" style="color: rgba(30, 32, 34, 0.7);">Black (Solid Black)</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(30, 32, 34, 0.7);">
21°C <span style="color: #505458; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PBSB_W38B.png" alt="Black Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #1E2022;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #1E2022;">312 km</div>
<div class="range-limit" style="color: rgba(30, 32, 34, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(30, 32, 34, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(30, 32, 34, 0.7);">+15.3 kWh</span>
<span style="color: rgba(30, 32, 34, 0.7);">1h 30m</span>
</div>
</div>
<!-- Midnight Silver -->
<div class="card" style="background: #ECEEF0;">
<div class="card-label" style="color: rgba(34, 38, 43, 0.7);">Midnight Silver</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(34, 38, 43, 0.7);">
21°C <span style="color: #6B7A8C; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PMNG_W38B.png" alt="Midnight Silver Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #22262B;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #22262B;">312 km</div>
<div class="range-limit" style="color: rgba(34, 38, 43, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(34, 38, 43, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(34, 38, 43, 0.7);">+15.3 kWh</span>
<span style="color: rgba(34, 38, 43, 0.7);">1h 30m</span>
</div>
</div>
<!-- Red -->
<div class="card" style="background: #F8E8E8;">
<div class="card-label" style="color: rgba(46, 26, 26, 0.7);">Red Multi-Coat</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(46, 26, 26, 0.7);">
21°C <span style="color: #C45050; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PPMR_W38B.png" alt="Red Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #2E1A1A;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #2E1A1A;">312 km</div>
<div class="range-limit" style="color: rgba(46, 26, 26, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(46, 26, 26, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(46, 26, 26, 0.7);">+15.3 kWh</span>
<span style="color: rgba(46, 26, 26, 0.7);">1h 30m</span>
</div>
</div>
</div>
</div>
<!-- Dark Mode -->
<div class="dark-bg mode-section">
<h2>Dark Mode</h2>
<div class="cards">
<!-- White car - dark mode -->
<div class="card" style="background: #1E2530;">
<div class="card-label" style="color: rgba(232, 238, 248, 0.7);">White (Pearl White)</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(232, 238, 248, 0.7);">
21°C <span style="color: #8BAEE8; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PPSW_W38B.png" alt="White Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #E8EEF8;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #E8EEF8;">312 km</div>
<div class="range-limit" style="color: rgba(232, 238, 248, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(232, 238, 248, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(232, 238, 248, 0.7);">+15.3 kWh</span>
<span style="color: rgba(232, 238, 248, 0.7);">1h 30m</span>
</div>
</div>
<!-- Black car - dark mode -->
<div class="card" style="background: #2A2520;">
<div class="card-label" style="color: rgba(245, 243, 240, 0.7);">Black (Solid Black)</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(245, 243, 240, 0.7);">
21°C <span style="color: #C9A66B; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PBSB_W38B.png" alt="Black Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #F5F3F0;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #F5F3F0;">312 km</div>
<div class="range-limit" style="color: rgba(245, 243, 240, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(245, 243, 240, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(245, 243, 240, 0.7);">+15.3 kWh</span>
<span style="color: rgba(245, 243, 240, 0.7);">1h 30m</span>
</div>
</div>
<!-- Midnight Silver - dark mode -->
<div class="card" style="background: #22262B;">
<div class="card-label" style="color: rgba(236, 238, 240, 0.7);">Midnight Silver</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(236, 238, 240, 0.7);">
21°C <span style="color: #8FA4B8; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PMNG_W38B.png" alt="Midnight Silver Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #ECEEF0;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #ECEEF0;">312 km</div>
<div class="range-limit" style="color: rgba(236, 238, 240, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(236, 238, 240, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(236, 238, 240, 0.7);">+15.3 kWh</span>
<span style="color: rgba(236, 238, 240, 0.7);">1h 30m</span>
</div>
</div>
<!-- Red - dark mode -->
<div class="card" style="background: #2E1A1A;">
<div class="card-label" style="color: rgba(248, 232, 232, 0.7);">Red Multi-Coat</div>
<div class="status-row">
<div class="status-left">
<div class="status-item"><span class="status-dot"></span><span style="color: #4CAF50;">Online</span></div>
<div class="status-item"><span style="color: #4CAF50;">Locked</span></div>
</div>
<div class="status-item" style="color: rgba(248, 232, 232, 0.7);">
21°C <span style="color: #E07070; margin-left: 8px;">15°C</span>
</div>
</div>
<div class="car-image">
<img src="app/src/main/assets/car_images/m3_PPMR_W38B.png" alt="Red Tesla">
</div>
<div class="battery-row">
<div class="battery-left">
<span class="battery-percent" style="color: #F8E8E8;">72%</span>
<span class="charging-icon">⚡</span>
</div>
<div class="range">
<div class="range-value" style="color: #F8E8E8;">312 km</div>
<div class="range-limit" style="color: rgba(248, 232, 232, 0.7);">Limit: 80%</div>
</div>
</div>
<div class="progress-bar" style="background: rgba(248, 232, 232, 0.1);">
<div class="progress-target" style="left: 72%; width: 8%; background: #4CAF50;"></div>
<div class="progress-fill" style="width: 72%; background: #4CAF50;"></div>
</div>
<div class="charging-info">
<span class="charging-power">11 kW</span>
<span style="color: rgba(248, 232, 232, 0.7);">+15.3 kWh</span>
<span style="color: rgba(248, 232, 232, 0.7);">1h 30m</span>
</div>
</div>
</div>
</div>
<h2>Updated Color Palette Summary</h2>
<table style="width: 100%; border-collapse: collapse; margin-top: 16px;">
<thead>
<tr style="background: #f5f5f5;">
<th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Car Color</th>
<th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Light Surface</th>
<th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Dark Surface</th>
<th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Accent Light</th>
<th style="padding: 8px; text-align: left; border: 1px solid #ddd;">Accent Dark</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">White</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#F5F3F0;border:1px solid #ccc;vertical-align:middle;"></span> #F5F3F0 (warm grey)</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#1E2530;border:1px solid #ccc;vertical-align:middle;"></span> #1E2530</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#8B7355;border:1px solid #ccc;vertical-align:middle;"></span> #8B7355</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#8BAEE8;border:1px solid #ccc;vertical-align:middle;"></span> #8BAEE8</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">Black</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#D8DADC;border:1px solid #ccc;vertical-align:middle;"></span> #D8DADC (darker grey)</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#2A2520;border:1px solid #ccc;vertical-align:middle;"></span> #2A2520</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#505458;border:1px solid #ccc;vertical-align:middle;"></span> #505458</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#C9A66B;border:1px solid #ccc;vertical-align:middle;"></span> #C9A66B</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">Midnight Silver</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#ECEEF0;border:1px solid #ccc;vertical-align:middle;"></span> #ECEEF0</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#22262B;border:1px solid #ccc;vertical-align:middle;"></span> #22262B</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#6B7A8C;border:1px solid #ccc;vertical-align:middle;"></span> #6B7A8C</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#8FA4B8;border:1px solid #ccc;vertical-align:middle;"></span> #8FA4B8</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">Red</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#F8E8E8;border:1px solid #ccc;vertical-align:middle;"></span> #F8E8E8</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#2E1A1A;border:1px solid #ccc;vertical-align:middle;"></span> #2E1A1A</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#C45050;border:1px solid #ccc;vertical-align:middle;"></span> #C45050</td>
<td style="padding: 8px; border: 1px solid #ddd;"><span style="display:inline-block;width:20px;height:20px;background:#E07070;border:1px solid #ccc;vertical-align:middle;"></span> #E07070</td>
</tr>
</tbody>
</table>
<h3 style="margin-top: 24px;">Changes Made</h3>
<ul style="margin-top: 12px; padding-left: 20px;">
<li><strong>White (Light):</strong> Now uses warm grey #F5F3F0 (previously blue-grey #E8EEF8)</li>
<li><strong>Black (Light):</strong> Now uses darker grey #D8DADC (darker than Midnight Silver's #ECEEF0)</li>
</ul>
<h3 style="margin-top: 24px;">Semantic Colors (Fixed)</h3>
<div style="display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap;">
<div><span style="display:inline-block;width:20px;height:20px;background:#4CAF50;border:1px solid #ccc;vertical-align:middle;"></span> Success (Green) - Charging, Locked, Online</div>
<div><span style="display:inline-block;width:20px;height:20px;background:#FF9800;border:1px solid #ccc;vertical-align:middle;"></span> Warning (Orange) - Unlocked, Low Battery</div>
<div><span style="display:inline-block;width:20px;height:20px;background:#F44336;border:1px solid #ccc;vertical-align:middle;"></span> Error (Red) - Critical Battery</div>
</div>
</body>
</html>