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 App UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #f6f9f5;14  }15 16  /* Decorative header */17  .header {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 830px;23    border-bottom-left-radius: 80px;24    border-bottom-right-radius: 80px;25    background: radial-gradient(1200px 800px at 200px 120px, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%),26                radial-gradient(900px 700px at 900px 80px, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%),27                linear-gradient(180deg, #1e8a5e 0%, #37b67a 40%, #7dd593 78%, #a7e7ac 100%);28  }29 30  /* Status bar */31  .status-bar {32    position: absolute;33    top: 12px;34    left: 0;35    width: 100%;36    height: 72px;37    color: #eaf7ee;38    display: flex;39    align-items: center;40    justify-content: space-between;41    padding: 0 38px;42    font-weight: 600;43    font-size: 36px;44    letter-spacing: 0.5px;45  }46  .status-icons {47    display: flex;48    align-items: center;49    gap: 18px;50  }51  .wifi, .battery {52    width: 38px;53    height: 24px;54  }55 56  /* Top selector row */57  .location-row {58    position: absolute;59    top: 110px;60    left: 36px;61    display: flex;62    align-items: center;63    gap: 18px;64    color: #eaf7ee;65  }66  .location-row .label {67    font-size: 44px;68    font-weight: 700;69  }70  .dropdown {71    width: 20px;72    height: 12px;73    border-left: 10px solid transparent;74    border-right: 10px solid transparent;75    border-top: 12px solid #eaf7ee;76    margin-left: 8px;77    margin-top: 8px;78  }79  .leaf-pin {80    width: 54px;81    height: 54px;82    background: rgba(255,255,255,0.18);83    border-radius: 14px;84    display: flex; align-items: center; justify-content: center;85  }86 87  /* Greeting */88  .greeting {89    position: absolute;90    top: 210px;91    left: 36px;92    right: 36px;93    color: #f3fff6;94    font-size: 62px;95    font-weight: 800;96    line-height: 1.2;97  }98 99  /* Feature buttons */100  .feature-row {101    position: absolute;102    top: 380px;103    left: 60px;104    right: 60px;105    display: flex;106    justify-content: space-between;107  }108  .feature {109    width: 220px;110    height: 210px;111    border-radius: 34px;112    color: #fff;113    display: flex;114    flex-direction: column;115    align-items: center;116    justify-content: center;117    text-align: center;118    box-shadow: 0 8px 18px rgba(0,0,0,0.12);119  }120  .f1 { background: linear-gradient(180deg, #f2a145, #c1691b); }121  .f2 { background: linear-gradient(180deg, #c84f8b, #8b3e54); }122  .f3 { background: linear-gradient(180deg, #2c8bd4, #2666a7); }123  .f4 { background: linear-gradient(180deg, #e08bb3, #a05c7e); }124  .feature span { margin-top: 18px; font-weight: 700; font-size: 34px; }125 126  .feature svg { width: 86px; height: 86px; }127 128  /* Content area */129  .content {130    position: absolute;131    top: 740px;132    left: 0;133    right: 0;134    bottom: 0;135    background: #ffffff;136    border-top-left-radius: 60px;137    border-top-right-radius: 60px;138    padding-top: 140px;139  }140 141  /* Search bar */142  .search-bar {143    position: absolute;144    top: -20px;145    left: 60px;146    width: 960px;147    height: 120px;148    background: #f5faf6;149    border: 2px solid #b9e2bf;150    border-radius: 60px;151    display: flex;152    align-items: center;153    padding: 0 40px;154    color: #6b7f71;155    font-size: 40px;156    box-shadow: 0 8px 22px rgba(0,0,0,0.08);157  }158  .search-icon {159    margin-left: auto;160    width: 60px;161    height: 60px;162  }163 164  /* Cards below search */165  .card-grid {166    margin: 60px;167    display: grid;168    grid-template-columns: 1fr 1fr;169    grid-gap: 40px;170  }171  .card {172    height: 330px;173    border-radius: 34px;174    background: #f9eef5;175    display: flex;176    align-items: center;177    justify-content: center;178    color: #945b74;179    font-size: 44px;180    font-weight: 700;181    position: relative;182  }183  .card:nth-child(2) { background: #eef7fb; color: #4d7999; }184 185  /* Modal bottom sheet */186  .backdrop {187    position: absolute;188    left: 0; right: 0; bottom: 0; top: 0;189    background: rgba(0,0,0,0.08);190  }191  .sheet {192    position: absolute;193    left: 0;194    bottom: 0;195    width: 1080px;196    height: 820px;197    background: #ffffff;198    border-top-left-radius: 70px;199    border-top-right-radius: 70px;200    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);201    padding: 60px 60px 40px;202  }203  .sheet h2 {204    text-align: center;205    margin: 0;206    font-size: 56px;207    font-weight: 800;208    color: #333;209  }210  .pill {211    width: 960px;212    height: 140px;213    border-radius: 80px;214    margin: 60px auto 20px;215    background: linear-gradient(90deg, #2dbb71 0%, #66ce78 100%);216    color: #fff;217    display: flex;218    align-items: center;219    padding: 0 50px;220    font-size: 50px;221    font-weight: 800;222    box-shadow: 0 8px 18px rgba(45,187,113,0.35);223  }224  .pill.secondary {225    margin-top: 40px;226  }227  .pill-icon {228    width: 86px;229    height: 86px;230    margin-right: 26px;231    background: rgba(255,255,255,0.22);232    border-radius: 18px;233    display: flex;234    align-items: center;235    justify-content: center;236  }237  .close-circle {238    position: absolute;239    left: 50%;240    transform: translateX(-50%);241    bottom: 28px;242    width: 120px;243    height: 120px;244    border-radius: 60px;245    background: #ececec;246    display: flex;247    align-items: center;248    justify-content: center;249    color: #333;250    font-size: 72px;251    font-weight: 700;252  }253 254  /* Helper SVG colors */255  .icon-stroke { stroke: #ffffff; }256  .icon-stroke-dark { stroke: #2a8557; }257 258</style>259</head>260<body>261<div id="render-target">262 263  <div class="header">264    <!-- Status bar -->265    <div class="status-bar">266      <div>9:25</div>267      <div class="status-icons">268        <!-- Simple cloud indicator -->269        <div style="width:26px;height:20px;border-radius:10px;background:rgba(255,255,255,0.85)"></div>270        <!-- WiFi -->271        <svg class="wifi" viewBox="0 0 24 24" fill="none">272          <path d="M2 8c5-4 15-4 20 0" stroke="#eaf7ee" stroke-width="2" stroke-linecap="round"/>273          <path d="M6 12c3-3 9-3 12 0" stroke="#eaf7ee" stroke-width="2" stroke-linecap="round"/>274          <path d="M10 16c2-2 2-2 4 0" stroke="#eaf7ee" stroke-width="2" stroke-linecap="round"/>275        </svg>276        <!-- Battery -->277        <svg class="battery" viewBox="0 0 36 20" fill="none">278          <rect x="1" y="2" width="28" height="16" rx="3" stroke="#eaf7ee" stroke-width="2"></rect>279          <rect x="3" y="4" width="18" height="12" fill="#eaf7ee"></rect>280          <rect x="30" y="7" width="4" height="6" rx="1" fill="#eaf7ee"></rect>281        </svg>282      </div>283    </div>284 285    <!-- Location selector -->286    <div class="location-row">287      <div class="leaf-pin">288        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">289          <path d="M12 22s7-6 7-11a7 7 0 10-14 0c0 5 7 11 7 11z" stroke="#eaf7ee" stroke-width="2"/>290          <circle cx="12" cy="11" r="2.5" fill="#eaf7ee"/>291        </svg>292      </div>293      <div class="label">World</div>294      <div class="dropdown"></div>295    </div>296 297    <!-- Greeting -->298    <div class="greeting">Good Morning, plant lover!</div>299 300    <!-- Feature buttons -->301    <div class="feature-row">302      <div class="feature f1">303        <svg viewBox="0 0 24 24" fill="none">304          <rect x="3" y="5" width="18" height="16" rx="2" stroke="#ffffff" stroke-width="2"/>305          <line x1="3" y1="9" x2="21" y2="9" stroke="#ffffff" stroke-width="2"/>306          <rect x="9" y="12" width="6" height="5" rx="1" fill="#ffffff"/>307        </svg>308        <span>Calendar</span>309      </div>310      <div class="feature f2">311        <svg viewBox="0 0 24 24" fill="none">312          <path d="M12 21s-6-4.5-8.5-8a5.5 5.5 0 019-6 5.5 5.5 0 019 6C18 16.5 12 21 12 21z" stroke="#ffffff" stroke-width="2"/>313          <path d="M6 12l4 0 2-3 2 6 3-3" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>314        </svg>315        <span>Diagnose</span>316      </div>317      <div class="feature f3">318        <svg viewBox="0 0 24 24" fill="none">319          <path d="M12 4v16" stroke="#ffffff" stroke-width="2"/>320          <path d="M12 7h7l-2 3h-5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>321          <path d="M12 13H5l2 3h5" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>322        </svg>323        <span>Guide</span>324      </div>325      <div class="feature f4">326        <svg viewBox="0 0 24 24" fill="none">327          <circle cx="18" cy="5" r="3" stroke="#ffffff" stroke-width="2"/>328          <circle cx="6" cy="12" r="3" stroke="#ffffff" stroke-width="2"/>329          <circle cx="18" cy="19" r="3" stroke="#ffffff" stroke-width="2"/>330          <path d="M8.8 11l6.5-4" stroke="#ffffff" stroke-width="2"/>331          <path d="M8.8 13l6.5 4" stroke="#ffffff" stroke-width="2"/>332        </svg>333        <span>Share</span>334      </div>335    </div>336  </div>337 338  <!-- Main content -->339  <div class="content">340    <div class="search-bar">341      Search plant342      <svg class="search-icon" viewBox="0 0 24 24" fill="none">343        <circle cx="11" cy="11" r="7" stroke="#2a8557" stroke-width="2"></circle>344        <line x1="16" y1="16" x2="22" y2="22" stroke="#2a8557" stroke-width="2" stroke-linecap="round"></line>345      </svg>346    </div>347 348    <div class="card-grid">349      <div class="card">350        <div>351          <div style="display:flex;justify-content:center;margin-bottom:18px;">352            <svg width="86" height="86" viewBox="0 0 24 24" fill="none">353              <rect x="3" y="5" width="18" height="14" rx="2" stroke="#945b74" stroke-width="2"/>354              <circle cx="12" cy="12" r="3" stroke="#945b74" stroke-width="2"/>355            </svg>356          </div>357          Identify358        </div>359      </div>360      <div class="card">361        <div>362          <div style="display:flex;justify-content:center;margin-bottom:18px;">363            <svg width="86" height="86" viewBox="0 0 24 24" fill="none">364              <rect x="3" y="4" width="14" height="16" rx="2" stroke="#4d7999" stroke-width="2"/>365              <rect x="9" y="7" width="12" height="13" rx="2" stroke="#4d7999" stroke-width="2"/>366            </svg>367          </div>368          Albums369        </div>370      </div>371    </div>372 373    <!-- more placeholder content lower -->374    <div style="padding: 0 60px;">375      <div style="height: 240px; border-radius: 28px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;">[IMG: Plant tips banner]</div>376    </div>377  </div>378 379  <!-- Bottom Sheet Modal -->380  <div class="backdrop"></div>381  <div class="sheet">382    <h2>Identify</h2>383 384    <div class="pill">385      <div class="pill-icon">386        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">387          <rect x="3" y="6" width="18" height="13" rx="2" stroke="#ffffff" stroke-width="2"/>388          <path d="M8 10l2-2 2 2h4" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>389          <circle cx="12" cy="13" r="2.5" fill="#ffffff"></circle>390        </svg>391      </div>392      Take Photo393    </div>394 395    <div class="pill secondary">396      <div class="pill-icon">397        <svg width="48" height="48" viewBox="0 0 24 24" fill="none">398          <rect x="3" y="5" width="18" height="14" rx="2" stroke="#ffffff" stroke-width="2"/>399          <rect x="7" y="9" width="6" height="6" fill="#ffffff"/>400          <path d="M15 9h4v6h-4z" stroke="#ffffff" stroke-width="2"/>401        </svg>402      </div>403      Upload Photo404    </div>405 406    <div class="close-circle">✕</div>407  </div>408 409</div>410</body>411</html>