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 App UI</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F5F6F4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 color:#101614;13 }14 15 /* Status bar */16 .statusbar {17 height:96px; background:#EFEFEF; display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; font-size:34px; color:#707070;19 }20 .status-icons { display:flex; align-items:center; gap:24px; }21 .dot { width:12px; height:12px; background:#707070; border-radius:50%; display:inline-block; }22 23 /* Greeting */24 .greeting {25 padding:40px 48px 16px 48px;26 }27 .greeting .hi {28 font-size:42px; color:#1e3b2d; margin-bottom:10px; font-weight:600;29 }30 .greeting .morning {31 font-size:82px; color:#0f2f22; font-weight:800; letter-spacing:0.5px;32 display:flex; align-items:center; gap:16px;33 }34 .sun {35 font-size:60px;36 }37 38 /* Search bar */39 .search-wrap { padding:24px 48px 0 48px; position:relative; }40 .search {41 position:relative; height:108px; border-radius:28px; background:#ffffff; border:1px solid #DADADA;42 display:flex; align-items:center; padding:0 28px; color:#A0A0A0; font-size:40px;43 box-shadow:0 2px 0 rgba(0,0,0,0.04) inset;44 }45 .search svg { width:48px; height:48px; margin-right:20px; }46 .decor-left, .decor-right {47 position:absolute; top:-10px; width:220px; height:140px; background:#E0E0E0; border:1px solid #BDBDBD;48 display:flex; justify-content:center; align-items:center; color:#757575; font-size:28px;49 }50 .decor-left { left:8px; border-radius:18px; }51 .decor-right { right:8px; border-radius:18px; }52 53 /* Premium banner */54 .banner {55 margin:36px 48px 28px 48px; background:#2c241b; border-radius:36px; color:#e9d8a7;56 height:190px; display:flex; align-items:center; padding:0 36px; position:relative;57 box-shadow:0 6px 12px rgba(0,0,0,0.12);58 }59 .badge {60 position:absolute; left:86px; top:30px; width:48px; height:48px; background:#e53935; color:#fff;61 font-size:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700;62 transform:translate(-50%, -30%);63 }64 .banner-icon { width:88px; height:88px; margin-right:28px; }65 .banner .title { font-size:46px; font-weight:800; color:#f3d68a; }66 .banner .sub { font-size:36px; color:#e4c77d; margin-top:8px; }67 .banner .arrow {68 margin-left:auto; width:38px; height:38px; fill:#f3d68a;69 }70 71 /* Section titles */72 .section-title {73 padding:18px 48px; font-size:48px; font-weight:800; color:#173a2b;74 }75 76 /* Feature cards */77 .features {78 padding:0 48px; display:grid; grid-template-columns:1fr 1fr; gap:36px;79 }80 .feature-card {81 height:360px; border-radius:38px; overflow:hidden; position:relative;82 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575;83 font-size:32px;84 }85 .feature-card .label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }86 .feature-card .overlay {87 position:absolute; left:0; right:0; bottom:0; height:40%;88 background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.0));89 }90 .feature-card .text {91 position:absolute; left:28px; bottom:28px; color:#fff;92 }93 .feature-card .text .t1 { font-size:44px; font-weight:800; margin-bottom:8px; }94 .feature-card .text .t2 { font-size:34px; color:#cfcfcf; }95 96 /* Categories */97 .categories { padding:6px 48px 220px 48px; }98 .cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }99 .cat-card {100 background:#fff; border:1px solid #E6E6E6; border-radius:34px; height:360px; position:relative;101 box-shadow:0 2px 6px rgba(0,0,0,0.04);102 }103 .cat-card .title {104 position:absolute; top:28px; left:28px; font-size:46px; font-weight:800; color:#122d21;105 }106 .cat-card .img {107 position:absolute; right:20px; bottom:20px; left:20px; height:240px; background:#E0E0E0; border:1px solid #BDBDBD;108 border-radius:26px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;109 }110 111 /* Bottom nav */112 .bottom-nav {113 position:absolute; left:0; right:0; bottom:0; height:190px; background:#ffffff; border-top:1px solid #E6E6E6;114 display:flex; align-items:center; justify-content:space-around; padding:0 40px;115 }116 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#8f9390; font-size:32px; }117 .nav-item .icon { width:56px; height:56px; fill:#8f9390; }118 .nav-item.active { color:#2fb36b; }119 .nav-item.active .icon { fill:#2fb36b; }120 121 /* Floating scan button */122 .scan-btn {123 position:absolute; left:50%; bottom:120px; transform:translateX(-50%);124 width:150px; height:150px; border-radius:50%;125 background:linear-gradient(135deg, #38d487, #1fbe73); box-shadow:0 12px 24px rgba(31,190,115,0.45);126 display:flex; align-items:center; justify-content:center;127 }128 .scan-btn svg { width:72px; height:72px; fill:#ffffff; }129 /* Home indicator bar (gesture) */130 .home-indicator {131 position:absolute; left:50%; bottom:28px; transform:translateX(-50%);132 width:340px; height:12px; background:#C7C7C7; border-radius:6px;133 }134</style>135</head>136<body>137<div id="render-target">138 139 <!-- Status bar -->140 <div class="statusbar">141 <div style="font-weight:600;">12:04</div>142 <div class="status-icons">143 <svg width="38" height="38" viewBox="0 0 24 24" fill="#707070" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg>144 <svg width="38" height="38" viewBox="0 0 24 24" fill="#707070" aria-hidden="true"><path d="M12 2a9 9 0 100 18 9 9 0 000-18zm1 9V5h-2v8h6v-2h-4z"/></svg>145 <svg width="38" height="38" viewBox="0 0 24 24" fill="#707070" aria-hidden="true"><path d="M3 12h18M3 6h12M3 18h12"/></svg>146 <span class="dot"></span>147 <svg width="38" height="38" viewBox="0 0 24 24" fill="#707070"><path d="M18 2l4 4-12 12H6v-4L18 2z"/></svg>148 <svg width="38" height="38" viewBox="0 0 24 24" fill="#707070"><path d="M12 2l4 4-8 8H4V10l8-8zM4 20h16v2H4z"/></svg>149 </div>150 </div>151 152 <!-- Greeting -->153 <div class="greeting">154 <div class="hi">Hi, Plant Lover!</div>155 <div class="morning">Good Morning! <span class="sun">☀️</span></div>156 </div>157 158 <!-- Search -->159 <div class="search-wrap">160 <div class="decor-left">[IMG: Leaf Decoration]</div>161 <div class="decor-right">[IMG: Leaf Decoration]</div>162 <div class="search">163 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#A0A0A0" stroke-width="2" fill="none"/><path d="M20 20l-4.5-4.5" stroke="#A0A0A0" stroke-width="2" fill="none" stroke-linecap="round"/></svg>164 <span>Search for plants</span>165 </div>166 </div>167 168 <!-- Premium banner -->169 <div class="banner">170 <div class="badge">1</div>171 <svg class="banner-icon" viewBox="0 0 24 24" fill="#f3d68a" aria-hidden="true">172 <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect>173 <path d="M2 7l10 6 10-6" fill="none" stroke="#f3d68a" stroke-width="2"></path>174 </svg>175 <div>176 <div class="title">FREE Premium Available</div>177 <div class="sub">Tap to upgrade your account!</div>178 </div>179 <svg class="arrow" viewBox="0 0 24 24"><path d="M8 5l8 7-8 7" /></svg>180 </div>181 182 <!-- Get Started -->183 <div class="section-title">Get Started</div>184 <div class="features">185 <div class="feature-card">186 <div class="label">[IMG: Green Plant Close-up]</div>187 <div class="overlay"></div>188 <div class="text">189 <div class="t1">How to identify plants?</div>190 <div class="t2">Life Style</div>191 </div>192 </div>193 <div class="feature-card">194 <div class="label">[IMG: Gardening Tools & Leaves]</div>195 <div class="overlay"></div>196 <div class="text">197 <div class="t1">Differences Between</div>198 <div class="t2">Plant Identify</div>199 </div>200 </div>201 </div>202 203 <!-- Categories -->204 <div class="section-title" style="margin-top:28px;">Categories</div>205 <div class="categories">206 <div class="cat-grid">207 <div class="cat-card">208 <div class="title">Ferns</div>209 <div class="img">[IMG: Fern Potted Plants]</div>210 </div>211 <div class="cat-card">212 <div class="title">Cacti and<br>Succulents</div>213 <div class="img">[IMG: Cactus Close-up]</div>214 </div>215 <div class="cat-card">216 <div class="title">Flowering</div>217 <div class="img">[IMG: Blooming Flowers]</div>218 </div>219 <div class="cat-card">220 <div class="title">Vegetables and</div>221 <div class="img">[IMG: Vegetable Plants]</div>222 </div>223 </div>224 </div>225 226 <!-- Floating scan button -->227 <div class="scan-btn" aria-hidden="true">228 <svg viewBox="0 0 24 24">229 <path d="M7 3H3v4h2V5h2V3zm12 0h-4v2h2v2h2V3zM3 17v4h4v-2H5v-2H3zm16 0v2h-2v2h4v-4h-2zM7 9h10v6H7z" />230 </svg>231 </div>232 233 <!-- Bottom navigation -->234 <div class="bottom-nav">235 <div class="nav-item active">236 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l9 7v10h-6v-6H9v6H3V10l9-7z"/></svg>237 <div>Home</div>238 </div>239 <div class="nav-item">240 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4zm0 6a3 3 0 00-3 3v3h6v-3a3 3 0 00-3-3z"/></svg>241 <div>Diagnose</div>242 </div>243 <div class="nav-item">244 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2c-2 3-4 4-6 5 0 6 4 10 6 11 2-1 6-5 6-11-2-1-4-2-6-5z"/></svg>245 <div>My Garden</div>246 </div>247 <div class="nav-item">248 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 22c0-4 4-7 8-7s8 3 8 7"/></svg>249 <div>Profile</div>250 </div>251 </div>252 253 <div class="home-indicator"></div>254 255</div>256</body>257</html>