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>Camera Identify UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background: #000000;20    color: #ffffff;21  }22 23  /* Top icons */24  .top-bar {25    position: absolute;26    top: 36px;27    left: 36px;28    right: 36px;29    height: 80px;30    pointer-events: none;31  }32  .top-icon {33    position: absolute;34    width: 56px;35    height: 56px;36    pointer-events: auto;37  }38  .top-icon.close {39    left: 0;40  }41  .top-icon.mute {42    right: 0;43  }44 45  /* Scan area corners */46  .scan-area {47    position: absolute;48    left: 140px;49    top: 460px;50    width: 800px;51    height: 800px;52  }53  .corner {54    position: absolute;55    width: 210px;56    height: 210px;57  }58  .corner.tl { left: 0; top: 0; border-top: 8px solid #fff; border-left: 8px solid #fff; }59  .corner.tr { right: 0; top: 0; border-top: 8px solid #fff; border-right: 8px solid #fff; }60  .corner.bl { left: 0; bottom: 0; border-bottom: 8px solid #fff; border-left: 8px solid #fff; }61  .corner.br { right: 0; bottom: 0; border-bottom: 8px solid #fff; border-right: 8px solid #fff; }62 63  .hint {64    position: absolute;65    bottom: 700px;66    width: 100%;67    text-align: center;68    color: rgba(255,255,255,0.9);69    font-size: 38px;70    letter-spacing: 0.2px;71  }72 73  /* Bottom sheet */74  .sheet {75    position: absolute;76    left: 0;77    right: 0;78    bottom: 0;79    height: 660px;80    background: #ffffff;81    color: #212121;82    border-top-left-radius: 34px;83    border-top-right-radius: 34px;84    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);85  }86  .modes {87    display: flex;88    justify-content: center;89    gap: 80px;90    margin-top: 28px;91    font-size: 44px;92    user-select: none;93  }94  .mode {95    color: #777;96  }97  .mode.active {98    color: #52c66a;99    font-weight: 600;100  }101 102  .controls {103    position: relative;104    margin-top: 26px;105    display: flex;106    align-items: center;107    justify-content: center;108    gap: 260px;109  }110  .control-icon {111    width: 120px;112    height: 120px;113  }114  .shutter-wrap {115    width: 240px;116    height: 240px;117    border-radius: 50%;118    border: 10px solid #7ed68e;119    display: flex;120    align-items: center;121    justify-content: center;122  }123  .shutter {124    width: 180px;125    height: 180px;126    background: #66c86f;127    border-radius: 50%;128  }129 130  /* Thumbnails row */131  .thumbs-area {132    position: absolute;133    left: 20px;134    right: 20px;135    bottom: 28px;136  }137  .thumbs {138    display: flex;139    gap: 22px;140    overflow: hidden;141  }142  .thumb {143    width: 310px;144    height: 220px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    border-radius: 10px;148    display: flex;149    align-items: center;150    justify-content: center;151    color: #757575;152    position: relative;153    font-size: 30px;154  }155  .badge {156    position: absolute;157    top: 10px;158    left: 10px;159    color: #e53935;160    border: 3px solid #e53935;161    background: #fff;162    padding: 4px 12px;163    border-radius: 10px;164    font-weight: 700;165    font-size: 28px;166  }167  .brand {168    position: absolute;169    right: 28px;170    bottom: 260px;171    color: #000;172    font-weight: 800;173    font-size: 32px;174    letter-spacing: 1px;175    opacity: 0.8;176  }177  .thumbs-tools {178    position: absolute;179    right: 28px;180    bottom: 260px;181    transform: translateY(-48px);182    display: flex;183    gap: 18px;184    align-items: center;185  }186  .tool {187    width: 46px;188    height: 46px;189    border-radius: 50%;190    background: #e7f2ff;191    color: #1e88e5;192    display: flex;193    align-items: center;194    justify-content: center;195    font-weight: 800;196    font-size: 26px;197  }198 199  /* Home indicator */200  .home-indicator {201    position: absolute;202    bottom: 18px;203    left: 50%;204    transform: translateX(-50%);205    width: 340px;206    height: 10px;207    background: rgba(255,255,255,0.85);208    border-radius: 6px;209  }210</style>211</head>212<body>213<div id="render-target">214 215  <!-- Top icons -->216  <div class="top-bar">217    <div class="top-icon close">218      <svg width="56" height="56" viewBox="0 0 24 24">219        <path d="M3 3 L21 21 M21 3 L3 21" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round"/>220      </svg>221    </div>222    <div class="top-icon mute">223      <svg width="56" height="56" viewBox="0 0 24 24">224        <path d="M3 9 H8 L13 5 V19 L8 15 H3 Z" fill="#ffffff"/>225        <path d="M16 6 L22 18" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>226      </svg>227    </div>228  </div>229 230  <!-- Scan frame -->231  <div class="scan-area" aria-hidden="true">232    <div class="corner tl"></div>233    <div class="corner tr"></div>234    <div class="corner bl"></div>235    <div class="corner br"></div>236  </div>237 238  <!-- Hint text -->239  <div class="hint">Place the subject in focus</div>240 241  <!-- Bottom sheet -->242  <div class="sheet">243    <div class="modes">244      <div class="mode active">Identify</div>245      <div class="mode">Diagnose</div>246    </div>247 248    <div class="controls">249      <!-- Gallery icon -->250      <div class="control-icon">251        <svg width="120" height="120" viewBox="0 0 48 48">252          <rect x="6" y="10" width="36" height="28" rx="4" ry="4" fill="none" stroke="#52c66a" stroke-width="3"/>253          <circle cx="18" cy="20" r="3" fill="#52c66a"/>254          <path d="M10 34 L20 26 L28 32 L36 26 L42 34" fill="none" stroke="#52c66a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>255        </svg>256      </div>257 258      <!-- Shutter button -->259      <div class="shutter-wrap">260        <div class="shutter"></div>261      </div>262 263      <!-- Help icon -->264      <div class="control-icon">265        <svg width="120" height="120" viewBox="0 0 48 48">266          <circle cx="24" cy="24" r="18" fill="none" stroke="#52c66a" stroke-width="3"/>267          <path d="M19 18a5 5 0 0 1 9 2c0 4-5 4-5 8" fill="none" stroke="#52c66a" stroke-width="3" stroke-linecap="round"/>268          <circle cx="24" cy="35" r="2.2" fill="#52c66a"/>269        </svg>270      </div>271    </div>272 273    <!-- Thumbnails and small tools -->274    <div class="thumbs-tools">275      <div class="tool" title="Close">x</div>276      <div class="tool" title="Info">i</div>277    </div>278    <div class="brand">NYKAA FASHION</div>279 280    <div class="thumbs-area">281      <div class="thumbs">282        <div class="thumb">283          <div class="badge">-60%</div>284          [IMG: Sneaker]285        </div>286        <div class="thumb">287          <div class="badge">-25%</div>288          [IMG: Sneaker]289        </div>290        <div class="thumb">291          <div class="badge">-30%</div>292          [IMG: Sneaker]293        </div>294        <div class="thumb">295          <div class="badge">-70%</div>296          [IMG: Sneaker]297        </div>298      </div>299    </div>300  </div>301 302  <!-- Home indicator -->303  <div class="home-indicator"></div>304</div>305</body>306</html>