GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>eBay Item - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#fff;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#000;11 }12 .status-bar{13 height:70px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;color:#EAEAEA;14 font-size:34px;letter-spacing:0.5px;15 }16 .status-right{display:flex;gap:18px;align-items:center;}17 .sig{width:26px;height:26px;border:2px solid #9E9E9E;border-radius:4px;}18 .wifi{width:34px;height:24px;border:2px solid #9E9E9E;border-radius:6px;border-top-color:transparent;}19 .battery{width:46px;height:24px;border:2px solid #9E9E9E;border-radius:4px;position:relative;}20 .battery::after{content:"";position:absolute;right:-6px;top:6px;width:6px;height:12px;background:#9E9E9E;border-radius:2px;}21 .topbar{22 display:flex;align-items:center;justify-content:space-between;23 padding:8px 24px 8px 14px;height:92px;24 }25 .top-left{display:flex;align-items:center;gap:12px;}26 .title{font-size:58px;font-weight:700;}27 .circle-icon{width:82px;height:82px;border-radius:50%;background:#1b1b1b;display:flex;align-items:center;justify-content:center;}28 .circle-icon svg{fill:#EAEAEA}29 .back-btn{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;}30 .back-btn svg{stroke:#EAEAEA;stroke-width:8;fill:none}31 .report-btn{32 margin:18px 28px 10px;border:2px solid #3C6BFF;border-radius:40px;color:#8FB0FF;background:transparent;33 font-size:44px; padding:26px 36px;text-align:center;34 }35 .section{36 padding:18px 28px;color:#fff;37 }38 .section h2{margin:6px 0 8px;font-size:54px;}39 .subtle{color:#C0C0C0;margin-top:4px;font-size:34px;}40 .chip-right{41 position:absolute;right:28px;top:0;transform:translateY(-6px);42 }43 .see-all{44 display:inline-flex;align-items:center;gap:16px;background:#1b1b1b;border:2px solid #4C6EF5;color:#CFE0FF;45 padding:18px 26px;border-radius:44px;font-size:40px;46 }47 .items-row{48 display:flex;gap:28px;padding:8px 28px 0;49 }50 .card{51 width:320px;background:#121212;border-radius:26px;padding:0 0 18px;border:1px solid #1f1f1f;overflow:hidden;52 }53 .img{54 height:300px;background:#E0E0E0;border-bottom:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#666;position:relative;55 }56 .heart{57 position:absolute;right:14px;top:14px;width:76px;height:76px;border-radius:50%;background:#121212;display:flex;align-items:center;justify-content:center;border:2px solid #2b2b2b;58 }59 .heart svg{fill:#fff}60 .card .text{padding:16px 18px;}61 .title-sm{font-size:34px;line-height:1.25;color:#fff;min-height:120px;}62 .price{font-size:48px;font-weight:700;margin-top:8px;}63 .small{font-size:30px;color:#B0B0B0;margin-top:6px;}64 .badge{font-size:30px;color:#9EC1FF;margin-top:8px;}65 .divider{height:1px;background:#1f1f1f;margin:10px 0;}66 .connectivity{padding:24px 28px 10px;color:#fff;}67 .connectivity h3{font-size:48px;margin:0 0 18px;}68 .pills{display:flex;gap:22px;}69 .pill{padding:18px 36px;border-radius:44px;border:2px solid #3F5BFF;color:#C0D1FF;font-size:40px;}70 .pill.active{background:#5672FF;color:#fff;border-color:#5672FF;}71 .grid{display:flex;gap:24px;padding:12px 28px;}72 .bottom-nav{73 position:absolute;bottom:0;left:0;width:100%;height:140px;background:#0f0f0f;border-top:1px solid #1f1f1f;74 display:flex;justify-content:space-around;align-items:center;75 }76 .nav-item{display:flex;flex-direction:column;align-items:center;color:#C9C9C9;font-size:34px;gap:10px;position:relative;}77 .nav-item.active{color:#fff;}78 .badge-dot{79 position:absolute;top:-6px;right:-8px;background:#FF4D6D;color:#fff;border-radius:18px;font-size:26px;padding:4px 10px;80 }81 .spacer-bottom{height:170px;}82</style>83</head>84<body>85<div id="render-target">86 87 <!-- Status Bar -->88 <div class="status-bar">89 <div>10:38</div>90 <div class="status-right">91 <div class="sig"></div>92 <div class="wifi"></div>93 <div class="battery"></div>94 </div>95 </div>96 97 <!-- Top App Bar -->98 <div class="topbar">99 <div class="top-left">100 <div class="back-btn" aria-label="Back">101 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18"/></svg>102 </div>103 <div class="title">Item</div>104 </div>105 <div style="display:flex;gap:18px;">106 <div class="circle-icon" aria-label="Search">107 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 5.3 14l5 5 1.7-1.7-5-5A8 8 0 0 0 10 2z"/></svg>108 </div>109 <div class="circle-icon" aria-label="Cart">110 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M7 6h14l-2 8H8L6 2H2v2h3l2 10h11l-1 4H8v2h9l3-10 2-8H7z"/></svg>111 </div>112 <div class="circle-icon" aria-label="Share">113 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4H15a3 3 0 0 0 0 6 3 3 0 0 0 1.6-.5L9 13a3 3 0 1 0 0 2l7.6-4.5A3 3 0 0 0 18 8z"/></svg>114 </div>115 <div class="circle-icon" aria-label="More">116 <svg width="38" height="38" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>117 </div>118 </div>119 </div>120 121 <!-- Report Button -->122 <div class="report-btn">Report this item</div>123 124 <!-- "Visually similar items" Section -->125 <div class="section" style="position:relative;">126 <h2>Visually similar items</h2>127 <div class="subtle">Sponsored</div>128 <div class="chip-right">129 <div class="see-all">See all →130 </div>131 </div>132 </div>133 134 <!-- Item Cards Row -->135 <div class="items-row">136 <!-- Card 1 -->137 <div class="card">138 <div class="img">[IMG: Black Slim Wireless Mouse]139 <div class="heart">140 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-7.7A5.5 5.5 0 0 1 12 5.1a5.5 5.5 0 0 1 9.5 8.2C19 16.4 12 21 12 21z"/></svg>141 </div>142 </div>143 <div class="text">144 <div class="title-sm">Wireless Mouse 2.4G Optical Cordless Mice Optical Scroll for PC Laptop Computer</div>145 <div class="price">$6.63</div>146 <div class="small">+ US $24.61 shipping</div>147 <div class="badge">213 sold</div>148 </div>149 </div>150 151 <!-- Card 2 -->152 <div class="card">153 <div class="img">[IMG: White Portable Mouse]154 <div class="heart">155 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-7.7A5.5 5.5 0 0 1 12 5.1a5.5 5.5 0 0 1 9.5 8.2C19 16.4 12 21 12 21z"/></svg>156 </div>157 </div>158 <div class="text">159 <div class="title-sm">Portable Dual Mode Rechargeable Wireless Mouse for PC, Computer, Laptop...</div>160 <div class="price">$17.85</div>161 <div class="small">US $18.79 5% off + US $24.94 shipping</div>162 <div class="badge">Last one</div>163 </div>164 </div>165 166 <!-- Card 3 -->167 <div class="card">168 <div class="img">[IMG: Black A4Tech Mouse]169 <div class="heart">170 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 21s-7-4.6-9.5-7.7A5.5 5.5 0 0 1 12 5.1a5.5 5.5 0 0 1 9.5 8.2C19 16.4 12 21 12 21z"/></svg>171 </div>172 </div>173 <div class="text">174 <div class="title-sm">A4Tech Advance Rechargeable Surface Wireless 2.4G Optical Mouse</div>175 <div class="price">$15.29</div>176 <div class="small">US $17.99 15% off + US $24.87 shipping</div>177 <div class="badge">Top Rated</div>178 </div>179 </div>180 </div>181 182 <!-- Connectivity Pills -->183 <div class="connectivity">184 <h3>Explore more options: Connectivity</h3>185 <div class="pills">186 <div class="pill active">Wireless</div>187 <div class="pill">USB</div>188 <div class="pill">Bluetooth</div>189 </div>190 </div>191 192 <!-- More items grid -->193 <div class="grid">194 <div class="card" style="width:328px;">195 <div class="img">[IMG: Black Slim Mouse]</div>196 <div class="text">197 <div class="title-sm">Wireless Mouse 2.4G Optical Cordless</div>198 <div class="price">$6.63</div>199 </div>200 </div>201 <div class="card" style="width:328px;">202 <div class="img">[IMG: Colorful Mouse Set]</div>203 <div class="text">204 <div class="title-sm">Ergonomic Colorful Wireless Mouse Pack</div>205 <div class="price">$12.40</div>206 </div>207 </div>208 <div class="card" style="width:328px;">209 <div class="img">[IMG: Laptop with Rechargeable Mouse]</div>210 <div class="text">211 <div class="title-sm">Magic rechargeable BT 5.2 mouse for laptop</div>212 <div class="price">$18.99</div>213 </div>214 </div>215 </div>216 217 <div class="spacer-bottom"></div>218 219 <!-- Bottom Navigation -->220 <div class="bottom-nav">221 <div class="nav-item">222 <svg width="44" height="44" viewBox="0 0 24 24" fill="#C9C9C9"><path d="M12 3l9 7h-3v9h-5v-6H11v6H6v-9H3z"/></svg>223 <div>Home</div>224 </div>225 <div class="nav-item">226 <svg width="44" height="44" viewBox="0 0 24 24" fill="#C9C9C9"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-8 3-8 6h16c0-3-3-6-8-6z"/></svg>227 <div>My eBay</div>228 </div>229 <div class="nav-item active">230 <svg width="44" height="44" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M10 2a8 8 0 1 0 5.3 14l5 5 1.7-1.7-5-5A8 8 0 0 0 10 2z"/></svg>231 <div>Search</div>232 </div>233 <div class="nav-item">234 <div class="badge-dot">1</div>235 <svg width="44" height="44" viewBox="0 0 24 24" fill="#C9C9C9"><path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4zm6-6V9a6 6 0 1 0-12 0v7l-2 2v1h16v-1l-2-2z"/></svg>236 <div>Inbox</div>237 </div>238 <div class="nav-item">239 <svg width="44" height="44" viewBox="0 0 24 24" fill="#C9C9C9"><path d="M7 4h10l1 5-7 11L6 9l1-5zm3 3h4l-.5 2h-3L10 7z"/></svg>240 <div>Selling</div>241 </div>242 </div>243 244</div>245</body>246</html>