GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Directions List Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 24px 40px;21    color: #616161;22    display: flex;23    align-items: center;24    font-size: 40px;25  }26  .status-spacer { flex: 1; }27  .sb-dot {28    width: 16px; height: 16px; border-radius: 50%; background: #9E9E9E; display: inline-block; margin: 0 10px;29  }30  .sb-icon {31    width: 38px; height: 38px; border-radius: 8px; background: #BDBDBD; display: inline-block; margin-left: 22px;32  }33 34  /* Summary header */35  .summary {36    padding: 10px 40px 28px 40px;37  }38  .time-line {39    font-size: 84px;40    line-height: 1.1;41    font-weight: 500;42    color: #2E7D32;43  }44  .time-line span.dark {45    color: #212121;46    font-weight: 400;47  }48  .subtext {49    margin-top: 10px;50    color: #8A8A8A;51    font-size: 38px;52  }53  .divider {54    height: 2px;55    background: #E0E0E0;56    margin-top: 26px;57  }58 59  /* Steps list */60  .steps {61    padding-bottom: 250px; /* leave room for bottom bar */62  }63  .step {64    display: flex;65    align-items: center;66    padding: 34px 36px;67  }68  .icon-box {69    width: 100px; height: 100px;70    display: flex; align-items: center; justify-content: center;71    margin-right: 24px;72  }73  .step-content {74    flex: 1;75  }76  .title {77    font-size: 46px;78    color: #424242;79    line-height: 1.25;80  }81  .meta {82    margin-top: 12px;83    color: #757575;84    font-size: 34px;85    display: flex; align-items: center; gap: 12px;86  }87  .thumb {88    width: 270px; height: 150px;89    margin-left: 24px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    color: #757575;93    display: flex; align-items: center; justify-content: center;94    font-size: 28px;95  }96 97  .distance-row {98    display: flex; align-items: center; gap: 24px;99    padding: 0 36px 26px 160px;100    color: #9E9E9E;101    font-size: 36px;102  }103  .distance-row .line {104    height: 2px; background: #E0E0E0; flex: 1;105  }106 107  /* Bottom action bar */108  .bottom-bar {109    position: absolute;110    left: 0; right: 0; bottom: 88px;111    padding: 18px 30px;112  }113  .bar-surface {114    background: #FFFFFF;115    border-radius: 40px;116    box-shadow: 0 6px 24px rgba(0,0,0,0.18);117    padding: 28px 24px;118    display: flex; gap: 26px; width: fit-content;119    margin-left: 26px;120  }121  .btn {122    display: flex; align-items: center; gap: 18px;123    padding: 24px 38px; border-radius: 50px; font-size: 40px;124    border: 2px solid #E0E0E0; color: #1976D2; background: #fff;125  }126  .btn.primary {127    background: #1976D2; color: #fff; border-color: #1976D2;128  }129 130  /* Gesture bar */131  .gesture {132    position: absolute; left: 50%; transform: translateX(-50%);133    bottom: 24px; width: 300px; height: 12px; border-radius: 8px; background: #BDBDBD;134  }135 136  /* Simple helpers */137  svg { display: block; }138  .toll {139    width: 36px; height: 36px; border-radius: 50%; border: 2px solid #9E9E9E; color: #616161;140    display: inline-flex; align-items: center; justify-content: center; font-size: 24px;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status bar -->148  <div class="status-bar">149    6:44150    <span class="sb-dot" style="margin-left: 18px;"></span>151    <span class="sb-dot"></span>152    <span class="sb-dot"></span>153    <span class="sb-dot"></span>154    <span class="sb-dot" style="margin-right: 14px;"></span>155    <span class="status-spacer"></span>156    <span class="sb-icon"></span>157    <span class="sb-icon"></span>158  </div>159 160  <!-- Summary -->161  <div class="summary">162    <div class="time-line">44 min <span class="dark">(62 km)</span></div>163    <div class="subtext">Fastest route now due to traffic conditions</div>164    <div class="divider"></div>165  </div>166 167  <!-- Steps -->168  <div class="steps">169 170    <!-- Step 1 -->171    <div class="step">172      <div class="icon-box">173        <!-- turn-left icon -->174        <svg width="80" height="80" viewBox="0 0 24 24">175          <path d="M4 9l4-4v3h6a4 4 0 014 4v7h-2v-7a2 2 0 00-2-2H8v3L4 9z" fill="#424242"/>176        </svg>177      </div>178      <div class="step-content">179        <div class="title">Turn left onto the ramp to Au 9/ Au Córdoba - Rosario</div>180      </div>181      <div class="thumb">[IMG: Street view]</div>182    </div>183    <div class="distance-row">184      <div>600 m</div>185      <div class="line"></div>186    </div>187 188    <!-- Step 2 -->189    <div class="step">190      <div class="icon-box">191        <!-- merge icon -->192        <svg width="80" height="80" viewBox="0 0 24 24">193          <path d="M6 20V4h2v6l6 6v4h-2v-3.2L8 10.2V20H6z" fill="#424242"/>194        </svg>195      </div>196      <div class="step-content">197        <div class="title">Merge with Au 9/Au Córdoba - Rosario</div>198        <div class="meta"><span class="toll">T</span> Toll road</div>199      </div>200      <div class="thumb">[IMG: Highway]</div>201    </div>202    <div class="distance-row">203      <div>54 km</div>204      <div class="line"></div>205    </div>206 207    <!-- Step 3 -->208    <div class="step">209      <div class="icon-box">210        <!-- exit-right icon -->211        <svg width="80" height="80" viewBox="0 0 24 24">212          <path d="M7 20V4h2v6h3l3 3-1.4 1.4L12.6 12H9v8H7z" fill="#424242"/>213        </svg>214      </div>215      <div class="step-content">216        <div class="title">Take exit 2 toward Funes</div>217      </div>218      <div class="thumb">[IMG: Exit ramp]</div>219    </div>220    <div class="distance-row">221      <div>260 m</div>222      <div class="line"></div>223    </div>224 225    <!-- Step 4 -->226    <div class="step">227      <div class="icon-box">228        <!-- merge icon -->229        <svg width="80" height="80" viewBox="0 0 24 24">230          <path d="M6 20V4h2v6l6 6v4h-2v-3.2L8 10.2V20H6z" fill="#424242"/>231        </svg>232      </div>233      <div class="step-content">234        <div class="title">Merge with Miguel Galindo</div>235      </div>236      <div class="thumb">[IMG: Roadside]</div>237    </div>238    <div class="distance-row">239      <div>1.2 km</div>240      <div class="line"></div>241    </div>242 243    <!-- Step 5 -->244    <div class="step">245      <div class="icon-box">246        <!-- roundabout first exit icon (key-like) -->247        <svg width="80" height="80" viewBox="0 0 24 24">248          <path d="M12 6a6 6 0 016 6h-2a4 4 0 10-4 4v-3l4 4-4 4v-3a6 6 0 010-12z" fill="#757575"/>249        </svg>250      </div>251      <div class="step-content">252        <div class="title">At the roundabout, take the 1st exit onto Av. Fuerza Aerea</div>253      </div>254      <div class="thumb">[IMG: Roundabout]</div>255    </div>256    <div class="distance-row">257      <div>750 m</div>258      <div class="line"></div>259    </div>260 261    <!-- Step 6 -->262    <div class="step">263      <div class="icon-box">264        <!-- roundabout third exit icon -->265        <svg width="80" height="80" viewBox="0 0 24 24">266          <path d="M12 6a6 6 0 016 6h-2a4 4 0 10-4 4v-3l4 4-4 4v-3a6 6 0 010-12z" fill="#424242"/>267        </svg>268      </div>269      <div class="step-content">270        <div class="title">At the roundabout, take the 3rd exit onto Hipólito Yrigoyen</div>271      </div>272      <div class="thumb">[IMG: City roundabout]</div>273    </div>274    <div class="distance-row">275      <div>60 m</div>276      <div class="line"></div>277    </div>278 279    <!-- Step 7 -->280    <div class="step">281      <div class="icon-box">282        <!-- merge icon -->283        <svg width="80" height="80" viewBox="0 0 24 24">284          <path d="M6 20V4h2v6l6 6v4h-2v-3.2L8 10.2V20H6z" fill="#424242"/>285        </svg>286      </div>287      <div class="step-content">288        <div class="title">Exit the roundabout onto Hipólito Yrigoyen</div>289      </div>290      <div class="thumb">[IMG: Neighborhood road]</div>291    </div>292 293  </div>294 295  <!-- Bottom action bar -->296  <div class="bottom-bar">297    <div class="bar-surface">298      <div class="btn primary">299        <!-- fast-forward/preview icon -->300        <svg width="40" height="40" viewBox="0 0 24 24">301          <path d="M4 5l8 7-8 7V5zm9 0l8 7-8 7V5z" fill="#fff"/>302        </svg>303        Preview304      </div>305      <div class="btn">306        <!-- map icon -->307        <svg width="40" height="40" viewBox="0 0 24 24">308          <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6zm6 0v12l6 2V8L9 6z" fill="#1976D2"/>309        </svg>310        Show map311      </div>312      <div class="btn">313        <!-- pin icon -->314        <svg width="40" height="40" viewBox="0 0 24 24">315          <path d="M12 2a6 6 0 016 6c0 4.5-6 12-6 12S6 12.5 6 8a6 6 0 016-6zm0 4a3 3 0 100 6 3 3 0 000-6z" fill="#1976D2"/>316        </svg>317        Pin318      </div>319    </div>320  </div>321 322  <div class="gesture"></div>323 324</div>325</body>326</html>