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 Care UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    border-radius: 42px;16    box-shadow: 0 10px 30px rgba(0,0,0,0.04);17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18    color: #2E6756;19  }20 21  /* Layout */22  .screen {23    position: absolute;24    left: 0; top: 0;25    width: 100%; height: 100%;26    box-sizing: border-box;27    padding: 36px 36px 60px;28  }29  .card {30    background: #fff;31    border-radius: 34px;32    box-shadow: 0 16px 24px rgba(39, 86, 70, 0.08);33    padding: 36px;34    margin-bottom: 36px;35  }36  .row {37    display: flex;38    align-items: center;39    justify-content: space-between;40  }41  .title {42    font-weight: 800;43    font-size: 54px;44    letter-spacing: 0.2px;45    display: inline-flex;46    align-items: center;47    gap: 18px;48  }49  .subtitle {50    font-size: 40px;51    color: #2E6756;52    margin: 18px 0 18px;53  }54  .desc {55    font-size: 34px;56    line-height: 1.45;57    color: #5B7E71;58  }59  .desc a {60    color: #3C76C3;61    text-decoration: none;62    font-weight: 600;63  }64  .divider {65    height: 2px;66    background: #E7ECEA;67    margin: 22px 0;68  }69 70  .btn {71    display: inline-flex;72    align-items: center;73    justify-content: center;74    border-radius: 999px;75    font-weight: 700;76    color: #fff;77    padding: 26px 40px;78    font-size: 42px;79    letter-spacing: 0.2px;80    box-shadow: 0 8px 16px rgba(46,103,86,0.25);81    border: none;82    cursor: default;83  }84  .btn-primary { background: #2E6756; }85  .btn-grey { background: #6F8584; box-shadow: none; }86  .btn-orange { background: #F29B4A; box-shadow: 0 8px 16px rgba(242,155,74,0.25); }87 88  /* Dashed helper boxes */89  .dashed {90    border: 4px dashed #9CB1AD;91    border-radius: 32px;92    padding: 36px;93    margin: 18px 0 36px;94  }95  .dashed.orange { border-color: #F2B774; }96 97  /* Icons */98  .icon {99    width: 54px; height: 54px;100  }101  .chev {102    width: 36px; height: 36px;103    margin-left: 12px;104  }105 106  /* Temperature slider visual */107  .temp-header {108    display: flex; align-items: center; justify-content: space-between;109  }110  .temp-scale {111    position: relative;112    margin-top: 26px;113    background: #EAF5EE;114    border-radius: 999px;115    height: 84px;116    overflow: hidden;117  }118  .ticks {119    position: absolute; left: 0; top: 20px; right: 0; bottom: 20px;120    background:121      repeating-linear-gradient(122        to right,123        rgba(51,90,74,0.65) 0,124        rgba(51,90,74,0.65) 6px,125        transparent 6px,126        transparent 24px127      );128    opacity: 0.6;129  }130  .temp-highlight {131    position: absolute;132    top: 0; bottom: 0;133    left: 38%;134    width: 16%;135    background: rgba(95,167,92,0.35);136  }137  .temp-labels {138    display: flex; justify-content: space-between;139    font-size: 30px; color: #769488;140    margin-top: 12px;141  }142  .temp-pill {143    position: absolute;144    left: 50%; transform: translateX(-50%);145    top: 96px;146    background: #2E6756;147    color: #fff;148    padding: 18px 28px;149    border-radius: 18px;150    font-weight: 700;151    font-size: 34px;152    box-shadow: 0 10px 16px rgba(46,103,86,0.18);153  }154 155  /* Sunlight & Soil rows */156  .section-title {157    font-size: 48px; font-weight: 800; display: flex; align-items: center; gap: 18px;158  }159  .section-sub {160    margin-top: 12px; font-size: 38px; color: #769488;161  }162 163  /* Overlay circles (back and menu) */164  .overlay-btn {165    position: absolute;166    width: 112px; height: 112px;167    border-radius: 56px;168    background: rgba(200,200,200,0.5);169    display: flex; align-items: center; justify-content: center;170    top: 300px;171  }172  .overlay-btn.left { left: 18px; }173  .overlay-btn.right { right: 18px; }174</style>175</head>176<body>177<div id="render-target">178  <div class="screen">179 180    <!-- Top card: Watering -->181    <div class="card">182      <div class="row">183        <div class="title">184          <!-- Water droplet icon -->185          <svg class="icon" viewBox="0 0 24 24">186            <path d="M12 2C7 8 5 11 5 14a7 7 0 1 0 14 0c0-3-2-6-7-12z" fill="#2E6756"/>187          </svg>188          <span>Watering</span>189        </div>190        <!-- small status icons (chevron/menu simulation) -->191        <svg class="chev" viewBox="0 0 24 24">192          <path d="M9 6l6 6-6 6" fill="none" stroke="#98ADA7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>193        </svg>194      </div>195 196      <div class="subtitle">Every 1-2 weeks</div>197      <div class="divider"></div>198      <div class="desc">199        Use <a href="#">Water Calculator</a> to estimate the optimal amount of moisture and watering frequency for your plant.200      </div>201 202      <div style="margin-top: 28px;">203        <button class="btn btn-primary" style="width: 100%;">Calculate</button>204      </div>205    </div>206 207    <!-- Dashed: Pot Meter -->208    <div class="dashed">209      <div class="desc" style="text-align:center; margin-bottom: 28px;">210        Use Pot Meter to measure your pot.211      </div>212      <button class="btn btn-grey" style="width: 100%;">Pot Meter</button>213    </div>214 215    <!-- Temperature card -->216    <div class="card">217      <div class="temp-header">218        <div class="section-title">219          <!-- Thermometer icon -->220          <svg class="icon" viewBox="0 0 24 24">221            <path d="M14 2a2 2 0 0 0-4 0v9.3a4.5 4.5 0 1 0 4 0V2z" fill="#2E6756"/>222          </svg>223          <span>Temperature</span>224        </div>225        <svg class="chev" viewBox="0 0 24 24">226          <path d="M9 6l6 6-6 6" fill="none" stroke="#98ADA7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>227        </svg>228      </div>229 230      <div class="temp-scale">231        <div class="ticks"></div>232        <div class="temp-highlight"></div>233      </div>234      <div class="temp-pill">65°F — 75°F</div>235      <div class="temp-labels">236        <span>0°F</span>237        <span>130°F</span>238      </div>239    </div>240 241    <!-- Sunlight card -->242    <div class="card">243      <div class="row">244        <div>245          <div class="section-title">246            <!-- Sun icon -->247            <svg class="icon" viewBox="0 0 24 24">248              <circle cx="12" cy="12" r="4" fill="#2E6756"/>249              <g stroke="#2E6756" stroke-width="2">250                <line x1="12" y1="1.5" x2="12" y2="5"/>251                <line x1="12" y1="19" x2="12" y2="22.5"/>252                <line x1="1.5" y1="12" x2="5" y2="12"/>253                <line x1="19" y1="12" x2="22.5" y2="12"/>254                <line x1="4.5" y1="4.5" x2="7" y2="7"/>255                <line x1="17" y1="17" x2="19.5" y2="19.5"/>256                <line x1="17" y1="5" x2="19.5" y2="2.5"/>257                <line x1="4.5" y1="19.5" x2="7" y2="17"/>258              </g>259            </svg>260            <span>Sunlight</span>261          </div>262          <div class="section-sub">Indirect light</div>263        </div>264        <svg class="chev" viewBox="0 0 24 24">265          <path d="M9 6l6 6-6 6" fill="none" stroke="#98ADA7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>266        </svg>267      </div>268    </div>269 270    <!-- Dashed: Light Meter -->271    <div class="dashed orange">272      <div class="desc" style="text-align:center; margin-bottom: 28px;">273        Use Light Meter to measure light intensity.274      </div>275      <button class="btn btn-orange" style="width: 100%;">Light Meter</button>276    </div>277 278    <!-- Soil card -->279    <div class="card" style="padding-bottom: 28px;">280      <div class="row">281        <div class="section-title">282          <!-- Leaf icon -->283          <svg class="icon" viewBox="0 0 24 24">284            <path d="M19 3c-8 2-12 7-12 12 0 4 3 6 6 6 5 0 7-4 6-10-2 0-5 1-8 3 2-3 5-7 8-11z" fill="#2E6756"/>285          </svg>286          <span>Soil</span>287        </div>288        <svg class="chev" viewBox="0 0 24 24">289          <path d="M9 6l6 6-6 6" fill="none" stroke="#98ADA7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>290        </svg>291      </div>292 293      <div style="display:flex; gap:32px; margin-top:22px;">294        <div style="min-width: 180px; color:#769488; font-weight:600; font-size:36px;">Type</div>295        <div style="font-size:36px; color:#2E6756;">Chalky, clay, loam, sand</div>296      </div>297      <div style="display:flex; gap:32px; margin-top:18px;">298        <div style="min-width: 180px; color:#769488; font-weight:600; font-size:36px;">Drainage</div>299        <div style="font-size:36px; color:#8EA09A;">Well drained</div>300      </div>301    </div>302 303    <!-- Overlay circular buttons to mimic screenshot -->304    <div class="overlay-btn left">305      <svg viewBox="0 0 24 24" width="48" height="48">306        <path d="M14 6l-6 6 6 6" fill="none" stroke="#6F7A79" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>307      </svg>308    </div>309    <div class="overlay-btn right">310      <svg viewBox="0 0 24 24" width="36" height="36">311        <circle cx="12" cy="5" r="2.5" fill="#6F7A79"/>312        <circle cx="12" cy="12" r="2.5" fill="#6F7A79"/>313        <circle cx="12" cy="19" r="2.5" fill="#6F7A79"/>314      </svg>315    </div>316 317  </div>318</div>319</body>320</html>