GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Plant Care UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #22252B; /* dark app background */14    color: #F1F4F8;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 80px;24    color: #FFFFFF;25    display: flex;26    align-items: center;27    padding: 0 32px;28    font-weight: 600;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .status-dot {39    width: 32px; height: 32px; background: #FFFFFF; border-radius: 50%;40  }41  .battery {42    width: 40px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;43  }44  .battery::after {45    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;46  }47  .battery .level { position: absolute; left: 3px; top: 3px; height: 16px; width: 24px; background: #69E093; }48 49  /* Top banner images placeholder */50  .top-images {51    position: absolute;52    top: 80px;53    left: 0;54    width: 1080px;55    height: 180px;56    display: flex;57    gap: 12px;58    padding: 0 12px;59  }60  .img-ph {61    flex: 1;62    background: #E0E0E0;63    border: 1px solid #BDBDBD;64    display: flex; align-items: center; justify-content: center;65    color: #757575;66    font-size: 28px;67  }68 69  /* Big pill button */70  .care-btn {71    position: absolute;72    top: 220px;73    left: 60px;74    width: 760px;75    height: 120px;76    background: #5AC6A2;77    border-radius: 60px;78    display: flex; align-items: center; justify-content: center;79    font-weight: 700; font-size: 44px; color: #0E2E20;80    box-shadow: 0 8px 20px rgba(90,198,162,0.35);81  }82  .heart-ring {83    position: absolute;84    top: 195px;85    right: 60px;86    width: 130px;87    height: 130px;88    border-radius: 50%;89    border: 8px solid #F28B81; /* coral ring */90    display: flex; align-items: center; justify-content: center;91    background: rgba(255,255,255,0.02);92  }93  .heart-icon {94    width: 60px; height: 60px;95  }96 97  /* Content sections */98  .section {99    position: absolute;100    left: 32px;101    right: 32px;102  }103  .general-info {104    top: 380px;105  }106  .title {107    font-size: 56px;108    font-weight: 800;109    margin-bottom: 24px;110  }111  .info-row {112    display: flex; align-items: center; gap: 24px;113    margin-bottom: 24px;114  }115  .leaf-badge {116    width: 96px; height: 96px; border-radius: 18px; background: #2B2F36; display: flex; align-items: center; justify-content: center;117    box-shadow: inset 0 0 0 1px #39414C;118  }119  .leaf-badge svg { width: 54px; height: 54px; }120  .info-text .label {121    font-size: 34px; color: #AAB2BF; margin-bottom: 8px; font-weight: 700;122  }123  .info-text .sub {124    font-size: 34px; font-weight: 700; color: #DDE3EB;125  }126 127  .paragraph {128    font-size: 34px;129    line-height: 1.55;130    color: #D6DBE4;131    margin: 26px 0;132  }133 134  /* Plant requirements section */135  .requirements {136    top: 1240px;137  }138  .subtitle {139    font-size: 34px; color: #AAB2BF; margin-top: 12px; margin-bottom: 24px;140  }141  .card-row {142    display: flex; gap: 28px; flex-wrap: nowrap;143  }144  .card {145    width: 320px; height: 320px; border-radius: 36px;146    background: #2A2E36; box-shadow: inset 0 0 0 1px #3A404A;147    padding: 28px;148    color: #E9EDF3;149  }150  .card .icon {151    width: 96px; height: 96px; border-radius: 22px; background: #1F242B;152    display: flex; align-items: center; justify-content: center;153    box-shadow: inset 0 0 0 1px #39414C; margin-bottom: 46px;154  }155  .card .title-sm { font-size: 44px; font-weight: 800; margin-bottom: 12px; }156  .card .desc { font-size: 32px; color: #AAB2BF; }157 158  /* Popularity footer */159  .popularity {160    position: absolute;161    left: 32px;162    right: 32px;163    bottom: 120px;164    display: flex; align-items: center; gap: 16px;165    font-size: 42px; font-weight: 800;166  }167  .flame {168    width: 40px; height: 40px; position: relative;169  }170  .flame:before {171    content: ""; position: absolute; left: 8px; top: 6px;172    width: 24px; height: 30px;173    background: #FFB74D; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;174    transform: rotate(20deg);175    box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset;176  }177  .flame:after {178    content: ""; position: absolute; left: 14px; top: 14px;179    width: 12px; height: 16px; background: #FF7043; border-radius: 50%;180  }181</style>182</head>183<body>184<div id="render-target">185 186  <!-- Status bar -->187  <div class="status-bar">188    9:22189    <div class="status-icons">190      <div class="status-dot"></div>191      <div class="status-dot" style="background:#D0D7E1;"></div>192      <div class="status-dot" style="background:#FFFFFF;"></div>193      <div class="battery"><div class="level"></div></div>194    </div>195  </div>196 197  <!-- Top image placeholders -->198  <div class="top-images">199    <div class="img-ph">[IMG: Plant close-up]</div>200    <div class="img-ph">[IMG: Potted plant]</div>201    <div class="img-ph">[IMG: Garden pots]</div>202  </div>203 204  <!-- Care plan button and heart ring -->205  <div class="care-btn">Get care plan</div>206  <div class="heart-ring">207    <svg class="heart-icon" viewBox="0 0 24 24">208      <path d="M12 21s-6.6-4.7-9.2-7.3c-2.6-2.6-2.5-6.8.2-9 2.3-1.9 5.6-1.3 7.5.8L12 7l1.5-1.6c1.9-2.1 5.2-2.7 7.5-.8 2.7 2.2 2.8 6.4.2 9C18.6 16.3 12 21 12 21z" fill="#F28B81"/>209    </svg>210  </div>211 212  <!-- General information section -->213  <div class="section general-info">214    <div class="title">General information</div>215 216    <div class="info-row">217      <div class="leaf-badge">218        <svg viewBox="0 0 24 24">219          <path d="M6 12c5-1 9-5 10-10 3 7-1 12-6 14-3 1-6 0-4-4z" fill="#6AD49F"></path>220          <path d="M12 13c2 3 1 6-2 7-2 1-5-1-5-3 0-3 4-4 7-4z" fill="#7BE0A9"></path>221        </svg>222      </div>223      <div class="info-text">224        <div class="label">Poisonous</div>225        <div class="sub">Safe to people & animals</div>226      </div>227    </div>228 229    <div class="paragraph">230      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.231    </div>232    <div class="paragraph">233      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.234    </div>235  </div>236 237  <!-- Plant requirements -->238  <div class="section requirements">239    <div class="title">Plant requirements</div>240    <div class="subtitle">The care schedule will be based on these requirements</div>241 242    <div class="card-row">243      <!-- Card 1 -->244      <div class="card">245        <div class="icon">246          <svg viewBox="0 0 24 24" width="54" height="54">247            <path d="M12 2c3 5 7 8 7 12a7 7 0 1 1-14 0c0-4 4-7 7-12z" fill="#87CEFA"/>248          </svg>249        </div>250        <div class="title-sm">Normal</div>251        <div class="desc">Humidity</div>252      </div>253 254      <!-- Card 2 -->255      <div class="card">256        <div class="icon">257          <svg viewBox="0 0 24 24" width="54" height="54">258            <circle cx="9" cy="9" r="7" fill="#9AD0F5"></circle>259            <path d="M13 12l3 3-3 3-3-3 3-3z" fill="#CCE7FF"></path>260          </svg>261        </div>262        <div class="title-sm">9b–11b</div>263        <div class="desc">Hardiness zone</div>264      </div>265 266      <!-- Card 3 -->267      <div class="card">268        <div class="icon">269          <svg viewBox="0 0 24 24" width="54" height="54">270            <circle cx="12" cy="12" r="9" fill="#9AE6B4"></circle>271            <path d="M12 3a9 9 0 0 1 0 18A9 9 0 0 0 12 3z" fill="#62C18B"></path>272          </svg>273        </div>274        <div class="title-sm">North</div>275        <div class="desc">Hemisphere</div>276      </div>277    </div>278  </div>279 280  <!-- Popularity -->281  <div class="popularity">282    <div class="flame"></div>283    Popularity284  </div>285 286</div>287</body>288</html>