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>Edit Plant UI</title>7<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">8<style>9 :root{10 --bg:#FFFFFF;11 --text:#222222;12 --sub:#7A7A7A;13 --border:#ECECEC;14 --purple:#7B61FF;15 --yellow:#FFC82C;16 --orange:#FFB366;17 --icon-gray:#D9D9D9;18 }19 body{ margin:0; padding:0; background:transparent; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:var(--bg);24 }25 .safe{ padding: 48px; }26 /* Top Bar */27 .topbar{28 display:flex; align-items:center; justify-content:space-between;29 padding: 48px 48px 24px 48px;30 }31 .close{32 width:72px; height:72px; display:flex; align-items:center; justify-content:center;33 color:#000; font-size:56px; font-weight:700; line-height:0;34 }35 .done{36 color:var(--purple); font-weight:700; font-size:42px;37 }38 .title{39 position:absolute; left:156px; top:72px;40 font-size:64px; font-weight:800; color:#111;41 }42 /* Sections and cells */43 .section{44 padding: 16px 48px 0 48px;45 }46 .label{47 color:#8C8C8C; font-size:34px; margin-bottom:18px;48 }49 .cell{50 background:#fff; border:2px solid var(--border);51 border-radius:32px; padding:34px 30px;52 display:flex; align-items:center; justify-content:space-between;53 margin-bottom:22px;54 }55 .cell.noicon{ padding-left:36px; }56 .left{57 display:flex; align-items:center; gap:26px;58 }59 .icon-wrap{60 width:84px; height:84px; border-radius:50%;61 display:flex; align-items:center; justify-content:center;62 border:2px solid #EFEFEF;63 background:#FFF7ED;64 }65 .icon-gray{66 background:#F6F6F6; border-color:#EEEEEE;67 }68 .text-title{69 font-size:40px; color:#525252; font-weight:600;70 }71 .value{72 font-size:38px; color:#6A6A6A; font-weight:600;73 }74 .value.purple{ color:var(--purple); }75 .chev{76 width:28px; height:28px; margin-left:18px;77 }78 /* Section headers */79 .section-header{80 display:flex; align-items:center; gap:18px;81 padding: 44px 48px 18px 48px;82 }83 .section-header .name{84 font-size:48px; font-weight:800; color:#111;85 }86 /* Bottom gesture area */87 .home-indicator{88 position:absolute; left:0; right:0; bottom:0; height:120px; background:#000;89 display:flex; align-items:flex-start; justify-content:center;90 }91 .home-pill{92 width:240px; height:14px; background:#D8D8D8; border-radius:14px; margin-top:26px;93 }94</style>95</head>96<body>97<div id="render-target">98 <!-- Top bar -->99 <div class="topbar">100 <div class="close">×</div>101 <div class="done">DONE</div>102 </div>103 <div class="title">Edit Plant</div>104 105 <!-- Last Watered Date -->106 <div class="section">107 <div class="label">Last Watered Date</div>108 <div class="cell noicon">109 <div class="text-title" style="color:var(--purple);">Not set</div>110 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>111 </div>112 </div>113 114 <!-- Light Section -->115 <div class="section-header">116 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#FFC82C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">117 <circle cx="12" cy="12" r="4" fill="#FFC82C" stroke="none"></circle>118 <path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/>119 </svg>120 <div class="name">Light</div>121 </div>122 123 <div class="section">124 <!-- Direct Sunlight -->125 <div class="cell">126 <div class="left">127 <div class="icon-wrap" style="background:#FFF4E9;">128 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFA74D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">129 <circle cx="12" cy="12" r="4" fill="#FFB366" stroke="none"></circle>130 <path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/>131 </svg>132 </div>133 <div class="text-title">Direct Sunlight?</div>134 </div>135 <div class="right" style="display:flex; align-items:center;">136 <div class="value">No</div>137 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>138 </div>139 </div>140 141 <!-- Hours of Direct Sunlight -->142 <div class="cell">143 <div class="left">144 <div class="icon-wrap" style="background:#FFF4E9;">145 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFA74D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">146 <circle cx="12" cy="12" r="4" fill="#FFB366" stroke="none"></circle>147 <path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/>148 </svg>149 </div>150 <div class="text-title">Hours of Direct Sunlight</div>151 </div>152 <div class="right" style="display:flex; align-items:center;">153 <div class="value">0 hours</div>154 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>155 </div>156 </div>157 158 <!-- Distance from Window -->159 <div class="cell">160 <div class="left">161 <div class="icon-wrap icon-gray">162 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#BFBFBF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">163 <rect x="4" y="3" width="16" height="18" rx="2"></rect>164 <path d="M4 9h16M12 3v18"/>165 </svg>166 </div>167 <div class="text-title">Distance from Window</div>168 </div>169 <div class="right" style="display:flex; align-items:center;">170 <div class="value purple">Not set</div>171 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>172 </div>173 </div>174 175 <!-- Window Orientation -->176 <div class="cell">177 <div class="left">178 <div class="icon-wrap icon-gray">179 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#BFBFBF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">180 <path d="M12 2v20M2 12h20"/>181 <circle cx="12" cy="12" r="9"></circle>182 </svg>183 </div>184 <div class="text-title">Window Orientation</div>185 </div>186 <div class="right" style="display:flex; align-items:center;">187 <div class="value purple">Not set</div>188 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>189 </div>190 </div>191 192 <!-- Grow Light -->193 <div class="cell">194 <div class="left">195 <div class="icon-wrap" style="background:#FFF4E9;">196 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#FFA74D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">197 <path d="M6 2h12l-2 8a4 4 0 11-8 0L6 2z"></path>198 <path d="M12 14v6"></path>199 </svg>200 </div>201 <div class="text-title">Grow Light?</div>202 </div>203 <div class="right" style="display:flex; align-items:center;">204 <div class="value">No</div>205 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>206 </div>207 </div>208 </div>209 210 <!-- Pot Section -->211 <div class="section-header" style="margin-top:8px;">212 <svg width="40" height="40" viewBox="0 0 24 24" fill="#E79B57">213 <path d="M4 3h16l-1.5 5H5.5L4 3z"></path>214 <path d="M6 10h12l-1 7a3 3 0 01-3 3H10a3 3 0 01-3-3l-1-7z" fill="#F0B27A"></path>215 </svg>216 <div class="name">Pot</div>217 </div>218 219 <div class="section">220 <!-- Pot Size -->221 <div class="cell">222 <div class="left">223 <div class="icon-wrap icon-gray">224 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#BFBFBF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">225 <path d="M4 3h16l-1.5 5H5.5L4 3z"></path>226 </svg>227 </div>228 <div class="text-title">Pot Size (diameter)</div>229 </div>230 <div class="right" style="display:flex; align-items:center;">231 <div class="value purple">Not set</div>232 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>233 </div>234 </div>235 236 <!-- Pot Type -->237 <div class="cell">238 <div class="left">239 <div class="icon-wrap icon-gray">240 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#BFBFBF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">241 <rect x="5" y="6" width="14" height="12" rx="2"></rect>242 </svg>243 </div>244 <div class="text-title">Pot Type</div>245 </div>246 <div class="right" style="display:flex; align-items:center;">247 <div class="value purple">Not set</div>248 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>249 </div>250 </div>251 252 <!-- Drainage -->253 <div class="cell">254 <div class="left">255 <div class="icon-wrap icon-gray">256 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#BFBFBF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">257 <path d="M12 2v6M8 4h8M6 12c2 0 2 4 6 4s4-4 6-4"></path>258 </svg>259 </div>260 <div class="text-title">Drainage</div>261 </div>262 <div class="right" style="display:flex; align-items:center;">263 <div class="value purple">Not set</div>264 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>265 </div>266 </div>267 268 <!-- Soil Type -->269 <div class="cell">270 <div class="left">271 <div class="icon-wrap" style="background:#FFF1EC;">272 <svg width="32" height="32" viewBox="0 0 24 24" fill="#C58A78">273 <circle cx="8" cy="10" r="2"></circle>274 <circle cx="14" cy="14" r="2"></circle>275 <circle cx="18" cy="10" r="2"></circle>276 </svg>277 </div>278 <div class="text-title">Soil Type</div>279 </div>280 <div class="right" style="display:flex; align-items:center;">281 <div class="value">Regular</div>282 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l8 8-8 8"/></svg>283 </div>284 </div>285 </div>286 287 <!-- Location Section -->288 <div class="section-header" style="padding-bottom:8px; margin-top:6px;">289 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#1DB954" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">290 <path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z" fill="none"></path>291 <circle cx="12" cy="10" r="3" fill="#1DB954" stroke="none"></circle>292 </svg>293 <div class="name">Location</div>294 </div>295 296 <!-- Bottom home indicator -->297 <div class="home-indicator">298 <div class="home-pill"></div>299 </div>300</div>301</body>302</html>