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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top black status area */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25  }26 27  /* Photo banner */28  .photo {29    position: absolute;30    top: 120px;31    left: 0;32    width: 1080px;33    height: 740px;34    background: #f5f5f5;35  }36  .photo-img {37    position: absolute;38    inset: 0;39    background: #E0E0E0;40    border: 1px solid #BDBDBD;41    display: flex;42    justify-content: center;43    align-items: center;44    color: #757575;45    font-size: 34px;46    letter-spacing: 0.5px;47  }48  .back-arrow {49    position: absolute;50    left: 36px;51    top: 30px;52    width: 56px;53    height: 56px;54    opacity: 0.95;55  }56 57  /* Center content area */58  .center-area {59    position: absolute;60    left: 0;61    right: 0;62    top: 880px; /* below the photo */63    bottom: 340px; /* above ad + nav */64    display: flex;65    flex-direction: column;66    align-items: center;67    justify-content: center;68  }69  .loading-text {70    margin-top: 48px;71    font-size: 56px;72    color: #111;73  }74 75  /* Magnifying glass icon */76  .magnify-icon {77    width: 200px;78    height: 200px;79  }80 81  /* Bottom ad bar */82  .ad-bar {83    position: absolute;84    left: 0;85    bottom: 120px;86    width: 1080px;87    height: 220px;88    background: #fff;89    border-top: 1px solid #e0e0e0;90    display: flex;91    align-items: center;92    padding: 0 32px;93    box-sizing: border-box;94  }95  .ad-left {96    display: flex;97    align-items: center;98    gap: 28px;99    flex: 1;100  }101  .app-icon {102    width: 140px;103    height: 140px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    border-radius: 28px;107    display: flex;108    justify-content: center;109    align-items: center;110    color: #757575;111    font-size: 26px;112  }113  .ad-text .app-name {114    font-size: 54px;115    color: #222;116    margin-bottom: 8px;117  }118  .ad-text .store {119    font-size: 32px;120    color: #666;121  }122  .install-btn {123    width: 340px;124    height: 110px;125    border: none;126    background: #2E7D32;127    color: #fff;128    font-size: 40px;129    border-radius: 60px;130    letter-spacing: 2px;131    cursor: default;132  }133  .ad-info {134    position: absolute;135    left: 20px;136    bottom: 200px;137    width: 38px;138    height: 38px;139    border-radius: 50%;140    border: 2px solid #4fb3f6;141    color: #4fb3f6;142    display: flex;143    align-items: center;144    justify-content: center;145    font-weight: 600;146    font-size: 22px;147  }148  .ad-close {149    position: absolute;150    left: 24px;151    bottom: 132px;152    color: #4fb3f6;153    font-size: 36px;154    line-height: 36px;155  }156 157  /* Bottom navigation (gesture) area */158  .bottom-nav {159    position: absolute;160    left: 0;161    bottom: 0;162    width: 1080px;163    height: 120px;164    background: #000;165    display: flex;166    align-items: center;167    justify-content: center;168  }169  .home-indicator {170    width: 280px;171    height: 12px;172    background: #BDBDBD;173    border-radius: 6px;174    opacity: 0.9;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <div class="status-bar"></div>182 183  <div class="photo">184    <div class="photo-img">[IMG: Green plant close-up]</div>185    <!-- Back chevron -->186    <svg class="back-arrow" viewBox="0 0 24 24">187      <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>188    </svg>189  </div>190 191  <div class="center-area">192    <div class="magnify-icon">193      <svg width="200" height="200" viewBox="0 0 200 200">194        <!-- Circle -->195        <circle cx="90" cy="90" r="60" fill="none" stroke="#173a5e" stroke-width="8"/>196        <!-- Handle -->197        <line x1="130" y1="130" x2="170" y2="170" stroke="#173a5e" stroke-width="8" stroke-linecap="round"/>198        <!-- Scan square -->199        <rect x="85" y="110" width="36" height="24" fill="#9fd3e6" stroke="#173a5e" stroke-width="4" rx="4" ry="4"/>200        <circle cx="95" cy="122" r="3.5" fill="#173a5e"/>201        <circle cx="107" cy="122" r="3.5" fill="#173a5e"/>202        <circle cx="119" cy="122" r="3.5" fill="#173a5e"/>203      </svg>204    </div>205    <div class="loading-text">Identifying...</div>206  </div>207 208  <div class="ad-bar">209    <div class="ad-left">210      <div class="app-icon">[IMG: Zepto App Icon]</div>211      <div class="ad-text">212        <div class="app-name">Zepto</div>213        <div class="store">Google Play</div>214      </div>215    </div>216    <button class="install-btn">INSTALL</button>217    <div class="ad-info">i</div>218    <div class="ad-close">x</div>219  </div>220 221  <div class="bottom-nav">222    <div class="home-indicator"></div>223  </div>224 225</div>226</body>227</html>