GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shopping UI - White flour</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;14 }15 16 /* General helpers */17 .row { display: flex; align-items: center; }18 .space-between { justify-content: space-between; }19 .muted { color: #757575; }20 .accent { color: #FF6A00; }21 .bold { font-weight: 700; }22 .small { font-size: 28px; }23 .pill {24 background: #f2f2f2;25 border: 1px solid #e1e1e1;26 border-radius: 18px;27 padding: 6px 14px;28 font-size: 26px;29 color: #333;30 }31 32 /* Status bar */33 .status-bar {34 height: 100px;35 padding: 0 36px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 color: #222;40 font-weight: 600;41 font-size: 34px;42 }43 .status-right { display: flex; gap: 20px; align-items: center; color: #777; }44 .dot { width: 18px; height: 18px; background: #999; border-radius: 50%; display: inline-block; }45 .battery {46 width: 36px; height: 20px; border: 2px solid #666; border-radius: 4px; position: relative; margin-left: 6px;47 }48 .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #666; border-radius: 2px; }49 50 /* Header */51 .header {52 padding: 8px 36px 22px 36px;53 display: flex;54 align-items: center;55 justify-content: space-between;56 }57 .title { font-size: 56px; font-weight: 700; color: #222; margin-left: 16px; }58 .left-group { display: flex; align-items: center; gap: 18px; }59 .icon-btn {60 width: 64px; height: 64px; border-radius: 16px; border: none; background: transparent; display: flex; align-items: center; justify-content: center;61 }62 .cart { display: flex; align-items: center; gap: 16px; }63 .cart .amount { font-size: 34px; font-weight: 700; color: #333; }64 65 /* Search bar */66 .search-wrap {67 margin: 0 36px;68 border: 1px solid #ddd;69 border-radius: 28px;70 height: 108px;71 padding: 0 24px;72 display: flex;73 align-items: center;74 gap: 22px;75 background: #fafafa;76 }77 .search-text {78 font-size: 42px; color: #111; flex: 1; font-weight: 600;79 }80 .circle-icon { width: 64px; height: 64px; border-radius: 32px; background: #eee; display: flex; align-items: center; justify-content: center; }81 82 /* Found row */83 .found-row {84 margin: 36px;85 display: flex;86 align-items: baseline;87 justify-content: space-between;88 }89 .found-row .count { font-size: 48px; font-weight: 800; color: #222; }90 .found-row .filter { font-size: 44px; font-weight: 800; color: #ff6a00; }91 92 /* Product grid */93 .grid {94 margin: 0 36px;95 display: grid;96 grid-template-columns: 1fr 1fr;97 gap: 32px;98 }99 .card {100 position: relative;101 background: #fff;102 border-radius: 28px;103 box-shadow: 0 10px 20px rgba(0,0,0,0.08);104 padding: 26px;105 min-height: 540px;106 }107 .product-image {108 width: 100%;109 height: 300px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 border-radius: 20px;113 display: flex; align-items: center; justify-content: center;114 color: #757575; font-size: 30px; font-weight: 600;115 margin-bottom: 24px;116 }117 .plus-float {118 position: absolute;119 top: 20px; right: 20px;120 width: 72px; height: 72px; border-radius: 18px;121 background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12);122 display: flex; align-items: center; justify-content: center; border: 1px solid #eee;123 }124 .price {125 font-size: 64px; font-weight: 900; color: #222; letter-spacing: -1px; margin-top: 6px;126 }127 .name { font-size: 40px; font-weight: 800; color: #222; line-height: 1.2; margin-top: 8px; }128 .sub { font-size: 36px; font-weight: 700; color: #444; line-height: 1.2; }129 .meta { font-size: 32px; color: #777; margin-top: 8px; }130 .badge {131 position: absolute; left: 32px; top: 316px;132 background: #333; color: #fff; font-size: 30px; font-weight: 800;133 padding: 10px 18px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.15);134 }135 136 /* Bottom nav */137 .bottom-nav {138 position: absolute; bottom: 0; left: 0; right: 0;139 height: 180px; background: #fff; border-top: 1px solid #e6e6e6;140 display: flex; align-items: center; justify-content: space-around;141 }142 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #777; font-size: 28px; }143 .nav-item.active { color: #ff6a00; }144 .nav-icon {145 width: 84px; height: 84px; border-radius: 24px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; border: 1px solid #e8e8e8;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Status Bar -->153 <div class="status-bar">154 <div>10:02</div>155 <div class="status-right">156 <span class="dot"></span>157 <span class="dot"></span>158 <span class="dot"></span>159 <span class="dot"></span>160 <span class="dot"></span>161 <div class="battery"></div>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="left-group">168 <button class="icon-btn" aria-label="Back">169 <svg width="36" height="36" viewBox="0 0 24 24">170 <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>171 </svg>172 </button>173 <div class="title">Search</div>174 </div>175 <div class="cart">176 <div class="icon-btn">177 <svg width="40" height="40" viewBox="0 0 24 24">178 <path d="M3 5h2l2 12h10l2-8H7" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>179 <circle cx="9" cy="20" r="1.8" fill="#222"/>180 <circle cx="17" cy="20" r="1.8" fill="#222"/>181 </svg>182 </div>183 <div class="amount">105.00</div>184 </div>185 </div>186 187 <!-- Search Bar -->188 <div class="search-wrap">189 <div class="icon-btn">190 <svg width="44" height="44" viewBox="0 0 24 24">191 <circle cx="11" cy="11" r="7" fill="none" stroke="#444" stroke-width="2"/>192 <path d="M20 20l-3.5-3.5" stroke="#444" stroke-width="2" stroke-linecap="round"/>193 </svg>194 </div>195 <div class="search-text">White flour</div>196 <div class="icon-btn" aria-label="Clear">197 <svg width="40" height="40" viewBox="0 0 24 24">198 <path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/>199 </svg>200 </div>201 </div>202 203 <!-- Found row -->204 <div class="found-row">205 <div class="count">12 products found</div>206 <div class="filter accent">Filter & sort</div>207 </div>208 209 <!-- Product Grid -->210 <div class="grid">211 <!-- Card 1 -->212 <div class="card">213 <div class="plus-float" title="Add">214 <svg width="36" height="36" viewBox="0 0 24 24">215 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>216 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>217 </svg>218 </div>219 <div class="product-image">[IMG: Flour Pack - M-Classic white]</div>220 <div class="price">2.10</div>221 <div class="name">M-Classic IP-SUISSE</div>222 <div class="sub">White flour</div>223 <div class="meta">1 kg · 0.21/100g</div>224 </div>225 226 <!-- Card 2 -->227 <div class="card">228 <div class="plus-float" title="Add">229 <svg width="36" height="36" viewBox="0 0 24 24">230 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>231 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>232 </svg>233 </div>234 <div class="product-image">[IMG: Flour Pack - M-Classic half-white]</div>235 <div class="price">2.10</div>236 <div class="name">M-Classic IP-SUISSE</div>237 <div class="sub">Wheat half-white flour</div>238 <div class="meta">1 kg · 0.21/100g</div>239 </div>240 241 <!-- Card 3 -->242 <div class="card">243 <div class="plus-float" title="Add">244 <svg width="36" height="36" viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>246 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>247 </svg>248 </div>249 <div class="product-image">[IMG: Flour 4-pack - M-Classic white]</div>250 <div class="badge">4 pack</div>251 <div class="price">8.40</div>252 <div class="name">M-Classic IP-SUISSE</div>253 <div class="sub">White flour Ideal for fine b...</div>254 <div class="meta">4 × 1 kg · 0.21/100g</div>255 </div>256 257 <!-- Card 4 -->258 <div class="card">259 <div class="plus-float" title="Add">260 <svg width="36" height="36" viewBox="0 0 24 24">261 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>262 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>263 </svg>264 </div>265 <div class="product-image">[IMG: M-Budget household flour]</div>266 <div class="badge">4 pack</div>267 <div class="price">4.-</div>268 <div class="name">M-Budget</div>269 <div class="sub">Household flour White flour</div>270 <div class="meta">4 × 1 kg · 0.10/100g</div>271 </div>272 273 <!-- More cards preview (partial placeholders to suggest scrolling) -->274 <div class="card">275 <div class="plus-float">276 <svg width="36" height="36" viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>278 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>279 </svg>280 </div>281 <div class="product-image">[IMG: Flour pack]</div>282 <div class="price">2.80</div>283 <div class="name">Brand Example</div>284 <div class="sub">White flour</div>285 <div class="meta">1 kg · 0.23/100g</div>286 </div>287 <div class="card">288 <div class="plus-float">289 <svg width="36" height="36" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="10" fill="none" stroke="#222" stroke-width="2"/>291 <path d="M12 7v10M7 12h10" stroke="#222" stroke-width="2" stroke-linecap="round"/>292 </svg>293 </div>294 <div class="product-image">[IMG: Flour pack]</div>295 <div class="price">3.20</div>296 <div class="name">Another Brand</div>297 <div class="sub">Wheat flour</div>298 <div class="meta">1 kg · 0.26/100g</div>299 </div>300 </div>301 302 <!-- Bottom Navigation -->303 <div class="bottom-nav">304 <div class="nav-item">305 <div class="nav-icon">306 <svg width="40" height="40" viewBox="0 0 24 24">307 <path d="M3 10l9-7 9 7v9a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-9z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>308 </svg>309 </div>310 <div>Migros</div>311 </div>312 <div class="nav-item">313 <div class="nav-icon">314 <svg width="40" height="40" viewBox="0 0 24 24">315 <path d="M6 4h12M6 9h12M6 14h12M6 19h12" stroke="#666" stroke-width="2" stroke-linecap="round"/>316 </svg>317 </div>318 <div>List</div>319 </div>320 <div class="nav-item">321 <div class="nav-icon">322 <svg width="40" height="40" viewBox="0 0 24 24">323 <rect x="4" y="5" width="16" height="12" rx="3" fill="none" stroke="#666" stroke-width="2"/>324 <path d="M4 11h16" stroke="#666" stroke-width="2"/>325 </svg>326 </div>327 <div>Wallet</div>328 </div>329 <div class="nav-item">330 <div class="nav-icon">331 <svg width="40" height="40" viewBox="0 0 24 24">332 <path d="M5 12h14M12 5l7 7-7 7" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>333 </svg>334 </div>335 <div>subitoGo</div>336 </div>337 <div class="nav-item active">338 <div class="nav-icon">339 <svg width="40" height="40" viewBox="0 0 24 24">340 <path d="M3 5h2l2 12h10l2-8H7" fill="none" stroke="#ff6a00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>341 </svg>342 </div>343 <div>Order</div>344 </div>345 </div>346 347</div>348</body>349</html>