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>Flora Plus 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, #073a3f 0%, #063137 40%, #072d33 100%);15 color: #EAF7F6;16 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Top status bar mock */20 .status-bar {21 height: 62px;22 padding: 20px 34px 0 34px;23 font-weight: 600;24 font-size: 32px;25 display: flex;26 align-items: center;27 gap: 26px;28 opacity: 0.85;29 }30 .status-icons { margin-left: auto; display: flex; gap: 28px; align-items: center; }31 .dot { width: 10px; height: 10px; background: #B2CED0; border-radius: 50%; display: inline-block; }32 33 /* Top banner */34 .banner {35 margin: 18px 0 0 0;36 height: 170px;37 background: linear-gradient(90deg, #0d3f45 0%, #0a3a40 100%);38 display: flex;39 align-items: center;40 padding: 0 40px;41 }42 .banner .logo {43 width: 54px; height: 54px; border-radius: 14px;44 background: #ff8f2b;45 margin-right: 24px;46 display: flex; align-items: center; justify-content: center;47 }48 .leaf-icon {49 width: 30px; height: 30px;50 }51 .banner-text {52 font-size: 46px; font-weight: 700; letter-spacing: 0.5px;53 }54 .banner-text .plus { color: #39e589; }55 .banner-arrow {56 margin-left: auto;57 width: 54px; height: 54px; border-radius: 27px;58 background: #184b4f; display: flex; align-items: center; justify-content: center;59 }60 .banner-arrow svg { width: 28px; height: 28px; }61 62 /* Feedback pill */63 .feedback-pill {64 margin: 36px 40px 0;65 height: 110px;66 border-radius: 55px;67 background: linear-gradient(90deg, #43e38f 0%, #29b8a0 100%);68 display: flex; align-items: center; padding: 0 36px;69 box-shadow: 0 6px 18px rgba(0,0,0,0.25);70 color: #093c3f; font-weight: 700; font-size: 42px;71 }72 .feedback-pill .bubble {73 width: 64px; height: 64px; border-radius: 50%;74 background: #ffffff;75 display: flex; align-items: center; justify-content: center;76 margin-right: 22px;77 }78 .feedback-pill .chev {79 margin-left: auto; width: 54px; height: 54px; border-radius: 27px;80 background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center;81 }82 83 /* Greeting + progress */84 .greeting-row {85 display: flex; align-items: flex-start; justify-content: space-between;86 margin: 44px 40px 0 40px;87 }88 .greeting-left h1 {89 margin: 0;90 font-size: 100px; line-height: 1.05; font-weight: 800; letter-spacing: 0.3px;91 }92 .greeting-left h1 .accent { color: #2cd4a2; }93 .weather-pill {94 margin-top: 22px;95 display: inline-flex; align-items: center;96 background: #566a4f; color: #fff;97 height: 86px; padding: 0 28px; border-radius: 43px;98 font-size: 36px; font-weight: 700; gap: 18px;99 box-shadow: 0 4px 12px rgba(0,0,0,0.3);100 }101 .weather-pill .badge-plus {102 margin-left: 14px;103 width: 36px; height: 36px; border-radius: 18px;104 background: #f7a738; color: #093c3f;105 display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 26px;106 }107 108 .progress-wrap {109 width: 260px; height: 260px; position: relative; margin-right: 10px;110 }111 .ring {112 width: 260px; height: 260px; border-radius: 50%;113 background: conic-gradient(#3fe38c 0 50%, #183f47 50% 100%);114 display: flex; align-items: center; justify-content: center;115 }116 .ring:after {117 content: "";118 width: 190px; height: 190px; border-radius: 50%;119 background: #082f35; position: absolute;120 }121 .ring-content {122 position: absolute; width: 100%; height: 100%;123 display: flex; align-items: center; justify-content: center; flex-direction: column;124 gap: 12px;125 }126 .ring-content .leaf-circle {127 width: 60px; height: 60px; border-radius: 30px; background: #173e44;128 display: flex; align-items: center; justify-content: center;129 }130 .ring-content .num { font-size: 48px; font-weight: 800; }131 .ring-content .den { font-size: 28px; opacity: 0.7; }132 133 /* Care/Learn tabs */134 .tabs {135 margin: 54px 40px 16px;136 display: flex; align-items: center; justify-content: space-between;137 }138 .tab-title {139 font-size: 64px; font-weight: 800; color: #9fb5b8;140 }141 .tab-title.active { color: #29c999; }142 .tab-underline {143 margin: 0 40px 30px;144 height: 8px; background: #405a60; border-radius: 6px; position: relative;145 }146 .tab-underline .active-bar {147 position: absolute; left: 50%; top: 0; height: 8px; width: 48%;148 background: #29c999; border-radius: 6px;149 }150 151 /* Cards */152 .card {153 margin: 30px 40px;154 border-radius: 36px;155 overflow: hidden;156 position: relative;157 background: #0b2f33;158 box-shadow: 0 14px 24px rgba(0,0,0,0.35);159 }160 .card .img {161 height: 580px;162 background: #E0E0E0;163 border-bottom: 1px solid #BDBDBD;164 display: flex; align-items: center; justify-content: center;165 color: #757575; font-weight: 700; font-size: 40px;166 }167 .card .overlay-text {168 position: absolute; left: 40px; bottom: 36px; right: 40px;169 color: #ffffff;170 }171 .card .date {172 font-size: 32px; opacity: 0.9; margin-bottom: 12px;173 }174 .card .title {175 font-size: 56px; font-weight: 800; line-height: 1.1; margin-bottom: 18px;176 text-shadow: 0 2px 6px rgba(0,0,0,0.3);177 }178 .card .read {179 position: absolute; right: 40px; bottom: 36px; color: #3ec4e8; font-size: 34px; font-weight: 700;180 }181 .card .add-pill {182 position: absolute; left: 40px; bottom: 34px;183 height: 106px; padding: 0 38px; border-radius: 53px;184 background: linear-gradient(90deg, #43e38f 0%, #29b8a0 100%);185 color: #093c3f; font-size: 44px; font-weight: 900;186 display: flex; align-items: center; gap: 16px;187 box-shadow: 0 8px 18px rgba(0,0,0,0.25);188 }189 .add-pill .plus {190 width: 56px; height: 56px; border-radius: 28px; background: #ffffff;191 display: flex; align-items: center; justify-content: center; color: #17a57f; font-size: 40px; font-weight: 900;192 }193 194 /* Bottom navigation */195 .bottom-nav {196 position: absolute; left: 0; right: 0; bottom: 64px;197 height: 190px; background: #0c2730; border-top-left-radius: 26px; border-top-right-radius: 26px;198 display: flex; align-items: center; justify-content: space-around; padding: 6px 0;199 box-shadow: 0 -8px 18px rgba(0,0,0,0.35);200 }201 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #b9d0d2; }202 .nav-item .label { font-size: 30px; font-weight: 700; }203 .nav-icon {204 width: 92px; height: 92px; border-radius: 24px;205 background: #0f3540; display: flex; align-items: center; justify-content: center;206 }207 .nav-item.active .nav-icon { background: #32db97; }208 .nav-item.active .label { color: #32db97; }209 .indicator {210 position: absolute; left: 50%; transform: translateX(-50%);211 bottom: 20px; width: 420px; height: 10px; border-radius: 10px; background: #b9d0d2; opacity: 0.6;212 }213 /* SVG helpers */214 svg { fill: currentColor; }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Mock status bar -->221 <div class="status-bar">222 <div>3:42</div>223 <div class="status-icons">224 <span>๐</span>225 <span>๐ป</span>226 <span class="dot"></span>227 <span>๐ถ</span>228 <span>๐</span>229 </div>230 </div>231 232 <!-- Banner -->233 <div class="banner">234 <div class="logo">235 <svg class="leaf-icon" viewBox="0 0 24 24">236 <path d="M12 3c4 4 6 6 6 10a6 6 0 0 1-12 0C6 9 8 7 12 3z"></path>237 </svg>238 </div>239 <div class="banner-text">Try Flora <span class="plus">Plus</span> for free</div>240 <div class="banner-arrow">241 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>242 </div>243 </div>244 245 <!-- Feedback pill -->246 <div class="feedback-pill">247 <div class="bubble">248 <svg viewBox="0 0 24 24" style="color:#29b8a0"><path d="M4 5h16v10H8l-4 4z"></path></svg>249 </div>250 <div>Send us Feedback</div>251 <div class="chev"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg></div>252 </div>253 254 <!-- Greeting and progress -->255 <div class="greeting-row">256 <div class="greeting-left">257 <h1>Good <span class="accent">Afternoon!</span></h1>258 <div class="weather-pill">259 <div class="logo" style="width:48px;height:48px;border-radius:16px;background:#f7a738;">260 <svg class="leaf-icon" viewBox="0 0 24 24" style="color:#0a3540;width:24px;height:24px;">261 <path d="M12 3c4 4 6 6 6 10a6 6 0 0 1-12 0C6 9 8 7 12 3z"></path>262 </svg>263 </div>264 Flora Plus weather!265 <div class="badge-plus">+</div>266 </div>267 </div>268 <div class="progress-wrap">269 <div class="ring"></div>270 <div class="ring-content">271 <div class="leaf-circle">272 <svg viewBox="0 0 24 24" style="color:#2cd4a2;"><path d="M12 3c4 4 6 6 6 10a6 6 0 0 1-12 0C6 9 8 7 12 3z"></path></svg>273 </div>274 <div class="num">20</div>275 <div class="den">/40</div>276 </div>277 </div>278 </div>279 280 <!-- Tabs -->281 <div class="tabs">282 <div class="tab-title">Care</div>283 <div class="tab-title active">Learn</div>284 </div>285 <div class="tab-underline"><div class="active-bar"></div></div>286 287 <!-- Card 1 -->288 <div class="card">289 <div class="img">[IMG: Fertilizer granules in gloved hand]</div>290 <div class="overlay-text">291 <div class="date">September 02, 2022</div>292 <div class="title">Different Types of Fertilizers: The Complete Guide</div>293 </div>294 <div class="read">Read more</div>295 </div>296 297 <!-- Card 2 -->298 <div class="card">299 <div class="img">[IMG: Arrowhead plant close-up on window sill]</div>300 <div class="overlay-text">301 <div class="date">September 02, 2022</div>302 <div class="title">How To Care For Your Arrowhead Plants</div>303 </div>304 <div class="add-pill"><div class="plus">+</div> Add</div>305 <div class="read" style="bottom: 40px; right: 40px;">Read more</div>306 </div>307 308 <!-- Bottom navigation -->309 <div class="bottom-nav">310 <div class="nav-item active">311 <div class="nav-icon">312 <svg viewBox="0 0 24 24" style="color:#0c2730"><path d="M12 3l9 8v10H3V11z"></path></svg>313 </div>314 <div class="label">Home</div>315 </div>316 <div class="nav-item">317 <div class="nav-icon">318 <svg viewBox="0 0 24 24"><path d="M6 20c0-7 5-11 6-14 1 3 6 7 6 14H6z"></path></svg>319 </div>320 <div class="label">Plants</div>321 </div>322 <div class="nav-item">323 <div class="nav-icon">324 <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 1 1-6 6 6 6 0 0 1 6-6zm-7 18c1-3 4-4 7-4s6 1 7 4H5z"></path></svg>325 </div>326 <div class="label">Pod</div>327 </div>328 <div class="nav-item">329 <div class="nav-icon">330 <svg viewBox="0 0 24 24"><path d="M12 2c5 4 7 6 7 10a7 7 0 0 1-14 0c0-4 2-6 7-10z"></path></svg>331 </div>332 <div class="label">Community</div>333 </div>334 <div class="nav-item">335 <div class="nav-icon">336 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm-7 8c0-4 4-6 7-6s7 2 7 6H5z"></path></svg>337 </div>338 <div class="label">Profile</div>339 </div>340 </div>341 <div class="indicator"></div>342</div>343</body>344</html>