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 Camera 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    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #111;15  }16 17  /* Camera preview placeholder */18  .camera-preview {19    position: absolute;20    left: 0; top: 0;21    width: 100%; height: 100%;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex; align-items: center; justify-content: center;26    font-size: 40px;27    letter-spacing: 0.5px;28  }29 30  /* Status bar */31  .top-status {32    position: absolute;33    top: 20px; left: 32px; right: 32px;34    height: 110px;35    display: flex; align-items: center; justify-content: space-between;36    color: #333;37    z-index: 5;38  }39  .status-left {40    display: flex; align-items: center; gap: 28px;41    font-weight: 600;42    color: #222;43    font-size: 44px;44  }45  .status-icons {46    display: flex; align-items: center; gap: 24px;47    color: #444;48    font-size: 40px;49  }50  .dot {51    width: 16px; height: 16px; background: #666; border-radius: 50%;52    display: inline-block;53  }54  .camera-toggle {55    background: #3AD081;56    color: #0b3d25;57    padding: 18px 28px;58    border-radius: 40px;59    display: flex; align-items: center; gap: 16px;60    font-weight: 700;61    font-size: 36px;62  }63  .camera-toggle svg { width: 48px; height: 48px; }64 65  /* App branding row */66  .branding {67    position: absolute;68    top: 150px; left: 160px; right: 160px;69    display: flex; align-items: center; justify-content: center;70    gap: 18px;71    z-index: 4;72  }73  .branding .bolt {74    width: 28px; height: 28px; background: #48D16B; border-radius: 50%;75    display: inline-flex; align-items: center; justify-content: center;76  }77  .branding .bolt svg { width: 22px; height: 22px; }78  .branding .title {79    font-size: 64px; font-weight: 800; color: #ffffff;80    text-shadow: 0 1px 2px rgba(0,0,0,0.2);81    letter-spacing: 0.5px;82  }83 84  /* Left floating purple leaf button */85  .purple-leaf {86    position: absolute;87    top: 190px; left: 40px;88    width: 108px; height: 108px;89    background: #B28BE6;90    border-radius: 54px;91    display: flex; align-items: center; justify-content: center;92    z-index: 5;93    box-shadow: 0 6px 12px rgba(0,0,0,0.15);94  }95  .purple-leaf svg { width: 60px; height: 60px; opacity: 0.85; }96 97  /* Scan frame corners */98  .corner {99    position: absolute;100    width: 210px; height: 210px;101    border-radius: 48px;102    z-index: 3;103  }104  .corner.tl { top: 530px; left: 150px; border-top: 14px solid #fff; border-left: 14px solid #fff; }105  .corner.tr { top: 530px; right: 150px; border-top: 14px solid #fff; border-right: 14px solid #fff; }106  .corner.bl { bottom: 730px; left: 150px; border-bottom: 14px solid #fff; border-left: 14px solid #fff; }107  .corner.br { bottom: 730px; right: 150px; border-bottom: 14px solid #fff; border-right: 14px solid #fff; }108 109  /* Shutter & gallery */110  .controls {111    position: absolute;112    bottom: 470px; left: 0; right: 0;113    display: flex; align-items: center; justify-content: center;114    gap: 220px;115    z-index: 4;116  }117  .gallery {118    width: 120px; height: 100px;119    display: flex; align-items: center; justify-content: center;120  }121  .gallery svg { width: 120px; height: 100px; stroke: #ffffff; fill: none; stroke-width: 10px; opacity: 0.95; }122  .shutter {123    width: 220px; height: 220px; border-radius: 50%;124    border: 18px solid #ffffff;125    background: #C9CFD3;126    box-shadow: 0 10px 24px rgba(0,0,0,0.25);127  }128 129  /* Bottom navigation */130  .bottom-nav {131    position: absolute;132    left: 0; right: 0; bottom: 140px;133    height: 210px;134    background: #ffffff;135    border-top: 1px solid rgba(0,0,0,0.08);136    display: grid; grid-template-columns: 1fr 1fr 1fr;137    z-index: 6;138  }139  .nav-item {140    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;141    color: #6F6F6F;142    font-size: 38px;143  }144  .nav-item svg { width: 64px; height: 64px; }145  .nav-item.active { color: #2DBE6B; font-weight: 700; }146  .nav-item.active svg { stroke: #2DBE6B; fill: none; }147 148  /* Home indicator area */149  .home-area {150    position: absolute; left: 0; right: 0; bottom: 0;151    height: 140px; background: #000;152    display: flex; align-items: center; justify-content: center;153  }154  .home-indicator {155    width: 320px; height: 14px; background: #fff; border-radius: 8px; opacity: 0.9;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Camera preview background placeholder -->163  <div class="camera-preview">[IMG: Camera Preview]</div>164 165  <!-- Top status row -->166  <div class="top-status">167    <div class="status-left">168      <div>3:26</div>169      <div class="status-icons">170        <!-- Simple plant/leaf icon -->171        <svg viewBox="0 0 24 24" width="44" height="44"><path d="M4 14c8-2 10-8 16-10-2 6-8 8-10 16" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>172        <div>33°</div>173        <!-- Globe icon -->174        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"/><path d="M3 12h18M12 3c3 5 3 13 0 18M7 5c4 5 4 12 0 14" fill="none" stroke="#333" stroke-width="1.6"/></svg>175        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#333" stroke-width="2"/><path d="M3 12h18" fill="none" stroke="#333" stroke-width="1.6"/></svg>176        <span class="dot"></span>177      </div>178    </div>179    <div class="camera-toggle">180      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#0b3d25"/><path d="M16 9l5-3v12l-5-3" fill="#0b3d25"/></svg>181    </div>182  </div>183 184  <!-- Branding -->185  <div class="branding">186    <span class="bolt">187      <svg viewBox="0 0 24 24"><path d="M13 2L6 13h6l-1 9 7-12h-6l1-8z" fill="#fff"/></svg>188    </span>189    <div class="title">PlantVision</div>190  </div>191 192  <!-- Purple leaf floating button -->193  <div class="purple-leaf">194    <svg viewBox="0 0 24 24" fill="#4D3B7D">195      <path d="M12 3c6 2 8 7 4 11s-9 2-11-4c4 1 8-1 7-7z"/>196    </svg>197  </div>198 199  <!-- Scan frame corners -->200  <div class="corner tl"></div>201  <div class="corner tr"></div>202  <div class="corner bl"></div>203  <div class="corner br"></div>204 205  <!-- Shutter and gallery controls -->206  <div class="controls">207    <div class="gallery">208      <svg viewBox="0 0 100 80">209        <rect x="8" y="10" width="84" height="60" rx="8" ry="8" stroke="#fff"/>210        <path d="M16 60l18-18 14 14 10-12 26 16" stroke="#fff"/>211        <circle cx="32" cy="30" r="6" stroke="#fff"/>212      </svg>213    </div>214    <div class="shutter"></div>215  </div>216 217  <!-- Bottom navigation -->218  <div class="bottom-nav">219    <div class="nav-item">220      <svg viewBox="0 0 24 24" stroke="#6F6F6F" fill="none" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M7 13l3 3 7-7"/></svg>221      <div>Schedule</div>222    </div>223    <div class="nav-item active">224      <svg viewBox="0 0 24 24" stroke="#2DBE6B" fill="none" stroke-width="2">225        <path d="M5 8a3 3 0 0 1 3-3h2M19 8a3 3 0 0 0-3-3h-2M5 16a3 3 0 0 0 3 3h2M19 16a3 3 0 0 1-3 3h-2" stroke-linecap="round"/>226      </svg>227      <div>Identify/Add</div>228    </div>229    <div class="nav-item">230      <svg viewBox="0 0 24 24" stroke="#6F6F6F" fill="none" stroke-width="2"><path d="M4 5h16v10H7l-3 4z"/><circle cx="9" cy="10" r="1.2"/><circle cx="13" cy="10" r="1.2"/><circle cx="17" cy="10" r="1.2"/></svg>231      <div>Community</div>232    </div>233  </div>234 235  <!-- Home indicator -->236  <div class="home-area">237    <div class="home-indicator"></div>238  </div>239 240</div>241</body>242</html>