GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F8F8F8;14 border-radius: 40px;15 box-shadow: 0 2px 6px rgba(0,0,0,0.08);16 color: #0C2318;17 }18 19 .screen-padding { padding: 32px 40px 0 40px; }20 21 /* Header */22 .count { font-size: 34px; color: #2A3B32; opacity: 0.75; margin-top: 24px; }23 .title { font-size: 78px; font-weight: 700; margin: 10px 0 24px 0; }24 25 .tabs-wrap {26 position: relative;27 height: 140px;28 margin-top: 12px;29 }30 .tabs {31 background: #FFFFFF;32 border-radius: 40px;33 height: 120px;34 display: flex;35 align-items: center;36 padding: 0 22px;37 box-shadow: 0 12px 24px rgba(0,0,0,0.06);38 position: relative;39 z-index: 2;40 }41 .tab {42 flex: 1;43 text-align: center;44 font-size: 40px;45 font-weight: 600;46 color: #23362C;47 padding: 24px 0;48 border-radius: 32px;49 }50 .tab.active {51 background: #E6F5EA;52 color: #24A163;53 border: 2px solid #CDEBD7;54 }55 56 /* Decorative leaf placeholders */57 .leaf-left, .leaf-right {58 position: absolute;59 top: -6px;60 z-index: 1;61 background: #E0E0E0;62 border: 1px solid #BDBDBD;63 color: #757575;64 display: flex;65 align-items: center;66 justify-content: center;67 font-size: 28px;68 }69 .leaf-left { left: 0; width: 220px; height: 120px; border-radius: 24px; }70 .leaf-right { right: 0; width: 280px; height: 140px; border-radius: 24px; }71 72 /* Section headings */73 .section { margin-top: 64px; }74 .section-head {75 display: flex;76 justify-content: space-between;77 align-items: center;78 padding-right: 8px;79 }80 .section-title { font-size: 52px; font-weight: 700; }81 .section-link { font-size: 42px; color: #26A269; font-weight: 700; }82 83 .subheading { margin-top: 20px; font-size: 38px; color: #39493F; opacity: 0.8; }84 85 /* Card */86 .card {87 margin-top: 24px;88 background: #FFFFFF;89 border-radius: 40px;90 box-shadow: 0 10px 26px rgba(0,0,0,0.08);91 overflow: hidden;92 }93 .card-header {94 display: flex;95 align-items: center;96 padding: 36px 32px;97 }98 .avatar {99 width: 140px;100 height: 140px;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 border-radius: 50%;104 display: flex;105 align-items: center;106 justify-content: center;107 color: #757575;108 font-size: 26px;109 margin-right: 28px;110 }111 .plant-info .name { font-size: 52px; font-weight: 800; color: #0E2A1D; }112 .plant-info .meta { font-size: 34px; color: #395046; opacity: 0.8; margin-top: 6px; }113 114 .menu-dots {115 margin-left: auto;116 display: flex;117 gap: 10px;118 padding-right: 8px;119 }120 .dot {121 width: 12px; height: 12px; background: #C9CFCC; border-radius: 50%;122 }123 124 .divider { height: 2px; background: #EFEFEF; }125 126 .chips-row {127 display: flex;128 align-items: center;129 gap: 22px;130 padding: 28px 32px;131 position: relative;132 }133 134 .chip {135 width: 100px; height: 100px;136 border-radius: 50%;137 background: linear-gradient(180deg,#2EC072,#1EA658);138 border: 6px solid #D3F2E2;139 display: flex; align-items: center; justify-content: center;140 }141 .chevron {142 margin-left: auto;143 width: 54px; height: 54px;144 border-radius: 14px;145 border: 2px solid #DDE4E0;146 display: flex; align-items: center; justify-content: center;147 }148 149 .timeline {150 position: relative;151 padding: 18px 0;152 }153 .timeline:before {154 content: "";155 position: absolute;156 left: 64px;157 top: 0;158 bottom: 0;159 border-left: 3px dashed #E6E9E7;160 }161 .item {162 display: flex;163 align-items: center;164 padding: 26px 32px;165 }166 .bullet {167 width: 56px; height: 56px; border-radius: 50%;168 border: 6px solid #E8ECEA;169 margin-left: 24px; margin-right: 24px;170 background: #FFFFFF;171 }172 .item-icon {173 width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;174 margin-right: 24px;175 }176 .item-label { font-size: 46px; font-weight: 700; color: #0E2A1D; }177 .row-divider { height: 2px; background: #EEE; margin: 0 32px; }178 179 /* Bottom nav */180 .tabbar {181 position: absolute;182 left: 0; right: 0; bottom: 0;183 height: 220px;184 background: #FFFFFF;185 border-top: 1px solid #EAEAEA;186 display: flex;187 align-items: center;188 justify-content: space-around;189 padding-bottom: 24px;190 }191 .nav-item {192 width: 160px;193 display: flex;194 flex-direction: column;195 align-items: center;196 gap: 12px;197 color: #8F9A95;198 font-size: 34px;199 }200 .nav-item.active { color: #24A163; font-weight: 700; }201 .nav-icon {202 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;203 }204 205 .scan-wrap {206 position: absolute; left: 50%; transform: translateX(-50%);207 bottom: 92px;208 width: 168px; height: 168px;209 border-radius: 50%;210 background: linear-gradient(180deg,#37D07A,#24A163);211 box-shadow: 0 16px 32px rgba(36,161,99,0.35);212 display: flex; align-items: center; justify-content: center;213 border: 8px solid #CFEFDB;214 }215</style>216</head>217<body>218<div id="render-target">219 <div class="screen-padding">220 <div class="count">1 Plants</div>221 <div class="title">My Garden</div>222 223 <div class="tabs-wrap">224 <div class="tabs">225 <div class="tab">All Plants</div>226 <div class="tab active">Reminders</div>227 </div>228 <div class="leaf-left">[IMG: Leaf Illustration]</div>229 <div class="leaf-right">[IMG: Leaf Illustration]</div>230 </div>231 232 <div class="section">233 <div class="section-head">234 <div class="section-title">Reminders</div>235 <div class="section-link">Set Reminder</div>236 </div>237 <div class="subheading">Upcoming</div>238 239 <div class="card">240 <!-- Header -->241 <div class="card-header">242 <div class="avatar">[IMG: Foxtail Fern]</div>243 <div class="plant-info">244 <div class="name">Foxtail Fern</div>245 <div class="meta">3 reminder set</div>246 </div>247 <div class="menu-dots">248 <span class="dot"></span><span class="dot"></span><span class="dot"></span>249 </div>250 </div>251 <div class="divider"></div>252 253 <!-- Chips -->254 <div class="chips-row">255 <div class="chip">256 <svg width="48" height="48" viewBox="0 0 24 24">257 <path d="M12 2C8 7 7 9 7 12c0 3.866 3.134 7 5 7s5-3.134 5-7c0-3-1-5-5-10z" fill="#FFFFFF"/>258 </svg>259 </div>260 <div class="chip">261 <svg width="48" height="48" viewBox="0 0 24 24">262 <circle cx="12" cy="12" r="4" fill="#FFFFFF"></circle>263 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>264 </svg>265 </div>266 <div class="chip">267 <svg width="48" height="48" viewBox="0 0 24 24">268 <path d="M15 3h-6l1 2h4l1-2zM9 7h6v9a3 3 0 0 1-3 3h-3v-1l-2-2v-6l2-3z" fill="#FFFFFF"/>269 </svg>270 </div>271 <div class="chevron">272 <svg width="28" height="28" viewBox="0 0 24 24">273 <path d="M7 14l5-5 5 5" stroke="#9FA8A3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>274 </svg>275 </div>276 </div>277 278 <div class="divider"></div>279 280 <!-- Timeline items -->281 <div class="timeline">282 <div class="item">283 <div class="bullet"></div>284 <div class="item-icon">285 <svg width="42" height="42" viewBox="0 0 24 24">286 <path d="M12 2C8 7 7 9 7 12c0 3.866 3.134 7 5 7s5-3.134 5-7c0-3-1-5-5-10z" fill="#0E2A1D"/>287 </svg>288 </div>289 <div class="item-label">Watering</div>290 </div>291 <div class="row-divider"></div>292 293 <div class="item">294 <div class="bullet"></div>295 <div class="item-icon">296 <svg width="42" height="42" viewBox="0 0 24 24">297 <circle cx="12" cy="12" r="4" fill="#0E2A1D"></circle>298 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1" stroke="#0E2A1D" stroke-width="2" stroke-linecap="round"/>299 </svg>300 </div>301 <div class="item-label">Rotating</div>302 </div>303 <div class="row-divider"></div>304 305 <div class="item">306 <div class="bullet"></div>307 <div class="item-icon">308 <svg width="42" height="42" viewBox="0 0 24 24">309 <path d="M15 3h-6l1 2h4l1-2zM9 7h6v9a3 3 0 0 1-3 3h-3v-1l-2-2v-6l2-3z" fill="#0E2A1D"/>310 </svg>311 </div>312 <div class="item-label">Misting</div>313 </div>314 <div class="row-divider" style="margin-bottom: 24px;"></div>315 </div>316 </div>317 </div>318 </div>319 320 <!-- Bottom Navigation -->321 <div class="tabbar">322 <div class="nav-item">323 <div class="nav-icon">324 <svg width="48" height="48" viewBox="0 0 24 24">325 <path d="M4 10l8-6 8 6v10h-6v-6H10v6H4z" fill="#B8BFBB"/>326 </svg>327 </div>328 <div>Home</div>329 </div>330 331 <div class="nav-item">332 <div class="nav-icon">333 <svg width="48" height="48" viewBox="0 0 24 24">334 <path d="M12 2l6 4v6c0 4-3 7-6 8-3-1-6-4-6-8V6l6-4z" fill="#B8BFBB"/>335 <path d="M12 8v6" stroke="#FFFFFF" stroke-width="2"/>336 </svg>337 </div>338 <div>Diagnose</div>339 </div>340 341 <div class="scan-wrap">342 <svg width="88" height="88" viewBox="0 0 24 24">343 <path d="M4 8V5h3M16 5h3v3M20 16v3h-3M7 20H4v-3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" fill="none"/>344 <rect x="7" y="7" width="10" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>345 </svg>346 </div>347 348 <div class="nav-item active">349 <div class="nav-icon">350 <svg width="48" height="48" viewBox="0 0 24 24">351 <path d="M12 22c-4-2-7-6-7-10a7 7 0 0 1 14 0c0 4-3 8-7 10z" fill="#24A163"/>352 <path d="M9 13c2 0 3-2 3-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>353 </svg>354 </div>355 <div>My Garden</div>356 </div>357 358 <div class="nav-item">359 <div class="nav-icon">360 <svg width="48" height="48" viewBox="0 0 24 24">361 <circle cx="12" cy="8" r="4" fill="#B8BFBB"/>362 <path d="M4 20c1.5-4 5-6 8-6s6.5 2 8 6" fill="#B8BFBB"/>363 </svg>364 </div>365 <div>Profile</div>366 </div>367 </div>368</div>369</body>370</html>