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 Watering UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0b2f3a;14    color: #eaf7fa;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #ffffff;25    font-size: 40px;26    letter-spacing: 0.5px;27  }28  .sb-left { display: flex; align-items: center; gap: 18px; }29  .sb-dots span {30    width: 16px; height: 16px; background: #ffffff; border-radius: 50%; display: inline-block; opacity: 0.85;31    margin-right: 12px;32  }33  .sb-right { display: flex; align-items: center; gap: 20px; }34  .icon-wifi, .icon-battery {35    width: 46px; height: 26px; position: relative;36  }37  .icon-wifi:before, .icon-wifi:after {38    content: ""; position: absolute; border: 2px solid #fff; border-radius: 20px; left: 0; right: 0; margin: auto;39  }40  .icon-wifi:before { width: 40px; height: 24px; top: 0; border-top-color:#fff; border-left-color:#fff; border-right-color:#fff; border-bottom: none; }41  .icon-wifi:after { width: 20px; height: 10px; top: 8px; border-top-color:#fff; border-left-color:#fff; border-right-color:#fff; border-bottom: none; }42  .icon-battery {43    border: 2px solid #fff; border-radius: 4px; padding: 2px 4px; box-sizing: border-box;44  }45  .icon-battery .level { background:#fff; height: 100%; width: 70%; }46  .icon-battery:after {47    content:""; position:absolute; right:-8px; top:6px; width:6px; height:14px; background:#fff; border-radius:2px;48  }49 50  /* Header controls */51  .header {52    position: relative;53    height: 150px;54    padding: 0 40px;55  }56  .back-btn {57    width: 120px; height: 120px; border-radius: 60px;58    background: rgba(255,255,255,0.12);59    display: flex; align-items: center; justify-content: center;60  }61  .back-btn svg { width: 44px; height: 44px; fill: none; stroke: #ffffff; stroke-width: 8; }62  .update-btn {63    position: absolute; right: 40px; top: 0;64    width: 420px; height: 120px; border-radius: 64px;65    background: linear-gradient(90deg, #8ae271, #59c7c9);66    display: flex; align-items: center; justify-content: center;67    color: #0b2f3a; font-weight: 700; font-size: 56px;68  }69 70  /* Plant image card */71  .image-card {72    width: 560px; height: 560px; border-radius: 48px;73    background: #f2f5f7; margin: 16px auto 26px auto;74    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;75  }76  .img-placeholder {77    width: 86%; height: 86%; background:#E0E0E0; border:1px solid #BDBDBD;78    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 40px; text-align: center; border-radius: 8px;79  }80  .close-btn {81    position: absolute; right: 18px; top: 18px;82    width: 86px; height: 86px; border-radius: 43px; background: rgba(0,0,0,0.1);83    display:flex; align-items:center; justify-content:center;84  }85  .close-btn svg { width: 40px; height: 40px; stroke:#5b6b73; stroke-width:8; fill:none; }86 87  /* Calendar card */88  .calendar-card {89    width: 1000px; margin: 10px auto 20px auto;90    background: #103a46; border-radius: 36px; padding: 28px 34px 40px 34px;91    box-sizing: border-box;92  }93  .cal-header {94    display: flex; align-items: center; justify-content: space-between; padding: 10px 8px;95  }96  .cal-title { font-size: 52px; font-weight: 700; color: #eaf7fa; }97  .chev { width: 70px; height: 70px; display:flex; align-items:center; justify-content:center; }98  .chev svg { width: 36px; height: 36px; stroke:#cfe4ea; stroke-width:8; fill:none; }99 100  .dow {101    display: grid; grid-template-columns: repeat(7, 1fr);102    text-align: center; margin-top: 8px; font-size: 40px; color: #9ec0cb;103  }104  .cal-grid {105    display: grid; grid-template-columns: repeat(7, 1fr);106    grid-row-gap: 40px; grid-column-gap: 0px; margin-top: 16px;107  }108  .day {109    height: 110px; display:flex; align-items:center; justify-content:center; font-size: 48px; color:#eaf7fa;110  }111  .day.blank { opacity: 0.2; }112  .bubble {113    width: 126px; height: 126px; border-radius: 63px; background: #5fde88; color:#0b2f3a;114    display:flex; align-items:center; justify-content:center; font-weight: 700;115  }116 117  /* Info row */118  .last-watered {119    width: 100%; padding: 22px 50px; box-sizing: border-box;120    display:flex; align-items:center; justify-content: space-between; margin-top: 6px;121  }122  .last-watered .label { font-size: 54px; color:#eaf7fa; }123  .pill {124    padding: 20px 36px; height: 96px; border-radius: 22px; background:#2e6071; display:flex; align-items:center; font-size: 44px;125  }126 127  /* Fields */128  .field-group { padding: 18px 50px; }129  .label { color:#97c1cc; font-size: 42px; margin: 10px 0 16px 0; }130  .select {131    height: 120px; border-radius: 60px; background:#0f3541; border:1px solid #22434e;132    padding: 0 34px; display:flex; align-items:center; justify-content: space-between; color:#eaf7fa; font-size: 46px;133  }134  .select svg { width: 34px; height: 34px; stroke:#cfe4ea; stroke-width:8; fill:none; }135 136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="sb-left">144      <div>1:39</div>145      <div class="sb-dots">146        <span></span><span></span><span></span>147      </div>148    </div>149    <div class="sb-right">150      <div class="icon-wifi"></div>151      <div class="icon-battery"><div class="level"></div></div>152    </div>153  </div>154 155  <!-- Header with back and update -->156  <div class="header">157    <div class="back-btn">158      <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20"/></svg>159    </div>160    <div class="update-btn">Update</div>161  </div>162 163  <!-- Plant image card -->164  <div class="image-card">165    <div class="img-placeholder">[IMG: Rosemary plant in pot]</div>166    <div class="close-btn">167      <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"/></svg>168    </div>169  </div>170 171  <!-- Calendar -->172  <div class="calendar-card">173    <div class="cal-header">174      <div class="chev"><svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20"/></svg></div>175      <div class="cal-title">November 2023</div>176      <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 4 L17 12 L9 20"/></svg></div>177    </div>178 179    <div class="dow">180      <div>S</div><div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div>181    </div>182 183    <div class="cal-grid">184      <div class="day blank"></div>185      <div class="day blank"></div>186      <div class="day blank"></div>187 188      <div class="day">1</div>189      <div class="day">2</div>190      <div class="day">3</div>191      <div class="day">4</div>192 193      <div class="day">5</div>194      <div class="day">6</div>195      <div class="day">7</div>196      <div class="day">8</div>197      <div class="day">9</div>198      <div class="day">10</div>199      <div class="day">11</div>200 201      <div class="day">12</div>202      <div class="day">13</div>203      <div class="day">14</div>204      <div class="day">15</div>205      <div class="day">16</div>206      <div class="day">17</div>207      <div class="day">18</div>208 209      <div class="day">19</div>210      <div class="day">20</div>211      <div class="day">21</div>212      <div class="day">22</div>213      <div class="day">23</div>214      <div class="day"><div class="bubble">24</div></div>215      <div class="day">25</div>216 217      <div class="day">26</div>218      <div class="day">27</div>219      <div class="day">28</div>220      <div class="day">29</div>221      <div class="day">30</div>222      <div class="day blank"></div>223      <div class="day blank"></div>224    </div>225  </div>226 227  <!-- Last watered -->228  <div class="last-watered">229    <div class="label">Last watered:</div>230    <div class="pill">24 Nov 2023</div>231  </div>232 233  <!-- Fields -->234  <div class="field-group">235    <div class="label">Watering schedule</div>236    <div class="select">237      <span>Every 7 days</span>238      <svg viewBox="0 0 24 24"><path d="M8 4 L16 12 L8 20"/></svg>239    </div>240  </div>241 242  <div class="field-group">243    <div class="label">Pot size</div>244    <div class="select">245      <span>Small (3–6 in)</span>246      <svg viewBox="0 0 24 24"><path d="M8 4 L16 12 L8 20"/></svg>247    </div>248  </div>249 250</div>251</body>252</html>