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>UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 background: #2f2230;18 color: #fff; display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; font-size: 40px; box-sizing: border-box;20 }21 .status-icons { display: flex; align-items: center; gap: 24px; font-size: 34px; opacity: 0.9; }22 .dot { width: 10px; height: 10px; background: #c9bdcf; border-radius: 50%; display: inline-block; margin: 0 6px; }23 .battery { display: inline-flex; align-items: center; gap: 12px; }24 .battery svg { width: 46px; height: 26px; }25 26 /* Content area */27 .content { position: absolute; top: 110px; left: 0; right: 0; bottom: 0; overflow: hidden; }28 .section-list { padding: 16px 0 0; }29 .list-row {30 height: 120px; display: flex; align-items: center; justify-content: space-between;31 border-bottom: 2px solid #eeeeee; color: #2d2d2d; font-weight: 600; font-size: 44px; padding: 0 32px; box-sizing: border-box;32 }33 .chev {34 width: 42px; height: 42px;35 }36 .divider-thin { height: 16px; background: #f5f5f5; }37 38 /* Buy this Set */39 .buy-set-header {40 display: flex; align-items: center; justify-content: space-between;41 padding: 28px 32px; font-size: 58px; font-weight: 700; color: #3a3a3a;42 }43 .close-x {44 width: 48px; height: 48px;45 }46 .buy-on-phone {47 position: absolute; right: 24px; top: 680px;48 background: #fff; border: 2px solid #f0f0f0; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.08);49 padding: 18px 20px; display: flex; align-items: center; gap: 14px; color: #ff7a2c; font-weight: 700; font-size: 36px;50 transform: rotate(0.0001deg);51 }52 .buy-on-phone .phone-ic { width: 36px; height: 36px; }53 .products-row { display: flex; gap: 24px; padding: 0 32px; }54 .product-card { width: 486px; }55 .img-placeholder {56 width: 100%; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD;57 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 36px; position: relative;58 }59 .tag-product {60 position: absolute; top: 16px; left: 16px; background: rgba(64,64,64,0.95); color: #fff;61 padding: 12px 16px; border-radius: 8px; font-size: 34px; font-weight: 700;62 }63 .check-badge {64 position: absolute; top: 16px; left: 16px; width: 58px; height: 58px; background: #ff7a2c; border-radius: 50%;65 display: flex; align-items: center; justify-content: center;66 }67 .check-badge svg { width: 34px; height: 34px; }68 .prod-title { margin-top: 24px; font-size: 42px; font-weight: 700; color: #3a3a3a; line-height: 1.2; }69 .prod-sub { font-size: 34px; color: #999; margin-top: 6px; }70 .price-row { display: flex; gap: 16px; align-items: baseline; margin-top: 18px; }71 .price-now { font-size: 44px; font-weight: 800; color: #111; }72 .price-old { font-size: 38px; color: #bbb; text-decoration: line-through; }73 .discount { margin-top: 12px; color: #2ea64f; font-size: 40px; font-weight: 800; }74 75 /* CTA */76 .cta-buy {77 margin: 36px 32px 12px; background: #ff6f2f; color: #fff; height: 126px; border-radius: 12px;78 display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: 800; letter-spacing: 0.5px;79 }80 .emi-text {81 text-align: center; color: #5e5e5e; font-size: 40px; margin-bottom: 22px;82 }83 .emi-text .arrow { width: 22px; height: 22px; display: inline-block; margin-left: 8px; border: solid #888; border-width: 0 6px 6px 0; transform: rotate(-45deg); }84 85 /* Need Experts Advice */86 .experts {87 background: #f3f3f3; border-top: 2px solid #eaeaea; border-bottom: 2px solid #eaeaea;88 padding: 0 32px; height: 120px; display: flex; align-items: center; justify-content: space-between;89 font-size: 44px; font-weight: 700; color: #3a3a3a;90 }91 92 /* More section + chat overlay */93 .more-section { padding: 30px 32px; }94 .more-title { font-size: 52px; font-weight: 800; color: #9a6a35; }95 .chat-overlay {96 position: absolute; right: 24px; top: 1460px; display: flex; align-items: center; gap: 12px;97 }98 .chat-bubble {99 background: #ff7a2c; color: #fff; font-weight: 800; font-size: 36px; padding: 16px 18px; border-radius: 18px;100 display: flex; align-items: center; gap: 12px;101 box-shadow: 0 4px 12px rgba(0,0,0,0.12);102 }103 .chat-face {104 width: 100px; height: 80px; background: #fff; border: 2px solid #ddd; border-radius: 16px; position: relative;105 }106 .chat-face::before, .chat-face::after {107 content: ""; position: absolute; top: 18px; width: 22px; height: 22px; background: #000; border-radius: 50%;108 }109 .chat-face::before { left: 26px; }110 .chat-face::after { right: 26px; }111 .chat-close {112 width: 48px; height: 48px; margin-left: 8px;113 }114 115 /* Bottom action buttons */116 .bottom-ctas {117 position: absolute; left: 0; right: 0; bottom: 260px; padding: 0 32px; display: flex; gap: 24px;118 }119 .btn-outline {120 flex: 1; height: 124px; border: 4px solid #ff6f2f; border-radius: 16px; color: #ff6f2f; font-size: 48px; font-weight: 800;121 display: flex; align-items: center; justify-content: center; background: #fff;122 }123 .btn-solid {124 flex: 1; height: 124px; background: #ff6f2f; border-radius: 16px; color: #fff; font-size: 48px; font-weight: 800;125 display: flex; align-items: center; justify-content: center;126 }127 128 /* Bottom navigation */129 .bottom-nav {130 position: absolute; left: 0; right: 0; bottom: 76px; height: 160px;131 background: #fff; border-top: 2px solid #eee; display: flex; align-items: center; justify-content: space-around;132 font-size: 32px; color: #777;133 }134 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }135 .nav-item svg { width: 56px; height: 56px; }136 .active { color: #ff6f2f; font-weight: 800; }137 .gesture-bar {138 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);139 width: 300px; height: 14px; background: #0f0f10; border-radius: 8px; opacity: 0.8;140 }141</style>142</head>143<body>144<div id="render-target">145 <!-- Status bar -->146 <div class="status-bar">147 <div>9:15</div>148 <div class="status-icons">149 <span class="dot"></span>150 <span class="dot"></span>151 <span class="dot"></span>152 <span class="dot"></span>153 <div class="battery">154 <svg viewBox="0 0 24 12"><rect x="1" y="1" width="20" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="22" y="4" width="2" height="4" fill="#fff"/></svg>155 <span>94%</span>156 </div>157 </div>158 </div>159 160 <!-- Content -->161 <div class="content">162 <div class="section-list">163 <div class="list-row">164 <span>Seller</span>165 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>166 </div>167 <div class="list-row">168 <span>Warranty</span>169 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>170 </div>171 <div class="list-row">172 <span>Customer Reviews & Images</span>173 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>174 </div>175 <div class="list-row" style="border-bottom: 4px solid #eaeaea;">176 <span>Q&A</span>177 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>178 </div>179 </div>180 181 <!-- Buy this Set Header -->182 <div class="buy-set-header">183 <div>Buy this Set</div>184 <svg class="close-x" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#000" stroke-width="3" stroke-linecap="round"/></svg>185 </div>186 187 <!-- Buy on Phone floating -->188 <div class="buy-on-phone">189 <svg class="phone-ic" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" ry="2" fill="none" stroke="#ff7a2c" stroke-width="2"/><circle cx="12" cy="18" r="1.5" fill="#ff7a2c"/></svg>190 <span>Buy On Phone</span>191 </div>192 193 <!-- Product cards -->194 <div class="products-row">195 <div class="product-card">196 <div class="img-placeholder">197 <span class="tag-product">This Product</span>198 [IMG: Brown Sofa in living room]199 </div>200 <div class="prod-title">Luiz Sofa Cum Bed...</div>201 <div class="prod-sub">By Mintwud from Pep...</div>202 <div class="price-row">203 <div class="price-now">₹12,999</div>204 <div class="price-old">₹25,999</div>205 </div>206 <div class="discount">50%</div>207 </div>208 209 <div class="product-card">210 <div class="img-placeholder">211 <div class="check-badge">212 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"/></svg>213 </div>214 [IMG: Orange Fabric Care Kit products]215 </div>216 <div class="prod-title">Fabric Care Kit</div>217 <div class="prod-sub">By Casacraft from Pep...</div>218 <div class="price-row">219 <div class="price-now">₹1,499</div>220 <div class="price-old">₹2,499</div>221 </div>222 <div class="discount">40%</div>223 </div>224 </div>225 226 <!-- CTA -->227 <div class="cta-buy">BUY FOR ₹14,498</div>228 <div class="emi-text">Or From ₹697/mo With EMI <span class="arrow"></span></div>229 230 <!-- Experts -->231 <div class="experts">232 <span>Need Experts Advice?</span>233 <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>234 </div>235 236 <!-- More section -->237 <div class="divider-thin"></div>238 <div class="more-section">239 <div class="more-title">Check Out More Convertible Sofa Cum...</div>240 <div style="display:flex; gap:18px; margin-top:18px;">241 <div class="img-placeholder" style="width: 330px; height: 220px;">[IMG: Sofa option 1]</div>242 <div class="img-placeholder" style="width: 330px; height: 220px;">[IMG: Sofa option 2]</div>243 <div class="img-placeholder" style="width: 330px; height: 220px;">[IMG: Sofa option 3]</div>244 </div>245 </div>246 247 <!-- Chat overlay -->248 <div class="chat-overlay">249 <div class="chat-face"></div>250 <div class="chat-bubble">251 <svg viewBox="0 0 24 24" style="width:28px;height:28px;"><rect x="4" y="5" width="16" height="12" rx="2" ry="2" fill="#fff"/></svg>252 <span>Let's Chat</span>253 </div>254 <svg class="chat-close" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#000" stroke-width="3" stroke-linecap="round"/></svg>255 </div>256 257 <!-- Bottom CTAs -->258 <div class="bottom-ctas">259 <div class="btn-outline">ADD TO CART</div>260 <div class="btn-solid">BUY NOW</div>261 </div>262 263 <!-- Bottom Nav -->264 <div class="bottom-nav">265 <div class="nav-item active">266 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#ff6f2f" stroke-width="2"/><path d="M9 21v-6h6v6" fill="none" stroke="#ff6f2f" stroke-width="2"/></svg>267 <div>Home</div>268 </div>269 <div class="nav-item">270 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/><path d="M4 21c2-4 6-6 8-6s6 2 8 6" fill="none" stroke="#777" stroke-width="2"/></svg>271 <div>My Account</div>272 </div>273 <div class="nav-item">274 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#777" stroke-width="2"/><path d="M6 6v-2h12v2" fill="none" stroke="#777" stroke-width="2"/><path d="M12 10l2 2-2 2-2-2z" fill="#777"/></svg>275 <div>Gift Cards</div>276 </div>277 <div class="nav-item">278 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7" fill="none" stroke="#777" stroke-width="2"/><text x="12" y="16" text-anchor="middle" font-size="10" fill="#ff6f2f" font-weight="700">pf</text></svg>279 <div>Stores</div>280 </div>281 <div class="nav-item">282 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/><rect x="13" y="3" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/><rect x="3" y="13" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/><rect x="13" y="13" width="8" height="8" fill="none" stroke="#777" stroke-width="2"/></svg>283 <div>Categories</div>284 </div>285 </div>286 287 <div class="gesture-bar"></div>288 </div>289</div>290</body>291</html>