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 - Identify</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    border-radius: 0;16    box-shadow: none;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 1080px; height: 120px;24    background: #ffffff;25    color: #333;26    display: flex;27    align-items: center;28    padding: 0 40px;29    font-weight: 600;30    font-size: 36px;31    box-sizing: border-box;32  }33  .sb-left, .sb-right { display: flex; align-items: center; }34  .sb-left svg, .sb-right svg { margin-left: 22px; }35  .sb-spacer { flex: 1; }36  .dot { width: 12px; height: 12px; border-radius: 50%; background: #bbb; margin-left: 22px; }37 38  /* Background photo placeholder */39  .photo {40    position: absolute;41    top: 120px; left: 0;42    width: 1080px; height: 1920px;43    background: #E0E0E0;44    border-top: 1px solid #BDBDBD;45    border-bottom: 1px solid #BDBDBD;46    display: flex;47    align-items: center;48    justify-content: center;49    color: #757575;50    letter-spacing: 0.5px;51    font-size: 40px;52  }53 54  /* App header overlay on photo */55  .app-header {56    position: absolute;57    top: 150px; left: 36px;58    width: 1008px; height: 110px;59    display: flex; align-items: center; justify-content: space-between;60    color: #fff;61    pointer-events: none;62  }63  .mode-pill {64    width: 86px; height: 86px; background: #c6b4ef; border-radius: 50%;65    display: flex; align-items: center; justify-content: center;66    box-shadow: 0 6px 12px rgba(0,0,0,0.15);67  }68  .brand {69    display: flex; align-items: center;70    font-size: 54px; font-weight: 700; color: #ffffff;71  }72  .brand .leaf {73    width: 40px; height: 40px; background: #7edc7b; border-radius: 50%;74    margin-right: 18px; display: flex; align-items: center; justify-content: center;75  }76  .app-header .right {77    display: flex; align-items: center;78  }79  .icon-square {80    width: 72px; height: 72px; background: rgba(255,255,255,0.9); border-radius: 18px;81    display: flex; align-items: center; justify-content: center;82    margin-left: 24px;83  }84 85  /* Scan guidance corners */86  .scan-corner {87    position: absolute;88    width: 180px; height: 180px;89    border-radius: 28px;90  }91  .corner-tl { top: 560px; left: 90px; border-top: 16px solid #b8e9e1; border-left: 16px solid #b8e9e1; }92  .corner-tr { top: 560px; left: 810px; border-top: 16px solid #b8e9e1; border-right: 16px solid #b8e9e1; }93  .corner-bl { top: 1260px; left: 90px; border-bottom: 16px solid #b8e9e1; border-left: 16px solid #b8e9e1; }94  .corner-br { top: 1260px; left: 810px; border-bottom: 16px solid #b8e9e1; border-right: 16px solid #b8e9e1; }95 96  /* Center hint */97  .hint {98    position: absolute;99    top: 1450px; left: 50%;100    transform: translateX(-50%);101    background: rgba(0,0,0,0.35);102    color: #fff;103    font-size: 44px;104    padding: 28px 40px;105    border-radius: 26px;106  }107 108  /* Gallery icon near bottom-left */109  .gallery-btn {110    position: absolute;111    bottom: 520px; left: 86px;112    width: 160px; height: 120px;113    border-radius: 22px;114    display: flex; align-items: center; justify-content: center;115    border: 4px solid #ffffff;116    color: #ffffff;117    box-shadow: 0 6px 16px rgba(0,0,0,0.2);118  }119 120  /* Shutter button */121  .shutter {122    position: absolute;123    bottom: 440px; left: 50%;124    transform: translateX(-50%);125    width: 210px; height: 210px; border-radius: 50%;126    display: flex; align-items: center; justify-content: center;127    background: rgba(255,255,255,0.3);128    border: 4px solid rgba(0,0,0,0.25);129    box-shadow: 0 10px 30px rgba(0,0,0,0.25);130    backdrop-filter: blur(2px);131  }132  .shutter .ring {133    width: 170px; height: 170px; border-radius: 50%;134    background: conic-gradient(#6f6cff 30deg, #6f6cff 210deg, transparent 210deg);135    display: flex; align-items: center; justify-content: center;136    border: 6px solid rgba(255,255,255,0.9);137  }138  .shutter .center {139    width: 110px; height: 110px; border-radius: 50%;140    background: rgba(255,255,255,0.85);141    border: 2px solid rgba(0,0,0,0.2);142  }143 144  /* Bottom navigation bar */145  .tabbar {146    position: absolute;147    bottom: 0; left: 0;148    width: 1080px; height: 240px;149    background: #ffffff;150    border-top: 1px solid #e5e5e5;151    display: flex;152    justify-content: space-around;153    align-items: center;154  }155  .tab {156    width: 320px; height: 180px;157    display: flex; flex-direction: column; align-items: center; justify-content: center;158    color: #7a7a7a;159    font-size: 40px;160  }161  .tab .label { margin-top: 16px; }162  .tab.active { color: #25b381; font-weight: 700; }163  .tab svg { width: 72px; height: 72px; }164 165  /* Home indicator */166  .home-indicator {167    position: absolute;168    bottom: 256px; left: 50%;169    transform: translateX(-50%);170    width: 340px; height: 10px;171    background: #d7d7d7; border-radius: 8px;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="sb-left">181      <span>3:26</span>182      <!-- Small plant icon -->183      <svg width="42" height="42" viewBox="0 0 24 24" fill="#78c578">184        <path d="M12 2c4 0 7 3 7 7-3.5-.5-6 2-6 5v6h-2v-6c0-3-2.5-5.5-6-5 0-4 3-7 7-7z"/>185      </svg>186      <!-- Temperature -->187      <span style="font-weight:600; font-size:36px; margin-left:22px;">33°</span>188      <!-- Globe -->189      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">190        <circle cx="12" cy="12" r="9"></circle>191        <path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"></path>192      </svg>193      <div class="dot"></div>194    </div>195    <div class="sb-spacer"></div>196    <div class="sb-right">197      <!-- WiFi -->198      <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">199        <path d="M2 9c5-5 15-5 20 0M5 12c3.5-3.5 10.5-3.5 14 0M8 15c2-2 6-2 8 0"/>200        <circle cx="12" cy="18" r="1.5" fill="#666"></circle>201      </svg>202      <!-- Battery -->203      <svg width="58" height="42" viewBox="0 0 30 18" fill="none" stroke="#666" stroke-width="2" style="margin-left:22px;">204        <rect x="1" y="3" width="24" height="12" rx="2"></rect>205        <rect x="26" y="6" width="3" height="6" rx="1" fill="#666"></rect>206        <rect x="4" y="5" width="16" height="8" fill="#666"></rect>207      </svg>208    </div>209  </div>210 211  <!-- Background image placeholder -->212  <div class="photo">[IMG: Plant leaves close-up]</div>213 214  <!-- Header overlay -->215  <div class="app-header">216    <div class="mode-pill">217      <!-- droplet/leaf icon -->218      <svg width="44" height="44" viewBox="0 0 24 24" fill="#6a4cd3">219        <path d="M12 2c-4 5-6 7-6 11a6 6 0 1 0 12 0c0-4-2-6-6-11z"/>220      </svg>221    </div>222    <div class="brand">223      <div class="leaf">224        <svg width="24" height="24" viewBox="0 0 24 24" fill="#2a9d49">225          <path d="M18 6c-6 1-9 4-9 9 3-2 6-2 10-1 1-4 0-7-1-8z"/>226        </svg>227      </div>228      <span>PlantVision</span>229    </div>230    <div class="right">231      <!-- Equalizer icon -->232      <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">233        <path d="M6 4v16M12 8v12M18 2v18"></path>234      </svg>235      <div class="icon-square">236        <svg width="40" height="40" viewBox="0 0 24 24" fill="#4caf50">237          <path d="M12 3c3 3 5 5 5 8a5 5 0 1 1-10 0c0-3 2-5 5-8z"/>238        </svg>239      </div>240    </div>241  </div>242 243  <!-- Scan corners -->244  <div class="scan-corner corner-tl"></div>245  <div class="scan-corner corner-tr"></div>246  <div class="scan-corner corner-bl"></div>247  <div class="scan-corner corner-br"></div>248 249  <!-- Hint -->250  <div class="hint">Tap to identify the plant</div>251 252  <!-- Gallery button -->253  <div class="gallery-btn">254    <svg width="120" height="80" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">255      <rect x="2" y="5" width="20" height="14" rx="3"></rect>256      <path d="M4 16l5-5 4 4 3-3 4 4"></path>257      <circle cx="8" cy="9" r="2" fill="#fff"></circle>258    </svg>259  </div>260 261  <!-- Shutter -->262  <div class="shutter">263    <div class="ring">264      <div class="center"></div>265    </div>266  </div>267 268  <!-- Home indicator -->269  <div class="home-indicator"></div>270 271  <!-- Bottom tab bar -->272  <div class="tabbar">273    <div class="tab">274      <svg viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2">275        <rect x="3" y="3" width="18" height="18" rx="3"></rect>276        <path d="M7 13l3 3 7-7"></path>277      </svg>278      <div class="label">Schedule</div>279    </div>280    <div class="tab active">281      <svg viewBox="0 0 24 24" fill="none" stroke="#25b381" stroke-width="2">282        <path d="M6 6h4M14 6h4M18 10v4M6 10v4M6 18h4M14 18h4" stroke-linecap="round"></path>283        <rect x="4" y="4" width="16" height="16" rx="4"></rect>284      </svg>285      <div class="label">Identify/Add</div>286    </div>287    <div class="tab">288      <svg viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2">289        <path d="M4 6h16v9a2 2 0 0 1-2 2H9l-5 4V6z"></path>290      </svg>291      <div class="label">Community</div>292    </div>293  </div>294 295</div>296</body>297</html>