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 Detail - Zz plant</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #255a4e;14 }15 #render-target {16 position: relative;17 overflow: hidden;18 width: 1080px;19 height: 2400px;20 background: #ffffff;21 }22 23 /* Top hero image */24 .hero {25 position: relative;26 width: 1080px;27 height: 620px;28 }29 .hero .img {30 width: 100%;31 height: 100%;32 background: #E0E0E0;33 border-bottom: 1px solid #BDBDBD;34 display: flex;35 align-items: center;36 justify-content: center;37 color: #757575;38 font-size: 34px;39 letter-spacing: 0.5px;40 }41 42 /* Status bar mimic */43 .statusbar {44 position: absolute;45 top: 18px;46 left: 28px;47 right: 28px;48 height: 44px;49 display: flex;50 align-items: center;51 justify-content: space-between;52 color: #1d1d1d;53 font-weight: 600;54 font-size: 34px;55 pointer-events: none;56 }57 .status-icons {58 display: flex;59 align-items: center;60 gap: 16px;61 }62 .dot {63 width: 18px;64 height: 18px;65 background: #1d1d1d;66 border-radius: 50%;67 opacity: 0.85;68 }69 70 /* Top overlay controls */71 .top-controls {72 position: absolute;73 top: 160px;74 left: 28px;75 right: 28px;76 display: flex;77 align-items: center;78 justify-content: space-between;79 }80 .circle-btn {81 width: 90px;82 height: 90px;83 border-radius: 50%;84 background: rgba(255,255,255,0.25);85 display: flex;86 align-items: center;87 justify-content: center;88 backdrop-filter: blur(2px);89 }90 .circle-btn svg { fill: #ffffff; }91 92 /* Content sheet */93 .sheet {94 position: relative;95 margin-top: -80px;96 background: #ffffff;97 border-top-left-radius: 80px;98 border-top-right-radius: 80px;99 box-shadow: 0 -8px 30px rgba(0,0,0,0.08);100 padding: 44px 48px 120px;101 }102 103 .chip {104 position: absolute;105 top: -28px;106 left: 40px;107 background: #FFE9D6;108 color: #F28D25;109 border-radius: 40px;110 padding: 18px 28px;111 display: inline-flex;112 align-items: center;113 gap: 14px;114 font-weight: 700;115 font-size: 36px;116 }117 .chip .check {118 width: 30px;119 height: 30px;120 border-radius: 50%;121 background: #ffd6b2;122 display: inline-block;123 }124 125 .title {126 margin-top: 48px;127 }128 .title h1 {129 margin: 0;130 font-size: 82px;131 color: #2c6b5d;132 line-height: 1.1;133 letter-spacing: -0.5px;134 }135 .title .subtitle {136 margin-top: 10px;137 font-size: 40px;138 color: #4b7d70;139 opacity: 0.9;140 font-style: italic;141 }142 143 .section-header {144 margin-top: 56px;145 margin-bottom: 22px;146 display: flex;147 align-items: center;148 justify-content: space-between;149 }150 .section-header .label {151 font-size: 44px;152 font-weight: 800;153 letter-spacing: 1px;154 color: #2c6b5d;155 }156 .section-header .action {157 font-size: 40px;158 color: #F28D25;159 font-weight: 700;160 display: inline-flex;161 align-items: center;162 gap: 12px;163 }164 .section-header .action svg { fill: #F28D25; }165 166 .card {167 background: #ffffff;168 border-radius: 28px;169 padding: 34px 36px;170 display: flex;171 align-items: center;172 justify-content: space-between;173 box-shadow: 0 16px 32px rgba(0,0,0,0.08);174 margin: 26px 0;175 }176 .card .left {177 display: flex;178 align-items: center;179 gap: 28px;180 }181 .icon-circle {182 width: 86px;183 height: 86px;184 border-radius: 50%;185 display: inline-flex;186 align-items: center;187 justify-content: center;188 color: #fff;189 }190 .icon-water { background: #4F7DF0; }191 .icon-mist { background: #8B67E8; }192 .icon-fert { background: #38A663; }193 .icon-rotate { background: #F2B43D; }194 .card .text {195 font-size: 44px;196 color: #2f6f61;197 font-weight: 700;198 }199 200 /* Toggle (off) */201 .toggle {202 width: 170px;203 height: 86px;204 border-radius: 50px;205 background: #d9d3d3;206 position: relative;207 }208 .toggle::after {209 content: "";210 position: absolute;211 width: 70px;212 height: 70px;213 border-radius: 50%;214 right: 8px;215 top: 8px;216 background: #c9c2c2;217 }218 219 /* Journal */220 .journal-wrap {221 margin-top: 32px;222 }223 .journal-container {224 position: relative;225 padding-left: 24px;226 display: flex;227 gap: 24px;228 align-items: stretch;229 }230 .journal-bar {231 width: 6px;232 border-radius: 3px;233 background: #e3f0e9;234 }235 .journal-card {236 flex: 1;237 border-radius: 28px;238 border: 3px dashed #2f6f61;239 padding: 32px;240 position: relative;241 background: #ffffff;242 }243 .journal-card .close {244 position: absolute;245 right: 28px;246 top: 22px;247 font-size: 48px;248 color: #7aa497;249 }250 .journal-header {251 display: flex;252 align-items: center;253 gap: 24px;254 }255 .journal-icon {256 width: 74px;257 height: 74px;258 border-radius: 50%;259 background: #e0f0e9;260 display: flex;261 align-items: center;262 justify-content: center;263 }264 .journal-title {265 font-size: 42px;266 font-weight: 800;267 color: #2f6f61;268 }269 .journal-date {270 font-size: 34px;271 color: #628b7f;272 margin-top: 6px;273 }274 .journal-body {275 margin-top: 30px;276 font-size: 40px;277 color: #2f6f61;278 }279 280 .footer-space {281 height: 340px;282 }283 284 /* Simple helper icons */285 .svg-icon { width: 44px; height: 44px; }286 .svg-plus { width: 44px; height: 44px; }287</style>288</head>289<body>290<div id="render-target">291 292 <div class="hero">293 <div class="img">[IMG: Close-up green leaves]</div>294 295 <div class="statusbar">296 <div>10:31</div>297 <div class="status-icons">298 <div class="dot"></div>299 <div class="dot" style="background:#000;"></div>300 <div class="dot" style="background:#000;"></div>301 <div class="dot" style="background:#000;"></div>302 </div>303 </div>304 305 <div class="top-controls">306 <div class="circle-btn">307 <svg width="42" height="42" viewBox="0 0 24 24">308 <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>309 </svg>310 </div>311 <div class="circle-btn">312 <svg width="6" height="42" viewBox="0 0 6 24">313 <circle cx="3" cy="4" r="3" fill="#fff"></circle>314 <circle cx="3" cy="12" r="3" fill="#fff"></circle>315 <circle cx="3" cy="20" r="3" fill="#fff"></circle>316 </svg>317 </div>318 </div>319 </div>320 321 <div class="sheet">322 <div class="chip"><span class="check"></span>In Outdoor</div>323 324 <div class="title">325 <h1>Zz plant</h1>326 <div class="subtitle">Foliage Plants</div>327 </div>328 329 <div class="section-header">330 <div class="label">REMINDERS</div>331 <div class="action">332 <svg class="svg-plus" viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" /></svg>333 Add reminder334 </div>335 </div>336 337 <!-- Reminder cards -->338 <div class="card">339 <div class="left">340 <div class="icon-circle icon-water">341 <svg class="svg-icon" viewBox="0 0 24 24">342 <path d="M12 3C10 7 6 10 6 14a6 6 0 0012 0c0-4-4-7-6-11z" fill="#ffffff"></path>343 </svg>344 </div>345 <div class="text">Watering</div>346 </div>347 <div class="toggle"></div>348 </div>349 350 <div class="card">351 <div class="left">352 <div class="icon-circle icon-mist">353 <svg class="svg-icon" viewBox="0 0 24 24">354 <path d="M5 15h8M5 11h12M5 7h6" stroke="#fff" stroke-width="2.6" stroke-linecap="round" fill="none"></path>355 </svg>356 </div>357 <div class="text">Misting</div>358 </div>359 <div class="toggle"></div>360 </div>361 362 <div class="card">363 <div class="left">364 <div class="icon-circle icon-fert">365 <svg class="svg-icon" viewBox="0 0 24 24">366 <path d="M7 20c5-2 8-5 10-10-5 2-8 5-10 10zM11 6l2-2 2 2-2 2z" fill="#ffffff"></path>367 </svg>368 </div>369 <div class="text">Fertilizing</div>370 </div>371 <div class="toggle"></div>372 </div>373 374 <div class="card">375 <div class="left">376 <div class="icon-circle icon-rotate">377 <svg class="svg-icon" viewBox="0 0 24 24">378 <circle cx="12" cy="12" r="4" fill="#fff"></circle>379 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.2 2.2M17.3 17.3l2.2 2.2M4.5 19.5l2.2-2.2M17.3 6.7l2.2-2.2" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"></path>380 </svg>381 </div>382 <div class="text">Rotating</div>383 </div>384 <div class="toggle"></div>385 </div>386 387 <!-- Journal -->388 <div class="section-header journal-wrap">389 <div class="label">JOURNAL</div>390 <div class="action">391 <svg class="svg-plus" viewBox="0 0 24 24"><path d="M11 4h2v16h-2zM4 11h16v2H4z" /></svg>392 Add action393 </div>394 </div>395 396 <div class="journal-container">397 <div class="journal-bar"></div>398 <div class="journal-card">399 <div class="close">×</div>400 <div class="journal-header">401 <div class="journal-icon">402 <svg width="34" height="34" viewBox="0 0 24 24">403 <path d="M6 3h9l3 3v15H6z" fill="#2f6f61" opacity="0.9"></path>404 </svg>405 </div>406 <div>407 <div class="journal-title">Note</div>408 <div class="journal-date">Jan 4, 2024</div>409 </div>410 </div>411 <div class="journal-body">Added to My Plants</div>412 </div>413 </div>414 415 <div class="section-header" style="margin-top: 54px;">416 <div class="label">HOW TO CARE</div>417 <div></div>418 </div>419 420 <div class="footer-space"></div>421 </div>422</div>423</body>424</html>