GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Results - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; border-radius: 34px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);11  }12 13  /* Status bar */14  .status-bar {15    height: 90px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    color: #333; font-weight: 600; font-size: 36px;17  }18  .status-icons { display: flex; gap: 22px; align-items: center; color: #666; font-size: 30px; }19 20  /* Header */21  .header {22    height: 170px; display: flex; align-items: center;23    padding: 0 36px; border-bottom: 1px solid #eee;24  }25  .back-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }26  .title { font-size: 54px; font-weight: 700; color: #222; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }27  .search-btn {28    width: 96px; height: 96px; border-radius: 48px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;29    background: #fff;30  }31 32  /* Save & Sort row */33  .actions-row {34    padding: 26px 36px; display: flex; align-items: center; justify-content: space-between; color: #2b5cff;35    font-size: 36px; font-weight: 600;36  }37  .save-search { display: flex; align-items: center; gap: 18px; }38  .sort-link { color: #2b5cff; }39 40  /* List */41  .list { padding: 0 30px; }42  .item { display: flex; gap: 28px; padding: 34px 6px; }43  .thumb {44    width: 320px; height: 240px; border-radius: 28px; overflow: hidden; position: relative;45  }46  .thumb .img {47    width: 100%; height: 100%;48    background: #E0E0E0; border: 1px solid #BDBDBD;49    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;50  }51  .fav {52    position: absolute; right: 14px; top: 14px; width: 86px; height: 86px;53    border-radius: 43px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15);54    display: flex; align-items: center; justify-content: center;55  }56  .details { flex: 1; padding-top: 4px; }57  .title-line { font-size: 40px; color: #222; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }58  .meta { font-size: 30px; color: #6f6f6f; margin-bottom: 12px; }59  .price { font-size: 54px; font-weight: 800; color: #111; margin-bottom: 8px; }60  .shipping { font-size: 30px; color: #6f6f6f; }61  .sponsored { font-size: 28px; color: #9a9a9a; margin-top: 18px; }62  .divider { height: 1px; background: #e6e6e6; margin: 16px 0; }63 64  /* Results count */65  .results-count {66    text-align: center; font-size: 34px; color: #666; padding: 24px 0; border-top: 10px solid #f4f4f4;67    border-bottom: 10px solid #f4f4f4; margin-top: 6px;68  }69 70  /* Bottom nav */71  .bottom-nav {72    position: absolute; left: 0; right: 0; bottom: 74px; height: 180px;73    background: #fff; border-top: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: space-around;74    padding: 16px 0;75  }76  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #333; }77  .nav-item span { font-size: 28px; }78  .nav-icon { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }79  .nav-active .nav-icon {80    width: 90px; height: 90px; border-radius: 45px; background: #e9f0ff; border: 2px solid #2b5cff;81  }82  .nav-active span { color: #2b5cff; font-weight: 700; }83 84  /* Home indicator */85  .home-indicator {86    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);87    width: 280px; height: 16px; background: #cfcfcf; border-radius: 8px;88  }89  svg { display: block; }90</style>91</head>92<body>93<div id="render-target">94 95  <div class="status-bar">96    <div>2:24</div>97    <div class="status-icons">98      <span>✉️</span>99      <span>⚙️</span>100    </div>101  </div>102 103  <div class="header">104    <div class="back-btn">105      <svg width="48" height="48" viewBox="0 0 24 24">106        <path d="M14 5 L7 12 L14 19" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>107      </svg>108    </div>109    <div class="title">New Balance Shoe...</div>110    <div class="search-btn">111      <svg width="44" height="44" viewBox="0 0 24 24">112        <circle cx="11" cy="11" r="7" fill="none" stroke="#222" stroke-width="2"/>113        <path d="M20 20 L16 16" stroke="#222" stroke-width="2" stroke-linecap="round"/>114      </svg>115    </div>116  </div>117 118  <div class="actions-row">119    <div class="save-search">120      <svg width="38" height="38" viewBox="0 0 24 24">121        <path d="M12 21s-7-4.4-7-9.4A4.6 4.6 0 0 1 9.6 7c1.2 0 2.3.5 3 1.4A4.2 4.2 0 0 1 15.6 7 4.6 4.6 0 0 1 19 11.6C19 16.6 12 21 12 21z"122              fill="none" stroke="#2b5cff" stroke-width="2" stroke-linejoin="round"/>123      </svg>124      <div>Save this search</div>125    </div>126    <div class="sort-link">Sort</div>127  </div>128 129  <div class="list">130 131    <!-- Item 1 -->132    <div class="item">133      <div class="thumb">134        <div class="img">[IMG: New Balance Sports Shoes]</div>135        <div class="fav">136          <svg width="40" height="40" viewBox="0 0 24 24">137            <path d="M12 21s-7-4.4-7-9.4A4.6 4.6 0 0 1 9.6 7c1.2 0 2.3.5 3 1.4A4.2 4.2 0 0 1 15.6 7 4.6 4.6 0 0 1 19 11.6C19 16.6 12 21 12 21z"138                  fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>139          </svg>140        </div>141      </div>142      <div class="details">143        <div class="title-line">New Balance Sports Shoes For Women Size 5.5 Brand New</div>144        <div class="meta">New (Other)</div>145        <div class="price">£45.00</div>146        <div class="shipping">+£2.87 shipping</div>147        <div class="sponsored">Sponsored</div>148      </div>149    </div>150 151    <div class="divider"></div>152 153    <!-- Item 2 -->154    <div class="item">155      <div class="thumb">156        <div class="img">[IMG: New Balance Trail Shoe on wooden floor]</div>157        <div class="fav">158          <svg width="40" height="40" viewBox="0 0 24 24">159            <path d="M12 21s-7-4.4-7-9.4A4.6 4.6 0 0 1 9.6 7c1.2 0 2.3.5 3 1.4A4.2 4.2 0 0 1 15.6 7 4.6 4.6 0 0 1 19 11.6C19 16.6 12 21 12 21z"160                  fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>161          </svg>162        </div>163      </div>164      <div class="details">165        <div class="title-line">New Balance Women's Shoes For Crews 510v3 Shoes Teal WID510L3 Size US 9</div>166        <div class="meta">Pre-Owned</div>167        <div class="price">£44.49</div>168        <div class="shipping">or Best Offer<br>+£34.71 shipping<br>from United States</div>169        <div class="sponsored">Sponsored</div>170      </div>171    </div>172 173    <div class="divider"></div>174 175    <!-- Item 3 -->176    <div class="item">177      <div class="thumb">178        <div class="img">[IMG: New Balance 510v3 sneakers on marble]</div>179        <div class="fav">180          <svg width="40" height="40" viewBox="0 0 24 24">181            <path d="M12 21s-7-4.4-7-9.4A4.6 4.6 0 0 1 9.6 7c1.2 0 2.3.5 3 1.4A4.2 4.2 0 0 1 15.6 7 4.6 4.6 0 0 1 19 11.6C19 16.6 12 21 12 21z"182                  fill="none" stroke="#222" stroke-width="2" stroke-linejoin="round"/>183          </svg>184        </div>185      </div>186      <div class="details">187        <div class="title-line">Women's 7.5 B M New Balance Shoes For Crews Slip-Resistant 510v3 Shoes Sneakers</div>188        <div class="meta">Pre-Owned</div>189        <div class="price">£38.57</div>190        <div class="shipping">or Best Offer<br>+£32.58 shipping<br>from United States</div>191      </div>192    </div>193 194  </div>195 196  <div class="results-count">276 results</div>197 198  <div class="bottom-nav">199    <div class="nav-item">200      <div class="nav-icon">201        <svg width="46" height="46" viewBox="0 0 24 24">202          <path d="M4 10 L12 4 L20 10 V20 H4z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>203        </svg>204      </div>205      <span>Home</span>206    </div>207    <div class="nav-item">208      <div class="nav-icon">209        <svg width="46" height="46" viewBox="0 0 24 24">210          <circle cx="12" cy="8" r="4" fill="none" stroke="#333" stroke-width="2"/>211          <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#333" stroke-width="2"/>212        </svg>213      </div>214      <span>My eBay</span>215    </div>216    <div class="nav-item nav-active">217      <div class="nav-icon">218        <svg width="44" height="44" viewBox="0 0 24 24">219          <circle cx="11" cy="11" r="7" fill="none" stroke="#2b5cff" stroke-width="2"/>220          <path d="M20 20 L16 16" stroke="#2b5cff" stroke-width="2" stroke-linecap="round"/>221        </svg>222      </div>223      <span>Search</span>224    </div>225    <div class="nav-item">226      <div class="nav-icon">227        <svg width="46" height="46" viewBox="0 0 24 24">228          <path d="M6 9a6 6 0 1 1 12 0v6H6z" fill="none" stroke="#333" stroke-width="2"/>229          <path d="M10 20h4" stroke="#333" stroke-width="2" stroke-linecap="round"/>230        </svg>231      </div>232      <span>Inbox</span>233    </div>234    <div class="nav-item">235      <div class="nav-icon">236        <svg width="46" height="46" viewBox="0 0 24 24">237          <path d="M3 7 L13 3 L21 11 L11 15 L3 7z" fill="none" stroke="#333" stroke-width="2"/>238          <circle cx="16" cy="8" r="2" fill="#333"/>239        </svg>240      </div>241      <span>Selling</span>242    </div>243  </div>244 245  <div class="home-indicator"></div>246 247</div>248</body>249</html>