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 Identification 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: #ffffff;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .statusbar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 150px;26    background: #4CAF50;27    color: #fff;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 42px;33    letter-spacing: 0.5px;34  }35  .statusbar .right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .statusbar svg { display: block; }42 43  /* Hero image area */44  .hero {45    position: absolute;46    top: 150px;47    left: 0;48    width: 1080px;49    height: 780px;50  }51  .placeholder {52    background: #E0E0E0;53    border: 1px solid #BDBDBD;54    color: #757575;55    display: flex;56    justify-content: center;57    align-items: center;58    text-align: center;59  }60  .hero .hero-img {61    width: 1080px;62    height: 780px;63    font-size: 34px;64  }65  .back-btn {66    position: absolute;67    left: 34px;68    top: 254px;69    width: 88px;70    height: 88px;71    background: transparent;72    border: none;73    padding: 0;74    cursor: pointer;75  }76  .back-btn svg {77    width: 88px;78    height: 88px;79  }80  .thumb {81    position: absolute;82    left: 60px;83    bottom: 40px;84    width: 280px;85    height: 210px;86    font-size: 26px;87    border-radius: 4px;88    overflow: hidden;89  }90  .quick-links {91    position: absolute;92    right: 60px;93    bottom: 120px;94    display: flex;95    gap: 24px;96  }97  .icon-button {98    width: 120px;99    height: 120px;100    background: #ffffff;101    border-radius: 24px;102    box-shadow: 0 2px 8px rgba(0,0,0,0.15);103    display: flex;104    align-items: center;105    justify-content: center;106    font-weight: 700;107    font-size: 50px;108    color: #555;109  }110 111  /* Content below hero */112  .content {113    position: absolute;114    top: 930px;115    left: 48px;116    width: 984px;117    box-sizing: border-box;118  }119  .title {120    margin: 24px 0 16px 0;121    font-size: 64px;122    line-height: 72px;123    font-weight: 800;124  }125  .subtitle {126    margin: 0 0 36px 0;127    font-size: 36px;128    line-height: 46px;129    color: #333;130  }131  .section-title {132    margin: 24px 0 22px 0;133    font-size: 40px;134    font-weight: 600;135  }136 137  .card {138    width: 620px;139    border: 1px solid #E0E0E0;140    border-radius: 20px;141    overflow: hidden;142    background: #fff;143    box-shadow: 0 2px 4px rgba(0,0,0,0.08);144  }145  .card-img {146    width: 100%;147    height: 440px;148    border: none;149    border-bottom: 1px solid #E0E0E0;150    border-top-left-radius: 20px;151    border-top-right-radius: 20px;152    font-size: 30px;153  }154  .card-caption {155    padding: 24px;156    font-size: 34px;157  }158 159  .divider {160    width: 100%;161    height: 18px;162    background: #EEEEEE;163    margin: 40px 0 30px 0;164    border-top: 1px solid #E0E0E0;165    border-bottom: 1px solid #E0E0E0;166  }167 168  .ad-block {169    width: 800px;170    margin: 0 auto;171    text-align: center;172  }173  .ad-img {174    width: 800px;175    height: 800px;176    font-size: 30px;177    border-radius: 8px;178  }179  .ad-title {180    margin: 20px 0 0 0;181    font-size: 34px;182    color: #444;183  }184 185  /* Bottom install bar */186  .bottom-ad {187    position: absolute;188    left: 0;189    bottom: 118px;190    width: 1080px;191    height: 180px;192    background: #ffffff;193    border-top: 1px solid #E0E0E0;194    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);195    display: flex;196    align-items: center;197    justify-content: space-between;198    padding: 26px 40px;199    box-sizing: border-box;200  }201  .ad-left {202    display: flex;203    align-items: center;204    gap: 24px;205  }206  .app-icon {207    width: 120px;208    height: 120px;209    border-radius: 24px;210    font-size: 62px;211    font-weight: 800;212  }213  .app-text {214    display: flex;215    flex-direction: column;216    justify-content: center;217  }218  .app-name {219    font-size: 46px;220    font-weight: 700;221  }222  .store {223    font-size: 34px;224    color: #666;225  }226  .install-btn {227    background: #3F8E63;228    color: #fff;229    padding: 28px 60px;230    border-radius: 40px;231    font-size: 40px;232    font-weight: 700;233    letter-spacing: 1px;234  }235 236  /* Home indicator */237  .home-pill {238    position: absolute;239    left: 50%;240    bottom: 36px;241    transform: translateX(-50%);242    width: 300px;243    height: 14px;244    background: #1c1c1c;245    border-radius: 7px;246    opacity: 0.85;247  }248</style>249</head>250<body>251<div id="render-target">252 253  <!-- Status Bar -->254  <div class="statusbar">255    <div>2:27</div>256    <div class="right">257      <svg width="42" height="42" viewBox="0 0 42 42" fill="none">258        <circle cx="21" cy="21" r="18" stroke="white" stroke-width="4"/>259        <path d="M8 25 L21 13 L34 25" stroke="white" stroke-width="4" fill="none"/>260      </svg>261      <svg width="48" height="42" viewBox="0 0 48 42">262        <rect x="4" y="22" width="6" height="16" fill="#fff"/>263        <rect x="14" y="18" width="6" height="20" fill="#fff"/>264        <rect x="24" y="14" width="6" height="24" fill="#fff"/>265        <rect x="34" y="10" width="6" height="28" fill="#fff"/>266      </svg>267      <svg width="58" height="42" viewBox="0 0 58 42">268        <rect x="4" y="8" width="42" height="26" rx="4" stroke="#fff" stroke-width="4" fill="none"/>269        <rect x="8" y="12" width="34" height="18" fill="#fff"/>270        <rect x="50" y="14" width="6" height="14" rx="2" fill="#fff"/>271      </svg>272    </div>273  </div>274 275  <!-- Hero Image -->276  <div class="hero">277    <div class="hero-img placeholder">[IMG: Close-up of Coleus amboinicus flower]</div>278 279    <!-- Back arrow -->280    <button class="back-btn" aria-label="Back">281      <svg viewBox="0 0 88 88">282        <path d="M56 18 L30 44 L56 70" stroke="#ffffff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>283      </svg>284    </button>285 286    <!-- Bottom-left thumbnail -->287    <div class="thumb placeholder">[IMG: Coleus leaves]</div>288 289    <!-- Quick links (Wikipedia / Google) -->290    <div class="quick-links">291      <div class="icon-button">W</div>292      <div class="icon-button">G</div>293    </div>294  </div>295 296  <!-- Content -->297  <div class="content">298    <div class="title">Coleus amboinicus</div>299    <div class="subtitle">Common Names: <strong>Indian Borage, Mexican mint, Cuban oregano, Soup Mint</strong></div>300 301    <div class="section-title">Look-alikes</div>302    <div class="card">303      <div class="card-img placeholder">[IMG: Purple flower (Plectranthus)]</div>304      <div class="card-caption">Plectranthus</div>305    </div>306 307    <div class="divider"></div>308 309    <div class="ad-block">310      <div class="ad-img placeholder">[IMG: White Shirt on wooden board]</div>311      <div class="ad-title">Camessi Cotton Shirt with Spread</div>312    </div>313  </div>314 315  <!-- Bottom Install Bar -->316  <div class="bottom-ad">317    <div class="ad-left">318      <div class="app-icon placeholder">Z</div>319      <div class="app-text">320        <div class="app-name">Zepto</div>321        <div class="store">Google Play</div>322      </div>323    </div>324    <div class="install-btn">INSTALL</div>325  </div>326 327  <!-- Home indicator -->328  <div class="home-pill"></div>329</div>330</body>331</html>