GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Picked for you - Mock</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Arial,Helvetica,sans-serif;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#000; color:#fff;10  }11  /* Status bar */12  .status-bar{13    height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;14    font-size:34px; color:#eaeaea; opacity:.9;15  }16  .status-icons{display:flex;gap:18px;align-items:center;}17  .dot{width:18px;height:18px;background:#eaeaea;border-radius:50%;}18  /* Header */19  .header{display:flex;align-items:center; padding:10px 36px 0 36px;}20  .icon-btn{21    width:80px;height:80px;border-radius:40px;background:#121212;border:1px solid #2b2b2b;22    display:flex;align-items:center;justify-content:center;margin-right:18px;23  }24  .title{font-size:64px;font-weight:700;flex:1;}25  .actions{display:flex;gap:20px;}26  .circle-icon{width:88px;height:88px;border-radius:44px;background:#121212;border:1px solid #2b2b2b;display:flex;align-items:center;justify-content:center;}27  /* Section heading */28  .section{padding:24px 36px 12px 36px;}29  .section h2{margin:14px 0 8px 0;font-size:54px;}30  .muted{color:#9e9e9e;font-size:34px;}31  /* Grid */32  .grid{padding:10px 36px 220px 36px;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:24px;}33  .card{background:transparent;border-radius:26px;overflow:visible;}34  .image{35    width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;36    border-radius:26px; display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:14px; position:relative;37  }38  .heart{39    position:absolute; top:18px; right:18px; width:86px; height:86px; border-radius:43px;40    background:#111; border:1px solid #2b2b2b; display:flex; align-items:center; justify-content:center;41  }42  .card .title-txt{font-size:40px; line-height:1.2; margin:18px 4px 10px 4px; font-weight:700;}43  .price{font-size:48px; font-weight:800; margin:6px 4px;}44  .strike{font-size:32px; color:#cfcfcf; opacity:.8;}45  .strike del{opacity:.7;}46  .shipping{font-size:32px;color:#cfcfcf;margin-top:4px;}47  .tag{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:#0b2bff1a;color:#8ab6ff;border:1px solid #2e4cff;border-radius:18px;padding:8px 14px;font-size:28px;}48  .last-one{color:#e6e6e6;font-size:32px;margin-top:8px;}49  /* Bottom navigation */50  .bottom-nav{51    position:absolute; left:0; right:0; bottom:0; height:180px; background:#0b0b0b; border-top:1px solid #1f1f1f;52    display:flex; align-items:center; justify-content:space-around;53  }54  .nav-item{display:flex; flex-direction:column; align-items:center; gap:12px; color:#d7d7d7; font-size:34px;}55  .nav-icon{56    width:96px;height:96px;border-radius:24px;background:#121212;border:1px solid #242424;display:flex;align-items:center;justify-content:center;57  }58  .nav-item.active .nav-icon{background:#171717;border-color:#2e2e2e; box-shadow:inset 0 0 0 2px #1f1f1f;}59  .badge{60    position:absolute; background:#ff3b30; color:#fff; font-weight:700;61    width:44px;height:44px;border-radius:22px; display:flex; align-items:center; justify-content:center;62    font-size:28px; right:-6px; top:-10px; border:3px solid #0b0b0b;63  }64  /* utility */65  .rel{position:relative;}66</style>67</head>68<body>69<div id="render-target">70 71  <!-- Status bar -->72  <div class="status-bar">73    <div>10:36</div>74    <div class="status-icons">75      <div class="dot"></div>76      <div class="dot"></div>77      <div class="dot"></div>78      <div class="dot"></div>79    </div>80  </div>81 82  <!-- Header -->83  <div class="header">84    <div class="icon-btn" aria-label="Back">85      <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 4.5 7 13l8.5 8.5-2.1 2.1L2.8 13l10.6-10.6 2.1 2.1z"/></svg>86    </div>87    <div class="title">Picked for you</div>88    <div class="actions">89      <div class="circle-icon">90        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-5.2-5.2-1.4 1.4L19.6 22 21 20z"/></svg>91      </div>92      <div class="circle-icon">93        <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff"><path d="M7 6h15l-2 9H9L7 6zm-1 0H2V4h4l1 4H4l2 7h14v2H5a2 2 0 0 1-2-1.5L1 4h5zM8 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 18 20z"/></svg>94      </div>95    </div>96  </div>97 98  <!-- Section heading -->99  <div class="section">100    <h2>Visually similar items</h2>101    <div class="muted">Sponsored</div>102  </div>103 104  <!-- Grid of product cards -->105  <div class="grid">106 107    <!-- Card 1 -->108    <div class="card">109      <div class="image">110        [IMG: A4Tech black mouse + USB dongle]111        <div class="heart">112          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 21s-7-4.4-9.3-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.3 7c-2.3 3.6-9.3 8-9.3 8z"/></svg>113        </div>114      </div>115      <div class="title-txt">A4Tech V-Track Advance Ray Track All Surface Wired Wireless 2.4G Optical Mouse</div>116      <div class="price">$15.29</div>117      <div class="strike"><del>US $17.99</del> 15% off</div>118      <div class="shipping">+ US $24.87 shipping</div>119      <div class="tag">120        <svg width="18" height="18" viewBox="0 0 24 24" fill="#8ab6ff"><path d="M12 17.3 6.2 21l1.5-6.5L2 9.5l6.6-.6L12 3l3.4 5.9 6.6.6-5.7 5 1.5 6.5z"/></svg>121        Top Rated Plus122      </div>123    </div>124 125    <!-- Card 2 -->126    <div class="card">127      <div class="image">128        [IMG: White dual-mode rechargeable mouse + receiver]129        <div class="heart">130          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 21s-7-4.4-9.3-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.3 7c-2.3 3.6-9.3 8-9.3 8z"/></svg>131        </div>132      </div>133      <div class="title-txt">Portable Dual Mode Rechargeable Wireless Mouse for PC, Computer, Laptop, MacBook</div>134      <div class="price">$17.85</div>135      <div class="strike"><del>US $18.79</del> 5% off</div>136      <div class="shipping">+ US $24.94 shipping</div>137      <div class="last-one">Last one</div>138    </div>139 140    <!-- Card 3 -->141    <div class="card">142      <div class="image">143        [IMG: CHUWI black slim mouse + receiver]144        <div class="heart">145          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 21s-7-4.4-9.3-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.3 7c-2.3 3.6-9.3 8-9.3 8z"/></svg>146        </div>147      </div>148      <div class="title-txt">Wireless Mouse 2.4G Optical Cordless Mice Optical Scroll for PC Laptop Computer</div>149      <div class="price">$6.63</div>150    </div>151 152    <!-- Card 4 -->153    <div class="card">154      <div class="image">155        [IMG: Lenovo 400 grey mouse + nano USB]156        <div class="heart">157          <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 21s-7-4.4-9.3-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.3 7c-2.3 3.6-9.3 8-9.3 8z"/></svg>158        </div>159      </div>160      <div class="title-txt">Lenovo 400 Wireless Mouse, 1200DPI Optical Sensor, 2.4GHz Wireless Nano USB</div>161      <div class="price">$—</div>162    </div>163 164  </div>165 166  <!-- Bottom navigation -->167  <div class="bottom-nav">168    <div class="nav-item active">169      <div class="nav-icon">170        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 3 2 12h3v9h6v-6h2v6h6v-9h3L12 3z"/></svg>171      </div>172      <div>Home</div>173    </div>174    <div class="nav-item">175      <div class="nav-icon">176        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>177      </div>178      <div>My eBay</div>179    </div>180    <div class="nav-item">181      <div class="nav-icon">182        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-5.2-5.2-1.4 1.4L19.6 22 21 20z"/></svg>183      </div>184      <div>Search</div>185    </div>186    <div class="nav-item rel">187      <div class="nav-icon rel">188        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>189        <div class="badge">1</div>190      </div>191      <div>Inbox</div>192    </div>193    <div class="nav-item">194      <div class="nav-icon">195        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M10 2l10 10-8 8H2v-10l8-8zm2.6 3.4L5 13v6h6l7.6-7.6-6-6z"/></svg>196      </div>197      <div>Selling</div>198    </div>199  </div>200 201</div>202</body>203</html>