GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Plant Care UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0e2b34;13 color: #e9f3f5;14 }15 16 /* Top status bar */17 .status {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 130px;23 padding: 22px 40px 0 40px;24 box-sizing: border-box;25 }26 .status-row {27 display: flex;28 align-items: center;29 justify-content: space-between;30 color: #ffffff;31 font-weight: 600;32 }33 .time { font-size: 42px; letter-spacing: 1px; }34 .status-icons { display: flex; align-items: center; gap: 18px; }35 .status-label {36 margin-top: 10px;37 font-size: 44px;38 color: #74c8d1;39 font-weight: 600;40 }41 42 /* Floating small plus near top */43 .small-plus {44 position: absolute;45 right: 60px;46 top: 120px;47 width: 52px;48 height: 52px;49 border-radius: 50%;50 background: #ff9338;51 display: flex;52 align-items: center;53 justify-content: center;54 box-shadow: 0 6px 16px rgba(0,0,0,0.35);55 }56 .small-plus span { font-size: 40px; line-height: 0; }57 58 /* Banner card */59 .banner {60 position: absolute;61 left: 60px;62 top: 170px;63 width: 960px;64 height: 190px;65 border-radius: 28px;66 background: linear-gradient(90deg, rgba(79,131,97,0.6), rgba(55,79,69,0.7));67 display: flex;68 align-items: center;69 gap: 28px;70 padding: 24px 30px;71 box-sizing: border-box;72 }73 .img-placeholder {74 width: 140px;75 height: 120px;76 background: #E0E0E0;77 border: 1px solid #BDBDBD;78 border-radius: 18px;79 display: flex;80 align-items: center;81 justify-content: center;82 color: #757575;83 font-weight: 700;84 font-size: 24px;85 text-align: center;86 }87 .banner-text {88 font-size: 40px;89 line-height: 1.25;90 }91 .banner-text strong { color: #ffbf5a; }92 93 /* Details card */94 .details-card {95 position: absolute;96 left: 60px;97 top: 400px;98 width: 960px;99 height: 520px;100 border-radius: 36px;101 background: #112f3a;102 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);103 padding: 36px 40px;104 box-sizing: border-box;105 }106 .details-header {107 display: flex; justify-content: space-between; align-items: center;108 }109 .details-title { font-size: 56px; font-weight: 800; }110 .edit-link { font-size: 44px; color: #4fc3ff; }111 .grid {112 margin-top: 26px;113 display: grid;114 grid-template-columns: repeat(3, 1fr);115 grid-row-gap: 44px;116 grid-column-gap: 20px;117 }118 .grid-item {119 display: flex; align-items: center; gap: 18px;120 font-size: 40px;121 }122 .icon {123 width: 64px; height: 64px;124 background: rgba(255,255,255,0.06);125 border-radius: 16px;126 display: flex; align-items: center; justify-content: center;127 }128 129 /* Diagnose section */130 .diagnose-card {131 position: absolute;132 left: 60px;133 top: 960px;134 width: 960px;135 height: 770px;136 border-radius: 36px;137 background: #23293d;138 padding: 34px 40px;139 box-sizing: border-box;140 }141 .diag-top {142 display: grid;143 grid-template-columns: 280px 1fr;144 grid-gap: 24px;145 align-items: center;146 }147 .diag-illustration {148 width: 280px; height: 220px;149 border-radius: 24px;150 background: #E0E0E0;151 border: 1px solid #BDBDBD;152 display: flex; align-items: center; justify-content: center;153 color: #757575; font-weight: 700;154 }155 .diag-title { font-size: 54px; font-weight: 800; }156 .diag-title .accent { color: #ff7a7a; }157 .diag-desc { margin-top: 8px; font-size: 40px; line-height: 1.35; color: #cfd5e6; }158 159 .options {160 margin-top: 34px;161 display: grid;162 grid-template-columns: 1fr 1fr;163 grid-gap: 26px;164 }165 .option {166 height: 300px;167 border-radius: 28px;168 background: #1a2031;169 padding: 24px;170 box-sizing: border-box;171 position: relative;172 }173 .option.selected { outline: 4px solid #39da7f; }174 .check {175 position: absolute; top: 22px; left: 22px;176 width: 48px; height: 48px; border-radius: 50%; background: #2bd67b;177 display: flex; align-items: center; justify-content: center; color: #0a2d1a; font-weight: 900;178 }179 .option-title { position: absolute; bottom: 28px; left: 24px; font-size: 42px; font-weight: 700; }180 .option .img-placeholder { width: 220px; height: 170px; border-radius: 18px; }181 182 .cta {183 margin-top: 26px;184 width: 880px;185 height: 110px;186 border-radius: 28px;187 background: #ffffff;188 color: #ff6f6f;189 display: flex; align-items: center; justify-content: center;190 font-size: 46px; font-weight: 800;191 margin-left: 10px;192 }193 194 /* Floating big plus */195 .big-plus {196 position: absolute;197 top: 1690px;198 left: 470px;199 width: 140px; height: 140px;200 border-radius: 70px;201 background: linear-gradient(180deg,#7be08c,#54c772);202 display: flex; align-items: center; justify-content: center;203 color: #0f3a22; font-size: 84px; font-weight: 900;204 box-shadow: 0 14px 36px rgba(0,0,0,0.35);205 z-index: 3;206 }207 208 /* Bottom pill actions */209 .pills {210 position: absolute;211 left: 60px;212 top: 1780px;213 width: 960px;214 display: flex;215 gap: 34px;216 }217 .pill {218 flex: 1;219 height: 120px;220 border-radius: 44px;221 display: flex; align-items: center; justify-content: center;222 font-size: 46px; font-weight: 800;223 }224 .pill.diagnose { background: #ffe2e2; color: #e04b4b; }225 .pill.undo { background: linear-gradient(90deg,#6dd3ff,#87d9ff); color: #0b3a4d; }226 227 /* Carbon offset card */228 .offset-card {229 position: absolute;230 left: 60px;231 top: 1920px;232 width: 960px;233 height: 420px;234 border-radius: 36px;235 background: linear-gradient(180deg,#51d67a,#39c26c);236 padding: 36px;237 box-sizing: border-box;238 color: #073a24;239 }240 .offset-title { font-size: 94px; font-weight: 900; letter-spacing: 1px; }241 .offset-content {242 margin-top: 18px;243 display: flex; gap: 24px; align-items: center;244 }245 .offset-img {246 width: 220px; height: 220px; border-radius: 20px;247 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;248 display: flex; align-items: center; justify-content: center; font-weight: 700;249 }250 .offset-text { font-size: 40px; color: #0c4b2f; }251 252 /* Simple icons (SVG wrappers use currentColor) */253 .status svg { fill: none; stroke: #ffffff; stroke-width: 4; }254 .icon svg { stroke: #ffd66b; stroke-width: 3; fill: none; }255 256</style>257</head>258<body>259<div id="render-target">260 <!-- Status bar -->261 <div class="status">262 <div class="status-row">263 <div class="time">1:39</div>264 <div class="status-icons">265 <!-- small dots to imitate status icons -->266 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="#ffffff"/></svg>267 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="#ffffff" opacity="0.8"/></svg>268 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="#ffffff" opacity="0.6"/></svg>269 <svg width="26" height="26"><circle cx="13" cy="13" r="10" fill="#ffffff" opacity="0.5"/></svg>270 <!-- WiFi icon -->271 <svg width="48" height="28" viewBox="0 0 48 28">272 <path d="M3 9c9-9 33-9 42 0" stroke="#9ee9ff" stroke-width="4" />273 <path d="M9 15c6-6 24-6 30 0" stroke="#9ee9ff" stroke-width="4" />274 <path d="M15 21c3-3 16-3 18 0" stroke="#9ee9ff" stroke-width="4" />275 <circle cx="24" cy="24" r="3" fill="#9ee9ff"/>276 </svg>277 <!-- battery bolt -->278 <svg width="26" height="26" viewBox="0 0 26 26">279 <rect x="4" y="6" width="18" height="12" stroke="#ffffff" />280 <rect x="22" y="10" width="2" height="4" fill="#ffffff"/>281 </svg>282 </div>283 </div>284 <div class="status-label">Show calendar</div>285 </div>286 287 <!-- top small plus -->288 <div class="small-plus"><span>+</span></div>289 290 <!-- Banner -->291 <div class="banner">292 <div class="img-placeholder">[IMG: Plant + Tools]</div>293 <div class="banner-text">294 Get <strong>Fertilizing and Repotting schedules</strong><br/>295 to grow your plants!296 </div>297 </div>298 299 <!-- Details card -->300 <div class="details-card">301 <div class="details-header">302 <div class="details-title">Details</div>303 <div class="edit-link">Edit details</div>304 </div>305 306 <div class="grid">307 <!-- Direct Sun -->308 <div class="grid-item">309 <div class="icon">310 <svg width="54" height="54" viewBox="0 0 54 54">311 <circle cx="27" cy="27" r="10" fill="#ffd66b"/>312 <path d="M27 6v10M27 38v10M6 27h10M38 27h10M12 12l7 7M35 35l7 7M12 42l7-7M35 19l7-7" />313 </svg>314 </div>315 <div>Direct Sun</div>316 </div>317 318 <!-- Small (3–6 in) -->319 <div class="grid-item">320 <div class="icon">321 <svg width="54" height="54" viewBox="0 0 54 54">322 <path d="M16 18h22l-3 14H19z" fill="none" stroke="#ffd66b"/>323 <rect x="19" y="32" width="16" height="6" stroke="#ffd66b"/>324 </svg>325 </div>326 <div>Small (3–6 in)</div>327 </div>328 329 <!-- Terracotta -->330 <div class="grid-item">331 <div class="icon">332 <svg width="54" height="54" viewBox="0 0 54 54">333 <path d="M15 18h24l-4 18H19z" stroke="#ffd66b"/>334 <line x1="18" y1="24" x2="36" y2="24" stroke="#ffd66b"/>335 </svg>336 </div>337 <div>Terracotta</div>338 </div>339 340 <!-- Sand -->341 <div class="grid-item">342 <div class="icon">343 <svg width="54" height="54" viewBox="0 0 54 54">344 <path d="M10 36c6-4 12-4 17 0s12 4 17 0" stroke="#ffd66b"/>345 <circle cx="20" cy="22" r="3" fill="#ffd66b"/>346 <circle cx="34" cy="25" r="2" fill="#ffd66b"/>347 </svg>348 </div>349 <div>Sand</div>350 </div>351 352 <!-- North -->353 <div class="grid-item">354 <div class="icon">355 <svg width="54" height="54" viewBox="0 0 54 54">356 <path d="M27 10l6 17-6 17-6-17z" stroke="#ffd66b" fill="none"/>357 <line x1="27" y1="10" x2="27" y2="44" stroke="#ffd66b"/>358 </svg>359 </div>360 <div>North</div>361 </div>362 363 <!-- Date -->364 <div class="grid-item">365 <div class="icon">366 <svg width="54" height="54" viewBox="0 0 54 54">367 <rect x="10" y="15" width="34" height="26" stroke="#ffd66b" fill="none"/>368 <line x1="10" y1="22" x2="44" y2="22" stroke="#ffd66b"/>369 <circle cx="20" cy="32" r="3" fill="#ffd66b"/>370 <circle cx="28" cy="32" r="3" fill="#ffd66b"/>371 <circle cx="36" cy="32" r="3" fill="#ffd66b"/>372 </svg>373 </div>374 <div>Nov 24th</div>375 </div>376 </div>377 </div>378 379 <!-- Diagnose card -->380 <div class="diagnose-card">381 <div class="diag-top">382 <div class="diag-illustration">[IMG: Sad Plant]</div>383 <div>384 <div class="diag-title"><span class="accent">Diagnose</span> plant</div>385 <div class="diag-desc">386 Something wrong with your plant? Use our advanced diagnostic tool to start treatment!387 </div>388 </div>389 </div>390 391 <div class="options">392 <div class="option selected">393 <div class="check">✔</div>394 <div class="img-placeholder">[IMG: Few Leaves]</div>395 <div class="option-title">Few Leaves</div>396 </div>397 <div class="option">398 <div class="img-placeholder">[IMG: Whole Plant]</div>399 <div class="option-title">Whole Plant</div>400 </div>401 </div>402 403 <div class="cta">Diagnose now!</div>404 </div>405 406 <!-- Floating big plus -->407 <div class="big-plus">+</div>408 409 <!-- Bottom pills -->410 <div class="pills">411 <div class="pill diagnose">Diagnose</div>412 <div class="pill undo">Undo</div>413 </div>414 415 <!-- Carbon offset card -->416 <div class="offset-card">417 <div class="offset-title">Carbon offset</div>418 <div class="offset-content">419 <div class="offset-img">[IMG: Earth Illustration]</div>420 <div class="offset-text">421 Contribute to offsetting carbon emissions with your plant care activities and make the planet greener.422 </div>423 </div>424 </div>425 426</div>427</body>428</html>