GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#000; color:#fff;11  }12 13  /* Status bar */14  .status-bar { height:110px; padding:24px 36px; display:flex; align-items:center; justify-content:space-between; color:#fff; }15  .status-time { font-size:42px; font-weight:700; letter-spacing:0.5px; }16  .status-icons { display:flex; gap:22px; align-items:center; }17  .icon-dot { width:12px; height:12px; background:#7d7d7d; border-radius:50%; }18 19  /* Header */20  .header { padding:10px 36px 0 36px; display:flex; align-items:center; justify-content:space-between; }21  .title-wrap { display:flex; align-items:center; gap:26px; }22  .title { font-size:62px; font-weight:700; }23  .back-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }24  .header-actions { display:flex; gap:22px; }25  .circle-icon {26    width:96px; height:96px; border-radius:50%;27    background:#2b2b2b; display:flex; align-items:center; justify-content:center;28  }29  .circle-icon svg { width:44px; height:44px; fill:#fff; }30 31  /* Action row */32  .actions { padding:26px 36px 12px 36px; display:flex; align-items:center; justify-content:space-between; }33  .action-left { display:flex; align-items:center; gap:16px; color:#4e86ff; font-size:38px; }34  .action-right { display:flex; align-items:center; gap:44px; }35  .action-item { display:flex; align-items:center; gap:14px; color:#4e86ff; font-size:38px; }36  .action-item svg { width:36px; height:36px; fill:#4e86ff; }37 38  /* List */39  .list { padding:18px 24px 0 24px; }40  .card {41    background:#1f1f1f; border-radius:22px; padding:24px;42    display:flex; gap:28px; margin-bottom:34px;43  }44  .img {45    width:290px; height:230px; border-radius:26px; background:#E0E0E0;46    border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;47    color:#757575; font-size:28px; position:relative;48  }49  .fav {50    position:absolute; right:14px; top:14px; width:72px; height:72px;51    background:#3a3a3a; border-radius:50%; display:flex; align-items:center; justify-content:center;52  }53  .fav svg { width:36px; height:36px; fill:none; stroke:#fff; stroke-width:3; }54 55  .content { flex:1; }56  .item-title { font-size:40px; line-height:1.2; font-weight:700; margin-bottom:10px; }57  .sub { color:#c5c5c5; font-size:34px; margin-bottom:14px; }58  .price { font-size:54px; font-weight:800; margin-bottom:6px; }59  .meta { color:#c5c5c5; font-size:32px; }60  .sponsored { color:#9e9e9e; font-size:30px; margin-top:16px; }61  .divider { height:3px; background:#2a2a2a; margin:18px 0; }62 63  .strike { color:#bcbcbc; text-decoration:line-through; margin-right:10px; }64  .discount { color:#bcbcbc; }65 66  /* Results label */67  .results { position:absolute; left:0; right:0; bottom:320px; text-align:center; font-size:36px; color:#eaeaea; }68 69  /* Bottom navigation */70  .bottom-nav {71    position:absolute; left:0; right:0; bottom:0;72    height:240px; background:#141414; border-top:1px solid #2b2b2b;73    display:flex; align-items:center; justify-content:space-around;74    padding-bottom:34px;75  }76  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#cfcfcf; font-size:30px; }77  .nav-item svg { width:48px; height:48px; fill:#cfcfcf; }78  .nav-item.active .icon-wrap {79    width:120px; height:120px; border-radius:60px; background:#103a77; display:flex; align-items:center; justify-content:center;80  }81  .nav-item.active svg { fill:#4e86ff; }82  .home-indicator {83    position:absolute; left:50%; transform:translateX(-50%);84    bottom:258px; width:240px; height:14px; background:#fff; border-radius:7px; opacity:0.85;85  }86</style>87</head>88<body>89<div id="render-target">90  <!-- Status bar -->91  <div class="status-bar">92    <div class="status-time">4:53</div>93    <div class="status-icons">94      <!-- Simple placeholders for status icons -->95      <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff" aria-hidden="true"><rect x="3" y="6" width="14" height="12" rx="2"></rect><rect x="18" y="9" width="3" height="6" rx="1"></rect></svg>96      <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff" aria-hidden="true"><path d="M3 6h18v12H3z"></path><path d="M7 9h10v6H7z" fill="#000"></path></svg>97      <div class="icon-dot"></div>98      <svg viewBox="0 0 24 24" width="34" height="34" fill="#fff" aria-hidden="true"><path d="M12 2l7 4v8c0 4-3 7-7 8-4-1-7-4-7-8V6l7-4z"></path></svg>99    </div>100  </div>101 102  <!-- Header -->103  <div class="header">104    <div class="title-wrap">105      <div class="back-btn" aria-label="Back">106        <svg viewBox="0 0 24 24" width="44" height="44" fill="#fff"><path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path></svg>107      </div>108      <div class="title">Hiking shoes</div>109    </div>110    <div class="header-actions">111      <div class="circle-icon">112        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4.5-4.5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>113      </div>114      <div class="circle-icon">115        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2"></rect><circle cx="12" cy="12" r="3" fill="#000"></circle></svg>116      </div>117      <div class="circle-icon">118        <svg viewBox="0 0 24 24"><path d="M3 6h18l-2 10H5L3 6z"></path><circle cx="8" cy="19" r="2"></circle><circle cx="18" cy="19" r="2"></circle></svg>119      </div>120    </div>121  </div>122 123  <!-- Actions -->124  <div class="actions">125    <div class="action-left">126      <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z" fill="none" stroke="#4e86ff" stroke-width="2"></path></svg>127      <div>Save this search</div>128    </div>129    <div class="action-right">130      <div class="action-item">131        <span>Sort</span>132        <svg viewBox="0 0 24 24"><path d="M8 7l4-4 4 4H8zM16 17l-4 4-4-4h8z"></path></svg>133      </div>134      <div class="action-item">135        <span>Filter • 3</span>136        <svg viewBox="0 0 24 24"><path d="M3 5h18l-7 8v5l-4 1v-6L3 5z"></path></svg>137      </div>138    </div>139  </div>140 141  <!-- List of results -->142  <div class="list">143    <!-- Card 1 -->144    <div class="card">145      <div class="img">146        [IMG: Adidas Terrex AX3 hiking shoe]147        <div class="fav">148          <svg viewBox="0 0 24 24"><path d="M12 20.5s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10.5c0 5.6-7 10-7 10z"></path></svg>149        </div>150      </div>151      <div class="content">152        <div class="item-title">ADIDAS TERREX AX3 MEN'S HIKING SHOES FX4575 size 8 and 9 Brand New #B4-3</div>153        <div class="sub">Brand New</div>154        <div class="price">$79.86 to $89.86</div>155        <div class="meta">+$86.07 shipping from United States</div>156        <div class="sponsored">Sponsored</div>157      </div>158    </div>159 160    <div class="divider"></div>161 162    <!-- Card 2 -->163    <div class="card">164      <div class="img">165        [IMG: Adidas AX2S trail shoe]166        <div class="fav">167          <svg viewBox="0 0 24 24"><path d="M12 20.5s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10.5c0 5.6-7 10-7 10z"></path></svg>168        </div>169      </div>170      <div class="content">171        <div class="item-title">Adidas AX2S Men's Trail Running Hiking Sneakers Athletic Shoes</div>172        <div class="sub">Brand New</div>173        <div class="price">$79.99 to $100.00</div>174        <div class="meta">+$86.12 shipping from United States • 10+ watchers</div>175        <div class="sponsored">Sponsored</div>176      </div>177    </div>178 179    <div class="divider"></div>180 181    <!-- Card 3 -->182    <div class="card">183      <div class="img">184        [IMG: Adidas Terrex AX4 olive/black shoe]185        <div class="fav">186          <svg viewBox="0 0 24 24"><path d="M12 20.5s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10.5c0 5.6-7 10-7 10z"></path></svg>187        </div>188      </div>189      <div class="content">190        <div class="item-title">Adidas HP7390 Men's Terrex AX4 Hiking Shoes - Focus Olive / Core Black / Grey</div>191        <div class="sub">Brand New</div>192        <div class="price">$80.00</div>193        <div class="meta">194          <span class="strike">$100.00</span>195          <span class="discount">• 20% off</span><br>196          +$76.13 shipping from United States • 29+ watchers197        </div>198      </div>199    </div>200  </div>201 202  <!-- Results count above bottom bar -->203  <div class="results">527 results</div>204 205  <!-- Home indicator -->206  <div class="home-indicator"></div>207 208  <!-- Bottom navigation -->209  <div class="bottom-nav">210    <div class="nav-item">211      <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H15v-5H9v5H3z"></path></svg>212      <div>Home</div>213    </div>214    <div class="nav-item">215      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#cfcfcf" stroke-width="2"></path></svg>216      <div>My eBay</div>217    </div>218    <div class="nav-item active">219      <div class="icon-wrap">220        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4.5-4.5" stroke="#4e86ff" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>221      </div>222      <div>Search</div>223    </div>224    <div class="nav-item">225      <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path><path d="M18 16V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"></path></svg>226      <div>Inbox</div>227    </div>228    <div class="nav-item">229      <svg viewBox="0 0 24 24"><path d="M20 6l-3 12H7L4 6h16z"></path><path d="M9 10h6" stroke="#cfcfcf" stroke-width="2"></path></svg>230      <div>Selling</div>231    </div>232  </div>233</div>234</body>235</html>