GD-ML/AndroidCode

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 - Tiramisu</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;16    color: #fff;17  }18  /* Hero image placeholder */19  .hero {20    position: relative;21    width: 1080px;22    height: 930px;23    background: #E0E0E0;24    border-bottom: 1px solid #BDBDBD;25    display: flex;26    align-items: center;27    justify-content: center;28  }29  .hero .img-label {30    color: #757575;31    font-size: 34px;32    letter-spacing: 0.3px;33  }34  /* Status bar (top overlay) */35  .status-bar {36    position: absolute;37    top: 26px;38    left: 32px;39    right: 32px;40    display: flex;41    align-items: center;42    justify-content: space-between;43    font-size: 34px;44    color: #fff;45    pointer-events: none;46  }47  .status-right {48    display: flex;49    gap: 18px;50    align-items: center;51    opacity: 0.9;52  }53  .status-dot {54    width: 10px; height: 10px; background: #fff; border-radius: 50%;55  }56  /* Back button */57  .back-btn {58    position: absolute;59    top: 320px;60    left: 40px;61    width: 120px;62    height: 120px;63    border-radius: 60px;64    background: rgba(0,0,0,0.75);65    display: flex;66    align-items: center;67    justify-content: center;68  }69  /* Play button overlay */70  .play-overlay {71    position: absolute;72    left: 50%;73    top: 480px;74    transform: translateX(-50%);75    width: 260px;76    height: 260px;77    border-radius: 130px;78    border: 10px solid #fff;79    display: flex;80    align-items: center;81    justify-content: center;82    background: rgba(255,255,255,0.06);83  }84  /* Content */85  .content {86    padding: 60px 72px 0 72px;87  }88  .title {89    font-family: Georgia, "Times New Roman", serif;90    font-size: 72px;91    line-height: 86px;92    text-align: center;93    letter-spacing: 0.2px;94    margin: 24px 0 40px;95  }96  .rating {97    display: flex;98    justify-content: center;99    align-items: center;100    gap: 14px;101    margin-bottom: 18px;102  }103  .rating svg { width: 48px; height: 48px; }104  .rating-info {105    text-align: center;106    font-size: 32px;107    color: #9E9E9E;108    margin-bottom: 48px;109  }110  .actions {111    display: flex;112    justify-content: space-between;113    align-items: center;114    padding: 0 40px;115    margin-bottom: 34px;116  }117  .action {118    display: flex;119    align-items: center;120    gap: 18px;121    font-size: 36px;122  }123  .action svg {124    width: 60px; height: 60px;125  }126  .divider {127    height: 1px;128    background: #2A2A2A;129    margin: 24px -72px 24px;130  }131  .profile {132    display: flex;133    align-items: center;134    gap: 28px;135    padding: 24px 0;136  }137  .avatar {138    width: 164px;139    height: 164px;140    border-radius: 82px;141    background: #E0E0E0;142    border: 1px solid #BDBDBD;143    display: flex;144    align-items: center;145    justify-content: center;146    color: #757575;147    font-size: 26px;148    overflow: hidden;149  }150  .profile-info .name {151    font-size: 44px;152    font-weight: 700;153    margin-bottom: 8px;154  }155  .profile-info .role {156    font-size: 32px;157    color: #BDBDBD;158    margin-bottom: 8px;159  }160  .profile-info .link {161    font-size: 32px;162    color: #FF7A00;163    text-decoration: none;164  }165  .desc {166    font-size: 38px;167    line-height: 56px;168    color: #F5F5F5;169    margin-top: 24px;170  }171  .read-more {172    color: #FF7A00;173    text-decoration: none;174    white-space: nowrap;175  }176  .safe-indicator {177    position: absolute;178    bottom: 20px;179    left: 50%;180    transform: translateX(-50%);181    width: 380px;182    height: 10px;183    background: #fff;184    border-radius: 5px;185    opacity: 0.75;186  }187</style>188</head>189<body>190<div id="render-target">191  <div class="hero">192    <div class="img-label">[IMG: Tiramisu dessert on plate with napkin and bottle]</div>193 194    <div class="status-bar">195      <div style="display:flex; align-items:center; gap:14px;">196        <span>6:17</span>197        <div class="status-dot"></div>198        <div class="status-dot"></div>199        <div class="status-dot"></div>200        <div class="status-dot"></div>201      </div>202      <div class="status-right">203        <svg viewBox="0 0 24 24" width="34" height="34">204          <path d="M12 2l3 5-3 5-3-5 3-5z" fill="#fff" opacity="0.9"/>205        </svg>206        <svg viewBox="0 0 24 24" width="34" height="34">207          <path d="M3 18h18v2H3zm2-4h14v2H5zm2-4h10v2H7zm2-4h6v2H9z" fill="#fff" opacity="0.9"/>208        </svg>209      </div>210    </div>211 212    <div class="back-btn">213      <svg viewBox="0 0 24 24" width="64" height="64">214        <path d="M15 18l-6-6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216    </div>217 218    <div class="play-overlay">219      <svg viewBox="0 0 100 100" width="140" height="140">220        <polygon points="35,25 80,50 35,75" fill="#fff"/>221      </svg>222    </div>223  </div>224 225  <div class="content">226    <div class="title">Make classic tiramisu with Lisa</div>227 228    <div class="rating">229      <!-- 4 full stars -->230      <svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="#FF7A00"/></svg>231      <svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="#FF7A00"/></svg>232      <svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="#FF7A00"/></svg>233      <svg viewBox="0 0 24 24"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="#FF7A00"/></svg>234      <!-- half star -->235      <svg viewBox="0 0 24 24">236        <defs>237          <clipPath id="half">238            <rect x="0" y="0" width="12" height="24"></rect>239          </clipPath>240        </defs>241        <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="#FF7A00" clip-path="url(#half)"></polygon>242        <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21 12,17.77 5.82,21 7,14.14 2,9.27 8.91,8.26" fill="none" stroke="#FF7A00" stroke-width="1.2"></polygon>243      </svg>244    </div>245 246    <div class="rating-info">Based on 380 ratings</div>247 248    <div class="actions">249      <div class="action">250        <svg viewBox="0 0 24 24">251          <path d="M12 21s-6.5-4.35-8.5-7.35C1.43 11.3 2.5 8.5 5.4 8.1c1.55-.22 3.1.52 4 1.8.9-1.28 2.45-2.02 4-1.8 2.9.4 3.97 3.2 1.9 5.55C18.5 16.65 12 21 12 21z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>252        </svg>253        <span>141676</span>254      </div>255      <div class="action">256        <svg viewBox="0 0 24 24">257          <path d="M6 4h12v16l-6-4-6 4V4z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>258        </svg>259        <span>Save</span>260      </div>261      <div class="action">262        <svg viewBox="0 0 24 24">263          <circle cx="6" cy="12" r="2" fill="none" stroke="#fff" stroke-width="2"/>264          <circle cx="18" cy="6" r="2" fill="none" stroke="#fff" stroke-width="2"/>265          <circle cx="18" cy="18" r="2" fill="none" stroke="#fff" stroke-width="2"/>266          <path d="M8 12l8-6M8 12l8 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>267        </svg>268        <span>Share</span>269      </div>270    </div>271 272    <div class="divider"></div>273 274    <div class="profile">275      <div class="avatar">[IMG: Editor avatar]</div>276      <div class="profile-info">277        <div class="name">Lisa Schölzel</div>278        <div class="role">Food Editor at Kitchen Stories</div>279        <a class="link" href="#">instagram.com/whatscookinglisa/</a>280      </div>281    </div>282 283    <div class="desc">284      For this tiramisu recipe I used strong and freshly brewed espresso, not the instant powder. It makes a difference, trust me. Make sure the coffee has cooled slightly and that you don't soak the ladyfingers, but just quickly dunk them in the Amaretto-... <a href="#" class="read-more">Read more</a>285    </div>286  </div>287 288  <div class="safe-indicator"></div>289</div>290</body>291</html>