GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>My Plants UI Mock</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    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(180deg, #10393E 0%, #0E2E33 100%);13    border-radius: 0;14  }15  .status-bar {16    position: absolute;17    top: 24px;18    left: 32px;19    right: 32px;20    height: 80px;21    display: flex;22    align-items: center;23    color: #D9F5EE;24  }25  .status-time {26    font-size: 42px;27    font-weight: 700;28    letter-spacing: 0.5px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    gap: 22px;34    align-items: center;35  }36  .dot { width: 20px; height: 20px; background: #D9F5EE; border-radius: 50%; opacity: 0.8; }37  .wifi {38    width: 34px; height: 34px;39  }40  .battery {41    width: 38px; height: 22px; border: 3px solid #D9F5EE; border-radius: 6px; position: relative;42  }43  .battery::after {44    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #D9F5EE; border-radius: 2px;45  }46  .battery-fill {47    position: absolute; left: 3px; top: 3px; bottom: 3px; right: 8px; background: #9EE7C9;48  }49 50  .header-title {51    position: absolute;52    top: 126px;53    left: 60px;54    color: #8DE2C7;55    font-size: 86px;56    font-weight: 700;57  }58  .search-wrap {59    position: absolute;60    top: 120px;61    right: 60px;62    width: 96px; height: 96px;63    background: #154B4D;64    border-radius: 24px;65    display: flex; align-items: center; justify-content: center;66    box-shadow: 0 6px 14px rgba(0,0,0,0.25);67  }68  .search-wrap svg { width: 48px; height: 48px; }69  .stats {70    position: absolute;71    top: 260px;72    left: 60px;73    right: 60px;74    display: flex;75    align-items: baseline;76    color: #B6F2DA;77  }78  .stat { display: flex; align-items: baseline; gap: 14px; }79  .stat .big { font-size: 76px; font-weight: 700; color: #C6FFDD; }80  .stat .label { font-size: 40px; color: #9EE7C9; }81  .stat.right { margin-left: auto; }82  .progress {83    position: absolute;84    top: 336px;85    left: 0;86    width: 1080px; height: 8px;87    background: #2B5053;88  }89  .progress .bar {90    height: 8px; width: 540px; background: #5CD08E;91  }92 93  .tabs {94    position: absolute;95    top: 380px;96    left: 0;97    right: 0;98    padding: 0 60px;99    display: flex; gap: 36px; align-items: center;100  }101  .tab {102    color: #9EE7C9;103    font-size: 40px;104    opacity: 0.85;105  }106  .tab.active {107    background: #58D78C;108    color: #0D2E33;109    padding: 18px 32px;110    border-radius: 40px;111    font-weight: 700;112  }113 114  .plant-card {115    position: absolute;116    top: 520px;117    left: 40px;118    right: 40px;119    height: 420px;120    background: #0F2A33;121    border-radius: 48px;122    display: flex;123    align-items: center;124    padding: 40px;125    box-shadow: 0 18px 36px rgba(0,0,0,0.35);126  }127  .plant-img {128    width: 260px; height: 300px;129    background: #E0E0E0; border: 1px solid #BDBDBD;130    border-radius: 24px;131    display: flex; align-items: center; justify-content: center;132    color: #757575; font-size: 28px; text-align: center;133  }134  .card-content {135    margin-left: 40px; color: #C8F4E3; flex: 1; position: relative;136  }137  .plant-name { font-size: 56px; font-weight: 700; color: #C7FFE1; }138  .plant-sub { font-size: 34px; margin-top: 12px; color: #A9EAD2; }139  .action-row { display: flex; gap: 26px; margin-top: 24px; }140  .circle-btn {141    width: 88px; height: 88px; border-radius: 50%;142    background: #1E4F52;143    border: 3px solid #78E09F;144    display: flex; align-items: center; justify-content: center;145  }146  .circle-btn svg { width: 46px; height: 46px; }147  .water-info {148    margin-top: 30px;149    font-size: 38px; color: #8FE3C6;150  }151  .water-info .accent { color: #9CFFC9; font-weight: 700; }152  .gear {153    position: absolute; top: 0; right: 0;154    width: 80px; height: 80px; background: #143F43;155    border-radius: 20px; display: flex; align-items: center; justify-content: center;156    border: 3px solid #7FE2A6;157  }158  .gear svg { width: 44px; height: 44px; }159 160  .add-btn {161    position: absolute;162    bottom: 300px; left: 50%;163    transform: translateX(-50%);164    width: 360px; height: 120px;165    border-radius: 70px;166    background: linear-gradient(90deg, #73DE8F 0%, #66D1E5 100%);167    display: flex; align-items: center; justify-content: center;168    color: #083036; font-size: 48px; font-weight: 800;169    box-shadow: 0 16px 30px rgba(0,0,0,0.35);170    border: 1px solid rgba(255,255,255,0.08);171  }172  .add-btn svg { width: 44px; height: 44px; margin-right: 18px; }173 174  .bottom-nav {175    position: absolute; bottom: 140px; left: 0; right: 0;176    height: 180px; background: #0B2127;177    display: flex; justify-content: space-around; align-items: center;178    border-top: 1px solid rgba(255,255,255,0.06);179  }180  .nav-item { display: flex; flex-direction: column; align-items: center; color: #CDEFE3; gap: 16px; }181  .nav-item svg { width: 64px; height: 64px; }182  .nav-label { font-size: 34px; color: #BFECDD; }183  .nav-active .nav-label { color: #54D78D; }184  .tiny-dot {185    position: absolute; top: -6px; right: -6px;186    width: 18px; height: 18px; background: #6DE39B; border-radius: 50%;187    border: 2px solid #0B2127;188  }189  .home-indicator {190    position: absolute; bottom: 60px; left: 50%;191    transform: translateX(-50%);192    width: 560px; height: 12px; background: rgba(255,255,255,0.65);193    border-radius: 12px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <div class="status-bar">201    <div class="status-time">1:37</div>202    <div class="status-icons">203      <div class="dot"></div>204      <div class="dot"></div>205      <svg class="wifi" viewBox="0 0 24 24" fill="none">206        <path d="M12 18.5c1 0 1.8.8 1.8 1.8S13 22 12 22s-1.8-.8-1.8-1.8.8-1.8 1.8-1.8z" fill="#D9F5EE"/>207        <path d="M3 9c5-4 13-4 18 0" stroke="#D9F5EE" stroke-width="2" stroke-linecap="round"/>208        <path d="M6 12c3-2.5 9-2.5 12 0" stroke="#D9F5EE" stroke-width="2" stroke-linecap="round"/>209        <path d="M9 15c2-1.5 4-1.5 6 0" stroke="#D9F5EE" stroke-width="2" stroke-linecap="round"/>210      </svg>211      <div class="battery"><div class="battery-fill"></div></div>212    </div>213  </div>214 215  <div class="header-title">My Plants</div>216 217  <div class="search-wrap">218    <svg viewBox="0 0 24 24">219      <circle cx="11" cy="11" r="7" stroke="#8DE2C7" stroke-width="2" fill="none"></circle>220      <path d="M16.5 16.5 L22 22" stroke="#8DE2C7" stroke-width="2" stroke-linecap="round"></path>221    </svg>222  </div>223 224  <div class="stats">225    <div class="stat">226      <div class="big">1</div>227      <div class="label">plant</div>228    </div>229    <div class="stat right">230      <div class="big">0</div>231      <div class="label">rooms</div>232    </div>233  </div>234  <div class="progress"><div class="bar"></div></div>235 236  <div class="tabs">237    <div class="tab">plants</div>238    <div class="tab">Next Watering</div>239    <div class="tab active">Date added</div>240    <div class="tab">Alphabetical</div>241  </div>242 243  <div class="plant-card">244    <div class="plant-img">[IMG: Rosemary plant]</div>245 246    <div class="card-content">247      <div class="gear">248        <svg viewBox="0 0 24 24" fill="none">249          <circle cx="12" cy="12" r="3.5" stroke="#C7FFE1" stroke-width="2"></circle>250          <path d="M12 2 v3 M12 19 v3 M2 12 h3 M19 12 h3 M4.5 4.5 l2.1 2.1 M17.4 17.4 l2.1 2.1 M17.5 4.5 l-2.1 2.1 M6.6 17.4 l-2.1 2.1" stroke="#C7FFE1" stroke-width="1.8" stroke-linecap="round"></path>251        </svg>252      </div>253      <div class="plant-name">Ceecee</div>254      <div class="plant-sub">Salvia rosmarinus</div>255 256      <div class="action-row">257        <div class="circle-btn">258          <svg viewBox="0 0 24 24">259            <path d="M12 3c3.5 3.5 3.5 6.5 0 10-3.5-3.5-3.5-6.5 0-10z" fill="#8FE3C6"></path>260          </svg>261        </div>262        <div class="circle-btn">263          <svg viewBox="0 0 24 24">264            <rect x="3" y="8" width="18" height="8" rx="4" fill="#8FE3C6"></rect>265          </svg>266        </div>267        <div class="circle-btn">268          <svg viewBox="0 0 24 24" fill="none">269            <path d="M7 20l8-8-3-3-8 8v3h3z" fill="#8FE3C6"></path>270            <path d="M13 6l2-2 3 3-2 2-3-3z" fill="#8FE3C6"></path>271          </svg>272        </div>273      </div>274 275      <div class="water-info">276        <span style="display:inline-block; width:20px; height:26px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:#5BD38D; margin-right:12px;"></span>277        water <span class="accent">in 7 days</span>278      </div>279    </div>280  </div>281 282  <div class="add-btn">283    <svg viewBox="0 0 24 24">284      <path d="M12 5v14M5 12h14" stroke="#083036" stroke-width="3" stroke-linecap="round"></path>285    </svg>286    Add287  </div>288 289  <div class="bottom-nav">290    <div class="nav-item">291      <svg viewBox="0 0 24 24" fill="none">292        <path d="M3 12l9-8 9 8v8H3v-8z" stroke="#CDEFE3" stroke-width="2"></path>293      </svg>294      <div class="nav-label">Home</div>295    </div>296    <div class="nav-item nav-active">297      <svg viewBox="0 0 24 24" fill="none">298        <path d="M6 18c0-4 6-13 6-13s6 9 6 13c0 2.5-2 4-6 4s-6-1.5-6-4z" stroke="#54D78D" stroke-width="2"></path>299      </svg>300      <div class="nav-label">Plants</div>301    </div>302    <div class="nav-item">303      <svg viewBox="0 0 24 24" fill="none">304        <path d="M12 3c3 0 6 2.5 6 6 0 3-2 4.5-2 6.5S14 21 12 21s-4-2-4-5.5S6 12 6 9c0-3.5 3-6 6-6z" stroke="#CDEFE3" stroke-width="2"></path>305        <circle cx="12" cy="10" r="2" fill="#CDEFE3"></circle>306      </svg>307      <div class="nav-label">Pod</div>308    </div>309    <div class="nav-item" style="position:relative;">310      <span class="tiny-dot"></span>311      <svg viewBox="0 0 24 24" fill="none">312        <path d="M5 19l6-14 6 14-6-4-6 4z" stroke="#CDEFE3" stroke-width="2" stroke-linejoin="round"></path>313      </svg>314      <div class="nav-label">Community</div>315    </div>316    <div class="nav-item">317      <svg viewBox="0 0 24 24" fill="none">318        <circle cx="12" cy="8" r="4" stroke="#CDEFE3" stroke-width="2"></circle>319        <path d="M4 21c2.4-5 13.6-5 16 0" stroke="#CDEFE3" stroke-width="2" stroke-linecap="round"></path>320      </svg>321      <div class="nav-label">Profile</div>322    </div>323  </div>324 325  <div class="home-indicator"></div>326</div>327</body>328</html>