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>Apple Pie From Scratch - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #212327;15 color: #f1f1f1;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17 }18 19 /* Generic */20 .row { display: flex; align-items: center; }21 .space-between { justify-content: space-between; }22 .muted { color: #b6b6b6; }23 .divider { height: 2px; background: #323437; margin: 18px 32px; }24 .thin-divider { height: 1px; background: #34363a; margin: 0 32px; }25 .section-padding { padding: 0 32px; }26 .accent { color: #ff5a86; }27 .btn-primary {28 background: #cf295b;29 color: #fff;30 border: none;31 border-radius: 16px;32 height: 120px;33 font-weight: 700;34 font-size: 40px;35 letter-spacing: 0.2px;36 display: flex; align-items: center; justify-content: center;37 }38 .chip {39 border: 2px solid #3b3d42; border-radius: 20px; height: 120px;40 display: inline-flex; align-items: center; padding: 0 34px; color: #d2d2d2;41 }42 .qty-btn {43 width: 96px; height: 96px; border-radius: 16px; border: 2px solid #3b3d42;44 display: flex; align-items: center; justify-content: center; color: #e9e9e9; font-size: 56px; font-weight: 600;45 background: #26282c;46 }47 .price-block { text-align: right; }48 .price-block .price { font-size: 64px; font-weight: 800; }49 .price-block .per { font-size: 32px; color: #bfbfbf; margin-top: 8px; }50 51 /* Status bar */52 .statusbar {53 height: 84px;54 padding: 0 24px;55 display: flex; align-items: center; justify-content: space-between;56 color: #eaeaea; font-size: 36px;57 }58 .status-right { display: flex; gap: 24px; align-items: center; }59 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #eaeaea; stroke-width: 3; }60 61 /* Header */62 .header {63 padding: 24px 32px 8px 32px;64 }65 .title-row { display: flex; align-items: center; justify-content: space-between; }66 .title-left { display: flex; align-items: center; gap: 26px; }67 .title { font-size: 56px; font-weight: 800; }68 .header-actions { display: flex; gap: 32px; align-items: center; }69 .icon-btn svg { width: 56px; height: 56px; }70 .icon-btn { color: #ff6a8b; }71 72 /* Ingredients list */73 .list { margin-top: 12px; }74 .list-row { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-top: 2px solid #2f3135; }75 .list-row .name { font-size: 40px; color: #e5e5e5; }76 .list-row .qty { font-size: 38px; color: #d7d7d7; }77 78 .subhead { font-size: 34px; font-weight: 800; letter-spacing: 1px; color: #dcdcdc; padding: 24px 32px 0 32px; }79 80 /* Nutrition row */81 .nutrition-row { padding: 28px 32px; border-top: 2px solid #2f3135; display: flex; align-items: center; justify-content: space-between; }82 .nutrition-row .label { font-size: 44px; font-weight: 800; }83 .nutrition-row .action { font-size: 40px; color: #ff6a8b; font-weight: 700; }84 85 /* Shopping section */86 .shop-section { padding: 24px 32px 0 32px; }87 .shop-title { font-size: 52px; font-weight: 800; margin-top: 16px; }88 .help-row { display: flex; align-items: center; gap: 16px; }89 .help-row .help { width: 48px; height: 48px; border-radius: 24px; border: 2px solid #494b50; display: flex; align-items: center; justify-content: center; color: #bcbcbc; font-weight: 700; }90 .shop-desc { color: #c7c7c7; font-size: 34px; line-height: 48px; margin-top: 16px; }91 .servings-row { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; }92 .servings-controls { display: flex; align-items: center; gap: 26px; }93 .servings-label { font-size: 36px; color: #cfcfcf; }94 .primary-btn-wrap { margin-top: 28px; }95 96 .powered { margin-top: 18px; color: #bfbfbf; font-size: 34px; }97 .powered .brand { color: #ffffff; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }98 .brand-star { width: 28px; height: 28px; background: #f6c200; border-radius: 50%; display: inline-block; }99 100 .disclaimer { font-size: 30px; color: #aaaaaa; margin-top: 12px; }101 102 /* Tips */103 .tips-header { padding: 24px 32px; font-size: 48px; font-weight: 800; }104 .tip-card { display: flex; align-items: center; gap: 24px; padding: 24px 32px; }105 .avatar {106 width: 120px; height: 120px; border-radius: 60px; background: #E0E0E0; border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;108 }109 .tip-info .top { color: #cfcfcf; font-size: 36px; }110 .tip-info .user { color: #ff7a9c; font-size: 42px; font-weight: 800; }111 112 /* Ad banner */113 .ad-banner {114 margin: 16px 32px;115 background: #ffffff; border-radius: 16px; overflow: hidden;116 display: flex; align-items: center; padding: 24px;117 }118 .ad-thumb {119 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;120 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;121 border-radius: 20px;122 }123 .ad-info { margin-left: 24px; color: #222; }124 .ad-title { font-size: 44px; font-weight: 700; }125 .ad-sub { font-size: 32px; color: #666; margin-top: 6px; }126 .install-btn {127 margin-left: auto; background: #0f9f4f; color: #fff; font-weight: 800;128 padding: 24px 40px; border-radius: 40px; font-size: 40px;129 }130 131 /* Bottom nav */132 .bottom-nav {133 position: absolute; left: 0; bottom: 80px; width: 100%;134 height: 160px; border-top: 2px solid #33363a; background: #1c1e21;135 display: flex; align-items: center; justify-content: space-around;136 }137 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #cfcfcf; font-size: 30px; }138 .nav-item.active { color: #ff6a8b; font-weight: 700; }139 .nav-item svg { width: 48px; height: 48px; }140 .profile-dot {141 width: 56px; height: 56px; border-radius: 28px; background: #b88f7b; color: #fff;142 display: flex; align-items: center; justify-content: center; font-weight: 800;143 }144 145 /* Home indicator */146 .home-indicator {147 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);148 width: 300px; height: 10px; background: #e8e8e8; border-radius: 6px; opacity: 0.7;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status Bar -->156 <div class="statusbar">157 <div>10:48 60°</div>158 <div class="status-right">159 <span class="status-icon">160 <svg viewBox="0 0 24 24"><path d="M2 12l6 6 14-14" stroke-linecap="round"/></svg>161 </span>162 <span class="status-icon">163 <svg viewBox="0 0 24 24"><path d="M2 8h20M4 12h16M6 16h12" stroke-linecap="round"/></svg>164 </span>165 <span class="status-icon">166 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3"/><rect x="7" y="9" width="10" height="6" rx="2" fill="#eaeaea"/></svg>167 </span>168 </div>169 </div>170 171 <!-- Header -->172 <div class="header">173 <div class="title-row">174 <div class="title-left">175 <span class="icon-btn">176 <svg viewBox="0 0 24 24">177 <path d="M15 6l-6 6 6 6" fill="none" stroke="#ff6a8b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>178 </svg>179 </span>180 <div class="title">Apple Pie From Scratch</div>181 </div>182 <div class="header-actions">183 <span class="icon-btn">184 <svg viewBox="0 0 24 24">185 <circle cx="6" cy="12" r="2" fill="#ff6a8b"/>186 <circle cx="12" cy="6" r="2" fill="#ff6a8b"/>187 <circle cx="18" cy="12" r="2" fill="#ff6a8b"/>188 <path d="M7.7 11l3.6-3.6M12.7 7.7l3.6 3.6" stroke="#ff6a8b" stroke-width="2" fill="none" stroke-linecap="round"/>189 </svg>190 </span>191 <span class="icon-btn">192 <svg viewBox="0 0 24 24">193 <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 019-1 4.5 4.5 0 019 1c0 5.5-7 10-7 10" fill="none" stroke="#ff6a8b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </span>196 </div>197 </div>198 </div>199 200 <!-- Ingredients List -->201 <div class="list">202 <div class="thin-divider"></div>203 <div class="list-row">204 <div class="name">lemon</div>205 <div class="qty">½</div>206 </div>207 <div class="list-row">208 <div class="name">egg, beaten</div>209 <div class="qty">1</div>210 </div>211 <div class="list-row">212 <div class="name">sugar</div>213 <div class="qty">1 tablespoon</div>214 </div>215 216 <div class="subhead">TOPPING</div>217 <div class="list-row" style="border-top:2px solid #2f3135;">218 <div class="name">vanilla ice cream</div>219 <div class="qty">1 scoop</div>220 </div>221 </div>222 223 <!-- Nutrition Row -->224 <div class="nutrition-row">225 <div class="label">Nutrition Info</div>226 <div class="action">View Info +</div>227 </div>228 229 <!-- Shopping Section -->230 <div class="divider"></div>231 <div class="shop-section">232 <div class="row space-between">233 <div class="shop-title">Save time, shop ingredients</div>234 <div class="help-row"><div class="help">?</div></div>235 </div>236 <div class="shop-desc">237 Build your grocery cart with Tasty, then choose how you want to<br>238 to<br>239 get your order from Walmart.240 </div>241 242 <div class="servings-row">243 <div class="servings-controls">244 <div class="chip">245 <div class="qty-btn">−</div>246 <div style="font-size:48px; font-weight:800; margin: 0 18px;">8</div>247 <div class="qty-btn">+</div>248 </div>249 <div class="servings-label">servings</div>250 </div>251 <div class="price-block">252 <div class="price">$12.00*</div>253 <div class="per">$1.50 per serving</div>254 </div>255 </div>256 257 <div class="primary-btn-wrap">258 <div class="btn-primary">Select ingredients to buy</div>259 </div>260 261 <div class="powered">Powered by <span class="brand">Walmart<span class="brand-star"></span></span></div>262 <div class="disclaimer">*Prices shown are estimates. The actual price will be reflected in your Cart.</div>263 </div>264 265 <div class="divider"></div>266 267 <!-- Tips Section -->268 <div class="tips-header">Tips (1430)</div>269 <div class="tip-card">270 <div class="avatar">[IMG: Corn Avatar]</div>271 <div class="tip-info">272 <div class="top">Top Tip</div>273 <div class="user">cardinalfire</div>274 </div>275 </div>276 277 <!-- Ad Banner -->278 <div class="ad-banner">279 <div class="ad-thumb">[IMG: App Icon]</div>280 <div class="ad-info">281 <div class="ad-title">Jupiter</div>282 <div class="ad-sub">4.5 ★ FREE</div>283 </div>284 <div class="install-btn">INSTALL</div>285 </div>286 287 <!-- Bottom Nav -->288 <div class="bottom-nav">289 <div class="nav-item active">290 <svg viewBox="0 0 24 24">291 <circle cx="11" cy="11" r="8" fill="none" stroke="#ff6a8b" stroke-width="2"/>292 <path d="M20 20l-4-4" stroke="#ff6a8b" stroke-width="2" stroke-linecap="round"/>293 </svg>294 <div>Discover</div>295 </div>296 <div class="nav-item">297 <svg viewBox="0 0 24 24">298 <path d="M4 7h16v10H4z" fill="none" stroke="#cfcfcf" stroke-width="2"/>299 <path d="M8 7v-2h8v2" stroke="#cfcfcf" stroke-width="2"/>300 <text x="9" y="15" fill="#cfcfcf" font-size="8" font-weight="700">$</text>301 </svg>302 <div>Community</div>303 </div>304 <div class="nav-item">305 <svg viewBox="0 0 24 24">306 <path d="M6 6h12l2 4H4zM5 10h14v8H5z" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linejoin="round"/>307 </svg>308 <div>My Cart</div>309 </div>310 <div class="nav-item">311 <div class="profile-dot">I</div>312 <div>Profile</div>313 </div>314 </div>315 316 <div class="home-indicator"></div>317 318</div>319</body>320</html>