GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Share Live Progress UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #f3f3f5;18    border-radius: 30px;19    box-shadow: 0 10px 40px rgba(0,0,0,0.25);20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #0a0a0a;30    color: #fff;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35    font-weight: 600;36    letter-spacing: 0.5px;37  }38  .status-left { font-size: 44px; }39  .status-right {40    margin-left: auto;41    display: flex;42    align-items: center;43    gap: 22px;44  }45  .status-dot {46    width: 14px; height: 14px; background: #fff; border-radius: 50%;47    opacity: 0.85;48  }49  .battery {50    width: 54px; height: 28px; border: 3px solid #fff; border-radius: 6px; position: relative;51  }52  .battery::after {53    content: "";54    position: absolute; right: -10px; top: 6px;55    width: 8px; height: 16px; background: #fff; border-radius: 2px;56  }57  .battery-level {58    position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px;59    background: #9fe37d;60    border-radius: 2px;61  }62 63  /* Map background */64  .map-area {65    position: absolute;66    top: 120px;67    left: 0;68    right: 0;69    bottom: 0;70    background: #e6e6e6;71  }72  .map-placeholder {73    position: absolute;74    inset: 0;75    background: linear-gradient(180deg, #eaeaea, #e1e1e1);76    color: #757575;77    display: flex;78    align-items: center;79    justify-content: center;80    font-size: 40px;81    border-top: 1px solid #d5d5d5;82  }83 84  /* Floating buttons */85  .fab {86    position: absolute;87    width: 108px;88    height: 108px;89    border-radius: 54px;90    background: #ffffff;91    box-shadow: 0 8px 20px rgba(0,0,0,0.15);92    display: flex;93    align-items: center;94    justify-content: center;95  }96  .fab svg { width: 56px; height: 56px; }97  .fab.back { top: 180px; left: 36px; }98  .fab.star { right: 36px; top: 240px; }99  .fab.share { right: 36px; top: 380px; }100  .fab.target { right: 36px; top: 520px; }101  .fab.car { right: 36px; top: 660px; }102 103  /* Info pill on map */104  .info-pill {105    position: absolute;106    top: 290px;107    left: 160px;108    background: rgba(255,255,255,0.95);109    color: #333;110    border-radius: 36px;111    box-shadow: 0 6px 20px rgba(0,0,0,0.12);112    padding: 26px 34px;113    font-size: 40px;114  }115 116  /* Bottom sheet */117  .sheet {118    position: absolute;119    left: 30px;120    right: 30px;121    bottom: 0;122    height: 1460px;123    background: #ffffff;124    border-radius: 28px 28px 0 0;125    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);126    padding: 40px 40px 60px;127    box-sizing: border-box;128  }129  .sheet-title {130    font-size: 74px;131    color: #6c4bb0;132    font-weight: 800;133    letter-spacing: 0.5px;134    margin-bottom: 36px;135  }136  .map-preview {137    width: 100%;138    height: 540px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    border-radius: 16px;142    display: flex;143    align-items: center;144    justify-content: center;145    color: #757575;146    font-size: 38px;147  }148 149  .arrival-card {150    margin-top: 28px;151    width: 100%;152    background: #4CAF50;153    color: #fff;154    border-radius: 22px;155    padding: 40px;156    box-sizing: border-box;157    position: relative;158  }159  .arrival-card .small {160    font-size: 44px;161    opacity: 0.95;162  }163  .arrival-card .big {164    font-size: 96px;165    font-weight: 800;166    margin-top: 18px;167  }168  .arrival-card .link {169    margin-top: 26px;170    font-size: 38px;171    color: #eaffea;172    opacity: 0.95;173  }174  .arrival-pointer {175    position: absolute;176    bottom: -22px;177    left: 80px;178    width: 34px;179    height: 34px;180    background: #4CAF50;181    transform: rotate(45deg);182  }183 184  /* Share apps */185  .apps {186    margin-top: 80px;187    display: grid;188    grid-template-columns: repeat(4, 1fr);189    gap: 36px 20px;190  }191  .app {192    display: flex;193    flex-direction: column;194    align-items: center;195    gap: 18px;196  }197  .app-icon {198    width: 160px;199    height: 160px;200    border-radius: 32px;201    background: #ffffff;202    box-shadow: 0 6px 16px rgba(0,0,0,0.1);203    display: flex;204    align-items: center;205    justify-content: center;206  }207  .app-label {208    font-size: 36px;209    color: #333;210    letter-spacing: 0.4px;211  }212 213  /* Simple nav bar */214  .home-indicator {215    position: absolute;216    bottom: 18px;217    left: 50%;218    transform: translateX(-50%);219    width: 320px;220    height: 16px;221    background: #1f1f1f;222    border-radius: 10px;223    opacity: 0.75;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <!-- Status Bar -->231  <div class="status-bar">232    <div class="status-left">9:03</div>233    <div class="status-right">234      <span style="font-size:36px;">🏃</span>235      <span class="status-dot"></span>236      <span style="font-size:36px;">📧</span>237      <span class="status-dot"></span>238      <span style="font-size:36px;">📶</span>239      <div class="battery"><div class="battery-level"></div></div>240    </div>241  </div>242 243  <!-- Map background -->244  <div class="map-area">245    <div class="map-placeholder">[IMG: City Map Background]</div>246  </div>247 248  <!-- Back button -->249  <div class="fab back">250    <svg viewBox="0 0 24 24">251      <path d="M15 5l-7 7 7 7" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>252    </svg>253  </div>254 255  <!-- Vertical action buttons -->256  <div class="fab star">257    <svg viewBox="0 0 24 24">258      <path d="M12 2l3.1 6.5 7 .9-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-.9L12 2z" fill="#3b3b3b"/>259    </svg>260  </div>261  <div class="fab share">262    <svg viewBox="0 0 24 24">263      <circle cx="6" cy="12" r="3" fill="#444"/>264      <circle cx="18" cy="6" r="3" fill="#444"/>265      <circle cx="18" cy="18" r="3" fill="#444"/>266      <path d="M8.7 11.2l6.2-3.1M8.7 12.8l6.2 3.1" stroke="#444" stroke-width="2" fill="none"/>267    </svg>268  </div>269  <div class="fab target">270    <svg viewBox="0 0 24 24">271      <circle cx="12" cy="12" r="8" stroke="#333" stroke-width="2" fill="none"/>272      <circle cx="12" cy="12" r="3" fill="#333"/>273      <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#333" stroke-width="2"/>274    </svg>275  </div>276  <div class="fab car">277    <svg viewBox="0 0 24 24">278      <rect x="4" y="9" width="16" height="6" rx="2" fill="#333"/>279      <rect x="6" y="7" width="12" height="3" rx="1" fill="#333"/>280      <circle cx="7" cy="17" r="2" fill="#333"/>281      <circle cx="17" cy="17" r="2" fill="#333"/>282    </svg>283  </div>284 285  <!-- Info pill -->286  <div class="info-pill">Next - 9:17 AM, 9:37 AM</div>287 288  <!-- Bottom sheet content -->289  <div class="sheet">290    <div class="sheet-title">Share live progress</div>291 292    <div class="map-preview">[IMG: Google Map with Start/End Pins]</div>293 294    <div class="arrival-card">295      <div class="small">I will arrive in</div>296      <div class="big">242 min</div>297      <div class="link">https://citymapper.com/eta/T891hqqx5oq</div>298      <div class="arrival-pointer"></div>299    </div>300 301    <div class="apps">302      <div class="app">303        <div class="app-icon">304          <svg viewBox="0 0 24 24" width="76" height="76">305            <rect x="3" y="5" width="18" height="14" rx="3" fill="#4385f5"/>306            <rect x="5" y="7" width="14" height="10" rx="2" fill="#ffffff"/>307          </svg>308        </div>309        <div class="app-label">MESSAGES</div>310      </div>311 312      <div class="app">313        <div class="app-icon">314          <svg viewBox="0 0 24 24" width="90" height="90">315            <path d="M3 6l9 7 9-7v12H3z" fill="#e94235"/>316            <path d="M3 6l9 7 9-7" stroke="#fbbf24" stroke-width="3" fill="none"/>317          </svg>318        </div>319        <div class="app-label">GMAIL</div>320      </div>321 322      <div class="app">323        <div class="app-icon">324          <svg viewBox="0 0 24 24" width="90" height="90">325            <circle cx="12" cy="12" r="9" fill="#fbbc05"/>326            <path d="M12 3a9 9 0 019 9H12z" fill="#4285f4"/>327            <path d="M3 12a9 9 0 019-9v9z" fill="#34a853"/>328            <path d="M12 12l6.5 6.5" stroke="#ea4335" stroke-width="3"/>329          </svg>330        </div>331        <div class="app-label">CHROME</div>332      </div>333 334      <div class="app">335        <div class="app-icon">336          <svg viewBox="0 0 24 24" width="90" height="90">337            <path d="M12 3l9 9-9 9-9-9z" fill="#34a853"/>338            <path d="M12 3l9 9H12z" fill="#4285f4"/>339            <path d="M12 21l-9-9h9z" fill="#fbbc05"/>340          </svg>341        </div>342        <div class="app-label">DRIVE</div>343      </div>344    </div>345  </div>346 347  <!-- Home indicator -->348  <div class="home-indicator"></div>349</div>350</body>351</html>