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 :root{9 --bg:#ffffff;10 --text:#1e1e1e;11 --muted:#99a3b3;12 --mint:#E8F7F2;13 --teal:#10BFA6;14 --teal-dark:#0da891;15 --chip:#13c2a8;16 --card:#F3F5F7;17 --shadow:0 8px 30px rgba(0,0,0,0.08);18 }19 body{ margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif; color:var(--text);}20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:#fff;24 }25 /* Hero image placeholder */26 .hero{27 position:absolute; left:0; top:0; width:100%; height:520px;28 border-bottom-left-radius:36px; border-bottom-right-radius:36px;29 overflow:hidden;30 }31 .hero .img{32 width:100%; height:100%;33 background:#E0E0E0;34 border-bottom:1px solid #BDBDBD;35 display:flex; align-items:center; justify-content:center;36 color:#757575; font-weight:600;37 }38 /* Status bar (simple mock) */39 .statusbar{40 position:absolute; top:18px; left:24px; right:24px; height:44px;41 display:flex; align-items:center; justify-content:space-between; color:#fff;42 font-weight:600; letter-spacing:0.5px; font-size:34px;43 }44 .status-icons{ display:flex; align-items:center; gap:26px; font-size:30px;}45 .status-dot{ width:22px; height:22px; background:#fff; border-radius:50%; opacity:.9;}46 .status-tri{47 width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;48 border-bottom:22px solid #fff; opacity:.9;49 }50 .battery{ width:26px; height:40px; border:3px solid #fff; border-radius:6px; position:relative;}51 .battery::after{ content:''; position:absolute; top:-9px; left:8px; width:10px; height:6px; background:#fff; border-radius:2px;}52 /* Floating back (X) button */53 .back-btn{54 position:absolute; top:160px; left:30px;55 width:98px; height:98px; background:#ffffffd9; border-radius:50%;56 display:flex; align-items:center; justify-content:center;57 box-shadow:0 6px 20px rgba(0,0,0,0.15);58 }59 .back-btn svg{ width:44px; height:44px; stroke:#636a75; stroke-width:8; }60 /* Main content sheet */61 .sheet{62 position:absolute; left:0; right:0; top:470px;63 background:#fff; border-top-left-radius:36px; border-top-right-radius:36px;64 padding:34px 40px 140px 40px; box-shadow:0 -8px 24px rgba(0,0,0,0.04);65 }66 .title-row{ display:flex; align-items:flex-start; justify-content:space-between; }67 .title{ font-size:72px; font-weight:800; margin:6px 0 6px 0; }68 .subtitle{ font-size:40px; color:var(--muted); font-weight:600; }69 .gear{ color:var(--teal); font-size:54px; line-height:1; }70 /* Segmented control */71 .segments{72 margin-top:36px; background:var(--mint); border-radius:48px; padding:12px;73 display:flex; gap:12px;74 }75 .seg-btn{76 flex:1; text-align:center; padding:26px 0; border-radius:40px;77 font-size:40px; font-weight:700; color:#10bfa6;78 }79 .seg-btn.active{ background:var(--teal); color:#fff; }80 /* Gradient card */81 .gradient-card{82 position:relative; margin-top:38px; border-radius:28px; padding:4px;83 background:linear-gradient(135deg,#6e3df2,#ff6aa0);84 }85 .gradient-card .inner{86 background:#fff; border-radius:24px; padding:30px 36px; display:flex; align-items:center; justify-content:space-between;87 }88 .card-left{ display:flex; align-items:center; gap:26px; }89 .icon-box{90 width:96px; height:96px; border-radius:24px; background:#f1f5f6; display:flex; align-items:center; justify-content:center;91 }92 .icon-box svg{ width:56px; height:56px; stroke:#8aa1ad; stroke-width:7; fill:none; }93 .card-title{ font-size:46px; font-weight:700; }94 .select{ color:var(--teal); font-weight:800; font-size:40px; margin-right:16px; }95 .chev-right{ width:28px; height:28px; border-top:6px solid var(--teal); border-right:6px solid var(--teal); transform:rotate(45deg); }96 .pill-new{97 position:absolute; top:-22px; left:24px; background:#7a3df2;98 padding:10px 22px; border-radius:22px; color:#fff; font-weight:800; font-size:32px;99 box-shadow:0 6px 14px rgba(122,61,242,0.35);100 }101 .pill-new::after{102 content:''; position:absolute; right:-8px; top:0; bottom:0; width:8px;103 background:#ff6aa0; border-top-right-radius:22px; border-bottom-right-radius:22px;104 }105 /* Info row */106 .info-row{ display:flex; align-items:flex-start; gap:20px; margin-top:40px;}107 .info-ic{108 width:58px; height:58px; border-radius:50%; background:#e8edf3; display:flex; align-items:center; justify-content:center; color:#8fa0b5; font-weight:900; font-size:36px;109 }110 .info-text{ font-size:40px; color:#5e6976; line-height:1.3; }111 /* Primary care card */112 .care-card{113 margin-top:30px; background:#f4f6f8; padding:34px; border-radius:36px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow);114 }115 .care-left{ display:flex; align-items:center; gap:26px; }116 .outline-icon{117 width:104px; height:104px; border:4px solid #18c2aa; border-radius:28px; display:flex; align-items:center; justify-content:center; background:#fff;118 }119 .outline-icon svg{ width:62px; height:62px; stroke:#18c2aa; stroke-width:7; fill:none; }120 .care-txt .t{ font-size:48px; font-weight:800; }121 .care-txt .s{ font-size:36px; color:#1ab79f; font-weight:700; margin-top:8px; }122 .tips{ display:flex; align-items:center; gap:12px; color:#8fa0b5; font-size:40px; font-weight:800; }123 .chev-down{ width:22px; height:22px; border-left:6px solid #8fa0b5; border-bottom:6px solid #8fa0b5; transform:rotate(-45deg); margin-top:6px;}124 /* Section header */125 .section-title{ margin-top:42px; font-size:56px; font-weight:900; }126 .section-sub{ margin-top:14px; font-size:38px; color:#9aa6b6; line-height:1.35;}127 /* Optional item rows */128 .opt-item{129 margin-top:26px; background:#f6f7f9; padding:30px; border-radius:36px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 4px 16px rgba(0,0,0,0.05);130 }131 .opt-left{ display:flex; align-items:center; gap:26px; }132 .sq-icon{133 width:110px; height:110px; border:4px solid #a7b4c4; border-radius:28px; display:flex; align-items:center; justify-content:center; color:#a7b4c4; font-size:54px; font-weight:800; background:#fff;134 }135 .opt-text .name{ font-size:46px; font-weight:800; }136 .opt-text .sub{ font-size:36px; color:#9aa6b6; margin-top:6px; }137 .opt-gear{ font-size:54px; color:#9aa6b6; }138 /* Home indicator */139 .home-indicator{140 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);141 width:360px; height:14px; background:#0d0d0f; border-radius:10px; opacity:.85;142 }143</style>144</head>145<body>146<div id="render-target">147 <!-- Top hero with status -->148 <div class="hero">149 <div class="img">[IMG: Flower close-up]</div>150 <div class="statusbar">151 <div>12:06</div>152 <div class="status-icons">153 <div class="status-dot"></div>154 <div class="status-tri"></div>155 <div class="battery"></div>156 </div>157 </div>158 <div class="back-btn" aria-label="Back">159 <svg viewBox="0 0 24 24" fill="none">160 <line x1="5" y1="5" x2="19" y2="19"></line>161 <line x1="19" y1="5" x2="5" y2="19"></line>162 </svg>163 </div>164 </div>165 166 <!-- Content sheet -->167 <div class="sheet">168 <div class="title-row">169 <div>170 <div class="title">Wild pansy</div>171 <div class="subtitle">Viola tricolor</div>172 </div>173 <div class="gear" aria-hidden="true">⚙</div>174 </div>175 176 <div class="segments" role="tablist">177 <div class="seg-btn">Description</div>178 <div class="seg-btn active">Care</div>179 <div class="seg-btn">History</div>180 </div>181 182 <div class="gradient-card">183 <div class="pill-new">New</div>184 <div class="inner">185 <div class="card-left">186 <div class="icon-box">187 <svg viewBox="0 0 24 24">188 <path d="M12 3C9 7 6 8.5 6 12a6 6 0 0 0 12 0c0-3.5-3-5-6-9z"></path>189 </svg>190 </div>191 <div class="card-title">Watering calculator</div>192 </div>193 <div style="display:flex; align-items:center; gap:16px;">194 <div class="select">Select</div>195 <div class="chev-right"></div>196 </div>197 </div>198 </div>199 200 <div class="info-row">201 <div class="info-ic">i</div>202 <div class="info-text">Click on the icon to record action and set next action date</div>203 </div>204 205 <div class="care-card">206 <div class="care-left">207 <div class="outline-icon">208 <svg viewBox="0 0 24 24">209 <path d="M12 3C9 7 6 8.5 6 12a6 6 0 0 0 12 0c0-3.5-3-5-6-9z"></path>210 </svg>211 </div>212 <div class="care-txt">213 <div class="t">Water</div>214 <div class="s">in 13 days</div>215 </div>216 </div>217 <div class="tips">218 <span>Tips</span>219 <div class="chev-down"></div>220 </div>221 </div>222 223 <div class="section-title">Optional care</div>224 <div class="section-sub">You might do them occasionally or set up a schedule in settings.</div>225 226 <div class="opt-item">227 <div class="opt-left">228 <div class="sq-icon">✂</div>229 <div class="opt-text">230 <div class="name">Cut</div>231 <div class="sub">No plan</div>232 </div>233 </div>234 <div class="opt-gear">⚙</div>235 </div>236 237 <div class="opt-item">238 <div class="opt-left">239 <div class="sq-icon">🧱</div>240 <div class="opt-text">241 <div class="name">Fertilizer</div>242 <div class="sub">No plan</div>243 </div>244 </div>245 <div class="opt-gear">⚙</div>246 </div>247 </div>248 249 <div class="home-indicator"></div>250</div>251</body>252</html>