GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Plant Care UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0e1f27; /* deep navy app background */11    color:#e8f1f5;12  }13 14  /* General */15  .row { display:flex; align-items:center; }16  .spacer { flex:1; }17  .card {18    background:#0f2630;19    border-radius:32px;20    box-shadow: 0 10px 20px rgba(0,0,0,0.35);21  }22  .section-title {23    font-size:56px; font-weight:700; letter-spacing:0.3px;24  }25  .sub { color:#8fb9d6; font-size:40px; }26 27  /* Top status area */28  .statusbar {29    height:120px; padding:20px 36px; font-size:40px; color:#dbe7ef;30  }31  .status-icons .dot {32    width:38px; height:38px; background:#ffffff; border-radius:50%; margin-left:16px;33    border: 2px solid rgba(255,255,255,0.35);34  }35  .status-icons .square {36    width:38px; height:38px; background:#ffffff; margin-left:16px;37    border-radius:8px; border:2px solid rgba(255,255,255,0.35);38  }39  .wifi { width:44px; height:30px; border:3px solid #fff; border-radius:22px; margin-left:20px; }40  .battery { width:22px; height:40px; border:3px solid #fff; border-radius:4px; margin-left:16px; }41 42  /* Header title */43  .header {44    padding:18px 40px 10px 40px;45  }46  .header .title {47    color:#4fe07c; font-weight:800; font-size:64px;48  }49  .mini-dots { margin-top:8px; }50  .mini-dots span {51    display:inline-block; width:18px; height:18px; background:#e8f1f5; border-radius:50%; margin-right:18px;52  }53  .mini-dots span:nth-child(4) { width:10px; height:10px; opacity:0.7; }54 55  .calendar-link { padding:20px 40px; color:#76c1f3; font-size:46px; }56 57  /* Banner */58  .banner {59    margin:26px 40px;60    padding:34px;61    background:linear-gradient(90deg, rgba(44,75,54,0.45), rgba(26,44,33,0.45));62    border-radius:36px;63    border:1px solid rgba(255,255,255,0.08);64  }65  .banner .icon-box {66    width:120px; height:120px; border-radius:24px; margin-right:28px;67    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;68    display:flex; align-items:center; justify-content:center; font-size:26px;69  }70  .banner .text { font-size:44px; line-height:1.3; color:#cde3d1; }71  .banner .text b { color:#f1c26a; }72  .plus {73    width:70px; height:70px; border-radius:16px; margin-left:auto;74    display:flex; align-items:center; justify-content:center;75    border:2px solid rgba(255,255,255,0.5);76  }77  .plus svg { width:40px; height:40px; fill:#f7b35d; }78 79  /* Details card */80  .details {81    margin:26px 40px;82    padding:36px;83  }84  .details .title { font-size:58px; font-weight:800; color:#dbe7ef; }85  .edit { margin-left:auto; color:#76c1f3; font-size:46px; }86  .grid {87    display:grid; grid-template-columns: repeat(3, 1fr);88    gap:32px; margin-top:30px;89  }90  .cell {91    background:#132b35; border-radius:28px; padding:26px;92    border:1px solid rgba(255,255,255,0.06);93  }94  .cell .label { color:#c8dbe6; font-size:38px; margin-top:18px; }95  .cell .value { color:#ffffff; font-size:40px; font-weight:700; margin-top:8px; }96  .cell .icon {97    width:60px; height:60px; border-radius:50%; background:#ffd15a;98    display:flex; align-items:center; justify-content:center; color:#0e1f27; font-weight:800;99  }100  .cell .icon.pot { background:#c78b4b; }101  .cell .icon.leaf { background:#7be089; }102  .cell .icon.star { background:#89b2ff; }103  .cell .icon.sand { background:#e2c7a3; }104 105  /* Diagnose card */106  .diagnose {107    margin:26px 40px; padding:36px;108  }109  .diagnose .title { font-size:54px; font-weight:800; }110  .help { color:#a9c5d3; font-size:38px; margin-top:10px; }111  .option-area { display:flex; gap:36px; margin-top:40px; }112  .option {113    flex:1; background:#132b35; border-radius:28px; padding:26px;114    border:1px solid rgba(255,255,255,0.06);115  }116  .option .img {117    width:100%; height:360px; background:#E0E0E0; border:1px solid #BDBDBD;118    display:flex; align-items:center; justify-content:center; color:#757575; border-radius:20px;119  }120  .option .caption { margin-top:22px; font-size:44px; font-weight:700; color:#dbe7ef; }121  .diagnose-cta {122    margin-top:28px; background:#19323c; border-radius:24px; padding:26px;123    display:flex; align-items:center;124  }125  .diagnose-cta .cta-text { color:#ff7e7e; font-size:44px; font-weight:700; }126  .green-plus {127    width:140px; height:140px; border-radius:70px; margin-left:auto;128    background:linear-gradient(180deg,#4fe07c,#2aa65a);129    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(0,0,0,0.35);130  }131  .green-plus svg { width:70px; height:70px; fill:#0e1f27; }132 133  /* Bottom buttons */134  .bottom-actions { display:flex; gap:30px; margin:40px 40px; }135  .btn {136    flex:1; height:150px; border-radius:80px; display:flex; align-items:center; justify-content:center;137    font-size:48px; font-weight:800;138  }139  .btn.gray { background:#3b4a52; color:#e6eef4; opacity:0.75; }140  .btn.blue { background:linear-gradient(180deg,#4ca7f8,#2a86d9); color:#eaf7ff; }141 142  /* Carbon offset section */143  .carbon {144    margin:30px 40px; border-radius:40px;145    background:linear-gradient(180deg, #2ea65b, #1f8c47);146    padding:36px; color:#ffffff;147  }148  .carbon .label { font-size:50px; font-weight:800; }149  .carbon .img {150    margin-top:20px; height:280px; border-radius:24px;151    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;152    display:flex; align-items:center; justify-content:center;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="statusbar row">161    <div style="font-weight:700;">1:40</div>162    <div class="status-icons row" style="margin-left:22px;">163      <div class="dot"></div>164      <div class="square"></div>165      <div class="dot"></div>166      <div class="dot"></div>167    </div>168    <div class="spacer"></div>169    <div class="wifi"></div>170    <div class="battery"></div>171  </div>172 173  <!-- Header title -->174  <div class="header">175    <div class="title">Ceecee feels watered!</div>176    <div class="mini-dots">177      <span></span><span></span><span></span><span></span>178    </div>179  </div>180 181  <div class="calendar-link">Show calendar</div>182 183  <!-- Promo banner -->184  <div class="banner row">185    <div class="icon-box">[IMG: Plant + Shovel]</div>186    <div class="text">187      Get <b>Fertilizing and Repotting schedules</b><br>to grow your plants!188    </div>189    <div class="plus">190      <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>191    </div>192  </div>193 194  <!-- Details card -->195  <div class="details card">196    <div class="row">197      <div class="title">Details</div>198      <div class="spacer"></div>199      <div class="edit">Edit details</div>200    </div>201 202    <div class="grid">203      <div class="cell">204        <div class="icon">☀</div>205        <div class="value">Direct Sun</div>206        <div class="label"></div>207      </div>208      <div class="cell">209        <div class="icon pot">🪴</div>210        <div class="value">Small (3–6 in)</div>211      </div>212      <div class="cell">213        <div class="icon pot">🧱</div>214        <div class="value">Terracotta</div>215      </div>216      <div class="cell">217        <div class="icon sand">⛰</div>218        <div class="value">Sand</div>219      </div>220      <div class="cell">221        <div class="icon star">✦</div>222        <div class="value">North</div>223      </div>224      <div class="cell">225        <div class="icon leaf">➕</div>226        <div class="value">Nov 24th</div>227      </div>228    </div>229  </div>230 231  <!-- Diagnose card -->232  <div class="diagnose card">233    <div class="section-title">Diagnose plant</div>234    <div class="help">Something wrong with your plant? Use our advanced diagnostic tool to start treatment!</div>235 236    <div class="option-area">237      <div class="option">238        <div class="img">[IMG: Few Leaves Illustration]</div>239        <div class="caption">Few Leaves</div>240      </div>241      <div class="option">242        <div class="img">[IMG: Whole Plant Illustration]</div>243        <div class="caption">Whole Plant</div>244      </div>245    </div>246 247    <div class="diagnose-cta">248      <div class="cta-text">Diagnose now!</div>249      <div class="green-plus">250        <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>251      </div>252    </div>253  </div>254 255  <!-- Bottom actions -->256  <div class="bottom-actions">257    <div class="btn gray">Diagnose</div>258    <div class="btn blue">Water</div>259  </div>260 261  <!-- Carbon offset section -->262  <div class="carbon">263    <div class="label">Carbon offset</div>264    <div class="img">[IMG: Earth & CO2 Graphic]</div>265  </div>266 267</div>268</body>269</html>