GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Plant UI - Identify Modal</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #f4f6f8;18 }19 20 /* Top forest/hero background */21 .hero {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 680px;27 background: linear-gradient(180deg, #1e6a52 0%, #2a8c68 50%, #3aa57a 100%);28 }29 /* subtle leafy blobs */30 .leaf {31 position: absolute;32 background: rgba(255,255,255,0.08);33 border-radius: 80px 80px 0 80px;34 transform: rotate(18deg);35 filter: blur(0.4px);36 }37 .leaf.l1{width:140px;height:220px;left:80px;bottom:90px;}38 .leaf.l2{width:120px;height:200px;left:240px;bottom:110px;transform: rotate(-12deg);}39 .leaf.l3{width:160px;height:240px;left:420px;bottom:70px;}40 .leaf.l4{width:120px;height:200px;left:620px;bottom:120px;transform: rotate(8deg);}41 .leaf.l5{width:140px;height:220px;left:820px;bottom:80px;transform: rotate(-16deg);}42 43 /* Status bar */44 .statusbar {45 position: absolute;46 top: 10px;47 left: 0;48 width: 1080px;49 height: 72px;50 display: flex;51 align-items: center;52 justify-content: space-between;53 color: #ffffff;54 padding: 0 32px;55 font-weight: 600;56 letter-spacing: 0.5px;57 }58 .status-icons {59 display: flex;60 align-items: center;61 gap: 22px;62 }63 .dot {width: 18px;height: 18px;border-radius: 50%;background:#111;opacity:0.25;}64 .wifi {65 width: 28px;height: 20px; position: relative;66 }67 .wifi::before, .wifi::after {68 content:""; position:absolute; left:0; right:0; border-top:2px solid #fff; border-radius: 50%;69 }70 .wifi::before { top:2px; height:18px; opacity:0.9;}71 .wifi::after { top:10px; height:10px; opacity:0.9;}72 .battery {73 width: 38px; height: 18px; border: 2px solid #fff; border-radius: 4px; position: relative;74 }75 .battery::after {76 content:""; position:absolute; right:-6px; top:4px; width:6px; height:10px; background:#fff; border-radius:2px;77 }78 .battery .level {79 position:absolute; top:2px; left:2px; height:12px; width:24px; background:#fff; border-radius:2px;80 }81 82 /* Header: World */83 .header {84 position: absolute;85 top: 118px;86 left: 40px;87 display: flex;88 align-items: center;89 gap: 18px;90 color: #ffffff;91 }92 .plant-icon {93 width: 38px;94 height: 38px;95 border-radius: 10px;96 border: 2px solid rgba(255,255,255,0.7);97 display: flex;98 align-items: center;99 justify-content: center;100 }101 .header .title {102 font-size: 46px;103 font-weight: 700;104 }105 .chevron {106 width: 28px;107 height: 28px;108 margin-left: 8px;109 }110 111 /* Feature tiles row */112 .features {113 position: absolute;114 top: 360px;115 left: 60px;116 width: 960px;117 display: flex;118 gap: 40px;119 color: #fff;120 }121 .feature {122 width: 206px;123 height: 206px;124 border-radius: 30px;125 display: flex;126 flex-direction: column;127 align-items: center;128 justify-content: center;129 box-shadow: 0 10px 20px rgba(0,0,0,0.08);130 }131 .f1 {background: linear-gradient(180deg,#f28c36,#c96a1f);}132 .f2 {background: linear-gradient(180deg,#d6627b,#9c3e54);}133 .f3 {background: linear-gradient(180deg,#4f86ff,#1e54c7);}134 .f4 {background: linear-gradient(180deg,#d17aa0,#9b5a7d);}135 .feature svg {width: 76px; height: 76px; margin-bottom: 18px;}136 .feature-label {137 font-size: 34px; font-weight: 700; text-align: center;138 }139 140 /* Search bar */141 .search {142 position: absolute;143 top: 630px;144 left: 60px;145 width: 960px;146 height: 110px;147 background: #e8f3eb;148 border-radius: 60px;149 box-shadow: inset 0 0 0 2px #c6dfcf;150 display: flex;151 align-items: center;152 justify-content: space-between;153 padding: 0 40px;154 color: #3b5d4c;155 }156 .search .placeholder {157 font-size: 44px;158 opacity: 0.9;159 }160 .search .icon {width: 56px;height: 56px;}161 162 /* content cards below search */163 .content {164 position: absolute;165 top: 820px;166 left: 60px;167 width: 960px;168 display: flex;169 gap: 40px;170 }171 .card {172 width: 450px;173 height: 360px;174 border-radius: 36px;175 background: #ffffff;176 box-shadow: 0 8px 24px rgba(0,0,0,0.08);177 padding: 28px;178 position: relative;179 }180 .card .thumb {181 width: 120px;height:120px;border-radius:26px;background:#E0E0E0;border:1px solid #BDBDBD;182 display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;margin-top:50px;183 }184 .card h3 {185 position:absolute; left:28px; top:24px; margin:0; font-size:44px; color:#345; font-weight:800;186 }187 188 /* Bottom white modal sheet */189 .modal {190 position: absolute;191 left: 0;192 bottom: 0;193 width: 1080px;194 height: 920px;195 background: #ffffff;196 border-top-left-radius: 60px;197 border-top-right-radius: 60px;198 box-shadow: 0 -18px 40px rgba(0,0,0,0.18);199 z-index: 10;200 }201 .modal .drag {202 width: 160px; height: 8px; background:#e1e1e1; border-radius:4px; position:absolute; left:50%; transform:translateX(-50%); top:22px;203 }204 .modal h2 {205 margin: 120px 0 40px 0;206 text-align: center;207 font-size: 56px;208 color: #222;209 letter-spacing: 1px;210 }211 .action {212 width: 900px;213 height: 140px;214 margin: 40px auto;215 border-radius: 80px;216 display: flex;217 align-items: center;218 padding: 0 46px;219 gap: 26px;220 color: #fff;221 font-size: 54px;222 font-weight: 800;223 box-shadow: 0 12px 24px rgba(34, 159, 94, 0.25);224 background: linear-gradient(90deg,#3fb16d,#58c27a);225 }226 .action.secondary { background: linear-gradient(90deg,#44b770,#69c982); }227 .action svg { width: 72px; height: 72px; }228 .close-wrap {229 position: absolute;230 bottom: 120px;231 left: 50%;232 transform: translateX(-50%);233 width: 120px;234 height: 120px;235 background: #ececec;236 border-radius: 60px;237 display:flex;align-items:center;justify-content:center;238 box-shadow: 0 6px 20px rgba(0,0,0,0.12);239 }240 .x {241 width: 64px; height: 64px; position:relative;242 }243 .x::before, .x::after {244 content:""; position:absolute; left:50%; top:50%;245 width: 64px; height: 6px; background:#333; border-radius: 3px;246 }247 .x::before { transform: translate(-50%,-50%) rotate(45deg); }248 .x::after { transform: translate(-50%,-50%) rotate(-45deg); }249 250 /* labels under feature tiles */251 .feature-caption {252 position: absolute;253 top: 590px;254 left: 60px;255 width: 960px;256 display: flex;257 gap: 40px;258 color: #fff;259 font-size: 34px;260 font-weight: 700;261 }262 .caption {width:206px;text-align:center;}263</style>264</head>265<body>266<div id="render-target">267 268 <!-- Forest hero background -->269 <div class="hero">270 <div class="leaf l1"></div>271 <div class="leaf l2"></div>272 <div class="leaf l3"></div>273 <div class="leaf l4"></div>274 <div class="leaf l5"></div>275 </div>276 277 <!-- Status bar -->278 <div class="statusbar">279 <div style="display:flex;align-items:center;gap:18px;">280 <div style="font-size:42px;">11:08</div>281 <div class="dot"></div>282 <div class="dot"></div>283 <div class="dot"></div>284 </div>285 <div class="status-icons">286 <div class="wifi"></div>287 <div class="battery"><div class="level"></div></div>288 </div>289 </div>290 291 <!-- Header with plant icon and dropdown -->292 <div class="header">293 <div class="plant-icon">294 <svg viewBox="0 0 24 24" width="26" height="26">295 <path d="M12 22c0-6 3-9 7-12-6-1-9 2-10 5-1-3-4-6-10-5 4 3 7 6 7 12h6z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>296 </svg>297 </div>298 <div class="title">World</div>299 <svg class="chevron" viewBox="0 0 24 24">300 <path d="M6 9l6 6 6-6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>301 </svg>302 </div>303 304 <!-- Feature squares -->305 <div class="features">306 <div class="feature f1">307 <svg viewBox="0 0 24 24">308 <rect x="3" y="5" width="18" height="16" rx="3" fill="none" stroke="#fff" stroke-width="2"/>309 <path d="M8 3v4M16 3v4M3 10h18" stroke="#fff" stroke-width="2"/>310 <text x="12" y="17" text-anchor="middle" font-size="7" fill="#fff" font-weight="bold">19</text>311 </svg>312 <div class="feature-label">Calendar</div>313 </div>314 <div class="feature f2">315 <svg viewBox="0 0 24 24">316 <path d="M12 20s-7-4-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5-7 9-7 9z" fill="none" stroke="#fff" stroke-width="2"/>317 <path d="M4 12h3l2-3 2 6 2-4h5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>318 </svg>319 <div class="feature-label">Diagnose</div>320 </div>321 <div class="feature f3">322 <svg viewBox="0 0 24 24">323 <path d="M6 7h8l2 3H6V7zM10 14h8l-2 3h-6v-3z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>324 <path d="M6 4v16" stroke="#fff" stroke-width="2"/>325 </svg>326 <div class="feature-label">Guide</div>327 </div>328 <div class="feature f4">329 <svg viewBox="0 0 24 24">330 <circle cx="6" cy="8" r="2" fill="none" stroke="#fff" stroke-width="2"/>331 <circle cx="18" cy="6" r="2" fill="none" stroke="#fff" stroke-width="2"/>332 <circle cx="18" cy="18" r="2" fill="none" stroke="#fff" stroke-width="2"/>333 <path d="M8 8l8-2M8 8l10 8" stroke="#fff" stroke-width="2"/>334 </svg>335 <div class="feature-label">Share</div>336 </div>337 </div>338 339 <!-- Search Bar -->340 <div class="search">341 <div class="placeholder">Search plant</div>342 <svg class="icon" viewBox="0 0 24 24">343 <circle cx="10" cy="10" r="6" fill="none" stroke="#2e5d47" stroke-width="2"/>344 <path d="M22 22l-6-6" stroke="#2e5d47" stroke-width="2" stroke-linecap="round"/>345 </svg>346 </div>347 348 <!-- Cards below search (partially visible behind modal in screenshot) -->349 <div class="content">350 <div class="card">351 <h3>Identify</h3>352 <div class="thumb">[IMG: Camera]</div>353 </div>354 <div class="card">355 <h3>Advanced</h3>356 <div class="thumb">[IMG: Gallery Stack]</div>357 </div>358 </div>359 360 <!-- Bottom modal sheet -->361 <div class="modal">362 <div class="drag"></div>363 <h2>Identify</h2>364 365 <div class="action">366 <svg viewBox="0 0 24 24">367 <rect x="3" y="7" width="18" height="12" rx="3" fill="none" stroke="#fff" stroke-width="2"/>368 <path d="M8 7l2-2h4l2 2" stroke="#fff" stroke-width="2"/>369 <circle cx="12" cy="13" r="3" fill="none" stroke="#fff" stroke-width="2"/>370 <path d="M6 9l2-2" stroke="#fff" stroke-width="2"/>371 <path d="M7 8h0" stroke="#fff" stroke-width="2"/>372 <path d="M6 9h0" stroke="#fff" stroke-width="2"/>373 <path d="M7 8h0" stroke="#fff" stroke-width="2"/>374 <path d="M6 9h0" stroke="#fff" stroke-width="2"/>375 </svg>376 <div>Take Photo</div>377 </div>378 379 <div class="action secondary">380 <svg viewBox="0 0 24 24">381 <rect x="3" y="5" width="18" height="14" rx="3" fill="none" stroke="#fff" stroke-width="2"/>382 <path d="M7 15l3-4 3 3 3-5 2 6H7z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>383 <path d="M6 8h0" stroke="#fff" stroke-width="2"/>384 <circle cx="7" cy="9" r="1" fill="#fff"/>385 <path d="M17 7h0" stroke="#fff" stroke-width="2"/>386 <circle cx="17" cy="8" r="1" fill="#fff"/>387 <path d="M6 6l0 0" stroke="#fff"/>388 <path d="M6 6" stroke="#fff"/>389 <!-- plus -->390 <path d="M6 4v-2M5 3h2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>391 </svg>392 <div>Upload Photo</div>393 </div>394 395 <div class="close-wrap">396 <div class="x"></div>397 </div>398 </div>399 400 <!-- captions under features (labels already inside tiles for clarity but a faded set like screenshot) -->401 <div class="feature-caption" style="opacity:0;">402 <div class="caption">Calendar</div>403 <div class="caption">Diagnose</div>404 <div class="caption">Guide</div>405 <div class="caption">Share</div>406 </div>407 408</div>409</body>410</html>