GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Care Learn UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #063d43 0%, #0a3036 100%);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 16px;23    left: 24px;24    right: 24px;25    height: 60px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.92;30  }31  .status-left { display: flex; align-items: center; gap: 18px; }32  .status-left .time { font-size: 32px; font-weight: 600; letter-spacing: 0.5px; }33  .status-icons { display: flex; align-items: center; gap: 16px; }34  .dot { width: 8px; height: 8px; background: rgba(255,255,255,0.7); border-radius: 50%; }35  .status-right { display: flex; align-items: center; gap: 18px; }36  .icon {37    width: 30px; height: 30px;38  }39  /* Simple icons */40  .wifi svg path { fill: none; stroke: #fff; stroke-width: 3; }41  .battery svg rect, .battery svg path { stroke: #fff; stroke-width: 3; fill: none; }42  .battery svg .level { fill: #fff; stroke: none; }43 44  /* Header */45  .header {46    position: absolute;47    top: 84px;48    left: 40px;49    right: 40px;50    padding-top: 16px;51  }52  .header-row {53    display: flex;54    align-items: baseline;55    justify-content: space-between;56  }57  .title-left {58    font-size: 80px;59    font-weight: 700;60    color: rgba(255,255,255,0.85);61    letter-spacing: 1px;62  }63  .title-right {64    font-size: 72px;65    font-weight: 700;66    color: #2ecc71;67    letter-spacing: 0.8px;68  }69  .segmented-bar {70    margin-top: 22px;71    height: 8px;72    background: rgba(255,255,255,0.12);73    border-radius: 6px;74    overflow: hidden;75    position: relative;76  }77  .segmented-fill {78    position: absolute;79    left: 42%;80    width: 42%;81    height: 100%;82    background: linear-gradient(90deg, #19c36b 0%, #2bd59b 100%);83  }84 85  /* Cards list */86  .cards {87    position: absolute;88    top: 250px;89    left: 40px;90    right: 40px;91    padding-bottom: 300px; /* space above nav */92  }93  .card {94    width: 1000px;95    margin: 36px auto 52px;96    border-radius: 36px;97    overflow: hidden;98    position: relative;99    box-shadow: 0 20px 40px rgba(0,0,0,0.35);100  }101  .card .img {102    width: 100%;103    height: 560px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    display: flex;107    align-items: center;108    justify-content: center;109    color: #757575;110    font-size: 30px;111  }112  .card .overlay {113    position: absolute;114    inset: 0;115    background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.65) 100%);116  }117  .card .content {118    position: absolute;119    left: 32px;120    right: 32px;121    bottom: 26px;122    color: #fff;123  }124  .date {125    font-size: 28px;126    opacity: 0.85;127    margin-bottom: 14px;128  }129  .title {130    font-size: 44px;131    line-height: 54px;132    font-weight: 700;133    margin-bottom: 6px;134  }135  .read-more {136    position: absolute;137    right: 32px;138    bottom: 26px;139    font-size: 30px;140    color: #2ec7ff;141    text-decoration: none;142  }143 144  /* Add pill */145  .add-pill {146    position: absolute;147    left: 360px;148    bottom: 110px;149    padding: 24px 44px;150    border-radius: 60px;151    background: linear-gradient(90deg, #28d46d 0%, #7ff3c6 100%);152    color: #fff;153    font-weight: 700;154    font-size: 36px;155    display: flex;156    align-items: center;157    gap: 18px;158    box-shadow: 0 8px 18px rgba(0,0,0,0.25);159  }160  .add-pill .plus {161    width: 40px; height: 40px;162  }163  .add-pill svg rect { fill: #fff; }164 165  /* Bottom navigation */166  .nav-bar {167    position: absolute;168    left: 0;169    right: 0;170    bottom: 140px;171    height: 180px;172    background: rgba(5,22,26,0.9);173    display: flex;174    justify-content: space-around;175    align-items: center;176    box-shadow: 0 -12px 24px rgba(0,0,0,0.35);177  }178  .nav-item {179    width: 20%;180    height: 100%;181    display: flex;182    flex-direction: column;183    align-items: center;184    justify-content: center;185    gap: 12px;186    color: rgba(255,255,255,0.85);187    font-size: 28px;188  }189  .nav-item .label { font-size: 28px; }190  .nav-item .nav-icon {191    width: 60px; height: 60px;192  }193  .active .nav-icon path, .active .nav-icon rect, .active .nav-icon circle {194    fill: #20d16d; stroke: #20d16d;195  }196  .active .label { color: #20d16d; font-weight: 700; }197  .community-dot {198    position: absolute;199    right: 220px; /* near community icon */200    top: -6px;201    width: 18px; height: 18px;202    background: #20d16d;203    border-radius: 50%;204    border: 2px solid rgba(5,22,26,0.9);205  }206 207  /* Home indicator */208  .home-indicator {209    position: absolute;210    bottom: 50px;211    left: 50%;212    transform: translateX(-50%);213    width: 360px;214    height: 12px;215    background: rgba(255,255,255,0.5);216    border-radius: 6px;217  }218</style>219</head>220<body>221<div id="render-target">222 223  <!-- Status bar -->224  <div class="status-bar">225    <div class="status-left">226      <div class="time">3:42</div>227      <div class="status-icons">228        <span class="dot"></span>229        <span class="dot"></span>230        <span class="dot"></span>231        <span class="dot"></span>232      </div>233    </div>234    <div class="status-right">235      <div class="wifi icon">236        <svg viewBox="0 0 24 24">237          <path d="M2 8c5-4 15-4 20 0"></path>238          <path d="M5 12c4-3 10-3 14 0"></path>239          <path d="M8 16c3-2 5-2 8 0"></path>240          <circle cx="12" cy="20" r="2" fill="#fff"></circle>241        </svg>242      </div>243      <div class="battery icon">244        <svg viewBox="0 0 28 16">245          <rect x="1" y="2" width="22" height="12" rx="2"></rect>246          <rect class="level" x="3" y="4" width="16" height="8" rx="1"></rect>247          <path d="M24 6h3v4h-3" />248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Header -->254  <div class="header">255    <div class="header-row">256      <div class="title-left">Care</div>257      <div class="title-right">Learn</div>258    </div>259    <div class="segmented-bar">260      <div class="segmented-fill"></div>261    </div>262  </div>263 264  <!-- Cards -->265  <div class="cards">266 267    <!-- Card 1 -->268    <div class="card">269      <div class="img">[IMG: Arrowhead Plant Close-up]</div>270      <div class="overlay"></div>271      <div class="content">272        <div class="date">September 02, 2022</div>273        <div class="title">How To Care For Your Arrowhead<br>Plants</div>274      </div>275      <a class="read-more" href="#">Read more</a>276    </div>277 278    <!-- Card 2 -->279    <div class="card">280      <div class="img">[IMG: Formal Hedge Garden]</div>281      <div class="overlay"></div>282      <div class="content">283        <div class="date">September 02, 2022</div>284        <div class="title">5 Best Hedge Plants for your Garden</div>285      </div>286      <a class="read-more" href="#">Read more</a>287    </div>288 289    <!-- Card 3 -->290    <div class="card">291      <div class="img">[IMG: Vertical Garden Shelves]</div>292      <div class="overlay"></div>293      <div class="add-pill">294        <svg class="plus" viewBox="0 0 24 24">295          <rect x="10" y="4" width="4" height="16" rx="2"></rect>296          <rect x="4" y="10" width="16" height="4" rx="2"></rect>297        </svg>298        Add299      </div>300      <div class="content">301        <div class="date">September 02, 2022</div>302        <div class="title">Best Vertical Garden Ideas for 2022</div>303      </div>304    </div>305 306  </div>307 308  <!-- Bottom navigation -->309  <div class="nav-bar">310    <div class="nav-item active">311      <svg class="nav-icon" viewBox="0 0 24 24">312        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z" fill="#20d16d"></path>313      </svg>314      <div class="label">Home</div>315    </div>316    <div class="nav-item">317      <svg class="nav-icon" viewBox="0 0 24 24">318        <path d="M12 21c-5-4-6-8-2-11 2-2 4-2 6 0 4 3 3 7-2 11z" fill="#ffffff"></path>319      </svg>320      <div class="label">Plants</div>321    </div>322    <div class="nav-item">323      <svg class="nav-icon" viewBox="0 0 24 24">324        <path d="M5 20h14l-1-8H6l-1 8z" fill="#ffffff"></path>325        <path d="M9 9c1-2 5-2 6 0" stroke="#ffffff" stroke-width="2" fill="none"></path>326        <circle cx="9" cy="12" r="1.2" fill="#ffffff"></circle>327        <circle cx="15" cy="12" r="1.2" fill="#ffffff"></circle>328      </svg>329      <div class="label">Pod</div>330    </div>331    <div class="nav-item">332      <svg class="nav-icon" viewBox="0 0 24 24">333        <path d="M5 14c5-8 10-8 14 0-3 5-9 7-14 0z" fill="#ffffff"></path>334      </svg>335      <div class="label">Community</div>336    </div>337    <div class="nav-item">338      <svg class="nav-icon" viewBox="0 0 24 24">339        <circle cx="12" cy="8" r="4" fill="#ffffff"></circle>340        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="#ffffff"></path>341      </svg>342      <div class="label">Profile</div>343    </div>344    <div class="community-dot"></div>345  </div>346 347  <!-- Home Indicator -->348  <div class="home-indicator"></div>349</div>350</body>351</html>