GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Share Listing</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #fff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 100%;22    height: 110px;23    padding: 0 32px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-weight: 600;30    font-size: 42px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .status-icon {38    width: 44px; height: 44px;39  }40 41  /* Header */42  .header {43    position: absolute;44    top: 110px;45    left: 0;46    width: 100%;47    height: 120px;48    display: flex;49    align-items: center;50    padding: 0 28px;51    box-sizing: border-box;52    gap: 20px;53  }54  .back-btn {55    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;56  }57  .title { font-size: 64px; font-weight: 700; margin-left: 6px; }58  .header-icons {59    margin-left: auto;60    display: flex;61    gap: 22px;62  }63  .circle-btn {64    width: 88px; height: 88px;65    border-radius: 44px;66    background: rgba(255,255,255,0.08);67    display: flex; align-items: center; justify-content: center;68  }69  .circle-btn svg { width: 44px; height: 44px; fill: #fff; }70 71  /* Image area */72  .image-area {73    position: absolute;74    top: 230px;75    left: 0;76    width: 100%;77    height: 1050px;78  }79  .product-image {80    position: absolute;81    top: 140px;82    left: 0;83    width: 100%;84    height: 760px;85    background: #E0E0E0;86    border: 1px solid #BDBDBD;87    display: flex; align-items: center; justify-content: center;88    color: #333; font-size: 42px; font-weight: 600;89  }90  .watch-pill {91    position: absolute;92    top: 40px; left: 24px;93    background: #912a2a;94    color: #fff;95    padding: 18px 28px;96    border-radius: 40px;97    font-size: 36px;98    font-weight: 700;99  }100  .count-text {101    position: absolute;102    top: 48px; right: 30px;103    color: #fff;104    font-size: 36px;105    opacity: 0.8;106  }107  .dots {108    position: absolute;109    bottom: 110px;110    left: 0; right: 0;111    display: flex; justify-content: center; gap: 18px;112  }113  .dot {114    width: 16px; height: 16px; border-radius: 50%; background: #7a7a7a;115  }116  .dot.active { background: #ffffff; }117  .heart-fab {118    position: absolute;119    right: 36px;120    bottom: 40px;121    width: 140px; height: 140px;122    border-radius: 70px;123    background: rgba(255,255,255,0.08);124    display: flex; align-items: center; justify-content: center;125  }126  .heart-fab svg { width: 64px; height: 64px; fill: #fff; }127 128  /* Bottom sheet */129  .bottom-sheet {130    position: absolute;131    left: 0;132    bottom: 0;133    width: 100%;134    height: 980px;135    background: #121212;136    border-top-left-radius: 42px;137    border-top-right-radius: 42px;138    box-shadow: 0 -12px 32px rgba(0,0,0,0.5);139    padding: 26px 44px;140    box-sizing: border-box;141  }142  .grabber {143    width: 150px; height: 14px; border-radius: 7px; background: #2a2a2a;144    margin: 6px auto 30px;145  }146  .sheet-title {147    font-size: 60px; font-weight: 800; margin-bottom: 40px;148  }149  .listing-row {150    display: flex; align-items: flex-start; gap: 28px; margin-bottom: 42px;151  }152  .thumb {153    width: 190px; height: 170px; background: #E0E0E0; border: 1px solid #BDBDBD;154    display: flex; align-items: center; justify-content: center; color: #555; font-weight: 700;155  }156  .listing-text {157    font-size: 44px; line-height: 1.25; color: #f0f0f0;158    max-width: 740px;159  }160  .section-title {161    font-size: 46px; font-weight: 700; margin: 20px 0 24px;162  }163  .share-grid { display: flex; gap: 80px; padding-top: 8px; }164  .share-btn {165    width: 170px; height: 170px; border-radius: 85px;166    display: flex; align-items: center; justify-content: center;167  }168  .share-btn svg { width: 80px; height: 80px; fill: #fff; }169  .label {170    text-align: center; margin-top: 18px; font-size: 40px; color: #ddd;171  }172  .actions-title {173    position: absolute;174    bottom: 120px; left: 44px;175    font-size: 56px; font-weight: 800;176  }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    bottom: 26px; left: 50%;182    width: 360px; height: 12px;183    background: #cccccc;184    border-radius: 6px;185    transform: translateX(-50%);186    opacity: 0.9;187  }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status Bar -->194  <div class="status-bar">195    <div class="time">12:36</div>196    <div class="status-right">197      <!-- Wi-Fi -->198      <svg class="status-icon" viewBox="0 0 24 24">199        <path fill="#ffffff" d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-8.8-9.7C6 6 9.9 6 12 6s6 .1 8.8 2.8l-1.9 1.9C16.4 8.1 14.4 8 12 8s-4.4.1-6.9 3.2L3.2 8.8z"/>200      </svg>201      <!-- Battery -->202      <svg class="status-icon" viewBox="0 0 24 24">203        <path fill="#ffffff" d="M17 6h2v3h2v6h-2v3h-2V6zM3 7h12v10H3V7z"/>204      </svg>205    </div>206  </div>207 208  <!-- Header -->209  <div class="header">210    <div class="back-btn">211      <svg viewBox="0 0 24 24">212        <path fill="#ffffff" d="M15.5 19L8.5 12l7-7-2-2-9 9 9 9 2-2z"/>213      </svg>214    </div>215    <div class="title">Item</div>216    <div class="header-icons">217      <div class="circle-btn">218        <!-- Search -->219        <svg viewBox="0 0 24 24">220          <path d="M10 2a8 8 0 106.3 13.4l4.3 4.3 1.4-1.4-4.3-4.3A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>221        </svg>222      </div>223      <div class="circle-btn">224        <!-- Cart -->225        <svg viewBox="0 0 24 24">226          <path d="M7 6h14l-2 9H8L6 4H2v2h3l2 10h12l3-11H7zM9 20a2 2 0 11-.001 3.999A2 2 0 019 20zm8 0a2 2 0 11-.001 3.999A2 2 0 0117 20z"/>227        </svg>228      </div>229      <div class="circle-btn">230        <!-- Share -->231        <svg viewBox="0 0 24 24">232          <path d="M18 8a3 3 0 10-2.7-4.4L8.9 7.3a3 3 0 100 4.4l6.4 3.7A3 3 0 1016 14a3 3 0 00-.3 0L9.3 10.3a3.1 3.1 0 000-.6L15.7 6A3 3 0 0018 8z"/>233        </svg>234      </div>235      <div class="circle-btn">236        <!-- More -->237        <svg viewBox="0 0 24 24">238          <circle cx="12" cy="5" r="2" fill="#fff"/>239          <circle cx="12" cy="12" r="2" fill="#fff"/>240          <circle cx="12" cy="19" r="2" fill="#fff"/>241        </svg>242      </div>243    </div>244  </div>245 246  <!-- Image / Content Area -->247  <div class="image-area">248    <div class="watch-pill">2 WATCHED IN THE LAST 24 HOURS</div>249    <div class="count-text">1 of 5</div>250 251    <div class="product-image">[IMG: Orange Nike Basketball Shoe]</div>252 253    <div class="dots">254      <div class="dot active"></div>255      <div class="dot"></div>256      <div class="dot"></div>257      <div class="dot"></div>258      <div class="dot"></div>259    </div>260 261    <div class="heart-fab">262      <svg viewBox="0 0 24 24">263        <path d="M12 21s-7-4.6-9.5-8.2C.7 10.4 2.3 7 5.8 7c2.1 0 3.4 1.2 4.2 2.4.8-1.2 2.1-2.4 4.2-2.4 3.5 0 5.1 3.4 3.3 5.8C19 16.4 12 21 12 21z"/>264      </svg>265    </div>266  </div>267 268  <!-- Bottom Sheet -->269  <div class="bottom-sheet">270    <div class="grabber"></div>271    <div class="sheet-title">Share Listing</div>272 273    <div class="listing-row">274      <div class="thumb">[IMG: Shoe Thumbnail]</div>275      <div class="listing-text">276        New Nike Air Deldon Legacy Easy On Basketball Court Shoes sz mens 13 wmns 14.5277      </div>278    </div>279 280    <div class="section-title">Share To</div>281    <div class="share-grid">282      <div>283        <div class="share-btn" style="background:#4776F4;">284          <!-- SMS / Message bubble -->285          <svg viewBox="0 0 24 24">286            <path d="M20 4H4a3 3 0 00-3 3v9a3 3 0 003 3h12l4 3V7a3 3 0 00-3-3zm-2 8H6v-2h12v2zm-6 4H6v-2h6v2zm6-8H6V6h12v2z"/>287          </svg>288        </div>289        <div class="label">SMS</div>290      </div>291      <div>292        <div class="share-btn" style="background:#DB4F43;">293          <!-- Email / Envelope -->294          <svg viewBox="0 0 24 24">295            <path d="M2 6h20v12H2V6zm18 0l-8 6-8-6v0l8 6 8-6z"/>296          </svg>297        </div>298        <div class="label">Email</div>299      </div>300    </div>301 302    <div class="actions-title">Actions</div>303  </div>304 305  <!-- Home indicator -->306  <div class="home-indicator"></div>307</div>308</body>309</html>