GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 height: 90px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-size: 36px;26 color: #444;27 }28 .status-right {29 display: flex;30 align-items: center;31 gap: 28px;32 }33 .status-icon { width: 40px; height: 40px; }34 35 /* Header */36 .header {37 padding: 10px 40px 0 40px;38 position: relative;39 }40 .title {41 font-size: 96px;42 font-weight: 700;43 margin: 0;44 line-height: 1.1;45 color: #111;46 }47 .cart-btn {48 position: absolute;49 right: 40px;50 top: 30px;51 width: 80px;52 height: 80px;53 border-radius: 20px;54 display: flex;55 align-items: center;56 justify-content: center;57 }58 59 /* Search bar */60 .searchbar {61 margin: 32px 40px 12px 40px;62 background: #F2F2F2;63 border: 1px solid #E0E0E0;64 border-radius: 40px;65 height: 120px;66 display: flex;67 align-items: center;68 padding: 0 32px;69 gap: 24px;70 }71 .searchbar .placeholder {72 font-size: 40px;73 color: #666;74 flex: 1;75 }76 .icon-btn {77 width: 72px;78 height: 72px;79 border-radius: 36px;80 display: flex;81 align-items: center;82 justify-content: center;83 }84 85 /* Filter chips */86 .filters {87 display: flex;88 gap: 24px;89 padding: 24px 40px 32px 40px;90 }91 .chip {92 display: flex;93 align-items: center;94 gap: 18px;95 background: #F6F6F6;96 border: 1px solid #E2E2E2;97 color: #222;98 padding: 22px 28px;99 border-radius: 40px;100 font-size: 36px;101 font-weight: 600;102 }103 .chip .chip-icon { width: 40px; height: 40px; }104 105 /* Cards */106 .card {107 margin: 24px 40px;108 padding-bottom: 24px;109 border-bottom: 1px solid #E6E6E6;110 }111 .card-image {112 width: 1000px;113 height: 520px;114 background: #E0E0E0;115 border: 1px solid #BDBDBD;116 color: #757575;117 border-radius: 24px;118 display: flex;119 align-items: center;120 justify-content: center;121 font-size: 40px;122 }123 .card-head {124 margin-top: 24px;125 display: flex;126 justify-content: space-between;127 align-items: center;128 }129 .name-row {130 display: flex;131 align-items: center;132 gap: 16px;133 }134 .dp-badge {135 width: 44px;136 height: 44px;137 background: #0BB7A7;138 border-radius: 10px;139 position: relative;140 }141 .dp-badge:after {142 content: "";143 position: absolute;144 left: 11px; top: 11px;145 width: 22px; height: 22px;146 border-left: 3px solid #fff;147 border-bottom: 3px solid #fff;148 transform: rotate(-45deg);149 border-radius: 2px;150 }151 .card-title {152 font-size: 48px;153 font-weight: 700;154 color: #111;155 }156 .heart {157 width: 60px; height: 60px;158 }159 .meta {160 margin-top: 10px;161 font-size: 36px;162 color: #666;163 display: flex;164 justify-content: space-between;165 align-items: center;166 }167 .rating {168 display: inline-flex;169 align-items: center;170 gap: 12px;171 }172 .star { width: 36px; height: 36px; }173 .fine {174 font-size: 34px;175 color: #777;176 margin-top: 8px;177 }178 179 /* Bottom navigation */180 .bottom-nav {181 position: absolute;182 bottom: 0;183 left: 0;184 width: 1080px;185 height: 260px;186 border-top: 1px solid #E5E5E5;187 background: #ffffff;188 display: flex;189 justify-content: space-around;190 align-items: center;191 }192 .nav-item {193 display: flex;194 flex-direction: column;195 align-items: center;196 gap: 18px;197 color: #777;198 font-size: 32px;199 width: 200px;200 }201 .nav-item .nav-icon { width: 72px; height: 72px; }202 .nav-item.active { color: #E53935; }203 .active .nav-icon circle { stroke: #E53935; }204 .active .nav-icon path { stroke: #E53935; }205 .home-indicator {206 position: absolute;207 bottom: 16px;208 left: 50%;209 width: 360px;210 height: 12px;211 background: #BDBDBD;212 border-radius: 6px;213 transform: translateX(-50%);214 opacity: 0.7;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status bar -->222 <div class="status-bar">223 <div>3:54</div>224 <div class="status-right">225 <!-- network -->226 <svg class="status-icon" viewBox="0 0 24 24">227 <path d="M2 17l10-10 10 10" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>228 <circle cx="12" cy="17" r="2" fill="#555"/>229 </svg>230 <!-- battery -->231 <svg class="status-icon" viewBox="0 0 26 24">232 <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>233 <rect x="4" y="7" width="12" height="10" fill="#555"/>234 <rect x="21" y="9" width="3" height="6" rx="1" fill="#555"/>235 </svg>236 </div>237 </div>238 239 <!-- Header -->240 <div class="header">241 <h1 class="title">Search</h1>242 <div class="cart-btn">243 <svg width="56" height="56" viewBox="0 0 24 24">244 <path d="M6 7h12l-1 10H7L6 7zm2-2l1-2h6l1 2" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>245 </svg>246 </div>247 </div>248 249 <!-- Search bar -->250 <div class="searchbar">251 <svg width="52" height="52" viewBox="0 0 24 24">252 <circle cx="10" cy="10" r="7" fill="none" stroke="#444" stroke-width="2"/>253 <path d="M15 15l6 6" stroke="#444" stroke-width="2" stroke-linecap="round"/>254 </svg>255 <div class="placeholder">7-eleven, gluten free restaurant</div>256 <div class="icon-btn">257 <svg width="52" height="52" viewBox="0 0 24 24">258 <path d="M5 5l14 14M19 5L5 19" stroke="#444" stroke-width="2" stroke-linecap="round"/>259 </svg>260 </div>261 </div>262 263 <!-- Filters -->264 <div class="filters">265 <div class="chip">266 <svg class="chip-icon" viewBox="0 0 24 24">267 <path d="M3 7l8-3 10 10-5 5L3 7z" fill="none" stroke="#333" stroke-width="2"/>268 <circle cx="9" cy="8" r="2" fill="#333"/>269 </svg>270 <span>Offers</span>271 </div>272 <div class="chip"><span>Pickup</span></div>273 <div class="chip">274 <svg class="chip-icon" viewBox="0 0 24 24">275 <path d="M12 3l3.1 6.3 6.9 1-5 4.7 1.3 6.7-6.3-3.5-6.3 3.5 1.3-6.7-5-4.7 6.9-1L12 3z" fill="#222"/>276 </svg>277 <span>Ratings</span>278 <svg width="26" height="26" viewBox="0 0 24 24" style="margin-left:6px;">279 <path d="M6 9l6 6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>280 </svg>281 </div>282 <div class="chip"><span>Under 30 min</span></div>283 </div>284 285 <!-- Card: 7-Eleven -->286 <div class="card">287 <div class="card-image">[IMG: 7‑Eleven banner]</div>288 289 <div class="card-head">290 <div class="name-row">291 <div class="dp-badge"></div>292 <div class="card-title">7‑Eleven</div>293 </div>294 <svg class="heart" viewBox="0 0 24 24">295 <path d="M12 21s-7-4.6-9.5-8C1 9 3.5 6 6.5 6c2 0 3.4 1.2 5.5 3.3C14.1 7.2 15.5 6 17.5 6 20.5 6 23 9 21.5 13c-2.5 3.4-9.5 8-9.5 8z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"/>296 </svg>297 </div>298 <div class="meta">299 <div>$ • Convenience, Grocery</div>300 <div>1.3 mi • 20 min</div>301 </div>302 <div class="meta">303 <div class="rating">304 <span>4.6</span>305 <svg class="star" viewBox="0 0 24 24">306 <path d="M12 3l3.1 6.3 6.9 1-5 4.7 1.3 6.7-6.3-3.5-6.3 3.5 1.3-6.7-5-4.7 6.9-1L12 3z" fill="#555"/>307 </svg>308 <span>(2,700+)</span>309 </div>310 <div>$0 delivery fee, first order</div>311 </div>312 </div>313 314 <!-- Card: Aliberto's Jr Fresh Mexican Food -->315 <div class="card">316 <div class="card-image">[IMG: Mexican dishes spread]</div>317 318 <div class="card-head">319 <div class="name-row">320 <div class="dp-badge"></div>321 <div class="card-title">Aliberto’s Jr Fresh Mexican Food</div>322 </div>323 <svg class="heart" viewBox="0 0 24 24">324 <path d="M12 21s-7-4.6-9.5-8C1 9 3.5 6 6.5 6c2 0 3.4 1.2 5.5 3.3C14.1 7.2 15.5 6 17.5 6 20.5 6 23 9 21.5 13c-2.5 3.4-9.5 8-9.5 8z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"/>325 </svg>326 </div>327 <div class="meta">328 <div>$$ • Mexican</div>329 <div>1.9 mi • 35 min</div>330 </div>331 <div class="meta">332 <div class="rating">333 <span>4.6</span>334 <svg class="star" viewBox="0 0 24 24">335 <path d="M12 3l3.1 6.3 6.9 1-5 4.7 1.3 6.7-6.3-3.5-6.3 3.5 1.3-6.7-5-4.7 6.9-1L12 3z" fill="#555"/>336 </svg>337 <span>(3,100+)</span>338 </div>339 <div>$0 delivery fee, first order</div>340 </div>341 </div>342 343 <!-- Bottom navigation -->344 <div class="bottom-nav">345 <div class="nav-item">346 <svg class="nav-icon" viewBox="0 0 24 24">347 <path d="M3 11l9-8 9 8v8H3v-8z" fill="none" stroke="#777" stroke-width="2" stroke-linejoin="round"/>348 </svg>349 <div>Home</div>350 </div>351 <div class="nav-item">352 <svg class="nav-icon" viewBox="0 0 24 24">353 <circle cx="7" cy="5" r="3" fill="none" stroke="#777" stroke-width="2"/>354 <path d="M3 21l5-6 4 2 3-5" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>355 </svg>356 <div>Pickup</div>357 </div>358 <div class="nav-item active">359 <svg class="nav-icon" viewBox="0 0 24 24">360 <circle cx="11" cy="11" r="7" fill="none" stroke="#E53935" stroke-width="2"/>361 <path d="M16 16l6 6" stroke="#E53935" stroke-width="2" stroke-linecap="round"/>362 </svg>363 <div>Search</div>364 </div>365 <div class="nav-item">366 <svg class="nav-icon" viewBox="0 0 24 24">367 <rect x="5" y="4" width="14" height="18" rx="2" fill="none" stroke="#777" stroke-width="2"/>368 <path d="M8 8h8M8 12h8M8 16h8" stroke="#777" stroke-width="2" stroke-linecap="round"/>369 </svg>370 <div>Orders</div>371 </div>372 <div class="nav-item">373 <svg class="nav-icon" viewBox="0 0 24 24">374 <circle cx="12" cy="8" r="4" fill="none" stroke="#777" stroke-width="2"/>375 <path d="M4 21c2-4 6-6 8-6s6 2 8 6" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round"/>376 </svg>377 <div>Account</div>378 </div>379 <div class="home-indicator"></div>380 </div>381 382</div>383</body>384</html>