GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Milk Search UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #3d2a2a;15 }16 17 .status-bar {18 height: 64px;19 padding: 16px 24px;20 font-size: 28px;21 color: #333;22 display: flex;23 align-items: center;24 justify-content: space-between;25 }26 .status-right { display: flex; align-items: center; gap: 20px; }27 .wifi-icon, .battery-icon {28 width: 36px; height: 24px;29 border: 2px solid #555; border-radius: 4px;30 }31 .camera-notch {32 width: 28px; height: 28px; background: #888; border-radius: 6px; display: inline-block; margin-left: 10px;33 }34 35 .top-bar {36 display: flex; align-items: center; justify-content: space-between;37 padding: 12px 40px;38 }39 .icon-btn {40 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; cursor: default;41 }42 .icon-btn svg { width: 36px; height: 36px; }43 44 .search-wrap {45 padding: 8px 40px 0 40px;46 }47 .search-bar {48 height: 96px;49 border: 3px solid #2f2f2f;50 border-radius: 48px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 padding: 0 28px;55 }56 .search-left {57 display: flex; align-items: center; gap: 18px; color: #666; font-size: 36px;58 }59 .search-right { display: flex; align-items: center; gap: 12px; color: #666; }60 61 .controls-row {62 display: grid;63 grid-template-columns: 1fr auto auto;64 align-items: center;65 padding: 32px 40px 20px 40px;66 gap: 24px;67 }68 .results-text { font-size: 34px; color: #5a2a2a; }69 70 .tabs {71 display: flex; gap: 16px; align-items: center;72 }73 .tab-pill {74 height: 88px; padding: 0 46px; border-radius: 44px;75 display: inline-flex; align-items: center; justify-content: center;76 font-size: 34px; border: 1px solid #e6e1e1; color: #6b6b6b; background: #f2efef;77 }78 .tab-pill.active {79 background: #57121b; color: #fff; border-color: #57121b;80 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;81 }82 83 .refine {84 display: inline-flex; align-items: center; gap: 12px; font-size: 34px; color: #5a2a2a;85 }86 .refine svg { width: 40px; height: 40px; }87 88 .ad-card {89 margin: 0 40px 24px 40px;90 background: #fff; border: 1px solid #e6e6e6; border-radius: 24px;91 box-shadow: 0 6px 18px rgba(0,0,0,0.06);92 display: grid; grid-template-columns: 120px 1fr auto; align-items: center;93 padding: 20px;94 }95 .img-ph {96 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;97 display: flex; align-items: center; justify-content: center; text-align: center;98 }99 .ad-logo { width: 100px; height: 100px; border-radius: 50%; }100 .ad-content { display: flex; flex-direction: column; gap: 12px; }101 .ad-title { font-size: 32px; font-weight: 600; }102 .ad-link { font-size: 30px; color: #2f5bbd; text-decoration: underline; }103 .ad-tag { font-size: 28px; color: #999; }104 105 .grid {106 padding: 8px 40px 0 40px;107 display: grid;108 grid-template-columns: 1fr 1fr;109 gap: 28px;110 }111 .product-card {112 background: #fff;113 border: 1px solid #e5e5e5;114 border-radius: 28px;115 box-shadow: 0 6px 18px rgba(0,0,0,0.05);116 padding: 24px;117 position: relative;118 min-height: 720px;119 }120 .product-top {121 position: relative;122 height: 380px;123 border-radius: 22px;124 background: #fafafa;125 display: flex; align-items: center; justify-content: center;126 border: 1px solid #eee;127 }128 .product-top .img-ph { width: 100%; height: 100%; border: none; background: #E0E0E0; }129 .add-mini {130 position: absolute; right: 18px; top: 14px;131 width: 56px; height: 56px; border-radius: 14px;132 border: 1px solid #c9c9c9; display: flex; align-items: center; justify-content: center; background: #fff;133 }134 .rating {135 position: absolute; right: 18px; bottom: 16px;136 display: inline-flex; align-items: center; gap: 8px; font-size: 30px; color: #6b5b5b;137 }138 .rating svg { width: 30px; height: 30px; }139 140 .price { font-size: 44px; margin-top: 24px; color: #4a2a2a; }141 .price .old { font-size: 34px; color: #9b9b9b; text-decoration: line-through; margin-left: 10px; }142 .ea { font-size: 34px; color: #6b3a3a; margin-left: 6px; }143 144 .name { font-size: 34px; color: #3a2a2a; margin-top: 8px; line-height: 1.25; }145 .unit { font-size: 30px; color: #9b9b9b; margin-top: 6px; }146 147 .cta {148 margin-top: 26px;149 height: 100px; border-radius: 50px; background: #57121b; color: #fff;150 display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600;151 }152 153 .home-indicator {154 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);155 width: 360px; height: 14px; background: #000; opacity: 0.15; border-radius: 10px;156 }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div style="display:flex; align-items:center; gap:10px;">165 <span>11:20</span>166 <span class="camera-notch"></span>167 </div>168 <div class="status-right">169 <div class="wifi-icon"></div>170 <div class="battery-icon"></div>171 </div>172 </div>173 174 <!-- Top navigation -->175 <div class="top-bar">176 <div class="icon-btn" title="Back">177 <svg viewBox="0 0 24 24" fill="#7b2a2f">178 <path d="M15 5l-7 7 7 7" stroke="#7b2a2f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>179 </svg>180 </div>181 <div class="icon-btn" title="Cart">182 <svg viewBox="0 0 24 24" fill="#7b2a2f">183 <path d="M3 5h2l2 12h10l2-8H7" stroke="#7b2a2f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>184 <circle cx="9" cy="20" r="1.6" fill="#7b2a2f"/>185 <circle cx="17" cy="20" r="1.6" fill="#7b2a2f"/>186 </svg>187 </div>188 </div>189 190 <!-- Search -->191 <div class="search-wrap">192 <div class="search-bar">193 <div class="search-left">194 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">195 <circle cx="10" cy="10" r="7"></circle>196 <path d="M21 21l-5.5-5.5"></path>197 </svg>198 <span>milk</span>199 </div>200 <div class="search-right">201 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.8">202 <rect x="3" y="5" width="18" height="14" rx="2"></rect>203 <path d="M7 5v14M17 5v14M11 7h2M11 13h2"></path>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Controls row -->210 <div class="controls-row">211 <div class="results-text">1648 results</div>212 <div class="tabs">213 <div class="tab-pill active">Products</div>214 <div class="tab-pill">Deals</div>215 </div>216 <div class="refine">217 <svg viewBox="0 0 24 24" fill="none" stroke="#7b2a2f" stroke-width="2">218 <path d="M6 7h12M9 7v10M4 12h16M15 12v5" stroke-linecap="round"></path>219 </svg>220 <span>Refine</span>221 </div>222 </div>223 224 <!-- Sponsored banner -->225 <div class="ad-card">226 <div class="img-ph ad-logo">[IMG: Signature Logo]</div>227 <div class="ad-content">228 <div class="ad-title">Signature Select®</div>229 <div class="ad-link">Shop now</div>230 </div>231 <div class="ad-tag">Sponsored</div>232 </div>233 234 <!-- Product grid -->235 <div class="grid">236 <!-- Product 1 -->237 <div class="product-card">238 <div class="product-top">239 <div class="img-ph">[IMG: Gallon Milk Jug]</div>240 <div class="add-mini">241 <svg viewBox="0 0 24 24" fill="none" stroke="#7b2a2f" stroke-width="2">242 <rect x="3" y="3" width="18" height="18" rx="3"></rect>243 <path d="M12 7v10M7 12h10" stroke-linecap="round"></path>244 </svg>245 </div>246 <div class="rating">247 <svg viewBox="0 0 24 24" fill="#f0b429">248 <path d="M12 2l3.1 6.6 7.2 1.1-5.2 5 1.3 7.3L12 18l-6.3 4 1.3-7.3-5.2-5 7.2-1.1L12 2z"/>249 </svg>250 <span>4.8</span>251 </div>252 </div>253 <div class="price">$5.99 <span class="ea">ea</span></div>254 <div class="name">Lucerne Milk Whole 1 Gallon - 128 Fl. Oz.</div>255 <div class="unit">$0.05 / fl.oz</div>256 <div class="cta">Add to cart</div>257 </div>258 259 <!-- Product 2 -->260 <div class="product-card">261 <div class="product-top">262 <div class="img-ph">[IMG: NotMilk Whole Carton]</div>263 <div class="add-mini">264 <svg viewBox="0 0 24 24" fill="none" stroke="#7b2a2f" stroke-width="2">265 <rect x="3" y="3" width="18" height="18" rx="3"></rect>266 <path d="M12 7v10M7 12h10" stroke-linecap="round"></path>267 </svg>268 </div>269 <div class="rating" style="opacity:0.0;"></div>270 </div>271 <div class="price" style="color:#a92727;">$2.50 <span class="ea">ea</span><span class="old">$4.79</span></div>272 <div class="name">Notmilk Whole - 32 FZ</div>273 <div class="unit">$0.08 / fl.oz • SPONSORED</div>274 <div class="cta">Add to cart</div>275 </div>276 277 <!-- Product 3 -->278 <div class="product-card">279 <div class="product-top">280 <div class="img-ph">[IMG: Lucerne Milk Carton]</div>281 <div class="add-mini">282 <svg viewBox="0 0 24 24" fill="none" stroke="#7b2a2f" stroke-width="2">283 <rect x="3" y="3" width="18" height="18" rx="3"></rect>284 <path d="M12 7v10M7 12h10" stroke-linecap="round"></path>285 </svg>286 </div>287 <div class="rating">288 <svg viewBox="0 0 24 24" fill="#f0b429">289 <path d="M12 2l3.1 6.6 7.2 1.1-5.2 5 1.3 7.3L12 18l-6.3 4 1.3-7.3-5.2-5 7.2-1.1L12 2z"/>290 </svg>291 <span>4.8</span>292 </div>293 </div>294 <div class="price">$3.49 <span class="ea">ea</span></div>295 <div class="name">Lucerne Milk - 1 Quart</div>296 <div class="unit">$0.11 / fl.oz</div>297 <div class="cta">Add to cart</div>298 </div>299 300 <!-- Product 4 -->301 <div class="product-card">302 <div class="product-top">303 <div class="img-ph">[IMG: Horizon Organic Lowfat Milk]</div>304 <div class="add-mini">305 <svg viewBox="0 0 24 24" fill="none" stroke="#7b2a2f" stroke-width="2">306 <rect x="3" y="3" width="18" height="18" rx="3"></rect>307 <path d="M12 7v10M7 12h10" stroke-linecap="round"></path>308 </svg>309 </div>310 </div>311 <div class="price">$5.29 <span class="ea">ea</span></div>312 <div class="name">Horizon Organic Lowfat Milk - 1 Qt</div>313 <div class="unit">$0.16 / fl.oz</div>314 <div class="cta">Add to cart</div>315 </div>316 </div>317 318 <div class="home-indicator"></div>319</div>320</body>321</html>