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  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: linear-gradient(180deg, #0c4447 0%, #0b3d41 45%, #0a353a 100%);19    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;20    color: #e8f0f1;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 110px;30    padding: 28px 40px 0 40px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #d8e5e7;35    font-size: 36px;36  }37  .status-left, .status-right {38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .dot {43    width: 14px;44    height: 14px;45    background: #b8c9cc;46    border-radius: 50%;47    opacity: 0.6;48  }49  .mini-icon {50    width: 26px;51    height: 26px;52    border-radius: 50%;53    border: 2px solid #c1d0d3;54    opacity: 0.7;55  }56  .wifi svg, .battery svg {57    display: block;58  }59  .wifi, .battery {60    display: flex;61    align-items: center;62  }63  .battery {64    margin-left: 8px;65  }66 67  /* Header title */68  .header {69    position: absolute;70    top: 110px;71    left: 0;72    right: 0;73    padding: 18px 40px 0 40px;74  }75  .title-row {76    display: flex;77    align-items: baseline;78    justify-content: space-between;79  }80  .title-left {81    font-size: 96px;82    font-weight: 700;83    letter-spacing: 0.5px;84    color: #b9c7cb;85  }86  .title-right {87    font-size: 96px;88    font-weight: 800;89    letter-spacing: 0.5px;90    color: #28d280;91  }92  .accent-line {93    margin-top: 18px;94    height: 12px;95    background: linear-gradient(90deg, #1fd490 0%, #27e0a6 60%, #3de7a6 100%);96    border-radius: 8px;97  }98 99  /* Content list */100  .content {101    position: absolute;102    top: 250px;103    left: 0;104    right: 0;105    padding: 0 38px 280px 38px;106  }107 108  .card {109    position: relative;110    width: 1004px; /* 1080 - 2*38px */111    height: 600px;112    margin: 36px auto;113    border-radius: 40px;114    overflow: hidden;115    box-shadow: 0 18px 40px rgba(0,0,0,0.35);116  }117 118  .img-box {119    width: 100%;120    height: 100%;121    background: #E0E0E0;122    border: 1px solid #BDBDBD;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #757575;127    font-size: 34px;128  }129 130  .overlay {131    position: absolute;132    inset: 0;133    background: linear-gradient(180deg, rgba(6,20,22,0.15) 0%, rgba(6,20,22,0.35) 35%, rgba(6,20,22,0.55) 100%);134    pointer-events: none;135  }136 137  .card-content {138    position: absolute;139    left: 40px;140    right: 40px;141    bottom: 36px;142  }143  .date {144    font-size: 32px;145    color: #d9e7e9;146    opacity: 0.95;147    margin-bottom: 12px;148  }149  .card-title {150    font-size: 56px;151    font-weight: 800;152    line-height: 1.15;153    margin: 0 0 10px 0;154    color: #ffffff;155    text-shadow: 0 2px 4px rgba(0,0,0,0.25);156  }157  .read-more {158    position: absolute;159    right: 40px;160    bottom: 34px;161    font-size: 34px;162    color: #1fd3ff;163    font-weight: 600;164  }165 166  /* Add button on third card */167  .add-btn {168    position: absolute;169    right: 340px;170    bottom: 230px;171    padding: 22px 40px;172    background: linear-gradient(90deg, #27d280 0%, #2dd3a3 100%);173    color: #ffffff;174    font-size: 40px;175    font-weight: 700;176    border-radius: 50px;177    box-shadow: 0 12px 24px rgba(0,0,0,0.3);178    display: flex;179    align-items: center;180    gap: 18px;181  }182  .add-btn svg {183    width: 36px;184    height: 36px;185  }186 187  /* Bottom navigation */188  .nav {189    position: absolute;190    left: 0;191    right: 0;192    bottom: 120px;193    height: 190px;194    background: rgba(6, 28, 32, 0.85);195    border-top-left-radius: 36px;196    border-top-right-radius: 36px;197    display: flex;198    justify-content: space-around;199    align-items: center;200    padding: 18px 0;201    backdrop-filter: blur(2px);202  }203  .nav-item {204    width: 180px;205    display: flex;206    flex-direction: column;207    align-items: center;208    color: #c9d6d9;209    font-size: 30px;210    gap: 14px;211  }212  .nav-item .icon {213    width: 64px;214    height: 64px;215    border-radius: 16px;216    display: flex;217    align-items: center;218    justify-content: center;219  }220  .nav-item.active {221    color: #2ad881;222    font-weight: 700;223  }224  .nav-item.active .icon {225    background: #123c35;226  }227  .nav-item .icon svg {228    width: 44px;229    height: 44px;230    fill: none;231    stroke: #c9d6d9;232    stroke-width: 3;233  }234  .nav-item.active .icon svg {235    stroke: #2ad881;236  }237 238  /* Home indicator */239  .home-indicator {240    position: absolute;241    left: 50%;242    transform: translateX(-50%);243    bottom: 40px;244    width: 260px;245    height: 14px;246    background: #d2d9db;247    border-radius: 10px;248    opacity: 0.8;249  }250</style>251</head>252<body>253<div id="render-target">254 255  <!-- Status bar -->256  <div class="status-bar">257    <div class="status-left">258      <div style="font-weight: 700;">3:43</div>259      <div class="mini-icon"></div>260      <div class="mini-icon"></div>261      <div class="mini-icon"></div>262      <div style="font-weight:700; opacity:0.7;">N</div>263      <div class="dot"></div>264    </div>265    <div class="status-right">266      <div class="wifi">267        <svg width="46" height="30" viewBox="0 0 46 30">268          <path d="M23 24c1.9 0 3.5 1.6 3.5 3.5S24.9 31 23 31s-3.5-1.6-3.5-3.5S21.1 24 23 24z" fill="#cfe0e3"/>269          <path d="M8 10c8-6 22-6 30 0" stroke="#cfe0e3" stroke-width="3" fill="none" stroke-linecap="round"/>270          <path d="M13 15c6-4 14-4 20 0" stroke="#cfe0e3" stroke-width="3" fill="none" stroke-linecap="round"/>271          <path d="M18 20c3-2 7-2 10 0" stroke="#cfe0e3" stroke-width="3" fill="none" stroke-linecap="round"/>272        </svg>273      </div>274      <div class="battery">275        <svg width="50" height="26" viewBox="0 0 50 26">276          <rect x="2" y="4" width="42" height="18" rx="4" ry="4" stroke="#cfe0e3" stroke-width="3" fill="none"/>277          <rect x="6" y="7" width="31" height="12" rx="2" fill="#cfe0e3"/>278          <rect x="45" y="8" width="4" height="10" rx="2" fill="#cfe0e3"/>279        </svg>280      </div>281    </div>282  </div>283 284  <!-- Header titles -->285  <div class="header">286    <div class="title-row">287      <div class="title-left">Care</div>288      <div class="title-right">Learn</div>289    </div>290    <div class="accent-line"></div>291  </div>292 293  <!-- Content cards -->294  <div class="content">295 296    <!-- Card 1 -->297    <div class="card">298      <div class="img-box">[IMG: Bonsai by window, woman spraying water]</div>299      <div class="overlay"></div>300      <div class="card-content">301        <div class="date">September 02, 2022</div>302        <h2 class="card-title">How to Grow a Bonsai Tree? A Beginner's Guide</h2>303      </div>304      <div class="read-more">Read more</div>305    </div>306 307    <!-- Card 2 -->308    <div class="card">309      <div class="img-box">[IMG: Hands holding garden soil]</div>310      <div class="overlay"></div>311      <div class="card-content">312        <div class="date">September 02, 2022</div>313        <h2 class="card-title">How to Prepare Garden Soil</h2>314      </div>315      <div class="read-more">Read more</div>316    </div>317 318    <!-- Card 3 -->319    <div class="card">320      <div class="img-box">[IMG: Clay pebbles for hydroponics]</div>321      <div class="overlay"></div>322      <div class="card-content">323        <div class="date">November 12, 2022</div>324        <h2 class="card-title">What Is Leca and How To Use It</h2>325      </div>326      <div class="add-btn">327        <svg viewBox="0 0 24 24">328          <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>329        </svg>330        Add331      </div>332    </div>333 334  </div>335 336  <!-- Bottom navigation -->337  <div class="nav">338    <div class="nav-item active">339      <div class="icon">340        <svg viewBox="0 0 24 24">341          <path d="M3 11l9-8 9 8M5 10v10h14V10" stroke-linecap="round" stroke-linejoin="round"/>342        </svg>343      </div>344      Home345    </div>346    <div class="nav-item">347      <div class="icon">348        <svg viewBox="0 0 24 24">349          <path d="M12 2v20M4 8h16M6 14h12" stroke-linecap="round"/>350        </svg>351      </div>352      Plants353    </div>354    <div class="nav-item">355      <div class="icon">356        <svg viewBox="0 0 24 24">357          <path d="M12 3c4 0 7 3 7 7s-3 7-7 7-7-3-7-7 3-7 7-7z" stroke-linecap="round"/>358          <path d="M12 6v8M8 10h8" stroke-linecap="round"/>359        </svg>360      </div>361      Pod362    </div>363    <div class="nav-item">364      <div class="icon">365        <svg viewBox="0 0 24 24">366          <path d="M12 2l3 5-3 5-3-5 3-5zM5 21c2-5 12-5 14 0" stroke-linecap="round" stroke-linejoin="round"/>367        </svg>368      </div>369      Community370    </div>371    <div class="nav-item">372      <div class="icon">373        <svg viewBox="0 0 24 24">374          <circle cx="12" cy="8" r="4"/>375          <path d="M4 22c0-4 4-7 8-7s8 3 8 7" stroke-linecap="round" fill="none"/>376        </svg>377      </div>378      Profile379    </div>380  </div>381 382  <div class="home-indicator"></div>383</div>384</body>385</html>