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>Golden pothos - Care</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1b1b1b; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16  /* Top app bar */17  .appbar {18    position: relative;19    height: 230px;20    background: linear-gradient(135deg, #138f5a 0%, #23c16b 60%, #42d391 100%);21    color: #fff;22    padding: 32px 36px 0 36px;23  }24  .appbar .row {25    position: absolute;26    left: 24px;27    right: 24px;28    top: 110px;29    height: 60px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .appbar .title {35    font-size: 46px;36    font-weight: 700;37    letter-spacing: 0.2px;38  }39  .icon-btn {40    width: 76px;41    height: 76px;42    border-radius: 50%;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  /* Info strip */48  .info-card {49    margin: -18px 48px 28px 48px; /* tucks slightly under the app bar */50    background: #dff4d7;51    border-radius: 28px;52    padding: 28px 36px;53  }54  .info-row {55    display: grid;56    grid-template-columns: 1fr 1fr;57    padding: 28px 6px;58    border-bottom: 2px dashed #76c696;59    column-gap: 24px;60    align-items: center;61  }62  .info-row:last-child { border-bottom: none; }63  .info-label {64    font-size: 40px;65    font-weight: 700;66    color: #0e8a54;67  }68  .info-value {69    font-size: 38px;70    text-align: left;71    color: #245640;72  }73 74  /* Content */75  .content {76    padding: 24px 48px 0 48px;77  }78  .section-title {79    font-size: 56px;80    font-weight: 800;81    margin: 32px 0 24px 0;82    color: #161616;83  }84 85  .care-card {86    background: #ffffff;87    border-radius: 32px;88    box-shadow: 0 12px 36px rgba(0,0,0,0.08);89    padding: 34px 34px 44px 34px;90  }91  .care-top {92    display: flex;93    align-items: center;94    justify-content: space-between;95  }96  .care-left {97    display: flex;98    align-items: center;99    gap: 24px;100  }101  .circle-icon {102    width: 120px;103    height: 120px;104    border-radius: 60px;105    background: radial-gradient( circle at 35% 25%, #bfe1ff 0%, #e7f1ff 60%, #d8eaff 100%);106    display: flex;107    align-items: center;108    justify-content: center;109  }110  .care-title {111    font-size: 42px;112    font-weight: 700;113    color: #222;114  }115  .chev-wrap {116    width: 76px; height: 76px; border-radius: 38px; background: #efefef; display: flex; align-items: center; justify-content: center;117  }118 119  .yellow-callout {120    margin: 36px 10px 16px 10px;121    background: #f6e58d;122    border-radius: 24px;123    padding: 34px 32px;124    text-align: center;125    color: #2b2b2b;126  }127  .yellow-callout .small {128    font-size: 36px;129  }130  .yellow-callout .strong {131    display: block;132    font-size: 44px;133    font-weight: 800;134    margin-top: 10px;135  }136 137  .care-text {138    margin: 16px 14px 0 14px;139    font-size: 38px;140    line-height: 1.55;141    color: #303030;142  }143 144  /* Bottom actions */145  .bottom-actions {146    position: absolute;147    left: 0; right: 0; bottom: 116px;148    display: flex;149    align-items: center;150    justify-content: space-between;151    padding: 0 52px;152  }153  .fab {154    width: 140px; height: 140px; border-radius: 70px;155    background: #f3c21d;156    box-shadow: 0 10px 20px rgba(243, 194, 29, 0.35);157    display: flex; align-items: center; justify-content: center;158  }159  .cta {160    flex: 1;161    margin-left: 32px;162    height: 140px;163    border-radius: 80px;164    background: linear-gradient(135deg, #21b16b, #22c773);165    color: #fff;166    display: flex; align-items: center; justify-content: center;167    font-size: 44px; font-weight: 800;168    box-shadow: 0 18px 30px rgba(34, 199, 115, 0.35);169  }170 171  /* Gesture bar */172  .gesture {173    position: absolute;174    bottom: 34px;175    left: 50%;176    transform: translateX(-50%);177    width: 360px;178    height: 12px;179    background: #cfcfcf;180    border-radius: 8px;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- App bar -->188  <div class="appbar">189    <div class="row">190      <div class="icon-btn" aria-label="Back">191        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">192          <path d="M15.5 4.5L7.5 12l8 7.5-1.6 1.5L4.5 12l9.4-9 1.6 1.5z"/>193        </svg>194      </div>195      <div class="title">Golden pothos</div>196      <div class="icon-btn" aria-label="Close">197        <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">198          <path d="M18 6L6 18m0-12l12 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>199        </svg>200      </div>201    </div>202  </div>203 204  <!-- Info section -->205  <div class="info-card">206    <div class="info-row">207      <div class="info-label">Native Area</div>208      <div class="info-value">Solomon Islands</div>209    </div>210    <div class="info-row">211      <div class="info-label">Planting time</div>212      <div class="info-value">All year around</div>213    </div>214  </div>215 216  <!-- Care content -->217  <div class="content">218    <div class="section-title">Care</div>219 220    <div class="care-card">221      <div class="care-top">222        <div class="care-left">223          <div class="circle-icon" aria-hidden="true">224            <!-- Simple droplet icon -->225            <svg width="70" height="70" viewBox="0 0 24 24">226              <path d="M12 2C9.5 6 6 9.6 6 13.2A6 6 0 0 0 18 13c0-3.6-3.5-7.2-6-11z" fill="#1690ff"/>227              <circle cx="6.5" cy="6.5" r="2" fill="#3aa9ff" opacity="0.8"/>228              <circle cx="16.5" cy="5.5" r="1.6" fill="#80c8ff" opacity="0.8"/>229            </svg>230          </div>231          <div class="care-title">Water</div>232        </div>233        <div class="chev-wrap" aria-hidden="true">234          <svg width="34" height="34" viewBox="0 0 24 24" fill="#5a5a5a" xmlns="http://www.w3.org/2000/svg">235            <path d="M6 14l6-6 6 6" fill="none" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236          </svg>237        </div>238      </div>239 240      <div class="yellow-callout">241        <div class="small">Suggested fertilizing frequency</div>242        <span class="strong">Every week</span>243      </div>244 245      <div class="care-text">246        Your pothos plants will most likely tell you when they need watering. Water immediately when they start to droop. If you wait too long, their leaves shrivel, develop dry, brown edges, or fall off entirely. You can water them every 1-2 weeks, allowing the soil to dry out completely in between waterings. Don’t leave them in damp soil, or their roots will rot.247      </div>248    </div>249  </div>250 251  <!-- Bottom actions -->252  <div class="bottom-actions">253    <div class="fab" aria-label="Leaf action">254      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">255        <path d="M19 3c-6 0-11 4-12 10 4-2 7-1 9 1-2 0-4 1-5 3 3-1 6-1 8-4 2-3 2-7 0-10z" fill="#ffffff"/>256      </svg>257    </div>258    <div class="cta">Add to Collection</div>259  </div>260 261  <!-- Gesture bar -->262  <div class="gesture"></div>263 264</div>265</body>266</html>