GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Plant App UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 0;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 96px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 32px;28 color: #111;29 font-weight: 600;30 font-size: 42px;31 }32 .status-left { display: flex; align-items: center; gap: 24px; }33 .status-right { display: flex; align-items: center; gap: 28px; }34 .status-dot {35 width: 22px; height: 22px; background:#000; border-radius: 50%;36 }37 .icon-sq { width: 38px; height: 38px; border-radius: 8px; background:#000; }38 39 /* Header / forest */40 .header {41 position: absolute;42 top: 96px;43 left: 0;44 width: 1080px;45 height: 760px;46 background: linear-gradient(180deg, #75c78d 0%, #7fd1a2 30%, #a9dfb7 70%, #cbeed1 100%);47 border-bottom-left-radius: 64px;48 border-bottom-right-radius: 64px;49 box-shadow: inset 0 -60px 120px rgba(0,0,0,0.05);50 }51 52 /* World title */53 .world-row {54 position: absolute;55 top: 90px;56 left: 64px;57 display: flex;58 align-items: center;59 gap: 18px;60 color: #ffffff;61 }62 .world-row .leaf {63 width: 46px; height: 46px;64 background: rgba(255,255,255,0.22);65 border-radius: 14px;66 display: flex; align-items: center; justify-content: center;67 backdrop-filter: blur(2px);68 }69 .world-row .title {70 font-size: 54px; font-weight: 700; letter-spacing: 0.2px;71 }72 .world-row .chev {73 margin-left: 8px;74 width: 34px; height: 34px;75 display: flex; align-items: center; justify-content: center;76 }77 78 /* Feature tiles */79 .feature-tiles {80 position: absolute;81 top: 224px;82 left: 64px;83 right: 64px;84 display: flex;85 justify-content: space-between;86 }87 .tile {88 width: 210px; height: 210px;89 border-radius: 36px;90 box-shadow: 0 10px 24px rgba(0,0,0,0.12);91 display: flex; align-items: center; justify-content: center;92 }93 .tile.calendar { background: linear-gradient(180deg,#f7b56d,#f08b44); }94 .tile.diagnose { background: linear-gradient(180deg,#d78bd0,#b86fb6); }95 .tile.guide { background: linear-gradient(180deg,#6bb7ff,#5aa3f0); }96 .tile.share { background: linear-gradient(180deg,#f0a9be,#ef90a9); }97 98 .tile-labels {99 position: absolute;100 top: 470px;101 left: 64px;102 right: 64px;103 display: flex;104 justify-content: space-between;105 color: #283b2e;106 }107 .tile-labels .label {108 width: 210px;109 text-align: center;110 font-size: 40px;111 font-weight: 600;112 color: #1f3a2a;113 }114 115 /* Search bar */116 .search-bar {117 position: absolute;118 top: 650px;119 left: 64px;120 width: 952px;121 height: 138px;122 background: #dff4e6;123 border-radius: 68px;124 display: flex; align-items: center; justify-content: space-between;125 padding: 0 44px;126 box-shadow: 0 8px 20px rgba(63,132,93,0.15);127 }128 .search-bar .placeholder { color: #6c8b76; font-size: 48px; }129 .search-icon {130 width: 88px; height: 88px; border-radius: 50%;131 background: #a8e0b9; display:flex; align-items:center; justify-content:center;132 }133 134 /* Cards section background */135 .content-area {136 position: absolute;137 top: 856px;138 left: 0;139 right: 0;140 bottom: 0;141 background: #fff;142 }143 144 /* Identify/Advanced cards */145 .cards {146 position: absolute;147 top: 70px; left: 64px; right: 64px;148 display: flex; gap: 56px;149 }150 .card {151 flex: 1;152 height: 520px;153 background: #ffffff;154 border-radius: 36px;155 box-shadow: 0 18px 34px rgba(0,0,0,0.08);156 padding: 56px;157 }158 .card h3 { margin: 0; font-size: 64px; color: #1f3929; }159 .card p { margin: 18px 0 0; font-size: 44px; color: #4a6154; line-height: 1.2; }160 .card .icon-box {161 width: 150px; height: 150px; border-radius: 24px;162 background: #fbe7e7;163 display: flex; align-items: center; justify-content: center;164 margin-bottom: 28px;165 }166 .card.advanced .icon-box { background: #e7faec; }167 168 /* Premium banner */169 .premium {170 position: absolute;171 bottom: 390px;172 left: 64px;173 width: 952px;174 height: 210px;175 background: linear-gradient(90deg, #5dbb83, #51af7a);176 border-radius: 40px;177 box-shadow: 0 18px 34px rgba(23,98,60,0.28);178 display: flex; align-items: center; justify-content: space-between;179 padding: 0 38px;180 color: #fff;181 }182 .premium .badge {183 width: 160px; height: 160px; border-radius: 30px;184 background: rgba(255,255,255,0.2);185 display: flex; align-items: center; justify-content: center;186 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);187 }188 .premium .texts {189 flex: 1;190 padding: 0 32px;191 }192 .premium .title { font-size: 64px; font-weight: 700; margin: 0; }193 .premium .subtitle { margin: 6px 0 0; font-size: 40px; opacity: 0.9; }194 .premium .go {195 width: 112px; height: 112px; border-radius: 56px;196 background: #e9fff0; display:flex; align-items:center; justify-content:center;197 }198 199 /* Bottom nav */200 .bottom-nav {201 position: absolute;202 bottom: 0; left: 0; width: 1080px; height: 220px;203 background: #ffffff;204 border-top-left-radius: 36px; border-top-right-radius: 36px;205 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);206 display: flex; align-items: center; justify-content: space-around;207 }208 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #8c9e90; }209 .nav-item .icon {210 width: 90px; height: 90px; border-radius: 24px;211 background: #f3f6f4; display:flex; align-items:center; justify-content:center;212 }213 .nav-item.active .icon { background: #e4f5ea; }214 .nav-item.active span { color: #438a64; font-weight: 700; }215 .nav-item span { font-size: 38px; }216 217 /* Simple helper for centered SVG sizing */218 svg { display: block; }219 220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status bar -->226 <div class="status-bar">227 <div class="status-left">228 <div>11:08</div>229 <div class="status-dot"></div>230 <div class="status-dot" style="width:32px;height:32px;"></div>231 <div class="status-dot" style="width:18px;height:18px;"></div>232 <div class="icon-sq"></div>233 </div>234 <div class="status-right">235 <!-- Wifi -->236 <svg width="40" height="40" viewBox="0 0 24 24">237 <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M9 16c2-2 4-2 6 0M12 19a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>238 </svg>239 <!-- Battery -->240 <svg width="44" height="44" viewBox="0 0 24 24">241 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#111" fill="none" stroke-width="2"/>242 <rect x="4" y="8" width="12" height="8" rx="1" fill="#111"/>243 <rect x="20" y="10" width="2" height="4" fill="#111"/>244 </svg>245 </div>246 </div>247 248 <!-- Header gradient area -->249 <div class="header">250 <!-- World title -->251 <div class="world-row">252 <div class="leaf">253 <svg width="28" height="28" viewBox="0 0 24 24">254 <path d="M5 19c7-1 13-9 13-14-4 0-12 6-12 12 0 1 0 1 1 2z" fill="#fff" opacity="0.85"/>255 </svg>256 </div>257 <div class="title">World</div>258 <div class="chev">259 <svg width="28" height="28" viewBox="0 0 24 24">260 <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 </div>264 265 <!-- Feature tiles -->266 <div class="feature-tiles">267 <div class="tile calendar">268 <svg width="120" height="120" viewBox="0 0 24 24">269 <rect x="3" y="5" width="18" height="16" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>270 <line x1="3" y1="9" x2="21" y2="9" stroke="#fff" stroke-width="2"/>271 <line x1="7" y1="1" x2="7" y2="7" stroke="#fff" stroke-width="2"/>272 <line x1="17" y1="1" x2="17" y2="7" stroke="#fff" stroke-width="2"/>273 <rect x="8" y="12" width="8" height="6" rx="1" fill="#fff" opacity="0.85"/>274 </svg>275 </div>276 <div class="tile diagnose">277 <svg width="120" height="120" viewBox="0 0 24 24">278 <path d="M12 21c4-4 8-7 8-11a6 6 0 0 0-12 0c0 4 4 7 4 11z" fill="none" stroke="#fff" stroke-width="2"/>279 <path d="M4 13c4 0 4-3 7-3s3 3 7 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>280 </svg>281 </div>282 <div class="tile guide">283 <svg width="120" height="120" viewBox="0 0 24 24">284 <rect x="10" y="3" width="4" height="18" fill="#fff"/>285 <path d="M12 6l7 2-7 2M12 14L5 12l7-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>286 </svg>287 </div>288 <div class="tile share">289 <svg width="120" height="120" viewBox="0 0 24 24">290 <circle cx="6" cy="12" r="3" stroke="#fff" stroke-width="2" fill="none"/>291 <circle cx="18" cy="6" r="3" stroke="#fff" stroke-width="2" fill="none"/>292 <circle cx="18" cy="18" r="3" stroke="#fff" stroke-width="2" fill="none"/>293 <path d="M9 11l6-4M9 13l6 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>294 </svg>295 </div>296 </div>297 298 <!-- Tile labels -->299 <div class="tile-labels">300 <div class="label">Calendar</div>301 <div class="label">Diagnose</div>302 <div class="label">Guide</div>303 <div class="label">Share</div>304 </div>305 306 <!-- Search bar -->307 <div class="search-bar">308 <div class="placeholder">Search plant</div>309 <div class="search-icon">310 <svg width="52" height="52" viewBox="0 0 24 24">311 <circle cx="11" cy="11" r="7" stroke="#2f6e4e" stroke-width="2" fill="none"/>312 <line x1="16" y1="16" x2="21" y2="21" stroke="#2f6e4e" stroke-width="2" stroke-linecap="round"/>313 </svg>314 </div>315 </div>316 </div>317 318 <!-- Content area -->319 <div class="content-area">320 <!-- Identify / Advanced cards -->321 <div class="cards">322 <div class="card">323 <div class="icon-box">324 <svg width="100" height="100" viewBox="0 0 24 24">325 <rect x="3" y="7" width="18" height="12" rx="3" stroke="#e67b7b" stroke-width="2" fill="none"/>326 <circle cx="12" cy="13" r="3" fill="#e67b7b"/>327 <rect x="8" y="4" width="8" height="4" rx="2" fill="#e67b7b"/>328 </svg>329 </div>330 <h3>Identify</h3>331 <p>Tap to<br>recognize</p>332 </div>333 334 <div class="card advanced">335 <div class="icon-box">336 <svg width="110" height="110" viewBox="0 0 24 24">337 <rect x="5" y="5" width="12" height="10" rx="2" stroke="#59b179" stroke-width="2" fill="none"/>338 <rect x="8" y="8" width="9" height="7" rx="1" fill="#59b179" opacity="0.3"/>339 <rect x="2" y="9" width="12" height="9" rx="2" stroke="#59b179" stroke-width="2" fill="none"/>340 <!-- Crown -->341 <path d="M18 3l1 2 1-2 1 2 1-2v5h-6V3z" fill="#59b179"/>342 </svg>343 </div>344 <h3>Advanced</h3>345 <p>Accurate<br>results</p>346 </div>347 </div>348 349 <!-- Premium banner -->350 <div class="premium">351 <div class="badge">352 <svg width="92" height="92" viewBox="0 0 24 24">353 <path d="M12 3l6 6-6 12-6-12 6-6z" stroke="#fff" stroke-width="2" fill="none"/>354 <path d="M7 9h10l-5 10-5-10z" fill="#fff" opacity="0.5"/>355 </svg>356 </div>357 <div class="texts">358 <div class="title">Go Premium</div>359 <div class="subtitle">Tap to upgrade your account</div>360 </div>361 <div class="go">362 <svg width="60" height="60" viewBox="0 0 24 24">363 <circle cx="12" cy="12" r="11" fill="#e9fff0"/>364 <path d="M8 5l9 7-9 7V5z" fill="#49a073"/>365 </svg>366 </div>367 </div>368 369 <!-- Bottom navigation -->370 <div class="bottom-nav">371 <div class="nav-item active">372 <div class="icon">373 <svg width="50" height="50" viewBox="0 0 24 24">374 <path d="M3 12l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" fill="#4aa672"/>375 </svg>376 </div>377 <span>Home</span>378 </div>379 <div class="nav-item">380 <div class="icon">381 <svg width="50" height="50" viewBox="0 0 24 24">382 <path d="M12 21c4-4 8-7 8-11a6 6 0 0 0-12 0c0 4 4 7 4 11z" fill="#6f8b7c"/>383 </svg>384 </div>385 <span>My Plant</span>386 </div>387 <div class="nav-item">388 <div class="icon">389 <svg width="50" height="50" viewBox="0 0 24 24">390 <path d="M18 12c-1 5-4 8-8 8-1.5 0-2.5-.5-3.5-1.5M6 18l-2-2M16 5l3 3" stroke="#6f8b7c" stroke-width="2" fill="none" stroke-linecap="round"/>391 <path d="M13 6h6v6" stroke="#6f8b7c" stroke-width="2" fill="none"/>392 </svg>393 </div>394 <span>Tasks</span>395 </div>396 <div class="nav-item">397 <div class="icon">398 <svg width="50" height="50" viewBox="0 0 24 24">399 <rect x="4" y="4" width="6" height="6" fill="#6f8b7c"/>400 <rect x="14" y="4" width="6" height="6" fill="#6f8b7c"/>401 <rect x="4" y="14" width="6" height="6" fill="#6f8b7c"/>402 <rect x="14" y="14" width="6" height="6" fill="#6f8b7c"/>403 </svg>404 </div>405 <span>More</span>406 </div>407 </div>408 </div>409 410</div>411</body>412</html>