GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Item - Adjustable Laptop Table Stand</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#0a0a0a;color:#fff;11  }12  .status-bar{13    position:absolute;top:0;left:0;right:0;height:80px;14    display:flex;align-items:center;justify-content:space-between;15    padding:0 34px;color:#f1f1f1;font-size:30px;opacity:.9;16  }17  .app-bar{18    position:absolute;top:80px;left:0;right:0;height:120px;19    display:flex;align-items:center;justify-content:space-between;20    padding:0 26px;border-bottom:1px solid #1e1e1e;21  }22  .app-left{display:flex;align-items:center;gap:18px;}23  .app-title{font-size:52px;font-weight:700;}24  .icon-btn{25    width:96px;height:96px;border-radius:48px;background:#1a1a1a;26    display:flex;align-items:center;justify-content:center;27    border:1px solid #2a2a2a;28  }29  .header-spacer{height:200px;} /* 80 + 120 */30  .image-area{31    position:absolute;top:200px;left:0;width:100%;height:860px;32    padding:26px 26px 0 26px;box-sizing:border-box;33  }34  .product-img{35    width:100%;height:820px;background:#E0E0E0;border:1px solid #BDBDBD;36    display:flex;align-items:center;justify-content:center;color:#666;font-size:42px;text-align:center;37  }38  .heart-fab{39    position:absolute;right:36px;top:620px;width:126px;height:126px;border-radius:63px;40    background:#111;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;41    box-shadow:0 6px 20px rgba(0,0,0,.5);42  }43  .count-chip{44    position:absolute;right:30px;top:220px;background:#2a2a2a;color:#fff;45    padding:16px 26px;border-radius:30px;font-size:32px;opacity:.95;46  }47  .dots{48    position:absolute;left:0;right:0;top:1000px;height:40px;display:flex;align-items:center;justify-content:center;gap:18px;49  }50  .dot{width:14px;height:14px;border-radius:7px;background:#777;}51  .dot.active{background:#e0e0e0;width:18px;height:18px;border-radius:9px;}52  .content{53    position:absolute;top:1040px;left:0;right:0;bottom:210px; /* keep space for bottom bar */54    overflow:hidden;55    padding:24px 36px 0 36px;box-sizing:border-box;56  }57  .title{58    font-size:60px;line-height:76px;font-weight:800;margin:10px 0 26px 0;59  }60  .seller-row{61    display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px 0;62  }63  .seller-info{display:flex;align-items:center;gap:28px;}64  .seller-badge{65    width:112px;height:112px;border-radius:56px;background:#d32f2f;display:flex;align-items:center;justify-content:center;66    font-weight:800;font-size:30px;letter-spacing:.5px;67  }68  .seller-text .name{font-size:42px;font-weight:700;}69  .seller-text .meta{font-size:34px;color:#bdbdbd;margin-top:4px;}70  .price{font-size:68px;font-weight:800;margin:26px 0 10px 0;}71  .shipping{font-size:40px;color:#cfcfcf;margin-left:12px;font-weight:600;}72  .est{font-size:34px;color:#c9c9c9;margin:10px 0 26px 0;}73  .divider{height:1px;background:#1f1f1f;margin:14px 0;}74  .row{display:flex;align-items:center;gap:16px;margin:14px 0;font-size:38px;}75  .muted{color:#cfcfcf;}76  .info-icon{width:36px;height:36px;border-radius:18px;border:2px solid #777;display:inline-flex;align-items:center;justify-content:center;font-size:24px;color:#aaa;}77  .select-box{78    width:100%;height:118px;border:1px solid #2a2a2a;background:#111;border-radius:16px;79    display:flex;align-items:center;justify-content:space-between;80    padding:0 28px;box-sizing:border-box;margin:16px 0;color:#e9e9e9;font-size:40px;81  }82  .select-label{color:#cfcfcf;margin-right:10px;}83  .bottom-bar{84    position:absolute;left:0;right:0;bottom:0;height:210px;background:#0b0b0b;85    border-top:1px solid #1d1d1d;display:flex;align-items:center;justify-content:space-around;86  }87  .tab{width:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e6e6e6;font-size:30px;gap:12px;}88  .tab .icon{width:64px;height:64px}89  .search-focus{90    width:132px;height:132px;border-radius:66px;background:#0c203c;border:2px solid #1d5fff;91    display:flex;align-items:center;justify-content:center;92  }93</style>94</head>95<body>96<div id="render-target">97 98  <!-- Status bar -->99  <div class="status-bar">100    <div>1:05</div>101    <div style="display:flex;gap:18px;align-items:center;">102      <span style="width:26px;height:26px;border:2px solid #e5e5e5;border-radius:4px;display:inline-block;"></span>103      <span style="width:38px;height:22px;border:2px solid #e5e5e5;border-radius:3px;display:inline-block;"></span>104      <span style="width:22px;height:22px;background:#e5e5e5;border-radius:50%;display:inline-block;"></span>105    </div>106  </div>107 108  <!-- App bar -->109  <div class="app-bar">110    <div class="app-left">111      <div class="icon-btn" style="background:#0a0a0a;border:none;width:80px;height:80px;">112        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 3.5 7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/></svg>113      </div>114      <div class="app-title">Item</div>115    </div>116    <div style="display:flex;gap:18px;">117      <div class="icon-btn">118        <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>119      </div>120      <div class="icon-btn">121        <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><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-2zM3 4h2l3.6 7.6-1.4 2.4C6.8 15 7.5 16 8.6 16H19v-2H9.4l1-1.8h6.8c.7 0 1.3-.4 1.6-1l3-5.2H6.2L5.3 4H3z"/></svg>122      </div>123      <div class="icon-btn">124        <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff"><path d="M18 8l-6-6v4H6v4h6v4l6-6zM4 18h16v2H4z"/></svg>125      </div>126      <div class="icon-btn">127        <svg width="6" height="38" viewBox="0 0 6 24" fill="#fff"><circle cx="3" cy="4" r="2.2"/><circle cx="3" cy="12" r="2.2"/><circle cx="3" cy="20" r="2.2"/></svg>128      </div>129    </div>130  </div>131 132  <!-- Image area -->133  <div class="image-area">134    <div class="product-img">[IMG: Adjustable Portable Laptop Table - collage]</div>135    <div class="count-chip">1 of 12</div>136    <div class="heart-fab">137      <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff"><path d="M12 21s-7.2-4.6-9.6-8.4C.7 10.3 2 6.9 5.3 6.2 7.3 5.8 9 6.7 10 7.9c1-1.2 2.7-2.1 4.7-1.7 3.3.7 4.6 4.1 2.9 6.4C19.2 16.4 12 21 12 21z"/></svg>138    </div>139  </div>140  <div class="dots">141    <div class="dot active"></div>142    <div class="dot"></div>143    <div class="dot"></div>144    <div class="dot"></div>145    <div class="dot"></div>146  </div>147 148  <!-- Content -->149  <div class="content">150    <div class="title">Adjustable Laptop Table Stand - Movable Bedside Computer Desk for Sofa and Bed</div>151 152    <div class="seller-row">153      <div class="seller-info">154        <div class="seller-badge">1STOP</div>155        <div class="seller-text">156          <div class="name">uronestop (1208)</div>157          <div class="meta">95.8% positive feedback</div>158        </div>159      </div>160      <div>161        <svg width="40" height="40" viewBox="0 0 24 24" fill="#9e9e9e"><path d="M8.6 3.6 7 5.2 13.8 12 7 18.8l1.6 1.6L17 12z"/></svg>162      </div>163    </div>164 165    <div class="price">166      $19.99 <span class="shipping">+ $17.72 shipping</span>167    </div>168    <div class="est">Est. delivery Thu, Dec 14 - Fri, Dec 29</div>169 170    <div class="divider"></div>171 172    <div class="row">173      <div style="font-weight:700;">Condition</div>174      <div style="margin-left:auto;display:flex;align-items:center;gap:10px;">175        <div>New</div>176        <div class="info-icon">i</div>177      </div>178    </div>179 180    <div class="select-box">181      <div><span class="select-label">Colour:</span> Select</div>182      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 9l5 5 5-5z"/></svg>183    </div>184 185    <div class="select-box">186      <div><span class="select-label">Quantity:</span> 5</div>187      <svg width="36" height="36" viewBox="0 0 24 24" fill="#cfcfcf"><path d="M7 9l5 5 5-5z"/></svg>188    </div>189  </div>190 191  <!-- Bottom navigation -->192  <div class="bottom-bar">193    <div class="tab">194      <svg class="icon" viewBox="0 0 24 24" fill="#f0f0f0"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3z"/></svg>195      <div>Home</div>196    </div>197    <div class="tab">198      <svg class="icon" viewBox="0 0 24 24" fill="#f0f0f0"><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 5v1h16v-1c0-2.8-3.6-5-8-5z"/></svg>199      <div>My eBay</div>200    </div>201    <div class="tab">202      <div class="search-focus">203        <svg width="64" height="64" viewBox="0 0 24 24" fill="#7fb0ff"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>204      </div>205      <div>Search</div>206    </div>207    <div class="tab">208      <svg class="icon" viewBox="0 0 24 24" fill="#f0f0f0"><path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 18v2h16v-2z"/></svg>209      <div>Inbox</div>210    </div>211    <div class="tab">212      <svg class="icon" viewBox="0 0 24 24" fill="#f0f0f0"><path d="M20 2H8l-2 4H2v2h2l3.6 9.6a2 2 0 0 0 1.9 1.4H19v-2H9.9l-.7-2H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>213      <div>Selling</div>214    </div>215  </div>216 217</div>218</body>219</html>