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">6<title>Recipe App Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAFAFA;15 border-radius: 0;16 box-shadow: none;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 110px;26 background: #3F3F3F;27 color: #FFFFFF;28 display: flex;29 align-items: center;30 padding: 0 40px;31 box-sizing: border-box;32 font-size: 38px;33 }34 .status-left { display: flex; align-items: center; gap: 30px; }35 .status-right {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 30px;40 }41 .status-icon {42 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;43 }44 .status-icon svg { width: 40px; height: 40px; fill: #FFFFFF; }45 46 /* Hero banner */47 .hero {48 position: absolute;49 top: 110px;50 left: 0;51 width: 1080px;52 height: 520px;53 background: #F2C9AD; /* peachy base behind image */54 display: flex;55 align-items: flex-end;56 justify-content: center;57 overflow: hidden;58 }59 .hero .banner-img {60 width: 1080px;61 height: 520px;62 background: #E0E0E0;63 border-top: 1px solid #BDBDBD;64 border-bottom: 1px solid #BDBDBD;65 display: flex;66 align-items: center;67 justify-content: center;68 color: #757575;69 font-size: 36px;70 letter-spacing: 0.3px;71 }72 73 /* Greeting */74 .greeting {75 position: absolute;76 top: 660px;77 left: 48px;78 width: 984px;79 color: #333333;80 }81 .greeting h1 {82 margin: 0 0 20px 0;83 font-size: 80px;84 font-weight: 800;85 letter-spacing: -1px;86 }87 88 /* Quick categories */89 .quick-cats {90 position: absolute;91 top: 800px;92 left: 48px;93 width: 984px;94 display: flex;95 gap: 32px;96 }97 .cat-card {98 flex: 0 0 300px;99 height: 160px;100 background: #FFFFFF;101 border-radius: 28px;102 box-shadow: 0 10px 24px rgba(0,0,0,0.08);103 padding: 24px;104 box-sizing: border-box;105 display: flex;106 align-items: center;107 justify-content: space-between;108 }109 .cat-card .title {110 font-size: 40px;111 color: #333;112 font-weight: 600;113 }114 .cat-card .img {115 width: 120px; height: 90px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 16px;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 22px; text-align: center; padding: 6px;121 }122 123 /* Recommended header */124 .section-head {125 position: absolute;126 top: 990px;127 left: 48px;128 width: 984px;129 display: flex;130 align-items: baseline;131 justify-content: space-between;132 }133 .section-head h2 {134 margin: 0;135 font-size: 54px;136 font-weight: 700;137 color: #3A3A3A;138 }139 .section-head a {140 font-size: 40px;141 color: #22A59A;142 text-decoration: none;143 font-weight: 600;144 }145 146 /* Cards list */147 .cards-row {148 position: absolute;149 top: 1070px;150 left: 48px;151 width: 984px;152 height: 980px;153 display: flex;154 gap: 32px;155 overflow: hidden;156 }157 .recipe-card {158 position: relative;159 width: 700px;160 height: 940px;161 border-radius: 34px;162 overflow: hidden;163 background: #FFFFFF;164 box-shadow: 0 14px 28px rgba(0,0,0,0.12);165 }166 .recipe-card .photo {167 position: absolute;168 top: 0; left: 0;169 width: 100%; height: 100%;170 background: #E0E0E0;171 border: 1px solid #BDBDBD;172 display: flex; align-items: center; justify-content: center;173 color: #757575; font-size: 36px; text-align: center; padding: 10px;174 }175 .recipe-card .gradient {176 position: absolute;177 left: 0; bottom: 0;178 width: 100%; height: 45%;179 background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.0));180 }181 .recipe-card .text {182 position: absolute;183 left: 32px; bottom: 36px;184 right: 32px;185 color: #FFFFFF;186 }187 .stars {188 display: flex; gap: 6px; margin-bottom: 16px;189 }190 .stars svg { width: 26px; height: 26px; fill: #FF7A37; }191 .recipe-title {192 font-size: 62px; font-weight: 800; margin: 0 0 16px 0;193 }194 .recipe-sub {195 font-size: 30px; letter-spacing: 1px; color: rgba(255,255,255,0.85);196 }197 .plus-btn {198 position: absolute;199 right: 32px; bottom: 36px;200 width: 88px; height: 88px; border-radius: 50%;201 background: #2DB0A4; display: flex; align-items: center; justify-content: center;202 box-shadow: 0 8px 20px rgba(0,0,0,0.25);203 }204 .plus-btn svg { width: 40px; height: 40px; stroke: #FFFFFF; stroke-width: 8; }205 206 /* Bottom navigation */207 .bottom-nav {208 position: absolute;209 left: 0;210 bottom: 120px;211 width: 1080px;212 height: 170px;213 background: #FFFFFF;214 border-top: 1px solid rgba(0,0,0,0.08);215 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);216 display: flex;217 align-items: center;218 justify-content: space-around;219 }220 .nav-item {221 width: 120px; height: 120px;222 display: flex; align-items: center; justify-content: center;223 border-radius: 28px;224 }225 .nav-item.active svg { stroke: #2DB0A4; fill: none; }226 .nav-item svg { width: 70px; height: 70px; stroke: #242424; stroke-width: 40; fill: none; }227 228 /* OS bottom bar */229 .os-bar {230 position: absolute;231 left: 0; bottom: 0;232 width: 1080px; height: 120px;233 background: #3F3F3F;234 display: flex; align-items: center; justify-content: center;235 }236 .home-pill {237 width: 300px; height: 16px; border-radius: 16px; background: #BDBDBD;238 }239</style>240</head>241<body>242<div id="render-target">243 244 <!-- Status bar -->245 <div class="status-bar">246 <div class="status-left">247 <div>8:37</div>248 <div class="status-icon">249 <!-- simple mail icon -->250 <svg viewBox="0 0 24 24"><path d="M2 5h20v14H2z"/><path d="M2 5l10 7 10-7" stroke="#FFFFFF" stroke-width="2" fill="none"/></svg>251 </div>252 <div class="status-icon">253 <!-- gear icon -->254 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3L4.9 19.1" stroke="#FFFFFF" stroke-width="2" fill="none"/></svg>255 </div>256 </div>257 <div class="status-right">258 <div class="status-icon">259 <!-- wifi icon -->260 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"/><path d="M5 11c4-3 10-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none"/><path d="M8 14c3-2 5-2 8 0" stroke="#FFFFFF" stroke-width="2" fill="none"/><circle cx="12" cy="18" r="2" fill="#FFFFFF"/></svg>261 </div>262 <div class="status-icon">263 <!-- battery icon -->264 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="22" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/><rect x="24" y="9" width="2" height="6" fill="#FFFFFF"/></svg>265 </div>266 </div>267 </div>268 269 <!-- Hero -->270 <div class="hero">271 <div class="banner-img">[IMG: Milkshake and breakfast plates]</div>272 </div>273 274 <!-- Greeting -->275 <div class="greeting">276 <h1>Good Evening!</h1>277 </div>278 279 <!-- Quick categories -->280 <div class="quick-cats">281 <div class="cat-card">282 <div class="title">Courses</div>283 <div class="img">[IMG: Baked Dish]</div>284 </div>285 <div class="cat-card">286 <div class="title">Cuisines</div>287 <div class="img">[IMG: Bowl of Noodles]</div>288 </div>289 <div class="cat-card">290 <div class="title">Diets</div>291 <div class="img">[IMG: Greens & Nuts]</div>292 </div>293 </div>294 295 <!-- Recommended header -->296 <div class="section-head">297 <h2>Recommended for you</h2>298 <a href="#">View All</a>299 </div>300 301 <!-- Cards row -->302 <div class="cards-row">303 <!-- Card 1 -->304 <div class="recipe-card">305 <div class="photo">[IMG: Arrabiata Sauce Close-up]</div>306 <div class="gradient"></div>307 <div class="text">308 <div class="stars">309 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>310 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>311 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>312 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>313 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>314 </div>315 <div class="recipe-title">Arrabiata Sauce</div>316 <div class="recipe-sub">HUNGRY SOUL BY ABHA</div>317 </div>318 <div class="plus-btn">319 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>320 </div>321 </div>322 323 <!-- Card 2 -->324 <div class="recipe-card">325 <div class="photo">[IMG: Greek Salad Close-up]</div>326 <div class="gradient"></div>327 <div class="text">328 <div class="stars">329 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>330 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>331 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>332 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>333 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.6L6 20l1.5-6.8L2 9h7z"></path></svg>334 </div>335 <div class="recipe-title">Greek Salad</div>336 <div class="recipe-sub">THE SLOW COOKER KITCHEN</div>337 </div>338 <div class="plus-btn">339 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>340 </div>341 </div>342 </div>343 344 <!-- Bottom navigation -->345 <div class="bottom-nav">346 <div class="nav-item active">347 <!-- home -->348 <svg viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9H6V10" /></svg>349 </div>350 <div class="nav-item">351 <!-- search -->352 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M16 16l6 6" /></svg>353 </div>354 <div class="nav-item">355 <!-- user -->356 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5"></circle><path d="M2 22c3-5 7-7 10-7s7 2 10 7" /></svg>357 </div>358 <div class="nav-item">359 <!-- calendar -->360 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" ry="2"></rect><path d="M3 10h18M8 3v4M16 3v4" /></svg>361 </div>362 <div class="nav-item">363 <!-- sliders/settings -->364 <svg viewBox="0 0 24 24"><path d="M4 6h16M8 6v12M4 12h16M16 12v6M4 18h16M12 18v-10" /></svg>365 </div>366 <div class="nav-item">367 <!-- paperclip -->368 <svg viewBox="0 0 24 24"><path d="M7 13l6-6a4 4 0 116 6l-8 8a6 6 0 11-8-8l9-9" /></svg>369 </div>370 </div>371 372 <!-- OS bottom bar -->373 <div class="os-bar">374 <div class="home-pill"></div>375 </div>376 377</div>378</body>379</html>