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 UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #2b2b2b; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 92px;17    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;18    color: #222; font-size: 34px;19  }20  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }21  .icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }22  .battery {23    width: 78px; height: 36px; border: 3px solid #222; border-radius: 8px; position: relative;24  }25  .battery::after { content: ""; position: absolute; right: -12px; top: 10px; width: 8px; height: 16px; background: #222; border-radius: 2px; }26  .battery .level { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 60px; background: #2ecc71; border-radius: 5px; }27 28  /* Map placeholder */29  .map {30    position: absolute; top: 92px; left: 0; width: 1080px; height: 1510px;31    background: #E0E0E0; border: 1px solid #BDBDBD; box-sizing: border-box;32    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;33  }34  .google-watermark {35    position: absolute; bottom: 160px; left: 28px; color: #676767; font-size: 36px; font-weight: 600;36  }37 38  /* Floating controls */39  .fab {40    position: absolute; width: 124px; height: 124px; border-radius: 50%;41    background: #ffffff; box-shadow: 0 6px 18px rgba(0,0,0,0.18);42    display: flex; align-items: center; justify-content: center;43  }44  .fab svg { width: 60px; height: 60px; stroke: #6d6d6d; }45  .fab.back { left: 36px; top: 168px; }46  .fab.star { right: 36px; top: 250px; }47  .fab.share { right: 36px; top: 400px; }48  .fab.target { right: 36px; top: 550px; }49  .fab.traffic { right: 36px; top: 700px; }50 51  /* Start/End markers */52  .marker {53    position: absolute; display: inline-flex; align-items: center; gap: 12px;54    padding: 10px 18px; background: #48B14C; color: #fff; border-radius: 12px; font-weight: 700; font-size: 36px;55    box-shadow: 0 6px 12px rgba(0,0,0,0.15);56  }57  .marker.start { right: 160px; top: 640px; }58  .marker.end { left: 220px; top: 520px; }59  .bus-badge {60    position: absolute; width: 86px; height: 86px; background: #6A5F39; border-radius: 10px;61    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px;62    box-shadow: 0 6px 10px rgba(0,0,0,0.12);63  }64  .bus-badge.start { right: 160px; top: 720px; }65  .bus-badge.mid { right: 320px; top: 820px; }66  .bus-badge.end { left: 220px; top: 600px; }67 68  /* GO button */69  .go-btn {70    position: absolute; right: 40px; top: 1200px;71    width: 360px; height: 160px; border-radius: 80px; background: #4CAF50;72    display: flex; align-items: center; justify-content: center; gap: 26px;73    color: #ffffff; font-weight: 800; font-size: 64px; letter-spacing: 1px;74    box-shadow: 0 12px 26px rgba(0,0,0,0.22);75  }76  .go-btn svg { width: 64px; height: 64px; }77 78  /* Bottom sheet summary */79  .sheet {80    position: absolute; left: 0; top: 1600px; width: 100%; height: 800px;81    background: #ffffff; border-top-left-radius: 28px; border-top-right-radius: 28px;82    box-shadow: 0 -10px 24px rgba(0,0,0,0.12);83    padding: 28px 32px; box-sizing: border-box;84  }85  .chips { display: flex; gap: 18px; align-items: center; }86  .chip {87    display: inline-flex; align-items: center; gap: 14px;88    border: 1px solid #d0d0d0; border-radius: 12px; padding: 16px 22px; font-size: 36px; color: #333; background: #fafafa;89  }90  .chip .mode {91    width: 44px; height: 44px; border-radius: 8px; background: #e9eef6; display: flex; align-items: center; justify-content: center;92  }93  .chip.bus .mode { background: #e6f0ff; }94  .summary-right {95    margin-left: auto; display: flex; align-items: center; gap: 36px; font-size: 40px;96  }97  .price { color: #2E7AD9; font-weight: 700; }98  .duration { color: #222; font-weight: 700; }99  .time-row {100    margin-top: 18px; font-size: 38px; color: #555; display: flex; justify-content: space-between;101  }102  .time-row strong { color: #222; }103 104  .section {105    margin-top: 34px; background: #f7f7f7; border-radius: 18px; padding: 26px; box-sizing: border-box;106  }107  .step {108    display: flex; align-items: center; justify-content: space-between; font-size: 44px; color: #2E7AD9; font-weight: 700;109  }110  .step .left { display: flex; align-items: center; gap: 20px; }111  .step .right { color: #777; font-weight: 600; }112  .divider { height: 2px; background: #e5e5e5; margin: 28px -26px 20px; }113 114  .bus-line {115    display: flex; align-items: center; justify-content: space-between; font-size: 44px; color: #333; font-weight: 700; padding: 10px 0;116  }117  .bus-line .left { display: flex; align-items: center; gap: 22px; }118  .bus-line .freq { color: #6d6d6d; font-weight: 600; }119  .chevron { width: 42px; height: 42px; }120 121  .pill {122    margin-top: 18px; background: #ffffff; border: 1px solid #e1e1e1; border-radius: 26px;123    box-shadow: 0 6px 14px rgba(0,0,0,0.08); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; font-size: 40px;124  }125  .pill .left { display: flex; align-items: center; gap: 18px; color: #333; font-weight: 700; }126  .pill .right { color: #6d6d6d; font-weight: 600; }127 128  /* Ad area */129  .ad-strip {130    position: absolute; left: 0; bottom: 0; width: 100%; height: 260px;131    background: #f0f0f0; border-top: 1px solid #d6d6d6; display: flex; padding: 16px; box-sizing: border-box; gap: 18px;132  }133  .ad {134    flex: 1; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px;135  }136  .ad.cta { flex: 0 0 280px; border-radius: 22px; position: relative; }137  .open-btn {138    position: absolute; right: 20px; bottom: 20px; background: #37b24d; color: #fff; padding: 14px 28px; border-radius: 22px; font-weight: 800; font-size: 34px;139    box-shadow: 0 6px 12px rgba(0,0,0,0.14);140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="status-bar">148    <div>10:08</div>149    <div class="status-right">150      <span class="icon">151        <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M2 12a10 10 0 0 1 20 0"/></svg>152      </span>153      <span class="icon">154        <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2"><path d="M3 18l6-6 4 4 8-8"/></svg>155      </span>156      <span>100%</span>157      <div class="battery"><div class="level"></div></div>158    </div>159  </div>160 161  <!-- Map area -->162  <div class="map">[IMG: Map with transit route]</div>163  <div class="google-watermark">Google</div>164 165  <!-- Floating controls -->166  <div class="fab back">167    <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>168  </div>169  <div class="fab star">170    <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2"><path d="M12 17l-5 3 2-6-5-4 6-1 2-6 2 6 6 1-5 4 2 6z"/></svg>171  </div>172  <div class="fab share">173    <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8 12l7-5M8 12l7 7"/></svg>174  </div>175  <div class="fab target">176    <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2"><circle cx="12" cy="12" r="7"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>177  </div>178  <div class="fab traffic">179    <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2"><rect x="7" y="2" width="10" height="20" rx="3"/><circle cx="12" cy="7" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="17" r="2"/></svg>180  </div>181 182  <!-- Start/End markers -->183  <div class="marker end">End</div>184  <div class="bus-badge end">185    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>186  </div>187 188  <div class="marker start">Start</div>189  <div class="bus-badge start">190    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>191  </div>192  <div class="bus-badge mid">193    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>194  </div>195 196  <!-- GO -->197  <div class="go-btn">198    GO199    <svg viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>200  </div>201 202  <!-- Bottom sheet -->203  <div class="sheet">204    <div class="chips">205      <div class="chip">206        <div class="mode">207          <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><path d="M6 12l3-6 3 6M4 18h4M16 18h4"/></svg>208        </div>209        19210      </div>211      <div class="chip bus">212        <div class="mode">213          <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>214        </div>215        576C-10216      </div>217      <div class="chip bus">218        <div class="mode">219          <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>220        </div>221        5701-10222      </div>223      <div class="chip">224        <div class="mode">225          <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><path d="M6 12l3-6 3 6M4 18h4M16 18h4"/></svg>226        </div>227        5228      </div>229      <div class="summary-right">230        <div class="price">R$4.40</div>231        <div class="duration">70 min</div>232      </div>233    </div>234 235    <div class="time-row">236      <div>Leave <strong>tomorrow 8:00 PM</strong></div>237      <div>Arrive <strong>9:10 PM</strong></div>238    </div>239 240    <div class="section">241      <div class="step">242        <div class="left">243          <div class="mode" style="width:52px;height:52px;border-radius:12px;background:#e6f0ff;">244            <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><path d="M6 12l3-6 3 6M4 18h4M16 18h4"/></svg>245          </div>246          <span>Walk to <span style="color:#2E7AD9">R. Ouricana</span></span>247        </div>248        <div class="right">19 min</div>249      </div>250 251      <div class="divider"></div>252 253      <div class="bus-line">254        <div class="left">255          <div class="mode" style="width:52px;height:52px;border-radius:12px;background:#e6f0ff;">256            <svg viewBox="0 0 24 24" fill="none" stroke="#2E7AD9" stroke-width="2"><rect x="5" y="5" width="14" height="12" rx="2"/><path d="M7 17v2M17 17v2"/></svg>257          </div>258          <span>576C-10 - Term. Sto. Amaro</span>259        </div>260        <div class="freq">Every 15–20 min</div>261        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>262      </div>263 264      <div class="pill">265        <div class="left">266          <span>Term. Sto. Amaro</span>267        </div>268        <div class="right">Every 15–20 min</div>269      </div>270    </div>271  </div>272 273  <!-- Ad area -->274  <div class="ad-strip">275    <div class="ad">[IMG: App Ad Banner]</div>276    <div class="ad">[IMG: Booking.com Promo]</div>277    <div class="ad cta">[IMG: Ad]278      <div class="open-btn">Open</div>279    </div>280  </div>281 282</div>283</body>284</html>