GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render - Product Page</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top app/status bar */17 .topbar {18 position: relative;19 width: 100%;20 background: #4A53D3;21 color: #fff;22 box-sizing: border-box;23 padding-top: 16px;24 }25 .status-row {26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 12px 32px 8px 32px;30 font-weight: 600;31 }32 .status-time { font-size: 40px; letter-spacing: 0.5px; }33 .status-icons { display: flex; gap: 28px; align-items: center; }34 .status-icon {35 width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25);36 }37 .status-wifi svg, .status-battery svg {38 display: block;39 }40 .chips {41 display: flex;42 gap: 16px;43 padding: 16px 24px 24px 24px;44 overflow: hidden;45 }46 .chip {47 background: #5B65DC;48 color: #fff;49 padding: 18px 28px;50 border-radius: 28px;51 font-size: 36px;52 white-space: nowrap;53 border: 1px solid rgba(255,255,255,0.35);54 }55 .chip .close {56 margin-right: 12px;57 font-weight: 700;58 }59 60 /* Content area */61 .content {62 padding: 24px 32px;63 box-sizing: border-box;64 }65 .store-row {66 display: flex;67 justify-content: space-between;68 align-items: center;69 }70 .store-link {71 color: #1593A3;72 font-size: 40px;73 font-weight: 600;74 text-decoration: none;75 }76 .rating {77 display: flex;78 align-items: center;79 gap: 12px;80 font-size: 32px;81 color: #333;82 }83 .stars { display: flex; gap: 6px; }84 .title {85 margin-top: 16px;86 font-size: 38px;87 line-height: 1.4;88 color: #333;89 }90 91 .choice-row {92 margin-top: 18px;93 display: flex;94 align-items: center;95 gap: 14px;96 font-size: 32px;97 color: #333;98 }99 .choice-badge {100 background: #263238;101 color: #fff;102 padding: 14px 20px;103 border-radius: 6px;104 position: relative;105 font-weight: 700;106 display: inline-flex;107 align-items: center;108 gap: 10px;109 }110 .choice-badge .accent {111 width: 10px;112 height: 24px;113 background: #FF8F00;114 border-radius: 2px;115 }116 117 .hero {118 position: relative;119 margin-top: 24px;120 width: 1016px;121 height: 900px;122 border-radius: 8px;123 overflow: hidden;124 border: 1px solid #E0E0E0;125 }126 .hero .img {127 width: 100%;128 height: 100%;129 background: #E0E0E0;130 display: flex;131 align-items: center;132 justify-content: center;133 color: #757575;134 font-size: 34px;135 border: 1px solid #BDBDBD;136 box-sizing: border-box;137 }138 .badge-off {139 position: absolute;140 top: 24px; left: 24px;141 width: 120px; height: 120px;142 background: #E85C0D;143 color: #fff;144 border-radius: 60px;145 display: flex; align-items: center; justify-content: center;146 font-size: 34px; font-weight: 700;147 }148 .share-circle {149 position: absolute;150 top: 24px; right: 24px;151 width: 96px; height: 96px;152 background: rgba(0,0,0,0.06);153 border-radius: 48px;154 display: flex; align-items: center; justify-content: center;155 }156 .carousel {157 display: flex; gap: 18px; justify-content: center; align-items: center;158 padding: 26px 0;159 }160 .dot {161 width: 20px; height: 20px; border-radius: 10px; background: #BDBDBD;162 }163 .dot.active { background: #0EA0AF; }164 165 .section-header {166 border-top: 2px solid #EEEEEE;167 padding-top: 24px;168 margin-top: 10px;169 display: flex;170 justify-content: space-between;171 align-items: center;172 }173 .section-header .label {174 font-size: 40px;175 color: #333;176 }177 .section-header .value {178 font-weight: 800;179 }180 .caret {181 width: 44px; height: 44px;182 }183 184 .variants {185 display: flex;186 gap: 24px;187 margin-top: 24px;188 }189 .variant {190 width: 320px;191 border-radius: 16px;192 border: 1px solid #E0E0E0;193 overflow: hidden;194 background: #fff;195 }196 .variant.active { border: 3px solid #FF9800; }197 .variant .v-img {198 width: 100%;199 height: 220px;200 background: #E0E0E0;201 border-bottom: 1px solid #BDBDBD;202 display: flex; align-items: center; justify-content: center;203 color: #757575; font-size: 28px;204 }205 .variant .v-title {206 padding: 18px 20px;207 font-size: 36px;208 color: #333;209 font-weight: 700;210 }211 212 /* Floating action button */213 .fab {214 position: absolute;215 right: 40px;216 bottom: 420px;217 width: 112px; height: 112px;218 background: #2F6CF6;219 border-radius: 56px;220 box-shadow: 0 8px 16px rgba(0,0,0,0.25);221 display: flex; align-items: center; justify-content: center;222 }223 224 /* Bottom ad install bar */225 .ad-bar {226 position: absolute;227 left: 0; right: 0; bottom: 140px;228 height: 160px;229 display: flex;230 align-items: center;231 padding: 0 24px;232 box-sizing: border-box;233 background: #F9F9F9;234 border-top: 1px solid #E0E0E0;235 gap: 24px;236 }237 .ad-icon {238 width: 120px; height: 120px; background: #FFC107; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 56px;239 }240 .ad-text { font-size: 34px; color: #333; flex: 1; }241 .install-btn {242 background: #1976D2; color: #fff;243 font-size: 40px; font-weight: 700;244 border-radius: 16px; padding: 22px 42px;245 }246 247 /* Home indicator */248 .home-indicator {249 position: absolute;250 bottom: 52px; left: 50%; transform: translateX(-50%);251 width: 300px; height: 12px; background: #D1D1D1; border-radius: 6px;252 }253</style>254</head>255<body>256<div id="render-target">257 <div class="topbar">258 <div class="status-row">259 <div class="status-time">9:24</div>260 <div class="status-icons">261 <div class="status-icon"></div>262 <div class="status-icon"></div>263 <div class="status-icon"></div>264 <div class="status-wifi">265 <svg width="48" height="36" viewBox="0 0 48 36">266 <path d="M4 10c10-8 30-8 40 0" stroke="white" stroke-width="4" fill="none"/>267 <path d="M10 16c7-6 21-6 28 0" stroke="white" stroke-width="4" fill="none"/>268 <circle cx="24" cy="26" r="4" fill="white"/>269 </svg>270 </div>271 <div class="status-battery">272 <svg width="56" height="36" viewBox="0 0 56 36">273 <rect x="2" y="8" width="44" height="20" rx="4" fill="none" stroke="white" stroke-width="4"/>274 <rect x="6" y="12" width="28" height="12" rx="2" fill="white"/>275 <rect x="48" y="12" width="6" height="12" rx="2" fill="white"/>276 </svg>277 </div>278 </div>279 </div>280 <div class="chips">281 <div class="chip"><span class="close">×</span>Amazon.</div>282 <div class="chip">Flipkar</div>283 <div class="chip">2gud.co</div>284 <div class="chip">Google.</div>285 <div class="chip">Relian...</div>286 <div class="chip">Shop</div>287 </div>288 </div>289 290 <div class="content">291 <div class="store-row">292 <a href="#" class="store-link">Visit the Plantex Store</a>293 <div class="rating">294 <span>4.4</span>295 <div class="stars">296 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#FFB300" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.9 7-.9z"/></svg>297 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#FFB300" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.9 7-.9z"/></svg>298 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#FFB300" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.9 7-.9z"/></svg>299 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#FFB300" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.9 7-.9z"/></svg>300 <svg width="32" height="32" viewBox="0 0 24 24"><path fill="#FFB300" d="M12 2l3.1 6.4 7 .9-5 4.9 1.2 7-6.3-3.4-6.3 3.4 1.2-7-5-4.9 7-.9z"/></svg>301 </div>302 <span>101</span>303 </div>304 </div>305 306 <div class="title">307 Plantex Rich Rose Gold Gate Stopper for The Door with Rubber Grip 5-inch Long Door Stopper for The Wooden Door (Pack of 1)308 </div>309 310 <div class="choice-row">311 <div class="choice-badge">312 <span>Amazon's Choice</span>313 <span class="accent"></span>314 </div>315 <span>for "plantex door stopper"</span>316 </div>317 318 <div class="hero">319 <div class="img">[IMG: Door stopper mounted on a dark wooden door]</div>320 <div class="badge-off">72%<br/>off</div>321 <div class="share-circle">322 <svg width="42" height="42" viewBox="0 0 24 24">323 <circle cx="18" cy="5" r="3" fill="#777"/>324 <circle cx="6" cy="12" r="3" fill="#777"/>325 <circle cx="18" cy="19" r="3" fill="#777"/>326 <path d="M8 12l8-6M8 12l8 6" stroke="#777" stroke-width="2" fill="none"/>327 </svg>328 </div>329 </div>330 331 <div class="carousel">332 <div class="dot active"></div>333 <div class="dot"></div>334 <div class="dot"></div>335 <div class="dot"></div>336 <div class="dot"></div>337 <div class="dot"></div>338 </div>339 340 <div class="section-header">341 <div class="label">Colour: <span class="value">Rose Gold</span></div>342 <svg class="caret" viewBox="0 0 24 24">343 <path d="M6 14l6-6 6 6" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 </div>346 347 <div class="variants">348 <div class="variant active">349 <div class="v-img">[IMG: Rose Gold Door Stopper]</div>350 <div class="v-title">Rose Gold</div>351 </div>352 <div class="variant">353 <div class="v-img">[IMG: Black Door Stopper]</div>354 <div class="v-title">Black</div>355 </div>356 <div class="variant">357 <div class="v-img">[IMG: Brass Antique Door Stopper]</div>358 <div class="v-title">Brass Antique</div>359 </div>360 </div>361 </div>362 363 <div class="fab">364 <svg width="54" height="54" viewBox="0 0 24 24">365 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>366 </svg>367 </div>368 369 <div class="ad-bar">370 <div class="ad-icon">☺</div>371 <div class="ad-text">Foreign Products To Buy</div>372 <div class="install-btn">Install</div>373 </div>374 375 <div class="home-indicator"></div>376</div>377</body>378</html>