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 App UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12    color: #111;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Header / status area */23  .header {24    height: 240px;25    background: linear-gradient(180deg, #bfe9df 0%, #d9f3ec 100%);26    padding: 18px 28px 24px 28px;27    box-sizing: border-box;28  }29  .status-row {30    height: 44px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #0a0a0a;35    font-weight: 600;36    font-size: 32px;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 18px;43  }44  .status-dot {45    width: 16px;46    height: 16px;47    border-radius: 8px;48    background: #2c2c2c;49    opacity: 0.8;50  }51  .icon {52    width: 36px;53    height: 36px;54    display: inline-block;55  }56  .icon svg {57    width: 100%;58    height: 100%;59  }60 61  .search-row {62    margin-top: 18px;63    display: flex;64    align-items: center;65    gap: 22px;66  }67  .back-btn {68    width: 72px;69    height: 72px;70    border-radius: 36px;71    display: flex;72    align-items: center;73    justify-content: center;74  }75  .search-bar {76    flex: 1;77    height: 96px;78    border-radius: 48px;79    background: #ffffff;80    box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08) inset;81    border: 1px solid #dcdcdc;82    display: flex;83    align-items: center;84    padding: 0 26px;85    box-sizing: border-box;86    gap: 20px;87  }88  .search-placeholder {89    font-size: 34px;90    color: #6d6d6d;91    flex: 1;92  }93  .search-tools {94    display: flex;95    align-items: center;96    gap: 26px;97  }98  /* Content */99  .content {100    padding: 0 28px 0 28px;101    box-sizing: border-box;102  }103  .grid-row {104    margin-top: 24px;105    display: grid;106    grid-template-columns: 1fr 1fr;107    gap: 22px;108  }109  .img-ph {110    width: 100%;111    height: 420px;112    background: #E0E0E0;113    border: 1px solid #BDBDBD;114    display: flex;115    justify-content: center;116    align-items: center;117    color: #555;118    font-size: 28px;119    text-align: center;120  }121  .exp-row {122    margin: 12px 0 18px 0;123    display: flex;124    align-items: center;125    gap: 16px;126    color: #2d2d2d;127    font-size: 36px;128    font-weight: 600;129  }130  .caret {131    width: 26px;132    height: 26px;133    border-left: 6px solid #4b4b4b;134    border-bottom: 6px solid #4b4b4b;135    transform: rotate(-45deg);136    margin-right: 6px;137  }138 139  .banner {140    width: 100%;141    height: 760px;142    background: #E0E0E0;143    border: 1px solid #BDBDBD;144    display: flex;145    flex-direction: column;146    justify-content: center;147    align-items: center;148    color: #444;149    font-size: 34px;150    position: relative;151    margin-top: 8px;152  }153  .banner-text {154    font-size: 40px;155    color: #3d3d3d;156    text-align: center;157    line-height: 1.3;158  }159  .sponsored-tag {160    position: absolute;161    right: 14px;162    bottom: 10px;163    font-size: 26px;164    color: #7a7a7a;165    display: flex;166    align-items: center;167    gap: 8px;168  }169  .info-icon {170    width: 26px;171    height: 26px;172  }173 174  .section-title {175    margin-top: 30px;176    font-size: 46px;177    font-weight: 700;178    color: #111;179  }180  .sponsored-inline {181    margin-top: 10px;182    display: flex;183    align-items: center;184    gap: 12px;185    color: #7a7a7a;186    font-size: 28px;187  }188 189  /* Bottom nav */190  .bottom-nav {191    position: absolute;192    left: 0;193    bottom: 120px;194    width: 100%;195    height: 160px;196    border-top: 1px solid #e6e6e6;197    background: #ffffff;198    display: flex;199    justify-content: space-around;200    align-items: center;201  }202  .nav-item {203    width: 160px;204    display: flex;205    flex-direction: column;206    align-items: center;207    gap: 10px;208    color: #4c4c4c;209    font-size: 30px;210  }211  .nav-item .icon {212    width: 52px;213    height: 52px;214  }215  .nav-item.active {216    color: #13a1a3;217  }218  .gesture-bar {219    position: absolute;220    left: 50%;221    transform: translateX(-50%);222    bottom: 40px;223    width: 240px;224    height: 10px;225    background: #bfbfbf;226    border-radius: 6px;227    opacity: 0.6;228  }229</style>230</head>231<body>232<div id="render-target">233 234  <!-- Header -->235  <div class="header">236    <div class="status-row">237      <div>10:00</div>238      <div class="status-right">239        <div class="status-dot"></div>240        <div class="status-dot" style="opacity:0.5;"></div>241        <!-- WiFi icon -->242        <span class="icon">243          <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">244            <path d="M3 9c4-4 14-4 18 0"></path>245            <path d="M6 12c3-3 9-3 12 0"></path>246            <path d="M9 15c2-2 6-2 8 0"></path>247            <circle cx="12" cy="18" r="1.8" fill="#222"></circle>248          </svg>249        </span>250        <!-- Battery icon -->251        <span class="icon">252          <svg viewBox="0 0 28 20" fill="none" stroke="#222" stroke-width="2">253            <rect x="2" y="4" width="20" height="12" rx="2"></rect>254            <rect x="24" y="8" width="3" height="4" rx="1" fill="#222"></rect>255            <rect x="4" y="6" width="14" height="8" fill="#40c3b8"></rect>256          </svg>257        </span>258      </div>259    </div>260 261    <div class="search-row">262      <div class="back-btn">263        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2.5">264          <path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"></path>265        </svg>266      </div>267      <div class="search-bar">268        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">269          <circle cx="10.5" cy="10.5" r="6.5"></circle>270          <path d="M16 16 L21 21" stroke-linecap="round"></path>271        </svg>272        <div class="search-placeholder">Search Amazon.in</div>273        <div class="search-tools">274          <!-- Camera -->275          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">276            <rect x="3" y="7" width="18" height="12" rx="2"></rect>277            <path d="M7 7 L9 5 H15 L17 7" stroke-linejoin="round"></path>278            <circle cx="12" cy="13" r="3.5"></circle>279          </svg>280          <!-- Mic -->281          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">282            <rect x="9" y="4" width="6" height="10" rx="3"></rect>283            <path d="M5 11c0 4 3 7 7 7s7-3 7-7" stroke-linecap="round"></path>284            <path d="M12 18v3"></path>285          </svg>286        </div>287      </div>288    </div>289  </div>290 291  <!-- Content under header -->292  <div class="content">293    <div class="grid-row">294      <div class="img-ph">[IMG: Grey Joggers / Shoes]</div>295      <div class="img-ph">[IMG: Olive Joggers / Sneakers]</div>296    </div>297 298    <div class="exp-row">299      <div class="caret"></div>300      <div>Explore more recommendations</div>301    </div>302 303    <div class="banner">304      <div class="banner-text">[IMG: Adidas Sports Shoes & Sneakers Banner]</div>305      <div class="sponsored-tag">306        <span>Sponsored</span>307        <svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2">308          <circle cx="12" cy="12" r="10"></circle>309          <circle cx="12" cy="8" r="1.7" fill="#7a7a7a"></circle>310          <path d="M12 11v6" stroke-linecap="round"></path>311        </svg>312      </div>313    </div>314 315    <div class="section-title">Similar Brands on Amazon</div>316    <div class="sponsored-inline">317      <span>Sponsored</span>318      <svg class="info-icon" viewBox="0 0 24 24" fill="none" stroke="#7a7a7a" stroke-width="2">319        <circle cx="12" cy="12" r="10"></circle>320        <circle cx="12" cy="8" r="1.7" fill="#7a7a7a"></circle>321        <path d="M12 11v6" stroke-linecap="round"></path>322      </svg>323    </div>324  </div>325 326  <!-- Bottom navigation -->327  <div class="bottom-nav">328    <div class="nav-item active">329      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#13a1a3" stroke-width="2">330        <path d="M3 11L12 4l9 7"></path>331        <path d="M5 10v9h14v-9"></path>332      </svg>333      <div>Home</div>334    </div>335    <div class="nav-item">336      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#4c4c4c" stroke-width="2">337        <circle cx="12" cy="8" r="4"></circle>338        <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>339      </svg>340      <div>You</div>341    </div>342    <div class="nav-item">343      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#4c4c4c" stroke-width="2">344        <rect x="4" y="4" width="16" height="16" rx="2"></rect>345        <path d="M4 12h16M12 4v16"></path>346      </svg>347      <div>More</div>348    </div>349    <div class="nav-item">350      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#4c4c4c" stroke-width="2">351        <path d="M6 6h14l-2 9H7L6 6z"></path>352        <circle cx="9" cy="20" r="1.8"></circle>353        <circle cx="18" cy="20" r="1.8"></circle>354      </svg>355      <div>Cart</div>356    </div>357    <div class="nav-item">358      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#4c4c4c" stroke-width="2">359        <path d="M4 7h16M4 12h16M4 17h16"></path>360      </svg>361      <div>Menu</div>362    </div>363  </div>364 365  <div class="gesture-bar"></div>366</div>367</body>368</html>