GD-ML/AndroidCode
13.4k
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>Mobile UI - Shoes Supplier</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 24px;16 box-shadow: 0 4px 24px rgba(0,0,0,0.06);17 }18 19 /* Status bar */20 .status-bar {21 height: 96px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #333;27 font-weight: 600;28 font-size: 40px;29 }30 .status-icons {31 display: flex;32 align-items: center;33 gap: 20px;34 }35 .status-icons svg { width: 34px; height: 34px; }36 37 /* Top app bar with search */38 .top-bar {39 height: 140px;40 padding: 0 32px;41 display: flex;42 align-items: center;43 gap: 24px;44 }45 .icon-btn {46 width: 88px;47 height: 88px;48 display: flex;49 align-items: center;50 justify-content: center;51 border-radius: 20px;52 color: #333;53 }54 .icon-btn svg { width: 44px; height: 44px; }55 56 .search {57 flex: 1;58 height: 88px;59 background: #F2F2F2;60 border-radius: 44px;61 display: flex;62 align-items: center;63 padding: 0 28px;64 gap: 16px;65 color: #777;66 font-size: 38px;67 }68 .search svg { width: 40px; height: 40px; }69 70 /* Tabs */71 .tabs {72 height: 98px;73 display: flex;74 align-items: center;75 gap: 48px;76 padding: 0 40px;77 border-bottom: 1px solid #ECECEC;78 position: relative;79 }80 .tab {81 font-size: 40px;82 color: #333;83 }84 .tab.active { font-weight: 700; }85 .tab-indicator {86 position: absolute;87 left: 40px;88 bottom: 0;89 width: 140px;90 height: 6px;91 background: #111;92 border-radius: 3px;93 }94 95 /* Sections */96 .section {97 padding: 32px 40px 0 40px;98 }99 .section-header {100 display: flex;101 align-items: center;102 justify-content: space-between;103 margin-bottom: 24px;104 }105 .section-title {106 font-size: 56px;107 font-weight: 800;108 color: #222;109 }110 .chev {111 width: 48px; height: 48px; color: #333;112 }113 114 /* Product cards */115 .grid {116 display: grid;117 grid-template-columns: 1fr 1fr;118 gap: 28px;119 padding-right: 40px;120 }121 122 .card {123 background: #fff;124 border-radius: 28px;125 }126 .thumb {127 width: 100%;128 height: 460px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 border-radius: 28px;132 display: flex;133 align-items: center;134 justify-content: center;135 color: #757575;136 font-size: 38px;137 }138 .card-body {139 padding: 20px 8px 24px 8px;140 }141 .price {142 font-size: 52px;143 font-weight: 800;144 color: #111;145 margin-bottom: 8px;146 }147 .meta {148 font-size: 36px;149 color: #7A7A7A;150 }151 .meta strong {152 color: #444;153 font-weight: 700;154 }155 156 /* Bottom action bar */157 .bottom-bar {158 position: absolute;159 left: 0; right: 0; bottom: 40px;160 height: 180px;161 padding: 0 40px;162 background: #FFFFFF;163 border-top: 1px solid #EAEAEA;164 display: flex;165 align-items: center;166 gap: 24px;167 }168 .mini-action {169 width: 220px;170 height: 120px;171 border-radius: 24px;172 border: 1px solid #DADADA;173 display: flex;174 flex-direction: column;175 align-items: center;176 justify-content: center;177 gap: 6px;178 color: #333;179 }180 .mini-action svg { width: 40px; height: 40px; color: #333; }181 .mini-label { font-size: 32px; }182 183 .pill {184 height: 120px;185 padding: 0 48px;186 border-radius: 60px;187 display: flex;188 align-items: center;189 justify-content: center;190 font-size: 40px;191 font-weight: 700;192 }193 .pill.outline {194 border: 2px solid #D0D0D0;195 color: #111;196 background: #fff;197 flex: 1;198 min-width: 320px;199 }200 .pill.primary {201 background: #FF6A00;202 color: #fff;203 min-width: 360px;204 }205 206 /* Phone home indicator */207 .home-indicator {208 position: absolute;209 bottom: 0;210 left: 50%;211 transform: translateX(-50%);212 width: 300px;213 height: 10px;214 background: #000;215 border-radius: 5px;216 opacity: 0.2;217 }218</style>219</head>220<body>221<div id="render-target">222 <!-- Status Bar -->223 <div class="status-bar">224 <div>3:51</div>225 <div class="status-icons">226 <!-- simple mail icon -->227 <svg viewBox="0 0 24 24"><path fill="#555" d="M3 6h18v12H3z"/><path fill="#fff" d="M3 6l9 7 9-7"/></svg>228 <!-- download icon -->229 <svg viewBox="0 0 24 24"><path fill="#555" d="M12 3v10"/><path fill="#555" d="M7 9l5 5 5-5"/><path fill="#555" d="M5 19h14"/></svg>230 <!-- network icon -->231 <svg viewBox="0 0 24 24"><path fill="#555" d="M3 17h3l3-3 3 3 3-3 3 3h3"/></svg>232 <!-- battery icon -->233 <svg viewBox="0 0 26 24"><rect x="1" y="6" width="20" height="12" rx="2" fill="#555"/><rect x="3" y="8" width="16" height="8" fill="#fff"/><rect x="22" y="9" width="3" height="6" fill="#555"/></svg>234 </div>235 </div>236 237 <!-- Top Bar -->238 <div class="top-bar">239 <div class="icon-btn">240 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>241 </div>242 <div class="search">243 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/><path d="M21 21l-5-5" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg>244 <span>casual shoes wom...</span>245 </div>246 <div class="icon-btn">247 <!-- camera -->248 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#111" stroke-width="2"/><rect x="9" y="3" width="6" height="4" rx="1" fill="#111"/><circle cx="12" cy="13" r="4" fill="none" stroke="#111" stroke-width="2"/></svg>249 </div>250 <div class="icon-btn">251 <!-- cart -->252 <svg viewBox="0 0 24 24"><path d="M3 5h2l2 12h10l2-8H7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="19" r="2" fill="#111"/><circle cx="17" cy="19" r="2" fill="#111"/></svg>253 </div>254 <div class="icon-btn">255 <!-- kebab -->256 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#111"/><circle cx="12" cy="12" r="2" fill="#111"/><circle cx="12" cy="19" r="2" fill="#111"/></svg>257 </div>258 </div>259 260 <!-- Tabs -->261 <div class="tabs">262 <div class="tab active">Overview</div>263 <div class="tab">Details</div>264 <div class="tab">Recommended</div>265 <div class="tab-indicator"></div>266 </div>267 268 <!-- Section 1 -->269 <div class="section">270 <div class="section-header">271 <div class="section-title">Similar products from this supplier</div>272 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>273 </div>274 275 <div class="grid">276 <div class="card">277 <div class="thumb">[IMG: Blue Loafer Shoe]</div>278 <div class="card-body">279 <div class="price">$1.94</div>280 <div class="meta"><strong>1 pair</strong> (MOQ)</div>281 <div class="meta">2 orders</div>282 </div>283 </div>284 <div class="card">285 <div class="thumb">[IMG: Beige Running Shoe]</div>286 <div class="card-body">287 <div class="price">$3.20</div>288 <div class="meta"><strong>1 pair</strong> (MOQ)</div>289 <div class="meta">1 orders</div>290 </div>291 </div>292 </div>293 </div>294 295 <!-- Section 2 -->296 <div class="section" style="margin-top: 36px;">297 <div class="section-header">298 <div class="section-title">Discover more from this supplier</div>299 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>300 </div>301 302 <div class="grid">303 <div class="card">304 <div class="thumb">[IMG: Pink Knit Sneaker]</div>305 <div class="card-body">306 <div class="price">$2.97</div>307 <div class="meta"><strong>30 pairs</strong> (MOQ)</div>308 <div class="meta">2 orders</div>309 </div>310 </div>311 <div class="card">312 <div class="thumb">[IMG: Gray & Orange Running Shoe]</div>313 <div class="card-body">314 <div class="price">$3.90</div>315 <div class="meta"><strong>1 pair</strong> (MOQ)</div>316 <div class="meta">4 orders</div>317 </div>318 </div>319 </div>320 </div>321 322 <!-- Another headline (partially visible above bottom bar) -->323 <div class="section" style="margin-top: 20px;">324 <div class="section-header">325 <div class="section-title">Hot products from this supplier</div>326 <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>327 </div>328 </div>329 330 <!-- Bottom Action Bar -->331 <div class="bottom-bar">332 <div class="mini-action">333 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/></svg>334 <div class="mini-label">Chat now</div>335 </div>336 <div class="mini-action">337 <svg viewBox="0 0 24 24"><path d="M3 5h18v14H3z" fill="none" stroke="#333" stroke-width="2"/><path d="M3 5l9 7 9-7" stroke="#333" stroke-width="2" fill="none"/></svg>338 <div class="mini-label">Send inquiry</div>339 </div>340 <div class="pill outline">Add to cart</div>341 <div class="pill primary">Start order</div>342 </div>343 344 <div class="home-indicator"></div>345</div>346</body>347</html>