GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Community Search - Dessert</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 html, body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; }10 #render-target {11 width: 1080px;12 height: 2400px;13 position: relative;14 overflow: hidden;15 background: #000000;16 color: #FFFFFF;17 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, Arial, Helvetica, sans-serif;18 }19 20 /* Status bar */21 .statusbar {22 position: absolute;23 top: 0;24 left: 0;25 width: 100%;26 height: 96px;27 padding: 0 36px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #fff;32 opacity: 0.95;33 }34 .status-left { font-weight: 600; font-size: 34px; letter-spacing: 1px; }35 .status-right { display: flex; gap: 26px; align-items: center; }36 .icon-mini { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #ddd; font-size: 22px; }37 38 /* Header search row */39 .header {40 position: absolute;41 top: 96px;42 left: 0;43 width: 100%;44 padding: 24px 32px 8px 24px;45 }46 .search-row {47 display: grid;48 grid-template-columns: 80px 1fr 84px;49 align-items: center;50 gap: 18px;51 padding: 12px 0;52 }53 .back-btn {54 width: 80px;55 height: 80px;56 display: inline-flex;57 align-items: center;58 justify-content: center;59 }60 .search-box {61 height: 120px;62 border: 2px solid #3b3b3b;63 border-radius: 28px;64 padding: 0 120px 0 36px;65 display: flex;66 align-items: center;67 background: #0d0d0d;68 position: relative;69 }70 .search-placeholder {71 color: #bdbdbd;72 font-size: 42px;73 }74 .search-clear {75 position: absolute;76 right: 60px;77 top: 50%;78 transform: translateY(-50%);79 width: 54px;80 height: 54px;81 display: inline-flex;82 align-items: center;83 justify-content: center;84 }85 .filter-btn {86 width: 84px;87 height: 84px;88 display: inline-flex;89 align-items: center;90 justify-content: center;91 }92 93 /* Tabs */94 .tabs {95 margin-top: 24px;96 display: flex;97 justify-content: space-between;98 padding: 0 24px 0 24px;99 position: relative;100 }101 .tab {102 color: #cfcfcf;103 font-size: 38px;104 padding: 16px 8px 28px;105 position: relative;106 }107 .tab.active { color: #ff7a45; }108 .tab.active .indicator {109 position: absolute;110 left: 0;111 right: 0;112 bottom: 8px;113 margin: 0 auto;114 width: 280px;115 height: 10px;116 background: #ff7a45;117 border-radius: 6px;118 }119 120 /* Content area (scrollable) */121 .content {122 position: absolute;123 left: 0;124 width: 100%;125 top: 320px; /* below header (status + search + tabs) */126 bottom: 210px; /* above bottom nav */127 overflow-y: auto;128 padding: 24px 28px 140px;129 }130 .grid {131 display: grid;132 grid-template-columns: repeat(2, 1fr);133 gap: 34px;134 }135 136 .card {137 padding-bottom: 12px;138 }139 .img-wrap {140 position: relative;141 width: 100%;142 height: 520px;143 border-radius: 36px;144 overflow: hidden;145 }146 .img-ph {147 position: absolute;148 inset: 0;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 color: #757575;152 display: flex;153 align-items: center;154 justify-content: center;155 font-size: 36px;156 text-align: center;157 padding: 16px;158 }159 .like-pill {160 position: absolute;161 right: 22px;162 bottom: 22px;163 background: #ffffff;164 color: #222;165 border-radius: 40px;166 padding: 12px 22px;167 display: inline-flex;168 align-items: center;169 gap: 12px;170 font-size: 34px;171 font-weight: 600;172 }173 .time-pill {174 position: absolute;175 left: 22px;176 top: 22px;177 background: #f5e6b5;178 color: #5c4a2a;179 border-radius: 28px;180 padding: 12px 22px;181 font-size: 32px;182 font-weight: 600;183 }184 185 .title {186 margin-top: 20px;187 font-size: 44px;188 line-height: 1.2;189 color: #ffffff;190 }191 .author {192 display: flex;193 align-items: center;194 gap: 18px;195 margin-top: 14px;196 }197 .avatar {198 width: 52px;199 height: 52px;200 border-radius: 50%;201 background: #E0E0E0;202 border: 1px solid #BDBDBD;203 flex: 0 0 52px;204 }205 .author-name {206 font-size: 32px;207 color: #ff7a45;208 white-space: nowrap;209 overflow: hidden;210 text-overflow: ellipsis;211 max-width: 420px;212 }213 214 /* Bottom navigation */215 .bottom-nav {216 position: absolute;217 left: 0;218 bottom: 0;219 width: 100%;220 height: 210px;221 background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, #000 30%);222 border-top: 1px solid #222;223 padding-top: 16px;224 }225 .nav-items {226 display: flex;227 justify-content: space-around;228 align-items: flex-end;229 height: 150px;230 }231 .nav-item { text-align: center; color: #9b9b9b; }232 .nav-item.active { color: #ff7a45; }233 .nav-icon {234 width: 64px;235 height: 64px;236 margin: 0 auto 8px;237 display: block;238 }239 .nav-label { font-size: 30px; }240 241 .home-indicator {242 width: 320px;243 height: 12px;244 background: #ffffff;245 opacity: 0.9;246 border-radius: 10px;247 margin: 12px auto 24px;248 }249 250 /* SVG helpers */251 svg { display: block; }252</style>253</head>254<body>255<div id="render-target">256 257 <!-- Status bar -->258 <div class="statusbar">259 <div class="status-left">11:05</div>260 <div class="status-right">261 <div class="icon-mini" style="font-weight:700;">LR</div>262 <div class="icon-mini" title="Play">263 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff">264 <path d="M8 5l10 7-10 7z"/>265 </svg>266 </div>267 <div class="icon-mini" title="Wi‑Fi">268 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">269 <path d="M2 8c5-4 15-4 20 0"/>270 <path d="M5 12c3-3 11-3 14 0"/>271 <path d="M8 16c2-2 6-2 8 0"/>272 <circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>273 </svg>274 </div>275 <div class="icon-mini" title="Battery">276 <svg width="46" height="46" viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">277 <rect x="1" y="3" width="22" height="10" rx="2"></rect>278 <rect x="24" y="6" width="3" height="4" fill="#fff" stroke="none"></rect>279 </svg>280 </div>281 </div>282 </div>283 284 <!-- Header search -->285 <div class="header">286 <div class="search-row">287 <div class="back-btn" aria-label="Back">288 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">289 <path d="M15 18l-6-6 6-6"/>290 </svg>291 </div>292 293 <div class="search-box">294 <div class="search-placeholder">Dessert</div>295 <div class="search-clear" aria-label="Clear">296 <svg width="40" height="40" viewBox="0 0 24 24" stroke="#bdbdbd" stroke-width="2.5" fill="none" stroke-linecap="round">297 <path d="M6 6l12 12M18 6L6 18"/>298 </svg>299 </div>300 </div>301 302 <div class="filter-btn" aria-label="Filters">303 <svg width="44" height="44" viewBox="0 0 24 24" stroke="#ffffff" stroke-width="2.2" fill="none" stroke-linecap="round">304 <path d="M4 7h16"/>305 <circle cx="9" cy="7" r="2.5"/>306 <path d="M4 17h16"/>307 <circle cx="15" cy="17" r="2.5"/>308 </svg>309 </div>310 </div>311 312 <div class="tabs">313 <div class="tab">Kitchen Stories</div>314 <div class="tab active">Community <span class="indicator"></span></div>315 <div class="tab">Unlock cookbook+</div>316 </div>317 </div>318 319 <!-- Scrollable content -->320 <div class="content">321 <div class="grid">322 323 <!-- Card 1 -->324 <div class="card">325 <div class="img-wrap">326 <div class="img-ph">[IMG: Gingerbread cookies]</div>327 <div class="like-pill">328 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">329 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>330 </svg>331 21332 </div>333 </div>334 <div class="title">Gingerbread from Poland</div>335 <div class="author">336 <div class="avatar"></div>337 <div class="author-name">Marlena</div>338 </div>339 </div>340 341 <!-- Card 2 -->342 <div class="card">343 <div class="img-wrap">344 <div class="img-ph">[IMG: Chocolate Bûche de Noël]</div>345 <div class="like-pill">346 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">347 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>348 </svg>349 17350 </div>351 </div>352 <div class="title">Cinnamon Brandy Bûche de Noël</div>353 <div class="author">354 <div class="avatar"></div>355 <div class="author-name">Omeshika Kaggodaarac...</div>356 </div>357 </div>358 359 <!-- Card 3 -->360 <div class="card">361 <div class="img-wrap">362 <div class="img-ph">[IMG: Saffron buns on tray]</div>363 <div class="time-pill">29 min.</div>364 <div class="like-pill">365 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">366 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>367 </svg>368 10369 </div>370 </div>371 <div class="title">Lussekatter (Lussebullar)</div>372 <div class="author">373 <div class="avatar"></div>374 <div class="author-name">Emma</div>375 </div>376 </div>377 378 <!-- Card 4 -->379 <div class="card">380 <div class="img-wrap">381 <div class="img-ph">[IMG: Cooked apple slices with cream and spice]</div>382 <div class="time-pill">30 min.</div>383 <div class="like-pill">384 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">385 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>386 </svg>387 14388 </div>389 </div>390 <div class="title">Cooked “Caramel” Apples</div>391 <div class="author">392 <div class="avatar"></div>393 <div class="author-name">The Simple Foodie</div>394 </div>395 </div>396 397 <!-- Card 5 -->398 <div class="card">399 <div class="img-wrap">400 <div class="img-ph">[IMG: Fruit cake in pan]</div>401 <div class="time-pill">45 min.</div>402 <div class="like-pill">403 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">404 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>405 </svg>406 8407 </div>408 </div>409 <div class="title">Holiday Fruit Cake</div>410 <div class="author">411 <div class="avatar"></div>412 <div class="author-name">Kitchen Stories</div>413 </div>414 </div>415 416 <!-- Card 6 -->417 <div class="card">418 <div class="img-wrap">419 <div class="img-ph">[IMG: Dessert plated on a table]</div>420 <div class="time-pill">55 min.</div>421 <div class="like-pill">422 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">423 <path d="M20.8 8.6c0 4.5-6.8 8.8-8.8 10-2-1.2-8.8-5.5-8.8-10A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 1.5z"/>424 </svg>425 12426 </div>427 </div>428 <div class="title">Sweet Baked Treat</div>429 <div class="author">430 <div class="avatar"></div>431 <div class="author-name">Community Baker</div>432 </div>433 </div>434 435 </div>436 </div>437 438 <!-- Bottom navigation -->439 <div class="bottom-nav">440 <div class="nav-items">441 <div class="nav-item">442 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9b9b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">443 <path d="M3 11l9-7 9 7"></path>444 <path d="M5 10v9h14v-9"></path>445 </svg>446 <div class="nav-label">Today</div>447 </div>448 <div class="nav-item active">449 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#ff7a45" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">450 <circle cx="11" cy="11" r="7"></circle>451 <path d="M21 21l-4.3-4.3"></path>452 </svg>453 <div class="nav-label">Search</div>454 </div>455 <div class="nav-item">456 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9b9b9b" stroke-width="2">457 <circle cx="12" cy="8" r="4"></circle>458 <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6"></path>459 </svg>460 <div class="nav-label">Profile</div>461 </div>462 </div>463 <div class="home-indicator"></div>464 </div>465 466</div>467</body>468</html>