GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search - Recipe App</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #111;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #FFFFFF;21 }22 23 /* Scrollable page content inside the fixed screen */24 .page {25 position: absolute;26 left: 0;27 top: 0;28 width: 1080px;29 height: 2400px;30 display: flex;31 flex-direction: column;32 }33 34 /* Safe top spacing */35 .top-space {36 height: 80px;37 }38 39 /* Header */40 .header {41 display: flex;42 align-items: center;43 justify-content: space-between;44 padding: 20px 40px;45 }46 .profile {47 width: 84px;48 height: 84px;49 border-radius: 50%;50 background: #F1F1F1;51 border: 1px solid #E0E0E0;52 display: flex;53 align-items: center;54 justify-content: center;55 }56 .profile svg { width: 38px; height: 38px; fill: #BDBDBD; }57 58 .header-actions {59 display: flex;60 gap: 24px;61 }62 .pill {63 display: flex;64 align-items: center;65 gap: 16px;66 padding: 18px 28px;67 border-radius: 40px;68 border: 2px solid #111;69 background: #FFFFFF;70 font-weight: 600;71 }72 .pill.dark {73 background: #111;74 color: #fff;75 border-color: #111;76 }77 .pill svg {78 width: 38px;79 height: 38px;80 }81 .pill.dark svg { fill: #FFFFFF; }82 .pill.light svg { fill: #111; }83 84 /* Title */85 .title {86 font-size: 88px;87 font-weight: 700;88 padding: 10px 40px 0 40px;89 line-height: 1.1;90 }91 92 /* Search bar */93 .search-bar {94 margin: 30px 40px 20px 40px;95 background: #F3F3F3;96 height: 130px;97 border-radius: 65px;98 display: flex;99 align-items: center;100 padding: 0 40px;101 box-shadow: inset 0 0 0 1px #E6E6E6;102 color: #777;103 font-size: 42px;104 gap: 24px;105 }106 .search-bar svg { width: 56px; height: 56px; fill: #777; }107 108 /* Skeleton row */109 .skeleton-row {110 display: flex;111 align-items: center;112 gap: 36px;113 padding: 20px 40px;114 }115 .skeleton-pill {116 height: 64px;117 border-radius: 32px;118 background: linear-gradient(90deg,#EDEDED,#DADADA,#EDEDED);119 flex: 0 0 420px;120 }121 .skeleton-pill.small { flex-basis: 220px; }122 .skeleton-circles {123 display: flex;124 gap: 40px;125 padding: 30px 40px 10px 40px;126 }127 .skeleton-circle {128 width: 210px;129 height: 210px;130 border-radius: 50%;131 background: linear-gradient(90deg,#EDEDED,#DADADA,#EDEDED);132 }133 134 /* Section heading */135 .section-title {136 padding: 40px;137 font-size: 64px;138 font-weight: 700;139 }140 141 /* Meal grid */142 .meal-grid {143 display: grid;144 grid-template-columns: 1fr 1fr;145 column-gap: 36px;146 row-gap: 32px;147 padding: 0 40px 20px 40px;148 }149 .meal-card {150 background: #FAC090;151 border-radius: 36px;152 padding: 42px;153 position: relative;154 min-height: 320px;155 box-shadow: 0 1px 0 #F2B582 inset;156 }157 .meal-card h3 {158 margin: 0;159 font-size: 54px;160 font-weight: 700;161 color: #111;162 }163 .meal-img {164 position: absolute;165 right: 28px;166 bottom: 28px;167 width: 380px;168 height: 230px;169 background: #E0E0E0;170 border: 1px solid #BDBDBD;171 border-radius: 20px;172 display: flex;173 align-items: center;174 justify-content: center;175 color: #757575;176 font-size: 34px;177 text-align: center;178 padding: 8px;179 }180 181 /* Popular categories */182 .popular-grid {183 display: grid;184 grid-template-columns: 1fr 1fr;185 column-gap: 36px;186 row-gap: 32px;187 padding: 0 40px 220px 40px; /* leave space above nav */188 }189 .cat-card {190 border-radius: 28px;191 padding: 36px;192 min-height: 240px;193 position: relative;194 color: #111;195 font-weight: 700;196 font-size: 46px;197 }198 .cat-card.yellow { background: #F9DB8B; }199 .cat-card.green { background: #BDE6C6; }200 .cat-card.blue { background: #CFE6FF; }201 .cat-img {202 position: absolute;203 right: 24px;204 bottom: 24px;205 width: 320px;206 height: 180px;207 background: #E0E0E0;208 border: 1px solid #BDBDBD;209 border-radius: 16px;210 display: flex;211 align-items: center;212 justify-content: center;213 color: #757575;214 font-size: 30px;215 }216 217 /* Bottom navigation */218 .nav {219 position: absolute;220 left: 0;221 bottom: 0;222 width: 1080px;223 height: 180px;224 background: #FFFFFF;225 border-top: 1px solid #E6E6E6;226 display: flex;227 justify-content: space-around;228 align-items: center;229 padding: 10px 0 26px 0;230 }231 .nav-item {232 display: flex;233 flex-direction: column;234 align-items: center;235 gap: 14px;236 color: #111;237 font-size: 28px;238 font-weight: 600;239 }240 .nav-item .icon {241 width: 70px;242 height: 70px;243 }244 .nav-item.active .icon {245 width: 88px;246 height: 88px;247 }248 .nav-item.active .label {249 font-size: 30px;250 letter-spacing: 2px;251 }252 .bottom-indicator {253 position: absolute;254 bottom: 10px;255 left: 50%;256 transform: translateX(-50%);257 width: 200px;258 height: 12px;259 background: #111;260 opacity: 0.12;261 border-radius: 6px;262 }263 264 /* Utility */265 svg { display: block; }266</style>267</head>268<body>269<div id="render-target">270 <div class="page">271 272 <div class="top-space"></div>273 274 <div class="header">275 <div class="profile" aria-label="User Avatar">276 <svg viewBox="0 0 24 24">277 <circle cx="12" cy="8" r="4"></circle>278 <path d="M4 20a8 8 0 0116 0" />279 </svg>280 </div>281 <div class="header-actions">282 <div class="pill light">283 <svg viewBox="0 0 24 24">284 <path d="M6 3h12v18l-6-4-6 4z" fill="none" stroke="#111" stroke-width="2"></path>285 </svg>286 <span>0</span>287 </div>288 <div class="pill dark">289 <svg viewBox="0 0 24 24">290 <path d="M3 4h3l2 10h10l2-7H7" fill="none" stroke="#fff" stroke-width="2"></path>291 <circle cx="9" cy="20" r="2"></circle>292 <circle cx="17" cy="20" r="2"></circle>293 </svg>294 <span>0</span>295 </div>296 </div>297 </div>298 299 <div class="title">Search</div>300 301 <div class="search-bar">302 <svg viewBox="0 0 24 24">303 <circle cx="11" cy="11" r="7"></circle>304 <path d="M21 21l-4.3-4.3"></path>305 </svg>306 <span>Search Recipes</span>307 </div>308 309 <div class="skeleton-row">310 <div class="skeleton-pill"></div>311 <div class="skeleton-pill small"></div>312 </div>313 <div class="skeleton-circles">314 <div class="skeleton-circle"></div>315 <div class="skeleton-circle"></div>316 <div class="skeleton-circle"></div>317 <div class="skeleton-circle"></div>318 </div>319 320 <div class="section-title">Search by Meal</div>321 322 <div class="meal-grid">323 <div class="meal-card">324 <h3>Breakfast</h3>325 <div class="meal-img">[IMG: Pancakes & Berries]</div>326 </div>327 <div class="meal-card">328 <h3>Lunch</h3>329 <div class="meal-img">[IMG: Grilled Chicken Tray]</div>330 </div>331 <div class="meal-card">332 <h3>Dinner</h3>333 <div class="meal-img">[IMG: Chicken Salad Bowl]</div>334 </div>335 <div class="meal-card">336 <h3>Dessert</h3>337 <div class="meal-img">[IMG: Pastry / Cookie]</div>338 </div>339 <div class="meal-card">340 <h3>Drinks</h3>341 <div class="meal-img">[IMG: Fruit Drink Glass]</div>342 </div>343 <div class="meal-card">344 <h3>Appetizers</h3>345 <div class="meal-img">[IMG: Small Bites Plate]</div>346 </div>347 </div>348 349 <div class="section-title">Most Popular Categories</div>350 351 <div class="popular-grid">352 <div class="cat-card yellow">353 Quick & Easy354 <div class="cat-img">[IMG: Simple Pasta Bowl]</div>355 </div>356 <div class="cat-card green">357 Low-Carb358 <div class="cat-img">[IMG: Veggie Plate]</div>359 </div>360 <div class="cat-card blue">361 Budget-Friendly362 <div class="cat-img">[IMG: One-Pot Meal]</div>363 </div>364 <div class="cat-card yellow">365 High-Protein366 <div class="cat-img">[IMG: Protein Bowl]</div>367 </div>368 </div>369 370 <div class="nav">371 <div class="nav-item">372 <svg class="icon" viewBox="0 0 24 24">373 <path d="M3 11l9-7 9 7v9H15v-6H9v6H3z" fill="#111"></path>374 </svg>375 <div class="label">Home</div>376 </div>377 <div class="nav-item active">378 <svg class="icon" viewBox="0 0 24 24">379 <circle cx="11" cy="11" r="7" fill="#111"></circle>380 <path d="M21 21l-4.5-4.5" stroke="#111" stroke-width="2"></path>381 </svg>382 <div class="label">SEARCH</div>383 </div>384 <div class="nav-item">385 <svg class="icon" viewBox="0 0 24 24">386 <rect x="4" y="4" width="16" height="16" rx="4" fill="none" stroke="#111" stroke-width="2"></rect>387 <path d="M12 8v8M8 12h8" stroke="#111" stroke-width="2"></path>388 </svg>389 <div class="label">Add</div>390 </div>391 <div class="nav-item">392 <svg class="icon" viewBox="0 0 24 24">393 <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#111" stroke-width="2"></rect>394 <path d="M7 3v4M17 3v4M3 10h18" stroke="#111" stroke-width="2"></path>395 </svg>396 <div class="label">Plan</div>397 </div>398 <div class="nav-item">399 <svg class="icon" viewBox="0 0 24 24">400 <path d="M6 14c0-4 3-7 6-7s6 3 6 7c0 2-2 4-6 4s-6-2-6-4z" fill="none" stroke="#111" stroke-width="2"></path>401 <path d="M9 10c1 1 5 1 6 0" stroke="#111" stroke-width="2"></path>402 </svg>403 <div class="label">Cook</div>404 </div>405 <div class="bottom-indicator"></div>406 </div>407 408 </div>409</div>410</body>411</html>