GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Item</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #000000;13 color: #FFFFFF;14 font-family: Arial, Helvetica, sans-serif;15 }16 17 /* Top status bar */18 .status-bar {19 height: 70px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #ffffff;25 font-size: 28px;26 letter-spacing: 0.5px;27 opacity: 0.95;28 }29 .status-icons {30 display: flex;31 align-items: center;32 gap: 18px;33 }34 .status-icons svg { width: 30px; height: 30px; fill: #ffffff; opacity: 0.85; }35 36 /* App bar */37 .app-bar {38 height: 120px;39 padding: 0 28px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 }44 .app-left {45 display: flex;46 align-items: center;47 gap: 22px;48 }49 .app-title {50 font-size: 54px;51 font-weight: 700;52 }53 .round-btns {54 display: flex;55 align-items: center;56 gap: 24px;57 }58 .round-btn {59 width: 86px;60 height: 86px;61 border-radius: 43px;62 background: #1a1a1a;63 display: flex;64 align-items: center;65 justify-content: center;66 }67 .round-btn svg { width: 42px; height: 42px; fill: #ffffff; }68 69 /* Image card */70 .image-card {71 width: 870px;72 height: 1120px;73 margin: 10px auto 0;74 background: #ffffff;75 border-radius: 2px;76 position: relative;77 display: flex;78 align-items: center;79 justify-content: center;80 }81 .image-placeholder {82 width: 820px;83 height: 1060px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 display: flex;87 align-items: center;88 justify-content: center;89 color: #757575;90 font-size: 34px;91 text-align: center;92 position: relative;93 }94 .yellow-banner {95 position: absolute;96 bottom: 210px;97 left: 50%;98 transform: translateX(-50%);99 background: #F1C40F;100 color: #000;101 font-weight: 800;102 font-size: 34px;103 padding: 16px 26px;104 border-radius: 6px;105 letter-spacing: 1px;106 }107 .page-pill {108 position: absolute;109 right: 26px;110 top: 18px;111 background: rgba(60,60,60,0.95);112 color: #fff;113 padding: 12px 22px;114 border-radius: 30px;115 font-size: 28px;116 }117 118 /* Heart FAB */119 .fav-fab {120 position: absolute;121 right: 40px;122 top: 1260px;123 width: 120px;124 height: 120px;125 border-radius: 60px;126 background: #1f1f1f;127 display: flex;128 align-items: center;129 justify-content: center;130 box-shadow: 0 6px 18px rgba(0,0,0,0.5);131 border: 2px solid #2b2b2b;132 }133 .fav-fab svg { width: 54px; height: 54px; fill: #7aa2ff; }134 135 /* Carousel dots */136 .dots {137 margin: 18px 0 12px;138 display: flex;139 justify-content: center;140 gap: 18px;141 }142 .dot {143 width: 16px;144 height: 16px;145 border-radius: 8px;146 background: #707070;147 }148 .dot.active { background: #bfbfbf; }149 150 /* Title and details */151 .content {152 padding: 0 36px;153 }154 .item-title {155 font-size: 56px;156 line-height: 70px;157 font-weight: 800;158 margin-top: 18px;159 }160 .seller-row {161 margin-top: 26px;162 display: flex;163 align-items: center;164 justify-content: space-between;165 }166 .seller-left {167 display: flex;168 align-items: center;169 gap: 24px;170 }171 .avatar {172 width: 90px;173 height: 90px;174 border-radius: 45px;175 background: #2e66ff;176 display: flex;177 align-items: center;178 justify-content: center;179 color: #dbe6ff;180 font-size: 22px;181 font-weight: 700;182 }183 .seller-name {184 font-size: 40px;185 color: #ffffff;186 }187 .seller-row svg { width: 38px; height: 38px; fill: #9e9e9e; }188 189 .price-row {190 margin-top: 22px;191 display: flex;192 align-items: baseline;193 gap: 18px;194 }195 .price {196 font-size: 76px;197 font-weight: 800;198 }199 .shipping {200 font-size: 36px;201 color: #bdbdbd;202 }203 204 .delivery {205 margin-top: 22px;206 font-size: 38px;207 color: #e6e6e6;208 }209 210 /* Bottom navigation */211 .bottom-nav {212 position: absolute;213 bottom: 0;214 left: 0;215 width: 1080px;216 height: 170px;217 background: #101010;218 border-top: 1px solid #232323;219 display: flex;220 align-items: center;221 justify-content: space-around;222 padding-bottom: 12px;223 }224 .nav-item {225 width: 160px;226 display: flex;227 flex-direction: column;228 align-items: center;229 gap: 10px;230 color: #cfcfcf;231 font-size: 30px;232 }233 .nav-icon {234 width: 92px;235 height: 92px;236 border-radius: 46px;237 background: #1a1a1a;238 display: flex;239 align-items: center;240 justify-content: center;241 }242 .nav-item.active .nav-icon {243 background: #0f2b5c;244 box-shadow: 0 0 0 4px #1e4dd0 inset;245 }246 .nav-item.active span { color: #80aaff; }247 .nav-icon svg { width: 44px; height: 44px; fill: #ffffff; }248 .badge {249 position: absolute;250 top: -8px;251 right: -8px;252 background: #ff4d58;253 color: #fff;254 width: 34px;255 height: 34px;256 border-radius: 17px;257 display: flex;258 align-items: center;259 justify-content: center;260 font-size: 22px;261 font-weight: 700;262 border: 2px solid #101010;263 }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Status Bar -->270 <div class="status-bar">271 <div>11:28</div>272 <div class="status-icons">273 <!-- network -->274 <svg viewBox="0 0 24 24"><path d="M2 18h3v3H2v-3zm4-5h3v8H6v-8zm4-4h3v12h-3V9zm4-4h3v16h-3V5zm4-3h3v19h-3V2z"></path></svg>275 <!-- wifi -->276 <svg viewBox="0 0 24 24"><path d="M12 18.5l-2.5-2.5a3.5 3.5 0 015 0L12 18.5zm6-6a8 8 0 00-12 0l-2-2a11 11 0 0116 0l-2 2zm-3-3a5 5 0 00-6 0l-2-2a8 8 0 0110 0l-2 2z"></path></svg>277 <!-- battery -->278 <svg viewBox="0 0 24 24"><path d="M17 6h2v12h-2V6zM3 7h13v10H3V7z"></path></svg>279 </div>280 </div>281 282 <!-- App Bar -->283 <div class="app-bar">284 <div class="app-left">285 <!-- Back -->286 <div class="round-btn">287 <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4.5 12 14 3l1.5 1.5z"></path></svg>288 </div>289 <div class="app-title">Item</div>290 </div>291 <div class="round-btns">292 <div class="round-btn">293 <!-- search -->294 <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 105.6 12L21 20l-1 1-5.4-5A7 7 0 0010 3z"></path></svg>295 </div>296 <div class="round-btn">297 <!-- cart -->298 <svg viewBox="0 0 24 24"><path d="M7 20a2 2 0 110-4 2 2 0 010 4zm10 0a2 2 0 110-4 2 2 0 010 4zM6 6h14l-2 8H8L6 6zm-2-3h3l1 4H4V3z"></path></svg>299 </div>300 <div class="round-btn">301 <!-- share -->302 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 10-2.9-3.5L8.7 8.4a3 3 0 100 7.2l6.4 3.1A3 3 0 1016 17a3 3 0 00-.2-1.1l-6.3-3A3 3 0 008 12a3 3 0 001.6-2.7l6.5-3A3 3 0 0018 8z"></path></svg>303 </div>304 <div class="round-btn">305 <!-- more vertical -->306 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>307 </div>308 </div>309 </div>310 311 <!-- Image Card -->312 <div class="image-card">313 <div class="page-pill">1 of 5</div>314 <div class="image-placeholder">315 [IMG: Samsung French Door Refrigerator]316 <div class="yellow-banner">REFRIGERATED EXTERIOR DRAWER</div>317 </div>318 </div>319 320 <!-- Heart FAB -->321 <div class="fav-fab">322 <svg viewBox="0 0 24 24"><path d="M12 21s-6-4.4-8.3-7A5 5 0 017.3 5c1.6 0 3 .8 3.8 2.1C11.9 5.8 13.3 5 14.9 5A5 5 0 0120.3 14c-2.3 2.6-8.3 7-8.3 7z"></path></svg>323 </div>324 325 <!-- Carousel dots -->326 <div class="dots">327 <div class="dot active"></div>328 <div class="dot"></div>329 <div class="dot"></div>330 <div class="dot"></div>331 <div class="dot"></div>332 </div>333 334 <!-- Content Block -->335 <div class="content">336 <div class="item-title">Samsung 24.5 Cu. Ft French Door Refrigerator - Stainless Steel</div>337 338 <div class="seller-row">339 <div class="seller-left">340 <div class="avatar">me</div>341 <div class="seller-name">myessentialshop</div>342 </div>343 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"></path></svg>344 </div>345 346 <div class="price-row">347 <div class="price">$2,499.00</div>348 <div class="shipping">+ $57.33 shipping</div>349 </div>350 351 <div class="delivery">Est. delivery Wed, Jan 3 - Tue, Jan 23</div>352 </div>353 354 <!-- Bottom Navigation -->355 <div class="bottom-nav">356 <div class="nav-item">357 <div class="nav-icon">358 <!-- home -->359 <svg viewBox="0 0 24 24"><path d="M4 10l8-6 8 6v10h-6v-6H10v6H4V10z"></path></svg>360 </div>361 <span>Home</span>362 </div>363 <div class="nav-item">364 <div class="nav-icon">365 <!-- person -->366 <svg viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 8a7 7 0 0114 0H5z"></path></svg>367 </div>368 <span>My eBay</span>369 </div>370 <div class="nav-item active">371 <div class="nav-icon">372 <!-- search -->373 <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 105.6 12L21 20l-1 1-5.4-5A7 7 0 0010 3z"></path></svg>374 </div>375 <span>Search</span>376 </div>377 <div class="nav-item" style="position: relative;">378 <div class="nav-icon" style="position: relative;">379 <!-- bell -->380 <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 002-2H10a2 2 0 002 2zm7-6V11a7 7 0 10-14 0v5l-2 2v1h18v-1l-2-2z"></path></svg>381 <div class="badge">1</div>382 </div>383 <span>Inbox</span>384 </div>385 <div class="nav-item">386 <div class="nav-icon">387 <!-- tag -->388 <svg viewBox="0 0 24 24"><path d="M3 12l9 9 9-9-9-9H7v6H3zM16 8a2 2 0 110-4 2 2 0 010 4z"></path></svg>389 </div>390 <span>Selling</span>391 </div>392 </div>393 394</div>395</body>396</html>