GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Wireless Mouse Listing UI</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:#ffffff;color:#111;10 }11 12 /* Status bar */13 .status-bar{14 height:80px;display:flex;align-items:center;justify-content:space-between;15 padding:0 30px;font-size:32px;color:#333;border-bottom:1px solid #ececec;16 }17 .status-icons{display:flex;gap:18px;align-items:center;}18 .dot{width:20px;height:20px;background:#777;border-radius:50%;}19 .battery{width:34px;height:18px;border:2px solid #777;border-radius:3px;position:relative;}20 .battery::after{content:'';position:absolute;right:-8px;top:3px;width:6px;height:10px;background:#777;border-radius:1px;}21 .battery .lvl{position:absolute;left:3px;top:3px;height:10px;width:20px;background:#4CAF50;}22 23 /* Search Row */24 .search-row{25 display:flex;align-items:center;gap:18px;padding:20px 24px;border-bottom:1px solid #e9e9e9;26 }27 .icon-btn{width:60px;height:60px;border-radius:30px;display:flex;align-items:center;justify-content:center;background:#f2f2f2;}28 .search-box{29 flex:1;background:#fafafa;border:1px solid #d8d8d8;border-radius:18px;30 height:92px;display:flex;align-items:center;padding:0 24px;gap:18px;31 }32 .search-input{33 flex:1;font-size:34px;color:#222;opacity:0.9;34 }35 .search-actions{display:flex;gap:20px;}36 .cart-btn{width:70px;height:70px;border-radius:18px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;}37 38 /* Sort / Filter */39 .sf-row{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid #eee;}40 .sf-item{display:flex;align-items:center;gap:16px;font-size:36px;color:#222;}41 .sf-item svg{width:40px;height:40px;fill:#444;}42 43 /* Grid */44 .grid{display:flex;flex-wrap:wrap;padding:0 12px;}45 .card{46 width:516px;margin:12px;border-bottom:1px solid #eee;padding-bottom:24px;position:relative;47 }48 .product-image{49 width:100%;height:360px;background:#E0E0E0;border:1px solid #BDBDBD;50 display:flex;align-items:center;justify-content:center;color:#757575;font-size:28px;border-radius:8px;51 }52 .heart{53 position:absolute;right:24px;top:18px;width:56px;height:56px;border-radius:28px;background:#ffffff;54 box-shadow:0 2px 6px rgba(0,0,0,0.12);display:flex;align-items:center;justify-content:center;55 }56 .title{font-size:34px;line-height:1.2;margin-top:18px;color:#111;}57 .price-row{display:flex;align-items:center;gap:18px;margin:10px 0 6px;}58 .discount{color:#16a34a;font-size:34px;font-weight:700;}59 .mrp{color:#888;text-decoration:line-through;font-size:30px;}60 .sp{font-size:36px;font-weight:700;color:#111;}61 .subtext{color:#777;font-size:28px;margin-top:6px;}62 .green-tag{color:#16a34a;font-size:30px;margin-top:8px;}63 .rating-row{display:flex;align-items:center;gap:8px;margin-top:8px;}64 .rating-row .stars{display:flex;gap:2px;}65 .chip{66 margin-left:10px;background:#1952ff;color:#fff;border-radius:20px;padding:6px 12px;font-size:24px;display:flex;align-items:center;gap:6px;67 }68 .chip .plus{width:18px;height:18px;background:#ffd700;border-radius:50%;display:inline-block;}69 .small-note{font-size:30px;color:#111;margin-top:12px;}70 /* SVG icons quick styles */71 svg{display:block}72</style>73</head>74<body>75<div id="render-target">76 77 <!-- Status bar -->78 <div class="status-bar">79 <div>10:55</div>80 <div class="status-icons">81 <div class="dot"></div>82 <div class="dot"></div>83 <div class="dot"></div>84 <div class="dot"></div>85 <div class="battery"><div class="lvl"></div></div>86 </div>87 </div>88 89 <!-- Search row -->90 <div class="search-row">91 <div class="icon-btn">92 <!-- back arrow -->93 <svg width="30" height="30" viewBox="0 0 24 24">94 <path fill="#333" d="M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4z"/>95 </svg>96 </div>97 <div class="search-box">98 <svg width="34" height="34" viewBox="0 0 24 24">99 <path fill="#777" d="M10 18a8 8 0 1 1 5.3-14l6.2 6.2-1.4 1.4-6.2-6.2A6 6 0 1 0 10 16a6 6 0 0 0 4.9-2.5l1.6 1.2A8 8 0 0 1 10 18z"/>100 </svg>101 <div class="search-input">wireless mouse</div>102 <div class="search-actions">103 <!-- mic -->104 <svg width="40" height="40" viewBox="0 0 24 24">105 <path fill="#555" d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6v3h2v-3a7 7 0 0 0 6-6h-2z"/>106 </svg>107 <!-- camera -->108 <svg width="40" height="40" viewBox="0 0 24 24">109 <path fill="#555" d="M9 4l2-2h2l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4zm3 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 12 8zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>110 </svg>111 </div>112 </div>113 <div class="cart-btn">114 <!-- cart -->115 <svg width="40" height="40" viewBox="0 0 24 24">116 <path fill="#333" d="M7 4h-2v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 11 18h9v-2h-9l1-2h6.55a2 2 0 0 0 1.79-1.11L22 7H6.21l-.94-2H7zm3 14a2 2 0 1 0 .001 3.999A2 2 0 0 0 10 18zm8 0a2 2 0 1 0 .001 3.999A2 2 0 0 0 18 18z"/>117 </svg>118 </div>119 </div>120 121 <!-- Sort / Filter row -->122 <div class="sf-row">123 <div class="sf-item">124 <svg viewBox="0 0 24 24">125 <path d="M7 6h10v2H7V6zm-3 5h16v2H4v-2zm5 5h6v2H9v-2z"/>126 </svg>127 <div>Sort</div>128 </div>129 <div class="sf-item">130 <svg viewBox="0 0 24 24">131 <path d="M5 6h6v2H5V6zm0 10h14v2H5v-2zm0-5h10v2H5v-2z"/>132 </svg>133 <div>Filter</div>134 </div>135 </div>136 137 <!-- Product Grid -->138 <div class="grid">139 140 <!-- Card 1 -->141 <div class="card">142 <div class="product-image">[IMG: Portronics Toad 23 Black Mouse]</div>143 <div class="heart">144 <svg width="28" height="28" viewBox="0 0 24 24">145 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>146 </svg>147 </div>148 <div class="title">Portronics Toad 23 Adjustable...</div>149 <div class="price-row">150 <div class="discount">50% off</div>151 <div class="mrp">599</div>152 <div class="sp">₹299</div>153 </div>154 <div class="green-tag">Daily Saver</div>155 <div class="rating-row">156 <div class="stars">157 <!-- 4.5 stars -->158 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>159 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>160 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>161 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>162 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>163 </div>164 <div class="chip"><span class="plus"></span>F-ASSURED</div>165 </div>166 </div>167 168 <!-- Card 2 -->169 <div class="card">170 <div class="product-image">[IMG: HP M120 Wireless Mouse]</div>171 <div class="heart">172 <svg width="28" height="28" viewBox="0 0 24 24">173 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>174 </svg>175 </div>176 <div class="title">HP M120 Wireless Mecha...</div>177 <div class="price-row">178 <div class="discount">40% off</div>179 <div class="mrp">999</div>180 <div class="sp">₹599</div>181 </div>182 <div class="subtext">Bought 2,800+ times</div>183 <div class="rating-row">184 <div class="stars">185 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>186 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>187 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>188 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>189 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>190 </div>191 <div class="chip"><span class="plus"></span>F-ASSURED</div>192 </div>193 <div class="small-note">Free delivery</div>194 </div>195 196 <!-- Card 3 -->197 <div class="card">198 <div class="product-image">[IMG: Portronics Toad 24 Grey Mouse]</div>199 <div class="heart">200 <svg width="28" height="28" viewBox="0 0 24 24">201 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>202 </svg>203 </div>204 <div class="title">Portronics Toad 24, POR...</div>205 <div class="price-row">206 <div class="discount">41% off</div>207 <div class="mrp">599</div>208 <div class="sp">₹349</div>209 </div>210 <div class="subtext">Bought 1,100+ times</div>211 <div class="rating-row">212 <div class="stars">213 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>214 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>215 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>216 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>217 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>218 </div>219 <div class="chip"><span class="plus"></span>F-ASSURED</div>220 </div>221 </div>222 223 <!-- Card 4 -->224 <div class="card">225 <div class="product-image">[IMG: Intex 2.4G Power Plus Mouse]</div>226 <div class="heart">227 <svg width="28" height="28" viewBox="0 0 24 24">228 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>229 </svg>230 </div>231 <div class="title">Intex 2.4G Power Plus Wi...</div>232 <div class="price-row">233 <div class="discount">50% off</div>234 <div class="mrp">499</div>235 <div class="sp">₹249</div>236 </div>237 <div class="green-tag">Daily Saver</div>238 <div class="rating-row">239 <div class="stars">240 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>241 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>242 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>243 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>244 <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#16a34a80" d="M12 17.3l-6.2 3.6 1.7-6.9L2 9.8l7-0.6L12 2l3 7.2 7 .6-5.5 4.3 1.7 6.9z"/></svg>245 </div>246 <div class="chip"><span class="plus"></span>F-ASSURED</div>247 </div>248 </div>249 250 <!-- Partial next row (cropped view) -->251 <div class="card">252 <div class="product-image">[IMG: Another Mouse]</div>253 <div class="heart">254 <svg width="28" height="28" viewBox="0 0 24 24">255 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>256 </svg>257 </div>258 <div class="title">Wireless Mouse - Black</div>259 <div class="price-row">260 <div class="discount">45% off</div>261 <div class="mrp">699</div>262 <div class="sp">₹385</div>263 </div>264 </div>265 266 <div class="card">267 <div class="product-image">[IMG: Compact Wireless Mouse]</div>268 <div class="heart">269 <svg width="28" height="28" viewBox="0 0 24 24">270 <path fill="#999" d="M12 21s-7-4.35-9.33-7.05A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.33 8.95C19 16.65 12 21 12 21z"/>271 </svg>272 </div>273 <div class="title">Ergonomic Wireless Mouse</div>274 <div class="price-row">275 <div class="discount">35% off</div>276 <div class="mrp">899</div>277 <div class="sp">₹585</div>278 </div>279 </div>280 281 </div>282 283</div>284</body>285</html>