GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search - Dessert</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000000;15 color: #ffffff;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 .statusbar {20 height: 92px;21 padding: 20px 32px 0 32px;22 box-sizing: border-box;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #EAEAEA;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-chip {36 font-size: 28px;37 color: #EAEAEA;38 opacity: 0.9;39 border: 1px solid #3a3a3a;40 padding: 2px 10px;41 border-radius: 6px;42 }43 44 .toolbar {45 padding: 18px 32px 0 24px;46 display: flex;47 align-items: center;48 gap: 24px;49 }50 .icon-btn {51 width: 72px;52 height: 72px;53 display: inline-flex;54 align-items: center;55 justify-content: center;56 border-radius: 18px;57 }58 .search-field {59 position: relative;60 flex: 1;61 height: 96px;62 border: 2px solid #3A3A3A;63 border-radius: 28px;64 padding: 0 120px 0 32px;65 box-sizing: border-box;66 display: flex;67 align-items: center;68 color: #D8D8D8;69 font-size: 40px;70 }71 .search-placeholder { opacity: 0.95; }72 .search-clear {73 position: absolute;74 right: 104px;75 top: 50%;76 transform: translateY(-50%);77 width: 56px; height: 56px;78 display: flex; align-items: center; justify-content: center;79 opacity: 0.9;80 }81 .filter-btn {82 width: 96px; height: 96px;83 display: inline-flex; align-items: center; justify-content: center;84 border: 2px solid #3A3A3A;85 border-radius: 28px;86 }87 88 .tabs {89 margin-top: 22px;90 padding: 0 32px;91 }92 .tab-row {93 display: flex;94 align-items: center;95 gap: 56px;96 font-size: 44px;97 }98 .tab {99 color: #CFCFCF;100 }101 .tab.active {102 color: #FF6A2F;103 }104 .tab-underline {105 height: 8px;106 width: 260px;107 background: #FF6A2F;108 border-radius: 6px;109 margin-top: 16px;110 }111 112 .grid {113 padding: 28px 28px 240px 28px;114 display: grid;115 grid-template-columns: repeat(2, 1fr);116 grid-column-gap: 36px;117 grid-row-gap: 48px;118 box-sizing: border-box;119 }120 .card {121 color: #FFFFFF;122 }123 .card-image {124 position: relative;125 height: 600px;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 border-radius: 36px;129 display: flex;130 align-items: center;131 justify-content: center;132 color: #757575;133 font-size: 34px;134 text-align: center;135 overflow: hidden;136 }137 .pill-time {138 position: absolute;139 top: 22px;140 left: 22px;141 background: #F3E2B6;142 color: #1A1A1A;143 font-size: 34px;144 padding: 10px 22px;145 border-radius: 24px;146 border: 1px solid rgba(0,0,0,0.12);147 }148 .pill-like {149 position: absolute;150 right: 22px;151 bottom: 22px;152 background: #FFFFFF;153 color: #111111;154 font-size: 34px;155 padding: 10px 20px;156 border-radius: 24px;157 display: inline-flex;158 align-items: center;159 gap: 12px;160 box-shadow: 0 2px 6px rgba(0,0,0,0.25);161 }162 .pill-like svg { width: 36px; height: 36px; }163 164 .title {165 margin-top: 20px;166 font-size: 44px;167 line-height: 1.18;168 letter-spacing: 0.2px;169 }170 .byline {171 margin-top: 14px;172 display: flex; align-items: center; gap: 16px;173 }174 .avatar {175 width: 64px; height: 64px; border-radius: 50%;176 background: #E0E0E0; border: 1px solid #BDBDBD;177 display: flex; align-items: center; justify-content: center;178 color: #757575; font-size: 18px;179 }180 .author {181 font-size: 34px;182 color: #FF6A2F;183 }184 185 .bottom-nav {186 position: absolute;187 left: 0; right: 0; bottom: 0;188 height: 204px;189 background: #0F0F0F;190 border-top: 1px solid #262626;191 display: flex;192 justify-content: space-around;193 align-items: center;194 }195 .nav-item {196 width: 33.33%;197 display: flex; flex-direction: column; align-items: center; justify-content: center;198 gap: 10px;199 color: #CFCFCF;200 font-size: 28px;201 }202 .nav-item.active { color: #FF6A2F; }203 .nav-icon svg { width: 56px; height: 56px; }204 205 .home-indicator {206 position: absolute;207 left: 50%;208 transform: translateX(-50%);209 bottom: 220px;210 width: 420px;211 height: 10px;212 background: #F2F2F2;213 border-radius: 6px;214 opacity: 0.95;215 }216</style>217</head>218<body>219<div id="render-target">220 <!-- Status bar -->221 <div class="statusbar">222 <div>11:04</div>223 <div class="status-right">224 <div class="status-chip">LR</div>225 <svg width="36" height="36" viewBox="0 0 24 24" fill="#EAEAEA" aria-label="Play Store">226 <path d="M3 2l15 10L3 22z"></path>227 </svg>228 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#EAEAEA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="WiFi">229 <path d="M2 8a15 15 0 0 1 20 0"></path>230 <path d="M5 12a10 10 0 0 1 14 0"></path>231 <path d="M8.5 15.5a5 5 0 0 1 7 0"></path>232 <circle cx="12" cy="19" r="1.2" fill="#EAEAEA" stroke="none"></circle>233 </svg>234 <svg width="48" height="48" viewBox="0 0 24 24" aria-label="Battery" fill="none" stroke="#EAEAEA" stroke-width="2">235 <rect x="2" y="6" width="18" height="12" rx="2"></rect>236 <rect x="3.8" y="7.8" width="14.4" height="8.4" fill="#EAEAEA" stroke="none"></rect>237 <rect x="20" y="10" width="2" height="4" rx="1" fill="#EAEAEA" stroke="none"></rect>238 </svg>239 </div>240 </div>241 242 <!-- Back + Search -->243 <div class="toolbar">244 <div class="icon-btn" aria-label="Back">245 <svg width="48" height="48" viewBox="0 0 32 32" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">246 <path d="M20 6 L10 16 L20 26"></path>247 </svg>248 </div>249 <div class="search-field">250 <div class="search-placeholder">Dessert</div>251 <div class="search-clear" aria-label="Clear">252 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#CFCFCF" stroke-width="2.5" stroke-linecap="round">253 <path d="M6 6 L18 18 M18 6 L6 18" />254 </svg>255 </div>256 </div>257 <div class="filter-btn" aria-label="Filter">258 <svg viewBox="0 0 28 28" width="44" height="44" stroke="#ffffff" stroke-width="2" stroke-linecap="round">259 <path d="M4 7 H24"></path>260 <path d="M8 14 H24"></path>261 <path d="M4 21 H24"></path>262 <circle cx="10" cy="7" r="2" fill="#ffffff"></circle>263 <circle cx="18" cy="14" r="2" fill="#ffffff"></circle>264 <circle cx="14" cy="21" r="2" fill="#ffffff"></circle>265 </svg>266 </div>267 </div>268 269 <!-- Tabs -->270 <div class="tabs">271 <div class="tab-row">272 <div class="tab active">Kitchen Stories</div>273 <div class="tab">Community</div>274 <div class="tab">Unlock cookbook+</div>275 </div>276 <div class="tab-underline"></div>277 </div>278 279 <!-- Grid of cards -->280 <div class="grid">281 <!-- Card 1 -->282 <div class="card">283 <div class="card-image">284 <div class="pill-time">30 min.</div>285 <div class="pill-like">286 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">287 <path d="M12 21s-8-5.5-8-11c0-3 2.4-5 5-5 2.4 0 3.4 1.6 3 1.9.4-.3 1.4-1.9 3.9-1.9 2.6 0 5.1 2 5.1 5 0 5.5-9 11-9 11z"/>288 </svg>289 <span>135K</span>290 </div>291 <div>[IMG: Stack of chocolate chip cookies]</div>292 </div>293 <div class="title">Chewy chocolate chip cookies</div>294 <div class="byline">295 <div class="avatar">IMG</div>296 <div class="author">Alex Hiller</div>297 </div>298 </div>299 300 <!-- Card 2 -->301 <div class="card">302 <div class="card-image">303 <div class="pill-time">30 min.</div>304 <div class="pill-like">305 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">306 <path d="M12 21s-8-5.5-8-11c0-3 2.4-5 5-5 2.4 0 3.4 1.6 3 1.9.4-.3 1.4-1.9 3.9-1.9 2.6 0 5.1 2 5.1 5 0 5.5-9 11-9 11z"/>307 </svg>308 <span>142K</span>309 </div>310 <div>[IMG: Tiramisu slice on plate with spoon]</div>311 </div>312 <div class="title">Make classic tiramisu with Lisa</div>313 <div class="byline">314 <div class="avatar">IMG</div>315 <div class="author">Lisa Schölzel</div>316 </div>317 </div>318 319 <!-- Card 3 -->320 <div class="card">321 <div class="card-image">322 <div class="pill-time">30 min.</div>323 <div class="pill-like">324 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">325 <path d="M12 21s-8-5.5-8-11c0-3 2.4-5 5-5 2.4 0 3.4 1.6 3 1.9.4-.3 1.4-1.9 3.9-1.9 2.6 0 5.1 2 5.1 5 0 5.5-9 11-9 11z"/>326 </svg>327 <span>142K</span>328 </div>329 <div>[IMG: Molten chocolate cake on plate]</div>330 </div>331 <div class="title">Molten chocolate cake</div>332 <div class="byline">333 <div class="avatar">IMG</div>334 <div class="author">Alex Hiller</div>335 </div>336 </div>337 338 <!-- Card 4 -->339 <div class="card">340 <div class="card-image">341 <div class="pill-time">65 min.</div>342 <div class="pill-like">343 <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">344 <path d="M12 21s-8-5.5-8-11c0-3 2.4-5 5-5 2.4 0 3.4 1.6 3 1.9.4-.3 1.4-1.9 3.9-1.9 2.6 0 5.1 2 5.1 5 0 5.5-9 11-9 11z"/>345 </svg>346 <span>113K</span>347 </div>348 <div>[IMG: Manhattan cheesecake with berries]</div>349 </div>350 <div class="title">Manhattan cheesecake</div>351 <div class="byline">352 <div class="avatar">IMG</div>353 <div class="author">Mengting</div>354 </div>355 </div>356 </div>357 358 <!-- Home indicator -->359 <div class="home-indicator"></div>360 361 <!-- Bottom navigation -->362 <div class="bottom-nav">363 <div class="nav-item">364 <div class="nav-icon">365 <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="Home">366 <path d="M3 10.5 L12 3 L21 10.5"></path>367 <path d="M5 10.5 V21 H19 V10.5"></path>368 </svg>369 </div>370 <div>Today</div>371 </div>372 373 <div class="nav-item active">374 <div class="nav-icon">375 <svg viewBox="0 0 24 24" fill="none" stroke="#FF6A2F" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-label="Search">376 <circle cx="11" cy="11" r="7"></circle>377 <path d="M20 20 L16.5 16.5"></path>378 </svg>379 </div>380 <div>Search</div>381 </div>382 383 <div class="nav-item">384 <div class="nav-icon">385 <svg viewBox="0 0 24 24" fill="none" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="Profile">386 <circle cx="12" cy="8" r="4"></circle>387 <path d="M4 21c0-4.4 4-7 8-7s8 2.6 8 7"></path>388 </svg>389 </div>390 <div>Profile</div>391 </div>392 </div>393</div>394</body>395</html>