GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock - eBay Item</title>5<meta name="viewport" content="width=1440, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width:1440px; height:3120px; position:relative; overflow:hidden;10    background:#0B0B0D; color:#fff;11  }12 13  /* Top status bar */14  .status-bar {15    position:absolute; top:0; left:0; width:100%; height:120px;16    padding:0 48px; box-sizing:border-box;17    display:flex; align-items:center; justify-content:flex-start;18    color:#DADCE0; font-size:42px;19  }20  .status-right { margin-left:auto; display:flex; gap:38px; align-items:center; }21  .icon { width:72px; height:72px; display:inline-flex; align-items:center; justify-content:center; }22  .icon svg { width:60%; height:60%; fill:#DADCE0; }23 24  /* App bar */25  .app-bar {26    position:absolute; top:120px; left:0; width:100%; height:140px;27    display:flex; align-items:center; padding:0 48px; box-sizing:border-box;28  }29  .app-title { font-size:96px; font-weight:700; margin-left:24px; }30  .app-actions { margin-left:auto; display:flex; gap:40px; }31  .circle-btn {32    width:120px; height:120px; border-radius:60px; background:#1A1C20;33    display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(255,255,255,0.06) inset;34  }35  .circle-btn svg { fill:#E5E7EB; width:56px; height:56px; }36 37  /* Seller info */38  .seller-row {39    position:absolute; top:280px; left:48px; right:48px; height:120px;40    display:flex; align-items:center; gap:34px;41  }42  .seller-logo {43    width:120px; height:120px; border-radius:24px; background:#E0E0E0; border:1px solid #BDBDBD;44    display:flex; align-items:center; justify-content:center; color:#555;45    font-size:34px;46  }47  .seller-text { font-size:48px; color:#C9C9C9; }48  .seller-text b { color:#fff; }49 50  /* Price section */51  .price-block {52    position:absolute; top:420px; left:48px; right:48px;53    display:flex; flex-direction:column; gap:36px;54  }55  .price-line { font-size:112px; font-weight:800; display:flex; align-items:baseline; gap:28px; }56  .shipping { font-size:56px; color:#AEAEAE; }57  .delivery { font-size:60px; color:#CFCFCF; }58  .subtle { color:#9FA3A7; }59 60  /* Info rows */61  .info-row {62    display:flex; align-items:center; justify-content:space-between;63    padding:28px 0; border-bottom:1px solid #222;64    font-size:60px;65  }66  .info-left { color:#CFCFCF; }67  .info-right { display:flex; align-items:center; gap:28px; color:#fff; }68 69  .dropdown {70    border:1px solid #2E2E2E; border-radius:24px; height:140px;71    padding:0 40px; display:flex; align-items:center; justify-content:space-between; margin-top:24px;72    font-size:64px; color:#fff;73  }74  .caret { width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:26px solid #CFCFCF; }75 76  /* Buttons */77  .btn-primary {78    margin-top:48px; height:168px; border-radius:84px; font-size:72px; font-weight:800;79    background:#87A6FF; color:#0B0B0D; text-align:center; line-height:168px;80  }81  .btn-outline {82    margin-top:36px; height:168px; border-radius:84px; font-size:72px; font-weight:700;83    border:4px solid #8FB0FF; color:#8FB0FF; text-align:center; line-height:168px;84  }85 86  /* Callouts */87  .callouts { position:absolute; left:48px; right:48px; top:1520px; display:flex; flex-direction:column; gap:36px; }88  .callout {89    background:#14161A; border-radius:36px; padding:48px; display:flex; align-items:center; gap:40px;90    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);91  }92  .callout .label { font-size:60px; }93  .callout .muted { color:#CFCFCF; font-size:60px; }94  .badge {95    width:120px; height:120px; border-radius:60px; background:#1F2329; display:flex; align-items:center; justify-content:center;96  }97  .badge svg { width:64px; height:64px; fill:#9FD3FF; }98 99  /* About section */100  .about {101    position:absolute; top:1800px; left:48px; right:48px;102  }103  .about h2 { font-size:96px; margin:0 0 36px 0; }104  .about-row {105    display:flex; justify-content:space-between; padding:24px 0; border-bottom:1px solid #212121;106    font-size:60px; color:#D9D9D9;107  }108  .about-row b { color:#fff; }109 110  /* Bottom nav */111  .bottom-nav {112    position:absolute; left:0; bottom:0; width:100%; height:240px; background:#0F1115;113    display:flex; align-items:center; justify-content:space-around; border-top:1px solid #1F1F1F;114  }115  .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#CFCFCF; font-size:48px; }116  .nav-icon {117    width:120px; height:120px; border-radius:60px; background:#14161B; display:flex; align-items:center; justify-content:center;118  }119  .nav-icon svg { width:60px; height:60px; fill:#DADCE0; }120  .nav-active .nav-icon { background:#2744FF; }121  .nav-active .nav-icon svg { fill:#fff; }122  .nav-active { color:#88A8FF; }123 124  /* Floating chat bubble placeholder */125  .chat-fab {126    position:absolute; top:360px; right:48px; width:120px; height:120px; border-radius:60px;127    background:#1A1D22; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.5);128  }129  .chat-fab svg { width:64px; height:64px; fill:#E6E6E6; }130 131  /* Helper */132  .tiny-info { width:44px; height:44px; border-radius:22px; background:#1F2328; display:flex; align-items:center; justify-content:center; }133  .tiny-info svg { width:36px; height:36px; fill:#AAB0B6; }134</style>135</head>136<body>137<div id="render-target">138 139  <div class="status-bar">140    <div>2:58</div>141    <div class="status-right">142      <div class="icon">143        <!-- Cell signal -->144        <svg viewBox="0 0 24 24"><path d="M3 20h2v-3H3v3zm4 0h2v-7H7v7zm4 0h2V9h-2v11zm4 0h2V5h-2v15zm4 0h2V2h-2v18z"/></svg>145      </div>146      <div class="icon">147        <!-- Wi-Fi -->148        <svg viewBox="0 0 24 24"><path d="M12 18.5l-2.5-2.5a3.5 3.5 0 015 0L12 18.5zM2 9a16 16 0 0120 0l-2 2a13 13 0 00-16 0L2 9zm4 4a12 12 0 0112 0l-2 2a9 9 0 00-8 0l-2-2z"/></svg>149      </div>150      <div class="icon">151        <!-- Battery -->152        <svg viewBox="0 0 24 24"><path d="M2 8h18a2 2 0 012 2v4a2 2 0 01-2 2H2a2 2 0 01-2-2v-4a2 2 0 012-2zm22 3v2h-2v-2h2z"/></svg>153      </div>154    </div>155  </div>156 157  <div class="app-bar">158    <div class="circle-btn">159      <!-- Back arrow -->160      <svg viewBox="0 0 24 24"><path d="M15.5 5l-7 7 7 7-1.5 1.5L5.5 12 14 3.5 15.5 5z"/></svg>161    </div>162    <div class="app-title">Item</div>163    <div class="app-actions">164      <div class="circle-btn">165        <!-- Search -->166        <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 015.3 11.6l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1110 3zm0 2a5 5 0 100 10 5 5 0 000-10z"/></svg>167      </div>168      <div class="circle-btn">169        <!-- Cart -->170        <svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 104 0 2 2 0 10-4 0zm8 0a2 2 0 104 0 2 2 0 10-4 0zM6 6h13l-1.5 6.5H8.2L7.3 8H3V6h3z"/></svg>171      </div>172      <div class="circle-btn">173        <!-- Share -->174        <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.8-4H15l-6 3a3 3 0 100 6l6 3v-.2A3 3 0 1018 16a3 3 0 00-2.8-2.8L9 10.8V10l6-3.2A3 3 0 0018 8z"/></svg>175      </div>176      <div class="circle-btn">177        <!-- More/overflow -->178        <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>179      </div>180    </div>181  </div>182 183  <div class="chat-fab">184    <!-- chat bubble icon -->185    <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4V4z"/></svg>186  </div>187 188  <!-- Seller row -->189  <div class="seller-row">190    <div class="seller-logo">[IMG: Seller Logo]</div>191    <div class="seller-text"><b>easydealmegasales.com</b> (99.1% positive feedback)</div>192  </div>193 194  <!-- Price block -->195  <div class="price-block">196    <div class="price-line">197      <div>$22.99</div>198      <div class="shipping">+ $20.00 shipping</div>199    </div>200    <div class="delivery">Est. delivery <b>Thu, Jan 11 - Thu, Feb 1</b></div>201 202    <div class="info-row">203      <div class="info-left">Condition</div>204      <div class="info-right">Open box205        <div class="tiny-info">206          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><rect x="11" y="10" width="2" height="6"/><rect x="11" y="7" width="2" height="2"/></svg>207        </div>208      </div>209    </div>210 211    <div class="dropdown">212      <div>Quantity: <b>1</b></div>213      <div class="caret"></div>214    </div>215 216    <div class="btn-primary">Buy It Now</div>217    <div class="btn-outline">Add to cart</div>218    <div class="btn-outline">Add to watchlist</div>219  </div>220 221  <!-- Callouts -->222  <div class="callouts">223    <div class="callout">224      <div class="badge">225        <!-- return icon -->226        <svg viewBox="0 0 24 24"><path d="M12 6v4H8l5 5 5-5h-4V6h-2z"/></svg>227      </div>228      <div class="label"><b>Breathe easy.</b> <span class="muted">Returns accepted.</span></div>229    </div>230    <div class="callout">231      <div class="badge">232        <!-- lightning/flash -->233        <svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-2 8 11-14h-7l0-6z"/></svg>234      </div>235      <div class="label"><b>People want this.</b> <span class="muted">16 people are watching this.</span></div>236    </div>237  </div>238 239  <!-- About section -->240  <div class="about">241    <h2>About this item</h2>242    <div class="about-row"><div>Condition</div><div><b>Open box</b></div></div>243    <div class="about-row"><div>Quantity</div><div><b>2 sold</b> <span class="subtle"> • 8 available</span></div></div>244    <div class="about-row"><div>Item Number</div><div class="subtle">[Details truncated]</div></div>245  </div>246 247  <!-- Bottom navigation -->248  <div class="bottom-nav">249    <div class="nav-item">250      <div class="nav-icon">251        <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>252      </div>253      <div>Home</div>254    </div>255    <div class="nav-item">256      <div class="nav-icon">257        <!-- user -->258        <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9v-2a8 8 0 0116 0v2H4z"/></svg>259      </div>260      <div>My eBay</div>261    </div>262    <div class="nav-item nav-active">263      <div class="nav-icon">264        <!-- search -->265        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 015.7 13.7l5.1 5.1-1.4 1.4-5.1-5.1A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z"/></svg>266      </div>267      <div>Search</div>268    </div>269    <div class="nav-item">270      <div class="nav-icon">271        <!-- bell -->272        <svg viewBox="0 0 24 24"><path d="M12 22a3 3 0 003-3H9a3 3 0 003 3zm8-7V9a8 8 0 10-16 0v6l-2 2v1h20v-1l-2-2z"/></svg>273      </div>274      <div>Inbox</div>275    </div>276    <div class="nav-item">277      <div class="nav-icon">278        <!-- tag -->279        <svg viewBox="0 0 24 24"><path d="M3 12l9-9h7v7l-9 9L3 12zm14-6a2 2 0 110 4 2 2 0 010-4z"/></svg>280      </div>281      <div>Selling</div>282    </div>283  </div>284 285</div>286</body>287</html>