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>Recipe App UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAFAFA;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #333333;25 color: #FFFFFF;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 36px;30 box-sizing: border-box;31 font-weight: 600;32 }33 .sb-left, .sb-right { display: flex; align-items: center; gap: 18px; }34 .sb-icon { width: 28px; height: 28px; opacity: 0.9; }35 .sb-dot { width: 8px; height: 8px; background: #BDBDBD; border-radius: 50%; display: inline-block; }36 37 /* Hero banner */38 .hero {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1080px;43 height: 420px;44 background: #CFE3E3;45 display: flex;46 align-items: center;47 justify-content: space-around;48 padding: 0 40px;49 box-sizing: border-box;50 }51 .img-ph {52 background: #E0E0E0;53 border: 1px solid #BDBDBD;54 color: #757575;55 display: flex;56 justify-content: center;57 align-items: center;58 font-weight: 600;59 text-align: center;60 }61 .hero .img-ph { border-radius: 12px; }62 .ph-drink { width: 220px; height: 320px; }63 .ph-salad { width: 360px; height: 250px; }64 .ph-coffee { width: 240px; height: 180px; }65 66 /* Greeting */67 .greeting {68 position: absolute;69 top: 560px;70 left: 56px;71 font-size: 64px;72 font-weight: 800;73 color: #333333;74 }75 76 /* Category chips */77 .chips {78 position: absolute;79 top: 660px;80 left: 40px;81 width: 1000px;82 display: flex;83 gap: 40px;84 }85 .chip {86 background: #FFFFFF;87 border-radius: 24px;88 box-shadow: 0 6px 16px rgba(0,0,0,0.08);89 width: 300px;90 height: 150px;91 padding: 24px;92 box-sizing: border-box;93 display: flex;94 align-items: center;95 justify-content: space-between;96 }97 .chip .label {98 font-size: 36px;99 font-weight: 700;100 color: #333333;101 }102 .chip .thumb {103 width: 92px;104 height: 92px;105 border-radius: 50%;106 overflow: hidden;107 }108 109 /* Section header */110 .section-header {111 position: absolute;112 top: 840px;113 left: 56px;114 right: 56px;115 display: flex;116 justify-content: space-between;117 align-items: center;118 }119 .section-header .title {120 font-size: 48px;121 font-weight: 800;122 color: #333333;123 }124 .section-header .view-all {125 font-size: 36px;126 font-weight: 700;127 color: #3C8F8E;128 }129 130 /* Recommendations cards */131 .cards {132 position: absolute;133 top: 920px;134 left: 40px;135 width: 1000px;136 display: flex;137 gap: 24px;138 overflow: hidden;139 }140 .card {141 position: relative;142 width: 960px;143 height: 1000px;144 border-radius: 28px;145 overflow: hidden;146 background: #FFFFFF;147 box-shadow: 0 10px 26px rgba(0,0,0,0.12);148 }149 .card .photo {150 position: absolute;151 inset: 0;152 background: #E0E0E0;153 border: 1px solid #BDBDBD;154 color: #757575;155 display: flex;156 align-items: center;157 justify-content: center;158 font-weight: 700;159 font-size: 36px;160 }161 .card .fade {162 position: absolute;163 bottom: 0;164 left: 0;165 width: 100%;166 height: 360px;167 background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.0));168 }169 170 .badge {171 position: absolute;172 top: 24px;173 left: 24px;174 height: 72px;175 padding: 0 26px;176 background: #2B2B2B;177 color: #FFFFFF;178 border-radius: 36px;179 display: flex;180 align-items: center;181 gap: 16px;182 font-size: 28px;183 font-weight: 800;184 letter-spacing: 1px;185 }186 .badge svg { width: 34px; height: 34px; }187 188 .card-content {189 position: absolute;190 left: 36px;191 bottom: 36px;192 right: 120px;193 color: #FFFFFF;194 }195 .stars { display: flex; gap: 6px; margin-bottom: 18px; }196 .stars svg { width: 24px; height: 24px; fill: #FF7A2A; }197 .card-title {198 font-size: 58px;199 font-weight: 800;200 line-height: 1.15;201 margin-bottom: 12px;202 }203 .card-source {204 font-size: 28px;205 opacity: 0.85;206 letter-spacing: 1px;207 }208 209 .plus-btn {210 position: absolute;211 right: 36px;212 bottom: 36px;213 width: 88px;214 height: 88px;215 background: #56B6B1;216 border-radius: 50%;217 display: flex;218 align-items: center;219 justify-content: center;220 box-shadow: 0 6px 16px rgba(0,0,0,0.26);221 }222 .plus-btn svg { width: 40px; height: 40px; stroke: #FFFFFF; stroke-width: 8; }223 224 /* Second card preview (partial visibility) */225 .card.small {226 width: 520px;227 height: 1000px;228 border-radius: 28px;229 }230 231 /* Bottom navigation */232 .bottom-nav {233 position: absolute;234 bottom: 0;235 left: 0;236 width: 1080px;237 height: 160px;238 background: #FFFFFF;239 box-shadow: 0 -6px 16px rgba(0,0,0,0.08);240 display: flex;241 align-items: center;242 justify-content: space-around;243 }244 .nav-item {245 display: flex;246 align-items: center;247 justify-content: center;248 width: 140px;249 height: 100px;250 color: #2F2F2F;251 }252 .nav-item svg { width: 56px; height: 56px; stroke: #2F2F2F; stroke-width: 8; fill: none; }253 .home-indicator {254 position: absolute;255 bottom: 20px;256 left: 50%;257 transform: translateX(-50%);258 width: 300px;259 height: 10px;260 border-radius: 6px;261 background: #CFCFCF;262 opacity: 0.8;263 }264</style>265</head>266<body>267<div id="render-target">268 269 <!-- Status Bar -->270 <div class="status-bar">271 <div class="sb-left">272 <div style="font-size:34px;">3:00</div>273 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M12 2l2.5 6.5L21 9l-5 4 1.5 6-5.5-3.5L6.5 19 8 13 3 9l6.5-.5L12 2z"/></svg>274 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#FFFFFF"/></svg>275 <span class="sb-dot"></span>276 </div>277 <div class="sb-right">278 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M2 18h20c0-7-5-12-10-12S2 11 2 18z"/></svg>279 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#FFFFFF"/></svg>280 </div>281 </div>282 283 <!-- Hero -->284 <div class="hero">285 <div class="img-ph ph-drink">[IMG: Tall Citrus Drink]</div>286 <div class="img-ph ph-salad">[IMG: Green Salad Plate]</div>287 <div class="img-ph ph-coffee">[IMG: Cup of Coffee]</div>288 </div>289 290 <!-- Greeting -->291 <div class="greeting">Good Afternoon!</div>292 293 <!-- Category Chips -->294 <div class="chips">295 <div class="chip">296 <div class="label">Courses</div>297 <div class="thumb img-ph">[IMG]</div>298 </div>299 <div class="chip">300 <div class="label">Cuisines</div>301 <div class="thumb img-ph">[IMG]</div>302 </div>303 <div class="chip">304 <div class="label">Diets</div>305 <div class="thumb img-ph">[IMG]</div>306 </div>307 </div>308 309 <!-- Section Header -->310 <div class="section-header">311 <div class="title">Your recommendations</div>312 <div class="view-all">View All</div>313 </div>314 315 <!-- Cards -->316 <div class="cards">317 <!-- Main Card -->318 <div class="card">319 <div class="photo">[IMG: Vegan Black Bean Enchiladas]</div>320 <div class="fade"></div>321 322 <div class="badge">323 <svg viewBox="0 0 24 24">324 <path fill="#FFFFFF" d="M12 2a4 4 0 00-4 4v3H6a2 2 0 00-2 2v7a2 2 0 002 2h12a2 2 0 002-2v-7a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm-2 7V6a2 2 0 114 0v3h-4z"/>325 </svg>326 GUIDED327 </div>328 329 <div class="card-content">330 <div class="stars">331 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9 1.3-6.2L3 8.8 9 8l3-6z"/></svg>332 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9 1.3-6.2L3 8.8 9 8l3-6z"/></svg>333 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9 1.3-6.2L3 8.8 9 8l3-6z"/></svg>334 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9 1.3-6.2L3 8.8 9 8l3-6z"/></svg>335 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .8-4.5 4 1.3 6.2L12 16l-5.8 3.9 1.3-6.2L3 8.8 9 8l3-6z"/></svg>336 </div>337 <div class="card-title">Vegan Black Bean Enchiladas</div>338 <div class="card-source">YUMMLY</div>339 </div>340 341 <div class="plus-btn">342 <svg viewBox="0 0 24 24">343 <path d="M12 5v14M5 12h14" />344 </svg>345 </div>346 </div>347 348 <!-- Secondary preview card -->349 <div class="card small">350 <div class="photo">[IMG: Pasta on Rustic Plate]</div>351 <div class="fade"></div>352 </div>353 </div>354 355 <!-- Bottom Navigation -->356 <div class="bottom-nav">357 <div class="nav-item">358 <svg viewBox="0 0 24 24">359 <path d="M3 10L12 3l9 7v10H6V10z" />360 <path d="M9 21V12h6v9" />361 </svg>362 </div>363 <div class="nav-item">364 <svg viewBox="0 0 24 24">365 <circle cx="11" cy="11" r="7" />366 <path d="M20 20l-4-4" />367 </svg>368 </div>369 <div class="nav-item">370 <svg viewBox="0 0 24 24">371 <circle cx="12" cy="8" r="4" />372 <path d="M4 21c2.5-5 13.5-5 16 0" />373 </svg>374 </div>375 <div class="nav-item">376 <svg viewBox="0 0 24 24">377 <path d="M4 7h16M4 12h16M4 17h10" />378 </svg>379 </div>380 <div class="nav-item">381 <svg viewBox="0 0 24 24">382 <rect x="3" y="5" width="18" height="14" rx="2" />383 <path d="M7 9h10M7 13h10" />384 </svg>385 </div>386 <div class="home-indicator"></div>387 </div>388 389</div>390</body>391</html>