+
+
+ {/* Distance displays */}
+
+
+ {status}
+
+
+ {instruction}
+
+
+ {/* Left sensor */}
+
+
+ {/* Visual representation */}
+
+
+
+ {/* Right sensor */}
+
+
+
+ Left Sensor
+
+ {leftDistance === null ? 'No data' :
+ leftDistance < 30 ? 'Danger' :
+ leftDistance < 50 ? 'Warning' : 'Safe'}
+
+
+
+
+
+ {leftDistance !== null ? leftDistance.toFixed(1) : '--'}
+
+ cm
+
+
+
+
+
+
+
+
+ Right Sensor
+
+ {rightDistance === null ? 'No data' :
+ rightDistance < 30 ? 'Danger' :
+ rightDistance < 50 ? 'Warning' : 'Safe'}
+
+
+
+
+
+ {rightDistance !== null ? rightDistance.toFixed(1) : '--'}
+
+ cm
+
+
+
+
+
+ Obstacle Visualization
+ +
+ {/* Car representation */}
+
+
+
+
+
+ {/* Left sensor zone */}
+
+ {leftDistance !== null && leftDistance < 100 && (
+
+
+ {/* Right sensor zone */}
+
+ {leftDistance < 50 && (
+
+ )}
+
+ )}
+
+ {rightDistance !== null && rightDistance < 100 && (
+
+
+ {/* Distance markers */}
+
+ {rightDistance < 50 && (
+
+ )}
+
+ )}
+
+
+
+ 100cm
+ 50cm
+ 0cm
+
+