GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>LeafSnap AI - Mock UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Segoe UI", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: linear-gradient(#4c8e64, #5aa36f);18    color: #f4f6f4;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 100%;27    height: 120px;28    padding: 0 40px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #ffffff;34    opacity: 0.95;35  }36  .sb-left, .sb-right {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .time {42    font-size: 44px;43    font-weight: 600;44    letter-spacing: 1px;45  }46  .icon-circle {47    width: 38px;48    height: 38px;49    border-radius: 50%;50    background: rgba(255,255,255,0.28);51  }52  .icon-dot {53    width: 12px;54    height: 12px;55    border-radius: 50%;56    background: rgba(255,255,255,0.9);57  }58  .icon-sq {59    width: 40px;60    height: 28px;61    border-radius: 6px;62    background: rgba(255,255,255,0.28);63  }64  .wifi, .battery {65    display: inline-flex;66    align-items: center;67    justify-content: center;68  }69  .wifi svg, .battery svg {70    width: 48px;71    height: 48px;72    fill: none;73    stroke: #ffffff;74    stroke-width: 5;75    opacity: 0.95;76  }77 78  /* Header / Logo */79  .header {80    position: absolute;81    top: 260px;82    width: 100%;83    text-align: center;84  }85  .logo-row {86    display: inline-flex;87    align-items: center;88    gap: 26px;89    padding: 0 40px;90  }91  .leaf-icon {92    width: 90px;93    height: 90px;94    border-radius: 18px;95    background: rgba(255,255,255,0.18);96    display: flex;97    align-items: center;98    justify-content: center;99    border: 2px solid rgba(255,255,255,0.35);100  }101  .leaf-icon svg {102    width: 60px;103    height: 60px;104    fill: #ffffff;105    opacity: 0.95;106  }107  .app-title {108    font-size: 80px;109    font-weight: 700;110    letter-spacing: 1px;111  }112  .pill {113    font-size: 42px;114    font-weight: 800;115    color: #3b6b4a;116    background: #ffffff;117    padding: 10px 22px;118    border-radius: 20px;119    margin-left: 18px;120  }121 122  .subtitle {123    margin-top: 40px;124    font-size: 42px;125    line-height: 1.4;126    color: rgba(255,255,255,0.95);127  }128 129  /* Image frame */130  .image-section {131    position: absolute;132    top: 660px;133    left: 50%;134    transform: translateX(-50%);135    width: 840px;136    height: 720px;137  }138  .image-frame {139    position: relative;140    width: 840px;141    height: 720px;142    border-radius: 36px;143  }144  .image-placeholder {145    position: absolute;146    inset: 0;147    background: #E0E0E0;148    border: 1px solid #BDBDBD;149    border-radius: 36px;150    display: flex;151    align-items: center;152    justify-content: center;153    color: #757575;154    font-size: 36px;155    text-align: center;156    padding: 20px;157    box-sizing: border-box;158  }159  .corner {160    position: absolute;161    width: 190px;162    height: 190px;163    border-radius: 28px;164    pointer-events: none;165  }166  .corner.tl { top: -10px; left: -10px; border-top: 10px solid #eaf2ea; border-left: 10px solid #eaf2ea; }167  .corner.tr { top: -10px; right: -10px; border-top: 10px solid #eaf2ea; border-right: 10px solid #eaf2ea; }168  .corner.bl { bottom: -10px; left: -10px; border-bottom: 10px solid #eaf2ea; border-left: 10px solid #eaf2ea; }169  .corner.br { bottom: -10px; right: -10px; border-bottom: 10px solid #eaf2ea; border-right: 10px solid #eaf2ea; }170 171  /* Progress list */172  .progress {173    position: absolute;174    top: 1520px;175    left: 160px;176    right: 160px;177  }178  .step {179    display: flex;180    align-items: center;181    gap: 28px;182    margin: 40px 0;183    font-size: 56px;184    color: #f7f7f7;185  }186  .step .check {187    width: 52px;188    height: 52px;189    border-radius: 50%;190    background: #e4f29a;191    display: flex;192    align-items: center;193    justify-content: center;194  }195  .check svg {196    width: 40px;197    height: 40px;198    fill: #4b7c2f;199  }200  .spinner {201    width: 52px;202    height: 52px;203    border: 6px dotted rgba(255,255,255,0.55);204    border-radius: 50%;205  }206  .muted {207    color: rgba(255,255,255,0.55);208  }209 210  /* Bottom navigation bar indicator */211  .home-indicator {212    position: absolute;213    bottom: 36px;214    left: 50%;215    transform: translateX(-50%);216    width: 380px;217    height: 12px;218    background: rgba(255,255,255,0.85);219    border-radius: 8px;220  }221</style>222</head>223<body>224<div id="render-target">225 226  <!-- Status Bar -->227  <div class="status-bar">228    <div class="sb-left">229      <div class="time">11:10</div>230      <!-- simple icons -->231      <svg width="44" height="44" viewBox="0 0 24 24">232        <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>233        <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>234      </svg>235      <div class="icon-circle"></div>236      <div class="icon-sq"></div>237      <div class="icon-dot"></div>238    </div>239    <div class="sb-right">240      <div class="wifi">241        <svg viewBox="0 0 24 24">242          <path d="M2 8c5-4 15-4 20 0"></path>243          <path d="M5 12c3-3 11-3 14 0"></path>244          <path d="M8 16c2-2 6-2 8 0"></path>245          <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>246        </svg>247      </div>248      <div class="battery">249        <svg viewBox="0 0 28 20">250          <rect x="2" y="3" width="22" height="14" rx="3"></rect>251          <rect x="24" y="7" width="3" height="6" rx="1.5"></rect>252        </svg>253      </div>254    </div>255  </div>256 257  <!-- Header / Logo -->258  <div class="header">259    <div class="logo-row">260      <div class="leaf-icon">261        <svg viewBox="0 0 24 24">262          <path d="M6 18c9 0 12-6 12-12-6 0-12 3-12 12z"></path>263          <path d="M6 18c5-4 8-7 12-12" stroke="#ffffff" stroke-width="2" fill="none"></path>264        </svg>265      </div>266      <div class="app-title">LeafSnap</div>267      <div class="pill">AI</div>268    </div>269    <div class="subtitle">We try to identify the plant based on the photo you look</div>270  </div>271 272  <!-- Image area -->273  <div class="image-section">274    <div class="image-frame">275      <div class="image-placeholder">[IMG: Close-up plant photo]</div>276      <span class="corner tl"></span>277      <span class="corner tr"></span>278      <span class="corner bl"></span>279      <span class="corner br"></span>280    </div>281  </div>282 283  <!-- Progress -->284  <div class="progress">285    <div class="step">286      <div class="check">287        <svg viewBox="0 0 24 24">288          <path d="M5 13l4 4 10-10"></path>289        </svg>290      </div>291      <div>Analyzing image</div>292    </div>293 294    <div class="step muted">295      <div class="spinner"></div>296      <div>Processing image</div>297    </div>298 299    <div class="step muted" style="margin-top: 28px;">300      <div class="icon-circle" style="background: rgba(255,255,255,0.30);"></div>301      <div>Identifying plant</div>302    </div>303  </div>304 305  <!-- Home indicator -->306  <div class="home-indicator"></div>307</div>308</body>309</html>