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 - Ming Aralia Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: 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: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 25%, #3f3f3f 55%, #3a3a3a 100%);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 150px;24    background: rgba(90,90,90,0.9);25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 40px;29    box-sizing: border-box;30  }31  .status-left { display: flex; align-items: center; gap: 28px; font-weight: 600; font-size: 42px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 30px; }33  .icon-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }34 35  /* Top app header elements */36  .brand-row {37    position: absolute;38    top: 210px;39    left: 60px;40    right: 60px;41    display: flex;42    align-items: center;43    justify-content: space-between;44    color: #b9b9b9;45  }46  .app-badge {47    width: 84px;48    height: 84px;49    background: #4e4676;50    border-radius: 50%;51    display: flex;52    align-items: center;53    justify-content: center;54  }55  .brand {56    display: flex;57    align-items: center;58    gap: 20px;59    font-weight: 700;60    font-size: 52px;61    letter-spacing: 0.5px;62    color: #a9a9a9;63    opacity: 0.9;64  }65  .side-icon {66    width: 70px;67    height: 70px;68    border-radius: 16px;69    background: rgba(255,255,255,0.08);70    display: flex;71    align-items: center;72    justify-content: center;73  }74 75  /* Scan overlay corners */76  .scan-corner {77    position: absolute;78    width: 240px;79    height: 140px;80    border-left: 16px solid #3e716d;81    border-top: 16px solid #3e716d;82    border-radius: 80px;83    opacity: 0.7;84  }85  .scan-left { left: 170px; top: 870px; transform: rotate(180deg); }86  .scan-right { right: 170px; top: 870px; transform: rotate(180deg); }87 88  /* Bottom sheet */89  .sheet {90    position: absolute;91    left: 0;92    right: 0;93    bottom: 0;94    height: 1320px;95    background: #ffffff;96    border-top-left-radius: 46px;97    border-top-right-radius: 46px;98    box-shadow: 0 -30px 80px rgba(0,0,0,0.35);99    padding: 60px;100    box-sizing: border-box;101  }102  .sheet-header {103    display: flex;104    align-items: flex-start;105  }106  .titles {107    flex: 1;108  }109  .titles h1 {110    margin: 0;111    font-size: 88px;112    line-height: 1.05;113    color: #111;114    font-weight: 800;115    letter-spacing: -0.5px;116  }117  .titles p {118    margin: 12px 0 0 0;119    font-size: 42px;120    color: #8a8a8a;121    font-weight: 600;122  }123  .close-btn {124    width: 72px;125    height: 72px;126    border-radius: 50%;127    background: transparent;128    display: flex;129    align-items: center;130    justify-content: center;131    margin-left: 20px;132  }133  .gallery {134    margin-top: 40px;135    display: flex;136    gap: 40px;137  }138  .img-large, .img-small {139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    color: #757575;142    display: flex;143    align-items: center;144    justify-content: center;145    text-align: center;146  }147  .img-large {148    width: 630px;149    height: 620px;150    border-radius: 38px;151    font-size: 36px;152    padding: 20px;153    box-sizing: border-box;154  }155  .right-col {156    display: flex;157    flex-direction: column;158    gap: 36px;159  }160  .img-small {161    width: 310px;162    height: 290px;163    border-radius: 32px;164    font-size: 28px;165    padding: 16px;166    box-sizing: border-box;167  }168 169  .cta {170    margin-top: 60px;171    width: 960px;172    height: 134px;173    background: #16a357;174    border-radius: 80px;175    color: #fff;176    font-size: 48px;177    font-weight: 800;178    display: flex;179    align-items: center;180    justify-content: center;181    margin-left: auto;182    margin-right: auto;183    box-shadow: 0 12px 24px rgba(22,163,87,0.35);184  }185  .secondary {186    margin-top: 48px;187    text-align: center;188    font-size: 42px;189    color: #9a9a9a;190    font-weight: 700;191  }192 193  /* System navigation bar mimic */194  .sys-bar {195    position: absolute;196    bottom: 18px;197    left: 0;198    width: 100%;199    height: 70px;200    background: #000000;201    opacity: 0.8;202  }203  .sys-pill {204    position: absolute;205    left: 50%;206    transform: translateX(-50%);207    bottom: 18px;208    width: 240px;209    height: 14px;210    background: #f2f2f2;211    border-radius: 10px;212  }213 214  /* Simple helper for inline icons */215  svg { display: block; }216</style>217</head>218<body>219<div id="render-target">220 221  <!-- Status bar -->222  <div class="status-bar">223    <div class="status-left">224      <span>11:43</span>225      <!-- small round app icons -->226      <svg width="36" height="36" viewBox="0 0 24 24" fill="#e0e0e0"><circle cx="12" cy="12" r="10"/></svg>227      <svg width="36" height="36" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2Zm1 5h-2v6h6v-2h-4Z"/></svg>228      <svg width="36" height="36" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M12 2C7 2 3 6 3 11s4 9 9 9 9-4 9-9-4-9-9-9Zm0 4a7 7 0 1 1 0 14 7 7 0 0 1 0-14Z"/></svg>229      <div class="icon-dot"></div>230    </div>231    <div class="status-right">232      <!-- wifi -->233      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">234        <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>235        <path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>236        <path d="M8 16c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>237        <circle cx="12" cy="19" r="1.6" fill="#fff"/>238      </svg>239      <!-- battery -->240      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">241        <rect x="2" y="7" width="18" height="10" rx="2" stroke="#fff" stroke-width="2"/>242        <rect x="4" y="9" width="12" height="6" rx="1" fill="#fff"/>243        <rect x="20" y="10" width="2" height="4" rx="1" fill="#fff"/>244      </svg>245    </div>246  </div>247 248  <!-- App header -->249  <div class="brand-row">250    <div class="app-badge">251      <svg width="44" height="44" viewBox="0 0 24 24" fill="#2a2949">252        <path d="M12 3c4 2 6 6 6 9s-3 6-6 9c-3-3-6-6-6-9s2-7 6-9Z" fill="#2a2949"/>253        <path d="M12 6c2 3 1 6-2 8" stroke="#c9c8ee" stroke-width="2" stroke-linecap="round"/>254      </svg>255    </div>256    <div class="brand">257      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">258        <path d="M12 3c4 2 6 6 6 9-3 1-6 3-8 6-2-4-2-9 2-15Z" fill="#18a43f"/>259      </svg>260      <span>PlantVision</span>261    </div>262    <div class="side-icon">263      <svg width="36" height="36" viewBox="0 0 24 24" fill="#bfbfbf">264        <rect x="5" y="4" width="4" height="16" rx="2"/>265        <rect x="15" y="8" width="4" height="8" rx="2"/>266      </svg>267    </div>268  </div>269 270  <!-- Scan overlay corners -->271  <div class="scan-corner scan-left"></div>272  <div class="scan-corner scan-right"></div>273 274  <!-- Bottom sheet content -->275  <div class="sheet">276    <div class="sheet-header">277      <div class="titles">278        <h1>Ming Aralia</h1>279        <p>Polyscias fruticosa</p>280      </div>281      <div class="close-btn">282        <svg width="50" height="50" viewBox="0 0 24 24" fill="none">283          <circle cx="12" cy="12" r="10" fill="none"/>284          <path d="M6 6l12 12M18 6L6 18" stroke="#2f2c3e" stroke-width="2" stroke-linecap="round"/>285        </svg>286      </div>287    </div>288 289    <div class="gallery">290      <div class="img-large">[IMG: Ming Aralia in living room]</div>291      <div class="right-col">292        <div class="img-small">[IMG: Small Ming Aralia on desk]</div>293        <div class="img-small">[IMG: Ming Aralia in white pot]</div>294      </div>295    </div>296 297    <div class="cta">Add Plant</div>298    <div class="secondary">View other results</div>299  </div>300 301  <!-- System navigation bar mimic -->302  <div class="sys-bar"></div>303  <div class="sys-pill"></div>304 305</div>306</body>307</html>