GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Care - Learn</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(180deg, #0c4a4a 0%, #08373d 60%, #072f36 100%);14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 20px;20    left: 36px;21    right: 36px;22    height: 48px;23    color: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    opacity: 0.95;28  }29  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 1px; }30  .status-right { display: flex; gap: 18px; align-items: center; }31  .dot {32    width: 12px; height: 12px; border-radius: 50%; background: #dfe7eb; opacity: 0.9;33  }34  .icon { display: inline-flex; align-items: center; justify-content: center; }35 36  /* Header */37  .header {38    position: absolute;39    top: 96px;40    left: 36px;41    right: 36px;42    display: flex;43    align-items: baseline;44    justify-content: space-between;45  }46  .title-care {47    font-size: 86px;48    font-weight: 700;49    color: rgba(214, 230, 235, 0.8);50    letter-spacing: 0.5px;51  }52  .title-learn {53    font-size: 80px;54    font-weight: 800;55    color: #2bd873;56    letter-spacing: 0.5px;57  }58  .top-divider {59    position: absolute;60    top: 216px;61    left: 0;62    width: 100%;63    height: 8px;64    background: linear-gradient(90deg, #25c96a, #21b764);65  }66 67  /* Content area */68  .content {69    position: absolute;70    top: 240px;71    left: 36px;72    right: 36px;73    bottom: 220px;74    overflow: hidden;75  }76  .scroll {77    position: absolute;78    top: 0; left: 0; right: 0; bottom: 0;79    overflow-y: auto;80    padding-bottom: 240px;81  }82 83  .card {84    width: 1008px;85    margin: 28px auto 36px;86    border-radius: 42px;87    position: relative;88    box-shadow: 0 20px 40px rgba(0,0,0,0.35);89    overflow: hidden;90    background: #143c41;91  }92  .card .img {93    width: 100%;94    height: 420px;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex;98    justify-content: center;99    align-items: center;100    color: #757575;101    font-size: 36px;102  }103  .card.large .img { height: 520px; }104  .overlay {105    position: absolute;106    inset: 0;107    border-radius: 42px;108    background: linear-gradient(180deg, rgba(6, 33, 37, 0.35) 0%, rgba(6, 33, 37, 0.55) 50%, rgba(6, 33, 37, 0.75) 100%);109    pointer-events: none;110  }111  .card-content {112    position: absolute;113    left: 40px;114    right: 40px;115    bottom: 34px;116    color: #ffffff;117  }118  .date {119    position: absolute;120    left: 40px;121    top: 34px;122    color: rgba(255,255,255,0.85);123    font-size: 34px;124    letter-spacing: 0.5px;125  }126  .title {127    font-size: 56px;128    font-weight: 800;129    line-height: 1.15;130    text-shadow: 0 2px 4px rgba(0,0,0,0.35);131  }132  .read-more {133    position: absolute;134    right: 40px;135    bottom: 38px;136    color: #23c2f1;137    font-size: 36px;138    font-weight: 600;139  }140 141  /* Add button */142  .add-btn {143    position: absolute;144    left: 50%;145    top: 50%;146    transform: translate(-50%,-50%);147    padding: 26px 46px;148    border-radius: 60px;149    background: linear-gradient(90deg, #2bd873, #53e38a);150    color: #083a3b;151    font-size: 46px;152    font-weight: 800;153    box-shadow: 0 14px 28px rgba(0,0,0,0.35);154    display: inline-flex;155    align-items: center;156    gap: 22px;157  }158  .add-btn svg { width: 42px; height: 42px; }159 160  /* Bottom nav */161  .tabbar {162    position: absolute;163    left: 0; right: 0; bottom: 90px;164    height: 170px;165    background: rgba(8, 35, 43, 0.98);166    border-top-left-radius: 28px;167    border-top-right-radius: 28px;168    box-shadow: 0 -10px 30px rgba(0,0,0,0.35);169    display: flex;170    align-items: center;171    justify-content: space-around;172    padding: 18px 24px 10px;173  }174  .tab {175    width: 180px;176    display: flex;177    flex-direction: column;178    align-items: center;179    gap: 16px;180    color: #cfe4e6;181    font-size: 28px;182    font-weight: 600;183  }184  .tab .label { opacity: 0.85; }185  .tab svg { width: 56px; height: 56px; }186  .active { color: #2bd873; }187  .home-indicator {188    position: absolute;189    bottom: 24px;190    left: 50%;191    transform: translateX(-50%);192    width: 240px;193    height: 10px;194    background: #d8dee3;195    border-radius: 8px;196    opacity: 0.8;197  }198  /* Green dot on Community */199  .community-dot {200    position: absolute;201    width: 16px; height: 16px;202    background: #2bd873;203    border-radius: 50%;204    right: -6px; top: -4px;205    box-shadow: 0 0 0 3px rgba(8,35,43,0.9);206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status Bar -->213  <div class="status-bar">214    <div class="status-left">3:44</div>215    <div class="status-right">216      <div class="dot"></div>217      <div class="dot"></div>218      <div class="dot"></div>219      <div class="dot"></div>220      <!-- WiFi -->221      <div class="icon">222        <svg viewBox="0 0 48 48" fill="none">223          <path d="M8 18c8-8 24-8 32 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>224          <path d="M14 24c6-6 14-6 20 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>225          <path d="M20 30c4-4 8-4 12 0" stroke="#fff" stroke-width="3" stroke-linecap="round"/>226          <circle cx="26" cy="36" r="3" fill="#fff"/>227        </svg>228      </div>229      <!-- Battery -->230      <div class="icon">231        <svg viewBox="0 0 60 36" fill="none">232          <rect x="2" y="6" width="48" height="24" rx="5" stroke="#fff" stroke-width="3"/>233          <rect x="6" y="9" width="40" height="18" rx="3" fill="#fff"/>234          <rect x="52" y="12" width="6" height="12" rx="2" fill="#fff"/>235        </svg>236      </div>237    </div>238  </div>239 240  <!-- Header -->241  <div class="header">242    <div class="title-care">Care</div>243    <div class="title-learn">Learn</div>244  </div>245  <div class="top-divider"></div>246 247  <!-- Content -->248  <div class="content">249    <div class="scroll">250 251      <!-- Card 1 -->252      <div class="card">253        <div class="img">[IMG: String of Bananas plant]</div>254        <div class="overlay"></div>255        <div class="card-content">256          <div class="title">How To Care For Your String of Bananas</div>257        </div>258        <div class="read-more">Read more</div>259      </div>260 261      <!-- Card 2 -->262      <div class="card large">263        <div class="img">[IMG: Bowl of arugula]</div>264        <div class="overlay"></div>265        <div class="date">May 27, 2022</div>266        <div class="card-content">267          <div class="title">How to Grow Arugula</div>268        </div>269        <div class="read-more">Read more</div>270      </div>271 272      <!-- Card 3 -->273      <div class="card large">274        <div class="img">[IMG: Bird of Paradise plant]</div>275        <div class="overlay"></div>276        <div class="date">May 26, 2022</div>277        <div class="card-content">278          <div class="title">How to Grow and Care for A Bird of Paradise</div>279        </div>280        <div class="read-more">Read more</div>281      </div>282 283      <!-- Card 4 with Add -->284      <div class="card">285        <div class="img">[IMG: Tall trees looking up]</div>286        <div class="overlay"></div>287        <button class="add-btn">288          <svg viewBox="0 0 48 48" fill="none">289            <path d="M24 8v32M8 24h32" stroke="#083a3b" stroke-width="6" stroke-linecap="round"/>290          </svg>291          Add292        </button>293      </div>294 295    </div>296  </div>297 298  <!-- Bottom Nav -->299  <div class="tabbar">300    <!-- Home -->301    <div class="tab active">302      <svg viewBox="0 0 64 64">303        <path d="M10 28L32 10l22 18v24H40V38H24v14H10V28z" fill="#2bd873"/>304      </svg>305      <div class="label">Home</div>306    </div>307    <!-- Plants -->308    <div class="tab">309      <svg viewBox="0 0 64 64">310        <path d="M32 38c0-10 8-18 18-18-2 10-10 14-18 14" stroke="#cfe4e6" stroke-width="4" fill="none" stroke-linecap="round"/>311        <path d="M32 38c0-10-8-18-18-18 2 10 10 14 18 14" stroke="#cfe4e6" stroke-width="4" fill="none" stroke-linecap="round"/>312        <path d="M32 38v16" stroke="#cfe4e6" stroke-width="4" stroke-linecap="round"/>313      </svg>314      <div class="label">Plants</div>315    </div>316    <!-- Pod -->317    <div class="tab">318      <svg viewBox="0 0 64 64">319        <path d="M18 40c0-10 6-18 14-18s14 8 14 18v8H18v-8z" fill="none" stroke="#cfe4e6" stroke-width="4" stroke-linejoin="round"/>320        <circle cx="28" cy="36" r="3" fill="#cfe4e6"/>321        <circle cx="36" cy="36" r="3" fill="#cfe4e6"/>322      </svg>323      <div class="label">Pod</div>324    </div>325    <!-- Community -->326    <div class="tab" style="position: relative;">327      <svg viewBox="0 0 64 64">328        <path d="M48 14C32 16 24 28 22 42c8-2 18-8 26-20-2 12-8 22-18 28" stroke="#cfe4e6" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>329      </svg>330      <div class="label">Community</div>331      <span class="community-dot"></span>332    </div>333    <!-- Profile -->334    <div class="tab">335      <svg viewBox="0 0 64 64">336        <circle cx="32" cy="22" r="10" stroke="#cfe4e6" stroke-width="4" fill="none"/>337        <path d="M14 52c6-10 30-10 36 0" stroke="#cfe4e6" stroke-width="4" fill="none" stroke-linecap="round"/>338      </svg>339      <div class="label">Profile</div>340    </div>341  </div>342 343  <div class="home-indicator"></div>344</div>345</body>346</html>