GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Bread Search</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Header */18 .app-bar {19 position: relative;20 width: 100%;21 height: 240px;22 background: #D54464; /* pink/red */23 color: #fff;24 padding: 0 36px;25 box-sizing: border-box;26 }27 .status-row {28 height: 84px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 40px;34 padding-top: 8px;35 }36 .status-right {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .back-row {42 position: absolute;43 top: 92px;44 left: 24px;45 right: 24px;46 display: flex;47 align-items: center;48 gap: 24px;49 padding: 0 12px;50 }51 .back-btn {52 width: 70px;53 height: 70px;54 display: flex;55 align-items: center;56 justify-content: center;57 }58 .search-pill {59 flex: 1;60 height: 110px;61 background: #fff;62 border-radius: 60px;63 display: flex;64 align-items: center;65 padding: 0 28px;66 gap: 22px;67 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;68 }69 .search-text {70 color: #333;71 font-size: 44px;72 flex: 1;73 }74 .barcode-btn {75 width: 84px;76 height: 84px;77 border-radius: 24px;78 background: #ffffff;79 display: flex;80 align-items: center;81 justify-content: center;82 }83 84 /* Toggle row */85 .toggle-row {86 height: 110px;87 background: #f6f2f2;88 display: flex;89 align-items: center;90 justify-content: space-between;91 color: #6e6e6e;92 padding: 0 36px 0 36px;93 font-size: 40px;94 }95 .switch {96 width: 120px;97 height: 60px;98 background: #d9d9d9;99 border-radius: 40px;100 position: relative;101 }102 .switch::after {103 content: "";104 position: absolute;105 top: 6px;106 left: 6px;107 width: 48px;108 height: 48px;109 background: #ffffff;110 border-radius: 50%;111 box-shadow: 0 1px 3px rgba(0,0,0,0.2);112 }113 114 /* Sections */115 .content {116 padding: 28px 24px 150px;117 }118 .section-title {119 font-size: 60px;120 font-weight: 800;121 color: #111;122 margin: 18px 8px;123 }124 .muted {125 color: #777;126 font-size: 36px;127 margin-left: 8px;128 }129 130 .card {131 display: flex;132 align-items: center;133 padding: 30px 12px;134 border-bottom: 2px solid #eee;135 }136 .logo {137 width: 130px;138 height: 110px;139 border: 1px solid #BDBDBD;140 background: #E0E0E0;141 color: #757575;142 display: flex;143 align-items: center;144 justify-content: center;145 border-radius: 18px;146 margin-right: 26px;147 font-size: 26px;148 text-align: center;149 }150 .card-body {151 flex: 1;152 }153 .card-title {154 font-size: 54px;155 font-weight: 800;156 color: #111;157 margin-bottom: 8px;158 }159 .subtitle {160 font-size: 36px;161 color: #444;162 margin: 6px 0 12px;163 }164 .rating {165 display: inline-flex;166 align-items: center;167 gap: 12px;168 color: #111;169 font-size: 40px;170 }171 .rating small {172 color: #777;173 font-size: 34px;174 }175 .chev {176 width: 44px;177 height: 44px;178 margin-left: 16px;179 }180 181 .see-all {182 text-align: center;183 color: #D54464;184 font-weight: 800;185 font-size: 54px;186 padding: 26px 0 12px;187 }188 189 .avatar {190 width: 96px;191 height: 96px;192 border-radius: 50%;193 background: #E0E0E0;194 border: 1px solid #BDBDBD;195 display: flex;196 align-items: center;197 justify-content: center;198 color: #757575;199 font-size: 26px;200 margin-right: 24px;201 }202 203 .product-card {204 display: flex;205 align-items: center;206 padding: 26px 12px;207 border-bottom: 2px solid #eee;208 }209 .product-img {210 width: 210px;211 height: 110px;212 background: #E0E0E0;213 border: 1px solid #BDBDBD;214 display: flex;215 align-items: center;216 justify-content: center;217 color: #757575;218 border-radius: 14px;219 margin-right: 28px;220 font-size: 26px;221 text-align: center;222 }223 .product-title {224 font-size: 50px;225 color: #111;226 font-weight: 700;227 margin-bottom: 8px;228 }229 .product-weight {230 color: #666;231 font-size: 38px;232 margin-bottom: 6px;233 }234 .nearby {235 color: #8a8a8a;236 font-size: 36px;237 }238 239 /* Bottom indicator */240 .home-indicator {241 position: absolute;242 bottom: 28px;243 left: 50%;244 transform: translateX(-50%);245 width: 500px;246 height: 14px;247 background: #111;248 border-radius: 10px;249 opacity: 0.8;250 }251 252 /* Icons */253 .icon {254 width: 48px;255 height: 48px;256 }257</style>258</head>259<body>260<div id="render-target">261 262 <!-- Header with search -->263 <div class="app-bar">264 <div class="status-row">265 <div>7:57</div>266 <div class="status-right">267 <!-- Simple wifi icon -->268 <svg class="icon" viewBox="0 0 24 24" fill="#fff">269 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-6.6-6.1a12 12 0 0 1 13.2 0l1.8-2.4a15 15 0 0 0-16.8 0l1.8 2.4zm3.3 3.2a7.8 7.8 0 0 1 8.6 0l1.7-2.2a10.5 10.5 0 0 0-12 0l1.7 2.2z"/>270 </svg>271 <!-- Battery icon -->272 <svg class="icon" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">273 <rect x="1" y="6" width="22" height="12" rx="2"></rect>274 <rect x="3" y="8" width="14" height="8" fill="#fff" stroke="none"></rect>275 <rect x="23" y="9" width="3" height="6" rx="1" fill="#fff" stroke="none"></rect>276 </svg>277 </div>278 </div>279 280 <div class="back-row">281 <div class="back-btn">282 <svg class="icon" viewBox="0 0 24 24" fill="#fff">283 <path d="M15.4 19.4 8 12l7.4-7.4 1.6 1.6L11.2 12l5.8 5.8-1.6 1.6z"/>284 </svg>285 </div>286 <div class="search-pill">287 <svg class="icon" viewBox="0 0 24 24" fill="#C93C5A">288 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8L20 21.5 21.5 20 15.5 14zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>289 </svg>290 <div class="search-text">bread</div>291 <div class="barcode-btn">292 <svg class="icon" viewBox="0 0 24 24" fill="#C93C5A">293 <path d="M3 5h2v14H3V5zm3 3h1v8H6V8zm2-2h2v12H8V6zm4 0h1v12h-1V6zm2 2h2v8h-2V8zm3-3h2v14h-2V5z"/>294 </svg>295 </div>296 </div>297 </div>298 </div>299 300 <!-- Toggle row -->301 <div class="toggle-row">302 <div>Previously purchased only</div>303 <div class="switch"></div>304 </div>305 306 <!-- Content -->307 <div class="content">308 <!-- Shops -->309 <div class="section-title">Shops</div>310 <div class="muted" style="margin-top:-8px; margin-bottom:14px;">8 results</div>311 312 <!-- Shop card 1 -->313 <div class="card">314 <div class="logo">[IMG: Tea Break Logo]</div>315 <div class="card-body">316 <div class="card-title">Tea Break</div>317 <div class="subtitle">You can order for today at 8:00 am</div>318 <div class="rating">319 <svg viewBox="0 0 24 24" width="38" height="38" fill="#F2994A">320 <path d="m12 17.3-5.6 3 1.1-6.3-4.5-4.4 6.3-.9L12 3l2.8 5.7 6.3.9-4.5 4.4 1.1 6.3L12 17.3z"/>321 </svg>322 <span>4.8</span>323 <small>(500+)</small>324 </div>325 </div>326 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">327 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>328 </svg>329 </div>330 331 <!-- Shop card 2 -->332 <div class="card">333 <div class="logo">[IMG: Breakfast in Istanbul]</div>334 <div class="card-body">335 <div class="card-title">Breakfast in Istanbul</div>336 <div class="subtitle">You can order for today at 8:00 am</div>337 <div class="rating">338 <svg viewBox="0 0 24 24" width="38" height="38" fill="#F2994A">339 <path d="m12 17.3-5.6 3 1.1-6.3-4.5-4.4 6.3-.9L12 3l2.8 5.7 6.3.9-4.5 4.4 1.1 6.3L12 17.3z"/>340 </svg>341 <span>4.8</span>342 <small>(138)</small>343 </div>344 </div>345 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">346 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>347 </svg>348 </div>349 350 <!-- Shop card 3 -->351 <div class="card" style="border-bottom: 2px solid #eee;">352 <div class="logo">[IMG: LPQ Bakery]</div>353 <div class="card-body">354 <div class="card-title">LPQ Bakery</div>355 <div class="subtitle">You can order for today at 7:00 am</div>356 <div class="rating">357 <svg viewBox="0 0 24 24" width="38" height="38" fill="#F2994A">358 <path d="m12 17.3-5.6 3 1.1-6.3-4.5-4.4 6.3-.9L12 3l2.8 5.7 6.3.9-4.5 4.4 1.1 6.3L12 17.3z"/>359 </svg>360 <span>4.9</span>361 <small>(104)</small>362 </div>363 </div>364 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">365 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>366 </svg>367 </div>368 369 <div class="see-all">See all</div>370 371 <!-- Supermarkets header -->372 <div style="display:flex; align-items:center; margin-top:10px;">373 <div class="avatar">Groceries</div>374 <div>375 <div class="section-title" style="margin:0; font-size:58px;">Supermarkets</div>376 <div class="muted" style="margin:4px 0 0;">3912 results</div>377 </div>378 </div>379 380 <!-- Product 1 -->381 <div class="product-card">382 <div class="product-img">[IMG: White Bread Pack]</div>383 <div style="flex:1;">384 <div class="product-title">L’usine Sliced White Bread</div>385 <div class="product-weight">600 gr</div>386 <div class="nearby">In 32 shops nearby</div>387 </div>388 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">389 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>390 </svg>391 </div>392 393 <!-- Product 2 -->394 <div class="product-card">395 <div class="product-img">[IMG: Brown Bread Pack]</div>396 <div style="flex:1;">397 <div class="product-title">L’usine Sliced Brown Bread</div>398 <div class="product-weight">600 gr</div>399 <div class="nearby">In 32 shops nearby</div>400 </div>401 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">402 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>403 </svg>404 </div>405 406 <!-- Product 3 -->407 <div class="product-card">408 <div class="product-img">[IMG: Milk Bread Pack]</div>409 <div style="flex:1;">410 <div class="product-title">L’usine Sliced Milk Bread</div>411 <div class="product-weight">600 gr</div>412 <div class="nearby">In 32 shops nearby</div>413 </div>414 <svg class="chev" viewBox="0 0 24 24" fill="#9e9e9e">415 <path d="m9 6 6 6-6 6-1.5-1.5L12 12 7.5 7.5 9 6z"/>416 </svg>417 </div>418 </div>419 420 <div class="home-indicator"></div>421</div>422</body>423</html>