GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Almonds Listing UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #0A0A0A;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-weight: 600;29 }30 .status-bar .time { font-size: 38px; letter-spacing: 1px; }31 .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }32 .status-icons svg { width: 36px; height: 36px; fill: #fff; }33 34 /* App bar */35 .app-bar {36 position: absolute;37 top: 120px;38 left: 0;39 width: 1080px;40 height: 150px;41 background: #FFFFFF;42 border-bottom: 1px solid #E5E5E5;43 display: flex;44 align-items: center;45 padding: 0 32px;46 box-sizing: border-box;47 gap: 24px;48 }49 .app-bar .title {50 font-size: 52px;51 font-weight: 700;52 color: #333;53 flex: 1;54 }55 .app-icon {56 width: 64px;57 height: 64px;58 display: inline-flex;59 align-items: center;60 justify-content: center;61 border-radius: 12px;62 }63 .app-icon svg { width: 54px; height: 54px; stroke: #333; }64 65 /* Filter / Sort row */66 .filter-sort {67 position: absolute;68 top: 270px;69 left: 0;70 width: 1080px;71 height: 110px;72 border-bottom: 1px solid #E5E5E5;73 display: grid;74 grid-template-columns: 540px 540px;75 box-sizing: border-box;76 }77 .filter, .sort {78 display: flex;79 align-items: center;80 gap: 22px;81 padding-left: 120px;82 font-size: 40px;83 font-weight: 700;84 color: #5A4A2E;85 }86 .sort { padding-left: 120px; }87 .filter svg, .sort svg { width: 46px; height: 46px; stroke: #5A4A2E; }88 89 /* List container */90 .list {91 position: absolute;92 top: 380px;93 left: 0;94 width: 1080px;95 height: calc(2400px - 380px);96 overflow: hidden;97 padding-bottom: 40px;98 box-sizing: border-box;99 }100 101 .item {102 position: relative;103 display: grid;104 grid-template-columns: 220px 1fr 240px;105 padding: 36px 32px;106 column-gap: 30px;107 border-bottom: 1px solid #EAEAEA;108 }109 .thumb {110 width: 200px;111 height: 200px;112 background: #E0E0E0;113 border: 1px solid #BDBDBD;114 display: flex;115 align-items: center;116 justify-content: center;117 color: #757575;118 font-size: 28px;119 text-align: center;120 border-radius: 8px;121 }122 123 .content .name {124 font-size: 44px;125 font-weight: 700;126 color: #3D3020;127 line-height: 1.25;128 }129 .content .sub {130 margin-top: 22px;131 font-size: 40px;132 color: #3D3020;133 font-weight: 600;134 }135 .content .price {136 margin-top: 24px;137 font-size: 40px;138 color: #D81B60;139 font-weight: 700;140 }141 142 .right {143 display: flex;144 flex-direction: column;145 align-items: flex-end;146 justify-content: center;147 gap: 24px;148 padding-right: 16px;149 }150 151 .add-btn {152 background: #72A942;153 color: #fff;154 font-size: 40px;155 font-weight: 800;156 border: none;157 border-radius: 16px;158 padding: 22px 40px;159 width: 200px;160 text-align: center;161 box-shadow: 0 2px 0 rgba(0,0,0,0.1);162 }163 .fav {164 position: absolute;165 right: 32px;166 top: 30px;167 width: 64px;168 height: 64px;169 display: flex;170 align-items: center;171 justify-content: center;172 }173 .fav svg { width: 60px; height: 60px; stroke: #B7B7B7; fill: none; stroke-width: 4px; }174 175 /* Colors and small accents */176 .mrp { color: #A06A2A; }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status Bar -->183 <div class="status-bar">184 <div class="time">11:17</div>185 <div class="status-icons">186 <!-- Signal icon -->187 <svg viewBox="0 0 24 24">188 <rect x="2" y="16" width="3" height="6" fill="#fff"></rect>189 <rect x="7" y="12" width="3" height="10" fill="#fff"></rect>190 <rect x="12" y="8" width="3" height="14" fill="#fff"></rect>191 <rect x="17" y="4" width="3" height="18" fill="#fff"></rect>192 </svg>193 <!-- Wifi icon -->194 <svg viewBox="0 0 24 24">195 <path d="M2 9c5-4 15-4 20 0M5 12c3-2 11-2 14 0M8 15c2-1 6-1 8 0M12 19l2 2-2 2-2-2 2-2z" stroke="#fff" stroke-width="2" fill="none"></path>196 </svg>197 <!-- Battery icon -->198 <svg viewBox="0 0 28 24">199 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>200 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>201 <rect x="23" y="9" width="3" height="6" fill="#fff"></rect>202 </svg>203 </div>204 </div>205 206 <!-- App Bar -->207 <div class="app-bar">208 <!-- Back icon -->209 <div class="app-icon">210 <svg viewBox="0 0 24 24">211 <path d="M15 5L8 12l7 7" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>212 </svg>213 </div>214 <!-- Search icon -->215 <div class="app-icon">216 <svg viewBox="0 0 24 24">217 <circle cx="10" cy="10" r="6" stroke="#333" stroke-width="2" fill="none"></circle>218 <path d="M14.5 14.5L20 20" stroke="#333" stroke-width="2" stroke-linecap="round"></path>219 </svg>220 </div>221 <div class="title">Almonds</div>222 <!-- Close icon -->223 <div class="app-icon">224 <svg viewBox="0 0 24 24">225 <path d="M5 5L19 19M19 5L5 19" stroke="#333" stroke-width="3" stroke-linecap="round"></path>226 </svg>227 </div>228 <!-- Cart icon -->229 <div class="app-icon">230 <svg viewBox="0 0 24 24">231 <path d="M3 6h2l2 10h10l2-8H7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>232 <circle cx="9" cy="20" r="2" fill="#333"></circle>233 <circle cx="17" cy="20" r="2" fill="#333"></circle>234 </svg>235 </div>236 </div>237 238 <!-- Filter / Sort Row -->239 <div class="filter-sort">240 <div class="filter">241 <!-- Filter icon -->242 <svg viewBox="0 0 24 24">243 <path d="M3 5h18l-7 8v6l-4 2v-8L3 5z" stroke="#5A4A2E" stroke-width="2" fill="none" stroke-linejoin="round"></path>244 </svg>245 <div>FILTER</div>246 </div>247 <div class="sort">248 <!-- Sort icon -->249 <svg viewBox="0 0 24 24">250 <path d="M8 5v10M8 5l-3 3M8 5l3 3M16 19V9M16 19l-3-3M16 19l3-3" stroke="#5A4A2E" stroke-width="2" fill="none" stroke-linecap="round"></path>251 </svg>252 <div>SORT</div>253 </div>254 </div>255 256 <!-- Product List -->257 <div class="list">258 259 <!-- Item 1 -->260 <div class="item">261 <div class="thumb">[IMG: Roasted & Salted Almond Pack]</div>262 <div class="content">263 <div class="name">Roasted & Salted Almond</div>264 <div class="sub">1 Pc</div>265 <div class="price">MRP ₹249</div>266 </div>267 <div class="right">268 <button class="add-btn">ADD</button>269 </div>270 <div class="fav">271 <svg viewBox="0 0 24 24">272 <path d="M12 17l-6 3 2-6-5-4 6-1 3-5 3 5 6 1-5 4 2 6z"></path>273 </svg>274 </div>275 </div>276 277 <!-- Item 2 -->278 <div class="item">279 <div class="thumb">[IMG: Fabbox Peri Peri Almonds 120G]</div>280 <div class="content">281 <div class="name">Fabbox Peri Peri Almonds, 120G Pack</div>282 <div class="sub">1 Pc</div>283 <div class="price">MRP ₹336</div>284 </div>285 <div class="right">286 <button class="add-btn">ADD</button>287 </div>288 <div class="fav">289 <svg viewBox="0 0 24 24">290 <path d="M12 17l-6 3 2-6-5-4 6-1 3-5 3 5 6 1-5 4 2 6z"></path>291 </svg>292 </div>293 </div>294 295 <!-- Item 3 -->296 <div class="item">297 <div class="thumb">[IMG: Rostaa Salted Almonds 170G]</div>298 <div class="content">299 <div class="name">Rostaa Salted Almonds ,170G</div>300 <div class="sub">1 Pc</div>301 <div class="price">MRP ₹380</div>302 </div>303 <div class="right">304 <button class="add-btn">ADD</button>305 </div>306 <div class="fav">307 <svg viewBox="0 0 24 24">308 <path d="M12 17l-6 3 2-6-5-4 6-1 3-5 3 5 6 1-5 4 2 6z"></path>309 </svg>310 </div>311 </div>312 313 <!-- Item 4 -->314 <div class="item">315 <div class="thumb">[IMG: Tong Garden Salted Almonds 150G]</div>316 <div class="content">317 <div class="name">Tong Garden Salted Almonds, 150G</div>318 <div class="sub">1 Pc</div>319 <div class="price">MRP ₹280</div>320 </div>321 <div class="right">322 <button class="add-btn">ADD</button>323 </div>324 <div class="fav">325 <svg viewBox="0 0 24 24">326 <path d="M12 17l-6 3 2-6-5-4 6-1 3-5 3 5 6 1-5 4 2 6z"></path>327 </svg>328 </div>329 </div>330 331 <!-- Item 5 -->332 <div class="item">333 <div class="thumb">[IMG: Tong Garden Salted Almonds Snacks 145G]</div>334 <div class="content">335 <div class="name">Tong Garden Salted Almonds Snacks, 145G</div>336 <div class="sub">1 Pc</div>337 <div class="price">MRP ₹325</div>338 </div>339 <div class="right">340 <button class="add-btn">ADD</button>341 </div>342 <div class="fav">343 <svg viewBox="0 0 24 24">344 <path d="M12 17l-6 3 2-6-5-4 6-1 3-5 3 5 6 1-5 4 2 6z"></path>345 </svg>346 </div>347 </div>348 349 <!-- Extra bottom spacer to mimic screenshot padding -->350 <div style="height: 200px;"></div>351 </div>352 353</div>354</body>355</html>