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>Search Results - Hiking Shoes</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;13    color:#212121;14  }15 16  /* Top status bar */17  .status-bar{18    height:96px; padding:0 32px;19    display:flex; align-items:center; justify-content:space-between;20    color:#616161; font-weight:600; letter-spacing:0.5px;21    font-size:36px;22  }23  .status-icons{ display:flex; align-items:center; gap:22px; }24  .status-icons .dot{ width:16px; height:16px; background:#616161; border-radius:50%; opacity:.9; }25  .battery{26    width:44px; height:24px; border:3px solid #616161; border-radius:6px; position:relative;27  }28  .battery::after{ content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#616161; border-radius:2px; }29  .battery .level{ position:absolute; left:3px; top:3px; bottom:3px; right:10px; background:#616161; border-radius:2px; }30 31  /* Header with search */32  .header{ padding:0 24px 16px; }33  .search-row{34    height:124px;35    display:flex; align-items:center; gap:18px;36  }37  .icon-btn{38    width:72px; height:72px; border-radius:36px;39    display:flex; align-items:center; justify-content:center;40  }41  .icon-btn svg{ width:40px; height:40px; stroke:#424242; fill:none; stroke-width:4; }42  .search-pill{43    flex:1; height:88px; border-radius:44px;44    background:#f3f3f3; display:flex; align-items:center;45    padding:0 28px; gap:16px; color:#444; font-size:34px;46  }47  .search-pill .placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }48  .right-icons{ display:flex; align-items:center; gap:12px; }49  .right-icons .icon-btn svg{ stroke:#424242; }50 51  /* Tabs */52  .tabs{53    display:flex; gap:38px; padding:0 24px; height:96px; align-items:flex-end;54    border-bottom:1px solid #eee;55  }56  .tab{57    padding:0 8px 20px; font-size:34px; color:#757575;58  }59  .tab.active{ color:#ff6d00; position:relative; }60  .tab.active::after{61    content:""; position:absolute; left:0; right:0; bottom:6px;62    height:6px; background:#ff6d00; border-radius:4px;63  }64 65  /* Chips */66  .chips-wrap{ padding:20px 24px; border-bottom:1px solid #eee; }67  .chips{68    display:flex; gap:18px; overflow-x:auto; padding-bottom:6px;69  }70  .chip{71    display:inline-flex; align-items:center; gap:12px;72    padding:20px 28px; font-size:30px; color:#424242;73    border:1px solid #d0d0d0; border-radius:40px; background:#fff; white-space:nowrap;74  }75  .chip svg{ width:28px; height:28px; stroke:#616161; fill:none; stroke-width:3.2; }76 77  /* List */78  .content{79    height: calc(100% - 96px - 124px - 96px - 96px); /* container minus top sections (chips a bit taller) */80    padding:0 0 20px; overflow-y:auto;81    -webkit-overflow-scrolling: touch;82  }83  .section{ padding:24px; }84 85  .card{86    display:flex; gap:26px; padding:24px 16px 24px 24px; border-bottom:1px solid #eee;87  }88  .thumb{89    width:330px; height:240px; border-radius:22px; background:#E0E0E0;90    border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:26px; padding:10px;91  }92  .details{ flex:1; display:flex; flex-direction:column; gap:8px; }93  .title{ font-size:32px; line-height:1.25; color:#424242; }94  .price{ font-size:46px; font-weight:800; margin-top:8px; }95  .muted{ color:#777; font-size:28px; }96  .meta{ color:#9e9e9e; font-size:26px; margin-top:6px; }97  .ad{ color:#bdbdbd; font-size:26px; }98  .verified{ color:#1976d2; font-weight:700; display:inline-flex; align-items:center; gap:8px; font-size:30px; }99  .verified svg{ width:28px; height:28px; fill:#1976d2; stroke:none; }100 101  .brand-line{ display:flex; align-items:center; gap:10px; color:#616161; font-size:28px; }102  .crown{ color:#ffc107; }103 104  /* Bottom home indicator (iOS-like) */105  .home-indicator{106    position:absolute; left:50%; transform:translateX(-50%);107    bottom:20px; width:360px; height:10px; background:#000; opacity:.8; border-radius:8px;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status bar -->115  <div class="status-bar">116    <div>4:01</div>117    <div class="status-icons">118      <div class="dot"></div>119      <div class="dot" style="opacity:.7;"></div>120      <div class="battery"><div class="level"></div></div>121    </div>122  </div>123 124  <!-- Search and actions -->125  <div class="header">126    <div class="search-row">127      <div class="icon-btn" aria-label="Back">128        <svg viewBox="0 0 24 24"><path d="M15 19L8 12l7-7"/></svg>129      </div>130      <div class="search-pill">131        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#616161" fill="none" stroke-width="3"></circle><path d="M20 20l-3-3" stroke="#616161" stroke-width="3" fill="none"/></svg>132        <div class="placeholder">nike hiking shoes for men</div>133      </div>134      <div class="right-icons">135        <div class="icon-btn" aria-label="Favorite">136          <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.5-7 10-7 10z"/></svg>137        </div>138        <div class="icon-btn" aria-label="Camera">139          <svg viewBox="0 0 24 24">140            <path d="M3 8h18v11H3z"/><path d="M9 8l2-3h2l2 3"/><circle cx="12" cy="13" r="3"/>141          </svg>142        </div>143        <div class="icon-btn" aria-label="Filter">144          <svg viewBox="0 0 24 24">145            <path d="M4 6h16M7 12h10M10 18h4"/>146          </svg>147        </div>148        <div class="icon-btn" aria-label="More">149          <svg viewBox="0 0 24 24">150            <circle cx="5" cy="12" r="2" fill="#424242"></circle>151            <circle cx="12" cy="12" r="2" fill="#424242"></circle>152            <circle cx="19" cy="12" r="2" fill="#424242"></circle>153          </svg>154        </div>155      </div>156    </div>157  </div>158 159  <!-- Tabs -->160  <div class="tabs">161    <div class="tab active">All</div>162    <div class="tab">Customizable</div>163    <div class="tab">Ready to Ship</div>164    <div class="tab">Suppliers</div>165  </div>166 167  <!-- Chips -->168  <div class="chips-wrap">169    <div class="chips">170      <div class="chip">171        Sort172        <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>173      </div>174      <div class="chip">Verified supplier</div>175      <div class="chip">20-day delivery</div>176      <div class="chip">Season</div>177      <div class="chip">Min. order</div>178    </div>179  </div>180 181  <!-- Scrollable content -->182  <div class="content">183 184    <div class="section">185      <!-- Card 1 -->186      <div class="card">187        <div class="thumb">[IMG: Navy Hiking Shoe Boot]</div>188        <div class="details">189          <div class="brand-line">190            <span class="crown">♛</span>191            <span>2018 New Product Action Trekking Shoes/Hiking Shoes ...</span>192          </div>193          <div class="price">$20.00 - $30.00</div>194          <div class="muted">Min. order: 500 pairs</div>195          <div class="meta">6 yrs · CN</div>196        </div>197      </div>198 199      <!-- Card 2 (ad) -->200      <div class="card">201        <div class="thumb">[IMG: Tactical Hiking Boot Placeholder]</div>202        <div class="details">203          <div class="title">Popular products safety high-top hiking outdoor tactical boot for men</div>204          <div style="position:absolute; right:24px; font-size:26px;" class="ad">Ad</div>205          <div class="price">$26.00 - $28.00</div>206          <div class="muted">Min. order: 10 pieces</div>207          <div class="meta">1 yrs · CN</div>208        </div>209      </div>210 211      <!-- Card 3 -->212      <div class="card">213        <div class="thumb">[IMG: Brown Leather Outdoor Shoes]</div>214        <div class="details">215          <div class="title">Best men stylish high quality running / hiking casual shoe</div>216          <div class="price">$5.39 - $5.99</div>217          <div class="muted">Min. order: 1 pair</div>218          <div class="meta">2 orders · 3 yrs · CN</div>219        </div>220      </div>221 222      <!-- Card 4 (verified) -->223      <div class="card">224        <div class="thumb">[IMG: Beige Hiking Sneaker]</div>225        <div class="details">226          <div class="title">New Arrival Hiking Shoes Mountain ...</div>227          <div class="price">$3.70 - $5.70</div>228          <div class="muted">Min. order: 2 pairs</div>229          <div class="verified">230            <svg viewBox="0 0 24 24"><path d="M9 16l-3-3 1.5-1.5L9 13l7.5-7.5L18 7z"/></svg>231            Verified232          </div>233          <div class="meta">21 orders · 3 yrs · CN</div>234        </div>235      </div>236 237      <!-- Card 5 (cutoff start of next item as in screenshot) -->238      <div class="card" style="padding-bottom:80px;">239        <div class="thumb">[IMG: Spiked Ice Cleats]</div>240        <div class="details">241          <div class="title">Ready to Ship Crampons Ice Cleats Traction Snow...</div>242          <div class="price">$8.50 - $12.00</div>243          <div class="muted">Min. order: 1 piece</div>244          <div class="meta">CN</div>245        </div>246      </div>247    </div>248 249  </div>250 251  <!-- Home indicator -->252  <div class="home-indicator"></div>253</div>254</body>255</html>