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 Detail - Classic Bruschetta</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: #ffffff;15 color: #222;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 120px;25 background: #3b3b3b;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 36px;30 box-sizing: border-box;31 font-size: 42px;32 letter-spacing: 1px;33 }34 .status-bar .time { font-weight: 600; }35 .status-icons {36 margin-left: auto;37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: .85; }42 43 /* Hero image placeholder */44 .hero {45 position: absolute;46 top: 120px;47 left: 0;48 width: 1080px;49 height: 760px;50 overflow: hidden;51 }52 .hero .img {53 width: 1080px;54 height: 760px;55 background: #E0E0E0;56 border: 1px solid #BDBDBD;57 color: #757575;58 display: flex;59 align-items: center;60 justify-content: center;61 font-size: 36px;62 }63 64 /* Snackbar */65 .snackbar {66 position: absolute;67 top: 250px;68 left: 60px;69 width: 960px;70 padding: 34px 40px;71 background: rgba(33,33,33,0.96);72 color: #fff;73 border-radius: 36px;74 font-size: 44px;75 box-sizing: border-box;76 }77 78 /* Content card */79 .content {80 position: absolute;81 top: 880px;82 left: 0;83 width: 1080px;84 background: #fff;85 border-top-left-radius: 0;86 border-top-right-radius: 0;87 padding: 48px 60px 0 60px;88 box-sizing: border-box;89 }90 .title-row {91 position: relative;92 padding-right: 160px;93 }94 .title {95 font-size: 72px;96 line-height: 1.15;97 font-weight: 700;98 margin: 10px 0 16px 0;99 color: #222;100 }101 .subtitle {102 font-size: 30px;103 letter-spacing: 3px;104 color: #8b8b8b;105 text-transform: uppercase;106 margin-bottom: 36px;107 }108 .circle-action {109 position: absolute;110 right: 0;111 top: 10px;112 width: 120px;113 height: 120px;114 background: #e0e0e0;115 border-radius: 50%;116 display: flex;117 align-items: center;118 justify-content: center;119 }120 .circle-action svg { width: 56px; height: 56px; fill: #444; }121 122 /* Tabs */123 .tabs {124 display: flex;125 align-items: flex-end;126 gap: 40px;127 border-bottom: 2px solid #e6e6e6;128 padding-bottom: 18px;129 }130 .tab {131 flex: 1;132 }133 .tab .label {134 font-size: 44px;135 letter-spacing: 1px;136 color: #222;137 font-weight: 700;138 }139 .tab .meta {140 font-size: 30px;141 color: #8a8a8a;142 margin-top: 10px;143 }144 .tab.active .label { color: #1fa59a; }145 .active-underline {146 height: 6px;147 width: 240px;148 background: #1fa59a;149 border-radius: 3px;150 margin-top: 22px;151 }152 153 /* Update Collection row */154 .update-row {155 display: flex;156 align-items: center;157 gap: 26px;158 padding: 38px 0 26px 0;159 border-bottom: 2px solid #eaeaea;160 }161 .update-icon {162 width: 74px; height: 74px; border-radius: 18px; background: #e7f5f3;163 display: flex; align-items: center; justify-content: center;164 }165 .update-icon svg { width: 44px; height: 44px; fill: #1fa59a; }166 .update-row .text { font-size: 44px; font-weight: 700; }167 168 /* Stat rows */169 .stat {170 display: flex;171 align-items: center;172 padding: 34px 0;173 border-bottom: 2px solid #efefef;174 }175 .stat .icon {176 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 28px;177 }178 .stat .icon svg { width: 46px; height: 46px; fill: #d96d2d; }179 .stat .label {180 font-size: 40px; color: #333; flex: 1; display: flex; align-items: center; gap: 14px;181 }182 .stat .value { font-size: 40px; color: #666; }183 184 /* Bottom gesture area */185 .bottom-area {186 position: absolute;187 left: 0;188 bottom: 0;189 width: 1080px;190 height: 120px;191 background: #2f2f2f;192 display: flex;193 align-items: center;194 justify-content: center;195 }196 .home-pill {197 width: 280px; height: 12px; background: #d6d6d6; border-radius: 8px;198 opacity: .85;199 }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div class="time">6:16</div>208 <div class="status-icons">209 <!-- simple placeholders for status icons -->210 <svg width="40" height="26" viewBox="0 0 40 26"><rect x="0" y="6" width="28" height="14" rx="3" fill="#fff"/></svg>211 <svg width="36" height="26" viewBox="0 0 36 26"><circle cx="13" cy="13" r="10" stroke="#fff" stroke-width="4" fill="none"/><path d="M13 6v8h6" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/></svg>212 <div class="dot"></div>213 <svg width="44" height="26" viewBox="0 0 44 26">214 <rect x="2" y="2" width="32" height="22" rx="4" fill="none" stroke="#fff" stroke-width="3"/>215 <rect x="4" y="6" width="28" height="14" fill="#fff"/>216 <rect x="38" y="8" width="4" height="10" rx="1" fill="#fff"/>217 </svg>218 </div>219 </div>220 221 <!-- Hero image -->222 <div class="hero">223 <div class="img">[IMG: Bruschetta close-up photo]</div>224 </div>225 226 <!-- Snackbar -->227 <div class="snackbar">Collections updated</div>228 229 <!-- Content -->230 <div class="content">231 <div class="title-row">232 <div class="title">Classic Bruschetta</div>233 <div class="subtitle">LA BELLA VITA CUCINA</div>234 <div class="circle-action" aria-label="collapse">235 <svg viewBox="0 0 24 24"><rect x="4" y="11" width="16" height="2" rx="1"/></svg>236 </div>237 </div>238 239 <!-- Tabs -->240 <div class="tabs">241 <div class="tab active">242 <div class="label">Overview</div>243 <div class="active-underline"></div>244 </div>245 <div class="tab">246 <div class="label">Ingredients</div>247 <div class="meta">9 items</div>248 </div>249 <div class="tab">250 <div class="label">Directions</div>251 <div class="meta">30m</div>252 </div>253 </div>254 255 <!-- Update collection -->256 <div class="update-row">257 <div class="update-icon">258 <svg viewBox="0 0 24 24">259 <path d="M10 4h-5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7l-2-2z"/>260 <path d="M12 10v4m-2-2h4" stroke="#1fa59a" stroke-width="2" fill="none" stroke-linecap="round"/>261 </svg>262 </div>263 <div class="text">Update Collection</div>264 </div>265 266 <!-- Stats -->267 <div class="stat">268 <div class="icon">269 <svg viewBox="0 0 24 24">270 <path d="M12 2l3.1 6.3 7 .9-5.1 4.8 1.4 6.9L12 17l-6.4 4 1.4-6.9L2 9.2l7-.9L12 2z"/>271 </svg>272 </div>273 <div class="label">Rating</div>274 <div class="value">4.70</div>275 </div>276 277 <div class="stat">278 <div class="icon">279 <svg viewBox="0 0 24 24">280 <ellipse cx="12" cy="6" rx="8" ry="3"/>281 <path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6" fill="none" stroke="#d96d2d" stroke-width="2"/>282 <path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" fill="none" stroke="#d96d2d" stroke-width="2"/>283 </svg>284 </div>285 <div class="label">Servings</div>286 <div class="value">4</div>287 </div>288 289 <div class="stat">290 <div class="icon">291 <svg viewBox="0 0 24 24">292 <path d="M12 2c-2 3-1 5 0 7 1 2-1 3-2 5-1 3 1 6 4 6 3 0 6-2 6-6s-3-7-8-12z"/>293 </svg>294 </div>295 <div class="label">Calories per serving</div>296 <div class="value">150</div>297 </div>298 299 <div class="stat">300 <div class="icon">301 <svg viewBox="0 0 24 24">302 <circle cx="12" cy="12" r="9" fill="none" stroke="#d96d2d" stroke-width="2"/>303 <path d="M12 7v5l4 2" fill="none" stroke="#d96d2d" stroke-width="2" stroke-linecap="round"/>304 </svg>305 </div>306 <div class="label">Total time</div>307 <div class="value">30m</div>308 </div>309 310 <div style="height: 540px;"></div>311 </div>312 313 <!-- Bottom gesture area -->314 <div class="bottom-area">315 <div class="home-pill"></div>316 </div>317 318</div>319</body>320</html>