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 - Lemon cake with blueberries</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  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 20px;21    left: 24px;22    right: 24px;23    height: 44px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #333;28    font-size: 36px;29    pointer-events: none;30    z-index: 5;31  }32  .status-right {33    display: flex;34    gap: 24px;35    align-items: center;36  }37  .status-icon { width: 36px; height: 36px; }38 39  /* Hero image */40  .hero {41    position: absolute;42    top: 0;43    left: 0;44    width: 1080px;45    height: 1000px;46    display: flex;47    align-items: center;48    justify-content: center;49    background: #E0E0E0;50    border-bottom: 1px solid #BDBDBD;51  }52  .hero-placeholder {53    position: absolute;54    inset: 0;55    display: flex;56    align-items: center;57    justify-content: center;58    color: #757575;59    font-size: 40px;60  }61  .back-btn {62    position: absolute;63    top: 160px;64    left: 40px;65    width: 108px;66    height: 108px;67    border-radius: 54px;68    background: rgba(255,255,255,0.95);69    display: flex;70    align-items: center;71    justify-content: center;72    box-shadow: 0 6px 14px rgba(0,0,0,0.15);73    z-index: 3;74  }75  .play-overlay {76    position: absolute;77    width: 240px;78    height: 240px;79    border-radius: 50%;80    border: 8px solid rgba(255,255,255,0.9);81    display: flex;82    align-items: center;83    justify-content: center;84    z-index: 2;85  }86 87  /* Content */88  .content {89    position: absolute;90    top: 1000px;91    left: 0;92    right: 0;93    padding: 60px 72px 0 72px;94    background: #FFFFFF;95  }96  .title {97    font-family: Georgia, "Times New Roman", serif;98    font-size: 84px;99    line-height: 1.15;100    text-align: center;101    color: #222;102    margin: 40px 40px 24px 40px;103  }104 105  .rating {106    display: flex;107    justify-content: center;108    align-items: center;109    gap: 14px;110    margin-top: 16px;111  }112  .star { width: 44px; height: 44px; }113  .rating-text {114    text-align: center;115    color: #7A7A7A;116    font-size: 36px;117    margin-top: 16px;118  }119 120  .actions {121    display: flex;122    justify-content: space-around;123    align-items: center;124    margin-top: 60px;125    padding: 20px 0;126  }127  .action-item {128    display: flex;129    flex-direction: column;130    align-items: center;131    gap: 18px;132  }133  .action-icon { width: 72px; height: 72px; }134  .count { font-size: 38px; color: #333; }135  .label { font-size: 36px; color: #333; }136 137  .divider {138    height: 1px;139    background: #E0E0E0;140    margin: 40px 0 0 0;141  }142 143  .author {144    display: flex;145    align-items: center;146    gap: 36px;147    padding: 40px 0;148  }149  .avatar {150    width: 160px;151    height: 160px;152    border-radius: 80px;153    background: #E0E0E0;154    border: 1px solid #BDBDBD;155    display: flex;156    align-items: center;157    justify-content: center;158    color: #757575;159    font-size: 26px;160  }161  .author-info {162    display: flex;163    flex-direction: column;164    gap: 12px;165  }166  .author-name { font-weight: 700; font-size: 44px; color: #222; }167  .author-role { font-size: 34px; color: #777; }168  .author-link { font-size: 36px; color: #F2673A; text-decoration: none; }169 170  /* Bottom pill */171  .home-indicator {172    position: absolute;173    bottom: 32px;174    left: 50%;175    transform: translateX(-50%);176    width: 240px;177    height: 14px;178    border-radius: 7px;179    background: #C9C9C9;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="statusbar">188    <div>12:40</div>189    <div class="status-right">190      <!-- Mail icon (simple envelope) -->191      <svg class="status-icon" viewBox="0 0 24 24">192        <path d="M3 5h18v14H3z" fill="none" stroke="#555" stroke-width="2"/>193        <path d="M3 7l9 6 9-6" fill="none" stroke="#555" stroke-width="2"/>194      </svg>195      <!-- Gear icon -->196      <svg class="status-icon" viewBox="0 0 24 24">197        <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm0-6l2 3 3-1 1 3 3 1-1 3 2 3-3 1-1 3-3-1-2 3-2-3-3 1-1-3-3-1 1-3-2-3 3-1 1-3 3 1 2-3z" fill="#666"/>198      </svg>199      <!-- WiFi icon -->200      <svg class="status-icon" viewBox="0 0 24 24">201        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>202        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>203        <path d="M8 16c3-2 5-2 8 0" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round"/>204        <circle cx="12" cy="19" r="1.8" fill="#666"/>205      </svg>206      <!-- Battery icon -->207      <svg class="status-icon" viewBox="0 0 24 24">208        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/>209        <rect x="4" y="8" width="12" height="8" fill="#666"/>210        <rect x="20" y="9" width="2" height="6" fill="#666"/>211      </svg>212    </div>213  </div>214 215  <!-- Hero area -->216  <div class="hero">217    <div class="hero-placeholder">[IMG: Lemon cake with blueberries]</div>218 219    <!-- Back button -->220    <div class="back-btn">221      <svg width="52" height="52" viewBox="0 0 24 24">222        <path d="M15 4L7 12l8 8" fill="none" stroke="#333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224    </div>225 226    <!-- Play button overlay -->227    <div class="play-overlay">228      <svg width="90" height="90" viewBox="0 0 24 24">229        <path d="M8 5l12 7-12 7z" fill="#FFFFFF"/>230      </svg>231    </div>232  </div>233 234  <!-- Content area -->235  <div class="content">236    <div class="title">Lemon cake with<br>blueberries</div>237 238    <div class="rating">239      <!-- Stars: 4 full and one half -->240      <svg class="star" viewBox="0 0 24 24">241        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#FF7A3E"/>242      </svg>243      <svg class="star" viewBox="0 0 24 24">244        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#FF7A3E"/>245      </svg>246      <svg class="star" viewBox="0 0 24 24">247        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#FF7A3E"/>248      </svg>249      <svg class="star" viewBox="0 0 24 24">250        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#FF7A3E"/>251      </svg>252      <svg class="star" viewBox="0 0 24 24">253        <defs>254          <clipPath id="half">255            <rect x="0" y="0" width="12" height="24"></rect>256          </clipPath>257        </defs>258        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#C1C1C1"/>259        <path d="M12 2l2.83 6.63L22 9.24l-5.46 4.73L18.18 21 12 17.27 5.82 21l1.64-7.03L2 9.24l7.17-.61L12 2z" fill="#FF7A3E" clip-path="url(#half)"/>260      </svg>261    </div>262    <div class="rating-text">Based on 322 ratings</div>263 264    <div class="actions">265      <div class="action-item">266        <svg class="action-icon" viewBox="0 0 24 24">267          <path d="M12 21s-7-4.35-9.5-8.13C1 9.5 3.5 6.5 7 7.5c1.63.45 3 .99 5 3 2-2.01 3.37-2.55 5-3 3.5-1 6 2 4.5 5.37C19 16.65 12 21 12 21z" fill="none" stroke="#333" stroke-width="2"/>268        </svg>269        <div class="count">66185</div>270      </div>271      <div class="action-item">272        <svg class="action-icon" viewBox="0 0 24 24">273          <path d="M6 3h12a2 2 0 012 2v16l-8-4-8 4V5a2 2 0 012-2z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>274        </svg>275        <div class="label">Save</div>276      </div>277      <div class="action-item">278        <svg class="action-icon" viewBox="0 0 24 24">279          <circle cx="5" cy="12" r="2.5" fill="none" stroke="#333" stroke-width="2"/>280          <circle cx="15" cy="6" r="2.5" fill="none" stroke="#333" stroke-width="2"/>281          <circle cx="15" cy="18" r="2.5" fill="none" stroke="#333" stroke-width="2"/>282          <path d="M7.5 11l5.5-4M7.5 13l5.5 4" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/>283        </svg>284        <div class="label">Share</div>285      </div>286    </div>287 288    <div class="divider"></div>289 290    <div class="author">291      <div class="avatar">[IMG: Author Avatar]</div>292      <div class="author-info">293        <div class="author-name">Mengting</div>294        <div class="author-role">Founder at Kitchen Stories</div>295        <a class="author-link" href="#">kitchenstories.com</a>296      </div>297    </div>298  </div>299 300  <div class="home-indicator"></div>301</div>302</body>303</html>