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>Plant Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    border-radius: 24px;14    box-shadow: 0 6px 24px rgba(0,0,0,0.08);15  }16  /* Generic */17  .img-placeholder {18    background: #E0E0E0;19    border: 1px solid #BDBDBD;20    color: #757575;21    display: flex; align-items: center; justify-content: center;22    text-align: center;23  }24  .status-bar {25    position: absolute; top: 24px; left: 28px; right: 28px;26    height: 56px; display: flex; align-items: center; justify-content: space-between;27    color: #1a1a1a; font-weight: 600; font-size: 34px;28    pointer-events: none;29  }30  .status-left, .status-right { display: flex; align-items: center; gap: 26px; }31  .dot { width: 26px; height: 26px; background: #000; border-radius: 50%; }32  .wifi {33    width: 40px; height: 28px;34    border: 3px solid #222; border-top-left-radius: 40px; border-top-right-radius: 40px;35    border-bottom: none;36  }37  .battery {38    width: 58px; height: 28px; border: 3px solid #222; border-radius: 6px; position: relative;39  }40  .battery::after {41    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #222; border-radius: 2px;42  }43  .hero {44    position: relative; width: 100%; height: 860px;45  }46  .hero .img-placeholder { width: 100%; height: 100%; font-size: 40px; }47  .back-btn {48    position: absolute; left: 28px; top: 480px; width: 72px; height: 72px;49    background: rgba(255,255,255,0.9); border-radius: 36px; display: flex; align-items: center; justify-content: center;50    box-shadow: 0 4px 12px rgba(0,0,0,0.12);51  }52  .back-btn svg { width: 34px; height: 34px; }53  .sheet {54    position: absolute; left: 0; right: 0; top: 720px;55    background: #ffffff; border-top-left-radius: 60px; border-top-right-radius: 60px;56    padding: 60px 48px 280px;57  }58  .title { font-size: 72px; font-weight: 800; color: #2E6F64; margin: 0 0 10px 0; }59  .subtitle { font-size: 38px; color: #4F7D75; font-style: italic; margin-bottom: 34px; }60  .chips { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 40px; }61  .chip {62    font-size: 34px; padding: 16px 28px; border-radius: 16px; font-weight: 700;63    color: #2E6F64; background: #DCEFEA;64  }65  .chip.pink { color: #B24F6B; background: #F6DDE6; }66  .info {67    display: grid; grid-template-columns: 360px 1fr; row-gap: 26px; column-gap: 10px;68    margin-top: 16px; margin-bottom: 44px;69  }70  .label { color: #6B8280; font-size: 38px; }71  .value { color: #2E6F64; font-size: 40px; font-style: italic; font-weight: 700; }72  .promo {73    margin: 18px 0 54px; background: #144E46; color: #fff;74    border-radius: 28px; padding: 36px 36px; display: flex; align-items: center; justify-content: space-between;75    box-shadow: 0 14px 24px rgba(0,0,0,0.18);76  }77  .promo .text { line-height: 1.2; }78  .promo .title { font-size: 46px; margin: 0; color: #fff; }79  .promo .sub { font-size: 34px; color: #D9EAE6; margin-top: 10px; }80  .promo-icon {81    width: 120px; height: 90px; border-radius: 16px; background: #E0E0E0; border: 1px solid #BDBDBD;82    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;83  }84  .section-title { font-size: 56px; color: #2E6F64; font-weight: 800; margin: 0 0 28px 0; }85  .gallery-card {86    width: 984px; height: 560px; border-radius: 32px; overflow: hidden;87    background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.08);88    padding: 0; margin: 0;89  }90  .gallery-card .img-placeholder { width: 100%; height: 100%; font-size: 36px; }91  .bottom-actions {92    position: absolute; left: 36px; right: 36px; bottom: 220px;93    display: flex; align-items: center; gap: 32px;94  }95  .share-circle {96    width: 160px; height: 160px; border-radius: 80px; background: #fff;97    box-shadow: 0 12px 24px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center;98    border: 1px solid #E7E7E7;99  }100  .share-circle svg { width: 60px; height: 60px; }101  .cta {102    flex: 1; height: 160px; background: #296E62; color: #fff; font-size: 48px; font-weight: 800;103    border-radius: 90px; display: flex; align-items: center; justify-content: center;104    box-shadow: 0 12px 24px rgba(41,110,98,0.35);105  }106  .home-indicator {107    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);108    width: 280px; height: 12px; background: #9E9E9E; border-radius: 8px; opacity: 0.7;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Hero with status bar -->116  <div class="hero">117    <div class="img-placeholder">[IMG: Close-up green leaves]</div>118 119    <div class="status-bar">120      <div class="status-left">121        <div>10:30</div>122        <!-- simple icons -->123        <svg width="34" height="34" viewBox="0 0 24 24" fill="#000"><circle cx="10" cy="10" r="9"/></svg>124        <div class="dot" style="background:#000;"></div>125        <svg width="34" height="34" viewBox="0 0 24 24" fill="#000"><rect x="6" y="4" width="12" height="8" rx="2"/><rect x="10" y="13" width="4" height="7" rx="1"/></svg>126        <div class="dot" style="background:#474747;"></div>127      </div>128      <div class="status-right">129        <div class="wifi"></div>130        <div class="battery"></div>131      </div>132    </div>133 134    <div class="back-btn">135      <svg viewBox="0 0 24 24" fill="none" stroke="#25655C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">136        <path d="M15 6 L9 12 L15 18"/>137      </svg>138    </div>139  </div>140 141  <!-- Content sheet -->142  <div class="sheet">143    <h1 class="title">Zz plant</h1>144    <div class="subtitle">Foliage Plants</div>145 146    <div class="chips">147      <div class="chip">Air-purifying</div>148      <div class="chip">Easy</div>149      <div class="chip">Medium</div>150      <div class="chip pink">Pet-toxic</div>151      <div class="chip pink">Poisonous</div>152      <div class="chip">Trendy</div>153    </div>154 155    <div class="info">156      <div class="label">Genus:</div>157      <div class="value">Zamioculcas</div>158 159      <div class="label">Scientific Name:</div>160      <div class="value">Zamioculcas zamiifolia</div>161 162      <div class="label">Common Names:</div>163      <div class="value">Zanzibar gem, zamioculcas, zuzu plant</div>164    </div>165 166    <div class="promo">167      <div class="text">168        <h3 class="title">Try Plantum Premium for Free</h3>169        <div class="sub">Claim your offer now.</div>170      </div>171      <div class="promo-icon">[IMG: Envelope]</div>172    </div>173 174    <div class="section-title">Photo Gallery</div>175    <div class="gallery-card">176      <div class="img-placeholder">[IMG: Zz plant gallery photo]</div>177    </div>178  </div>179 180  <!-- Bottom actions -->181  <div class="bottom-actions">182    <div class="share-circle">183      <svg viewBox="0 0 24 24" fill="none" stroke="#296E62" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">184        <circle cx="18" cy="5" r="3"/>185        <circle cx="6" cy="12" r="3"/>186        <circle cx="18" cy="19" r="3"/>187        <path d="M8.7 11.2 L15.3 6.8"/>188        <path d="M8.7 12.8 L15.3 17.2"/>189      </svg>190    </div>191    <div class="cta">Add to My Plants</div>192  </div>193 194  <div class="home-indicator"></div>195</div>196</body>197</html>