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>Community - Search</title>7<style>8 html, body { margin: 0; padding: 0; background: transparent; }9 * { box-sizing: border-box; }10 #render-target {11 position: relative;12 overflow: hidden;13 width: 1080px;14 height: 2400px;15 background: #000000;16 color: #FFFFFF;17 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;18 }19 20 /* Status bar */21 .status-bar {22 height: 96px;23 padding: 20px 32px 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #EDEDED;28 font-weight: 600;29 letter-spacing: 1px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .status-icon {37 width: 28px;38 height: 28px;39 opacity: 0.9;40 }41 42 /* Top search row */43 .topbar {44 display: flex;45 align-items: center;46 padding: 12px 36px 0 24px;47 gap: 20px;48 }49 .back-btn {50 width: 84px;51 height: 84px;52 border: none;53 background: transparent;54 display: flex;55 align-items: center;56 justify-content: center;57 padding: 0;58 cursor: default;59 }60 .search-box {61 flex: 1;62 height: 112px;63 border: 2px solid #3A3A3A;64 border-radius: 28px;65 padding: 0 24px;66 display: flex;67 align-items: center;68 justify-content: space-between;69 background: #0E0E0E;70 }71 .search-left {72 display: flex;73 align-items: center;74 gap: 16px;75 color: #EDEDED;76 font-size: 40px;77 font-weight: 600;78 }79 .search-actions {80 display: flex;81 align-items: center;82 gap: 24px;83 }84 .icon-btn {85 width: 64px;86 height: 64px;87 border-radius: 16px;88 display: flex;89 align-items: center;90 justify-content: center;91 color: #CCCCCC;92 }93 94 /* Tabs */95 .tabs {96 display: flex;97 gap: 56px;98 padding: 28px 36px 8px 36px;99 align-items: center;100 font-size: 40px;101 color: #CFCFCF;102 white-space: nowrap;103 }104 .tab {105 padding-bottom: 18px;106 }107 .tab.active {108 color: #FFFFFF;109 border-bottom: 8px solid #E9753F;110 }111 112 /* Grid of cards */113 .content {114 padding: 24px 36px 260px 36px; /* bottom padding for nav */115 }116 .grid {117 display: grid;118 grid-template-columns: 1fr 1fr;119 gap: 32px 32px;120 }121 .card {122 width: 100%;123 }124 .thumb {125 position: relative;126 width: 100%;127 height: 640px;128 border-radius: 36px;129 overflow: hidden;130 background: #E0E0E0;131 border: 1px solid #BDBDBD;132 display: flex;133 align-items: center;134 justify-content: center;135 color: #6B6B6B;136 font-size: 36px;137 text-align: center;138 padding: 16px;139 }140 .thumb.tall { height: 700px; }141 .thumb.short { height: 620px; }142 143 .pill-time {144 position: absolute;145 left: 24px;146 top: 24px;147 background: #FFE6A3;148 color: #1C1C1C;149 padding: 12px 22px;150 border-radius: 24px;151 font-size: 34px;152 font-weight: 600;153 }154 .likes {155 position: absolute;156 right: 24px;157 bottom: 24px;158 background: #FFFFFF;159 color: #1A1A1A;160 padding: 12px 18px;161 border-radius: 28px;162 display: flex;163 align-items: center;164 gap: 12px;165 font-size: 34px;166 font-weight: 600;167 }168 .likes svg { width: 34px; height: 34px; }169 170 .title {171 margin-top: 22px;172 font-size: 46px;173 line-height: 1.2;174 font-weight: 700;175 color: #FFFFFF;176 }177 .author {178 margin-top: 18px;179 display: flex;180 align-items: center;181 gap: 18px;182 }183 .avatar {184 width: 64px;185 height: 64px;186 border-radius: 50%;187 background: #E0E0E0;188 border: 1px solid #BDBDBD;189 display: flex;190 align-items: center;191 justify-content: center;192 color: #5F5F5F;193 font-weight: 700;194 }195 .author-name {196 font-size: 36px;197 color: #F08A54;198 font-weight: 600;199 }200 201 /* Bottom nav */202 .bottom-nav {203 position: absolute;204 left: 0;205 right: 0;206 bottom: 0;207 height: 188px;208 background: #111111;209 border-top: 1px solid #242424;210 display: flex;211 align-items: center;212 justify-content: space-around;213 padding-bottom: 30px;214 }215 .nav-item {216 display: flex;217 flex-direction: column;218 align-items: center;219 gap: 14px;220 color: #B3B3B3;221 font-size: 30px;222 }223 .nav-item svg {224 width: 48px;225 height: 48px;226 }227 .nav-item.active {228 color: #E9753F;229 }230 231 .home-indicator {232 position: absolute;233 bottom: 188px;234 left: 50%;235 transform: translateX(-50%);236 width: 360px;237 height: 10px;238 background: #E6E6E6;239 border-radius: 8px;240 opacity: 0.85;241 }242</style>243</head>244<body>245<div id="render-target">246 <!-- Status bar -->247 <div class="status-bar">248 <div class="status-left">11:05</div>249 <div class="status-right">250 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M3 12h18"/></svg>251 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M4 10l8-6 8 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg>252 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M2 18h20M6 14h12M10 10h4"/></svg>253 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><path d="M3 12h6l3-9 3 18 3-9h3"/></svg>254 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"><path d="M3 8h4v8H3zM10 5h4v14h-4zM17 11h4v8h-4z"/></svg>255 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M6 12h12M9 18h6"/></svg>256 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M21 10v4"/></svg>257 </div>258 </div>259 260 <!-- Back + Search -->261 <div class="topbar">262 <button class="back-btn" aria-label="Back">263 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">264 <path d="M15 18l-6-6 6-6"/>265 </svg>266 </button>267 268 <div class="search-box">269 <div class="search-left">270 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round">271 <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>272 </svg>273 <span>Dessert</span>274 </div>275 <div class="search-actions">276 <div class="icon-btn" aria-label="Clear">277 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round">278 <path d="M18 6L6 18M6 6l12 12"/>279 </svg>280 </div>281 <div class="icon-btn" aria-label="Filters">282 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#BBBBBB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">283 <path d="M4 7h16M7 7v6m10-6v10M4 17h9"/>284 <circle cx="7" cy="13" r="2" fill="none"/>285 <circle cx="17" cy="17" r="2" fill="none"/>286 </svg>287 </div>288 </div>289 </div>290 </div>291 292 <!-- Tabs -->293 <div class="tabs">294 <div class="tab">Kitchen Stories</div>295 <div class="tab active">Community</div>296 <div class="tab">Unlock cookbook+</div>297 </div>298 299 <!-- Content grid -->300 <div class="content">301 <div class="grid">302 <!-- Card 1 -->303 <div class="card">304 <div class="thumb tall">305 <div>[IMG: Chocolate lava cake in ramekin]</div>306 <div class="pill-time">30 min.</div>307 <div class="likes">308 <svg viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2"><path d="M12 21s-7-5.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 10-7 10z"/></svg>309 <span>11</span>310 </div>311 </div>312 <div class="title">Easy Chocolate Lava Cakes</div>313 <div class="author">314 <div class="avatar" style="background:#F3C15E;color:#1A1A1A;">M</div>315 <div class="author-name">Mason</div>316 </div>317 </div>318 319 <!-- Card 2 -->320 <div class="card">321 <div class="thumb short">322 <div>[IMG: Coconut ricotta almond smoothie in glass]</div>323 <div class="pill-time">10 min.</div>324 <div class="likes">325 <svg viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2"><path d="M12 21s-7-5.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 10-7 10z"/></svg>326 <span>17</span>327 </div>328 </div>329 <div class="title">COCONUT RICOTTA ALMOND SMOOTHIE W...</div>330 <div class="author">331 <div class="avatar">A</div>332 <div class="author-name">helena-laura</div>333 </div>334 </div>335 336 <!-- Card 3 -->337 <div class="card">338 <div class="thumb short">339 <div>[IMG: Ruby chocolate pudding with berries]</div>340 <div class="pill-time">15 min.</div>341 <div class="likes">342 <svg viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2"><path d="M12 21s-7-5.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 10-7 10z"/></svg>343 <span>14</span>344 </div>345 </div>346 <div class="title">Ruby chocolate pudding</div>347 <div class="author">348 <div class="avatar">A</div>349 <div class="author-name">helena-laura</div>350 </div>351 </div>352 353 <!-- Card 4 -->354 <div class="card">355 <div class="thumb short">356 <div>[IMG: Chocolate loaf cake on wooden board]</div>357 <div class="pill-time">105 min.</div>358 <div class="likes">359 <svg viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2"><path d="M12 21s-7-5.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 10-7 10z"/></svg>360 <span>15</span>361 </div>362 </div>363 <div class="title">Oma’s Nusskuchen</div>364 <div class="author">365 <div class="avatar" style="background:#F3C15E;color:#1A1A1A;">D</div>366 <div class="author-name">Dustin Roxborough</div>367 </div>368 </div>369 </div>370 </div>371 372 <!-- Home indicator -->373 <div class="home-indicator"></div>374 375 <!-- Bottom navigation -->376 <div class="bottom-nav">377 <div class="nav-item">378 <svg viewBox="0 0 24 24" fill="none" stroke="#B3B3B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">379 <path d="M3 12l9-8 9 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/>380 </svg>381 <div>Today</div>382 </div>383 <div class="nav-item active">384 <svg viewBox="0 0 24 24" fill="none" stroke="#E9753F" stroke-width="2" stroke-linecap="round">385 <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>386 </svg>387 <div>Search</div>388 </div>389 <div class="nav-item">390 <svg viewBox="0 0 24 24" fill="none" stroke="#B3B3B3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">391 <circle cx="12" cy="8" r="4"/><path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6"/>392 </svg>393 <div>Profile</div>394 </div>395 </div>396</div>397</body>398</html>