GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Winter Jacket UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0A0A0A;13    color: #FFFFFF;14  }15  .status-bar {16    height: 90px;17    padding: 0 40px;18    display: flex;19    align-items: center;20    justify-content: space-between;21    color: #ffffff;22    font-weight: 600;23    font-size: 40px;24  }25  .status-right {26    display: flex;27    gap: 24px;28    align-items: center;29    font-size: 32px;30    color: #cfcfcf;31  }32  .icon {33    width: 44px; height: 44px;34  }35 36  .header {37    padding: 10px 32px 24px 24px;38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .back-btn {43    width: 80px; height: 80px;44    border-radius: 40px;45    background: rgba(255,255,255,0.06);46    display: flex; align-items: center; justify-content: center;47  }48  .title {49    font-size: 68px;50    font-weight: 700;51    letter-spacing: -0.5px;52    flex: 1;53  }54  .header-actions {55    display: flex; gap: 26px;56  }57  .action-pill {58    width: 96px; height: 96px; border-radius: 48px;59    background: rgba(255,255,255,0.08);60    display: flex; align-items: center; justify-content: center;61  }62  .list {63    padding: 20px 24px 180px 24px;64  }65  .card {66    display: flex;67    gap: 28px;68    padding: 24px 0;69    border-top: 1px solid rgba(255,255,255,0.08);70  }71  .card:first-child { border-top: none; }72  .img-wrap {73    position: relative;74    width: 300px; height: 300px;75    border-radius: 26px;76    overflow: hidden;77  }78  .img {79    width: 100%; height: 100%;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    display: flex; align-items: center; justify-content: center;83    color: #5f5f5f; font-size: 26px; text-align: center; padding: 10px;84  }85  .fav {86    position: absolute; right: 12px; top: 12px;87    width: 78px; height: 78px; border-radius: 39px;88    background: rgba(0,0,0,0.55);89    border: 1px solid rgba(255,255,255,0.15);90    display: flex; align-items: center; justify-content: center;91  }92  .card-content {93    flex: 1;94    display: flex; flex-direction: column;95    justify-content: flex-start;96  }97  .card-title {98    font-size: 44px; line-height: 56px; font-weight: 700;99  }100  .brand {101    margin-top: 10px; color: #b9b9b9; font-size: 34px;102  }103  .price {104    margin-top: 18px; font-size: 54px; font-weight: 800;105  }106  .shipping {107    margin-top: 14px; color: #b9b9b9; font-size: 34px;108  }109 110  /* Floating sort/filter bar */111  .float-bar {112    position: absolute;113    left: 250px;114    bottom: 540px;115    background: #3B69FF;116    color: #fff;117    border-radius: 72px;118    padding: 24px 34px;119    display: flex; align-items: center; gap: 36px;120    box-shadow: 0 10px 24px rgba(59,105,255,0.4);121  }122  .float-chip {123    display: flex; align-items: center; gap: 16px;124    font-size: 42px; font-weight: 700;125    padding: 10px 18px;126  }127  .chip-icon {128    width: 44px; height: 44px;129  }130 131  /* Bottom navigation */132  .bottom-nav {133    position: absolute; left: 0; bottom: 0;134    width: 100%; height: 200px;135    background: #0A0A0A;136    border-top: 1px solid rgba(255,255,255,0.08);137    display: flex; align-items: center; justify-content: space-around;138  }139  .nav-item {140    display: flex; flex-direction: column; align-items: center; gap: 16px;141    color: #cfcfcf;142  }143  .nav-item .nav-icon { width: 72px; height: 72px; }144  .nav-item .label { font-size: 34px; }145  .nav-item.active .label { color: #3B69FF; font-weight: 700; }146  .search-pill {147    position: absolute; left: 372px; bottom: 280px;148    width: 336px; height: 120px; border-radius: 60px;149    background: rgba(59,105,255,0.15);150    display: none;151  }152 153  /* subtle separators between groups */154  .section-gap { height: 12px; }155 156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div>10:50</div>164    <div class="status-right">165      <!-- tiny cloud icon -->166      <svg class="icon" viewBox="0 0 24 24">167        <path fill="#cfcfcf" d="M7 17h10a4 4 0 0 0 0-8h-.5A5.5 5.5 0 0 0 6 9.5 3.5 3.5 0 1 0 7 17z"/>168      </svg>169      <!-- wifi icon -->170      <svg class="icon" viewBox="0 0 24 24">171        <path fill="#cfcfcf" d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-6-7a10 10 0 0 1 12 0l-1.6 1.6a8 8 0 0 0-8.8 0L6 11.5zm3 3a6 6 0 0 1 6 0l-1.6 1.6a4 4 0 0 0-2.8 0L9 14.5z"/>172      </svg>173      <div style="display:flex; align-items:center; gap:8px;">174        <svg class="icon" viewBox="0 0 24 24">175          <rect x="3" y="7" width="18" height="10" rx="2" fill="#cfcfcf"/>176          <rect x="20.5" y="10" width="1.5" height="4" fill="#cfcfcf"/>177        </svg>178        <span style="color:#ffffff; font-weight:700;">100%</span>179      </div>180    </div>181  </div>182 183  <!-- Header -->184  <div class="header">185    <div class="back-btn">186      <svg width="44" height="44" viewBox="0 0 24 24">187        <path fill="#fff" d="M15 18l-6-6 6-6v12z"/>188      </svg>189    </div>190    <div class="title">winter jacket</div>191    <div class="header-actions">192      <div class="action-pill">193        <!-- search icon -->194        <svg width="44" height="44" viewBox="0 0 24 24">195          <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"/>196          <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#fff" stroke-width="2"/>197        </svg>198      </div>199      <div class="action-pill">200        <!-- camera icon -->201        <svg width="44" height="44" viewBox="0 0 24 24">202          <rect x="4" y="7" width="16" height="11" rx="2" stroke="#fff" stroke-width="2" fill="none"/>203          <circle cx="12" cy="12.5" r="3.5" fill="#fff"/>204          <rect x="8" y="4" width="8" height="3" rx="1.5" fill="#fff"/>205        </svg>206      </div>207      <div class="action-pill">208        <!-- cart icon -->209        <svg width="44" height="44" viewBox="0 0 24 24">210          <path fill="#fff" d="M7 7h12l-1.5 8H8.5L7 7zm2 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM3 4h3l1 5h11" stroke="#fff" stroke-width="2" fill="none"/>211        </svg>212      </div>213    </div>214  </div>215 216  <!-- Product List -->217  <div class="list">218    <!-- Card 1 -->219    <div class="card">220      <div class="img-wrap">221        <div class="img">[IMG: Two long puffer jackets on mannequins]</div>222        <div class="fav">223          <svg width="40" height="40" viewBox="0 0 24 24">224            <path fill="#fff" d="M12 21s-6.5-4.3-8.3-7.1C2 11.4 3.3 8.5 6.3 8.5c2 0 3.1 1.2 3.7 2.2.6-1 1.7-2.2 3.7-2.2 3 0 4.3 2.9 2.6 5.4C18.5 16.7 12 21 12 21z"/>225          </svg>226        </div>227      </div>228      <div class="card-content">229        <div class="card-title">Men Casual Quilted Thicken Jacket Mid-length Hooded Long Winter Coat Warm Puffer</div>230        <div class="brand">Brand New</div>231        <div class="price">$16.43 to $37.84</div>232        <div class="shipping">Free International Shipping from China</div>233      </div>234    </div>235 236    <!-- Card 2 -->237    <div class="card">238      <div class="img-wrap">239        <div class="img">[IMG: Grid of colorful puffer jackets]</div>240        <div class="fav">241          <svg width="40" height="40" viewBox="0 0 24 24">242            <path fill="#fff" d="M12 21s-6.5-4.3-8.3-7.1C2 11.4 3.3 8.5 6.3 8.5c2 0 3.1 1.2 3.7 2.2.6-1 1.7-2.2 3.7-2.2 3 0 4.3 2.9 2.6 5.4C18.5 16.7 12 21 12 21z"/>243          </svg>244        </div>245      </div>246      <div class="card-content">247        <div class="card-title">Mens Puffer Bubble Down Coat Quilted Padded Winter Warm Jacket Hooded Outerwear</div>248        <div class="brand">Brand New</div>249        <div class="price">$7.99 to $24.59</div>250        <div class="shipping">Free International Shipping from China</div>251      </div>252    </div>253 254    <!-- Card 3 -->255    <div class="card">256      <div class="img-wrap">257        <div class="img">[IMG: Brown shearling-lined denim jacket outfit]</div>258        <div class="fav">259          <svg width="40" height="40" viewBox="0 0 24 24">260            <path fill="#fff" d="M12 21s-6.5-4.3-8.3-7.1C2 11.4 3.3 8.5 6.3 8.5c2 0 3.1 1.2 3.7 2.2.6-1 1.7-2.2 3.7-2.2 3 0 4.3 2.9 2.6 5.4C18.5 16.7 12 21 12 21z"/>261          </svg>262        </div>263      </div>264      <div class="card-content">265        <div class="card-title">Men's Casual Coat Lapel Jacket Denim Warm Fur Collar Fleece Lined Winter Jacket</div>266        <div class="brand">Brand New</div>267        <div class="price">$36.73 to $39.67</div>268        <div class="shipping">Free International Shipping from China</div>269      </div>270    </div>271 272    <!-- Card 4 -->273    <div class="card">274      <div class="img-wrap">275        <div class="img">[IMG: Black bubble down jacket with variants]</div>276        <div class="fav">277          <svg width="40" height="40" viewBox="0 0 24 24">278            <path fill="#fff" d="M12 21s-6.5-4.3-8.3-7.1C2 11.4 3.3 8.5 6.3 8.5c2 0 3.1 1.2 3.7 2.2.6-1 1.7-2.2 3.7-2.2 3 0 4.3 2.9 2.6 5.4C18.5 16.7 12 21 12 21z"/>279          </svg>280        </div>281      </div>282      <div class="card-content">283        <div class="card-title">Men's Jacket Winter Warm Puffer Bubble Down Coat Quilted Zip Padded Outerwear US</div>284        <div class="brand">Brand New</div>285        <div class="price">$19.64 to $23.74</div>286        <div class="shipping">Free International Shipping</div>287      </div>288    </div>289  </div>290 291  <!-- Floating Sort/Filter bar -->292  <div class="float-bar">293    <div class="float-chip">294      <svg class="chip-icon" viewBox="0 0 24 24">295        <path fill="#fff" d="M4 7h16v2H4zm3 5h10v2H7zm4 5h2v2h-2z"/>296      </svg>297      <span>Sort</span>298    </div>299    <div class="float-chip">300      <svg class="chip-icon" viewBox="0 0 24 24">301        <path fill="#fff" d="M4 4h16v3H4zm3 6h10v3H7zm4 6h2v3h-2z"/>302      </svg>303      <span>Filter</span>304    </div>305  </div>306 307  <!-- Bottom Navigation -->308  <div class="bottom-nav">309    <div class="nav-item">310      <svg class="nav-icon" viewBox="0 0 24 24">311        <path fill="#cfcfcf" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/>312      </svg>313      <div class="label">Home</div>314    </div>315    <div class="nav-item">316      <svg class="nav-icon" viewBox="0 0 24 24">317        <circle cx="12" cy="8" r="4" fill="#cfcfcf"/>318        <path fill="#cfcfcf" d="M4 21c0-4.4 4-8 8-8s8 3.6 8 8H4z"/>319      </svg>320      <div class="label">My eBay</div>321    </div>322    <div class="nav-item active">323      <svg class="nav-icon" viewBox="0 0 24 24">324        <circle cx="10" cy="10" r="6" stroke="#3B69FF" stroke-width="2" fill="none"/>325        <line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#3B69FF" stroke-width="2"/>326      </svg>327      <div class="label">Search</div>328    </div>329    <div class="nav-item">330      <svg class="nav-icon" viewBox="0 0 24 24">331        <path fill="#cfcfcf" d="M2 5h20v12H2z"/>332        <circle cx="18" cy="19" r="2" fill="#cfcfcf"/>333        <circle cx="6" cy="19" r="2" fill="#cfcfcf"/>334      </svg>335      <div class="label">Inbox</div>336    </div>337    <div class="nav-item">338      <svg class="nav-icon" viewBox="0 0 24 24">339        <rect x="3" y="4" width="18" height="16" rx="2" fill="#cfcfcf"/>340        <path d="M7 9h10v2H7zm0 4h10v2H7z" fill="#0A0A0A"/>341      </svg>342      <div class="label">Selling</div>343    </div>344  </div>345 346</div>347</body>348</html>