GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Dark Blue Yoga Pants Search</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg,#bfe7e6 0%, #d3f0ee 18%, #ffffff 34%, #ffffff 100%);13 color: #1f2a2e;14 }15 /* General helpers */16 .row { display: flex; align-items: center; }17 .spacer { flex: 1; }18 .pill {19 background: #fff;20 border-radius: 56px;21 border: 1px solid #d6d6d6;22 box-shadow: 0 2px 6px rgba(0,0,0,0.08);23 }24 .icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }25 .small { font-size: 28px; color: #5a6a71; }26 .muted { color: #6b7c82; }27 .section-title { font-size: 44px; font-weight: 700; color: #1f2a2e; }28 /* Status bar */29 .status-bar {30 height: 96px;31 padding: 0 36px;32 font-size: 36px;33 color: #334a4e;34 }35 .status-icons svg { margin-left: 26px; }36 /* Search header */37 .search-header {38 padding: 18px 24px 28px 24px;39 }40 .search-bar {41 height: 120px;42 padding: 0 20px;43 display: flex;44 align-items: center;45 gap: 16px;46 }47 .search-input {48 flex: 1;49 height: 88px;50 line-height: 88px;51 font-size: 40px;52 color: #1f2a2e;53 }54 .back-btn {55 width: 92px;56 height: 92px;57 display: flex;58 align-items: center;59 justify-content: center;60 margin-right: 20px;61 }62 /* Location row */63 .location-row {64 padding: 8px 36px;65 height: 84px;66 font-size: 34px;67 color: #2c3e43;68 }69 .location-row .muted { color: #4b5f66; }70 /* Prime/Filters row */71 .prime-filters {72 padding: 20px 36px;73 height: 98px;74 display: flex;75 align-items: center;76 }77 .prime-toggle {78 display: inline-flex;79 align-items: center;80 gap: 16px;81 font-weight: 700;82 color: #3078ff;83 font-size: 36px;84 }85 .toggle {86 width: 96px; height: 52px; border-radius: 28px;87 border: 1px solid #cfd8dc; background: #fff; position: relative;88 }89 .toggle::after {90 content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%;91 background: #e0e0e0; top: 4px; left: 4px;92 }93 .filters-btn {94 margin-left: auto; font-size: 36px; color: #2c3e43;95 display: inline-flex; align-items: center; gap: 12px;96 }97 /* Content area */98 .content {99 background: #ffffff;100 border-top: 1px solid #e7ecef;101 padding-bottom: 220px; /* space above bottom nav */102 }103 /* Sponsored Gloot section */104 .gloot-header {105 padding: 34px 36px 12px 36px;106 display: flex; align-items: center; gap: 20px;107 }108 .gloot-logo {109 width: 84px; height: 84px; border-radius: 18px;110 background: #000; color: #fff; display: flex; align-items: center; justify-content: center;111 font-weight: 800; font-size: 44px;112 }113 .ad-banner {114 margin: 0 36px;115 height: 640px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 24px;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 38px; text-align: center;121 }122 .ad-product-row {123 margin: 18px 36px 0 36px;124 display: grid; grid-template-columns: 180px 1fr; gap: 24px;125 align-items: center;126 }127 .thumbnail {128 width: 180px; height: 240px;129 background: #E0E0E0; border: 1px solid #BDBDBD;130 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 12px;131 }132 .ad-text { font-size: 36px; line-height: 1.34; color: #27363b; }133 .rating-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }134 .star { width: 36px; height: 36px; }135 .prime-badge {136 margin-left: 16px; padding: 6px 14px; border: 1px solid #cfd8dc;137 border-radius: 18px; color: #3078ff; font-weight: 700; font-size: 28px;138 }139 .gloot-footer {140 margin: 18px 36px 0 36px;141 display: flex; align-items: center;142 color: #3b5dff; font-size: 34px;143 }144 .sponsored { margin-left: auto; color: #77878c; display: inline-flex; align-items: center; gap: 10px; }145 /* Product list strip */146 .note-strip {147 margin: 28px 0 12px 0;148 padding: 24px 36px;149 border-top: 1px solid #eef2f4;150 border-bottom: 1px solid #eef2f4;151 font-size: 32px; color: #566a70;152 background: #fafafa;153 }154 .cards {155 display: grid; grid-template-columns: 1fr 1fr; gap: 24px;156 padding: 0 36px;157 }158 .card {159 border: 1px solid #e2e6ea; border-radius: 20px; background: #fff;160 overflow: hidden;161 }162 .card-img {163 height: 420px;164 background: #E0E0E0; border-bottom: 1px solid #d9dee2;165 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;166 }167 .card-body { padding: 20px; }168 .best-seller {169 position: absolute; top: 0; left: 36px;170 background: #ffb355; color: #fff; font-weight: 700; font-size: 32px;171 padding: 12px 22px; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;172 }173 /* Bottom navigation */174 .bottom-nav {175 position: absolute; bottom: 0; left: 0; right: 0;176 height: 150px; background: #ffffff; border-top: 1px solid #e5eaee;177 display: flex; justify-content: space-around; align-items: center;178 }179 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #16262b; }180 .nav-item .label { font-size: 30px; }181 /* Tiny helper icons */182 .chev-down { width: 28px; height: 28px; margin-left: 10px; }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status Bar -->189 <div class="status-bar row">190 <div>9:36</div>191 <div class="spacer"></div>192 <div class="status-icons row">193 <!-- simple status icons -->194 <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a8b90"/></svg>195 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M2 17h20v2H2zm4-4h12v2H6zm4-4h4v2h-4z" fill="#7a8b90"/></svg>196 <svg width="38" height="38" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="#7a8b90"/><rect x="20" y="9" width="2" height="6" fill="#7a8b90"/></svg>197 <div class="small" style="margin-left:8px;">100%</div>198 </div>199 </div>200 201 <!-- Search Header -->202 <div class="search-header">203 <div class="row">204 <div class="back-btn">205 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#1f2a2e" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>206 </div>207 <div class="pill search-bar" style="flex:1;">208 <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#6a7b80" stroke-width="2" fill="none"/><path d="M21 21l-5-5" stroke="#6a7b80" stroke-width="2" stroke-linecap="round"/></svg>209 <div class="search-input">dark blue yoga pants</div>210 <div class="icon">211 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" stroke="#6a7b80" stroke-width="2" fill="none"/><circle cx="12" cy="12" r="3" stroke="#6a7b80" stroke-width="2" fill="none"/></svg>212 </div>213 </div>214 </div>215 216 <!-- Location Row -->217 <div class="location-row row">218 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#2e4c52"/></svg>219 <div style="margin-left:16px;">Delivering to Delhi 110001 <span class="muted">- Update location</span></div>220 <svg class="chev-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#4b5f66"/></svg>221 </div>222 223 <!-- Prime / Filters -->224 <div class="prime-filters">225 <div class="prime-toggle">226 prime227 <div class="toggle"></div>228 </div>229 <div class="filters-btn">230 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M3 5h18v2H3zm4 6h10v2H7zm3 6h4v2h-4z" fill="#2c3e43"/></svg>231 Filters232 <svg class="chev-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#2c3e43"/></svg>233 </div>234 </div>235 </div>236 237 <!-- Main Content -->238 <div class="content">239 240 <!-- Sponsored brand header -->241 <div class="gloot-header">242 <div class="gloot-logo">G</div>243 <div class="section-title">Exclusive Track Pants for Men by Gloot</div>244 </div>245 246 <!-- Banner Image -->247 <div class="ad-banner">[IMG: Gloot track pants ad banner with model and headline]</div>248 249 <!-- Product detail preview below banner -->250 <div class="ad-product-row">251 <div class="thumbnail">[IMG: Track pants]</div>252 <div>253 <div class="ad-text">GLOOT Men's Sports Gym Track Pants Anti Odor | 360° Stretchable Fabric | Sun Protection | Smart...</div>254 <div class="rating-row">255 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.3 5.1 1.3 7.1L12 18l-6.7 4 1.3-7.1-5.3-5.1 7.4-1.1L12 2z" fill="#f5a623"/></svg>256 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.3 5.1 1.3 7.1L12 18l-6.7 4 1.3-7.1-5.3-5.1 7.4-1.1L12 2z" fill="#f5a623"/></svg>257 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.3 5.1 1.3 7.1L12 18l-6.7 4 1.3-7.1-5.3-5.1 7.4-1.1L12 2z" fill="#f5a623"/></svg>258 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.3 5.1 1.3 7.1L12 18l-6.7 4 1.3-7.1-5.3-5.1 7.4-1.1L12 2z" fill="#f5a623"/></svg>259 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.3 6.7 7.4 1.1-5.3 5.1 1.3 7.1L12 18l-6.7 4 1.3-7.1-5.3-5.1 7.4-1.1L12 2z" fill="#d9d9d9"/></svg>260 <div class="small" style="margin-left:8px;">(47)</div>261 <div class="prime-badge">prime</div>262 </div>263 </div>264 </div>265 266 <!-- Shop link / sponsored -->267 <div class="gloot-footer">268 <div>Shop Gloot</div>269 <div class="sponsored">270 Sponsored271 <svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#97a7ac" stroke-width="2" fill="none"/><path d="M12 7v6" stroke="#97a7ac" stroke-width="2"/><circle cx="12" cy="17" r="1.2" fill="#97a7ac"/></svg>272 </div>273 </div>274 275 <!-- Note strip -->276 <div class="note-strip">Price and other details may vary based on product size and colour.</div>277 278 <!-- Product cards -->279 <div class="best-seller">Best seller</div>280 <div class="cards" style="position: relative;">281 <div class="card">282 <div class="card-img">[IMG: Yoga pants - black with side pocket]</div>283 <div class="card-body">284 <div style="font-size:34px; color:#232f3e;">Women's High-Rise Yoga Pants with Utility Pocket</div>285 </div>286 </div>287 <div class="card">288 <div class="card-img">[IMG: Yoga pants - sage green two-tone]</div>289 <div class="card-body">290 <div style="font-size:34px; color:#232f3e;">Women's Yoga Shorts with Large Side Pocket</div>291 </div>292 </div>293 </div>294 295 </div>296 297 <!-- Bottom Navigation -->298 <div class="bottom-nav">299 <div class="nav-item">300 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H3z" fill="#2c3e43"/></svg>301 <div class="label">Home</div>302 </div>303 <div class="nav-item">304 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#2c3e43"/><path d="M4 22c0-4 4-7 8-7s8 3 8 7" fill="#2c3e43"/></svg>305 <div class="label">You</div>306 </div>307 <div class="nav-item">308 <svg width="48" height="48" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" fill="#2c3e43"/><path d="M8 8h8v8H8z" fill="#fff"/></svg>309 <div class="label">More</div>310 </div>311 <div class="nav-item">312 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M6 6h14l-2 9H7L6 6z" fill="#2c3e43"/><circle cx="9" cy="20" r="2" fill="#2c3e43"/><circle cx="17" cy="20" r="2" fill="#2c3e43"/></svg>313 <div class="label">Cart</div>314 </div>315 <div class="nav-item">316 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" fill="#2c3e43"/></svg>317 <div class="label">Menu</div>318 </div>319 </div>320 321</div>322</body>323</html>