GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Item Page Mock</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;position:relative;overflow:hidden;9 background:#000; color:#fff;10 }11 .status-bar{12 height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;13 color:#eaeaea; font-weight:600; font-size:36px;14 }15 .header{16 padding:10px 28px 0 28px; display:flex; align-items:center; justify-content:space-between;17 }18 .title-area{display:flex; align-items:center; gap:20px;}19 .title{font-size:56px; font-weight:700;}20 .circle-icon{21 width:92px;height:92px;border-radius:50%;background:#1b1b1b;display:flex;align-items:center;justify-content:center;22 margin-left:16px;23 }24 .info-block{padding:18px 28px;color:#ddd;font-size:42px;line-height:1.35;}25 .pill-btn{26 margin:12px 28px 24px 28px; height:120px; border-radius:60px; border:3px solid #4b77ff;27 display:flex; align-items:center; justify-content:center; color:#7ea0ff; font-size:48px; font-weight:700;28 }29 .section{padding:24px 28px 8px 28px;}30 .section h2{margin:0;color:#fff;font-size:64px;font-weight:800;}31 .subtle{color:#9aa0a6;font-size:42px;margin-top:6px;}32 .see-all{33 padding:0 28px;34 position:absolute; right:28px; transform:translateY(-94px);35 }36 .see-all .ghost{37 height:112px; border-radius:56px; border:2px solid #3f68ff; padding:0 40px; display:flex; align-items:center;38 color:#a9bfff; font-size:46px; font-weight:700;39 }40 .card-grid{display:flex; gap:28px; padding:0 28px; margin-top:8px;}41 .product-card{42 width:328px; background:#0f0f10; border-radius:26px; overflow:hidden; border:1px solid #1e1e1e;43 }44 .img{45 width:100%; height:330px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;46 display:flex; align-items:center; justify-content:center; color:#555; font-weight:700; font-size:34px; position:relative;47 }48 .heart{49 position:absolute; top:16px; left:16px; width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,.55);50 display:flex; align-items:center; justify-content:center; border:2px solid #fff;51 }52 .card-body{padding:18px;}53 .p-title{font-size:42px; color:#f2f2f2; line-height:1.22; height:168px; overflow:hidden;}54 .price{font-size:54px; font-weight:800; margin-top:6px;}55 .shipping{color:#a6a6a6; font-size:36px; margin-top:8px;}56 .sold{color:#a6a6a6; font-size:36px; margin-top:4px;}57 .section-2{padding:40px 28px 0 28px;}58 .row{display:flex; gap:28px; padding:0 28px;}59 /* Bottom nav */60 .bottom-nav{61 position:absolute; left:0; right:0; bottom:84px; height:160px; background:#0b0b0b; border-top:1px solid #1d1d1d;62 display:flex; align-items:center; justify-content:space-around;63 }64 .nav-item{display:flex; flex-direction:column; align-items:center; color:#e6e6e6; font-size:34px; gap:10px;}65 .nav-icon{66 width:86px; height:86px; border-radius:24px; background:#111; display:flex; align-items:center; justify-content:center;67 }68 .nav-item.active .nav-icon{background:#1a2e6e; outline:3px solid #2d54ff;}69 .badge{70 position:absolute; right:-10px; top:-6px; width:40px; height:40px; background:#ff4b5c; color:#fff; border-radius:50%;71 display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800;72 }73 .gesture{74 position:absolute; left:50%; transform:translateX(-50%);75 bottom:20px; width:340px; height:12px; background:#bbb; border-radius:6px; opacity:.6;76 }77</style>78</head>79<body>80<div id="render-target">81 82 <!-- Status bar -->83 <div class="status-bar">84 <div>10:39</div>85 <div style="display:flex;align-items:center;gap:16px;font-size:28px;">86 <span>🛈</span><span>◉</span><span>•</span>87 </div>88 </div>89 90 <!-- Header -->91 <div class="header">92 <div class="title-area">93 <div class="circle-icon">94 <svg width="40" height="40" viewBox="0 0 40 40">95 <polyline points="26,6 12,20 26,34" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>96 </svg>97 </div>98 <div class="title">Item</div>99 </div>100 <div style="display:flex;align-items:center;">101 <div class="circle-icon">102 <svg width="40" height="40" viewBox="0 0 40 40">103 <circle cx="18" cy="18" r="10" stroke="#fff" stroke-width="3" fill="none"/>104 <line x1="27" y1="27" x2="36" y2="36" stroke="#fff" stroke-width="3" stroke-linecap="round"/>105 </svg>106 </div>107 <div class="circle-icon">108 <svg width="42" height="42" viewBox="0 0 42 42">109 <path d="M6 12h30l-3 18H9L6 12z" fill="none" stroke="#fff" stroke-width="3" />110 <circle cx="15" cy="34" r="3" fill="#fff"/>111 <circle cx="29" cy="34" r="3" fill="#fff"/>112 </svg>113 </div>114 <div class="circle-icon">115 <svg width="44" height="44" viewBox="0 0 44 44">116 <circle cx="12" cy="22" r="3" fill="#fff"/>117 <circle cx="32" cy="10" r="3" fill="#fff"/>118 <circle cx="32" cy="34" r="3" fill="#fff"/>119 <line x1="15" y1="22" x2="29" y2="12" stroke="#fff" stroke-width="3"/>120 <line x1="15" y1="22" x2="29" y2="32" stroke="#fff" stroke-width="3"/>121 </svg>122 </div>123 <div class="circle-icon">124 <svg width="8" height="42" viewBox="0 0 8 42">125 <circle cx="4" cy="8" r="4" fill="#fff"/>126 <circle cx="4" cy="21" r="4" fill="#fff"/>127 <circle cx="4" cy="34" r="4" fill="#fff"/>128 </svg>129 </div>130 </div>131 </div>132 133 <!-- Seller info -->134 <div class="info-block">135 <div>Best Regard</div>136 <div style="margin-top:6px;">Jabbar Ali</div>137 </div>138 139 <!-- Feedback button -->140 <div class="pill-btn">See all feedback</div>141 142 <!-- Section: Ships fastest to you -->143 <div class="section">144 <h2>Ships fastest to you</h2>145 <div class="subtle">Sponsored</div>146 </div>147 <div class="see-all">148 <div class="ghost">See all →</div>149 </div>150 151 <div class="card-grid">152 <!-- Card 1 -->153 <div class="product-card">154 <div class="img">[IMG: RGB Mouse - Matte White]</div>155 <div class="card-body">156 <div class="p-title">2.4GHz Silent Wireless Optical Mouse USB Rechargeable RGB Cordless Mice Laptop</div>157 <div class="price">$7.69</div>158 <div class="shipping">Free shipping</div>159 </div>160 </div>161 162 <!-- Card 2 -->163 <div class="product-card">164 <div class="img">165 [IMG: RGB Mouse Set]166 <div class="heart">167 <svg width="36" height="32" viewBox="0 0 36 32">168 <path d="M18 29s-13-8-13-17a7 7 0 0 1 13-3 7 7 0 0 1 13 3c0 9-13 17-13 17z" fill="none" stroke="#fff" stroke-width="2"/>169 </svg>170 </div>171 </div>172 <div class="card-body">173 <div class="p-title">2.4GHz Wireless Optical Mouse USB Rechargeable RGB Cordless Mice For PC...</div>174 <div class="price">$7.97</div>175 <div class="shipping">+ US $24.65 shipping</div>176 <div class="sold">341 sold</div>177 </div>178 </div>179 180 <!-- Card 3 -->181 <div class="product-card">182 <div class="img">[IMG: Slim RGB Mouse]</div>183 <div class="card-body">184 <div class="p-title">2.4GHz Wireless Optical Mouse with Rechargeable Battery</div>185 <div class="price">$9.99</div>186 <div class="shipping">+ US $17.42 shipping</div>187 </div>188 </div>189 </div>190 191 <!-- Section 2 -->192 <div class="section-2">193 <div style="display:flex;align-items:center;justify-content:space-between;">194 <div style="font-size:62px;font-weight:800;">Inspired by your recent views</div>195 <div class="ghost" style="height:104px; border-radius:52px; border-color:#3f68ff; color:#a9bfff; display:flex; align-items:center;">See all →</div>196 </div>197 <div class="subtle" style="margin-top:8px;">Sponsored</div>198 </div>199 200 <div class="row" style="margin-top:18px;">201 <div class="product-card" style="width:328px;">202 <div class="img">[IMG: Hiking Shoe]</div>203 </div>204 <div class="product-card" style="width:328px;">205 <div class="img">[IMG: Black Wireless Mouse]</div>206 </div>207 <div class="product-card" style="width:328px;">208 <div class="img">[IMG: Product Placeholder]</div>209 </div>210 </div>211 212 <!-- Bottom Navigation -->213 <div class="bottom-nav">214 <div class="nav-item">215 <div class="nav-icon">216 <svg width="42" height="42" viewBox="0 0 42 42">217 <path d="M6 20 L21 8 L36 20 V36 H24 V26 H18 V36 H6 Z" fill="none" stroke="#fff" stroke-width="2.5"/>218 </svg>219 </div>220 <div>Home</div>221 </div>222 223 <div class="nav-item">224 <div class="nav-icon">225 <svg width="40" height="40" viewBox="0 0 40 40">226 <circle cx="20" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2.5"/>227 <rect x="8" y="22" width="24" height="12" fill="none" stroke="#fff" stroke-width="2.5" rx="4"/>228 </svg>229 </div>230 <div>My eBay</div>231 </div>232 233 <div class="nav-item active">234 <div class="nav-icon">235 <svg width="40" height="40" viewBox="0 0 40 40">236 <circle cx="18" cy="18" r="10" stroke="#fff" stroke-width="3" fill="none"/>237 <line x1="27" y1="27" x2="36" y2="36" stroke="#fff" stroke-width="3" stroke-linecap="round"/>238 </svg>239 </div>240 <div>Search</div>241 </div>242 243 <div class="nav-item" style="position:relative;">244 <div class="nav-icon" style="position:relative;">245 <svg width="40" height="40" viewBox="0 0 40 40">246 <path d="M6 8h28v24H6z" fill="none" stroke="#fff" stroke-width="2.5"/>247 <path d="M6 14h28" stroke="#fff" stroke-width="2.5"/>248 </svg>249 <div class="badge">1</div>250 </div>251 <div>Inbox</div>252 </div>253 254 <div class="nav-item">255 <div class="nav-icon">256 <svg width="40" height="40" viewBox="0 0 40 40">257 <path d="M20 4 L26 12 H32 V34 H8 V12 H14 Z" fill="none" stroke="#fff" stroke-width="2.5"/>258 <circle cx="28" cy="10" r="4" fill="#fff"/>259 </svg>260 </div>261 <div>Selling</div>262 </div>263 </div>264 265 <div class="gesture"></div>266</div>267</body>268</html>