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>PlantVision - Chinese Evergreen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1200px 900px at 50% 20%, #343636 0%, #2b2c2c 60%, #242525 100%);15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 135px;24    background: #5b5b5b;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-left { font-size: 38px; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-icon {40    width: 40px; height: 40px;41    display: inline-flex; align-items: center; justify-content: center;42  }43  .status-icon svg { width: 40px; height: 40px; fill: #fff; }44 45  /* Header / branding row */46  .brand-row {47    position: absolute;48    top: 180px;49    left: 40px;50    right: 40px;51    height: 80px;52    display: flex;53    align-items: center;54    color: #dfe2df;55  }56  .brand-dot {57    width: 72px; height: 72px; border-radius: 36px;58    background: #4d4778;59    display: flex; align-items: center; justify-content: center;60    margin-right: 26px;61  }62  .brand-name {63    font-size: 48px;64    font-weight: 700;65    letter-spacing: 0.5px;66    color: #d5d9d5;67    display: flex; align-items: center;68  }69  .brand-name .bolt {70    width: 34px; height: 34px; margin-right: 12px;71    background: #4caf50; border-radius: 8px;72  }73  .brand-tools {74    margin-left: auto;75    width: 64px; height: 64px; border-radius: 16px;76    background: rgba(255,255,255,0.08);77    display: flex; align-items: center; justify-content: center;78  }79 80  /* Scanner corner indicators */81  .corner {82    position: absolute;83    width: 180px;84    height: 180px;85    border-radius: 28px;86    border: 0 solid transparent;87  }88  .corner.tl {89    top: 580px; left: 160px;90    border-left: 10px solid #6b8d88;91    border-top: 10px solid #6b8d88;92  }93  .corner.tr {94    top: 580px; right: 160px;95    border-right: 10px solid #6b8d88;96    border-top: 10px solid #6b8d88;97  }98  .corner.bl {99    top: 860px; left: 160px;100    border-left: 10px solid #6b8d88;101    border-bottom: 10px solid #6b8d88;102  }103  .corner.br {104    top: 860px; right: 160px;105    border-right: 10px solid #6b8d88;106    border-bottom: 10px solid #6b8d88;107  }108 109  /* Bottom sheet/modal */110  .sheet {111    position: absolute;112    left: 50px;113    right: 50px;114    bottom: 120px;115    background: #ffffff;116    border-radius: 48px 48px 32px 32px;117    box-shadow: 0 18px 40px rgba(0,0,0,0.35);118    padding: 50px 54px 48px 54px;119    box-sizing: border-box;120  }121  .close-btn {122    position: absolute;123    top: 38px;124    right: 40px;125    width: 60px; height: 60px;126    border-radius: 30px;127    display: flex; align-items: center; justify-content: center;128    color: #333;129  }130  .close-btn svg { width: 40px; height: 40px; }131 132  .sheet h1 {133    margin: 0;134    font-size: 78px;135    font-weight: 800;136    color: #111;137    letter-spacing: 0.2px;138  }139  .subtitle {140    margin-top: 14px;141    font-size: 38px;142    color: #7d8882;143    font-weight: 600;144  }145 146  .image-grid {147    margin-top: 40px;148    display: grid;149    grid-template-columns: 1fr 360px;150    gap: 32px;151    align-items: start;152  }153  .img-placeholder {154    background: #E0E0E0;155    border: 1px solid #BDBDBD;156    color: #757575;157    display: flex; align-items: center; justify-content: center;158    text-align: center;159    font-size: 34px; font-weight: 600;160    border-radius: 32px;161  }162  .img-large { height: 650px; }163  .img-small { height: 305px; }164 165  .right-stack { display: flex; flex-direction: column; gap: 32px; }166 167  .primary-btn {168    margin: 44px auto 26px auto;169    width: 92%;170    height: 130px;171    background: #54a86e;172    color: #fff;173    border-radius: 65px;174    display: flex; align-items: center; justify-content: center;175    font-size: 46px; font-weight: 800;176    box-shadow: 0 8px 18px rgba(84,168,110,0.35);177  }178 179  .link {180    text-align: center;181    color: #9aa2a0;182    font-size: 40px;183    font-weight: 700;184    padding-bottom: 8px;185  }186 187  /* Gesture bar */188  .gesture {189    position: absolute;190    bottom: 0; left: 0;191    width: 1080px; height: 120px;192    background: #000;193  }194  .home-indicator {195    position: absolute;196    left: 50%;197    transform: translateX(-50%);198    bottom: 34px;199    width: 340px; height: 14px;200    background: #eaeaea;201    border-radius: 7px;202    opacity: 0.8;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <div class="statusbar">210    <div class="status-left">3:27</div>211    <div class="status-right">212      <div class="status-icon">213        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm0 4a6 6 0 0 1 0 12 1 1 0 1 1 0-2 4 4 0 0 0 0-8 1 1 0 1 1 0-2z"/></svg>214      </div>215      <div class="status-icon">216        <svg viewBox="0 0 24 24"><path d="M3 18h18v2H3v-2zm2-4h14v2H5v-2zm3-4h8v2H8V10zm3-4h2v2h-2V6z"/></svg>217      </div>218      <div class="status-icon">219        <svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm1 4h-2v6l5 3 1-1-4-3V7z"/></svg>220      </div>221      <div class="status-icon">222        <svg viewBox="0 0 24 24"><path d="M2 18c4-6 16-6 20 0l-2 2c-3-4-13-4-16 0l-2-2zm4-4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4-4c1-1 3-1 4 0l-2 2-2-2z"/></svg>223      </div>224      <div class="status-icon">225        <svg viewBox="0 0 24 24"><path d="M16 2H8c-1.1 0-2 .9-2 2v16l6-3 6 3V4c0-1.1-.9-2-2-2z"/></svg>226      </div>227    </div>228  </div>229 230  <div class="brand-row">231    <div class="brand-dot">232      <svg viewBox="0 0 24 24" width="40" height="40">233        <path fill="#cfd2ff" d="M12 2C7 7 7 11 8.5 13.5S14 17 12 22c6-4 7-8 5.5-10.5S9 7 12 2z"/>234      </svg>235    </div>236    <div class="brand-name"><span class="bolt"></span>PlantVision</div>237    <div class="brand-tools">238      <svg viewBox="0 0 24 24" width="36" height="36" fill="#cfe3cf"><path d="M4 4h4v4H4V4zm6 0h10v2H10V4zm0 6h10v2H10v-2zM4 10h4v4H4v-4zm6 6h10v2H10v-2zM4 16h4v4H4v-4z"/></svg>239    </div>240  </div>241 242  <!-- Scanner corners -->243  <div class="corner tl"></div>244  <div class="corner tr"></div>245  <div class="corner bl"></div>246  <div class="corner br"></div>247 248  <!-- Bottom sheet -->249  <div class="sheet">250    <div class="close-btn">251      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#222" stroke-width="2" stroke-linecap="round"/></svg>252    </div>253 254    <h1>Chinese Evergreen</h1>255    <div class="subtitle">Aglaonema commutatum</div>256 257    <div class="image-grid">258      <div class="img-placeholder img-large">[IMG: Chinese Evergreen - main]</div>259      <div class="right-stack">260        <div class="img-placeholder img-small">[IMG: Chinese Evergreen - variant]</div>261        <div class="img-placeholder img-small">[IMG: Chinese Evergreen - variant]</div>262      </div>263    </div>264 265    <div class="primary-btn">Add Plant</div>266    <div class="link">View other results</div>267  </div>268 269  <!-- Gesture bar -->270  <div class="gesture">271    <div class="home-indicator"></div>272  </div>273 274</div>275</body>276</html>