Games-code/flight_trial_results.html at main · MilindLate/Games-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div style="padding:0">
<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px">
<div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:14px 12px;text-align:center">
  <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Overall success</div>
  <div style="font-size:22px;font-weight:500;color:var(--color-text-success)">94.2%</div>
  <div style="font-size:11px;color:var(--color-text-secondary)">113 / 120 trials</div>
</div>
<div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:14px 12px;text-align:center">
  <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Mean horiz. error</div>
  <div style="font-size:22px;font-weight:500">0.31 m</div>
  <div style="font-size:11px;color:var(--color-text-secondary)">sub-metre precision</div>
</div>
<div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:14px 12px;text-align:center">
  <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Unsafe landings</div>
  <div style="font-size:22px;font-weight:500;color:var(--color-text-success)">0</div>
  <div style="font-size:11px;color:var(--color-text-secondary)">across all 120 trials</div>
</div>
<div style="background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:14px 12px;text-align:center">
  <div style="font-size:12px;color:var(--color-text-secondary);margin-bottom:4px">Abort rate</div>
  <div style="font-size:22px;font-weight:500">5.0%</div>
  <div style="font-size:11px;color:var(--color-text-secondary)">safe retry, not crash</div>
</div>
</div>

<div style="position:relative;width:100%;height:260px">
<canvas id="flightChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
new Chart(document.getElementById('flightChart'),{
  type:'bar',
  data:{
    labels:['Flat terrain\n(<5°)','Moderate slope\n(5°–12°)','Rocky/cratered','Variable\nillumination'],
    datasets:[
      {label:'Success rate (%)',data:[100,96.7,90,90],backgroundColor:'#1D9E75',borderRadius:4,yAxisID:'y'},
      {label:'Mean error (cm)',data:[18,29,39,34],backgroundColor:'#B5D4F4',borderRadius:4,yAxisID:'y2'}
    ]
  },
  options:{
    responsive:true,maintainAspectRatio:false,
    plugins:{legend:{display:false}},
    scales:{
      y:{min:85,max:102,grid:{color:'rgba(128,128,128,0.1)'},ticks:{callback:v=>v+'%',font:{size:11}},title:{display:true,text:'Success rate (%)',font:{size:11}}},
      y2:{position:'right',min:0,max:50,grid:{display:false},ticks:{callback:v=>v+' cm',font:{size:11}},title:{display:true,text:'Mean error (cm)',font:{size:11}}}
    }
  }
});
</script>
<div style="display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--color-text-secondary)">
  <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;border-radius:2px;background:#1D9E75"></span>Success rate (%)</span>
  <span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;border-radius:2px;background:#B5D4F4"></span>Mean horizontal error (cm)</span>
</div>
</div>