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>Learn - Garden App</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #073f43 0%, #06363d 40%, #053039 100%);15  }16 17  /* Status bar */18  .status-bar {19    height: 92px;20    padding: 18px 36px;21    color: #ffffff;22    font-weight: 600;23    font-size: 34px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    opacity: 0.95;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 24px;33  }34  .status-icons svg { width: 40px; height: 40px; fill: none; stroke: #ffffff; stroke-width: 4; opacity: 0.9; }35 36  /* Header tabs */37  .header {38    padding: 12px 40px 24px 40px;39  }40  .tab-row {41    display: flex;42    justify-content: space-between;43    align-items: flex-end;44  }45  .tab {46    font-size: 76px;47    font-weight: 700;48    letter-spacing: 0.5px;49  }50  .tab.care { color: #93a8ad; }51  .tab.learn { color: #2fd07a; }52  .tab-indicator {53    margin-top: 18px;54    height: 8px;55    background: #23c46c;56    width: 65%;57    margin-left: auto;58    border-radius: 4px;59  }60 61  /* Card list */62  .content {63    padding: 24px 32px 240px 32px;64  }65  .card {66    width: 1016px;67    height: 560px;68    margin: 28px auto 50px auto;69    position: relative;70    border-radius: 44px;71    overflow: hidden;72    box-shadow: 0 18px 28px rgba(0,0,0,0.35);73  }74  .card .image {75    position: absolute;76    inset: 0;77    background: #E0E0E0;78    border: 1px solid #BDBDBD;79    display: flex;80    justify-content: center;81    align-items: center;82    color: #757575;83    font-size: 32px;84    text-align: center;85    padding: 0 40px;86  }87  .card .scrim {88    position: absolute;89    inset: 0;90    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.55) 100%);91  }92  .card .text {93    position: absolute;94    left: 40px;95    right: 40px;96    bottom: 36px;97    color: #ffffff;98  }99  .date {100    font-size: 32px;101    opacity: 0.85;102    margin-bottom: 14px;103  }104  .title {105    font-size: 56px;106    font-weight: 800;107    line-height: 1.15;108    margin-bottom: 22px;109  }110  .read-more {111    position: absolute;112    right: 40px;113    bottom: 34px;114    color: #64d3e8;115    font-size: 36px;116    font-weight: 700;117  }118 119  /* Add pill on fourth banner */120  .add-pill {121    position: absolute;122    left: 50%;123    top: 50%;124    transform: translate(-50%, -35%);125    width: 360px;126    height: 120px;127    border-radius: 60px;128    background: linear-gradient(90deg, #20c768 0%, #44da7f 100%);129    display: flex;130    align-items: center;131    justify-content: center;132    color: #ffffff;133    font-size: 48px;134    font-weight: 800;135    box-shadow: 0 10px 20px rgba(16, 170, 88, 0.5);136  }137  .add-pill svg { width: 42px; height: 42px; margin-right: 14px; fill: none; stroke: #ffffff; stroke-width: 8; }138 139  /* Bottom navigation */140  .bottom-nav {141    position: absolute;142    left: 0;143    right: 0;144    bottom: 120px;145    height: 190px;146    background: #0a2a31;147    border-top-left-radius: 36px;148    border-top-right-radius: 36px;149    box-shadow: 0 -12px 20px rgba(0,0,0,0.35);150    display: flex;151    align-items: center;152    justify-content: space-around;153    padding: 12px 24px 0 24px;154  }155  .nav-item {156    width: 180px;157    text-align: center;158    color: #9fb3b9;159    font-size: 32px;160    font-weight: 700;161    position: relative;162  }163  .nav-item.active { color: #27d279; }164  .nav-item svg {165    width: 80px; height: 80px;166    margin-bottom: 6px;167  }168  .nav-item.active svg path,169  .nav-item.active svg circle,170  .nav-item.active svg rect {171    fill: #27d279;172    stroke: #27d279;173  }174  .nav-item svg path,175  .nav-item svg circle,176  .nav-item svg rect {177    fill: #8fa3a8;178    stroke: #8fa3a8;179  }180  .notif-dot {181    position: absolute;182    top: 6px;183    left: 50%;184    transform: translateX(-50%);185    width: 16px;186    height: 16px;187    border-radius: 50%;188    background: #27d279;189  }190 191  /* Home indicator */192  .home-indicator {193    position: absolute;194    bottom: 40px;195    left: 50%;196    transform: translateX(-50%);197    width: 420px;198    height: 14px;199    background: rgba(255,255,255,0.6);200    border-radius: 7px;201  }202</style>203</head>204<body>205<div id="render-target">206 207  <!-- Status bar -->208  <div class="status-bar">209    <div>3:43</div>210    <div class="status-icons">211      <!-- Simple dot placeholders to mimic tiny status icons -->212      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>213      <!-- WiFi icon -->214      <svg viewBox="0 0 24 24">215        <path d="M2 9c5-4 15-4 20 0"/>216        <path d="M6 13c3-3 9-3 12 0"/>217        <path d="M10 17c2-2 4-2 6 0"/>218        <circle cx="12" cy="20" r="1.8" fill="#ffffff" stroke="none"/>219      </svg>220      <!-- Battery icon -->221      <svg viewBox="0 0 28 24">222        <rect x="1" y="6" width="22" height="12" rx="2"></rect>223        <rect x="24" y="9" width="3" height="6" rx="1"></rect>224        <rect x="3" y="8" width="16" height="8" rx="1" fill="#ffffff" stroke="none"></rect>225      </svg>226    </div>227  </div>228 229  <!-- Header tabs -->230  <div class="header">231    <div class="tab-row">232      <div class="tab care">Care</div>233      <div class="tab learn">Learn</div>234    </div>235    <div class="tab-indicator"></div>236  </div>237 238  <!-- Content cards -->239  <div class="content">240 241    <!-- Card 1 -->242    <div class="card">243      <div class="image">[IMG: Tall green hedge rows in a garden]</div>244      <div class="scrim"></div>245      <div class="text">246        <div class="date">September 02, 2022</div>247        <div class="title">5 Best Hedge Plants for your Garden</div>248      </div>249      <div class="read-more">Read more</div>250    </div>251 252    <!-- Card 2 -->253    <div class="card">254      <div class="image">[IMG: Tiered wooden planters with assorted herbs]</div>255      <div class="scrim"></div>256      <div class="text">257        <div class="date">September 02, 2022</div>258        <div class="title">Best Vertical Garden Ideas for 2022</div>259      </div>260      <div class="read-more">Read more</div>261    </div>262 263    <!-- Card 3 -->264    <div class="card">265      <div class="image">[IMG: Snake plants in pots on display]</div>266      <div class="scrim"></div>267      <div class="text">268        <div class="date">September 02, 2022</div>269        <div class="title">Snake Plant Benefits - All You Need to Know</div>270      </div>271      <div class="read-more">Read more</div>272    </div>273 274    <!-- Card 4 with add pill -->275    <div class="card">276      <div class="image">[IMG: Woman spraying plant near window in apartment]</div>277      <div class="scrim"></div>278      <div class="add-pill">279        <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16"/></svg>280        <span>+ Add</span>281      </div>282    </div>283 284  </div>285 286  <!-- Bottom navigation -->287  <div class="bottom-nav">288    <div class="nav-item active">289      <svg viewBox="0 0 100 100">290        <path d="M10 45 L50 15 L90 45 V85 H10 Z"></path>291        <rect x="42" y="60" width="16" height="25" rx="2"></rect>292      </svg>293      Home294    </div>295    <div class="nav-item">296      <svg viewBox="0 0 100 100">297        <path d="M50 70 C35 55 38 40 50 35 C62 40 65 55 50 70 Z"></path>298        <rect x="47" y="70" width="6" height="15" rx="3"></rect>299      </svg>300      Plants301    </div>302    <div class="nav-item">303      <svg viewBox="0 0 100 100">304        <circle cx="50" cy="48" r="22"></circle>305        <path d="M32 72 C38 65 62 65 68 72 V82 H32 Z"></path>306      </svg>307      Pod308    </div>309    <div class="nav-item">310      <div class="notif-dot"></div>311      <svg viewBox="0 0 100 100">312        <path d="M30 70 C30 50 55 38 70 30 C68 50 46 72 30 70 Z"></path>313      </svg>314      Community315    </div>316    <div class="nav-item">317      <svg viewBox="0 0 100 100">318        <circle cx="50" cy="38" r="18"></circle>319        <path d="M22 80 C28 60 72 60 78 80 V88 H22 Z"></path>320      </svg>321      Profile322    </div>323  </div>324 325  <!-- Home indicator -->326  <div class="home-indicator"></div>327 328</div>329</body>330</html>