GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Laptop Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: linear-gradient(180deg, #bfe7e4 0%, #d9f0ee 30%, #ffffff 100%);13 color: #1a1a1a;14 }15 16 /* Top status/time */17 .status-bar {18 height: 70px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #2c2c2c;24 font-size: 34px;25 opacity: 0.9;26 }27 .status-icons {28 display: flex;29 gap: 26px;30 align-items: center;31 }32 .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #2c2c2c; opacity: 0.8; }33 34 /* App bar with back + search */35 .app-bar {36 padding: 10px 26px 16px 26px;37 display: flex;38 align-items: center;39 gap: 18px;40 }41 .back-btn {42 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;43 border-radius: 32px;44 }45 .search-field {46 flex: 1;47 height: 108px;48 border-radius: 54px;49 background: #ffffff;50 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;51 display: flex; align-items: center; padding: 0 28px; gap: 20px;52 border: 1px solid #dcdcdc;53 font-size: 36px;54 }55 .search-text { color: #2a2a2a; flex: 1; }56 .icon-btn { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }57 58 /* Location row */59 .location-row {60 padding: 12px 26px;61 display: flex; align-items: center; gap: 18px;62 color: #2e2e2e;63 font-size: 34px;64 }65 .chev { margin-left: auto; color: #5a5a5a; }66 67 /* Filters row */68 .filters-row {69 padding: 10px 26px 24px;70 display: flex; align-items: center; gap: 20px;71 flex-wrap: nowrap;72 overflow: hidden;73 }74 .chip {75 background: #ffffff;76 border: 1px solid #dddddd;77 border-radius: 40px;78 padding: 18px 26px;79 font-size: 32px;80 color: #333;81 display: flex; align-items: center; gap: 14px;82 }83 .switch {84 width: 82px; height: 44px; background: #f0f0f0; border: 1px solid #d0d0d0; border-radius: 22px; position: relative;85 }86 .switch::after {87 content: ""; width: 38px; height: 38px; background: #ffffff; border: 1px solid #cfcfcf;88 border-radius: 50%; position: absolute; left: 4px; top: 2px;89 }90 91 /* Brand banner */92 .brand-banner {93 padding: 14px 26px;94 }95 .brand-header {96 display: flex; align-items: center; gap: 12px; color: #333; font-size: 34px; margin-bottom: 18px;97 }98 .brand-hero {99 background: #ffffff;100 border: 1px solid #e3e3e3;101 border-radius: 18px;102 padding: 18px;103 }104 .top-brand-badge {105 position: absolute; top: 16px; left: 16px;106 background: #3f3f3f; color: #ffffff; font-size: 28px; padding: 10px 16px; border-radius: 12px;107 }108 .hero-img {109 position: relative;110 height: 480px;111 border: 1px solid #bdbdbd;112 background: #E0E0E0;113 display: flex; align-items: center; justify-content: center;114 color: #757575;115 border-radius: 12px;116 }117 118 /* Small product cards under banner */119 .banner-cards {120 margin-top: 24px;121 display: grid;122 grid-template-columns: 1fr 1fr;123 gap: 22px;124 }125 .mini-card {126 background: #fff; border: 1px solid #e3e3e3; border-radius: 16px; padding: 18px;127 }128 .mini-img { height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;129 display: flex; align-items: center; justify-content: center; color: #757575; }130 .rating-row { margin-top: 14px; display: flex; align-items: center; gap: 12px; color: #f5a623; font-size: 32px; }131 .prime-badge { margin-top: 8px; color: #1a73e8; font-weight: bold; font-size: 28px; }132 133 /* Section links */134 .section-link {135 padding: 18px 26px;136 display: flex; align-items: center; justify-content: space-between; font-size: 34px;137 }138 .small-muted { color: #777; font-size: 30px; display: flex; align-items: center; gap: 8px; }139 140 /* CPU filter section */141 .section-title { font-size: 42px; font-weight: 700; padding: 12px 26px; }142 .cpu-row { padding: 8px 26px 16px; display: flex; gap: 18px; flex-wrap: wrap; }143 .cpu-chip { background: #fff; border: 1px solid #ddd; border-radius: 44px; padding: 18px 26px; font-size: 32px; }144 145 /* Sponsored product list item */146 .list-card {147 margin: 18px 26px;148 background: #fff; border: 1px solid #e3e3e3; border-radius: 18px;149 display: grid; grid-template-columns: 320px 1fr; gap: 20px;150 padding: 20px;151 }152 .list-img {153 height: 240px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;154 display: flex; align-items: center; justify-content: center; color: #757575;155 }156 .list-title { font-size: 34px; line-height: 1.32; color: #222; }157 .list-rating { margin-top: 12px; font-size: 32px; color: #f5a623; display: flex; align-items: center; gap: 10px; }158 .list-price { margin-top: 14px; font-size: 40px; font-weight: 700; color: #0f1111; }159 160 /* Bottom navigation */161 .bottom-nav {162 position: absolute; left: 0; right: 0; bottom: 0;163 height: 180px; background: #ffffff; border-top: 1px solid #e4e4e4;164 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;165 }166 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #2f2f2f; }167 .nav-item span { font-size: 30px; }168 .progress {169 position: absolute; left: 50%; transform: translateX(-50%); bottom: 186px;170 width: 700px; height: 12px; background: #e6e6e6; border-radius: 6px; overflow: hidden;171 }172 .progress::after { content: ""; display: block; height: 100%; width: 40%; background: #9e9e9e; }173 174 /* Simple star string styling */175 .stars { letter-spacing: 2px; }176 .muted { color: #666; }177</style>178</head>179<body>180<div id="render-target">181 182 <div class="status-bar">183 <div>9:25</div>184 <div class="status-icons">185 <div class="status-dot"></div>186 <div class="status-dot"></div>187 <div class="status-dot"></div>188 <div style="display:flex; align-items:center; gap:8px;">189 <span class="muted">99%</span>190 <svg width="40" height="24">191 <rect x="2" y="4" width="34" height="16" rx="4" ry="4" fill="#2c2c2c"></rect>192 <rect x="4" y="6" width="26" height="12" fill="#9bd36f"></rect>193 <rect x="36" y="8" width="4" height="8" fill="#2c2c2c"></rect>194 </svg>195 </div>196 </div>197 </div>198 199 <div class="app-bar">200 <div class="back-btn">201 <svg width="44" height="44" viewBox="0 0 24 24">202 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>203 </svg>204 </div>205 <div class="search-field">206 <svg width="42" height="42" viewBox="0 0 24 24">207 <circle cx="11" cy="11" r="7" stroke="#666" stroke-width="2" fill="none"></circle>208 <path d="M20 20l-4-4" stroke="#666" stroke-width="2" stroke-linecap="round"></path>209 </svg>210 <div class="search-text">laptop</div>211 <div class="icon-btn">212 <svg width="42" height="42" viewBox="0 0 24 24">213 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>214 <circle cx="12" cy="12" r="3" fill="none" stroke="#333" stroke-width="2"></circle>215 </svg>216 </div>217 </div>218 </div>219 220 <div class="location-row">221 <svg width="36" height="36" viewBox="0 0 24 24">222 <path d="M12 21s-6-6-6-10a6 6 0 1112 0c0 4-6 10-6 10z" fill="none" stroke="#333" stroke-width="2"></path>223 <circle cx="12" cy="11" r="2.5" fill="none" stroke="#333" stroke-width="2"></circle>224 </svg>225 <div>Delivering to Delhi 110001 - Update location</div>226 <div class="chev">227 <svg width="32" height="32" viewBox="0 0 24 24">228 <path d="M9 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>229 </svg>230 </div>231 </div>232 233 <div class="filters-row">234 <div class="chip">235 <span style="color:#1a73e8; font-weight:bold;">prime</span>236 <div class="switch"></div>237 </div>238 <div class="chip">239 <span class="stars">★ ★ ★ ★</span>240 <span> & Up</span>241 </div>242 <div class="chip">SSD</div>243 <div class="chip">New</div>244 <div class="chip">Filters245 <svg width="28" height="28" viewBox="0 0 24 24">246 <path d="M9 6l6 6-6 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>247 </svg>248 </div>249 </div>250 251 <div class="brand-banner">252 <div class="brand-header">253 <span style="font-weight:bold;">hp</span>254 <span class="muted">with</span>255 <span style="font-weight:bold;">Windows 11</span>256 <span style="margin-left:14px;">Make the everyday easier</span>257 </div>258 <div class="brand-hero" style="position:relative;">259 <div class="top-brand-badge">Top Brand</div>260 <div class="hero-img">[IMG: HP Laptop on desk hero]</div>261 262 <div class="banner-cards">263 <div class="mini-card">264 <div class="mini-img">[IMG: HP small product 1]</div>265 <div class="rating-row"><span class="stars">★ ★ ★ ★ ☆</span><span class="muted">1,393</span></div>266 <div class="prime-badge">prime</div>267 </div>268 <div class="mini-card">269 <div class="mini-img">[IMG: HP small product 2]</div>270 <div class="rating-row"><span class="stars">★ ★ ★ ★ ☆</span><span class="muted">Prime</span></div>271 </div>272 </div>273 </div>274 </div>275 276 <div class="section-link">277 <div style="color:#0f1111;">Shop HP laptops ›</div>278 <div class="small-muted">279 <span>Sponsored</span>280 <svg width="22" height="22" viewBox="0 0 24 24">281 <circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"></circle>282 <path d="M12 10v6" stroke="#777" stroke-width="2" stroke-linecap="round"></path>283 <circle cx="12" cy="7" r="1.5" fill="#777"></circle>284 </svg>285 </div>286 </div>287 288 <div class="section-title">Filter by CPU type</div>289 <div class="cpu-row">290 <div class="cpu-chip">Intel Core i5</div>291 <div class="cpu-chip">Intel Core i7</div>292 <div class="cpu-chip">Intel Core i3</div>293 <div class="cpu-chip">AMD Ryzen 5</div>294 <div class="cpu-chip">AMD Ryzen 7</div>295 </div>296 297 <div class="list-card">298 <div class="list-img">[IMG: HP Chromebook X360]</div>299 <div>300 <div class="small-muted">Sponsored</div>301 <div class="list-title">302 HP Chromebook X360, Intel Celeron N4120, 14-Inch (35.6 Cm), Hd, 4Gb Lpddr4, 64Gb...303 </div>304 <div class="list-rating"><span>3.8</span><span class="stars">★ ★ ★ ★ ☆</span><span class="muted">(277)</span></div>305 <div class="list-price">₹27,490</div>306 </div>307 </div>308 309 <!-- Space filler to align with bottom nav like the app -->310 <div style="height: 680px;"></div>311 312 <div class="progress"></div>313 314 <div class="bottom-nav">315 <div class="nav-item">316 <svg width="44" height="44" viewBox="0 0 24 24">317 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z" fill="none" stroke="#333" stroke-width="2"></path>318 </svg>319 <span>Home</span>320 </div>321 <div class="nav-item">322 <svg width="44" height="44" viewBox="0 0 24 24">323 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"></circle>324 <path d="M4 21c0-4 4-6 8-6s8 2 8 6" stroke="#333" stroke-width="2" fill="none"></path>325 </svg>326 <span>You</span>327 </div>328 <div class="nav-item">329 <svg width="44" height="44" viewBox="0 0 24 24">330 <path d="M12 5l6 6-6 6-6-6z" stroke="#333" stroke-width="2" fill="none"></path>331 </svg>332 <span>More</span>333 </div>334 <div class="nav-item">335 <svg width="44" height="44" viewBox="0 0 24 24">336 <path d="M6 6h14l-2 10H8L6 6z" stroke="#333" stroke-width="2" fill="none"></path>337 <circle cx="9" cy="20" r="2" fill="none" stroke="#333" stroke-width="2"></circle>338 <circle cx="17" cy="20" r="2" fill="none" stroke="#333" stroke-width="2"></circle>339 </svg>340 <span>Cart</span>341 </div>342 <div class="nav-item">343 <svg width="44" height="44" viewBox="0 0 24 24">344 <path d="M4 6h16M4 12h16M4 18h16" stroke="#333" stroke-width="2" stroke-linecap="round"></path>345 </svg>346 <span>Menu</span>347 </div>348 </div>349 350</div>351</body>352</html>