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;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: linear-gradient(to bottom, #ffffff 0 44%, #0e2f3a 44% 100%);13    color: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 24px;20    left: 32px;21    right: 32px;22    height: 60px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #1a1a1a;27    font-weight: 600;28    font-size: 36px;29  }30  .status-icons {31    display: flex;32    gap: 26px;33    align-items: center;34    color: #1a1a1a;35    font-size: 28px;36  }37  .status-dot {38    width: 28px; height: 28px; border-radius: 50%; background:#f2f2f2; border:1px solid #d0d0d0;39  }40 41  /* Back button */42  .back-btn {43    position: absolute;44    top: 140px;45    left: 48px;46    width: 92px; height: 92px;47    border-radius: 50%;48    background: #e9eef2;49    box-shadow: 0 2px 6px rgba(0,0,0,0.12);50    display: flex; justify-content: center; align-items: center;51  }52  .back-btn svg { width: 40px; height: 40px; }53 54  /* Plant image area */55  .plant-photo {56    position: absolute;57    top: 180px;58    left: 60px;59    width: 960px;60    height: 920px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    display: flex; align-items: center; justify-content: center;64    color: #757575; font-size: 36px; letter-spacing: 0.5px;65    border-radius: 12px;66  }67  .camera-btn {68    position: absolute;69    right: 60px;70    bottom: 320px;71    width: 110px; height: 110px; border-radius: 28px;72    background: #f3f3f3;73    border: 1px solid #d7d7d7;74    display: flex; align-items: center; justify-content: center;75    color: #3b3b3b;76  }77  .camera-btn svg { width: 54px; height: 54px; }78 79  /* Content area */80  .content {81    position: absolute;82    top: 1050px;83    left: 0;84    right: 0;85    bottom: 0;86    padding: 50px 60px 80px 60px;87    color: #e9f5f9;88  }89 90  .title-row {91    display: flex; align-items: center; justify-content: space-between;92  }93  .name-area {94    display: flex; align-items: center; gap: 26px;95  }96  .plant-name {97    font-size: 72px; font-weight: 800; letter-spacing: 0.5px;98  }99  .status-pill {100    background: #2f8b57;101    color: #d9f7e7;102    padding: 18px 28px;103    border-radius: 26px;104    font-size: 36px;105    font-weight: 700;106  }107  .gear-btn {108    width: 70px; height: 70px; border-radius: 12px;109    background: rgba(255,255,255,0.12);110    display: flex; align-items: center; justify-content: center;111  }112  .gear-btn svg { width: 44px; height: 44px; }113 114  .subtitle {115    margin-top: 24px;116    font-size: 38px;117    color: #a9d3e4;118    display: flex; align-items: center; gap: 14px;119  }120  .info-dot {121    width: 30px; height: 30px; border-radius: 50%; background: #2c6a7e; display:flex; align-items:center; justify-content:center;122    font-size: 20px; color: #c7e4ef;123  }124 125  .banner {126    margin-top: 40px;127    background: #1a3f4d;128    border-radius: 28px;129    padding: 28px 32px;130    display: flex; align-items: center; justify-content: space-between;131    color: #d6f0fa;132  }133  .banner .left {134    display: flex; align-items: center; gap: 20px;135    font-size: 38px; font-weight: 700;136  }137  .banner .right { color: #9dd6e8; font-size: 36px; }138  .seed-icon, .book-icon {139    width: 48px; height: 48px; border-radius: 10px; background: #245665; display:flex; align-items:center; justify-content:center;140  }141  .seed-icon svg, .book-icon svg { width: 32px; height: 32px; }142 143  .tabs {144    margin-top: 36px;145    display: flex; gap: 20px; flex-wrap: wrap;146  }147  .tab {148    padding: 26px 34px;149    background: #46c576;150    color: #0a1f26;151    border-radius: 36px;152    font-size: 42px; font-weight: 800;153  }154  .tab.secondary { background: #1e4655; color: #d8f0f6; }155  .tab.gray { background: #2b5766; color: #d8f0f6; }156 157  /* Watering card */158  .card {159    margin-top: 40px;160    background: #0a3644;161    border-radius: 30px;162    padding: 36px;163    color: #e8fbff;164    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);165  }166  .card-title {167    font-size: 54px; font-weight: 800;168  }169  .schedule {170    margin-top: 26px;171    font-size: 40px;172    color: #c5e9f5;173  }174  .actions {175    margin-top: 26px;176    display: flex;177    align-items: center;178    gap: 30px;179    flex-wrap: wrap;180  }181  .plus-circle {182    width: 240px; height: 200px; border-radius: 40px;183    background: linear-gradient(180deg,#5fd38a,#4cb27b);184    display: flex; align-items: center; justify-content: center;185    color: #0a231c;186    font-size: 100px; font-weight: 900;187  }188  .undo-pill {189    width: 330px; height: 120px;190    background: linear-gradient(90deg,#52b9e6,#6dc3ef);191    border-radius: 60px;192    display: flex; align-items: center; justify-content: center;193    gap: 20px;194    font-size: 44px; font-weight: 800;195    color: #08303a;196  }197  .undo-pill .drop {198    width: 36px; height: 36px; border-radius: 50%;199    background: #e6f7ff;200  }201 202  .watered-text {203    margin-top: 16px;204    font-size: 40px;205    color: #6ef2a4;206    font-weight: 800;207  }208  .calendar-link {209    margin-top: 30px;210    font-size: 38px;211    color: #a8d9ea;212    text-decoration: underline;213  }214  .caret {215    position: absolute;216    right: 40px;217    bottom: 40px;218    width: 64px; height: 64px; border-radius: 18px;219    border: 1px solid rgba(255,255,255,0.25);220    display: flex; align-items: center; justify-content: center;221    color: #c3e7f4;222  }223  .caret svg { width: 28px; height: 28px; }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status bar -->230  <div class="status-bar">231    <div>1:38</div>232    <div class="status-icons">233      <div class="status-dot"></div>234      <div class="status-dot"></div>235      <div style="width:30px; height:30px; border-radius:6px; background:#f0f0f0; border:1px solid #d1d1d1;"></div>236      <div style="width:30px; height:30px; border-radius:6px; background:#f0f0f0; border:1px solid #d1d1d1;"></div>237    </div>238  </div>239 240  <!-- Back button -->241  <div class="back-btn">242    <svg viewBox="0 0 24 24" fill="#3b4b55">243      <path d="M15.5 3 L6 12 L15.5 21" stroke="#3b4b55" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>244    </svg>245  </div>246 247  <!-- Plant image -->248  <div class="plant-photo">[IMG: Rosemary plant in black pot]</div>249 250  <!-- Camera button -->251  <div class="camera-btn">252    <svg viewBox="0 0 24 24" fill="#3b3b3b">253      <rect x="3" y="7" width="18" height="14" rx="3" fill="#3b3b3b"/>254      <rect x="8" y="3" width="8" height="5" rx="2" fill="#3b3b3b"/>255      <circle cx="12" cy="14" r="4" fill="#ffffff"/>256    </svg>257  </div>258 259  <!-- Content area -->260  <div class="content">261    <div class="title-row">262      <div class="name-area">263        <div class="plant-name">Ceecee</div>264        <div class="status-pill">Add status</div>265      </div>266      <div class="gear-btn">267        <svg viewBox="0 0 24 24" fill="#cfeaf3">268          <path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm9 3l-2.2.9.3 2.3-2 1.2-1.6-1.7-2.3.7-.9 2.2H9.7l-.9-2.2-2.3-.7-1.6 1.7-2-1.2.3-2.3L1 12l2.2-.9-.3-2.3 2-1.2 1.6 1.7 2.3-.7.9-2.2h2.6l.9 2.2 2.3.7 1.6-1.7 2 1.2-.3 2.3L21 12z"/>269        </svg>270      </div>271    </div>272 273    <div class="subtitle">274      <div>Rosemary - Salvia rosmarinus</div>275      <div class="info-dot">i</div>276    </div>277 278    <div class="banner">279      <div class="left">280        <div class="seed-icon">281          <svg viewBox="0 0 24 24" fill="#bfe8f6"><path d="M12 3c3.5 3 6 6 6 9s-2.5 6-6 6-6-3-6-6 2.5-6 6-9z"/></svg>282        </div>283        <div>Get Weather reminders</div>284      </div>285      <div class="right">for your plants!</div>286    </div>287 288    <div class="banner" style="margin-top:18px;">289      <div class="left">290        <div class="book-icon">291          <svg viewBox="0 0 24 24" fill="#bfe8f6"><path d="M5 3h11a3 3 0 0 1 3 3v13H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm0 5h14"/></svg>292        </div>293        <div>Check Care guides</div>294      </div>295      <div class="right">to grow your plants better!</div>296    </div>297 298    <div class="tabs">299      <div class="tab">Plant Overview</div>300      <div class="tab secondary">Care Guides</div>301      <div class="tab gray">Plant Diary</div>302      <div class="tab gray">Reminders</div>303    </div>304 305    <div class="card">306      <div class="card-title">Watering Schedule</div>307      <div class="schedule">Water in 7 days</div>308      <div class="schedule" style="color:#9fd2e4;">Last watered today</div>309 310      <div class="actions">311        <div class="plus-circle">+</div>312        <div class="undo-pill"><div class="drop"></div>Undo</div>313        <div class="undo-pill"><div class="drop"></div>Undo</div>314      </div>315 316      <div class="watered-text">Ceecee feels watered!</div>317      <div class="calendar-link">Show calendar</div>318 319      <div class="caret">320        <svg viewBox="0 0 24 24" fill="none" stroke="#c3e7f4" stroke-width="2">321          <path d="M6 9l6 6 6-6"/>322        </svg>323      </div>324    </div>325  </div>326 327</div>328</body>329</html>