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>Plant Search - Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target{10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff; border-radius:0;13 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Arial, sans-serif;14 color:#165F2D;15 }16 17 /* Status bar */18 .status-bar{19 position:absolute; top:0; left:0; right:0; height:120px;20 padding:0 40px;21 display:flex; align-items:flex-end; justify-content:space-between;22 box-sizing:border-box;23 color:#5f5f5f; font-weight:600; font-size:40px;24 }25 .status-left { display:flex; align-items:center; gap:20px; margin-bottom:18px; }26 .status-right{ display:flex; align-items:center; gap:26px; margin-bottom:18px; }27 28 /* Search */29 .search-wrap{30 position:absolute; left:40px; right:40px; top:140px;31 }32 .search-bar{33 background:#E8F4E8; border-radius:26px;34 height:116px; display:flex; align-items:center;35 padding:0 28px 0 32px; box-sizing:border-box;36 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);37 }38 .search-text{39 flex:1; color:#2A7E3C; font-size:44px; font-weight:600;40 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;41 }42 .icon-btn{ width:90px; height:90px; border:none; background:transparent; padding:0; cursor:default; }43 44 /* Tabs */45 .tabs{46 margin-top:30px; position:relative; height:120px;47 display:flex; align-items:flex-end; justify-content:space-between;48 color:#177D36; font-weight:700; font-size:46px;49 }50 .tab{ width:50%; text-align:center; padding-bottom:26px; }51 .tabs .baseline{52 position:absolute; left:0; right:0; bottom:0; height:6px; background:#E6EEE6;53 }54 .tabs .indicator{55 position:absolute; left:0; bottom:0; width:50%; height:10px; background:#178D39; border-radius:6px;56 }57 58 /* List */59 .list{60 position:absolute; left:32px; right:32px; top:420px; bottom:200px;61 overflow:hidden; /* static mock, not scrollable */62 }63 .row{64 display:flex; align-items:center;65 padding:28px 8px; box-sizing:border-box;66 border-bottom:1px solid #F0F0F0;67 }68 .thumb{69 width:160px; height:160px; border-radius:24px;70 background:#E0E0E0; border:1px solid #BDBDBD;71 display:flex; align-items:center; justify-content:center;72 color:#757575; font-size:28px; text-align:center; padding:8px; box-sizing:border-box;73 flex-shrink:0; margin-right:28px;74 }75 .row-text{ flex:1; }76 .title{77 font-size:46px; font-weight:800; color:#1B7E37; line-height:1.1; margin-bottom:6px;78 }79 .subtitle{80 font-size:32px; color:#606D61;81 }82 .info{83 width:84px; height:84px; border-radius:50%; border:4px solid #178D39;84 display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:20px;85 }86 87 /* Bottom nav */88 .bottom-nav{89 position:absolute; left:0; right:0; bottom:0; height:180px; background:#ffffff;90 box-shadow:0 -12px 30px rgba(0,0,0,0.06);91 display:flex; align-items:center; justify-content:space-around;92 padding:0 40px; box-sizing:border-box;93 }94 .nav-item{ width:140px; height:120px; display:flex; align-items:center; justify-content:center; position:relative; }95 .selected-dot{96 position:absolute; bottom:18px; width:12px; height:12px; background:#178D39; border-radius:50%;97 }98 99 /* Handle bar */100 .home-indicator{101 position:absolute; left:300px; right:300px; bottom:16px; height:10px; background:#9E9E9E; border-radius:8px; opacity:0.65;102 }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status Bar -->109 <div class="status-bar">110 <div class="status-left">111 <div>9:10</div>112 <svg width="42" height="24" viewBox="0 0 42 24" fill="none" xmlns="http://www.w3.org/2000/svg">113 <path d="M4 16c4-8 14-8 18 0" stroke="#808080" stroke-width="3" stroke-linecap="round"/>114 <circle cx="23" cy="16" r="2" fill="#808080"/>115 </svg>116 </div>117 <div class="status-right">118 <svg width="34" height="24" viewBox="0 0 24 24" fill="none">119 <path d="M3 17h18M6 13h12M9 9h6" stroke="#7d7d7d" stroke-width="2.5" stroke-linecap="round"/>120 </svg>121 <svg width="36" height="24" viewBox="0 0 26 24" fill="none">122 <rect x="1" y="6" width="20" height="12" rx="2" stroke="#7d7d7d" stroke-width="2.5"/>123 <rect x="23" y="9" width="2" height="6" rx="1" fill="#7d7d7d"/>124 </svg>125 </div>126 </div>127 128 <!-- Search -->129 <div class="search-wrap">130 <div class="search-bar">131 <div class="search-text">schefflera actinophylla</div>132 <button class="icon-btn" aria-label="clear">133 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">134 <circle cx="12" cy="12" r="10" fill="none"/>135 <path d="M6 6l12 12M18 6L6 18" stroke="#0E6F2E" stroke-width="2.8" stroke-linecap="round"/>136 </svg>137 </button>138 </div>139 140 <div class="tabs">141 <div class="tab">Plants</div>142 <div class="tab" style="color:#1F7F37; opacity:0.6;">People</div>143 <div class="baseline"></div>144 <div class="indicator"></div>145 </div>146 </div>147 148 <!-- List -->149 <div class="list">150 <div class="row">151 <div class="thumb">[IMG: Plant Leaf Closeup]</div>152 <div class="row-text">153 <div class="title">Schefflera actinophylla</div>154 <div class="subtitle">Schefflera actinophylla (Schefflera versteegii)</div>155 </div>156 <div class="info">157 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">158 <circle cx="12" cy="12" r="10" fill="none"/>159 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>160 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>161 </svg>162 </div>163 </div>164 165 <div class="row">166 <div class="thumb">[IMG: Plant Foliage]</div>167 <div class="row-text">168 <div class="title">Schefflera digitata</div>169 </div>170 <div class="info">171 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">172 <circle cx="12" cy="12" r="10" fill="none"/>173 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>174 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>175 </svg>176 </div>177 </div>178 179 <div class="row">180 <div class="thumb">[IMG: Umbrella Tree Leaf]</div>181 <div class="row-text">182 <div class="title">Dwarf Umbrella Tree</div>183 <div class="subtitle">Dwarf Umbrella Tree (Schefflera arboricola)</div>184 </div>185 <div class="info">186 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">187 <circle cx="12" cy="12" r="10" fill="none"/>188 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>189 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>190 </svg>191 </div>192 </div>193 194 <div class="row">195 <div class="thumb">[IMG: Green Leaves]</div>196 <div class="row-text">197 <div class="title">Schefflera heptaphylla</div>198 </div>199 <div class="info">200 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">201 <circle cx="12" cy="12" r="10" fill="none"/>202 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>203 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>204 </svg>205 </div>206 </div>207 208 <div class="row">209 <div class="thumb">[IMG: Plant Texture]</div>210 <div class="row-text">211 <div class="title">Schefflera</div>212 </div>213 <div class="info">214 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">215 <circle cx="12" cy="12" r="10" fill="none"/>216 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>217 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>218 </svg>219 </div>220 </div>221 222 <div class="row">223 <div class="thumb">[IMG: Leafy Branch]</div>224 <div class="row-text">225 <div class="title">Schefflera awa</div>226 </div>227 <div class="info">228 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">229 <circle cx="12" cy="12" r="10" fill="none"/>230 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>231 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>232 </svg>233 </div>234 </div>235 236 <div class="row">237 <div class="thumb">[IMG: Outdoor Leaves]</div>238 <div class="row-text">239 <div class="title">Schefflera hoi</div>240 </div>241 <div class="info">242 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">243 <circle cx="12" cy="12" r="10" fill="none"/>244 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>245 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>246 </svg>247 </div>248 </div>249 250 <div class="row">251 <div class="thumb">[IMG: Placeholder]</div>252 <div class="row-text">253 <div class="title">Schefflera rufa</div>254 </div>255 <div class="info">256 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">257 <circle cx="12" cy="12" r="10" fill="none"/>258 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>259 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>260 </svg>261 </div>262 </div>263 264 <div class="row">265 <div class="thumb">[IMG: Placeholder]</div>266 <div class="row-text">267 <div class="title">Schefflera calva</div>268 </div>269 <div class="info">270 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">271 <circle cx="12" cy="12" r="10" fill="none"/>272 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>273 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>274 </svg>275 </div>276 </div>277 278 <div class="row" style="border-bottom:none;">279 <div class="thumb">[IMG: Placeholder]</div>280 <div class="row-text">281 <div class="title">Schefflera elata</div>282 </div>283 <div class="info">284 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">285 <circle cx="12" cy="12" r="10" fill="none"/>286 <circle cx="12" cy="8" r="1.8" fill="#178D39"/>287 <path d="M12 11v7" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>288 </svg>289 </div>290 </div>291 </div>292 293 <!-- Bottom navigation -->294 <div class="bottom-nav">295 <div class="nav-item">296 <svg width="110" height="110" viewBox="0 0 110 110">297 <circle cx="55" cy="55" r="52" fill="#178D39"/>298 <path d="M40 70h30c4 0 6-2 6-6V52c0-4-2-6-6-6H40c-4 0-6 2-6 6v12c0 4 2 6 6 6z" fill="#ffffff"/>299 <rect x="49" y="60" width="12" height="8" rx="2" fill="#178D39"/>300 <circle cx="55" cy="56" r="9" fill="#ffffff"/>301 </svg>302 </div>303 <div class="nav-item">304 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">305 <rect x="5" y="5" width="10" height="12" rx="2" stroke="#A9D1AF" stroke-width="2.2"/>306 <rect x="9" y="7" width="10" height="12" rx="2" stroke="#A9D1AF" stroke-width="2.2"/>307 </svg>308 </div>309 <div class="nav-item">310 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">311 <path d="M12 21s7-7 7-11a7 7 0 1 0-14 0c0 4 7 11 7 11z" stroke="#A9D1AF" stroke-width="2.2" fill="none"/>312 <circle cx="12" cy="10" r="2" fill="#A9D1AF"/>313 </svg>314 </div>315 <div class="nav-item">316 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">317 <circle cx="11" cy="11" r="7" stroke="#178D39" stroke-width="2.6"/>318 <path d="M16.5 16.5L21 21" stroke="#178D39" stroke-width="2.6" stroke-linecap="round"/>319 </svg>320 <div class="selected-dot"></div>321 </div>322 <div class="nav-item">323 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">324 <path d="M4 18l2-9 6-4 6 4 2 9-6-3-6 3z" fill="#F5C400" stroke="#E2AF00" stroke-width="1.5" stroke-linejoin="round"/>325 </svg>326 </div>327 </div>328 329 <div class="home-indicator"></div>330</div>331</body>332</html>