GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile UI - Floor Lamp Results</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Header */15 .header {16 width: 100%;17 background: linear-gradient(180deg, #8DDAD3 0%, #B7EBE2 100%);18 padding: 32px 32px 20px 32px;19 box-sizing: border-box;20 }21 .top-bar {22 display: flex; align-items: center; gap: 24px;23 margin-top: 8px;24 }25 .back-btn {26 width: 64px; height: 64px; border-radius: 32px;27 display: flex; align-items: center; justify-content: center;28 }29 .search-bar {30 flex: 1;31 height: 104px; background: #fff; border-radius: 28px;32 box-shadow: 0 2px 0 rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.08);33 display: flex; align-items: center; padding: 0 20px;34 box-sizing: border-box;35 }36 .search-chip {37 display: inline-flex; align-items: center; gap: 16px; padding-left: 12px;38 color: #555; font-size: 36px;39 }40 .search-actions { margin-left: auto; display: flex; gap: 18px; }41 .icon-btn { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }42 43 .location {44 display: flex; align-items: center; gap: 14px;45 color: #114c58; font-size: 32px;46 margin: 22px 6px 18px 6px;47 }48 49 .chips {50 display: flex; align-items: center; gap: 18px;51 overflow: hidden;52 padding: 8px 4px 12px 4px;53 }54 .chip {55 border: 1px solid #D6E7E3; color: #1e6f73; background: #EAF7F4;56 padding: 18px 26px; border-radius: 24px; font-size: 30px;57 white-space: nowrap;58 }59 .chip.outline {60 background: #fff; border-color: #D0E7E2; color: #3a8c90;61 }62 63 /* Content */64 .content {65 padding: 20px 28px 220px 28px; /* keep space for bottom bar */66 box-sizing: border-box;67 }68 .brand-block {69 background: #fff; border-radius: 18px;70 }71 .brand-head {72 display: flex; align-items: center; gap: 20px;73 font-size: 36px; color: #222; padding: 10px 4px 16px 4px;74 }75 .brand-logo {76 width: 96px; height: 96px; border-radius: 48px; background: #E0E0E0; border: 1px solid #BDBDBD;77 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px;78 flex: 0 0 auto;79 }80 .brand-grid {81 display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;82 margin-top: 6px;83 }84 .img-tile {85 background: #E0E0E0; border: 1px solid #BDBDBD; height: 220px;86 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;87 }88 .tile-caption { text-align: center; margin-top: 14px; color: #333; font-size: 30px; }89 .row-split { height: 1px; background: #E6E6E6; margin: 18px 0; }90 .brand-footer {91 display: flex; align-items: center; justify-content: space-between;92 font-size: 32px; color: #1a8c8f;93 }94 .sponsored-tag { color: #8c8c8c; font-size: 28px; display: inline-flex; align-items: center; gap: 6px; }95 96 .note {97 margin: 20px 0 18px 0; color: #606060; font-size: 30px; line-height: 1.35;98 }99 100 /* Product card */101 .product-card {102 position: relative;103 display: grid; grid-template-columns: 360px 1fr; gap: 26px;104 background: #fff; border: 1px solid #EFEFEF; border-radius: 24px;105 padding: 20px; box-sizing: border-box;106 }107 .ribbon {108 position: absolute; left: 0; top: -22px; background: #F59A23; color: #fff;109 padding: 14px 22px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;110 font-weight: bold; font-size: 28px;111 }112 .product-img {113 width: 100%; height: 430px; background: #E0E0E0; border: 1px solid #BDBDBD;114 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 8px;115 }116 .prod-title { font-size: 36px; color: #222; line-height: 1.25; margin: 4px 0 8px 0; }117 .subtle { color: #8a8a8a; font-size: 28px; }118 .rating { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 30px; }119 .stars { color: #F6A500; letter-spacing: 2px; font-size: 34px; }120 .deal-row { margin: 14px 0 6px 0; display: flex; align-items: center; gap: 12px; }121 .deal-badge { background: #C1002A; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: bold; font-size: 28px; }122 .deal-text { color: #C1002A; font-weight: bold; font-size: 28px; }123 .price-row { display: flex; align-items: baseline; gap: 16px; margin: 8px 0; }124 .price { font-size: 48px; font-weight: bold; }125 .mrp { color: #8c8c8c; text-decoration: line-through; font-size: 28px; }126 .shipping { color: #444; font-size: 30px; margin: 6px 0; }127 .variants { color: #1a8c8f; font-size: 30px; text-decoration: underline; margin: 6px 0 14px 0; }128 .cta {129 background: #FFD814; color: #111; font-size: 34px; font-weight: bold;130 border: none; border-radius: 16px; padding: 26px 24px; width: 460px; text-align: center;131 }132 133 /* Bottom navigation */134 .bottom-nav {135 position: absolute; left: 0; bottom: 56px; width: 100%; height: 170px;136 background: #ffffff; border-top: 1px solid #E7E7E7;137 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;138 }139 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #222; font-size: 28px; }140 .nav-item.active { color: #00A7A1; }141 .gesture {142 position: absolute; left: 50%; transform: translateX(-50%);143 bottom: 18px; width: 360px; height: 10px; background: #A9A9A9; border-radius: 6px;144 }145 146 /* Small reusable icon style */147 .icon { width: 40px; height: 40px; }148 .icon24 { width: 48px; height: 48px; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Header with search -->155 <div class="header">156 <div class="top-bar">157 <div class="back-btn">158 <svg class="icon" viewBox="0 0 24 24" fill="#1f1f1f">159 <polyline points="15,4 7,12 15,20" stroke="#1f1f1f" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>160 </svg>161 </div>162 163 <div class="search-bar">164 <svg class="icon24" viewBox="0 0 24 24" fill="none">165 <circle cx="11" cy="11" r="7" stroke="#6c6c6c" stroke-width="2"></circle>166 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#6c6c6c" stroke-width="2" stroke-linecap="round"></line>167 </svg>168 <div class="search-chip">floor lamp</div>169 <div class="search-actions">170 <!-- scan icon -->171 <div class="icon-btn">172 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#4a4a4a" stroke-width="2">173 <path d="M3 8V5c0-1.1.9-2 2-2h3M21 8V5c0-1.1-.9-2-2-2h-3M3 16v3c0 1.1.9 2 2 2h3M21 16v3c0 1.1-.9 2-2 2h-3"></path>174 <rect x="7" y="7" width="10" height="10" rx="2"></rect>175 </svg>176 </div>177 <!-- mic icon -->178 <div class="icon-btn">179 <svg class="icon24" viewBox="0 0 24 24" fill="#4a4a4a">180 <rect x="9" y="3" width="6" height="10" rx="3"></rect>181 <path d="M5 11a7 7 0 0 0 14 0" stroke="#4a4a4a" stroke-width="2" fill="none"></path>182 <line x1="12" y1="21" x2="12" y2="17" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"></line>183 </svg>184 </div>185 </div>186 </div>187 </div>188 189 <div class="location">190 <svg class="icon" viewBox="0 0 24 24" fill="#114c58">191 <path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"></path>192 <circle cx="12" cy="10" r="3" fill="#fff"></circle>193 </svg>194 <div>Delivering to Delhi 110001 - Update location</div>195 <svg class="icon" viewBox="0 0 24 24" fill="#114c58" style="margin-left:6px;">196 <polyline points="6,9 12,15 18,9" fill="none" stroke="#114c58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>197 </svg>198 </div>199 200 <div class="chips">201 <div class="chip outline">prime</div>202 <div class="chip">All Discounts</div>203 <div class="chip outline">★★★★☆ and up</div>204 <div class="chip outline">Filters (1)</div>205 </div>206 </div>207 208 <div class="content">209 <!-- Sponsored brand block -->210 <div class="brand-block">211 <div class="brand-head">212 <div class="brand-logo">[IMG]</div>213 <div>Premium Quality Floor Lamps And Table Lamps.</div>214 </div>215 216 <div class="brand-grid">217 <div>218 <div class="img-tile">[IMG: Floor Standing Lamp]</div>219 <div class="tile-caption">Floor Standing Lamps</div>220 </div>221 <div>222 <div class="img-tile">[IMG: Table Lamp]</div>223 <div class="tile-caption">Table Lamps</div>224 </div>225 <div>226 <div class="img-tile">[IMG: Most Loved]</div>227 <div class="tile-caption">The Most Loved Lamps</div>228 </div>229 </div>230 231 <div class="row-split"></div>232 233 <div class="brand-footer">234 <div>Shop the Divine Trends Store on Amazon ›</div>235 <div class="sponsored-tag">236 Sponsored237 <svg class="icon" viewBox="0 0 24 24" fill="#8c8c8c">238 <circle cx="12" cy="12" r="10" stroke="#8c8c8c" stroke-width="1.5" fill="none"></circle>239 <circle cx="12" cy="8" r="1.5" fill="#8c8c8c"></circle>240 <rect x="11" y="10.5" width="2" height="7" fill="#8c8c8c"></rect>241 </svg>242 </div>243 </div>244 </div>245 246 <div class="note">247 Check each product page for other buying options. Price and other details may vary based on product size and colour.248 </div>249 250 <!-- Product card -->251 <div class="product-card">252 <div class="ribbon">Best seller</div>253 <div class="product-img">[IMG: Floor Lamp with Shelves]</div>254 <div>255 <div class="subtle">Sponsored</div>256 <div class="prod-title">Crosscut Furniture Metal Floor Lamp with 3 Shelves (Fresh Yellow)</div>257 <div class="rating">258 <div style="color:#1a8c8f; font-weight:bold;">4.6</div>259 <div class="stars">★★★★★</div>260 <div class="subtle">(1,371)</div>261 </div>262 <div class="subtle">300+ bought in past month</div>263 264 <div class="deal-row">265 <div class="deal-badge">64% off</div>266 <div class="deal-text">Limited time deal</div>267 </div>268 269 <div class="price-row">270 <div class="price">₹1,799</div>271 <div class="mrp">M.R.P: ₹4,990</div>272 </div>273 274 <div class="shipping">FREE delivery Wed, 10 Jan</div>275 <div class="variants">+7 colours/patterns</div>276 277 <button class="cta">Add to Cart</button>278 </div>279 </div>280 </div>281 282 <!-- Bottom navigation -->283 <div class="bottom-nav">284 <div class="nav-item active">285 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#00A7A1" stroke-width="2">286 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z"></path>287 </svg>288 <div>Home</div>289 </div>290 <div class="nav-item">291 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">292 <circle cx="12" cy="8" r="4"></circle>293 <path d="M4 21c2-4 14-4 16 0"></path>294 </svg>295 <div>You</div>296 </div>297 <div class="nav-item">298 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">299 <rect x="4" y="4" width="16" height="10" rx="2"></rect>300 <path d="M8 18h8"></path>301 </svg>302 <div>More</div>303 </div>304 <div class="nav-item">305 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">306 <path d="M6 6h15l-2 10H7L6 6z"></path>307 <circle cx="9" cy="20" r="1.5" fill="#222"></circle>308 <circle cx="18" cy="20" r="1.5" fill="#222"></circle>309 </svg>310 <div>Cart</div>311 </div>312 <div class="nav-item">313 <svg class="icon24" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">314 <line x1="3" y1="6" x2="21" y2="6"></line>315 <line x1="3" y1="12" x2="21" y2="12"></line>316 <line x1="3" y1="18" x2="21" y2="18"></line>317 </svg>318 <div>Menu</div>319 </div>320 </div>321 322 <div class="gesture"></div>323</div>324</body>325</html>