GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>eBay Seller - UI Mock</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}7  #render-target{8    width:1080px;height:2400px;9    position:relative;overflow:hidden;10    background:#0b0b0d;color:#fff;11  }12  .status-bar{13    position:absolute;top:0;left:0;width:100%;height:60px;14    color:#ccc;font-size:30px;line-height:60px;padding:0 30px;15  }16  .status-bar .right{position:absolute;right:30px;top:0;display:flex;gap:20px;align-items:center;}17  .circle-icon{18    width:36px;height:36px;border-radius:50%;background:#2a2a2f;19    border:1px solid #1e1e22;display:flex;justify-content:center;align-items:center;20  }21  .topbar{22    position:absolute;top:60px;left:0;width:100%;height:120px;23    display:flex;align-items:center;gap:24px;padding:0 32px;24  }25  .topbar .title{font-size:52px;font-weight:700;flex:1;}26  .topbar .actions{display:flex;gap:24px;}27  .round-btn{28    width:90px;height:90px;border-radius:45px;background:#1b1b20;29    border:1px solid #222;display:flex;justify-content:center;align-items:center;30  }31  .screen{32    position:absolute;top:180px;left:0;width:100%;padding:0 40px 170px 40px; /* leave space for bottom nav */33  }34  h1{margin:40px 0 20px 0;font-size:64px;}35  .seller-row{display:flex;align-items:center;gap:30px;margin-top:20px;}36  .avatar{37    width:130px;height:130px;border-radius:65px;overflow:hidden;38    background:#E0E0E0;border:1px solid #BDBDBD;39    display:flex;justify-content:center;align-items:center;color:#757575;font-size:24px;text-align:center;40  }41  .seller-info .name{font-size:44px;font-weight:700;}42  .seller-info .sub{font-size:36px;color:#9aa0a6;margin-top:6px;}43  .link-row{display:flex;align-items:center;gap:16px;margin:26px 0 10px 180px;}44  .heart{width:40px;height:40px;border-radius:20px;background:#1d1d22;border:1px solid #222;display:flex;justify-content:center;align-items:center;}45  .link-row span{font-size:38px;color:#86a4ff;}46  .calendar{display:flex;align-items:center;gap:18px;color:#cfcfcf;margin:40px 0 30px 0;font-size:38px;}47  .calendar .icon{width:48px;height:48px;border-radius:8px;background:#1d1d22;border:1px solid #222;display:flex;justify-content:center;align-items:center;}48  .primary-btn{49    width:100%;height:140px;border-radius:70px;background:#6f8cff;50    display:flex;justify-content:center;align-items:center;font-size:44px;font-weight:700;margin:20px 0;51  }52  .outline-btn{53    width:100%;height:120px;border-radius:60px;background:transparent;border:2px solid #3b3b42;54    display:flex;justify-content:center;align-items:center;font-size:44px;color:#86a4ff;margin-top:16px;55  }56  .section-title{font-size:56px;font-weight:800;margin:70px 0 20px 0;}57  .muted{color:#b7b7b7;font-size:34px;margin-bottom:20px;}58  .rating-row{display:flex;align-items:center;margin:28px 0;}59  .rating-row .label{width:540px;font-size:40px;}60  .bar{flex:1;height:22px;background:#2c2c31;border-radius:12px;position:relative;margin-right:24px;}61  .fill{position:absolute;left:0;top:0;height:22px;background:#d9d9d9;border-radius:12px;}62  .value{width:80px;text-align:right;font-size:40px;color:#eaeaea;}63  .divider{height:2px;background:#1e1e22;margin:40px 0;}64  .feedback-title{font-size:56px;font-weight:800;margin:40px 0 10px 0;}65  .tabs{display:flex;gap:40px;align-items:flex-end;margin-bottom:20px;}66  .tab{font-size:40px;color:#cfcfcf;padding-bottom:12px;}67  .tab.active{color:#fff;border-bottom:6px solid #ffffff;width:max-content;}68  .dropdown{position:absolute;right:40px;transform:translateY(-10px);background:#1b1b20;border:1px solid #2a2a2f;color:#fff;border-radius:70px;padding:24px 34px;font-size:36px;}69  .bottom-nav{70    position:absolute;bottom:0;left:0;width:100%;height:160px;71    background:#0e0e11;border-top:1px solid #1f1f24;display:flex;justify-content:space-around;align-items:center;72  }73  .nav-item{display:flex;flex-direction:column;align-items:center;color:#cfcfcf;font-size:30px;}74  .nav-item.active{color:#6f8cff;}75  /* Simple icons */76  svg{fill:#cfcfcf}77  .round-btn svg{fill:#cfcfcf}78  .nav-item.active svg{fill:#6f8cff}79</style>80</head>81<body>82<div id="render-target">83 84  <div class="status-bar">85    1:3286    <div class="right">87      <div class="circle-icon"></div>88      <div class="circle-icon"></div>89      <div class="circle-icon"></div>90    </div>91  </div>92 93  <div class="topbar">94    <div class="round-btn" style="width:90px;height:90px;">95      <svg width="48" height="48" viewBox="0 0 24 24">96        <path d="M15.5 19L8 12l7.5-7 1.5 1.5L11 12l6 5.5z"/>97      </svg>98    </div>99    <div class="title">Item</div>100    <div class="actions">101      <div class="round-btn">102        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 6.32-2.98l4.34 4.33-1.41 1.41-4.33-4.34A8 8 0 0 1 10 18zm0-14a6 6 0 1 0 .001 12.001A6 6 0 0 0 10 4z"/></svg>103      </div>104      <div class="round-btn">105        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M7 18c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V8H7v10zm9-12l-1-2H9L8 6H4v2h16V6h-4z"/></svg>106      </div>107      <div class="round-btn">108        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M18 8v8H6V8h12m1-2H5v12h14V6zM8 11h2v2H8v-2zm3 0h2v2h-2v-2zm3 0h2v2h-2v-2z"/></svg>109      </div>110      <div class="round-btn">111        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm7-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM5 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>112      </div>113    </div>114  </div>115 116  <div class="screen">117    <h1>About this seller</h1>118 119    <div class="seller-row">120      <div class="avatar">[IMG: Seller Avatar]</div>121      <div class="seller-info">122        <div class="name">The Cellular Professor eBay Store (14331)</div>123        <div class="sub">99.6% positive feedback</div>124      </div>125    </div>126 127    <div class="link-row">128      <div class="heart">129        <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 21s-6.6-4.35-9.08-7.1A5.5 5.5 0 0 1 8.5 5.5c1.54 0 3.04.73 3.5 2 .46-1.27 1.96-2 3.5-2a5.5 5.5 0 0 1 5.58 8.4C18.6 16.65 12 21 12 21z"/></svg>130      </div>131      <span>Save seller</span>132    </div>133 134    <div class="calendar">135      <div class="icon">136        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M7 2h2v2h6V2h2v2h3v16H4V4h3V2zm13 6H4v12h16V8z"/></svg>137      </div>138      <div>Joined Dec 2013</div>139    </div>140 141    <div class="primary-btn">Seller's other items</div>142    <div class="outline-btn">Contact seller</div>143 144    <div class="section-title">Detailed seller ratings</div>145    <div class="muted">Average for the last 12 months</div>146 147    <div class="rating-row">148      <div class="label">Accurate description</div>149      <div class="bar"><div class="fill" style="width:86%;"></div></div>150      <div class="value">4.9</div>151    </div>152    <div class="rating-row">153      <div class="label">Reasonable shipping cost</div>154      <div class="bar"><div class="fill" style="width:92%;"></div></div>155      <div class="value">5.0</div>156    </div>157    <div class="rating-row">158      <div class="label">Shipping speed</div>159      <div class="bar"><div class="fill" style="width:92%;"></div></div>160      <div class="value">5.0</div>161    </div>162    <div class="rating-row">163      <div class="label">Communication</div>164      <div class="bar"><div class="fill" style="width:92%;"></div></div>165      <div class="value">5.0</div>166    </div>167 168    <div class="feedback-title">Seller feedback (7,841)</div>169 170    <div class="tabs">171      <div class="tab active">This item (106)</div>172      <div class="tab">All items (7,841)</div>173    </div>174 175    <div class="dropdown">All ratings ▼</div>176 177  </div>178 179  <div class="bottom-nav">180    <div class="nav-item">181      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>182      <div>Home</div>183    </div>184    <div class="nav-item">185      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 12c2.76 0 5-2.24 5-5S14.76 2 12 2 7 4.24 7 7s2.24 5 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"/></svg>186      <div>My eBay</div>187    </div>188    <div class="nav-item active">189      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 6.32-2.98l4.34 4.33-1.41 1.41-4.33-4.34A8 8 0 0 1 10 18z"/></svg>190      <div>Search</div>191    </div>192    <div class="nav-item">193      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M20 4H4v16h16V4zM6 8h12v2H6V8zm0 4h12v2H6v-2zm0 4h8v2H6v-2z"/></svg>194      <div>Inbox</div>195    </div>196    <div class="nav-item">197      <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 7V3H4v18h16V7h-8zm0 2h6v10H6V5h6v4zm-2 3h4v2h-4v-2z"/></svg>198      <div>Selling</div>199    </div>200  </div>201 202</div>203</body>204</html>