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>Ultraboost Light Running Shoes - Listing</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #ffffff;19    font-family: Arial, Helvetica, sans-serif;20    color: #111;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #333;31    font-size: 32px;32  }33  .status-left { display: flex; align-items: center; gap: 20px; }34  .status-right { display: flex; align-items: center; gap: 24px; }35  .status-icon {36    width: 34px; height: 34px; background: #8d8d8d; border-radius: 6px;37  }38 39  /* Header */40  .header {41    border-bottom: 1px solid #eee;42    padding: 24px 40px 30px 40px;43  }44  .header-top {45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .header-title {50    text-align: center;51    font-weight: 700;52    font-size: 40px;53    letter-spacing: 4px;54    text-transform: uppercase;55    margin: 18px 0 8px;56  }57  .header-sub {58    text-align: center;59    font-size: 28px;60    color: #666;61  }62  .icon-btn {63    width: 72px;64    height: 72px;65    display: flex;66    align-items: center;67    justify-content: center;68  }69  .icon {70    width: 48px; height: 48px;71  }72 73  /* Filters */74  .filters {75    padding: 22px 40px;76    border-bottom: 1px solid #eee;77    display: flex;78    align-items: center;79    gap: 22px;80  }81  .filter-square {82    width: 96px;83    height: 72px;84    border: 2px solid #cfcfcf;85    display: flex;86    align-items: center;87    justify-content: center;88    border-radius: 8px;89  }90  .pill {91    height: 72px;92    min-width: 180px;93    padding: 0 28px;94    border: 2px solid #cfcfcf;95    background: #f7f7f7;96    color: #666;97    border-radius: 8px;98    display: inline-flex;99    align-items: center;100    justify-content: center;101    font-size: 28px;102    letter-spacing: 1px;103  }104 105  /* Product grid */106  .content {107    position: absolute;108    left: 0; right: 0;109    top: 380px; /* below header + filters */110    bottom: 230px; /* above bottom nav */111    overflow-y: hidden;112  }113  .grid {114    display: grid;115    grid-template-columns: 1fr 1fr;116    column-gap: 0;117    row-gap: 0;118    border-top: 1px solid #eee;119    border-left: 1px solid #eee;120  }121  .card {122    border-right: 1px solid #eee;123    border-bottom: 1px solid #eee;124    padding: 24px;125    background: #fafafa;126    position: relative;127  }128  .img-wrap {129    height: 520px;130    background: #E0E0E0;131    border: 1px solid #BDBDBD;132    display: flex;133    align-items: center;134    justify-content: center;135    color: #757575;136    font-size: 28px;137    border-radius: 8px;138  }139  .heart {140    position: absolute;141    right: 40px;142    top: 40px;143    width: 56px;144    height: 56px;145    opacity: 0.35;146  }147  .price {148    margin-top: 22px;149    font-size: 28px;150    color: #666;151  }152  .name {153    margin-top: 10px;154    font-size: 34px;155    font-weight: 700;156    line-height: 1.25;157  }158  .meta {159    margin-top: 10px;160    font-size: 26px;161    color: #888;162    display: flex;163    align-items: center;164    justify-content: space-between;165  }166 167  /* Bottom navigation */168  .bottom-nav {169    position: absolute;170    left: 0; right: 0; bottom: 0;171    height: 210px;172    border-top: 1px solid #eee;173    background: #fff;174    display: flex;175    align-items: center;176    justify-content: space-around;177    padding: 0 40px;178  }179  .nav-item {180    width: 120px;181    height: 120px;182    display: flex;183    align-items: center;184    justify-content: center;185  }186  .nav-icon {187    width: 64px;188    height: 64px;189    stroke: #222;190    fill: none;191    stroke-width: 4;192  }193  .home-pill {194    position: absolute;195    bottom: 18px;196    left: 50%;197    transform: translateX(-50%);198    width: 300px;199    height: 16px;200    background: #d9d9d9;201    border-radius: 10px;202    opacity: 0.8;203  }204</style>205</head>206<body>207<div id="render-target">208  <!-- Status Bar -->209  <div class="status-bar">210    <div class="status-left">211      <div>10:25</div>212      <div class="status-icon"></div>213      <div class="status-icon" style="opacity:.6"></div>214      <div style="font-size:30px; color:#777">☁</div>215    </div>216    <div class="status-right">217      <div style="font-size:30px; color:#777">📶</div>218      <div style="font-size:30px; color:#777">🔋</div>219    </div>220  </div>221 222  <!-- Header -->223  <div class="header">224    <div class="header-top">225      <div class="icon-btn">226        <svg class="icon" viewBox="0 0 24 24">227          <polyline points="15,4 5,12 15,20" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>228        </svg>229      </div>230      <div class="icon-btn">231        <svg class="icon" viewBox="0 0 24 24">232          <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2.5" fill="none"></circle>233          <line x1="16" y1="16" x2="22" y2="22" stroke="#111" stroke-width="2.5" stroke-linecap="round"></line>234        </svg>235      </div>236    </div>237    <div class="header-title">Ultraboost Light Running Shoes</div>238    <div class="header-sub">40 RESULTS</div>239  </div>240 241  <!-- Filters -->242  <div class="filters">243    <div class="filter-square">244      <svg viewBox="0 0 24 24" width="38" height="38">245        <line x1="3" y1="6" x2="21" y2="6" stroke="#333" stroke-width="2"></line>246        <line x1="3" y1="12" x2="16" y2="12" stroke="#333" stroke-width="2"></line>247        <line x1="3" y1="18" x2="12" y2="18" stroke="#333" stroke-width="2"></line>248      </svg>249    </div>250    <div class="pill">WOMEN</div>251    <div class="pill">MEN</div>252    <div class="pill">KIDS</div>253  </div>254 255  <!-- Content Grid -->256  <div class="content">257    <div class="grid">258      <!-- Card 1 -->259      <div class="card">260        <div class="img-wrap">[IMG: White Ultraboost Shoe]</div>261        <svg class="heart" viewBox="0 0 24 24">262          <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.2 3.5 2.1.2-.9 1.5-2.1 3.5-2.1C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z" stroke="#777" fill="none" stroke-width="2"></path>263        </svg>264        <div class="price">$190.00</div>265        <div class="name">Ultraboost Light<br>Running Shoes</div>266        <div class="meta">267          <span>Women's Performance</span>268          <span>+16 •</span>269        </div>270      </div>271 272      <!-- Card 2 -->273      <div class="card">274        <div class="img-wrap">[IMG: Black Ultraboost Shoe]</div>275        <svg class="heart" viewBox="0 0 24 24">276          <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.2 3.5 2.1.2-.9 1.5-2.1 3.5-2.1C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z" stroke="#777" fill="none" stroke-width="2"></path>277        </svg>278        <div class="price">$190.00</div>279        <div class="name">Ultraboost Light<br>Running Shoes</div>280        <div class="meta">281          <span>Women's Performance</span>282          <span>+16 •</span>283        </div>284      </div>285 286      <!-- Card 3 -->287      <div class="card">288        <div class="img-wrap">[IMG: Grey Ultraboost Shoe]</div>289        <svg class="heart" viewBox="0 0 24 24">290          <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.2 3.5 2.1.2-.9 1.5-2.1 3.5-2.1C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z" stroke="#777" fill="none" stroke-width="2"></path>291        </svg>292        <div class="price">$190.00</div>293        <div class="name">Ultraboost Light<br>Running Shoes</div>294        <div class="meta">295          <span>Women's Performance</span>296          <span>+16 •</span>297        </div>298      </div>299 300      <!-- Card 4 -->301      <div class="card">302        <div class="img-wrap">[IMG: Blue Ultraboost Shoe]</div>303        <svg class="heart" viewBox="0 0 24 24">304          <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.2 3.5 2.1.2-.9 1.5-2.1 3.5-2.1C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z" stroke="#777" fill="none" stroke-width="2"></path>305        </svg>306        <div class="price">$190.00</div>307        <div class="name">Ultraboost Light<br>Running Shoes</div>308        <div class="meta">309          <span>Women's Performance</span>310          <span>+16 •</span>311        </div>312      </div>313    </div>314  </div>315 316  <!-- Bottom Navigation -->317  <div class="bottom-nav">318    <div class="nav-item">319      <svg class="nav-icon" viewBox="0 0 24 24">320        <path d="M6 20v-6l6-10 6 10v6" stroke="#111" fill="none"></path>321      </svg>322    </div>323    <div class="nav-item">324      <svg class="nav-icon" viewBox="0 0 24 24">325        <circle cx="10" cy="10" r="7"></circle>326        <line x1="16" y1="16" x2="22" y2="22"></line>327      </svg>328    </div>329    <div class="nav-item">330      <svg class="nav-icon" viewBox="0 0 24 24">331        <path d="M12 21s-7-4.5-9-8.5C1 9 3.5 6.5 6.5 6.5c2 0 3.3 1.2 3.5 2.1.2-.9 1.5-2.1 3.5-2.1C16.5 6.5 19 9 21 12.5 19 16.5 12 21 12 21z"></path>332      </svg>333    </div>334    <div class="nav-item">335      <svg class="nav-icon" viewBox="0 0 24 24">336        <rect x="6" y="7" width="12" height="13"></rect>337        <path d="M8 7V5h8v2"></path>338      </svg>339    </div>340    <div class="nav-item">341      <svg class="nav-icon" viewBox="0 0 24 24">342        <circle cx="12" cy="12" r="9"></circle>343        <path d="M12 6v6l4 4"></path>344      </svg>345    </div>346    <div class="home-pill"></div>347  </div>348</div>349</body>350</html>