GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Layout helpers */20  .page-padding { padding: 0 48px; }21  .row { display: flex; align-items: center; }22  .between { justify-content: space-between; }23 24  /* Top area */25  .top-space { height: 120px; } /* simulate status bar spacing */26  .icon-btn {27    width: 72px; height: 72px; border-radius: 36px;28    display: flex; align-items: center; justify-content: center;29    color: #111;30  }31  .icon-stroke { stroke: #111; }32  .icon-stroke-muted { stroke: #5f5f5f; }33 34  /* Search */35  .search-wrap { position: relative; margin-top: 24px; }36  .search-pill {37    height: 120px; border: 2px solid #d4d4d4; border-radius: 60px;38    display: flex; align-items: center; padding: 0 32px 0 36px; color: #888; background: #fff;39  }40  .search-pill svg { margin-right: 22px; }41  .search-text { font-size: 40px; color: #8d8d8d; }42  .scan-btn {43    position: absolute; right: 0; top: -16px;44    width: 120px; height: 120px; border-radius: 60px; background: #0a0a0a;45    display: flex; align-items: center; justify-content: center;46    box-shadow: 0 8px 18px rgba(0,0,0,0.25);47  }48  .scan-btn svg { transform: scale(1.05); }49 50  /* Recently viewed */51  .section-title {52    font-weight: 800; font-size: 52px; margin: 64px 0 28px 0;53  }54  .clear { color: #8d8d8d; font-size: 42px; }55  .recent-row { display: flex; gap: 44px; }56  .recent-circle {57    width: 190px; height: 190px; border-radius: 95px;58    border: 4px solid #e8e8e8; background: #fff;59    display: flex; align-items: center; justify-content: center;60  }61  .img-ph {62    width: 150px; height: 150px; background: #E0E0E0; border: 1px solid #BDBDBD;63    display: flex; align-items: center; justify-content: center; text-align: center;64    color: #757575; font-size: 28px; padding: 8px;65  }66 67  /* Promo card */68  .card {69    width: 984px; margin: 56px auto 0 auto; background: #fff; border-radius: 32px;70    box-shadow: 0 22px 40px rgba(0,0,0,0.12);71    overflow: hidden;72  }73  .card .hero {74    width: 100%; height: 560px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;75    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px;76  }77  .card .body { padding: 44px; }78  .card .title { font-size: 56px; font-weight: 800; margin-bottom: 20px; }79  .card .desc { font-size: 40px; color: #666; line-height: 1.4; }80 81  /* Tabs */82  .tabs { margin: 64px 0 24px 0; }83  .tabs .tab {84    font-size: 48px; margin-right: 36px; font-weight: 800; color: #111;85  }86  .tabs .tab.inactive { color: #8d8d8d; font-weight: 700; }87  .indicator {88    width: 160px; height: 8px; background: #111; border-radius: 4px; margin-left: 8px;89  }90  .thumbs { display: flex; gap: 28px; overflow: hidden; padding-bottom: 24px; }91  .thumb {92    flex: 0 0 300px; height: 180px;93    background: #E0E0E0; border: 1px solid #BDBDBD;94    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;95    border-radius: 12px;96  }97 98  /* Bottom navigation */99  .bottom-nav {100    position: absolute; left: 0; right: 0; bottom: 64px;101    height: 160px; background: #fff; border-top: 1px solid #e6e6e6;102    display: flex; align-items: center; justify-content: space-around;103  }104  .nav-item { width: 140px; height: 120px; display: flex; align-items: center; justify-content: center; position: relative; }105  .nav-item svg { stroke: #9e9e9e; }106  .nav-item.active svg { stroke: #111; }107  .badge {108    position: absolute; right: 18px; top: 18px; background: #2b73ff; color: #fff;109    width: 44px; height: 44px; border-radius: 22px; font-size: 28px; display: flex; align-items: center; justify-content: center;110    font-weight: 700;111  }112 113  /* Gesture bar area */114  .gesture-area {115    position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: #000;116    display: flex; align-items: center; justify-content: center;117  }118  .gesture-pill {119    width: 240px; height: 10px; background: #fff; border-radius: 8px;120  }121 122  /* Make sure content doesn't hide behind bottom nav */123  .spacer { height: 260px; }124</style>125</head>126<body>127<div id="render-target">128  <div class="top-space"></div>129 130  <div class="page-padding">131    <!-- Top icons -->132    <div class="row between">133      <div class="icon-btn" aria-label="Profile">134        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" class="icon-stroke" stroke-width="2">135          <circle cx="12" cy="8" r="4"></circle>136          <path d="M4 20c2-4 14-4 16 0"></path>137        </svg>138      </div>139      <div class="icon-btn" aria-label="Notifications">140        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" class="icon-stroke" stroke-width="2">141          <path d="M18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z"></path>142          <path d="M13.73 21a2 2 0 01-3.46 0"></path>143        </svg>144      </div>145    </div>146 147    <!-- Search -->148    <div class="search-wrap">149      <div class="search-pill">150        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" class="icon-stroke-muted" stroke-width="2">151          <circle cx="11" cy="11" r="7"></circle>152          <path d="M20 20l-3.5-3.5"></path>153        </svg>154        <div class="search-text">What are you looking for?</div>155      </div>156      <div class="scan-btn" aria-label="Scan">157        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">158          <path d="M4 8V4h4"></path>159          <path d="M16 4h4v4"></path>160          <path d="M20 16v4h-4"></path>161          <path d="M8 20H4v-4"></path>162          <rect x="8" y="8" width="8" height="8"></rect>163        </svg>164      </div>165    </div>166 167    <!-- Recently viewed header -->168    <div class="row between" style="margin-top: 64px;">169      <div class="section-title">Recently viewed</div>170      <div class="clear">Clear all</div>171    </div>172 173    <!-- Recently viewed items -->174    <div class="recent-row">175      <div class="recent-circle">176        <div class="img-ph">[IMG: Metal kitchen cart]</div>177      </div>178      <div class="recent-circle">179        <div class="img-ph">[IMG: Black rolling cart]</div>180      </div>181    </div>182  </div>183 184  <!-- Promo card -->185  <div class="card">186    <div class="hero">[IMG: Living room TV setup]</div>187    <div class="body">188      <div class="title">New Lower Price</div>189      <div class="desc">From storage to furniture, don’t miss these190        New lower prices!</div>191    </div>192  </div>193 194  <!-- Tabs and thumbnails -->195  <div class="page-padding">196    <div class="tabs">197      <div class="row" style="align-items: flex-end;">198        <div class="tab">Products</div>199        <div class="tab inactive">Rooms</div>200      </div>201      <div class="indicator"></div>202    </div>203 204    <div class="thumbs">205      <div class="thumb">[IMG: Living room inspiration]</div>206      <div class="thumb">[IMG: TV units]</div>207      <div class="thumb">[IMG: Kitchen ideas]</div>208      <div class="thumb">[IMG: Storage]</div>209    </div>210  </div>211 212  <div class="spacer"></div>213 214  <!-- Bottom Navigation -->215  <div class="bottom-nav">216    <div class="nav-item active" aria-label="Home">217      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="2">218        <path d="M3 10l9-7 9 7"></path>219        <path d="M5 10v10h14V10"></path>220      </svg>221    </div>222    <div class="nav-item" aria-label="Search">223      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="2">224        <circle cx="11" cy="11" r="7"></circle>225        <path d="M20 20l-3.5-3.5"></path>226      </svg>227    </div>228    <div class="nav-item" aria-label="Categories">229      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="2">230        <rect x="3" y="3" width="7" height="7"></rect>231        <rect x="14" y="3" width="7" height="7"></rect>232        <rect x="3" y="14" width="7" height="7"></rect>233        <rect x="14" y="14" width="7" height="7"></rect>234      </svg>235    </div>236    <div class="nav-item" aria-label="Favorites">237      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="2">238        <path d="M20.8 8.6c0 5.6-8.8 10.4-8.8 10.4S3.2 14.2 3.2 8.6A4.6 4.6 0 0 1 12 7.4a4.6 4.6 0 0 1 8.8 1.2z"></path>239      </svg>240    </div>241    <div class="nav-item" aria-label="Cart">242      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke-width="2">243        <circle cx="9" cy="20" r="1.5"></circle>244        <circle cx="18" cy="20" r="1.5"></circle>245        <path d="M3 4h2l2 12h11l2-8H7"></path>246      </svg>247      <div class="badge">1</div>248    </div>249  </div>250 251  <!-- Gesture bar -->252  <div class="gesture-area">253    <div class="gesture-pill"></div>254  </div>255</div>256</body>257</html>