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 - Chinese fried rice</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    color: #fff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Top status/info */20  .status-bar {21    position: absolute;22    top: 28px;23    left: 36px;24    right: 36px;25    height: 60px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.95;30    pointer-events: none;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 22px;36    font-weight: 600;37    font-size: 38px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 28px;43  }44  .icon-mini { width: 42px; height: 42px; }45 46  /* Hero section */47  .hero {48    position: absolute;49    left: 0;50    top: 0;51    width: 1080px;52    height: 1000px;53    overflow: hidden;54  }55  .hero .img {56    width: 100%;57    height: 100%;58    background: #E0E0E0;59    border-bottom: 1px solid #BDBDBD;60    display: flex;61    align-items: center;62    justify-content: center;63    color: #757575;64    font-size: 40px;65    letter-spacing: 0.5px;66  }67  .hero::after {68    content: "";69    position: absolute;70    inset: 0;71    /* darken and add bottom gradient fade */72    background:73      linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.92));74    pointer-events: none;75  }76 77  /* Back button */78  .back-btn {79    position: absolute;80    top: 116px;81    left: 44px;82    width: 100px;83    height: 100px;84    border-radius: 50%;85    background: rgba(0,0,0,0.65);86    display: flex;87    align-items: center;88    justify-content: center;89  }90  .back-btn svg { width: 48px; height: 48px; }91 92  /* Play button */93  .play-btn {94    position: absolute;95    left: 50%;96    top: 420px;97    transform: translate(-50%, -50%);98    width: 240px;99    height: 240px;100    border-radius: 50%;101    border: 8px solid rgba(255,255,255,0.95);102    display: flex;103    align-items: center;104    justify-content: center;105  }106  .play-btn .dot {107    position: absolute;108    right: 36px;109    bottom: 36px;110    width: 22px;111    height: 22px;112    background: #d6b01f;113    border-radius: 50%;114  }115  .play-btn svg { width: 120px; height: 120px; }116 117  /* Content area */118  .content {119    position: absolute;120    top: 1000px;121    left: 0;122    right: 0;123    padding: 56px 72px 0 72px;124    background: #000;125  }126 127  .title {128    font-size: 96px;129    line-height: 1.1;130    text-align: center;131    font-weight: 700;132    margin: 18px 0 28px;133  }134 135  .rating {136    display: flex;137    justify-content: center;138    align-items: center;139    gap: 16px;140    margin-top: 8px;141  }142  .rating svg { width: 44px; height: 44px; }143  .rating-sub {144    margin-top: 18px;145    text-align: center;146    color: #A9A9A9;147    font-size: 36px;148  }149 150  .actions {151    margin-top: 64px;152    display: flex;153    justify-content: space-around;154    align-items: center;155    text-align: center;156  }157  .action {158    color: #EDEDED;159    font-size: 36px;160  }161  .action .label {162    margin-top: 12px;163    font-size: 38px;164  }165  .action svg {166    width: 64px; height: 64px;167  }168 169  .divider {170    margin: 56px 0 0;171    height: 1px;172    background: #272727;173    width: calc(100% + 144px);174    position: relative;175    left: -72px;176  }177 178  .author {179    display: flex;180    align-items: center;181    gap: 32px;182    padding: 36px 0 0 0;183  }184  .avatar {185    width: 172px;186    height: 172px;187    border-radius: 50%;188    background: #E0E0E0;189    border: 1px solid #BDBDBD;190    display: flex;191    align-items: center;192    justify-content: center;193    color: #757575;194    font-size: 26px;195    text-align: center;196  }197  .author-info .name {198    font-size: 52px;199    font-weight: 700;200  }201  .author-info .role {202    margin-top: 6px;203    font-size: 38px;204    color: #B5B5B5;205  }206 207  /* Home indicator */208  .home-indicator {209    position: absolute;210    left: 50%;211    bottom: 36px;212    transform: translateX(-50%);213    width: 340px;214    height: 10px;215    background: #E6E6E6;216    opacity: 0.65;217    border-radius: 10px;218  }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Top bar -->225  <div class="status-bar">226    <div class="status-left">227      <div>8:53</div>228      <div style="opacity:0.9;">229        <svg class="icon-mini" viewBox="0 0 24 24" fill="none">230          <path d="M6 14c0-2.8 2.3-5 5-5 1.3 0 2.4.5 3.3 1.3.5-.2 1-.3 1.7-.3 2.2 0 4 1.8 4 4H6z" fill="#fff"/>231        </svg>232      </div>233    </div>234    <div class="status-right">235      <svg class="icon-mini" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round">236        <path d="M3 16c3.5-3.5 9.5-3.5 13 0"/>237        <path d="M6 13c2.6-2.6 7.4-2.6 10 0"/>238        <path d="M9 10c1.6-1.6 4.4-1.6 6 0"/>239      </svg>240      <svg class="icon-mini" viewBox="0 0 26 16" fill="none" stroke="#fff" stroke-width="2">241        <rect x="1" y="1" width="20" height="14" rx="2" />242        <rect x="22" y="5" width="3" height="6" rx="1" fill="#fff" stroke="none"/>243        <rect x="3" y="3" width="16" height="10" fill="#fff" stroke="none"/>244      </svg>245    </div>246  </div>247 248  <!-- Hero image -->249  <div class="hero">250    <div class="img">[IMG: Bowl of fried rice]</div>251  </div>252 253  <!-- Back button -->254  <div class="back-btn">255    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">256      <path d="M15 19l-7-7 7-7"/>257    </svg>258  </div>259 260  <!-- Play button -->261  <div class="play-btn">262    <svg viewBox="0 0 100 100" fill="#fff">263      <polygon points="38,28 74,50 38,72"/>264    </svg>265    <div class="dot"></div>266  </div>267 268  <!-- Content -->269  <div class="content">270    <div class="title">Chinese fried rice</div>271 272    <div class="rating">273      <!-- 4 orange stars and 1 gray -->274      <svg viewBox="0 0 24 24"><polygon fill="#FF6D00" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"/></svg>275      <svg viewBox="0 0 24 24"><polygon fill="#FF6D00" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"/></svg>276      <svg viewBox="0 0 24 24"><polygon fill="#FF6D00" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"/></svg>277      <svg viewBox="0 0 24 24"><polygon fill="#FF6D00" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"/></svg>278      <svg viewBox="0 0 24 24"><polygon fill="#7A7A7A" points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,16.8 5.5,21 7.5,13.5 2,9 9,9"/></svg>279    </div>280    <div class="rating-sub">Based on 215 ratings</div>281 282    <div class="actions">283      <div class="action">284        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">285          <path d="M12.1 20.3l-1.1-1C6 15 3 12.3 3 9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 3.3-3 6-8 10.3l-1 .8z"/>286        </svg>287        <div class="label">60002</div>288      </div>289      <div class="action">290        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">291          <path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z"/>292        </svg>293        <div class="label">Save</div>294      </div>295      <div class="action">296        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">297          <circle cx="18" cy="5" r="3"/>298          <circle cx="6" cy="12" r="3"/>299          <circle cx="18" cy="19" r="3"/>300          <path d="M8.7 11.2l6.6-3.4M8.7 12.8l6.6 3.4"/>301        </svg>302        <div class="label">Share</div>303      </div>304    </div>305 306    <div class="divider"></div>307 308    <div class="author">309      <div class="avatar">[IMG: Chef avatar]</div>310      <div class="author-info">311        <div class="name">Yingpin</div>312        <div class="role">Contributor</div>313      </div>314    </div>315  </div>316 317  <div class="home-indicator"></div>318</div>319</body>320</html>