GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Plant Info UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #22252B;13    color: #FFFFFF;14    border-radius: 40px;15  }16  .status-bar {17    position: absolute;18    top: 20px;19    left: 24px;20    right: 24px;21    height: 60px;22    display: flex;23    align-items: center;24    color: #EDEDED;25    font-weight: 600;26    font-size: 36px;27  }28  .status-icons {29    margin-left: 18px;30    display: flex;31    align-items: center;32    gap: 18px;33  }34  .status-dot {35    width: 26px; height: 26px; border-radius: 50%; background:#DADADA;36  }37  .top-photos {38    position: absolute;39    top: 90px;40    left: 0;41    right: 0;42    height: 240px;43    display: flex;44    gap: 6px;45    padding: 0 24px;46  }47  .photo {48    flex: 1;49    background: #E0E0E0;50    border: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center;52    color:#757575; font-size: 28px; border-radius: 16px;53  }54  .cta {55    position: absolute;56    top: 210px;57    left: 60px;58    width: 960px;59    height: 140px;60    border-radius: 80px;61    background: #5BCF9B;62    display: flex;63    align-items: center;64    justify-content: center;65    font-weight: 700;66    font-size: 48px;67    color: #0D3021;68    box-shadow: 0 10px 25px rgba(91,207,155,0.35);69  }70  .heart-wrap {71    position: absolute;72    top: 140px;73    right: 40px;74    width: 132px; height: 132px;75    border-radius: 50%;76    border: 8px solid #F29B8F;77    display: flex; align-items: center; justify-content: center;78    background: rgba(242,155,143,0.08);79  }80  .screen {81    position: absolute;82    top: 360px;83    left: 40px;84    right: 40px;85  }86  h1.section-title {87    font-size: 64px;88    margin: 0 0 24px 0;89    letter-spacing: 0.5px;90  }91  .pill-row {92    display: flex;93    align-items: center;94    gap: 24px;95    margin-bottom: 30px;96  }97  .icon-square {98    width: 100px; height: 100px; border-radius: 20px;99    background: #2F3239;100    display: flex; align-items: center; justify-content: center;101    border: 1px solid #3A3E46;102  }103  .pill-info {104    display: flex; flex-direction: column;105  }106  .pill-info .title { font-size: 38px; font-weight: 700; }107  .pill-info .subtitle { font-size: 32px; color: #C9CDD3; margin-top: 6px; }108  .paragraph {109    color: #D6D8DE;110    font-size: 36px;111    line-height: 1.55;112    margin: 28px 0;113  }114  h2.section-title {115    font-size: 58px;116    margin: 80px 0 22px 0;117  }118  .subtext {119    color: #BFC3CA;120    font-size: 34px;121    margin-bottom: 28px;122  }123  .cards {124    display: flex;125    gap: 26px;126  }127  .card {128    flex: 1;129    min-width: 0;130    height: 320px;131    background: #2A2E35;132    border: 1px solid #3A3E46;133    border-radius: 28px;134    padding: 36px;135    display: flex;136    flex-direction: column;137    justify-content: flex-start;138  }139  .card .icon {140    width: 96px; height: 96px;141    border-radius: 22px;142    background: #2F3239;143    display: flex; align-items: center; justify-content: center;144    margin-bottom: 26px;145  }146  .card .value { font-size: 48px; font-weight: 800; margin-bottom: 12px; }147  .card .label { font-size: 32px; color: #C9CDD3; }148  .popularity {149    margin-top: 40px;150    display: flex; align-items: center; gap: 20px;151  }152  .flame {153    width: 64px; height: 64px; border-radius: 14px;154    background: #FFD7A8;155    display: flex; align-items: center; justify-content: center;156    color: #CE6A00; font-size: 34px; font-weight: 800;157  }158  .popularity .text { font-size: 50px; font-weight: 800; }159  .home-indicator {160    position: absolute;161    bottom: 20px; left: 50%;162    transform: translateX(-50%);163    width: 420px; height: 12px; border-radius: 6px;164    background: #565A63;165    opacity: 0.65;166  }167  /* Simple SVG color helpers */168  .svg-light { fill:#FFD36B; }169  .svg-red { fill:#FF5E5E; }170  .svg-blue { fill:#8FC5FF; }171  .svg-green { fill:#7ADFB3; }172</style>173</head>174<body>175<div id="render-target">176 177  <div class="status-bar">178    9:21179    <div class="status-icons">180      <div class="status-dot"></div>181      <div class="status-dot"></div>182      <div class="status-dot"></div>183      <div class="status-dot" style="background:#FFFFFF;"></div>184    </div>185  </div>186 187  <div class="top-photos">188    <div class="photo">[IMG: Plant close-up]</div>189    <div class="photo">[IMG: Potted herbs]</div>190    <div class="photo">[IMG: Garden pots]</div>191  </div>192 193  <div class="cta">Get care plan</div>194 195  <div class="heart-wrap">196    <svg width="68" height="68" viewBox="0 0 24 24">197      <path fill="#F29B8F" d="M12 21s-6.7-4.35-9.3-7.06C-0.2 11.43 1.55 6.9 5.5 7.02c2.01.06 3.1 1.23 3.88 2.35.78-1.12 1.87-2.29 3.88-2.35 3.95-.12 5.7 4.41 2.8 6.92C18.7 16.65 12 21 12 21z"/>198    </svg>199  </div>200 201  <div class="screen">202    <h1 class="section-title">General information</h1>203 204    <div class="pill-row">205      <div class="icon-square">206        <svg width="68" height="68" viewBox="0 0 24 24">207          <path class="svg-green" d="M12 20c-3 0-6-2.5-6-5.5C6 12.5 8.2 11 10.5 11c1.1 0 2.4.4 3.5 1.1-.6-3.1 1.5-6.6 5-7.1-.2 4.4-2 6.5-5.6 7.6-.9.3-1.8.6-2.4 1.1.6 1.8 2.3 3.2 3.3 4.3-.9.6-1.9 1-3.3 1z"/>208        </svg>209      </div>210      <div class="pill-info">211        <div class="title">Poisonous</div>212        <div class="subtitle">Safe to people &amp; animals</div>213      </div>214    </div>215 216    <div class="paragraph">217      Plectranthus amboinicus, once identified as Coleus amboinicus, is a semi-succulent perennial plant in the family Lamiaceae with a pungent oregano‑like flavor and odor. It is native to Southern and Eastern Africa.218    </div>219    <div class="paragraph">220      A plant with many names, Plectranthus amboinicus is commonly called Cuban oregano and also bears the monikers Mexican mint, Indian borage and Caribbean oregano. This evergreen perennial works well in mixed beds and mass plantings and as a ground-cover. Its edible, fragrant, rounded leaves bear a terminal point, serrated margins and a soft pubescence. Cuban oregano produces trumpet-shaped, lavender, pink or white flowers.221    </div>222 223    <h2 class="section-title">Plant requirements</h2>224    <div class="subtext">The care schedule will be based on these requirements</div>225 226    <div class="cards">227      <div class="card">228        <div class="icon">229          <svg width="64" height="64" viewBox="0 0 24 24">230            <circle cx="12" cy="12" r="5" class="svg-light"></circle>231            <path fill="#FFD36B" d="M12 1h1v4h-1zM12 19h1v4h-1zM1 12h4v1H1zM19 12h4v1h-4zM4.6 4.6l.7.7-2.8 2.8-.7-.7zM18.7 18.7l.7.7-2.8 2.8-.7-.7zM18.7 4.6l2.8 2.8-.7.7-2.8-2.8zM4.6 18.7l2.8 2.8-.7.7-2.8-2.8z"/>232          </svg>233        </div>234        <div class="value">Full sun</div>235        <div class="label">Lighting</div>236      </div>237 238      <div class="card">239        <div class="icon">240          <svg width="64" height="64" viewBox="0 0 24 24">241            <rect x="9" y="3" width="6" height="14" rx="3" ry="3" fill="#FF7A7A"></rect>242            <circle cx="12" cy="17" r="4" class="svg-red"></circle>243          </svg>244        </div>245        <div class="value">64°F</div>246        <div class="label">Temperature</div>247      </div>248 249      <div class="card">250        <div class="icon">251          <svg width="64" height="64" viewBox="0 0 24 24">252            <path class="svg-blue" d="M12 2c3 4 6 7.1 6 10a6 6 0 1 1-12 0c0-2.9 3-6 6-10z"/>253          </svg>254        </div>255        <div class="value">Normal</div>256        <div class="label">Humidity</div>257      </div>258    </div>259 260    <div class="popularity">261      <div class="flame">🔥</div>262      <div class="text">Popularity</div>263    </div>264  </div>265 266  <div class="home-indicator"></div>267</div>268</body>269</html>