GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe Detail - Fennel Pizza</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">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: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    gap: 22px;24    color: #333;25    font-size: 36px;26  }27  .status-right {28    margin-left: auto;29    display: flex;30    align-items: center;31    gap: 26px;32  }33  .icon {34    width: 40px; height: 40px;35  }36  .dot {37    width: 10px; height: 10px; background: #777; border-radius: 50%;38  }39 40  /* Hero image */41  .hero {42    position: relative;43    height: 900px;44    overflow: hidden;45  }46  .img-placeholder {47    width: 100%;48    height: 100%;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex;52    align-items: center;53    justify-content: center;54    color: #757575;55    font-size: 40px;56    text-align: center;57  }58  .back-btn {59    position: absolute;60    left: 24px;61    top: 150px;62    width: 96px;63    height: 96px;64    border-radius: 48px;65    background: rgba(0,0,0,0.65);66    display: flex;67    align-items: center;68    justify-content: center;69  }70  .back-btn svg { width: 48px; height: 48px; }71  .top-actions {72    position: absolute;73    right: 24px;74    top: 150px;75    display: flex;76    gap: 28px;77  }78  .top-actions .action {79    width: 72px; height: 72px;80    display: flex; align-items: center; justify-content: center;81    background: rgba(0,0,0,0.55);82    border-radius: 12px;83  }84  .top-actions svg { width: 40px; height: 40px; }85 86  /* Overlay card */87  .card {88    position: absolute;89    left: 36px;90    right: 36px;91    top: 920px; /* overlaps the image */92    background: #fff;93    border-radius: 28px;94    box-shadow: 0 14px 28px rgba(0,0,0,0.15);95    padding: 44px 48px;96  }97  .label {98    color: #888;99    font-size: 28px;100    letter-spacing: 2px;101  }102  .title {103    font-size: 62px;104    font-weight: 700;105    color: #111;106    margin-top: 12px;107  }108  .author {109    margin-top: 16px;110    font-size: 32px;111    color: #888;112  }113  .author b { color: #111; }114 115  /* Rating */116  .rating-section {117    margin-top: 180px;118    padding: 0 60px;119    text-align: left;120  }121  .rating-row {122    display: flex;123    align-items: center;124    gap: 22px;125    font-size: 42px;126    color: #222;127  }128  .stars {129    display: flex;130    gap: 8px;131    transform: translateY(2px);132  }133  .stars svg { width: 42px; height: 42px; }134  .rating-count {135    margin-top: 18px;136    font-size: 34px;137    color: #333;138  }139 140  /* Description */141  .description {142    margin-top: 36px;143    padding: 0 60px;144    color: #333;145    font-size: 36px;146    line-height: 54px;147  }148 149  /* Buttons */150  .actions {151    margin-top: 40px;152    padding: 0 60px 0 60px;153    display: flex;154    gap: 40px;155  }156  .btn-pill {157    flex: 1;158    height: 140px;159    border-radius: 70px;160    font-size: 36px;161    font-weight: 600;162    text-transform: uppercase;163    letter-spacing: 1px;164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .btn-outline {169    border: 3px solid #000;170    color: #000;171    background: #fff;172  }173  .btn-solid {174    border: 3px solid #000;175    color: #fff;176    background: #000;177  }178 179  /* Home indicator */180  .home-indicator {181    position: absolute;182    bottom: 30px;183    left: 50%;184    transform: translateX(-50%);185    width: 360px;186    height: 12px;187    background: #000;188    opacity: 0.6;189    border-radius: 6px;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status Bar -->197  <div class="status-bar">198    <div>8:47</div>199    <svg class="icon" viewBox="0 0 24 24">200      <path fill="#555" d="M4 5h16v12H8l-4 4V5z"></path>201    </svg>202    <svg class="icon" viewBox="0 0 24 24">203      <path fill="#555" d="M12 3l3 3h4v6c0 3.9-3.1 7-7 7s-7-3.1-7-7V6h4l3-3z"></path>204    </svg>205    <svg class="icon" viewBox="0 0 24 24">206      <path fill="#555" d="M5 4h14v16H5z"></path>207    </svg>208    <div class="icon" style="display:flex;align-items:center;justify-content:center;border:2px solid #999;border-radius:50%;font-weight:700;color:#777;">P</div>209    <div class="dot"></div>210    <div class="status-right">211      <svg class="icon" viewBox="0 0 24 24">212        <path fill="#555" d="M12 20c-4.4 0-8-3.6-8-8h2c0 3.3 2.7 6 6 6s6-2.7 6-6h2c0 4.4-3.6 8-8 8zM4 8l8-6 8 6H4z"></path>213      </svg>214      <svg class="icon" viewBox="0 0 24 24">215        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#555"></rect>216        <rect x="20" y="10" width="2" height="4" fill="#555"></rect>217      </svg>218    </div>219  </div>220 221  <!-- Hero Image -->222  <div class="hero">223    <div class="img-placeholder">[IMG: Fennel Pizza in skillet]</div>224 225    <div class="back-btn">226      <svg viewBox="0 0 24 24">227        <path fill="#fff" d="M15 18l-6-6 6-6"></path>228      </svg>229    </div>230 231    <div class="top-actions">232      <div class="action">233        <svg viewBox="0 0 24 24">234          <path fill="#fff" d="M18 8l-6-6v4H6v4h6v4l6-6z"></path>235        </svg>236      </div>237      <div class="action">238        <svg viewBox="0 0 24 24">239          <path fill="#fff" d="M6 4h12v16l-6-3-6 3V4z"></path>240        </svg>241      </div>242    </div>243  </div>244 245  <!-- Overlay Card -->246  <div class="card">247    <div class="label">RECIPE</div>248    <div class="title">Fennel Pizza</div>249    <div class="author">by <b>De Ma Cuisine</b></div>250  </div>251 252  <!-- Rating -->253  <div class="rating-section">254    <div class="rating-row">255      <div>4.0</div>256      <div class="stars">257        <svg viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9 1.2-6.2L3 8.8 9 8l3-6z"></path></svg>258        <svg viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9 1.2-6.2L3 8.8 9 8l3-6z"></path></svg>259        <svg viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9 1.2-6.2L3 8.8 9 8l3-6z"></path></svg>260        <svg viewBox="0 0 24 24"><path fill="#FFC107" d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9 1.2-6.2L3 8.8 9 8l3-6z"></path></svg>261        <svg viewBox="0 0 24 24"><path fill="#C8C8C8" d="M12 2l3 6 6 .8-4.5 4 1.2 6.2L12 16l-5.7 3.9 1.2-6.2L3 8.8 9 8l3-6z"></path></svg>262      </div>263    </div>264    <div class="rating-count">1 Rating</div>265  </div>266 267  <!-- Description -->268  <div class="description">269    One of the great things about pizza is how adaptable it is. You can omit the cheese, change the veggies, and add more herbs. You can grill it, bake it, or cook it in a skillet. Enjoy this pizza and put a twist on a classic.270  </div>271 272  <!-- Actions -->273  <div class="actions">274    <div class="btn-pill btn-outline">ADD TO PLAN</div>275    <div class="btn-pill btn-solid">ADD TO CART</div>276  </div>277 278  <div class="home-indicator"></div>279</div>280</body>281</html>