GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>My Plants UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #0b4a4f 0%, #0a3a42 40%, #0a3138 100%);15 border-radius: 32px;16 box-shadow: 0 20px 60px rgba(0,0,0,0.4);17 color: #cfe9e6;18 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 18px;25 left: 32px;26 right: 32px;27 height: 48px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #e7f7f5;32 opacity: 0.9;33 font-size: 28px;34 }35 .status-left { display: flex; align-items: center; gap: 20px; }36 .status-dot { width: 8px; height: 8px; background: #d8f6f3; border-radius: 50%; opacity: 0.7; }37 .status-right { display: flex; align-items: center; gap: 22px; }38 .icon-signal, .icon-battery { width: 30px; height: 30px; opacity: 0.9; }39 .icon-signal svg, .icon-battery svg { display: block; }40 41 /* Search button */42 .search-btn {43 position: absolute;44 right: 40px;45 top: 132px;46 width: 100px;47 height: 100px;48 background: rgba(33, 119, 113, 0.35);49 border-radius: 26px;50 box-shadow: inset 0 0 0 2px rgba(120, 206, 192, 0.25);51 display: flex;52 align-items: center;53 justify-content: center;54 }55 .search-btn svg { width: 56px; height: 56px; stroke: #7ee0cf; }56 57 /* Header content */58 .header {59 position: absolute;60 top: 100px;61 left: 56px;62 right: 56px;63 height: 380px;64 }65 .title {66 font-size: 84px;67 font-weight: 700;68 color: #7ee0cf;69 letter-spacing: 0.5px;70 margin-top: 30px;71 }72 .counts {73 margin-top: 28px;74 display: flex;75 align-items: baseline;76 justify-content: space-between;77 }78 .count-left {79 font-size: 72px;80 font-weight: 700;81 color: #bdf6e9;82 }83 .count-left small {84 font-size: 40px;85 font-weight: 500;86 margin-left: 12px;87 color: #7ac9bd;88 }89 .count-right {90 font-size: 56px;91 font-weight: 700;92 color: #b0c7c5;93 }94 .count-right small {95 font-size: 36px;96 font-weight: 500;97 margin-left: 12px;98 color: #7a8e8c;99 }100 .progress-line {101 margin-top: 24px;102 height: 8px;103 border-radius: 8px;104 background: linear-gradient(90deg, #22d78d 0 38%, #7aa0a0 38% 100%);105 }106 107 /* Tabs */108 .tabs {109 position: absolute;110 top: 520px;111 left: 40px;112 right: 40px;113 height: 100px;114 display: flex;115 align-items: center;116 gap: 40px;117 border-top: 1px solid rgba(255,255,255,0.12);118 padding-top: 24px;119 }120 .tab {121 color: #99b7b4;122 font-size: 40px;123 }124 .tab.active {125 background: linear-gradient(180deg, #3de38d, #1fbf7a);126 color: #083135;127 padding: 22px 34px;128 border-radius: 36px;129 font-weight: 700;130 }131 132 /* Plant card */133 .card {134 position: absolute;135 top: 680px;136 left: 40px;137 right: 40px;138 height: 360px;139 background: #0c2530;140 border-radius: 40px;141 box-shadow: 0 14px 30px rgba(0,0,0,0.35);142 display: flex;143 padding: 26px;144 gap: 30px;145 }146 .card .img {147 width: 340px;148 height: 304px;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 border-radius: 32px;152 display: flex;153 align-items: center;154 justify-content: center;155 color: #757575;156 font-size: 32px;157 text-align: center;158 line-height: 1.2;159 }160 .card-content {161 flex: 1;162 position: relative;163 padding-top: 10px;164 }165 .card-title {166 font-size: 52px;167 font-weight: 700;168 color: #e9f6f4;169 }170 .card-sub {171 margin-top: 8px;172 font-size: 36px;173 color: #87a2a0;174 }175 .settings {176 position: absolute;177 right: 20px;178 top: 8px;179 font-size: 52px;180 color: #cfe9e6;181 opacity: 0.8;182 }183 .action-icons {184 display: flex;185 gap: 26px;186 margin-top: 22px;187 }188 .circle-btn {189 width: 96px;190 height: 96px;191 border-radius: 50%;192 display: inline-flex;193 align-items: center;194 justify-content: center;195 box-shadow: inset 0 0 0 6px rgba(30, 190, 140, 0.22);196 background: rgba(30, 190, 140, 0.10);197 }198 .circle-btn.yellow {199 box-shadow: inset 0 0 0 6px rgba(255, 205, 70, 0.5);200 background: rgba(255, 205, 70, 0.15);201 }202 .status-text {203 margin-top: 26px;204 font-size: 38px;205 color: #2dde8d;206 }207 .status-text b {208 color: #00e676;209 font-weight: 800;210 }211 .status-inline {212 display: inline-flex;213 align-items: center;214 gap: 14px;215 }216 217 /* Add button */218 .add-btn {219 position: absolute;220 bottom: 360px;221 left: 50%;222 transform: translateX(-50%);223 width: 420px;224 height: 120px;225 background: linear-gradient(180deg, #6df39c 0%, #24c776 100%);226 border-radius: 60px;227 box-shadow: 0 18px 30px rgba(0,0,0,0.35);228 display: flex;229 align-items: center;230 justify-content: center;231 gap: 18px;232 color: #083135;233 font-size: 46px;234 font-weight: 800;235 }236 .add-btn .plus {237 width: 52px; height: 52px; border-radius: 50%;238 background: rgba(255,255,255,0.8);239 display: flex; align-items: center; justify-content: center;240 }241 .add-btn .plus svg { width: 32px; height: 32px; }242 243 /* Bottom nav */244 .bottom-nav {245 position: absolute;246 bottom: 140px;247 left: 0;248 right: 0;249 height: 180px;250 background: rgba(6, 22, 28, 0.95);251 display: flex;252 align-items: center;253 justify-content: space-around;254 padding: 0 30px;255 border-top: 1px solid rgba(255,255,255,0.08);256 }257 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }258 .nav-label { font-size: 32px; color: #c7d8d6; opacity: 0.85; }259 .nav-item.active .nav-label { color: #32e288; font-weight: 700; opacity: 1; }260 .nav-icon svg { width: 62px; height: 62px; }261 .nav-item.active .nav-icon svg { fill: #32e288; stroke: #32e288; }262 .nav-icon svg { fill: #a9bebb; stroke: #a9bebb; }263 .community-dot {264 position: absolute;265 top: -4px;266 right: -4px;267 width: 14px; height: 14px;268 background: #32e288;269 border-radius: 50%;270 border: 3px solid rgba(6,22,28,0.95);271 }272 273 /* Home indicator */274 .home-indicator {275 position: absolute;276 bottom: 60px;277 left: 50%;278 transform: translateX(-50%);279 width: 360px;280 height: 16px;281 border-radius: 10px;282 background: rgba(255,255,255,0.7);283 }284</style>285</head>286<body>287<div id="render-target">288 289 <div class="status-bar">290 <div class="status-left">291 <div style="font-weight:700;">3:40</div>292 <span class="status-dot"></span>293 <span class="status-dot"></span>294 <span class="status-dot"></span>295 <span class="status-dot"></span>296 <span class="status-dot"></span>297 </div>298 <div class="status-right">299 <div class="icon-signal">300 <svg viewBox="0 0 24 24">301 <path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z" fill="#e7f7f5"/>302 </svg>303 </div>304 <div class="icon-battery">305 <svg viewBox="0 0 28 16">306 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#e7f7f5" stroke-width="2"/>307 <rect x="3" y="4" width="14" height="8" fill="#e7f7f5"/>308 <rect x="24" y="6" width="3" height="4" rx="1" ry="1" fill="#e7f7f5"/>309 </svg>310 </div>311 </div>312 </div>313 314 <div class="search-btn">315 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">316 <circle cx="10" cy="10" r="6" stroke="#7ee0cf"/>317 <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#7ee0cf"/>318 </svg>319 </div>320 321 <div class="header">322 <div class="title">My Plants</div>323 <div class="counts">324 <div class="count-left">1 <small>plant</small></div>325 <div class="count-right">0 <small>rooms</small></div>326 </div>327 <div class="progress-line"></div>328 </div>329 330 <div class="tabs">331 <div class="tab active">All Plants</div>332 <div class="tab">Next Watering</div>333 <div class="tab">Date added</div>334 <div class="tab">Alphabetical</div>335 </div>336 337 <div class="card">338 <div class="img">[IMG: Tulips in vases]</div>339 <div class="card-content">340 <div class="settings">⚙</div>341 <div class="card-title">Tulips</div>342 <div class="card-sub">Tulipa</div>343 344 <div class="action-icons">345 <div class="circle-btn">346 <svg viewBox="0 0 24 24">347 <path d="M12 3c3 5-3 8-3 11a3 3 0 006 0c0-3-6-6-3-11z" fill="#2dde8d"/>348 </svg>349 </div>350 <div class="circle-btn yellow">351 <svg viewBox="0 0 24 24">352 <rect x="6" y="9" width="12" height="6" rx="3" ry="3" fill="#ffcd46"/>353 </svg>354 </div>355 <div class="circle-btn">356 <svg viewBox="0 0 24 24">357 <path d="M5 19l7-13 7 13H5z" fill="#2dde8d"/>358 </svg>359 </div>360 </div>361 362 <div class="status-text">363 <span class="status-inline">364 <svg viewBox="0 0 24 24" width="36" height="36">365 <path d="M12 3c3 5-3 8-3 11a3 3 0 006 0c0-3-6-6-3-11z" fill="#2dde8d"/>366 </svg>367 water <b>in 10 days</b>368 </span>369 </div>370 </div>371 </div>372 373 <div class="add-btn">374 <div class="plus">375 <svg viewBox="0 0 24 24">376 <path d="M12 5v14M5 12h14" stroke="#083135" stroke-width="3" stroke-linecap="round"/>377 </svg>378 </div>379 <div>Add</div>380 </div>381 382 <div class="bottom-nav">383 <div class="nav-item">384 <div class="nav-icon">385 <svg viewBox="0 0 24 24">386 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z"/>387 </svg>388 </div>389 <div class="nav-label">Home</div>390 </div>391 <div class="nav-item active">392 <div class="nav-icon">393 <svg viewBox="0 0 24 24">394 <path d="M12 4c-2 2-3 3-3 5a3 3 0 0 0 6 0c0-2-1-3-3-5zm-5 12c3-2 7-2 10 0-3 4-7 4-10 0z"/>395 </svg>396 </div>397 <div class="nav-label">Plants</div>398 </div>399 <div class="nav-item">400 <div class="nav-icon">401 <svg viewBox="0 0 24 24">402 <path d="M12 3c4 0 7 3 7 7s-3 7-7 7-7-3-7-7 3-7 7-7zm-2 6a2 2 0 1 0 4 0 2 2 0 1 0-4 0z"/>403 </svg>404 </div>405 <div class="nav-label">Pod</div>406 </div>407 <div class="nav-item" style="position: relative;">408 <div class="nav-icon" style="position: relative;">409 <svg viewBox="0 0 24 24">410 <path d="M4 20l10-4 6-10-10 4-6 10zm8-9l1 1 2-4-3 3z"/>411 </svg>412 <span class="community-dot"></span>413 </div>414 <div class="nav-label">Community</div>415 </div>416 <div class="nav-item">417 <div class="nav-icon">418 <svg viewBox="0 0 24 24">419 <circle cx="12" cy="8" r="4"/>420 <path d="M4 20c0-4 4-6 8-6s8 2 8 6"/>421 </svg>422 </div>423 <div class="nav-label">Profile</div>424 </div>425 </div>426 427 <div class="home-indicator"></div>428 429</div>430</body>431</html>