GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Plant App UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: 'Inter', Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff;10 }11 12 /* Top decorative background */13 .top-bg {14 position:absolute; left:0; top:0; width:100%; height:640px;15 background: linear-gradient(180deg,#9bd08a 0%, #6fc28d 40%, #59b983 80%);16 border-bottom-left-radius:90px; border-bottom-right-radius:90px;17 }18 /* subtle leafy shapes */19 .leaf-shape { position:absolute; border-radius:60px; filter:blur(8px); opacity:0.25; }20 .leaf1 { width:220px; height:340px; background:#5aa97f; left:40px; top:170px; transform:rotate(-12deg); }21 .leaf2 { width:170px; height:280px; background:#67b88a; left:300px; top:150px; transform:rotate(6deg); }22 .leaf3 { width:200px; height:320px; background:#4fae7a; right:280px; top:160px; transform:rotate(-6deg); }23 .leaf4 { width:180px; height:300px; background:#63c393; right:60px; top:140px; transform:rotate(8deg); }24 25 /* Status bar */26 .status { position:absolute; top:26px; left:36px; right:36px; height:40px; display:flex; align-items:center; justify-content:space-between; color:#0b3d2e; font-weight:600; }27 .status .icons { display:flex; gap:16px; align-items:center; }28 .mini-icon svg { width:30px; height:30px; fill:#0b3d2e; opacity:0.8; }29 30 /* World selector */31 .world-row { position:absolute; top:110px; left:48px; display:flex; align-items:center; gap:18px; color:#ffffff; }32 .world-row .label { font-size:44px; font-weight:700; letter-spacing:0.2px; }33 .world-row .dropdown svg { width:24px; height:24px; fill:#ffffff; }34 35 /* Greeting */36 .greeting { position:absolute; top:180px; left:48px; width:980px; color:#ffffff; font-size:66px; font-weight:800; line-height:82px; }37 38 /* Quick actions */39 .quick-actions { position:absolute; top:400px; left:48px; right:48px; display:flex; gap:42px; }40 .quick-item { width:216px; }41 .icon-card {42 width:216px; height:216px; border-radius:44px;43 display:flex; align-items:center; justify-content:center;44 box-shadow: 0 10px 20px rgba(0,0,0,0.12);45 }46 .icon-card .ico svg { width:112px; height:112px; fill:#ffffff; }47 .qa-label { margin-top:22px; text-align:center; color:#245a47; font-size:36px; font-weight:700; }48 49 .grad-calendar { background:linear-gradient(180deg,#feb36b,#ff7e58); }50 .grad-diagnose { background:linear-gradient(180deg,#b776e5,#e58ba1); }51 .grad-guide { background:linear-gradient(180deg,#6db5f7,#72c6eb); }52 .grad-share { background:linear-gradient(180deg,#f6a1b8,#f4b7d5); }53 54 /* Search bar */55 .search-wrap {56 position:absolute; top:690px; left:48px; width:984px; height:126px;57 background:#e9f6eb; border-radius:70px;58 display:flex; align-items:center; padding:0 46px; box-shadow:0 8px 14px rgba(0,0,0,0.06);59 }60 .search-placeholder { color:#7aa08f; font-size:42px; }61 .search-icon { margin-left:auto; width:88px; height:88px; border-radius:50%; background:#c9e8cf; display:flex; align-items:center; justify-content:center; }62 .search-icon svg { width:52px; height:52px; stroke:#245a47; stroke-width:6; fill:none; }63 64 /* Feature cards */65 .cards { position:absolute; top:860px; left:48px; right:48px; display:flex; gap:40px; }66 .card {67 width:440px; height:520px; background:#ffffff; border-radius:40px;68 box-shadow:0 18px 28px rgba(0,0,0,0.1); padding:54px; position:relative;69 }70 .card .card-ico { width:150px; height:150px; background:#fafafa; border:1px solid #e0e0e0;71 display:flex; align-items:center; justify-content:center; border-radius:24px; color:#757575; margin-bottom:60px; }72 .card-title { font-size:54px; font-weight:800; color:#294e40; margin-bottom:24px; }73 .card-text { font-size:38px; color:#4b6b5c; line-height:52px; }74 75 /* Premium banner */76 .premium {77 position:absolute; top:1460px; left:48px; width:984px; height:220px;78 background:linear-gradient(90deg,#49b076,#2ea76a); border-radius:40px;79 display:flex; align-items:center; padding:0 46px; color:#ffffff;80 box-shadow:0 18px 30px rgba(0,0,0,0.12);81 }82 .premium .badge {83 width:160px; height:160px; border-radius:24px; background:rgba(255,255,255,0.18);84 display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.35);85 color:#ffffff; font-size:30px; font-weight:700;86 }87 .premium .text { margin-left:34px; }88 .premium .text .title { font-size:56px; font-weight:800; }89 .premium .text .sub { margin-top:8px; font-size:34px; opacity:0.9; }90 .premium .arrow {91 margin-left:auto; width:110px; height:110px; background:#ffffff; border-radius:55px;92 display:flex; align-items:center; justify-content:center;93 }94 .premium .arrow svg { width:54px; height:54px; fill:#2ea76a; }95 96 /* Bottom navigation */97 .bottom-nav {98 position:absolute; bottom:0; left:0; width:100%; height:220px;99 background:#ffffff; border-top-left-radius:60px; border-top-right-radius:60px;100 box-shadow:0 -10px 30px rgba(0,0,0,0.12);101 display:flex; align-items:center; justify-content:space-around;102 }103 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; }104 .nav-item .circle { width:84px; height:84px; border-radius:20px; background:#f0f5f2; display:flex; align-items:center; justify-content:center; }105 .nav-item .circle svg { width:48px; height:48px; fill:#667f74; }106 .nav-item .label { font-size:34px; color:#667f74; }107 .nav-item.active .circle { background:#d3f2df; }108 .nav-item.active .label { color:#2ea76a; font-weight:700; }109 110 /* Helper text sizes for small labels under icons (Calendar etc) */111 .qa-label { color:#083a2b; }112 113</style>114</head>115<body>116<div id="render-target">117 118 <div class="top-bg">119 <div class="leaf-shape leaf1"></div>120 <div class="leaf-shape leaf2"></div>121 <div class="leaf-shape leaf3"></div>122 <div class="leaf-shape leaf4"></div>123 </div>124 125 <div class="status">126 <div class="time">9:24</div>127 <div class="icons">128 <span class="mini-icon">129 <!-- Cloud glyph -->130 <svg viewBox="0 0 24 24"><path d="M6 15a4 4 0 1 1 1-7.8A6 6 0 0 1 18 9h1a4 4 0 0 1 0 8H7a2 2 0 0 1-1-2z"/></svg>131 </span>132 <span class="mini-icon">133 <!-- Battery -->134 <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"></rect><rect x="20" y="9" width="2" height="6"></rect></svg>135 </span>136 </div>137 </div>138 139 <div class="world-row">140 <!-- Leaf icon -->141 <svg viewBox="0 0 24 24" width="50" height="50" fill="#ffffff"><path d="M20 3C13 4 6 8 4 14c-1 3 1 6 4 7 8-2 11-10 12-18zM6 17c5-4 9-7 12-8-2 5-6 9-11 11-1-1-2-2-1-3z"/></svg>142 <div class="label">World</div>143 <div class="dropdown">144 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>145 </div>146 </div>147 148 <div class="greeting">Good Morning, plant lover!</div>149 150 <div class="quick-actions">151 <div class="quick-item">152 <div class="icon-card grad-calendar">153 <div class="ico">154 <!-- Calendar icon -->155 <svg viewBox="0 0 64 64">156 <rect x="10" y="16" width="44" height="38" rx="6" fill="#ffffff"/>157 <rect x="10" y="22" width="44" height="10" fill="#ffcfb0"/>158 <rect x="18" y="6" width="8" height="14" fill="#ffffff"/>159 <rect x="38" y="6" width="8" height="14" fill="#ffffff"/>160 <text x="32" y="44" font-size="18" text-anchor="middle" fill="#ff7e58" font-family="Arial" font-weight="700">19</text>161 </svg>162 </div>163 </div>164 <div class="qa-label">Calendar</div>165 </div>166 167 <div class="quick-item">168 <div class="icon-card grad-diagnose">169 <div class="ico">170 <!-- Heartbeat icon -->171 <svg viewBox="0 0 64 64">172 <path d="M32 54s-18-11-22-23c-4-13 13-24 22-10 9-14 26-3 22 10-4 12-22 23-22 23z" fill="#ffffff"/>173 <path d="M12 32h10l4-8 6 16 6-8h14" stroke="#e38fa6" stroke-width="4" fill="none"/>174 </svg>175 </div>176 </div>177 <div class="qa-label">Diagnose</div>178 </div>179 180 <div class="quick-item">181 <div class="icon-card grad-guide">182 <div class="ico">183 <!-- Signpost icon -->184 <svg viewBox="0 0 64 64">185 <rect x="28" y="6" width="8" height="52" fill="#ffffff"/>186 <path d="M18 18h28l-8-10H18zM18 34h28l-8 10H18z" fill="#cfe7fb"/>187 </svg>188 </div>189 </div>190 <div class="qa-label">Guide</div>191 </div>192 193 <div class="quick-item">194 <div class="icon-card grad-share">195 <div class="ico">196 <!-- Share icon -->197 <svg viewBox="0 0 64 64">198 <circle cx="48" cy="16" r="8" fill="#ffffff"/>199 <circle cx="16" cy="32" r="8" fill="#ffffff"/>200 <circle cx="48" cy="48" r="8" fill="#ffffff"/>201 <path d="M24 32l16-12M24 32l16 12" stroke="#ffffff" stroke-width="6" fill="none"/>202 </svg>203 </div>204 </div>205 <div class="qa-label">Share</div>206 </div>207 </div>208 209 <div class="search-wrap">210 <div class="search-placeholder">Search plant</div>211 <div class="search-icon">212 <svg viewBox="0 0 24 24">213 <circle cx="10" cy="10" r="7"></circle>214 <path d="M15 15l6 6"></path>215 </svg>216 </div>217 </div>218 219 <div class="cards">220 <div class="card">221 <div class="card-ico">222 <!-- [IMG: Camera Icon] -->223 <svg viewBox="0 0 72 72">224 <rect x="8" y="18" width="56" height="36" rx="8" fill="#e0e0e0"></rect>225 <circle cx="36" cy="36" r="12" fill="#bdbdbd"></circle>226 <rect x="22" y="12" width="28" height="10" rx="4" fill="#d0d0d0"></rect>227 </svg>228 </div>229 <div class="card-title">Identify</div>230 <div class="card-text">Tap to recognize</div>231 <div class="card-text">recognize</div>232 </div>233 234 <div class="card">235 <div class="card-ico">236 <!-- [IMG: Stacked Images + Crown] -->237 <svg viewBox="0 0 72 72">238 <rect x="16" y="24" width="40" height="26" rx="6" fill="#e0f5ea"></rect>239 <rect x="12" y="18" width="40" height="26" rx="6" fill="#d6efe4"></rect>240 <rect x="8" y="12" width="40" height="26" rx="6" fill="#c6e9dc"></rect>241 <polygon points="52,12 56,20 48,20" fill="#ffd86b"></polygon>242 <circle cx="36" cy="36" r="10" fill="#b8e2d0"></circle>243 </svg>244 </div>245 <div class="card-title">Advanced</div>246 <div class="card-text">Accurate</div>247 <div class="card-text">results</div>248 </div>249 </div>250 251 <div class="premium">252 <div class="badge">Go</div>253 <div class="text">254 <div class="title">Go Premium</div>255 <div class="sub">Tap to upgrade your account</div>256 </div>257 <div class="arrow">258 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7V5z"/></svg>259 </div>260 </div>261 262 <div class="bottom-nav">263 <div class="nav-item active">264 <div class="circle">265 <!-- Home/leaf icon -->266 <svg viewBox="0 0 24 24"><path d="M12 3C8 5 5 9 5 13a5 5 0 0 0 5 5c6-2 9-8 9-15-4 1-6 2-7 3z"/></svg>267 </div>268 <div class="label">Home</div>269 </div>270 <div class="nav-item">271 <div class="circle">272 <!-- Heart icon -->273 <svg viewBox="0 0 24 24"><path d="M12 21s-8-5-9-11c-1-6 7-9 9-3 2-6 10-3 9 3-1 6-9 11-9 11z"/></svg>274 </div>275 <div class="label">My Plant</div>276 </div>277 <div class="nav-item">278 <div class="circle">279 <!-- Watering can -->280 <svg viewBox="0 0 24 24"><path d="M5 9h8l4 4-4 4H5z" /><path d="M13 9l4-3 2 2-4 3" /></svg>281 </div>282 <div class="label">Tasks</div>283 </div>284 <div class="nav-item">285 <div class="circle">286 <!-- Gear icon -->287 <svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm7 4l2-2-2-2-2 2a7 7 0 0 0-2-1l-1-3h-4l-1 3a7 7 0 0 0-2 1L5 8 3 10l2 2a7 7 0 0 0 0 2L3 16l2 2 2-2a7 7 0 0 0 2 1l1 3h4l1-3a7 7 0 0 0 2-1l2 2 2-2-2-2a7 7 0 0 0 0-2z"/></svg>288 </div>289 <div class="label">Settings</div>290 </div>291 </div>292 293</div>294</body>295</html>