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>Share Live Progress UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, sans-serif;13    color: #222;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #d8d8d8;21    border-radius: 0;22  }23 24  /* Background map placeholder covering the whole screen */25  .map-bg {26    position: absolute;27    left: 0; top: 0;28    width: 100%; height: 100%;29    background: #E0E0E0;30    border: 1px solid #BDBDBD;31    display: flex;32    align-items: center;33    justify-content: center;34    color: #757575;35    font-size: 40px;36    letter-spacing: 0.5px;37  }38 39  /* Dim overlay when bottom sheet is open */40  .dim {41    position: absolute;42    left: 0; top: 0;43    width: 100%; height: 100%;44    background: rgba(0,0,0,0.35);45    pointer-events: none;46  }47 48  /* Android status bar */49  .statusbar {50    position: absolute;51    top: 0; left: 0;52    width: 100%; height: 140px;53    background: #000;54    color: #fff;55    padding: 0 36px;56    box-sizing: border-box;57    display: flex;58    align-items: center;59    justify-content: space-between;60    z-index: 5;61  }62  .status-left, .status-right {63    display: flex;64    align-items: center;65    gap: 22px;66    font-size: 40px;67  }68  .status-icon svg {69    width: 44px; height: 44px;70    fill: none; stroke: #fff; stroke-width: 2.5;71  }72 73  /* Floating controls on map */74  .circle-btn {75    position: absolute;76    width: 120px; height: 120px;77    background: #ffffff;78    border-radius: 60px;79    box-shadow: 0 6px 20px rgba(0,0,0,0.18);80    display: flex; align-items: center; justify-content: center;81    z-index: 6;82  }83  .circle-btn svg {84    width: 56px; height: 56px;85  }86 87  /* Top info pill */88  .info-pill {89    position: absolute;90    top: 220px; left: 170px;91    width: 740px; height: 130px;92    background: #fff;93    border-radius: 65px;94    box-shadow: 0 10px 30px rgba(0,0,0,0.22);95    display: flex; align-items: center; justify-content: space-between;96    padding: 0 40px;97    z-index: 7;98  }99  .pill-text {100    font-size: 46px;101    font-weight: 700;102    color: #333;103    display: flex; align-items: baseline; gap: 16px;104  }105  .pill-text .small {106    font-size: 30px; font-weight: 600; color: #666;107  }108  .share-ico svg {109    width: 60px; height: 60px;110    stroke: #6f568c; fill: none; stroke-width: 3;111  }112 113  /* Bottom sheet */114  .sheet {115    position: absolute;116    left: 36px; right: 36px;117    bottom: 145px;118    background: #fff;119    border-radius: 28px;120    box-shadow: 0 -10px 40px rgba(0,0,0,0.35);121    z-index: 8;122    padding: 36px 36px 28px;123  }124  .sheet-title {125    text-align: center;126    font-size: 64px;127    font-weight: 800;128    color: #7a4f9c;129    margin: 8px 0 28px;130  }131  .img-placeholder {132    width: 100%;133    height: 460px;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    color: #757575;137    display: flex; align-items: center; justify-content: center;138    font-size: 34px;139    border-radius: 12px 12px 0 0;140  }141 142  .arrival-bubble {143    position: relative;144    background: #59a548;145    border-radius: 0 0 28px 28px;146    padding: 48px 40px 56px;147    color: #fff;148    text-align: center;149  }150  .arrival-bubble .sub {151    font-size: 44px;152    font-weight: 700;153    margin-bottom: 12px;154  }155  .arrival-bubble .eta {156    font-size: 76px;157    font-weight: 900;158    margin: 8px 0 16px;159  }160  .arrival-bubble .link {161    font-size: 34px;162    opacity: 0.95;163  }164  /* Pointer notch */165  .arrival-bubble:after {166    content: "";167    position: absolute;168    left: 50%;169    bottom: -18px;170    transform: translateX(-50%);171    width: 0; height: 0;172    border-left: 22px solid transparent;173    border-right: 22px solid transparent;174    border-top: 22px solid #59a548;175  }176 177  /* Share options */178  .share-row {179    display: flex;180    justify-content: space-around;181    padding: 56px 20px 32px;182  }183  .share-item {184    width: 200px;185    text-align: center;186  }187  .share-icon {188    width: 120px; height: 120px;189    border-radius: 60px;190    background: #f5f5f5;191    border: 1px solid #d0d0d0;192    margin: 0 auto 18px;193    display: flex; align-items: center; justify-content: center;194  }195  .share-label {196    font-size: 28px;197    letter-spacing: 1px;198    color: #444;199  }200 201  /* Bottom navigation bar */202  .nav-bar {203    position: absolute;204    bottom: 0; left: 0;205    width: 100%; height: 130px;206    background: #000;207    z-index: 9;208    display: flex; align-items: center; justify-content: center;209  }210  .home-handle {211    width: 220px; height: 14px;212    background: #fff; border-radius: 7px;213    opacity: 0.95;214  }215</style>216</head>217<body>218<div id="render-target">219 220  <!-- Background map placeholder -->221  <div class="map-bg">[IMG: City map background]</div>222  <div class="dim"></div>223 224  <!-- Status bar -->225  <div class="statusbar">226    <div class="status-left">227      <div style="font-weight: 700;">6:07</div>228      <div class="status-icon">229        <!-- simple square icon -->230        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#fff"/></svg>231      </div>232      <div class="status-icon">233        <!-- calm moon icon -->234        <svg viewBox="0 0 24 24"><path d="M15 3a8 8 0 1 0 6 14.5A9 9 0 0 1 15 3z" fill="none" stroke="#fff"/></svg>235      </div>236      <div class="status-icon">237        <!-- message M icon -->238        <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4z" fill="none" stroke="#fff"/></svg>239      </div>240      <div class="status-icon">241        <!-- dot -->242        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>243      </div>244    </div>245    <div class="status-right">246      <div class="status-icon">247        <!-- location pin -->248        <svg viewBox="0 0 24 24"><path d="M12 3a7 7 0 0 1 7 7c0 5-7 11-7 11s-7-6-7-11a7 7 0 0 1 7-7z" fill="none" stroke="#fff"/><circle cx="12" cy="10" r="2.8" fill="none" stroke="#fff"/></svg>249      </div>250      <div class="status-icon">251        <!-- wifi -->252        <svg viewBox="0 0 24 24"><path d="M3 9c4.5-4 13.5-4 18 0M6 12c3-2.5 9-2.5 12 0M9 15c1.5-1 4.5-1 6 0M12 18h0" fill="none" stroke="#fff" stroke-linecap="round"/></svg>253      </div>254      <div class="status-icon">255        <!-- battery -->256        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="17" height="12" rx="2" fill="none" stroke="#fff"/><rect x="21" y="10" width="2" height="4" fill="#fff"/></svg>257      </div>258    </div>259  </div>260 261  <!-- Back button -->262  <div class="circle-btn" style="top: 240px; left: 40px;">263    <svg viewBox="0 0 24 24">264      <path d="M15 18l-6-6 6-6" stroke="#4b4b4b" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265    </svg>266  </div>267 268  <!-- Info pill -->269  <div class="info-pill">270    <div class="pill-text">271      <span>117 min</span>272      <span class="small">/ 12:35</span>273    </div>274    <div class="share-ico">275      <svg viewBox="0 0 24 24">276        <circle cx="6" cy="12" r="2.5" stroke="#6f568c"/><circle cx="18" cy="6" r="2.5" stroke="#6f568c"/><circle cx="18" cy="18" r="2.5" stroke="#6f568c"/>277        <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#6f568c" stroke-linecap="round"/>278      </svg>279    </div>280  </div>281 282  <!-- Left middle message bubble -->283  <div class="circle-btn" style="top: 620px; left: 48px;">284    <svg viewBox="0 0 24 24">285      <path d="M4 4h16v11H9l-5 5z" fill="none" stroke="#3b3b3b" stroke-width="2.2" stroke-linejoin="round"/>286      <circle cx="9" cy="9.5" r="1.2" fill="#3b3b3b"/>287      <circle cx="13" cy="9.5" r="1.2" fill="#3b3b3b"/>288      <circle cx="17" cy="9.5" r="1.2" fill="#3b3b3b"/>289    </svg>290  </div>291 292  <!-- Right top close and mute -->293  <div class="circle-btn" style="top: 240px; right: 40px; background:#fff;">294    <svg viewBox="0 0 24 24">295      <path d="M6 6L18 18M18 6L6 18" stroke="#c84b4b" stroke-width="3" stroke-linecap="round"/>296    </svg>297  </div>298  <div class="circle-btn" style="top: 420px; right: 40px; background:#fff;">299    <svg viewBox="0 0 24 24">300      <path d="M4 10v4l4 3V7l-4 3zM12 8v8" stroke="#557a9a" stroke-width="2.2" fill="none"/>301      <path d="M15 9l5 6" stroke="#557a9a" stroke-width="2.2" stroke-linecap="round"/>302    </svg>303  </div>304 305  <!-- Bottom sheet -->306  <div class="sheet">307    <div class="sheet-title">Share live progress</div>308 309    <div class="img-placeholder">[IMG: Map preview with route Start → End]</div>310 311    <div class="arrival-bubble">312      <div class="sub">I will arrive in</div>313      <div class="eta">117 min</div>314      <div class="link">https://citymapper.com/eta/T6coibwh5ji</div>315    </div>316 317    <div class="share-row">318      <div class="share-item">319        <div class="share-icon">320          <!-- Gmail simplified -->321          <svg viewBox="0 0 24 24" width="72" height="72">322            <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#d23f31" stroke-width="2"/>323            <path d="M4 6l8 6 8-6" fill="none" stroke="#4285f4" stroke-width="2"/>324          </svg>325        </div>326        <div class="share-label">GMAIL</div>327      </div>328 329      <div class="share-item">330        <div class="share-icon">331          <!-- Messages bubble -->332          <svg viewBox="0 0 24 24" width="70" height="70">333            <path d="M4 5h16v10H10l-4 4v-4H4z" fill="none" stroke="#4285f4" stroke-width="2"/>334          </svg>335        </div>336        <div class="share-label">MESSAGES</div>337      </div>338 339      <div class="share-item">340        <div class="share-icon" style="background:#111; border-color:#111;">341          <!-- X logo -->342          <svg viewBox="0 0 24 24" width="70" height="70">343            <path d="M5 4l14 16M19 4L5 20" stroke="#fff" stroke-width="3" stroke-linecap="round"/>344          </svg>345        </div>346        <div class="share-label">POST</div>347      </div>348 349      <div class="share-item">350        <div class="share-icon" style="background:#111; border-color:#111;">351          <!-- X DM -->352          <svg viewBox="0 0 24 24" width="70" height="70">353            <path d="M5 4l14 16M19 4L5 20" stroke="#fff" stroke-width="3" stroke-linecap="round"/>354          </svg>355        </div>356        <div class="share-label">DIRECT MESSAGE</div>357      </div>358    </div>359  </div>360 361  <!-- Bottom navigation bar -->362  <div class="nav-bar"><div class="home-handle"></div></div>363 364</div>365</body>366</html>