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 Steps UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #232428;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 110px;25 padding: 0 36px;26 box-sizing: border-box;27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #fff;31 font-weight: 600;32 letter-spacing: 0.2px;33 }34 .status-left { display: flex; align-items: center; gap: 18px; font-size: 38px; opacity: 0.95; }35 .status-right { display: flex; align-items: center; gap: 26px; }36 .icon-wifi, .icon-battery {37 width: 46px; height: 46px;38 }39 .icon-wifi path { fill: none; stroke: #fff; stroke-width: 6; }40 .icon-battery rect, .icon-battery path { stroke: #fff; stroke-width: 6; fill: none; }41 42 /* Header */43 .header {44 position: absolute;45 top: 110px;46 left: 0;47 width: 1080px;48 height: 150px;49 display: flex;50 align-items: center;51 padding: 0 32px;52 box-sizing: border-box;53 gap: 22px;54 border-bottom: 1px solid rgba(255,255,255,0.04);55 background: #232428;56 }57 .back-btn {58 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;59 }60 .back-btn svg { width: 56px; height: 56px; }61 .title {62 flex: 1;63 font-size: 58px;64 font-weight: 800;65 color: #FFFFFF;66 letter-spacing: 0.3px;67 }68 .header-actions { display: flex; align-items: center; gap: 30px; }69 .action-icon { width: 64px; height: 64px; }70 .action-icon svg { width: 64px; height: 64px; stroke: #FF5A84; fill: none; stroke-width: 6; }71 72 /* Content list */73 .content {74 position: absolute;75 top: 260px;76 left: 0;77 right: 0;78 bottom: 340px;79 overflow: hidden;80 }81 .step {82 margin: 26px 36px;83 padding: 34px 84px 34px 34px;84 background: #32343A;85 border-radius: 26px;86 display: flex;87 align-items: flex-start;88 gap: 24px;89 box-shadow: 0 2px 0 rgba(0,0,0,0.25) inset;90 }91 .num {92 width: 120px;93 font-size: 44px;94 font-weight: 800;95 color: #D8D8D8;96 flex-shrink: 0;97 }98 .text {99 font-size: 36px;100 line-height: 1.35;101 color: #F0F0F0;102 flex: 1;103 }104 .play {105 width: 38px; height: 38px; margin-left: 10px; flex-shrink: 0;106 }107 .play svg { width: 100%; height: 100%; }108 .play svg path { fill: #FF5A84; }109 110 /* Ad banner */111 .ad-banner {112 position: absolute;113 left: 40px;114 right: 40px;115 bottom: 250px;116 height: 180px;117 background: #FFFFFF;118 border-radius: 22px;119 display: flex;120 align-items: center;121 padding: 22px;122 box-sizing: border-box;123 gap: 22px;124 color: #333;125 }126 .ad-left { display: flex; align-items: center; gap: 18px; flex: 1; }127 .ad-icon {128 width: 120px; height: 120px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex; justify-content: center; align-items: center;132 color: #757575; font-size: 26px; border-radius: 22px;133 }134 .ad-info { display: flex; flex-direction: column; gap: 8px; }135 .ad-title { font-weight: 700; font-size: 40px; color: #333; }136 .ad-meta { font-size: 28px; color: #666; display: flex; align-items: center; gap: 8px; }137 .ad-meta .star { color: #F5A623; font-weight: 700; }138 .ad-actions { display: flex; align-items: center; gap: 18px; }139 .install-btn {140 background: #1FB858;141 color: #fff;142 border: none;143 border-radius: 50px;144 padding: 20px 44px;145 font-size: 34px;146 font-weight: 700;147 letter-spacing: 0.4px;148 cursor: default;149 }150 151 /* Bottom navigation */152 .bottom-nav {153 position: absolute;154 left: 0; right: 0; bottom: 80px;155 height: 170px;156 background: #2A2B30;157 border-top: 1px solid rgba(255,255,255,0.06);158 display: flex;159 align-items: center;160 justify-content: space-around;161 }162 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #A9A9AD; }163 .nav-item .label { font-size: 28px; }164 .nav-icon { width: 64px; height: 64px; }165 .nav-icon svg { width: 64px; height: 64px; stroke: #A9A9AD; fill: none; stroke-width: 6; }166 .nav-item.active .label { color: #FFFFFF; font-weight: 700; }167 .nav-item.active .nav-icon svg { stroke: #FF5A84; }168 169 /* Profile badge */170 .profile-circle {171 width: 64px; height: 64px; border-radius: 50%;172 background: #9B7E6E; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;173 }174 175 /* Home indicator */176 .home-indicator {177 position: absolute;178 bottom: 24px; left: 50%;179 transform: translateX(-50%);180 width: 420px; height: 12px;181 background: #E6E6E6;182 border-radius: 10px;183 opacity: 0.9;184 }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar">192 <div class="status-left">193 <div>10:48</div>194 <div>60°</div>195 </div>196 <div class="status-right">197 <svg class="icon-wifi" viewBox="0 0 64 64">198 <path d="M8 22c14-12 34-12 48 0M16 30c10-8 22-8 32 0M24 40c6-5 14-5 20 0M32 50l8 8-8-8-8 8 8-8z"/>199 </svg>200 <svg class="icon-battery" viewBox="0 0 72 64">201 <rect x="6" y="14" width="52" height="36" rx="6"/>202 <path d="M60 24h8v16h-8z"/>203 </svg>204 </div>205 </div>206 207 <!-- Header -->208 <div class="header">209 <div class="back-btn">210 <svg viewBox="0 0 64 64">211 <path d="M40 14 22 32l18 18" stroke="#FF5A84" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>212 </svg>213 </div>214 <div class="title">Apple Pie From Scratch</div>215 <div class="header-actions">216 <div class="action-icon">217 <svg viewBox="0 0 64 64">218 <path d="M30 14h0"/>219 <path d="M26 18l20-8-8 20" stroke-linecap="round" stroke-linejoin="round"/>220 <path d="M14 34c14-6 22-10 30-14"/>221 <path d="M14 50c10-4 20-8 30-14"/>222 </svg>223 </div>224 <div class="action-icon">225 <svg viewBox="0 0 64 64">226 <path d="M32 54s-18-12-18-26a10 10 0 0 1 18-6 10 10 0 0 1 18 6c0 14-18 26-18 26z" />227 </svg>228 </div>229 </div>230 </div>231 232 <!-- Content: steps -->233 <div class="content">234 235 <div class="step">236 <div class="num">11</div>237 <div class="text">Pour in apple filling mixture and pat down.</div>238 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>239 </div>240 241 <div class="step">242 <div class="num">12</div>243 <div class="text">Roll the other half of the dough on top.</div>244 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>245 </div>246 247 <div class="step">248 <div class="num">13</div>249 <div class="text">Trim the extra dough from the edges and pinch the edges to create a crimp. Make sure edges are sealed together.</div>250 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>251 </div>252 253 <div class="step">254 <div class="num">14</div>255 <div class="text">Brush the pie with the beaten egg and sprinkle with the sugar.</div>256 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>257 </div>258 259 <div class="step">260 <div class="num">15</div>261 <div class="text">Cut four slits in the top of the pie to create a vent.</div>262 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>263 </div>264 265 <div class="step">266 <div class="num">16</div>267 <div class="text">Bake pie for 50–60 minutes or until the crust is golden brown and no greyish or undercooked pastry remains.</div>268 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>269 </div>270 271 <div class="step">272 <div class="num">17</div>273 <div class="text">Allow to cool completely before slicing.</div>274 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>275 </div>276 277 <div class="step">278 <div class="num">18</div>279 <div class="text">Top with ice cream and serve.</div>280 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>281 </div>282 283 <div class="step">284 <div class="num">19</div>285 <div class="text">Enjoy!</div>286 <div class="play"><svg viewBox="0 0 24 24"><path d="M5 3l14 9-14 9z"/></svg></div>287 </div>288 </div>289 290 <!-- Ad banner -->291 <div class="ad-banner">292 <div class="ad-left">293 <div class="ad-icon">[IMG: App Icon]</div>294 <div class="ad-info">295 <div class="ad-title">Jupiter</div>296 <div class="ad-meta">297 <span>4.5</span>298 <span class="star">★</span>299 <span>FREE</span>300 </div>301 </div>302 </div>303 <div class="ad-actions">304 <button class="install-btn">INSTALL</button>305 </div>306 </div>307 308 <!-- Bottom Navigation -->309 <div class="bottom-nav">310 <div class="nav-item active">311 <div class="nav-icon">312 <svg viewBox="0 0 64 64">313 <circle cx="28" cy="28" r="18" />314 <path d="M46 46l12 12" />315 </svg>316 </div>317 <div class="label">Discover</div>318 </div>319 <div class="nav-item">320 <div class="nav-icon">321 <svg viewBox="0 0 64 64">322 <path d="M18 20c0-8 28-8 28 0v24c0 8-28 8-28 0V20z"/>323 <path d="M26 14v-6h12v6"/>324 </svg>325 </div>326 <div class="label">Community</div>327 </div>328 <div class="nav-item">329 <div class="nav-icon">330 <svg viewBox="0 0 64 64">331 <path d="M12 18h40v26H16l-4-26z"/>332 <path d="M22 52a6 6 0 1 0 0-0.1M44 52a6 6 0 1 0 0-0.1"/>333 </svg>334 </div>335 <div class="label">My Cart</div>336 </div>337 <div class="nav-item">338 <div class="profile-circle">I</div>339 <div class="label">Profile</div>340 </div>341 </div>342 343 <!-- Home indicator -->344 <div class="home-indicator"></div>345 346</div>347</body>348</html>