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.0">6<title>Care / Learn UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #fff;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: linear-gradient(180deg, #0b3f43 0%, #0b3a3f 100%);21  }22 23  /* Status bar */24  .status-bar {25    height: 80px;26    padding: 18px 36px 0 36px;27    font-weight: 600;28    font-size: 34px;29    color: #dfeef1;30    display: flex;31    align-items: center;32    justify-content: space-between;33    opacity: 0.92;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 26px;44  }45  .icon {46    display: inline-flex;47    align-items: center;48    justify-content: center;49  }50  .icon svg {51    width: 34px;52    height: 34px;53    fill: #cde3e7;54  }55 56  /* Header tabs */57  .header {58    padding: 6px 48px 0 48px;59  }60  .title-row {61    display: flex;62    align-items: baseline;63    justify-content: space-between;64    padding: 6px 4px;65  }66  .title-care {67    font-size: 96px;68    font-weight: 700;69    letter-spacing: 0.5px;70    color: #b8c9cc;71  }72  .title-learn {73    font-size: 88px;74    font-weight: 700;75    color: #25c677;76  }77  .progress-track {78    width: 984px;79    height: 10px;80    background: #2a5960;81    border-radius: 6px;82    margin-top: 22px;83    position: relative;84    overflow: hidden;85  }86  .progress-active {87    position: absolute;88    right: 0;89    width: 340px;90    height: 10px;91    background: #1ec27a;92    border-radius: 6px;93  }94 95  /* List container */96  .content {97    padding: 36px 48px 0 48px;98  }99 100  .card {101    position: relative;102    width: 984px;103    height: 560px;104    border-radius: 40px;105    overflow: hidden;106    margin-bottom: 48px;107    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);108  }109 110  /* Image placeholder as required */111  .card .img {112    position: absolute;113    inset: 0;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #757575;120    font-size: 42px;121    text-align: center;122    padding: 0 24px;123  }124 125  /* Gradient overlay for readability */126  .card::after {127    content: "";128    position: absolute;129    inset: 0;130    background: linear-gradient(180deg, rgba(8,49,54,0.2) 0%, rgba(8,49,54,0.55) 100%);131  }132 133  .card .meta {134    position: absolute;135    left: 36px;136    top: 340px;137    color: rgba(255,255,255,0.85);138    font-size: 32px;139    font-weight: 500;140    letter-spacing: 0.3px;141  }142 143  .card .title {144    position: absolute;145    left: 36px;146    bottom: 86px;147    right: 240px;148    font-size: 56px;149    line-height: 64px;150    font-weight: 800;151    color: #fff;152  }153 154  .card .readmore {155    position: absolute;156    right: 36px;157    bottom: 40px;158    font-size: 34px;159    font-weight: 700;160    color: #1cb6e4;161  }162 163  /* Floating Add button */164  .add-btn {165    position: absolute;166    left: 50%;167    transform: translateX(-50%);168    top: 1768px; /* visually centered over the last card */169    width: 386px;170    height: 120px;171    border-radius: 60px;172    background: linear-gradient(90deg, #66ef74, #2ec2b0);173    display: flex;174    align-items: center;175    justify-content: center;176    gap: 22px;177    box-shadow: 0 18px 36px rgba(0,0,0,0.35);178    color: #fff;179    font-size: 44px;180    font-weight: 800;181  }182  .add-btn .plus {183    width: 46px;184    height: 46px;185    border: 4px solid #fff;186    border-radius: 50%;187    position: relative;188  }189  .add-btn .plus::before, .add-btn .plus::after {190    content: "";191    position: absolute;192    background: #fff;193    border-radius: 2px;194  }195  .add-btn .plus::before {196    width: 22px; height: 6px; left: 50%; top: 50%; transform: translate(-50%, -50%);197  }198  .add-btn .plus::after {199    width: 6px; height: 22px; left: 50%; top: 50%; transform: translate(-50%, -50%);200  }201 202  /* Bottom navigation bar */203  .bottom-nav {204    position: absolute;205    left: 0;206    bottom: 96px;207    width: 100%;208    height: 200px;209    background: #0c2f35;210    border-top: 1px solid rgba(255,255,255,0.06);211    display: flex;212    align-items: center;213    justify-content: space-around;214    padding: 0 10px;215    box-shadow: 0 -12px 30px rgba(0,0,0,0.25);216  }217  .nav-item {218    width: 160px;219    display: flex;220    flex-direction: column;221    align-items: center;222    gap: 12px;223    color: #b7c7c9;224    font-size: 30px;225    font-weight: 700;226  }227  .nav-item .ni {228    width: 68px;229    height: 68px;230  }231  .nav-item.active {232    color: #34dd86;233  }234  .nav-item.active .ni svg {235    fill: #34dd86;236  }237  .nav-item .ni svg {238    width: 68px;239    height: 68px;240    fill: #9fb1b4;241  }242  .indicator-dot {243    position: absolute;244    top: 48px;245    right: 220px;246    width: 16px;247    height: 16px;248    background: #2fe686;249    border-radius: 50%;250    box-shadow: 0 0 0 4px rgba(47,230,134,0.18);251  }252 253  /* Home label highlight color */254  .home-label {255    color: #34dd86;256  }257 258  /* Gesture bar */259  .gesture-bar {260    position: absolute;261    bottom: 28px;262    left: 50%;263    transform: translateX(-50%);264    width: 360px;265    height: 12px;266    background: rgba(255,255,255,0.7);267    border-radius: 6px;268  }269</style>270</head>271<body>272<div id="render-target">273 274  <!-- Status bar -->275  <div class="status-bar">276    <div class="status-left">277      <div>3:44</div>278      <span class="icon">279        <svg viewBox="0 0 24 24"><path d="M12 4c4.4 0 8 3.6 8 8h-2c0-3.3-2.7-6-6-6s-6 2.7-6 6H4c0-4.4 3.6-8 8-8zm0 6c2.2 0 4 1.8 4 4h-2c0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.2 1.8-4 4-4z"/></svg>280      </span>281      <span class="icon">282        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>283      </span>284    </div>285    <div class="status-right">286      <span class="icon">287        <svg viewBox="0 0 24 24"><path d="M2 9c5.5-5.5 14.5-5.5 20 0l-2 2c-4.4-4.4-11.6-4.4-16 0L2 9zm4 4c3.3-3.3 8.7-3.3 12 0l-2 2c-2.2-2.2-5.8-2.2-8 0l-2-2zm4 4c1.1-1.1 2.9-1.1 4 0l-2 2-2-2z"/></svg>288      </span>289      <span class="icon">290        <svg viewBox="0 0 24 24"><path d="M3 8h16c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2zm16 5V11h2v2h-2z"/></svg>291      </span>292    </div>293  </div>294 295  <!-- Header -->296  <div class="header">297    <div class="title-row">298      <div class="title-care">Care</div>299      <div class="title-learn">Learn</div>300    </div>301    <div class="progress-track">302      <div class="progress-active"></div>303    </div>304  </div>305 306  <!-- Content -->307  <div class="content">308 309    <!-- Card 1 -->310    <div class="card">311      <div class="img">[IMG: Clay Pebbles / LECA close-up]</div>312      <div class="meta">November 12, 2022</div>313      <div class="title">What Is Leca and How To Use It</div>314      <div class="readmore">Read more</div>315    </div>316 317    <!-- Card 2 -->318    <div class="card">319      <div class="img">[IMG: String of Bananas Plant by Window]</div>320      <div class="meta">November 04, 2022</div>321      <div class="title">How To Care For Your String of Bananas</div>322      <div class="readmore">Read more</div>323    </div>324 325    <!-- Card 3 -->326    <div class="card">327      <div class="img">[IMG: Arugula Greens in Wooden Bowl]</div>328      <div class="meta">May 27, 2022</div>329      <div class="title">How to Grow Arugula</div>330      <div class="readmore">Read more</div>331    </div>332 333  </div>334 335  <!-- Floating Add Button -->336  <div class="add-btn">337    <span class="plus"></span>338    <span>+ Add</span>339  </div>340 341  <!-- Bottom Navigation -->342  <div class="bottom-nav">343    <div class="nav-item active">344      <div class="ni">345        <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>346      </div>347      <div class="home-label">Home</div>348    </div>349    <div class="nav-item">350      <div class="ni">351        <svg viewBox="0 0 24 24"><path d="M12 3c4 3 5 6 5 9-2 1-4 1-5 4-1-3-3-3-5-4 0-3 1-6 5-9z"/></svg>352      </div>353      <div>Plants</div>354    </div>355    <div class="nav-item">356      <div class="ni">357        <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6v7c0 2-1.5 3-3 3H9c-1.5 0-3-1-3-3V9a6 6 0 016-6zm-2 8h4v2H10v-2zm2-5a3 3 0 100 6 3 3 0 000-6z"/></svg>358      </div>359      <div>Pod</div>360    </div>361    <div class="nav-item">362      <div class="ni">363        <svg viewBox="0 0 24 24"><path d="M12 2c5.4 0 8 4.2 8 7.6 0 2.6-1.4 4.4-3.3 5.7-2.1 1.4-4.7 2-6.7 5.7-2-3.7-4.6-4.3-6.7-5.7C5.4 14 4 12.2 4 9.6 4 6.2 6.6 2 12 2z"/></svg>364      </div>365      <div>Community</div>366    </div>367    <div class="nav-item">368      <div class="ni">369        <svg viewBox="0 0 24 24"><path d="M12 6a4 4 0 110 8 4 4 0 010-8zm-7 12c0-3.3 4.7-5 7-5s7 1.7 7 5v2H5v-2z"/></svg>370      </div>371      <div>Profile</div>372    </div>373    <div class="indicator-dot"></div>374  </div>375 376  <!-- Gesture bar -->377  <div class="gesture-bar"></div>378 379</div>380</body>381</html>