GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #0F0F0F;13 color: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 100%;23 height: 120px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #D7D7D7;29 font-size: 46px;30 letter-spacing: 1px;31 }32 33 /* Header with title and action icons */34 .header {35 position: absolute;36 top: 120px;37 left: 0;38 width: 100%;39 padding: 0 40px;40 height: 160px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .header-left {46 display: flex;47 align-items: center;48 gap: 36px;49 }50 .back-icon {51 width: 100px;52 height: 100px;53 border-radius: 60px;54 background: #222;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .title {60 font-size: 78px;61 font-weight: 700;62 }63 .header-actions {64 display: flex;65 align-items: center;66 gap: 36px;67 }68 .circle-btn {69 width: 110px;70 height: 110px;71 border-radius: 60px;72 background: #212121;73 display: flex;74 align-items: center;75 justify-content: center;76 }77 .circle-btn svg, .back-icon svg { width: 60px; height: 60px; fill: #EAEAEA; }78 79 /* Content */80 .content {81 position: absolute;82 top: 300px;83 left: 40px;84 right: 40px;85 }86 87 .info-list {88 margin-top: 40px;89 }90 .row {91 display: flex;92 align-items: center;93 justify-content: space-between;94 padding: 28px 0;95 border-bottom: 1px solid #1F1F1F;96 }97 .label {98 font-size: 50px;99 color: #BEBEBE;100 }101 .value {102 font-size: 52px;103 color: #FFFFFF;104 }105 .quantity {106 display: flex;107 gap: 26px;108 align-items: baseline;109 }110 .sold { color: #FF5C86; font-weight: 700; }111 .avail { color: #CFCFCF; font-size: 46px; }112 .chev {113 width: 40px;114 height: 40px;115 margin-left: 16px;116 }117 118 .section-title {119 font-size: 70px;120 font-weight: 800;121 margin: 60px 0 20px;122 }123 .link-row {124 display: flex;125 align-items: center;126 gap: 20px;127 color: #CFE3FF;128 font-size: 52px;129 margin: 10px 0 50px;130 }131 .link-row svg { fill: #CFE3FF; }132 133 .more-like-head {134 display: flex;135 align-items: center;136 justify-content: space-between;137 margin-top: 40px;138 }139 .more-title {140 font-size: 70px;141 font-weight: 800;142 }143 .see-all {144 display: flex;145 align-items: center;146 gap: 20px;147 background: #1D1D1D;148 color: #FFFFFF;149 padding: 26px 40px;150 border-radius: 80px;151 font-size: 52px;152 }153 .subtle {154 color: #A9A9A9;155 font-size: 46px;156 margin: 20px 0 30px;157 }158 159 /* Cards */160 .cards {161 display: flex;162 gap: 36px;163 }164 .card {165 width: 430px;166 }167 .card-img {168 width: 430px;169 height: 430px;170 background: #E0E0E0;171 border: 1px solid #BDBDBD;172 display: flex;173 justify-content: center;174 align-items: center;175 color: #757575;176 font-size: 40px;177 text-align: center;178 }179 .card-title {180 margin-top: 24px;181 font-size: 48px;182 line-height: 1.25;183 color: #FFFFFF;184 }185 .price {186 margin-top: 20px;187 font-size: 54px;188 font-weight: 800;189 color: #FFFFFF;190 }191 .shipping {192 margin-top: 8px;193 font-size: 44px;194 color: #BEBEBE;195 }196 .rating {197 margin-top: 14px;198 font-size: 42px;199 color: #9BD1FF;200 display: flex;201 align-items: center;202 gap: 12px;203 }204 .rating svg { fill: #F7D24B; width: 40px; height: 40px; }205 206 /* Bottom navigation */207 .bottom-nav {208 position: absolute;209 bottom: 0;210 left: 0;211 width: 100%;212 height: 170px;213 background: #121212;214 border-top: 1px solid #1F1F1F;215 display: flex;216 align-items: center;217 justify-content: space-around;218 }219 .nav-item {220 display: flex;221 flex-direction: column;222 align-items: center;223 color: #CFCFCF;224 font-size: 42px;225 gap: 12px;226 }227 .nav-item .active {228 color: #FFFFFF;229 }230 .nav-item svg { width: 60px; height: 60px; fill: #DADADA; }231 232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status Bar -->238 <div class="status-bar">239 <div>2:58</div>240 <div style="display:flex; align-items:center; gap:24px;">241 <span>DH</span>242 <span>•</span>243 <span>🔔</span>244 </div>245 </div>246 247 <!-- Header -->248 <div class="header">249 <div class="header-left">250 <div class="back-icon">251 <svg viewBox="0 0 48 48">252 <path d="M30 8 L14 24 L30 40" stroke="#EAEAEA" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 </div>255 <div class="title">Item</div>256 </div>257 <div class="header-actions">258 <div class="circle-btn">259 <!-- search -->260 <svg viewBox="0 0 48 48">261 <circle cx="22" cy="22" r="12"></circle>262 <path d="M33 33 L44 44" stroke="#EAEAEA" stroke-width="5" fill="none" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="circle-btn">266 <!-- cart -->267 <svg viewBox="0 0 48 48">268 <path d="M6 8 H14 L18 30 H38 L42 16 H18" stroke="#EAEAEA" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>269 <circle cx="20" cy="38" r="3"></circle>270 <circle cx="34" cy="38" r="3"></circle>271 </svg>272 </div>273 <div class="circle-btn">274 <!-- share -->275 <svg viewBox="0 0 48 48">276 <circle cx="12" cy="24" r="5"></circle>277 <circle cx="36" cy="12" r="5"></circle>278 <circle cx="36" cy="36" r="5"></circle>279 <path d="M16 22 L31 14 M16 26 L31 34" stroke="#EAEAEA" stroke-width="4" fill="none" stroke-linecap="round"/>280 </svg>281 </div>282 <div class="circle-btn">283 <!-- menu -->284 <svg viewBox="0 0 48 48">285 <circle cx="24" cy="10" r="4"></circle>286 <circle cx="24" cy="24" r="4"></circle>287 <circle cx="24" cy="38" r="4"></circle>288 </svg>289 </div>290 </div>291 </div>292 293 <!-- Content -->294 <div class="content">295 296 <div class="info-list">297 <div class="row">298 <div class="label">Condition</div>299 <div class="value">Open box</div>300 </div>301 302 <div class="row">303 <div class="label">Quantity</div>304 <div style="display:flex; align-items:center;">305 <div class="quantity">306 <span class="sold">2 sold</span>307 <span class="avail">8 available</span>308 </div>309 <svg class="chev" viewBox="0 0 24 24">310 <path d="M8 4 L16 12 L8 20" stroke="#BEBEBE" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 </div>314 315 <div class="row">316 <div class="label">Item Number</div>317 <div class="value">116015452421</div>318 </div>319 320 <div class="row">321 <div class="label">Brand</div>322 <div class="value">QRInnovations</div>323 </div>324 325 <div class="row">326 <div class="label">Type</div>327 <div class="value">Base Cabinet</div>328 </div>329 </div>330 331 <div class="section-title">Item description from the seller</div>332 333 <div class="link-row">334 <span>See full description</span>335 <svg viewBox="0 0 24 24" width="40" height="40">336 <path d="M8 4 L16 12 L8 20" stroke="#CFE3FF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>337 </svg>338 </div>339 340 <div class="more-like-head">341 <div class="more-title">More like this</div>342 <div class="see-all">343 <span>See all</span>344 <svg viewBox="0 0 24 24" width="40" height="40">345 <path d="M8 4 L16 12 L8 20" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>346 </svg>347 </div>348 </div>349 350 <div class="subtle">Sponsored</div>351 352 <div class="cards">353 <!-- Card 1 -->354 <div class="card">355 <div class="card-img">[IMG: White Wall Mounted Bath Storage Cabinet]</div>356 <div class="card-title">White Wall Mounted Bathroom Storage Cabinet, Mirrored Vanity Medicine Ches...</div>357 <div class="price">$120.19</div>358 <div class="shipping">+ US $147.78 shipping</div>359 <div class="rating">360 <svg viewBox="0 0 24 24">361 <path d="M12 2 L15 9 L22 9 L16.5 13.5 L18.5 20 L12 16.5 L5.5 20 L7.5 13.5 L2 9 L9 9 Z"></path>362 </svg>363 <span>Top Rated Plus</span>364 </div>365 </div>366 367 <!-- Card 2 -->368 <div class="card">369 <div class="card-img">[IMG: Bathroom Medicine Cabinet Wall Mounted with Mirror]</div>370 <div class="card-title">Bathroom Medicine Cabinet Wall Mounted Storage Mirror Living Room White</div>371 <div class="price">$84.22</div>372 <div class="shipping">+ US $24.62 shipping</div>373 </div>374 375 <!-- Card 3 -->376 <div class="card">377 <div class="card-img">[IMG: Wall mounted laundry sink antique brass faucet]</div>378 <div class="card-title">Wall mounted laundry sink antique brass Essex</div>379 <div class="price">$70.00</div>380 <div class="shipping">0 bids • + US $93.51 shipping</div>381 <div class="rating" style="color:#BEBEBE;">382 <span>Seller with a...</span>383 </div>384 </div>385 </div>386 </div>387 388 <!-- Bottom Navigation -->389 <div class="bottom-nav">390 <div class="nav-item">391 <svg viewBox="0 0 48 48">392 <path d="M8 22 L24 10 L40 22 V40 H28 V28 H20 V40 H8 Z" fill="#DADADA"/>393 </svg>394 <div class="active">Home</div>395 </div>396 <div class="nav-item">397 <svg viewBox="0 0 48 48">398 <circle cx="24" cy="16" r="8" fill="#DADADA"/>399 <path d="M10 40 C10 30 38 30 38 40 Z" fill="#DADADA"/>400 </svg>401 <div>My eBay</div>402 </div>403 <div class="nav-item">404 <svg viewBox="0 0 48 48">405 <circle cx="22" cy="22" r="12" fill="none" stroke="#DADADA" stroke-width="4"/>406 <path d="M33 33 L44 44" stroke="#DADADA" stroke-width="4" fill="none" stroke-linecap="round"/>407 </svg>408 <div>Search</div>409 </div>410 <div class="nav-item">411 <svg viewBox="0 0 48 48">412 <path d="M8 16 H40 V34 H8 Z" fill="none" stroke="#DADADA" stroke-width="4"/>413 <circle cx="12" cy="12" r="4" fill="#DADADA"/>414 </svg>415 <div>Inbox</div>416 </div>417 <div class="nav-item">418 <svg viewBox="0 0 48 48">419 <path d="M10 8 H30 L38 18 V40 H10 Z" fill="none" stroke="#DADADA" stroke-width="4"/>420 <circle cx="24" cy="30" r="4" fill="#DADADA"/>421 </svg>422 <div>Selling</div>423 </div>424 </div>425 426</div>427</body>428</html>