GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Almonds Listing</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #111;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Top status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #000;25 color: #fff;26 }27 .status-time {28 position: absolute;29 left: 40px;30 top: 35px;31 font-size: 44px;32 font-weight: 600;33 letter-spacing: 1px;34 }35 .status-icons {36 position: absolute;37 right: 40px;38 top: 34px;39 display: flex;40 align-items: center;41 gap: 22px;42 }43 .icon-wifi, .icon-battery {44 width: 42px; height: 42px;45 }46 47 /* Search header */48 .search-header {49 position: absolute;50 top: 120px;51 left: 0;52 width: 1080px;53 height: 140px;54 background: #f7f7f7;55 border-bottom: 1px solid #e0e0e0;56 }57 .header-inner {58 position: absolute;59 left: 40px;60 right: 40px;61 top: 40px;62 height: 80px;63 display: flex;64 align-items: center;65 gap: 24px;66 }67 .round-btn {68 width: 64px;69 height: 64px;70 display: flex;71 justify-content: center;72 align-items: center;73 border-radius: 12px;74 background: transparent;75 }76 .search-bar {77 flex: 1;78 height: 80px;79 background: #ffffff;80 border: 1px solid #dcdcdc;81 border-radius: 10px;82 display: flex;83 align-items: center;84 padding: 0 24px;85 gap: 18px;86 }87 .search-text {88 font-size: 44px;89 color: #222;90 flex: 1;91 }92 .cart-btn {93 width: 72px; height: 72px;94 display: flex;95 justify-content: center;96 align-items: center;97 border-radius: 14px;98 }99 100 /* Filter / Sort row */101 .filter-sort {102 position: absolute;103 top: 260px;104 left: 0;105 width: 1080px;106 height: 120px;107 background: #fff;108 display: flex;109 align-items: center;110 padding: 0 40px;111 gap: 40px;112 border-bottom: 1px solid #e6e6e6;113 }114 .fs-item {115 display: flex;116 align-items: center;117 gap: 18px;118 color: #554c2f;119 font-weight: 700;120 font-size: 42px;121 }122 .fs-icon {123 width: 48px; height: 48px;124 }125 126 /* Product list area */127 .list-area {128 position: absolute;129 top: 380px;130 left: 0;131 width: 1080px;132 height: 1080px;133 background: #ffffff;134 overflow: hidden;135 }136 .product-card {137 position: relative;138 width: 1080px;139 height: 320px;140 border-bottom: 1px solid #ececec;141 padding: 30px 40px;142 box-sizing: border-box;143 }144 .prod-left {145 position: absolute;146 top: 30px;147 left: 40px;148 width: 190px;149 height: 220px;150 background: #E0E0E0;151 border: 1px solid #BDBDBD;152 display: flex;153 justify-content: center;154 align-items: center;155 color: #757575;156 font-size: 28px;157 text-align: center;158 border-radius: 6px;159 }160 .prod-info {161 position: absolute;162 left: 260px;163 top: 26px;164 right: 260px;165 color: #3a3222;166 }167 .prod-title {168 font-size: 52px;169 font-weight: 700;170 line-height: 1.1;171 margin-bottom: 18px;172 }173 .prod-sub {174 font-size: 46px;175 margin-bottom: 26px;176 color: #3a3222;177 }178 .price {179 font-size: 48px;180 color: #e91e63;181 font-weight: 700;182 }183 .add-btn {184 position: absolute;185 right: 40px;186 top: 120px;187 width: 220px;188 height: 96px;189 background: #7CB342;190 color: #fff;191 font-weight: 800;192 font-size: 44px;193 border-radius: 16px;194 display: flex;195 justify-content: center;196 align-items: center;197 }198 .fav-star {199 position: absolute;200 right: 42px;201 top: 38px;202 width: 72px; height: 72px;203 }204 205 /* Keyboard area */206 .keyboard {207 position: absolute;208 bottom: 0;209 left: 0;210 width: 1080px;211 height: 940px;212 background: #1a1a1a;213 border-top: 1px solid #2b2b2b;214 box-sizing: border-box;215 padding-top: 40px;216 }217 .kb-title {218 text-align: center;219 color: #eaeaea;220 font-size: 56px;221 font-weight: 700;222 margin-bottom: 30px;223 }224 .kb-row {225 display: flex;226 justify-content: center;227 gap: 20px;228 margin: 22px 40px;229 }230 .key {231 width: 90px;232 height: 120px;233 border-radius: 18px;234 background: #2a2a2a;235 color: #e0e0e0;236 font-size: 44px;237 display: flex;238 align-items: center;239 justify-content: center;240 box-shadow: inset 0 0 0 1px #3a3a3a;241 }242 .key.wide { width: 200px; }243 .space {244 width: 540px;245 height: 120px;246 border-radius: 22px;247 background: #2a2a2a;248 box-shadow: inset 0 0 0 1px #3a3a3a;249 color: #aaa;250 font-size: 40px;251 display: flex; align-items: center; justify-content: center;252 }253 .enter {254 width: 160px;255 height: 120px;256 border-radius: 28px;257 background: #ffe1bd;258 color: #222;259 font-size: 54px;260 font-weight: 700;261 display: flex; align-items: center; justify-content: center;262 }263</style>264</head>265<body>266<div id="render-target">267 268 <!-- Status Bar -->269 <div class="status-bar">270 <div class="status-time">11:15</div>271 <div class="status-icons">272 <!-- Simple wifi icon -->273 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#fff">274 <path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20s.7-1.5 1.5-1.5z"/>275 <path d="M2.5 9.5c5.2-4.4 13.8-4.4 19 0l-1.6 1.6c-4.3-3.6-11.6-3.6-15.9 0L2.5 9.5z"/>276 <path d="M6 12.5c3.6-3.1 8.4-3.1 12 0l-1.6 1.6c-2.7-2.3-6.1-2.3-8.8 0L6 12.5z"/>277 <path d="M9.6 15.4c1.3-1.1 3.5-1.1 4.8 0l-1.4 1.4c-.6-.5-1.4-.5-2 0l-1.4-1.4z"/>278 </svg>279 <!-- Battery icon -->280 <svg class="icon-battery" viewBox="0 0 32 32" fill="#fff">281 <rect x="2" y="8" width="24" height="16" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>282 <rect x="4" y="10" width="16" height="12" fill="#fff"/>283 <rect x="26" y="12" width="4" height="8" rx="1" fill="#fff"/>284 </svg>285 </div>286 </div>287 288 <!-- Search Header -->289 <div class="search-header">290 <div class="header-inner">291 <div class="round-btn">292 <!-- Back arrow -->293 <svg width="52" height="52" viewBox="0 0 24 24" fill="#7a6b43">294 <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/>295 </svg>296 </div>297 <div class="search-bar">298 <!-- Search icon -->299 <svg width="44" height="44" viewBox="0 0 24 24" fill="#8e8e8e">300 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>301 </svg>302 <div class="search-text">Almonds</div>303 <!-- Close icon -->304 <svg width="44" height="44" viewBox="0 0 24 24" fill="#7a6b43">305 <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>306 </svg>307 </div>308 <div class="cart-btn">309 <!-- Cart icon -->310 <svg width="60" height="60" viewBox="0 0 24 24" fill="#7a6b43">311 <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 1.99-.9 1.99-2S18.1 18 17 18zM7.2 6h13l-1.6 7.2c-.2.9-1 1.8-2 1.8H9.6c-1 0-1.8-.8-2-1.7L6 4H3V2h3.8c.7 0 1.3.5 1.4 1.1L7.2 6z"/>312 </svg>313 </div>314 </div>315 </div>316 317 <!-- Filter / Sort -->318 <div class="filter-sort">319 <div class="fs-item">320 <svg class="fs-icon" viewBox="0 0 24 24" fill="#7a6b43">321 <path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z"/>322 </svg>323 <div>FILTER</div>324 </div>325 <div class="fs-item" style="margin-left: 340px;">326 <svg class="fs-icon" viewBox="0 0 24 24" fill="#7a6b43">327 <path d="M7 2h2v14H7V2zm8 6h2v8h-2V8zM3 10h2v6H3v-6zm16-8h2v18h-2V2z"/>328 </svg>329 <div>SORT</div>330 </div>331 </div>332 333 <!-- Product List -->334 <div class="list-area">335 <!-- Product 1 -->336 <div class="product-card">337 <div class="prod-left">[IMG: Roasted & Salted Almonds]</div>338 <div class="prod-info">339 <div class="prod-title">1 Pc</div>340 <div class="price">MRP ₹249</div>341 </div>342 <div class="add-btn">ADD</div>343 </div>344 345 <!-- Product 2 -->346 <div class="product-card">347 <div class="prod-left">[IMG: Peri Peri Almonds]</div>348 <svg class="fav-star" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">349 <path d="M12 17.3l-5.6 3 1.1-6.3-4.5-4.4 6.3-.9L12 2l2.8 6.6 6.3.9-4.5 4.4 1.1 6.3-5.7-3z"/>350 </svg>351 <div class="prod-info" style="right: 300px;">352 <div class="prod-title">Fabbbox Peri Peri Almonds, 120G Pack</div>353 <div class="prod-sub">1 Pc</div>354 <div class="price">MRP ₹336</div>355 </div>356 <div class="add-btn">ADD</div>357 </div>358 359 <!-- Product 3 -->360 <div class="product-card">361 <div class="prod-left">[IMG: Salted Almonds]</div>362 <svg class="fav-star" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2">363 <path d="M12 17.3l-5.6 3 1.1-6.3-4.5-4.4 6.3-.9L12 2l2.8 6.6 6.3.9-4.5 4.4 1.1 6.3-5.7-3z"/>364 </svg>365 <div class="prod-info" style="right: 300px;">366 <div class="prod-title">Rostaa Salted Almonds ,170G</div>367 <div class="prod-sub">1 Pc</div>368 <div class="price">MRP ₹380</div>369 </div>370 <div class="add-btn">ADD</div>371 </div>372 </div>373 374 <!-- Keyboard -->375 <div class="keyboard">376 <div class="kb-title">Almonds</div>377 <div class="kb-row">378 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>379 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>380 </div>381 <div class="kb-row">382 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>383 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>384 </div>385 <div class="kb-row">386 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>387 <div class="key">n</div><div class="key">m</div><div class="key wide">⌫</div>388 </div>389 <div class="kb-row">390 <div class="key wide">?123</div>391 <div class="key wide">,</div>392 <div class="space">Space</div>393 <div class="key">.</div>394 <div class="enter">✓</div>395 </div>396 </div>397 398</div>399</body>400</html>