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>Chinese Evergreen Detail</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: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #2f2f35;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    display: flex;23    align-items: center;24    padding: 0 40px;25    box-sizing: border-box;26    color: #3b3b3f;27    font-weight: 600;28    font-size: 40px;29  }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .status-icon {37    width: 38px;38    height: 38px;39    border-radius: 19px;40    background: #E0E0E0;41    border: 1px solid #BDBDBD;42  }43  .signal {44    width: 44px;45    height: 28px;46    position: relative;47  }48  .signal::before,49  .signal::after {50    content: "";51    position: absolute;52    right: 0;53    top: 0;54    bottom: 0;55    margin: auto;56    width: 42px;57    height: 16px;58    border: 2px solid #3b3b3f;59    border-radius: 3px;60  }61  .signal::after {62    width: 24px;63    height: 10px;64    right: 4px;65    background: #3b3b3f;66  }67  .battery {68    width: 36px;69    height: 28px;70    border: 2px solid #3b3b3f;71    border-radius: 4px;72    position: relative;73  }74  .battery::after {75    content: "";76    position: absolute;77    right: 4px;78    top: 5px;79    width: 22px;80    height: 16px;81    background: #3b3b3f;82    border-radius: 2px;83  }84  .battery::before {85    content: "";86    position: absolute;87    right: -8px;88    top: 8px;89    width: 6px;90    height: 12px;91    background: #3b3b3f;92    border-radius: 2px;93  }94 95  /* Back row */96  .back-row {97    display: flex;98    align-items: center;99    padding: 14px 40px 0 40px;100    height: 86px;101  }102  .back-icon {103    width: 48px;104    height: 48px;105    fill: none;106    stroke: #2f2f35;107    stroke-width: 8;108  }109 110  /* Content */111  .content {112    padding: 0 40px;113  }114 115  .image-row {116    display: flex;117    gap: 40px;118    margin-top: 20px;119    margin-bottom: 40px;120  }121  .img-large {122    width: 640px;123    height: 320px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    border-radius: 28px;127    display: flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 32px;132    text-align: center;133  }134  .img-small {135    width: 320px;136    height: 320px;137    background: #E0E0E0;138    border: 1px solid #BDBDBD;139    border-radius: 28px;140    display: flex;141    align-items: center;142    justify-content: center;143    color: #757575;144    font-size: 28px;145    text-align: center;146  }147 148  .title {149    font-size: 54px;150    font-weight: 800;151    color: #3e3b4b;152    margin: 18px 0 16px 0;153  }154  .subtitle {155    font-size: 36px;156    line-height: 1.36;157    color: #5e616c;158    margin-bottom: 26px;159  }160  .description {161    font-size: 34px;162    line-height: 1.45;163    color: #5e616c;164    margin-bottom: 18px;165    max-width: 940px;166  }167  .show-more {168    font-size: 34px;169    color: #21a072;170    font-weight: 600;171  }172 173  /* Card section */174  .suggestion-card {175    margin: 80px 16px 0 16px;176    background: #eeeff4;177    border-radius: 28px;178    padding: 56px;179    box-sizing: border-box;180  }181  .card-img {182    width: 520px;183    height: 420px;184    background: #E0E0E0;185    border: 1px solid #BDBDBD;186    border-radius: 28px;187    display: flex;188    align-items: center;189    justify-content: center;190    color: #757575;191    font-size: 30px;192  }193  .card-row {194    display: flex;195    align-items: center;196    justify-content: space-between;197    margin-top: 40px;198  }199  .card-title {200    font-size: 46px;201    font-weight: 800;202    color: #3e3b4b;203  }204  .thumbs {205    display: flex;206    gap: 30px;207    align-items: center;208  }209  .thumb {210    width: 50px;211    height: 50px;212  }213  .thumb path { fill: #f1cd5d; }214 215  .cta {216    margin-top: 36px;217  }218  .cta-btn {219    display: inline-flex;220    align-items: center;221    gap: 22px;222    background: #f1cd5d;223    color: #212126;224    font-size: 40px;225    font-weight: 800;226    padding: 36px 44px;227    border-radius: 80px;228    box-shadow: 0 10px 20px rgba(0,0,0,0.12);229    text-decoration: none;230  }231  .cta-btn svg {232    width: 32px;233    height: 32px;234    fill: none;235    stroke: #212126;236    stroke-width: 8;237  }238 239  /* Bottom home indicator */240  .home-indicator {241    position: absolute;242    bottom: 26px;243    left: 50%;244    transform: translateX(-50%);245    width: 240px;246    height: 14px;247    background: #111111;248    border-radius: 7px;249    opacity: 0.9;250  }251</style>252</head>253<body>254<div id="render-target">255  <div class="status-bar">256    <div>3:29</div>257    <div class="status-right">258      <div class="status-icon"></div>259      <div style="font-size:34px; color:#3b3b3f;">33°</div>260      <div class="status-icon"></div>261      <div class="status-icon" style="width:10px; height:10px; border-radius:5px;"></div>262      <div class="signal"></div>263      <div class="battery"></div>264    </div>265  </div>266 267  <div class="back-row">268    <svg class="back-icon" viewBox="0 0 24 24">269      <path d="M15 18l-6-6 6-6" />270    </svg>271  </div>272 273  <div class="content">274    <div class="image-row">275      <div class="img-large">[IMG: Chinese Evergreen leaves over person]</div>276      <div class="img-small">[IMG: Chinese Evergreen potted close-up]</div>277    </div>278 279    <div class="title">Chinese Evergreen</div>280    <div class="subtitle">Also known as: Golden Evergreen, Philippine Evergreen, Posion Dart Plant</div>281    <div class="description">282      Chinese evergreens have been growing in homes throughout Asia for centuries as symbols of good fortune.283      They were introduced to the Western w...284    </div>285    <div class="show-more">Show more</div>286 287    <div class="suggestion-card">288      <div class="card-img">[IMG: Chinese Evergreen on wooden floor]</div>289      <div class="card-row">290        <div class="card-title">Does this look like your plant?</div>291        <div class="thumbs">292          <svg class="thumb" viewBox="0 0 24 24">293            <path d="M9 22h9a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-5.5l1-4.5c.2-.9-.5-1.5-1.3-1.5H10l-1 6H5v9h4z"/>294          </svg>295          <svg class="thumb" viewBox="0 0 24 24">296            <path d="M15 2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h5.5l-1 4.5c-.2.9.5 1.5 1.3 1.5H14l1-6h4V2h-4z"/>297          </svg>298        </div>299      </div>300      <div class="cta">301        <a class="cta-btn" href="#">302          View All Results303          <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>304        </a>305      </div>306    </div>307  </div>308 309  <div class="home-indicator"></div>310</div>311</body>312</html>