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 Guides UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;16 color: #3f3b4a;17 }18 19 .appbar {20 height: 140px;21 padding: 0 40px;22 display: flex;23 align-items: center;24 background: #fff;25 box-shadow: none;26 }27 .back-btn {28 width: 72px;29 height: 72px;30 display: inline-flex;31 align-items: center;32 justify-content: center;33 border-radius: 36px;34 color: #222;35 }36 .back-btn svg { width: 44px; height: 44px; }37 38 .content { padding: 0 40px; }39 40 /* Identify card */41 .identify-card {42 background: #eeedf4;43 border-radius: 28px;44 padding: 32px;45 margin-top: 8px;46 }47 .img-placeholder {48 width: 640px;49 height: 360px;50 background: #E0E0E0;51 border: 1px solid #BDBDBD;52 border-radius: 28px;53 display: flex;54 align-items: center;55 justify-content: center;56 color: #757575;57 font-size: 28px;58 font-weight: 600;59 }60 .question-row {61 display: flex;62 align-items: center;63 justify-content: space-between;64 margin: 28px 8px 24px;65 }66 .question-row h2 {67 margin: 0;68 font-size: 48px;69 font-weight: 800;70 letter-spacing: 0.2px;71 color: #4a4656;72 }73 .thumbs {74 display: flex;75 gap: 28px;76 font-size: 46px;77 line-height: 1;78 }79 .thumbs span { color: #e9c565; }80 81 .cta {82 margin: 8px auto 8px;83 width: 640px;84 height: 120px;85 border-radius: 60px;86 background: #f5d774;87 box-shadow: 0 6px 0 #e1c663, 0 10px 24px rgba(0,0,0,0.08);88 display: flex;89 align-items: center;90 justify-content: center;91 font-weight: 800;92 font-size: 38px;93 color: #2d2b36;94 letter-spacing: 0.4px;95 }96 .cta svg { margin-left: 18px; width: 28px; height: 28px; }97 98 /* Guides section */99 .section-header {100 display: flex;101 align-items: center;102 justify-content: space-between;103 margin: 72px 6px 32px;104 }105 .section-header h3 {106 margin: 0;107 font-size: 44px;108 font-weight: 800;109 color: #403c4c;110 }111 .more {112 display: inline-flex;113 align-items: center;114 gap: 10px;115 color: #7a7786;116 font-size: 32px;117 font-weight: 600;118 }119 .more svg { width: 26px; height: 26px; }120 121 .pill-grid {122 display: grid;123 grid-template-columns: repeat(2, 1fr);124 gap: 26px 26px;125 }126 .pill {127 height: 160px;128 border-radius: 36px;129 padding: 28px;130 display: flex;131 align-items: center;132 justify-content: space-between;133 }134 .pill .left {135 display: flex;136 align-items: center;137 gap: 22px;138 }139 .icon {140 width: 82px;141 height: 82px;142 border-radius: 50%;143 display: inline-flex;144 align-items: center;145 justify-content: center;146 }147 .label-group {148 display: flex;149 flex-direction: column;150 }151 .label-group .title {152 font-size: 28px;153 color: #6c6977;154 font-weight: 700;155 letter-spacing: 0.2px;156 margin-bottom: 8px;157 }158 .label-group .value {159 font-size: 40px;160 font-weight: 800;161 color: #3f3b4a;162 }163 .chev {164 width: 28px;165 height: 28px;166 opacity: 0.75;167 }168 169 /* Color themes for pills */170 .pink { background: #f3d6df; }171 .pink .icon { background: #e06a86; color: #fff; }172 .rose { background: #efc8cf; }173 .rose .icon { background: #d9576b; color: #fff; }174 .cream { background: #fff1db; }175 .cream .icon { background: #f0b951; color: #fff; }176 .tan { background: #fdebd6; }177 .tan .icon { background: #e9b365; color: #fff; }178 .light-yellow { background: #fff4de; }179 .light-yellow .icon { background: #f5cc6a; color: #fff; }180 .pale-yellow { background: #fff7e8; }181 .pale-yellow .icon { background: #e2c469; color: #fff; }182 .mint { background: #d9efe8; }183 .mint .icon { background: #4aa782; color: #fff; }184 .seafoam { background: #ddeadf; }185 .seafoam .icon { background: #40a98c; color: #fff; }186 .blue { background: #d9ecf9; }187 .blue .icon { background: #5aa6da; color: #fff; }188 .sky { background: #cfe6f5; }189 .sky .icon { background: #478ec7; color: #fff; }190 191 /* small helper */192 .icon svg { width: 42px; height: 42px; }193</style>194</head>195<body>196<div id="render-target">197 198 <div class="appbar">199 <div class="back-btn" aria-label="Back">200 <svg viewBox="0 0 24 24" fill="none">201 <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#222" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>202 </svg>203 </div>204 </div>205 206 <div class="content">207 <div class="identify-card">208 <div class="img-placeholder">[IMG: Plant foliage close-up]</div>209 210 <div class="question-row">211 <h2>Does this look like your plant?</h2>212 <div class="thumbs">213 <span>👍</span>214 <span>👎</span>215 </div>216 </div>217 218 <div class="cta">219 View All Results220 <svg viewBox="0 0 24 24" fill="none">221 <path d="M9 6l6 6-6 6" stroke="#282633" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 </div>225 226 <div class="section-header">227 <h3>Guides</h3>228 <div class="more">More229 <svg viewBox="0 0 24 24" fill="none">230 <path d="M5 9l7 7 7-7" stroke="#7a7786" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>231 </svg>232 </div>233 </div>234 235 <div class="pill-grid">236 <!-- Difficulty -->237 <div class="pill pink">238 <div class="left">239 <div class="icon">240 <svg viewBox="0 0 24 24" fill="none">241 <circle cx="12" cy="12" r="9" fill="rgba(255,255,255,0.25)"/>242 <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>243 </svg>244 </div>245 <div class="label-group">246 <div class="title">Difficulty</div>247 <div class="value">Medium</div>248 </div>249 </div>250 <svg class="chev" viewBox="0 0 24 24" fill="none">251 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 255 <!-- Toxicity -->256 <div class="pill rose">257 <div class="left">258 <div class="icon">259 <svg viewBox="0 0 24 24" fill="none">260 <circle cx="12" cy="12" r="9" fill="rgba(255,255,255,0.25)"/>261 <path d="M12 7l3 3-3 3-3-3 3-3z" fill="#fff"/>262 <circle cx="9" cy="14.5" r="1.2" fill="#fff"/>263 <circle cx="15" cy="14.5" r="1.2" fill="#fff"/>264 </svg>265 </div>266 <div class="label-group">267 <div class="title">Toxicity</div>268 <div class="value">Toxic</div>269 </div>270 </div>271 <svg class="chev" viewBox="0 0 24 24" fill="none">272 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>273 </svg>274 </div>275 276 <!-- Soil Type -->277 <div class="pill cream">278 <div class="left">279 <div class="icon">280 <svg viewBox="0 0 24 24" fill="none">281 <circle cx="12" cy="12" r="9" fill="rgba(255,255,255,0.25)"/>282 <circle cx="8" cy="10" r="1.6" fill="#fff"/>283 <circle cx="12" cy="14" r="1.6" fill="#fff"/>284 <circle cx="16" cy="10" r="1.6" fill="#fff"/>285 </svg>286 </div>287 <div class="label-group">288 <div class="title">Soil Type</div>289 <div class="value">Retains water</div>290 </div>291 </div>292 <svg class="chev" viewBox="0 0 24 24" fill="none">293 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>294 </svg>295 </div>296 297 <!-- Fertilizer -->298 <div class="pill tan">299 <div class="left">300 <div class="icon">301 <svg viewBox="0 0 24 24" fill="none">302 <path d="M12 6c2 2 2 6 0 8-2-2-2-6 0-8z" fill="rgba(255,255,255,0.85)"/>303 <path d="M8 16h8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>304 </svg>305 </div>306 <div class="label-group">307 <div class="title">Fertilizer</div>308 <div class="value">Yes</div>309 </div>310 </div>311 <svg class="chev" viewBox="0 0 24 24" fill="none">312 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>313 </svg>314 </div>315 316 <!-- Direct Sun -->317 <div class="pill light-yellow">318 <div class="left">319 <div class="icon">320 <svg viewBox="0 0 24 24" fill="none">321 <circle cx="12" cy="12" r="4" fill="#fff"/>322 <path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.5 4.5l2.8 2.8M16.7 16.7l2.8 2.8M4.5 19.5l2.8-2.8M16.7 7.3l2.8-2.8" stroke="#fff" stroke-width="1.6" stroke-linecap="round"/>323 </svg>324 </div>325 <div class="label-group">326 <div class="title">Direct Sun</div>327 <div class="value">No</div>328 </div>329 </div>330 <svg class="chev" viewBox="0 0 24 24" fill="none">331 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>332 </svg>333 </div>334 335 <!-- Placement -->336 <div class="pill pale-yellow">337 <div class="left">338 <div class="icon">339 <svg viewBox="0 0 24 24" fill="none">340 <rect x="6" y="6" width="12" height="12" rx="2" stroke="#fff" stroke-width="2"/>341 <path d="M6 12h12" stroke="#fff" stroke-width="2"/>342 </svg>343 </div>344 <div class="label-group">345 <div class="title">Placement</div>346 <div class="value">< 3ft</div>347 </div>348 </div>349 <svg class="chev" viewBox="0 0 24 24" fill="none">350 <path d="M9 6l6 6-6 6" stroke="#57536a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>351 </svg>352 </div>353 354 <!-- Pot Type -->355 <div class="pill mint">356 <div class="left">357 <div class="icon">358 <svg viewBox="0 0 24 24" fill="none">359 <rect x="7" y="6" width="10" height="5" rx="1.5" fill="#fff"/>360 <path d="M8 11l1 6h6l1-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>361 </svg>362 </div>363 <div class="label-group">364 <div class="title">Pot Type</div>365 <div class="value">Non-Porous</div>366 </div>367 </div>368 <svg class="chev" viewBox="0 0 24 24" fill="none">369 <path d="M9 6l6 6-6 6" stroke="#4a4760" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>370 </svg>371 </div>372 373 <!-- USDA Zone -->374 <div class="pill seafoam">375 <div class="left">376 <div class="icon">377 <svg viewBox="0 0 24 24" fill="none">378 <path d="M12 3c3.9 0 7 3.1 7 7 0 5.1-7 11-7 11S5 15.1 5 10c0-3.9 3.1-7 7-7z" stroke="#fff" stroke-width="2" fill="rgba(255,255,255,0.25)"/>379 <circle cx="12" cy="10" r="2" fill="#fff"/>380 </svg>381 </div>382 <div class="label-group">383 <div class="title">USDA Zone</div>384 <div class="value">10a - 12a</div>385 </div>386 </div>387 <svg class="chev" viewBox="0 0 24 24" fill="none">388 <path d="M9 6l6 6-6 6" stroke="#4a4760" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>389 </svg>390 </div>391 392 <!-- Water Needs -->393 <div class="pill blue">394 <div class="left">395 <div class="icon">396 <svg viewBox="0 0 24 24" fill="none">397 <path d="M12 4s5 5 5 9a5 5 0 11-10 0c0-4 5-9 5-9z" fill="#fff"/>398 </svg>399 </div>400 <div class="label-group">401 <div class="title">Water Needs</div>402 <div class="value">1-2X week</div>403 </div>404 </div>405 <svg class="chev" viewBox="0 0 24 24" fill="none">406 <path d="M9 6l6 6-6 6" stroke="#4a4760" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>407 </svg>408 </div>409 410 <!-- Humidity -->411 <div class="pill sky">412 <div class="left">413 <div class="icon">414 <svg viewBox="0 0 24 24" fill="none">415 <path d="M6 9c4 0 4 6 8 6s4-6 8-6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>416 <path d="M6 13c4 0 4 6 8 6s4-6 8-6" stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.85"/>417 </svg>418 </div>419 <div class="label-group">420 <div class="title">Humidity</div>421 <div class="value">High</div>422 </div>423 </div>424 <svg class="chev" viewBox="0 0 24 24" fill="none">425 <path d="M9 6l6 6-6 6" stroke="#4a4760" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>426 </svg>427 </div>428 429 </div>430 </div>431 432</div>433</body>434</html>