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>Cooked “Caramel” Apples</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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #000;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 92px;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-weight: 600;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }33  .status-pill {34    font-size: 26px;35    color: #fff;36    opacity: 0.9;37    border: 1px solid rgba(255,255,255,0.3);38    border-radius: 8px;39    padding: 2px 8px;40  }41  .status-time { font-size: 30px; letter-spacing: 0.5px; }42 43  /* Hero image */44  .hero {45    position: absolute;46    top: 92px;47    left: 0;48    width: 1080px;49    height: 1250px;50  }51  .hero .img-placeholder {52    width: 100%;53    height: 100%;54    background: #E0E0E0;55    border: 1px solid #BDBDBD;56    color: #757575;57    display: flex;58    align-items: center;59    justify-content: center;60    font-size: 36px;61    text-align: center;62    padding: 20px;63    box-sizing: border-box;64  }65 66  /* Back button */67  .back-btn {68    position: absolute;69    top: 330px;70    left: 60px;71    width: 120px;72    height: 120px;73    background: rgba(0,0,0,0.75);74    border-radius: 60px;75    display: flex;76    align-items: center;77    justify-content: center;78  }79 80  /* Content area */81  .content {82    position: absolute;83    left: 0;84    top: 1342px;85    width: 1080px;86    height: 1058px;87    background: #000;88    color: #fff;89  }90  .title {91    font-family: Georgia, "Times New Roman", serif;92    font-size: 86px;93    font-weight: 700;94    line-height: 1.2;95    color: #fff;96    text-align: center;97    padding: 40px 60px 10px;98  }99 100  .rating {101    display: flex;102    justify-content: center;103    gap: 18px;104    margin-top: 36px;105  }106  .rating svg { width: 48px; height: 48px; fill: #9E9E9E; }107  .rating-text {108    text-align: center;109    color: #BDBDBD;110    font-size: 34px;111    margin-top: 12px;112  }113 114  .actions {115    display: flex;116    justify-content: space-around;117    width: 900px;118    margin: 56px auto 36px;119  }120  .action {121    display: flex;122    align-items: center;123    gap: 16px;124    color: #fff;125    font-size: 36px;126  }127  .action svg { width: 60px; height: 60px; stroke: #fff; stroke-width: 2.5; fill: none; }128  .divider {129    height: 1px;130    background: #1E1E1E;131    width: 980px;132    margin: 30px auto;133  }134 135  .author {136    display: flex;137    align-items: center;138    gap: 26px;139    padding: 24px 50px;140  }141  .avatar {142    width: 140px;143    height: 140px;144    border-radius: 70px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    display: flex;148    align-items: center;149    justify-content: center;150    color: #757575;151    font-size: 26px;152  }153  .author .name {154    font-size: 42px;155    font-weight: 700;156    color: #fff;157  }158  .author .role {159    font-size: 32px;160    color: #BDBDBD;161    margin-top: 6px;162  }163 164  .description {165    font-size: 38px;166    line-height: 1.5;167    color: #F0F0F0;168    padding: 16px 50px 0;169  }170</style>171</head>172<body>173<div id="render-target">174  <!-- Status Bar -->175  <div class="status-bar">176    <div class="status-left">177      <div class="status-time">11:06</div>178      <div class="status-pill">LR</div>179      <div class="status-pill">Docs</div>180      <div class="status-pill">Play</div>181    </div>182    <div class="status-right">183      <!-- WiFi icon -->184      <svg viewBox="0 0 24 24" width="38" height="38">185        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>186        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>187        <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>188        <circle cx="12" cy="19" r="1.6" fill="#fff"/>189      </svg>190      <!-- Battery icon -->191      <svg viewBox="0 0 26 24" width="40" height="38">192        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>193        <rect x="4" y="8" width="12" height="8" fill="#fff"/>194        <rect x="20" y="9" width="4" height="6" rx="1" fill="#fff"/>195      </svg>196    </div>197  </div>198 199  <!-- Hero image -->200  <div class="hero">201    <div class="img-placeholder">[IMG: Cooked Apples on Plate with Cinnamon]</div>202  </div>203 204  <!-- Back button -->205  <div class="back-btn">206    <svg viewBox="0 0 24 24" width="64" height="64">207      <path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208    </svg>209  </div>210 211  <!-- Content section -->212  <div class="content">213    <div class="title">Cooked “Caramel” Apples</div>214 215    <div class="rating">216      <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9"/></svg>217      <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9"/></svg>218      <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9"/></svg>219      <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9"/></svg>220      <svg viewBox="0 0 24 24"><polygon points="12,2 15,9 22,9 17,14 19,22 12,18 5,22 7,14 2,9 9,9"/></svg>221    </div>222    <div class="rating-text">Too few ratings</div>223 224    <div class="actions">225      <div class="action">226        <svg viewBox="0 0 24 24">227          <path d="M12 21 L4 13 C1.5 10.5 3 6 7 6 c2 0 3 1 5 3 c2-2 3-3 5-3 c4 0 5.5 4.5 3 7.5 L12 21 z"/>228        </svg>229        <span>14</span>230      </div>231      <div class="action">232        <svg viewBox="0 0 24 24">233          <path d="M6 3 H18 V21 L12 17 L6 21 Z"/>234        </svg>235        <span>Save</span>236      </div>237      <div class="action">238        <svg viewBox="0 0 24 24">239          <circle cx="5" cy="12" r="2" fill="none" stroke="#fff" stroke-width="2"/>240          <circle cx="12" cy="7" r="2" fill="none" stroke="#fff" stroke-width="2"/>241          <circle cx="19" cy="12" r="2" fill="none" stroke="#fff" stroke-width="2"/>242          <path d="M7 11 L10 9" stroke="#fff" stroke-width="2" fill="none"/>243          <path d="M14 9 L17 11" stroke="#fff" stroke-width="2" fill="none"/>244        </svg>245        <span>Share</span>246      </div>247    </div>248 249    <div class="divider"></div>250 251    <div class="author">252      <div class="avatar">[IMG: User Avatar]</div>253      <div>254        <div class="name">The Simple Foodie</div>255        <div class="role">Community member</div>256      </div>257    </div>258 259    <div class="description">260      This is a simple little recipe I love to make for a quick and easy breakfast. I like to use unsweetened almond...261    </div>262  </div>263</div>264</body>265</html>