GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Directions UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;14    color: #202124;15  }16 17  /* Top status bar */18  .statusbar {19    height: 120px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #5f6368;25    font-size: 40px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31  }32  .dot { width: 22px; height: 22px; background:#9aa0a6; border-radius:50%; display:inline-block; }33  .signal {34    width: 36px; height: 36px; border:2px solid #9aa0a6; border-radius:4px; position:relative;35  }36  .battery {37    width: 42px; height: 28px; border:2px solid #9aa0a6; border-radius:4px; position:relative;38  }39  .battery::after {40    content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#9aa0a6; border-radius:2px;41  }42 43  .content {44    padding: 0 48px;45  }46 47  /* Header time summary */48  .summary {49    padding: 20px 0 26px;50  }51  .eta {52    font-size: 72px;53    font-weight: 500;54    color: #198038; /* Google green-ish */55  }56  .subtext {57    font-size: 40px;58    color: #5f6368;59    margin-top: 18px;60  }61  .divider { height: 1px; background: #e0e0e0; margin: 24px 0; }62 63  /* Tolls card */64  .tolls {65    display: flex;66    gap: 24px;67    align-items: flex-start;68    padding: 28px 0;69  }70  .toll-icon {71    width: 64px; height: 64px; border-radius: 32px; border: 2px solid #5f6368; position: relative; display:flex; align-items:center; justify-content:center; color:#5f6368; font-weight:600;72  }73  .toll-icon::after {74    content:""; position:absolute; left:-14px; top:-14px; width:24px; height:24px; border:3px solid #5f6368; border-radius:50%;75    border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-30deg);76  }77  .toll-text .title { font-size: 44px; color:#3c4043; }78  .toll-text .note { font-size: 36px; color:#5f6368; margin-top: 8px; }79  .toll-text .link { font-size: 36px; color:#1a73e8; margin-top: 10px; }80 81  /* Traffic section */82  .section-title {83    font-size: 48px; color:#3c4043; margin-top: 10px; margin-bottom: 18px;84  }85  .traffic-chart {86    height: 180px; position: relative; padding-top: 26px;87    border-top: 1px dashed #dcdcdc;88  }89  .bars {90    display: flex; gap: 26px; align-items: flex-end;91    height: 120px;92  }93  .bar {94    width: 140px; height: 90px; background:#e9ecef; border-radius: 20px; border:1px solid #d0d7de;95  }96  .bar.green { background:#7DB587; }97  .chart-times {98    display:flex; justify-content: space-between; color:#5f6368; font-size:32px; margin-top: 16px;99    padding: 0 10px;100  }101 102  /* Steps list */103  .steps-title { font-size: 48px; color:#3c4043; margin-top: 30px; }104  .step {105    display: flex; align-items: center;106    padding: 34px 0;107    border-bottom: 1px solid #e0e0e0;108  }109  .step .icon {110    width: 96px; display:flex; justify-content:center; align-items:center;111    color:#5f6368;112  }113  .step .text {114    flex: 1;115    padding-right: 24px;116  }117  .step .text .line1 { font-size: 44px; color:#3c4043; }118  .step .text .subline {119    display:flex; align-items:center; gap:16px;120    font-size: 36px; color:#9aa0a6; margin-top: 16px;121  }122  .step .thumb {123    width: 260px; height: 140px;124    background:#E0E0E0; border:1px solid #BDBDBD;125    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;126    border-radius: 6px;127  }128 129  /* Bottom action bar */130  .bottom-actions {131    position: absolute;132    left: 0; right: 0; bottom: 140px;133    padding: 0 40px;134    display: flex; gap: 24px;135  }136  .btn {137    height: 120px; border-radius: 60px; padding: 0 46px;138    display:flex; align-items:center; gap:22px; font-size: 42px; font-weight: 500;139    border: 1px solid #d0d7de; color:#3c4043; background:#ffffff;140    box-shadow: 0 1px 2px rgba(0,0,0,0.04);141  }142  .btn.primary {143    background:#1a73e8; color:#ffffff; border-color:#1a73e8;144  }145  .gesture {146    position:absolute; bottom: 54px; left:50%; transform:translateX(-50%);147    width: 320px; height: 16px; background:#9aa0a6; border-radius: 8px; opacity:0.6;148  }149 150  /* Simple icons */151  svg { display:block }152  .icon-pin path { fill:#5f6368 }153  .icon-up, .icon-right, .icon-left { stroke:#5f6368; stroke-width:28; fill:none; stroke-linecap:round; stroke-linejoin:round; }154  .btn svg { width:48px; height:48px }155</style>156</head>157<body>158<div id="render-target">159 160  <!-- Status bar -->161  <div class="statusbar">162    <div>6:40</div>163    <div class="status-icons">164      <span class="dot"></span>165      <span class="dot"></span>166      <span class="dot"></span>167      <span class="dot"></span>168      <span class="dot"></span>169      <div class="signal"></div>170      <div class="battery"></div>171    </div>172  </div>173 174  <div class="content">175    <!-- Summary -->176    <div class="summary">177      <div class="eta">53 min (72 km)</div>178      <div class="subtext">Fastest route now due to traffic conditions</div>179    </div>180    <div class="divider"></div>181 182    <!-- Tolls -->183    <div class="tolls">184      <div class="toll-icon">1</div>185      <div class="toll-text">186        <div class="title">Tolls • ARS 200.00</div>187        <div class="note">Estimates based on toll pass rates</div>188        <div class="link">Change toll settings</div>189      </div>190    </div>191    <div class="divider"></div>192 193    <!-- Traffic section -->194    <div class="section-title">Traffic</div>195    <div class="traffic-chart">196      <div class="bars">197        <div class="bar"></div>198        <div class="bar green"></div>199        <div class="bar"></div>200        <div class="bar"></div>201        <div class="bar"></div>202      </div>203      <div class="chart-times">204        <span>6:30 PM</span>205        <span>7:30 PM</span>206        <span>8:30 PM</span>207      </div>208    </div>209    <div class="divider"></div>210 211    <!-- Steps -->212    <div class="steps-title">Steps</div>213 214    <!-- Step 1 -->215    <div class="step">216      <div class="icon">217        <svg class="icon-pin" width="64" height="64" viewBox="0 0 24 24">218          <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>219        </svg>220      </div>221      <div class="text">222        <div class="line1">Cañada de Gómez</div>223      </div>224      <div class="thumb">[IMG: Street view]</div>225    </div>226 227    <!-- Step 2 -->228    <div class="step">229      <div class="icon">230        <svg class="icon-up" width="64" height="64" viewBox="0 0 64 64">231          <path d="M32 56V12"></path>232          <path d="M18 26l14-14 14 14"></path>233        </svg>234      </div>235      <div class="text">236        <div class="line1">Head east on Aizpuru toward Schnack</div>237        <div class="subline"><span>80 m</span><span style="flex:1; height:2px; background:#e0e0e0"></span></div>238      </div>239      <div class="thumb">[IMG: Street view]</div>240    </div>241 242    <!-- Step 3 -->243    <div class="step">244      <div class="icon">245        <svg class="icon-right" width="64" height="64" viewBox="0 0 64 64">246          <path d="M12 12h22c8 0 18 8 18 16"></path>247          <path d="M40 28l12 12"></path>248        </svg>249      </div>250      <div class="text">251        <div class="line1">Turn right onto Schnack</div>252        <div class="subline"><span>90 m</span><span style="flex:1; height:2px; background:#e0e0e0"></span></div>253      </div>254      <div class="thumb">[IMG: Street view]</div>255    </div>256 257    <!-- Step 4 -->258    <div class="step">259      <div class="icon">260        <svg class="icon-left" width="64" height="64" viewBox="0 0 64 64">261          <path d="M52 12H30c-8 0-18 8-18 16"></path>262          <path d="M24 28L12 40"></path>263        </svg>264      </div>265      <div class="text">266        <div class="line1">Turn left onto Blvd. Balcarce</div>267        <div class="subline"><span>1.1 km</span><span style="flex:1; height:2px; background:#e0e0e0"></span></div>268      </div>269      <div class="thumb">[IMG: Street view]</div>270    </div>271  </div>272 273  <!-- Bottom actions -->274  <div class="bottom-actions">275    <div class="btn primary">276      <svg viewBox="0 0 24 24">277        <path fill="#ffffff" d="M6 12l6-6v4h6v4h-6v4z"/>278      </svg>279      <span>Preview</span>280    </div>281    <div class="btn">282      <svg viewBox="0 0 24 24">283        <path fill="#1a73e8" d="M12 2l9 7-9 5-9-5 9-7zm0 9l9 5-9 6-9-6 9-5z"/>284      </svg>285      <span>Show map</span>286    </div>287    <div class="btn">288      <svg viewBox="0 0 24 24">289        <path fill="#1a73e8" d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-7V9a6 6 0 1 0-12 0v6l-2 2v2h16v-2l-2-2z"/>290      </svg>291      <span>Pinned</span>292    </div>293  </div>294 295  <div class="gesture"></div>296</div>297</body>298</html>