GD-ML/AndroidCode

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 Result 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, #eef4ff 0%, #ffffff 20%);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;16    color: #1b243b;17  }18 19  /* Soft watercolor-like blobs */20  .blob {21    position: absolute;22    border-radius: 50%;23    filter: blur(30px);24    opacity: 0.35;25  }26  .blob.b1 { width: 700px; height: 700px; right: -200px; top: -220px; background: #cfe0ff; }27  .blob.b2 { width: 520px; height: 520px; left: -160px; top: -120px; background: #d8ecff; }28  .blob.b3 { width: 460px; height: 460px; right: 60px; top: 60px; background: #e6f0ff; }29 30  /* Top bar */31  .topbar {32    position: relative;33    padding: 44px 48px 24px 48px;34  }35  .back-row {36    display: flex;37    align-items: center;38    gap: 20px;39  }40  .title-small {41    font-size: 44px;42    font-weight: 700;43    color: #1f2742;44  }45  .divider {46    height: 2px;47    background: #e3e7ef;48    margin-top: 22px;49  }50 51  .main-title {52    font-size: 82px;53    line-height: 1.1;54    font-weight: 800;55    letter-spacing: -1px;56    margin: 16px 48px 6px 48px;57    color: #222b44;58  }59  .subtitle {60    margin: 0 48px 20px 48px;61    font-size: 40px;62    color: #647089;63  }64 65  .hero {66    position: relative;67    margin: 20px 40px 34px 40px;68    border-radius: 28px;69    overflow: hidden;70    height: 560px;71    box-shadow: 0 8px 24px rgba(31,39,66,0.15);72  }73  .hero .image-ph {74    width: 100%;75    height: 100%;76    background: #E0E0E0;77    border: 1px solid #BDBDBD;78    display: flex;79    align-items: center;80    justify-content: center;81    color: #757575;82    font-size: 40px;83  }84  .badge {85    position: absolute;86    top: 24px;87    right: 24px;88    background: linear-gradient(90deg, #6d69f3, #9b78ff);89    color: #ffffff;90    padding: 18px 28px;91    border-radius: 18px;92    display: flex;93    align-items: center;94    gap: 16px;95    font-weight: 700;96    font-size: 40px;97    box-shadow: 0 6px 14px rgba(109,105,243,0.35);98  }99  .pot-overlay {100    position: absolute;101    right: 24px;102    bottom: 24px;103    width: 190px;104    height: 220px;105    border-radius: 22px;106    overflow: hidden;107    box-shadow: 0 6px 16px rgba(0,0,0,0.18);108  }109  .pot-overlay .image-ph {110    font-size: 30px;111  }112 113  .section-title {114    margin: 18px 40px 10px 40px;115    font-size: 62px;116    font-weight: 800;117    color: #1f2742;118  }119  .section-rule {120    height: 2px;121    background: #e5e8f0;122    margin: 8px 40px 16px 40px;123  }124 125  .list {126    padding: 0 40px 0 40px;127  }128  .item {129    display: flex;130    gap: 26px;131    padding: 26px 0;132    align-items: center;133  }134  .thumb {135    width: 170px;136    height: 170px;137    border-radius: 26px;138    overflow: hidden;139    flex: 0 0 170px;140  }141  .thumb .image-ph {142    width: 100%; height: 100%;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    display: flex; align-items: center; justify-content: center;146    color: #757575; font-size: 30px; text-align: center; padding: 8px;147  }148  .meta .name {149    font-size: 50px;150    font-weight: 800;151    color: #1f2742;152  }153  .meta .latin {154    font-size: 40px;155    font-style: italic;156    color: #5b6987;157    margin-top: 6px;158  }159  .meta .tag {160    font-size: 36px;161    color: #8a90a2;162    margin-top: 4px;163  }164 165  /* Bottom safe area + home indicator */166  .bottom-safe {167    position: absolute;168    left: 0; right: 0; bottom: 0;169    height: 120px;170    background: #1e2742;171  }172  .home-indicator {173    position: absolute;174    left: 50%;175    transform: translateX(-50%);176    bottom: 38px;177    width: 320px;178    height: 14px;179    background: #d9dde7;180    border-radius: 8px;181    opacity: 0.85;182  }183 184  /* Simple icon styles */185  .icon {186    width: 42px; height: 42px;187    display: inline-block;188  }189</style>190</head>191<body>192<div id="render-target">193  <div class="blob b1"></div>194  <div class="blob b2"></div>195  <div class="blob b3"></div>196 197  <div class="topbar">198    <div class="back-row">199      <svg class="icon" viewBox="0 0 24 24" fill="#1f2742" xmlns="http://www.w3.org/2000/svg">200        <path d="M15.5 5.5L9 12l6.5 6.5-1.5 1.5L6 12l8-8 1.5 1.5z"/>201      </svg>202      <div class="title-small">Result</div>203    </div>204    <div class="divider"></div>205  </div>206 207  <div class="main-title">Travelers Palm</div>208  <div class="subtitle">Ravenala Madagascariensis</div>209 210  <div class="hero">211    <div class="image-ph">[IMG: Travelers Palm in garden]</div>212 213    <div class="badge">214      <svg class="icon" viewBox="0 0 24 24" fill="#ffef7a" xmlns="http://www.w3.org/2000/svg">215        <path d="M12 2l2.5 6.9H22l-5.6 4.1 2.2 6.8L12 16l-6.6 4.8 2.2-6.8L2 8.9h7.5L12 2z"/>216      </svg>217      <span>Best Match</span>218    </div>219 220    <div class="pot-overlay">221      <div class="image-ph">[IMG: Potted Travelers Palm]</div>222    </div>223  </div>224 225  <div class="section-title">Similar Plants</div>226  <div class="section-rule"></div>227 228  <div class="list">229    <div class="item">230      <div class="thumb">231        <div class="image-ph">[IMG: Banana seedling]</div>232      </div>233      <div class="meta">234        <div class="name">White Flowered Wild Banana</div>235        <div class="latin">Strelitzia Alba</div>236        <div class="tag">Flowering</div>237      </div>238    </div>239 240    <div class="item">241      <div class="thumb">242        <div class="image-ph">[IMG: Philodendron in pot]</div>243      </div>244      <div class="meta">245        <div class="name">Philodendron Green Wonder</div>246        <div class="latin">Philodendron 'green Wonder'</div>247        <div class="tag">Foliage</div>248      </div>249    </div>250 251    <div class="item">252      <div class="thumb">253        <div class="image-ph">[IMG: Red heliconia flower]</div>254      </div>255      <div class="meta">256        <div class="name">Macawflower</div>257        <div class="latin">Heliconia Bihai</div>258        <div class="tag">Herbs</div>259      </div>260    </div>261 262    <div class="item">263      <div class="thumb">264        <div class="image-ph">[IMG: Christmas heliconia]</div>265      </div>266      <div class="meta">267        <div class="name">Christmas Heliconia</div>268        <div class="latin">Heliconia Augusta</div>269        <div class="tag">Flowering</div>270      </div>271    </div>272  </div>273 274  <div class="bottom-safe">275    <div class="home-indicator"></div>276  </div>277</div>278</body>279</html>