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>My Plants - Reminders</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: linear-gradient(180deg, #eef7f2 0%, #e3efe9 100%);12 border-radius: 28px; /* outer styling applied to render-target */13 box-shadow: 0 10px 40px rgba(0,0,0,0.12);14 }15 16 /* Top status-like spacing */17 .safe-top {18 height: 100px; display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px; color: #7b8b86; font-size: 34px;20 }21 .status-left { display: flex; align-items: center; gap: 20px; }22 .status-right { display: flex; align-items: center; gap: 20px; }23 .status-dot { width: 12px; height: 12px; background: #7b8b86; border-radius: 50%; display: inline-block; }24 25 .title {26 color: #1b6f57; font-weight: 800; font-size: 64px;27 margin: 14px 0 10px 60px;28 }29 30 .tabs { display: flex; gap: 140px; padding: 6px 60px; align-items: center; }31 .tab { font-size: 34px; color: #98a8a3; }32 .tab.active { color: #1b6f57; font-weight: 700; position: relative; }33 .tab .red-dot { width: 18px; height: 18px; background: #ff4d4f; border-radius: 50%; display: inline-block; margin-left: 10px; vertical-align: middle; }34 .active-underline {35 width: 280px; height: 10px; background: #1b6f57; border-radius: 6px;36 margin: 16px 0 18px 360px;37 }38 39 /* Cards */40 .card { background: #ffffff; border-radius: 42px; box-shadow: 0 18px 38px rgba(0,0,0,0.10); border: 1px solid rgba(0,0,0,0.05); }41 .vacation-card {42 margin: 0 40px 30px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between;43 }44 .vac-left { display: flex; align-items: center; gap: 20px; }45 .circle-icon {46 width: 60px; height: 60px; border-radius: 50%; background: #e7f3ee; display: flex; align-items: center; justify-content: center;47 border: 1px solid #d7e5df;48 }49 .vac-title { font-size: 34px; color: #1b6f57; font-weight: 700; }50 .toggle {51 width: 160px; height: 72px; border-radius: 36px; background: #e9e9e9;52 border: 3px solid #dadada; position: relative;53 }54 .toggle .knob {55 width: 66px; height: 66px; border-radius: 50%; background: #f6f6f6; border: 3px solid #d2d2d2;56 position: absolute; right: 6px; top: 50%; transform: translateY(-50%);57 }58 59 /* Reminder item */60 .reminder-item {61 margin: 14px 40px; padding: 30px; display: flex; align-items: center; justify-content: space-between;62 }63 .item-left { display: flex; align-items: center; gap: 26px; }64 .img-ph {65 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 22px;66 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center;67 }68 .plant-title { font-size: 36px; color: #196c54; font-weight: 700; }69 .plant-sub { font-size: 28px; color: #8ea19b; margin-top: 6px; }70 71 .item-actions { display: flex; align-items: center; gap: 18px; }72 .btn-outline {73 padding: 18px 28px; border-radius: 24px; border: 3px solid #196c54; color: #196c54; font-weight: 700; font-size: 28px; background: #fff;74 }75 .btn-soft {76 padding: 18px 28px; border-radius: 24px; background: #ffe9cb; color: #b0722b; font-weight: 700; font-size: 28px; border: 3px solid #ffddb0;77 }78 79 /* Fertilizing Section */80 .fert-card { margin: 24px 40px; padding: 30px; }81 .fert-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }82 .fert-left { display: flex; align-items: center; gap: 20px; }83 .fert-icon { width: 60px; height: 60px; border-radius: 50%; background: #2aa25f; display: flex; align-items: center; justify-content: center; color: #fff; }84 .fert-title { font-size: 38px; color: #1b6f57; font-weight: 700; }85 .fert-count { color: #93a49f; font-size: 32px; }86 87 .tomorrow { margin: 24px 60px 6px; font-size: 30px; color: #8ca09a; }88 89 /* Watering Reminder */90 .water-card { margin: 12px 40px; padding: 30px; display: flex; align-items: center; justify-content: space-between; }91 .water-left { display: flex; align-items: center; gap: 24px; }92 .blue-icon { width: 70px; height: 70px; border-radius: 50%; background: #e7f0ff; display: flex; align-items: center; justify-content: center; border: 1px solid #cddaf1; }93 .water-title { font-size: 38px; color: #396ac9; font-weight: 700; }94 .btn-primary {95 padding: 22px 34px; border-radius: 28px; background: #176c57; color: #fff; font-size: 32px; font-weight: 700; display: flex; align-items: center; gap: 20px;96 box-shadow: 0 12px 26px rgba(23,108,87,0.35);97 }98 .btn-primary .plus {99 width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.26);100 display: flex; align-items: center; justify-content: center;101 }102 103 /* Promo Banner */104 .promo { margin: 18px 40px; padding: 36px; border-radius: 32px; background: #063d35; color: #ffffff; box-shadow: 0 18px 30px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: space-between; }105 .promo .headline { font-size: 40px; font-weight: 800; }106 .promo .sub { font-size: 30px; opacity: 0.9; margin-top: 8px; }107 .promo-right {108 width: 160px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #757575;109 }110 111 .date-label { margin: 24px 60px; color: #8ca09a; font-size: 30px; }112 113 /* Bottom Navigation */114 .bottom-nav {115 position: absolute; left: 0; bottom: 0; width: 100%; height: 220px; background: #ffffff;116 border-top-left-radius: 28px; border-top-right-radius: 28px;117 box-shadow: 0 -10px 30px rgba(0,0,0,0.12);118 }119 .nav-items { display: flex; justify-content: space-around; align-items: flex-end; height: 100%; padding-bottom: 30px; }120 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #8fa19b; font-size: 28px; }121 .nav-item.active { color: #1b6f57; font-weight: 700; }122 .nav-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }123 .camera-wrap {124 position: absolute; left: 50%; transform: translateX(-50%); top: -40px;125 width: 170px; height: 170px; background: #ff9f3c; border-radius: 50%; box-shadow: 0 20px 40px rgba(0,0,0,0.25);126 border: 8px solid #fff; display: flex; align-items: center; justify-content: center;127 }128 .badge {129 position: absolute; top: -10px; right: -10px; background: #ff4d4f; color: #fff; font-size: 26px; border-radius: 20px; padding: 6px 12px;130 }131 .dot-notif {132 width: 14px; height: 14px; background: #ff4d4f; border-radius: 50%; margin-left: 8px;133 }134</style>135</head>136<body>137<div id="render-target">138 139 <div class="safe-top">140 <div class="status-left">141 <div>3:40</div>142 <div class="status-dot"></div>143 <div class="status-dot"></div>144 <div class="status-dot"></div>145 </div>146 <div class="status-right">147 <div class="status-dot"></div>148 <div class="status-dot"></div>149 </div>150 </div>151 152 <div class="title">My Plants</div>153 154 <div class="tabs">155 <div class="tab">Plants</div>156 <div class="tab active">Reminders <span class="red-dot"></span></div>157 <div class="tab">Snap history</div>158 </div>159 <div class="active-underline"></div>160 161 <!-- Vacation Mode -->162 <div class="card vacation-card">163 <div class="vac-left">164 <div class="circle-icon">165 <svg width="30" height="30" viewBox="0 0 24 24" fill="#1b6f57">166 <path d="M12 2c-3 3-5 5-5 8 0 3 2 5 5 5s5-2 5-5c0-3-2-5-5-8zM5 20h14v2H5z"/>167 </svg>168 </div>169 <div class="vac-title">Vacation Mode</div>170 </div>171 <div class="toggle"><div class="knob"></div></div>172 </div>173 174 <!-- Top reminder item -->175 <div class="card reminder-item">176 <div class="item-left">177 <div class="img-ph">[IMG: Soft tree fern]</div>178 <div>179 <div class="plant-title">Soft tree fern</div>180 <div class="plant-sub">Every week</div>181 </div>182 </div>183 <div class="item-actions">184 <button class="btn-outline">Snooze</button>185 <button class="btn-soft">Complete</button>186 </div>187 </div>188 189 <!-- Fertilizing Section -->190 <div class="card fert-card">191 <div class="fert-header">192 <div class="fert-left">193 <div class="fert-icon">194 <svg width="30" height="30" viewBox="0 0 24 24">195 <path d="M12 2l4 6-4 4-4-4 4-6zm-6 14h12v4H6z" fill="#fff"/>196 </svg>197 </div>198 <div class="fert-title">Fertilizing</div>199 </div>200 <div class="fert-count">2 ^</div>201 </div>202 203 <div class="reminder-item" style="box-shadow:none; border:none; margin:12px 0; padding:20px 0;">204 <div class="item-left">205 <div class="img-ph">[IMG: Chinese evergreens]</div>206 <div>207 <div class="plant-title">Chinese evergreens</div>208 <div class="plant-sub">Every week</div>209 </div>210 </div>211 <div class="item-actions">212 <button class="btn-outline">Snooze</button>213 <button class="btn-soft">Complete</button>214 </div>215 </div>216 217 <div class="reminder-item" style="box-shadow:none; border:none; margin:12px 0; padding:20px 0;">218 <div class="item-left">219 <div class="img-ph">[IMG: Soft tree fern]</div>220 <div>221 <div class="plant-title">Soft tree fern</div>222 <div class="plant-sub">Every week</div>223 </div>224 </div>225 <div class="item-actions">226 <button class="btn-outline">Snooze</button>227 <button class="btn-soft">Complete</button>228 </div>229 </div>230 </div>231 232 <div class="tomorrow">Tomorrow</div>233 234 <!-- Watering -->235 <div class="card water-card">236 <div class="water-left">237 <div class="blue-icon">238 <svg width="34" height="34" viewBox="0 0 24 24" fill="#396ac9">239 <path d="M12 2c4 5 6 7 6 10a6 6 0 0 1-12 0c0-3 2-5 6-10z"/>240 </svg>241 </div>242 <div class="water-title">Watering</div>243 </div>244 <div class="btn-primary">245 <div class="plus">246 <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">247 <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>248 </svg>249 </div>250 <div>Set reminder</div>251 </div>252 </div>253 254 <!-- Promo -->255 <div class="promo card" style="box-shadow: 0 18px 38px rgba(0,0,0,0.18);">256 <div>257 <div class="headline">Try Plantum Premium for Free</div>258 <div class="sub">Claim your offer now.</div>259 </div>260 <div class="promo-right">[IMG: Offer graphic]</div>261 </div>262 263 <div class="date-label">Jul 25, 2023</div>264 265 <!-- Bottom Navigation -->266 <div class="bottom-nav">267 <div class="camera-wrap">268 <svg width="80" height="80" viewBox="0 0 24 24" fill="#fff">269 <path d="M9 4l2-2h2l2 2h4v16H3V4h6zm3 4a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 110 8 4 4 0 010-8z"/>270 </svg>271 </div>272 <div class="nav-items">273 <div class="nav-item">274 <div class="nav-icon">275 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8fa19b">276 <path d="M12 3l9 7v11h-6v-6H9v6H3V10l9-7z"/>277 </svg>278 </div>279 <div>Home</div>280 </div>281 <div class="nav-item">282 <div class="nav-icon">283 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8fa19b">284 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>285 </svg>286 </div>287 <div>Diagnose</div>288 </div>289 <div class="nav-item active" style="position: relative;">290 <div class="nav-icon">291 <svg width="44" height="44" viewBox="0 0 24 24" fill="#1b6f57">292 <path d="M12 2c-3 3-5 5-5 8s2 5 5 5 5-2 5-5-2-5-5-8zM5 20h14v2H5z"/>293 </svg>294 </div>295 <div style="display:flex; align-items:center;">My Plants296 <span class="badge">6</span>297 </div>298 </div>299 <div class="nav-item">300 <div class="nav-icon">301 <svg width="40" height="40" viewBox="0 0 24 24" fill="#8fa19b">302 <path d="M5 4h7v6H5V4zm0 10h14v6H5v-6zm9-10h5v6h-5V4z"/>303 </svg>304 </div>305 <div style="display:flex; align-items:center;">Explore<span class="dot-notif"></span></div>306 </div>307 </div>308 </div>309 310</div>311</body>312</html>