GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Party Wear Formal Shoes</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f6f7f9;13    border-radius: 24px;14    box-shadow: 0 10px 30px rgba(0,0,0,0.12);15  }16  /* Top gradient header area */17  .header-wrap {18    width: 100%;19    background: linear-gradient(180deg, #aee3df 0%, #b7e6e2 40%, #c3e9e5 100%);20    padding-bottom: 16px;21    box-sizing: border-box;22  }23  .status-bar {24    height: 60px;25    display: flex;26    align-items: center;27    padding: 0 32px;28    font-size: 28px;29    color: #1a1a1a;30  }31  .status-icons { margin-left: auto; display: flex; gap: 18px; color: #2a2a2a; }32  .top-search-row {33    display: flex;34    align-items: center;35    gap: 20px;36    padding: 16px 24px;37  }38  .icon-btn {39    width: 72px;40    height: 72px;41    border-radius: 36px;42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .icon-btn svg { width: 40px; height: 40px; fill: #2c2c2c; }47  .search-bar {48    flex: 1;49    height: 88px;50    background: #ffffff;51    border-radius: 20px;52    box-shadow: inset 0 0 0 2px #e2e2e2;53    display: flex;54    align-items: center;55    padding: 0 24px;56    gap: 18px;57  }58  .search-input {59    flex: 1;60    font-size: 30px;61    color: #202020;62    white-space: nowrap;63    overflow: hidden;64    text-overflow: ellipsis;65  }66  .search-bar .suffix {67    width: 56px;68    height: 56px;69    border-radius: 12px;70    background: #e8f1f0;71    display: flex; align-items: center; justify-content: center;72    border: 1px solid #cfd8dc;73  }74  .location-row {75    margin-top: 12px;76    display: flex;77    align-items: center;78    gap: 18px;79    padding: 0 28px;80    height: 82px;81    color: #2b2b2b;82    font-size: 30px;83  }84  .location-row .right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #4d4d4d; }85  .chips-row {86    display: flex; align-items: center; gap: 16px;87    padding: 12px 24px 20px;88    flex-wrap: nowrap;89  }90  .chip {91    display: inline-flex; align-items: center; gap: 12px;92    background: #ffffff;93    border: 1px solid #d5d5d5;94    border-radius: 40px;95    padding: 16px 24px;96    font-size: 28px; color: #2a2a2a;97    box-shadow: 0 1px 0 rgba(0,0,0,0.04);98    white-space: nowrap;99  }100  .chip .x {101    background: #eaeaea; border-radius: 50%; width: 28px; height: 28px;102    display: inline-flex; align-items: center; justify-content: center; font-size: 22px;103  }104  .toggle {105    width: 72px; height: 36px; border-radius: 18px; background: #e9ecef; position: relative; margin-left: 8px;106    border: 1px solid #cfd8dc;107  }108  .toggle::after {109    content: ""; position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.2);110  }111 112  /* Content */113  .section {114    padding: 0 28px;115  }116  .title {117    font-size: 42px; font-weight: 700; color: #1a1a1a; margin-top: 20px;118  }119  .subnote {120    display: flex; align-items: center; gap: 10px; color: #6a6a6a; font-size: 26px; margin-top: 8px;121  }122  .banner {123    margin-top: 16px;124    height: 720px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    border-radius: 16px;128    display: flex; align-items: center; justify-content: center;129    color: #757575; font-size: 34px; text-align: center;130  }131  .brand-row {132    margin-top: 22px; display: flex; align-items: center; gap: 20px; padding-bottom: 8px;133  }134  .brand-logo {135    width: 160px; height: 120px;136    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;137    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;138  }139  .brand-link { font-size: 36px; color: #157a8a; }140  .brand-link svg { width: 28px; height: 28px; vertical-align: middle; fill: #157a8a; }141 142  .desc-note {143    font-size: 30px; color: #3a3a3a; margin: 22px 0 6px;144  }145 146  .grid {147    display: grid;148    grid-template-columns: 1fr 1fr;149    gap: 24px;150    padding: 0 6px;151  }152  .card {153    background: #ffffff;154    border: 1px solid #dddddd;155    border-radius: 16px;156    padding: 18px;157    box-sizing: border-box;158    height: 540px;159    display: flex; flex-direction: column;160  }161  .card .img {162    flex: 1;163    background: #E0E0E0;164    border: 1px solid #BDBDBD;165    border-radius: 12px;166    display: flex; align-items: center; justify-content: center;167    color: #757575; font-size: 28px; text-align: center;168  }169 170  /* Bottom navigation */171  .bottom-nav {172    position: absolute; left: 0; right: 0; bottom: 0;173    height: 132px;174    background: #ffffff;175    border-top: 1px solid #e1e1e1;176    display: flex; align-items: center; justify-content: space-around;177  }178  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #2a2a2a; font-size: 24px; }179  .nav-item svg { width: 56px; height: 56px; fill: #2a2a2a; }180  .badge {181    position: absolute; margin-left: 34px; margin-top: -6px;182    background: #00a0a0; color: #fff; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;183    border-radius: 18px; font-size: 22px;184  }185</style>186</head>187<body>188<div id="render-target">189 190  <div class="header-wrap">191    <div class="status-bar">192      <div>11:06</div>193      <div class="status-icons">194        <span>📧</span>195        <span>📶</span>196        <span>🔋</span>197      </div>198    </div>199 200    <div class="top-search-row">201      <div class="icon-btn">202        <svg viewBox="0 0 24 24">203          <path d="M15 6L6 12l9 6" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204        </svg>205      </div>206      <div class="search-bar">207        <svg viewBox="0 0 24 24" style="width:36px;height:36px;fill:#5e6a6a">208          <path d="M10 2a8 8 0 105.3 14.1l5.1 5.1 1.4-1.4-5.1-5.1A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>209        </svg>210        <div class="search-input">party wear formal shoes for men</div>211        <div class="suffix">212          <svg viewBox="0 0 24 24" style="width:26px;height:26px;fill:#157a8a">213            <path d="M5 7h14v10H5V7zm3 0l2-2h4l2 2H8z"/>214          </svg>215        </div>216      </div>217    </div>218 219    <div class="location-row">220      <svg viewBox="0 0 24 24" style="width:32px;height:32px;fill:#2b6f72">221        <path d="M12 2a7 7 0 00-7 7c0 4.7 7 13 7 13s7-8.3 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z"/>222      </svg>223      <div>Choose location for most accurate options</div>224      <div class="right">225        <svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#5e6a6a"><path d="M7 10l5 5 5-5z"/></svg>226      </div>227    </div>228 229    <div class="chips-row">230      <div class="chip">prime <span class="toggle"></span></div>231      <div class="chip">8</div>232      <div class="chip">Men's Shoes <span class="x">×</span></div>233      <div class="chip">Liberty</div>234      <div class="chip">Filters (2)235        <svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:#4d4d4d;margin-left:6px"><path d="M7 10l5 5 5-5z"/></svg>236      </div>237    </div>238  </div>239 240  <div class="section">241    <div class="title">Men's Classic Office Dress Shoes</div>242    <div class="subnote">243      <span>Sponsored</span>244      <svg viewBox="0 0 24 24" style="width:22px;height:22px;fill:#6a6a6a">245        <circle cx="12" cy="12" r="10" fill="none" stroke="#6a6a6a" stroke-width="2"/>246        <path d="M12 8.5a1.2 1.2 0 100-2.4 1.2 1.2 0 000 2.4zm1 2.5h-2v7h2v-7z" fill="#6a6a6a"/>247      </svg>248    </div>249 250    <div class="banner">[IMG: Lifestyle banner - man in suit lounging with brown monk-strap shoes]</div>251 252    <div class="brand-row">253      <div class="brand-logo">[IMG: FAUSTO Logo]</div>254      <div class="brand-link">Shop FAUSTO255        <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>256      </div>257    </div>258 259    <div class="desc-note">Price and other details may vary based on product size and colour.</div>260 261    <div class="grid">262      <div class="card">263        <div class="img">[IMG: Dark Brown Brogue Oxford]</div>264      </div>265      <div class="card">266        <div class="img">[IMG: Tan Brogue Oxford]</div>267      </div>268    </div>269  </div>270 271  <div class="bottom-nav">272    <div class="nav-item">273      <svg viewBox="0 0 24 24">274        <path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>275      </svg>276      <div>Home</div>277    </div>278    <div class="nav-item">279      <svg viewBox="0 0 24 24">280        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>281      </svg>282      <div>Account</div>283    </div>284    <div class="nav-item">285      <svg viewBox="0 0 24 24">286        <path d="M12 4v2a6 6 0 016 6h2c0-4.4-3.6-8-8-8zm-6 6H4c0 4.4 3.6 8 8 8v2c-5.5 0-10-4.5-10-10h2z"/>287      </svg>288      <div>Refresh</div>289    </div>290    <div class="nav-item" style="position: relative;">291      <svg viewBox="0 0 24 24">292        <path d="M7 6h14l-2 10H9L7 6zm-2 0H3v2h2V6zm4 14a2 2 0 104 0H9z"/>293      </svg>294      <div class="badge">0</div>295      <div>Cart</div>296    </div>297    <div class="nav-item">298      <svg viewBox="0 0 24 24">299        <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>300      </svg>301      <div>Menu</div>302    </div>303  </div>304 305</div>306</body>307</html>