GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Item - Adjustable Laptop Table</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;9    position:relative; overflow:hidden;10    background:#000; color:#fff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:80px; padding:0 28px;17    display:flex; align-items:center; justify-content:space-between;18    color:#d6d6d6; font-size:30px; letter-spacing:1px;19  }20  .status-icons { display:flex; gap:18px; align-items:center; }21  .dot { width:8px; height:8px; background:#d6d6d6; border-radius:50%; display:inline-block; }22 23  /* Header */24  .header {25    position:absolute; top:80px; left:0; right:0;26    height:110px; display:flex; align-items:center;27    padding:0 24px; gap:20px;28  }29  .icon-btn {30    width:84px; height:84px; border-radius:50%;31    background:#1b1b1b; display:flex; align-items:center; justify-content:center;32  }33  .title { font-size:56px; font-weight:700; margin-left:12px; }34 35  /* Simple icons */36  svg { fill:#fff; }37  .icons-right { margin-left:auto; display:flex; gap:22px; }38 39  /* Image area */40  .image-area {41    position:absolute; top:190px; left:0; right:0;42    padding:28px;43  }44  .product-image {45    width:1024px; height:920px;46    background:#E0E0E0; border:1px solid #BDBDBD;47    color:#555; display:flex; align-items:center; justify-content:center;48    text-align:center; font-size:34px; line-height:1.4;49  }50  .fav {51    position:absolute; right:28px; top:740px;52    width:120px; height:120px; border-radius:60px;53    background:#111; display:flex; align-items:center; justify-content:center;54    box-shadow:0 6px 16px rgba(0,0,0,0.6);55  }56  .carousel-dots {57    margin-top:22px; display:flex; justify-content:center; gap:16px;58  }59  .carousel-dots span {60    width:16px; height:16px; border-radius:50%; background:#6a6a6a; display:inline-block;61  }62  .carousel-dots span.active { background:#fff; }63 64  /* Content */65  .content {66    position:absolute; top:1200px; left:0; right:0;67    padding:0 28px;68  }69  .item-title {70    font-size:64px; font-weight:800; line-height:1.2; margin-bottom:30px;71  }72  .seller {73    display:flex; align-items:center; gap:24px; margin:18px 0 12px 0;74  }75  .seller-badge {76    width:110px; height:110px; border-radius:55px; background:#b30000;77    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:34px;78  }79  .seller-info { display:flex; flex-direction:column; }80  .seller-name { font-size:42px; }81  .seller-rating { font-size:34px; color:#bfbfbf; }82 83  .price-row {84    font-size:60px; font-weight:800; margin:26px 0 10px 0;85  }86  .shipping-note {87    font-size:40px; color:#c9c9c9; margin-top:6px;88  }89 90  .divider { height:1px; background:#262626; margin:26px 0; }91 92  .label { font-size:42px; color:#dcdcdc; display:flex; align-items:center; gap:14px; }93  .pill {94    margin-top:16px;95    border:1px solid #3a3a3a; border-radius:16px;96    padding:26px; font-size:42px; color:#fff; display:flex; justify-content:space-between; align-items:center;97    background:#0e0e0e;98  }99  .caret { width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:18px solid #8a8a8a; }100 101  /* Bottom navigation */102  .bottom-nav {103    position:absolute; left:0; right:0; bottom:0;104    height:150px; background:#0e0e0e; border-top:1px solid #242424;105    display:flex; justify-content:space-around; align-items:center;106  }107  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#d8d8d8; font-size:30px; }108  .nav-item.active { color:#4da3ff; }109  .nav-icon {110    width:80px; height:80px; border-radius:22px;111    background:#141414; display:flex; align-items:center; justify-content:center;112    border:1px solid #222;113  }114  .nav-item.active .nav-icon { background:#11233a; border-color:#214d80; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div>1:07</div>123    <div class="status-icons">124      <span>◉</span>125      <span class="dot"></span><span class="dot"></span>126      <span>⋅</span>127    </div>128  </div>129 130  <!-- Header -->131  <div class="header">132    <div class="icon-btn" title="Back">133      <svg viewBox="0 0 24 24" width="38" height="38"><path d="M15.5 5L7 12l8.5 7v-3.5L11 12l4.5-3.5V5z"/></svg>134    </div>135    <div class="title">Item</div>136    <div class="icons-right">137      <div class="icon-btn" title="Search">138        <svg viewBox="0 0 24 24" width="36" height="36"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 109 15.5l.3.3v.8L19 23l2-2-5.5-7zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>139      </div>140      <div class="icon-btn" title="Cart">141        <svg viewBox="0 0 24 24" width="36" height="36"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.2 14h9.9c.8 0 1.5-.5 1.7-1.3l2-7.2H6.1L5.5 3H2v2h2l2.6 9.2c.2.5.7.8 1.2.8z"/></svg>142      </div>143      <div class="icon-btn" title="Share">144        <svg viewBox="0 0 24 24" width="36" height="36"><path d="M18 16a3 3 0 00-2.4 1.2L8.9 13a3 3 0 000-2l6.7-4.2A3 3 0 0018 8a3 3 0 10-3-3 3 3 0 00.1.7L8.3 9A3 3 0 006 8a3 3 0 103 3c0-.3 0-.5-.1-.7l6.8 4.3c.1.3.1.6.1.9a3 3 0 103-3z"/></svg>145      </div>146      <div class="icon-btn" title="More">147        <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="5" cy="12" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="19" cy="12" r="2.2"/></svg>148      </div>149    </div>150  </div>151 152  <!-- Image Area -->153  <div class="image-area">154    <div class="product-image">[IMG: Adjustable Portable Laptop Table collage]</div>155    <div class="fav">156      <svg viewBox="0 0 24 24" width="52" height="52"><path d="M12 21s-6.7-4.2-9.4-8A5.6 5.6 0 016 3.2c1.7 0 3.1.8 4 2 1-1.2 2.4-2 4-2A5.6 5.6 0 0121.4 13c-2.7 3.8-9.4 8-9.4 8z"/></svg>157    </div>158    <div class="carousel-dots">159      <span class="active"></span><span></span><span></span><span></span><span></span>160    </div>161  </div>162 163  <!-- Content -->164  <div class="content">165    <div class="item-title">166      Adjustable Laptop Table Stand - Movable Bedside Computer Desk for Sofa and Bed167    </div>168 169    <div class="seller">170      <div class="seller-badge">1STOP</div>171      <div class="seller-info">172        <div class="seller-name">uronestop (1208)</div>173        <div class="seller-rating">95.8% positive feedback</div>174      </div>175      <div style="margin-left:auto;">176        <svg viewBox="0 0 24 24" width="44" height="44" style="opacity:.6;"><path d="M9 6l6 6-6 6"/></svg>177      </div>178    </div>179 180    <div class="price-row">$19.99 <span style="font-size:46px; font-weight:600; color:#bdbdbd;"> + $472.93 shipping</span></div>181 182    <div class="shipping-note">Est. delivery Thu, Dec 14 - Fri, Dec 29</div>183 184    <div class="divider"></div>185 186    <div class="label">187      Condition188      <svg viewBox="0 0 24 24" width="30" height="30" style="opacity:.7;"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>189    </div>190    <div class="pill">191      <span>New</span>192    </div>193 194    <div style="height:20px;"></div>195 196    <div class="pill">197      <span>Colour: Black</span>198      <div class="caret"></div>199    </div>200 201    <!-- Extra spacer to reach bottom nav comfortably -->202    <div style="height:420px;"></div>203  </div>204 205  <!-- Bottom Navigation -->206  <div class="bottom-nav">207    <div class="nav-item">208      <div class="nav-icon">209        <svg viewBox="0 0 24 24" width="38" height="38"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>210      </div>211      <div>Home</div>212    </div>213    <div class="nav-item">214      <div class="nav-icon">215        <svg viewBox="0 0 24 24" width="38" height="38"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>216      </div>217      <div>My eBay</div>218    </div>219    <div class="nav-item active">220      <div class="nav-icon">221        <svg viewBox="0 0 24 24" width="38" height="38"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 109 15.5l.3.3v.8L19 23l2-2-5.5-7zM10 15a5 5 0 110-10 5 5 0 010 10z"/></svg>222      </div>223      <div>Search</div>224    </div>225    <div class="nav-item">226      <div class="nav-icon">227        <svg viewBox="0 0 24 24" width="38" height="38"><path d="M20 4H4a2 2 0 00-2 2v10l4-3h14a2 2 0 002-2V6a2 2 0 00-2-2z"/></svg>228      </div>229      <div>Inbox</div>230    </div>231    <div class="nav-item">232      <div class="nav-icon">233        <svg viewBox="0 0 24 24" width="38" height="38"><path d="M17 6H7V4h10v2zm3 3H4v2h16V9zm-3 5H7v2h10v-2zm3 3H4v2h16v-2z"/></svg>234      </div>235      <div>Selling</div>236    </div>237  </div>238 239</div>240</body>241</html>