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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F6FAF7;15 border-radius: 36px;16 box-shadow: 0 20px 40px rgba(0,0,0,0.08);17 color: #2F6F5F;18 }19 20 /* Generic */21 .container { padding: 24px 36px; }22 .row { display: flex; align-items: center; }23 .space-between { display: flex; align-items: center; justify-content: space-between; }24 .muted { color: #6B8F82; }25 .card {26 background: #FFFFFF;27 border-radius: 28px;28 box-shadow: 0 8px 20px rgba(0,0,0,0.06);29 }30 31 /* Status bar */32 .statusbar {33 height: 72px;34 padding: 0 28px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 color: #1e1e1e;39 font-weight: 600;40 }41 .status-icons { display: flex; align-items: center; gap: 16px; }42 .dot { width: 16px; height: 16px; background:#000; border-radius: 50%; opacity: 0.8; }43 .small-dot { width: 8px; height: 8px; background:#000; border-radius: 50%; opacity: 0.5; }44 .battery {45 width: 38px; height: 18px; border: 2px solid #222; border-radius: 4px; position: relative;46 }47 .battery::after { content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 8px; background: #222; border-radius: 2px; }48 .battery .level { height: 100%; width: 70%; background: #222; }49 50 /* Action rows */51 .actions { padding: 12px 28px 0 28px; display: grid; gap: 22px; }52 .action-row { padding: 26px 28px; }53 .action-icon {54 width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px;55 }56 .action-label { font-size: 40px; font-weight: 700; color: #2F6F5F; }57 .toggle {58 margin-left: auto;59 width: 220px; height: 94px;60 background: #D5D1D3;61 border-radius: 48px;62 position: relative;63 }64 .toggle .knob {65 width: 80px; height: 80px; background: #E7E4E6; border-radius: 40px; position: absolute; left: 8px; top: 7px;66 box-shadow: inset 0 2px 0 rgba(255,255,255,0.8);67 }68 .ellipsis { width: 40px; height: 40px; background: rgba(0,0,0,0.08); border-radius: 50%; display:flex; align-items:center; justify-content:center; margin-left: 14px; }69 .ellipsis div { width: 6px; height: 6px; background:#7D7D7D; border-radius: 50%; margin: 0 2px; display:inline-block; }70 .back-bubble {71 position: absolute; left: 24px; top: 275px;72 width: 88px; height: 88px; border-radius: 44px; background: rgba(0,0,0,0.08);73 display:flex; align-items:center; justify-content:center;74 }75 .back-bubble .inner {76 width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center;77 }78 79 /* Section titles */80 .section-title {81 font-size: 52px;82 font-weight: 800;83 letter-spacing: 0.5px;84 margin: 36px 36px 12px 36px;85 color: #2F6F5F;86 }87 .add-action {88 position: absolute; right: 36px; top: 950px;89 color: #F3942E; font-size: 38px; font-weight: 700;90 }91 92 /* Journal card */93 .journal-wrap { position: relative; padding: 0 36px; }94 .journal-side {95 position: absolute; left: 36px; top: 14px; bottom: 14px; width: 8px; background: #D9E9DE; border-radius: 4px;96 }97 .journal-card {98 margin-left: 36px;99 border: 4px dashed #2F6F5F;100 border-radius: 32px;101 padding: 34px;102 background: #F9FCFA;103 }104 .note-icon {105 width: 64px; height: 64px; border-radius: 32px; background: #D9EFE1;106 border: 2px solid #9AC3AE; display:flex; align-items:center; justify-content:center; margin-right: 18px;107 }108 .note-title { font-size: 40px; font-weight: 800; }109 .note-date { font-size: 32px; color:#6B8F82; margin-top: 6px; }110 .note-body { font-size: 36px; color:#2F6F5F; margin-top: 28px; }111 .close-x {112 position: absolute; right: 52px; top: 26px; font-size: 44px; color:#8FA59A;113 }114 115 /* How to care */116 .care-title { margin-top: 28px; }117 118 /* Watering card */119 .feature-card { margin: 24px 24px; padding: 36px; position: relative; }120 .feature-icon {121 width: 60px; height: 60px; border-radius: 30px; background:#E6F3EF; border: 2px solid #9AC3AE;122 display:flex; align-items:center; justify-content:center; margin-right: 18px;123 }124 .feature-title { font-size: 48px; font-weight: 800; color:#2F6F5F; }125 .feature-sub { font-size: 36px; color:#6B8F82; margin: 8px 0 16px 78px; }126 .divider { height: 2px; background:#E4ECE8; margin: 8px 0 18px 0; }127 .feature-desc { font-size: 34px; color:#5A8174; line-height: 1.45; }128 .feature-desc a { color:#2D7FD1; text-decoration: underline; }129 .primary-btn {130 margin-top: 26px; width: 90%; height: 100px; border-radius: 50px;131 background: #2F6F5F; display:flex; align-items:center; justify-content:center;132 color:#FFFFFF; font-size: 42px; font-weight: 800;133 }134 .chevron {135 position: absolute; right: 36px; top: 42px; width: 28px; height: 28px; border-top: 6px solid #7FA292; border-right: 6px solid #7FA292; transform: rotate(45deg);136 }137 138 /* Pot meter dashed */139 .dashed-card {140 margin: 28px 24px;141 border: 4px dashed #7FA292;142 border-radius: 28px;143 background: #FAFDFB;144 padding: 36px;145 }146 .pot-desc { text-align:center; font-size: 34px; color:#4F7D6D; margin-bottom: 24px; }147 .pill-btn {148 width: 88%; height: 104px; border-radius: 54px; margin: 0 auto;149 background:#6A7E7B; color:#FFFFFF; font-size: 42px; font-weight: 800; display:flex; align-items:center; justify-content:center;150 }151 152 /* Temperature card */153 .temp-card .labels { font-size: 30px; color:#7B9C91; display:flex; justify-content: space-between; margin-top: 10px; }154 .temp-scale {155 height: 160px; background:#F1F5F3; border-radius: 18px; display:flex; align-items:center; justify-content:center; margin-top: 22px;156 border: 1px solid #E1E7E3;157 }158 .temp-scale .bar {159 width: 88%; height: 14px; background:#DCE7E3; border-radius: 7px; position: relative;160 }161 .temp-scale .range { position:absolute; left: 35%; width: 18%; height: 14px; background:#95C9A9; border-radius: 7px; }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Status bar -->168 <div class="statusbar">169 <div class="row">170 <span style="font-size:32px; margin-right:12px;">10:32</span>171 <div class="status-icons">172 <div class="dot"></div>173 <div class="dot" style="background:#6B6B6B;"></div>174 <div class="small-dot"></div>175 </div>176 </div>177 <div class="row" style="gap:12px;">178 <div class="battery"><div class="level"></div></div>179 </div>180 </div>181 182 <!-- Action cards -->183 <div class="actions">184 <div class="card action-row row">185 <div class="action-icon" style="background:#E9E0FA;">186 <!-- Water droplet icon -->187 <svg width="34" height="34" viewBox="0 0 24 24">188 <path d="M12 2 C10 6 6 9 6 13 a6 6 0 0 0 12 0 c0-4-4-7-6-11z" fill="#7A51E9"/>189 </svg>190 </div>191 <div class="action-label">Misting</div>192 <div class="toggle"><div class="knob"></div></div>193 </div>194 195 <div class="card action-row row" style="position: relative;">196 <div class="action-icon" style="background:#DDF1E2;">197 <!-- Leaf icon -->198 <svg width="34" height="34" viewBox="0 0 24 24">199 <path d="M4 14 c8-10 12-8 16-8 c-2 8-10 14-16 8z" fill="#49A36F"/>200 </svg>201 </div>202 <div class="action-label">Fertilizing</div>203 <div class="toggle"><div class="knob"></div></div>204 <div class="ellipsis">205 <div></div><div></div><div></div>206 </div>207 </div>208 209 <div class="card action-row row">210 <div class="action-icon" style="background:#FDEFD9;">211 <!-- Sun icon -->212 <svg width="34" height="34" viewBox="0 0 24 24">213 <circle cx="12" cy="12" r="5" fill="#F6A82E"></circle>214 <path d="M12 1 v3 M12 20 v3 M1 12 h3 M20 12 h3 M4 4 l2 2 M18 18 l2 2 M18 6 l2-2 M4 20 l2-2" stroke="#F6A82E" stroke-width="2" fill="none"/>215 </svg>216 </div>217 <div class="action-label">Rotating</div>218 <div class="toggle"><div class="knob"></div></div>219 </div>220 </div>221 222 <!-- Floating back bubble -->223 <div class="back-bubble">224 <div class="inner">225 <svg width="28" height="28" viewBox="0 0 24 24">226 <path d="M15 5 L7 12 L15 19" stroke="#6B6B6B" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 </div>229 </div>230 231 <!-- Journal section -->232 <div class="section-title" style="margin-top: 40px;">JOURNAL</div>233 <div class="add-action">+ Add action</div>234 235 <div class="journal-wrap" style="margin-top: 20px;">236 <div class="journal-side"></div>237 <div class="journal-card">238 <div class="row">239 <div class="note-icon">240 <!-- Document icon -->241 <svg width="30" height="30" viewBox="0 0 24 24">242 <path d="M7 3 h7 l4 4 v13 a2 2 0 0 1 -2 2 h-9 a2 2 0 0 1 -2 -2 v-15 a2 2 0 0 1 2 -2z" fill="#2F6F5F"/>243 </svg>244 </div>245 <div>246 <div class="note-title">Note</div>247 <div class="note-date">Jan 4, 2024</div>248 </div>249 </div>250 <div class="note-body">Added to My Plants</div>251 <div class="close-x">×</div>252 </div>253 </div>254 255 <!-- How to care -->256 <div class="section-title care-title">HOW TO CARE</div>257 258 <!-- Watering card -->259 <div class="card feature-card">260 <div class="row">261 <div class="feature-icon">262 <!-- Watering can icon -->263 <svg width="30" height="30" viewBox="0 0 24 24">264 <path d="M4 15 h8 l2-6 l3 2 v7 h-3 v-5 l-1 2 h-9z" fill="#2F6F5F"/>265 </svg>266 </div>267 <div class="feature-title">Watering</div>268 </div>269 <div class="feature-sub">Every 1-2 weeks</div>270 <div class="divider"></div>271 <div class="feature-desc">272 Use <a href="#">Water Calculator</a> to estimate the optimal amount of273 moisture and watering frequency for your plant.274 </div>275 <div class="primary-btn">Calculate</div>276 <div class="chevron"></div>277 </div>278 279 <!-- Pot meter dashed -->280 <div class="dashed-card">281 <div class="pot-desc">Use Pot Meter to measure your pot.</div>282 <div class="pill-btn">Pot Meter</div>283 </div>284 285 <!-- Temperature card -->286 <div class="card feature-card temp-card">287 <div class="row">288 <div class="feature-icon">289 <!-- Thermometer icon -->290 <svg width="28" height="28" viewBox="0 0 24 24">291 <path d="M12 4 a3 3 0 0 1 3 3 v7 a5 5 0 1 1 -6 0 v-7 a3 3 0 0 1 3 -3z" fill="#2F6F5F"/>292 </svg>293 </div>294 <div class="feature-title">Temperature</div>295 </div>296 <div class="labels"><span>0°F</span><span>130°F</span></div>297 <div class="temp-scale">298 <div class="bar">299 <div class="range"></div>300 </div>301 </div>302 <div class="chevron"></div>303 </div>304 305</div>306</body>307</html>