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>Mobile Item Screen - Mock</title>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  /* Top app bar */14  .topbar{display:flex;align-items:center;justify-content:space-between;padding:36px 32px 12px;}15  .left-group{display:flex;align-items:center;gap:22px}16  .title{font-size:46px;font-weight:700;letter-spacing:0.2px}17  .icon-btn{18    width:96px;height:96px;border-radius:48px;background:#121212;19    display:flex;align-items:center;justify-content:center;border:1px solid #1e1e1e;20  }21  .icon-btn svg{fill:#E6E6E6;width:40px;height:40px}22 23  /* Content area */24  .content{padding:20px 32px 220px}25  .seller-row{display:flex;align-items:center;gap:26px;margin-top:18px}26  .img-placeholder{27    width:120px;height:120px;background:#E0E0E0;border:1px solid #BDBDBD;28    color:#555;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:16px;29  }30  .seller-info .name{font-size:38px;font-weight:700}31  .seller-info .sub{font-size:30px;color:#bdbdbd;margin-top:6px}32  .chev-right{margin-left:auto;color:#bdbdbd;font-size:44px}33 34  .price-row{margin-top:36px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}35  .price{font-size:72px;font-weight:800}36  .shipping{font-size:34px;color:#bdbdbd;margin-bottom:8px}37 38  .est{margin-top:22px;font-size:34px;color:#bdbdbd}39  .est b{color:#fff}40 41  .condition{margin-top:34px;display:flex;align-items:center;gap:16px}42  .condition .label{font-size:34px;color:#bdbdbd}43  .condition .value{font-size:36px;font-weight:700}44  .info-dot{45    width:36px;height:36px;border-radius:18px;border:2px solid #6f6f6f;color:#6f6f6f;46    display:flex;align-items:center;justify-content:center;font-size:24px47  }48 49  .dropdown{margin-top:22px;background:#0f0f0f;border:2px solid #2a2a2a;border-radius:20px;padding:32px 28px;display:flex;justify-content:space-between;align-items:center}50  .dropdown .text{font-size:38px}51  .dropdown .down svg{fill:#bdbdbd;width:34px;height:34px}52 53  .primary-btn{54    margin-top:36px;background:#6da1ff;border-radius:42px;height:120px;55    display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#09142a;border:none;56  }57 58  .outline-btn,.outline-btn-2{59    margin-top:24px;height:118px;border-radius:40px;60    display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:700;61  }62  .outline-btn{border:2px solid #2e3b72;color:#cfd8ff;background:transparent}63  .outline-btn-2{border:2px solid #2e3b72;color:#a9c4ff;gap:18px}64  .heart{width:40px;height:40px}65  .heart svg{fill:#7aa4ff}66 67  .info-card{68    margin-top:28px;background:#111;border:1px solid #1f1f1f;border-radius:26px;padding:26px 26px;display:flex;align-items:center;gap:22px69  }70  .info-ic{71    width:74px;height:74px;border-radius:37px;background:#0a0a0a;border:1px solid #222;display:flex;align-items:center;justify-content:center72  }73  .info-ic svg{fill:#cfcfcf;width:36px;height:36px}74  .info-text .title{font-size:36px;font-weight:800}75  .info-text .desc{font-size:32px;color:#cfcfcf}76 77  .section-title{margin-top:36px;font-size:48px;font-weight:900}78 79  /* Bottom navigation */80  .bottom-nav{81    position:absolute;left:0;right:0;bottom:0;height:176px;background:#0c0c0c;border-top:1px solid #1c1c1c;82    display:flex;align-items:center;justify-content:space-around;padding:0 24px;83  }84  .nav-item{display:flex;flex-direction:column;align-items:center;gap:10px;color:#cfcfcf;font-size:28px}85  .nav-item .bubble{86    width:90px;height:90px;border-radius:45px;background:#131313;border:1px solid #222;display:flex;align-items:center;justify-content:center;87  }88  .nav-item.active .bubble{background:#183765;border-color:#3157c9}89  .nav-item.active span{color:#7aa4ff}90  .nav-item svg{fill:#d8d8d8;width:40px;height:40px}91  .nav-item.active svg{fill:#9fc1ff}92 93  /* small helper */94  .muted{color:#bdbdbd}95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Top App Bar -->101  <div class="topbar">102    <div class="left-group">103      <div class="icon-btn" aria-label="Back">104        <svg viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.9 1.9L3.2 12 13.6 1.6z"/></svg>105      </div>106      <div class="title">Item</div>107    </div>108    <div class="left-group">109      <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1-.5 9z"/></svg></div>110      <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 17 18zM6.3 6l1.2 6.3c.1.9.9 1.7 1.9 1.7h7.5c.9 0 1.7-.6 1.9-1.5l1.5-6.5H6.3zM5 2h3l1 3h10v2H8.6L7.8 4H5z"/></svg></div>111      <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 1-10 4.5L2 18l1.5 1.5 6-6A6 6 0 1 0 18 8z"/></svg></div>112      <div class="icon-btn"><svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 5zm0 9a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 14zm0 9a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 23z"/></svg></div>113    </div>114  </div>115 116  <div class="content">117    <!-- Seller row -->118    <div class="seller-row">119      <div class="img-placeholder">[IMG: Seller Logo]</div>120      <div class="seller-info">121        <div class="name">uronestop (1208)</div>122        <div class="sub">95.8% positive feedback</div>123      </div>124      <div class="chev-right">›</div>125    </div>126 127    <!-- Price -->128    <div class="price-row">129      <div class="price">$19.99</div>130      <div class="shipping">+ $472.93 shipping</div>131    </div>132 133    <div class="est">Est. delivery <b>Thu, Dec 14 - Fri, Dec 29</b></div>134 135    <!-- Condition -->136    <div class="condition">137      <div class="label">Condition</div>138      <div class="value">New</div>139      <div class="info-dot">i</div>140    </div>141 142    <!-- Dropdowns -->143    <div class="dropdown">144      <div class="text">Colour: <b>Black</b></div>145      <div class="down">146        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>147      </div>148    </div>149    <div class="dropdown">150      <div class="text">Quantity: <b>1</b></div>151      <div class="down">152        <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>153      </div>154    </div>155 156    <!-- Buttons -->157    <button class="primary-btn">Buy It Now</button>158    <div class="outline-btn">Add to cart</div>159    <div class="outline-btn-2">160      <div class="heart">161        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9.5-8A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 7c-2.5 3.5-9.5 8-9.5 8z"/></svg>162      </div>163      Added to watchlist164    </div>165 166    <!-- Info cards -->167    <div class="info-card">168      <div class="icon-btn info-ic">169        <svg viewBox="0 0 24 24"><path d="M10 20v-8H6l8-12v8h4l-8 12z"/></svg>170      </div>171      <div class="info-text">172        <div class="title">Breathe easy.</div>173        <div class="desc">Returns accepted.</div>174      </div>175    </div>176 177    <div class="info-card">178      <div class="icon-btn info-ic">179        <svg viewBox="0 0 24 24"><path d="M13 2L3 14h7v8l11-14h-8z"/></svg>180      </div>181      <div class="info-text">182        <div class="title">People are checking this out.</div>183        <div class="desc">8 have added this to their watchlist.</div>184      </div>185    </div>186 187    <div class="section-title">About this item</div>188  </div>189 190  <!-- Bottom navigation -->191  <div class="bottom-nav">192    <div class="nav-item">193      <div class="bubble"><svg viewBox="0 0 24 24"><path d="M12 3l10 9h-3v9h-6v-6H11v6H5v-9H2z"/></svg></div>194      <span>Home</span>195    </div>196    <div class="nav-item">197      <div class="bubble"><svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm-7 9v-1a7 7 0 0 1 14 0v1z"/></svg></div>198      <span>My eBay</span>199    </div>200    <div class="nav-item active">201      <div class="bubble"><svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zM10 14a4 4 0 1 1 .001-7.999A4 4 0 0 1 10 14z"/></svg></div>202      <span>Search</span>203    </div>204    <div class="nav-item">205      <div class="bubble"><svg viewBox="0 0 24 24"><path d="M20 4H4v12h16V4zM2 18h20v2H2zM6 6h12v2H6zm0 4h12v2H6z"/></svg></div>206      <span>Inbox</span>207    </div>208    <div class="nav-item">209      <div class="bubble"><svg viewBox="0 0 24 24"><path d="M3 3h18v4H3zM3 9h18v12H3zM7 12h4v6H7z"/></svg></div>210      <span>Selling</span>211    </div>212  </div>213 214</div>215</body>216</html>