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 - Zz plant</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #143F38; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #f5f7f6;11  }12 13  /* Hero image placeholder */14  .hero {15    position: absolute; left: 0; top: 0; width: 100%; height: 820px;16    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;17    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 44px; letter-spacing: .5px;18  }19  .hero::after{20    content:""; position:absolute; inset:0;21    background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45));22    pointer-events:none;23  }24 25  /* Minimal status bar */26  .status {27    position: absolute; top: 24px; left: 24px; right: 24px; height: 60px; color: #ffffff;28    display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 34px; opacity: .95;29  }30  .status .icons { display: flex; align-items: center; gap: 22px; }31  .dot{ width:22px; height:22px; background:#fff; border-radius:50%; opacity:.85; }32  .pill{ width:40px; height:24px; border-radius:12px; background:#fff; opacity:.8; }33 34  /* Back button */35  .back-btn{36    position: absolute; top: 320px; left: 36px; width: 92px; height: 92px; border-radius: 46px;37    backdrop-filter: blur(2px);38    display: flex; align-items: center; justify-content: center;39  }40  .back-btn svg { width: 48px; height: 48px; fill: #ffffff; opacity: .95; }41 42  /* Content panel */43  .content {44    position: absolute; left: 0; top: 560px; width: 100%;45    background: #ffffff; border-top-left-radius: 56px; border-top-right-radius: 56px;46    box-shadow: 0 -10px 40px rgba(0,0,0,.12);47    padding: 56px 56px 280px 56px;48  }49  .title { font-size: 72px; font-weight: 800; margin: 0 0 8px 0; color:#184E46; }50  .subtitle { font-size: 38px; color:#5d7873; font-style: italic; margin: 0 0 32px 0; }51 52  .chips { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 34px; }53  .chip{54    padding: 16px 26px; border-radius: 22px; background:#d6eaE5; color:#1c6158; font-weight: 700; font-size: 34px;55  }56  .chip.mid { background:#cfe0e0; }57  .chip.pink{ background:#f1ccd8; color:#923d59; }58  .chip.bad{ background:#f0c1cf; color:#8a2b50; }59 60  .details { margin-top: 26px; margin-bottom: 36px; }61  .row{ display: grid; grid-template-columns: 350px 1fr; column-gap: 20px; align-items: baseline; padding: 18px 0; }62  .label{ color:#6f8a85; font-size: 36px; }63  .value{ color:#1f6b61; font-size: 36px; font-style: italic; font-weight: 700; }64 65  .promo{66    position: relative; background:#0c3b35; color:#e9f5f3; border-radius: 36px; padding: 38px; margin: 20px 0 56px 0;67    box-shadow: 0 12px 28px rgba(0,0,0,.18);68  }69  .promo h3{ margin:0; font-size: 44px; color:#e9f5f3; }70  .promo p{ margin:8px 0 0 0; font-size: 34px; color:#b8d2cf; }71  .promo .mail{72    position: absolute; right: 28px; top: 28px; width: 112px; height: 92px; border-radius: 20px; background:#e0ece9;73    display:flex; align-items:center; justify-content:center;74  }75  .promo .mail svg{ width: 56px; height: 56px; fill:#cf4b64; }76 77  .section-title{ font-size: 52px; font-weight: 800; margin: 10px 0 24px 0; color:#184E46; }78  .gallery{ display:flex; gap:28px; overflow:hidden; }79  .photo{80    flex: 0 0 780px; height: 340px; border-radius: 32px; background:#E0E0E0; border:1px solid #BDBDBD;81    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px;82  }83 84  /* Bottom sheet */85  .sheet{86    position: absolute; left: 0; right: 0; bottom: 0; height: 720px; background:#ffffff;87    border-top-left-radius: 32px; border-top-right-radius: 32px;88    box-shadow: 0 -20px 40px rgba(0,0,0,.25); padding: 40px 48px 90px 48px;89  }90  .sheet .handle {91    width: 200px; height: 10px; background:#cfd6d4; border-radius: 6px; margin: 0 auto 26px auto;92  }93  .sheet h4{ margin: 12px 0 18px 0; font-size: 40px; color:#7a8f8a; font-weight: 600; }94  .option{95    padding: 32px 8px; font-size: 48px; color:#184E46; font-weight: 700; border-bottom: 1px solid #eef2f1;96  }97  .option:last-child{ border-bottom: none; }98 99  /* Home indicator */100  .home-bar{101    position: absolute; left: 50%; transform: translateX(-50%);102    bottom: 20px; width: 260px; height: 12px; background:#c7c9c8; border-radius: 8px;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Hero image -->110  <div class="hero">[IMG: Zz plant leaves close-up]</div>111 112  <!-- Status bar -->113  <div class="status">114    <div>10:31</div>115    <div class="icons">116      <div class="dot"></div>117      <div class="dot"></div>118      <div class="dot"></div>119      <div class="pill"></div>120    </div>121  </div>122 123  <!-- Back button -->124  <div class="back-btn">125    <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 2L3.5 12 14 2.5l1.5 2z"/></svg>126  </div>127 128  <!-- Content panel -->129  <div class="content">130    <h1 class="title">Zz plant</h1>131    <div class="subtitle">Foliage Plants</div>132 133    <div class="chips">134      <div class="chip">Air-purifying</div>135      <div class="chip">Easy</div>136      <div class="chip mid">Medium</div>137      <div class="chip pink">Pet-toxic</div>138      <div class="chip bad">Poisonous</div>139      <div class="chip mid">Trendy</div>140    </div>141 142    <div class="details">143      <div class="row">144        <div class="label">Genus:</div>145        <div class="value">Zamioculcas</div>146      </div>147      <div class="row">148        <div class="label">Scientific Name:</div>149        <div class="value">Zamioculcas zamiifolia</div>150      </div>151      <div class="row">152        <div class="label">Common Names:</div>153        <div class="value">Zanzibar gem, zamioculcas, zuzu plant</div>154      </div>155    </div>156 157    <div class="promo">158      <div class="mail">159        <svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>160      </div>161      <h3>Try Plantum Premium for Free</h3>162      <p>Claim your offer now.</p>163    </div>164 165    <div class="section-title">Photo Gallery</div>166    <div class="gallery">167      <div class="photo">[IMG: Plant photo]</div>168      <div class="photo">[IMG: Plant photo]</div>169      <div class="photo">[IMG: Plant photo]</div>170    </div>171  </div>172 173  <!-- Bottom Sheet -->174  <div class="sheet">175    <div class="handle"></div>176    <h4>Add to:</h4>177    <div class="option">Outdoor</div>178    <div class="option">Indoor</div>179    <div class="option">My Plants</div>180    <div class="home-bar"></div>181  </div>182 183</div>184</body>185</html>