GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Amazon Product UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Header / Status area */17  .header {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 240px;23    background: linear-gradient(180deg, #a7e3db 0%, #c7efe8 100%);24  }25  .status-bar {26    position: absolute;27    top: 20px;28    left: 30px;29    right: 30px;30    height: 50px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #0b3d3d;35    font-weight: 600;36    font-size: 36px;37  }38  .status-icons {39    display: flex;40    align-items: center;41    gap: 22px;42  }43  .dot {44    width: 20px;45    height: 20px;46    background: #0b3d3d;47    border-radius: 50%;48  }49  .signal {50    width: 30px; height: 30px; border: 3px solid #0b3d3d; border-radius: 6px;51  }52  .search-wrap {53    position: absolute;54    left: 120px;55    right: 120px;56    top: 90px;57    height: 100px;58    background: #ffffff;59    border-radius: 50px;60    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;61    border: 1px solid #d7dee3;62    display: flex;63    align-items: center;64    padding: 0 30px;65    gap: 24px;66  }67  .search-input {68    flex: 1;69    color: #666;70    font-size: 34px;71  }72  .icon-btn {73    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;74    border-radius: 50%;75    background: #eaf6f5;76    border: 1px solid #cfe7e3;77  }78  .back-btn {79    position: absolute;80    left: 20px;81    top: 110px;82    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;83  }84 85  /* Product area */86  .content {87    position: absolute;88    top: 240px;89    left: 0;90    width: 1080px;91    height: 1660px;92    background: #ffffff;93  }94  .product-img {95    position: absolute;96    left: 60px;97    right: 60px;98    top: 40px;99    height: 1360px;100    background: #E0E0E0;101    border: 1px solid #BDBDBD;102    display: flex;103    align-items: center;104    justify-content: center;105    color: #757575;106    font-size: 40px;107  }108  .share {109    position: absolute;110    top: 40px;111    right: 40px;112    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;113    background: #ffffff;114    border-radius: 50%;115    border: 1px solid #e0e0e0;116    box-shadow: 0 2px 6px rgba(0,0,0,0.06);117  }118  .heart {119    position: absolute;120    left: 36px;121    bottom: 300px;122    width: 100px; height: 100px;123    border-radius: 50%;124    border: 2px solid #d9d9d9;125    display: flex; align-items: center; justify-content: center;126    background: #ffffff;127  }128  .dots {129    position: absolute;130    bottom: 310px;131    left: 300px;132    right: 200px;133    display: flex;134    gap: 26px;135    align-items: center;136    justify-content: center;137  }138  .dot-page {139    width: 26px; height: 26px; border-radius: 50%;140    border: 2px solid #cfcfcf; background: #ffffff;141  }142  .dot-page.active { background: #2f2f2f; border-color: #2f2f2f; }143 144  /* Color section */145  .color-section {146    position: absolute;147    left: 30px;148    right: 30px;149    bottom: 150px;150    padding-top: 20px;151    border-top: 1px solid #efefef;152  }153  .color-title {154    font-size: 44px;155    color: #111;156    font-weight: 700;157    margin-bottom: 28px;158  }159  .swatches {160    display: flex;161    gap: 30px;162    align-items: center;163  }164  .swatch {165    width: 170px; height: 170px; border-radius: 50%;166    border: 6px solid #e7e7e7; overflow: hidden; display: flex; align-items: center; justify-content: center;167    background: #E0E0E0; color: #666; font-size: 26px;168  }169  .swatch.active { border-color: #111; }170 171  /* Bottom navigation */172  .bottom-nav {173    position: absolute;174    bottom: 0;175    left: 0;176    width: 1080px;177    height: 180px;178    background: #f8f8f8;179    border-top: 1px solid #e2e2e2;180    display: flex;181    justify-content: space-around;182    align-items: center;183  }184  .nav-item {185    width: 180px; height: 150px;186    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;187    color: #111;188    font-size: 34px;189  }190  .nav-icon {191    width: 70px; height: 70px;192  }193 194  /* small gesture pill */195  .gesture {196    position: absolute;197    bottom: 190px; /* just above bottom-nav */198    left: 50%;199    transform: translateX(-50%);200    width: 240px; height: 12px;201    background: #bfbfbf;202    border-radius: 6px;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- HEADER -->210  <div class="header">211    <div class="status-bar">212      <div>10:02</div>213      <div class="status-icons">214        <div class="dot"></div>215        <div class="dot" style="background:#1c1c1c;"></div>216        <div class="dot" style="background:#4a4a4a;"></div>217        <div class="signal"></div>218      </div>219    </div>220 221    <div class="back-btn">222      <svg width="54" height="54" viewBox="0 0 24 24">223        <path d="M15 18l-6-6 6-6" stroke="#1d1d1d" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>224      </svg>225    </div>226 227    <div class="search-wrap">228      <svg width="50" height="50" viewBox="0 0 24 24">229        <circle cx="11" cy="11" r="7" stroke="#3f3f3f" stroke-width="2" fill="none"/>230        <path d="M21 21l-4.3-4.3" stroke="#3f3f3f" stroke-width="2" fill="none" stroke-linecap="round"/>231      </svg>232      <div class="search-input">Search Amazon.in</div>233      <div class="icon-btn" title="camera">234        <svg width="32" height="32" viewBox="0 0 24 24">235          <path d="M4 7h4l2-2h4l2 2h4v12H4z" stroke="#2a6660" stroke-width="2" fill="none"/>236          <circle cx="12" cy="13" r="3.5" stroke="#2a6660" stroke-width="2" fill="none"/>237        </svg>238      </div>239      <div class="icon-btn" title="mic">240        <svg width="26" height="26" viewBox="0 0 24 24">241          <rect x="9" y="4" width="6" height="10" rx="3" stroke="#2a6660" stroke-width="2" fill="none"/>242          <path d="M5 11a7 7 0 0 0 14 0" stroke="#2a6660" stroke-width="2" fill="none"/>243          <path d="M12 18v3" stroke="#2a6660" stroke-width="2" fill="none"/>244        </svg>245      </div>246    </div>247  </div>248 249  <!-- CONTENT -->250  <div class="content">251    <div class="product-img">[IMG: Black Joggers Pants]</div>252 253    <div class="share">254      <svg width="40" height="40" viewBox="0 0 24 24">255        <circle cx="18" cy="5" r="3" stroke="#444" stroke-width="2" fill="none"/>256        <circle cx="6" cy="12" r="3" stroke="#444" stroke-width="2" fill="none"/>257        <circle cx="18" cy="19" r="3" stroke="#444" stroke-width="2" fill="none"/>258        <path d="M8.9 11l6.2-4.1M8.9 13l6.2 4.1" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>259      </svg>260    </div>261 262    <div class="heart">263      <svg width="56" height="56" viewBox="0 0 24 24">264        <path d="M12 21s-7-4.4-7-10a4.5 4.5 0 0 1 8-2.6A4.5 4.5 0 0 1 19 11c0 5.6-7 10-7 10z" stroke="#444" stroke-width="2" fill="none"/>265      </svg>266    </div>267 268    <div class="dots">269      <div class="dot-page"></div>270      <div class="dot-page active"></div>271      <div class="dot-page"></div>272      <div class="dot-page"></div>273      <div class="dot-page"></div>274      <div class="dot-page"></div>275      <div class="dot-page"></div>276    </div>277 278    <div class="color-section">279      <div class="color-title">Color: Black</div>280      <div class="swatches">281        <div class="swatch"><span>[IMG: Grey]</span></div>282        <div class="swatch active" style="background:#1c1c1c; color:#ddd;"><span>Black</span></div>283        <div class="swatch" style="background:#d0d6c8;"><span>[IMG: Olive]</span></div>284        <div class="swatch" style="background:#e0e0e0;"><span>[IMG: Light Grey]</span></div>285        <div class="swatch" style="background:#e0e0e0;"><span>[IMG: Navy]</span></div>286      </div>287    </div>288  </div>289 290  <!-- Gesture pill -->291  <div class="gesture"></div>292 293  <!-- Bottom Navigation -->294  <div class="bottom-nav">295    <div class="nav-item">296      <svg class="nav-icon" viewBox="0 0 24 24">297        <path d="M3 11l9-7 9 7v9H3z" stroke="#111" stroke-width="2" fill="none" />298        <path d="M9 20v-6h6v6" stroke="#111" stroke-width="2" fill="none"/>299      </svg>300      <div>Home</div>301    </div>302    <div class="nav-item">303      <svg class="nav-icon" viewBox="0 0 24 24">304        <circle cx="12" cy="7" r="4" stroke="#111" stroke-width="2" fill="none"/>305        <path d="M4 21a8 8 0 0 1 16 0" stroke="#111" stroke-width="2" fill="none"/>306      </svg>307      <div>You</div>308    </div>309    <div class="nav-item">310      <svg class="nav-icon" viewBox="0 0 24 24">311        <rect x="3" y="4" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>312        <rect x="14" y="4" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>313        <rect x="3" y="15" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>314        <rect x="14" y="15" width="7" height="7" stroke="#111" stroke-width="2" fill="none"/>315      </svg>316      <div>More</div>317    </div>318    <div class="nav-item">319      <svg class="nav-icon" viewBox="0 0 24 24">320        <path d="M6 6h15l-2 10H7L6 6z" stroke="#111" stroke-width="2" fill="none"/>321        <circle cx="9" cy="20" r="2" stroke="#111" stroke-width="2" fill="none"/>322        <circle cx="17" cy="20" r="2" stroke="#111" stroke-width="2" fill="none"/>323      </svg>324      <div>Cart</div>325    </div>326    <div class="nav-item">327      <svg class="nav-icon" viewBox="0 0 24 24">328        <path d="M3 6h18M3 12h18M3 18h18" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>329      </svg>330      <div>Menu</div>331    </div>332  </div>333 334</div>335</body>336</html>