GD-ML/AndroidCode
13.4k
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>Plant Care - Wild pansy</title>7<style>8 /* Reset and base */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }11 * { box-sizing: border-box; }12 13 /* Render target */14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 color: #1f2b37;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 24px;27 left: 36px;28 right: 36px;29 height: 42px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #ffffff;34 z-index: 5;35 font-weight: 600;36 letter-spacing: 0.5px;37 }38 .status-right { display: flex; align-items: center; gap: 18px; }39 .icon { display: inline-flex; align-items: center; justify-content: center; }40 41 /* Hero image */42 .hero {43 width: 100%;44 height: 430px;45 position: relative;46 }47 .img-placeholder {48 width: 100%;49 height: 100%;50 background: #E0E0E0;51 border-bottom: 1px solid #BDBDBD;52 display: flex;53 align-items: center;54 justify-content: center;55 color: #757575;56 font-weight: 600;57 letter-spacing: 0.2px;58 }59 60 /* Close button over hero */61 .close-fab {62 position: absolute;63 top: 150px;64 left: 36px;65 width: 86px;66 height: 86px;67 border-radius: 50%;68 background: rgba(255,255,255,0.95);69 border: 1px solid #dfe4ea;70 display: flex;71 align-items: center;72 justify-content: center;73 color: #7a8a9a;74 font-size: 44px;75 z-index: 6;76 backdrop-filter: blur(2px);77 }78 79 /* Content panel */80 .panel {81 position: absolute;82 top: 360px;83 left: 0;84 right: 0;85 background: #ffffff;86 border-top-left-radius: 36px;87 border-top-right-radius: 36px;88 padding: 36px 48px 120px;89 box-shadow: 0 -6px 16px rgba(0,0,0,0.06);90 }91 92 .title-row {93 display: flex;94 align-items: flex-start;95 justify-content: space-between;96 gap: 18px;97 margin-top: 18px;98 }99 .title {100 font-size: 56px;101 line-height: 1.1;102 font-weight: 800;103 color: #222b32;104 margin: 0 0 8px 0;105 }106 .subtitle {107 margin: 0;108 color: #8a97ad;109 font-size: 34px;110 font-weight: 600;111 }112 .gear-btn {113 width: 74px;114 height: 74px;115 border-radius: 50%;116 background: #e7fbf3;117 color: #11b98b;118 display: flex;119 align-items: center;120 justify-content: center;121 font-size: 40px;122 }123 124 /* Tabs */125 .tabs {126 margin-top: 28px;127 width: 980px;128 max-width: 100%;129 }130 .tabs-inner {131 background: linear-gradient(90deg, #e7fbf3, #ecfbf7);132 border-radius: 64px;133 padding: 10px;134 display: flex;135 gap: 10px;136 height: 100px;137 }138 .tab {139 flex: 1;140 border-radius: 52px;141 display: flex;142 align-items: center;143 justify-content: center;144 color: #13b78d;145 font-weight: 800;146 font-size: 36px;147 }148 .tab.active {149 background: linear-gradient(90deg, #0ed6a6, #00b88d);150 color: #ffffff;151 box-shadow: 0 6px 14px rgba(0, 184, 141, 0.25);152 }153 154 /* Gradient bordered card (Watering calculator) */155 .grad-card-wrap {156 position: relative;157 margin-top: 42px;158 border-radius: 28px;159 padding: 8px;160 background: linear-gradient(90deg, #7a38f5, #ff6ba6);161 }162 .grad-card {163 background: #f3f5f7;164 border-radius: 22px;165 padding: 28px 32px;166 display: flex;167 align-items: center;168 justify-content: space-between;169 gap: 20px;170 }171 .new-pill {172 position: absolute;173 top: -18px;174 left: 24px;175 padding: 10px 22px;176 background: linear-gradient(90deg, #8a46ff, #ff5ea8);177 color: #ffffff;178 font-weight: 800;179 border-radius: 18px;180 font-size: 28px;181 box-shadow: 0 4px 10px rgba(138,70,255,0.25);182 }183 .calc-left {184 display: flex;185 align-items: center;186 gap: 22px;187 }188 .icon-sq {189 width: 90px;190 height: 90px;191 border-radius: 22px;192 background: #ffffff;193 display: flex;194 align-items: center;195 justify-content: center;196 color: #10b78d;197 border: 1px solid #e2e6ea;198 }199 .calc-title {200 font-size: 40px;201 font-weight: 700;202 }203 .select-link {204 color: #11b98b;205 font-weight: 800;206 display: flex;207 align-items: center;208 gap: 10px;209 font-size: 34px;210 }211 212 /* Info row */213 .info-row {214 margin-top: 36px;215 display: flex;216 align-items: center;217 gap: 20px;218 color: #667489;219 font-size: 34px;220 line-height: 1.3;221 }222 .circle-info {223 width: 56px;224 height: 56px;225 border-radius: 50%;226 background: #eef2f6;227 display: flex;228 align-items: center;229 justify-content: center;230 color: #8fa0b1;231 font-weight: 800;232 border: 1px solid #e2e6ea;233 }234 235 /* Care card */236 .care-card {237 margin-top: 28px;238 background: #eef1f5;239 border-radius: 28px;240 padding: 32px;241 }242 .care-header {243 display: flex;244 align-items: flex-start;245 justify-content: space-between;246 gap: 18px;247 }248 .care-left {249 display: flex;250 align-items: center;251 gap: 24px;252 }253 .icon-sq-outline {254 width: 96px;255 height: 96px;256 border-radius: 20px;257 border: 3px solid #10b78d;258 color: #10b78d;259 display: flex;260 align-items: center;261 justify-content: center;262 background: #e9fbf4;263 }264 .care-title {265 font-size: 42px;266 font-weight: 800;267 margin: 0;268 }269 .care-sub {270 color: #11b98b;271 font-weight: 800;272 margin-top: 6px;273 font-size: 30px;274 }275 .tips-link {276 color: #7b8897;277 font-weight: 800;278 display: flex;279 align-items: center;280 gap: 8px;281 font-size: 30px;282 }283 .care-body {284 margin-top: 22px;285 color: #2a3642;286 font-size: 33px;287 line-height: 1.55;288 }289 290 /* Optional care section */291 .section-title {292 margin-top: 42px;293 font-size: 48px;294 font-weight: 900;295 }296 .section-sub {297 color: #9aa9bf;298 font-size: 34px;299 margin-top: 10px;300 font-weight: 600;301 }302 303 /* Additional small card (Cut) */304 .mini-card {305 margin-top: 22px;306 background: #f3f5f7;307 border-radius: 28px;308 padding: 28px;309 display: flex;310 align-items: center;311 justify-content: space-between;312 }313 .mini-left {314 display: flex;315 align-items: center;316 gap: 22px;317 }318 .icon-sq-light {319 width: 90px;320 height: 90px;321 border-radius: 20px;322 border: 1px solid #dfe5ea;323 background: #ffffff;324 color: #98a4b3;325 display: flex;326 align-items: center;327 justify-content: center;328 }329 .mini-title {330 font-size: 40px;331 font-weight: 800;332 }333 .settings-small {334 width: 64px;335 height: 64px;336 border-radius: 50%;337 background: #e8fbf2;338 color: #10b78d;339 display: flex;340 align-items: center;341 justify-content: center;342 font-size: 34px;343 }344 345 /* Gesture bar */346 .gesture {347 position: absolute;348 left: 50%;349 transform: translateX(-50%);350 bottom: 20px;351 width: 360px;352 height: 12px;353 background: #0a0a0a;354 border-radius: 8px;355 opacity: 0.85;356 }357</style>358</head>359<body>360<div id="render-target">361 <!-- Status bar -->362 <div class="status-bar">363 <div class="status-left">12:06</div>364 <div class="status-right">365 <!-- Simple mail and sun icons as placeholders -->366 <div class="icon" style="opacity:.95;">367 <svg width="40" height="28" viewBox="0 0 24 14" fill="none">368 <rect x="1" y="2" width="22" height="10" rx="2" stroke="white" stroke-width="2"/>369 <path d="M2 3l10 6 10-6" stroke="white" stroke-width="2"/>370 </svg>371 </div>372 <div class="icon">373 <svg width="28" height="28" viewBox="0 0 24 24" fill="none">374 <circle cx="12" cy="12" r="4" stroke="white" stroke-width="2"/>375 <path d="M12 1v3M12 20v3M1 12h3M20 12h3M3.5 3.5l2.2 2.2M18.3 18.3l2.2 2.2M3.5 20.5l2.2-2.2M18.3 5.7l2.2-2.2" stroke="white" stroke-width="2"/>376 </svg>377 </div>378 <div class="icon">379 <!-- WiFi -->380 <svg width="34" height="24" viewBox="0 0 24 24" fill="none">381 <path d="M2 8c5-5 15-5 20 0" stroke="white" stroke-width="2" stroke-linecap="round"/>382 <path d="M6 12c3-3 9-3 12 0" stroke="white" stroke-width="2" stroke-linecap="round"/>383 <path d="M10 16c1.5-1.5 2.5-1.5 4 0" stroke="white" stroke-width="2" stroke-linecap="round"/>384 </svg>385 </div>386 <div class="icon">387 <!-- Battery -->388 <svg width="38" height="22" viewBox="0 0 28 14" fill="none">389 <rect x="1" y="2" width="22" height="10" rx="2" stroke="white" stroke-width="2"/>390 <rect x="3" y="4" width="16" height="6" fill="white"/>391 <rect x="23" y="5" width="3" height="4" fill="white"/>392 </svg>393 </div>394 </div>395 </div>396 397 <!-- Hero image placeholder -->398 <div class="hero">399 <div class="img-placeholder">[IMG: Close-up pansy flower]</div>400 <div class="close-fab">×</div>401 </div>402 403 <!-- Content panel -->404 <div class="panel">405 <div class="title-row">406 <div>407 <h1 class="title">Wild pansy</h1>408 <p class="subtitle">Viola tricolor</p>409 </div>410 <div class="gear-btn" title="Settings">⚙</div>411 </div>412 413 <!-- Tabs -->414 <div class="tabs">415 <div class="tabs-inner">416 <div class="tab">Description</div>417 <div class="tab active">Care</div>418 <div class="tab">History</div>419 </div>420 </div>421 422 <!-- Watering calculator card -->423 <div class="grad-card-wrap">424 <div class="new-pill">New</div>425 <div class="grad-card">426 <div class="calc-left">427 <div class="icon-sq">428 <!-- Droplet icon -->429 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">430 <path d="M12 2c-3 4-6 7-6 11a6 6 0 0012 0c0-4-3-7-6-11z" stroke="#10b78d" stroke-width="2" fill="none"/>431 <circle cx="16" cy="16" r="1.6" fill="#10b78d"/>432 </svg>433 </div>434 <div class="calc-title">Watering calculator</div>435 </div>436 <div class="select-link">Select437 <svg width="26" height="26" viewBox="0 0 24 24" fill="none">438 <path d="M8 5l7 7-7 7" stroke="#11b98b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>439 </svg>440 </div>441 </div>442 </div>443 444 <!-- Info row -->445 <div class="info-row">446 <div class="circle-info">i</div>447 <div>Click on the icon to record action and set next action date</div>448 </div>449 450 <!-- Care card: Water -->451 <div class="care-card">452 <div class="care-header">453 <div class="care-left">454 <div class="icon-sq-outline">455 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">456 <path d="M12 2c-3 4-6 7-6 11a6 6 0 0012 0c0-4-3-7-6-11z" stroke="#10b78d" stroke-width="2" fill="none"/>457 <circle cx="16" cy="16" r="1.6" fill="#10b78d"/>458 </svg>459 </div>460 <div>461 <p class="care-title">Water</p>462 <div class="care-sub">in 13 days</div>463 </div>464 </div>465 <div class="tips-link">Tips466 <svg width="22" height="22" viewBox="0 0 24 24" fill="none">467 <path d="M6 14l6-6 6 6" stroke="#7b8897" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>468 </svg>469 </div>470 </div>471 <div class="care-body">472 Water your pansy plants regularly. Pansies grown in containers and pots will need regular watering; usually container plants require more regular watering than ground-planted ones as they dry out faster. Pansies prefer not to sit in permanently wet soil so as a general guide, only water them once a soil is dry to a touch.473 </div>474 </div>475 476 <div class="section-title">Optional care</div>477 <div class="section-sub">You might do them occasionally or set up a schedule in settings.</div>478 479 <!-- Mini card -->480 <div class="mini-card">481 <div class="mini-left">482 <div class="icon-sq-light">483 <!-- Scissors icon (simple) -->484 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">485 <circle cx="6" cy="8" r="2.2" stroke="#98a4b3" stroke-width="2"/>486 <circle cx="6" cy="16" r="2.2" stroke="#98a4b3" stroke-width="2"/>487 <path d="M8 8l12 8M8 16l6-4" stroke="#98a4b3" stroke-width="2" stroke-linecap="round"/>488 </svg>489 </div>490 <div class="mini-title">Cut</div>491 </div>492 <div class="settings-small">⚙</div>493 </div>494 </div>495 496 <!-- Gesture bar -->497 <div class="gesture"></div>498</div>499</body>500</html>