GD-ML/AndroidCode
13.4k
1<html>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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#ffffff; box-shadow:0 0 0 1px rgba(0,0,0,0.06);10 }11 /* Top status bar */12 .status-bar {13 height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;14 color:#222; font-weight:600; font-size:36px;15 }16 .status-icons { display:flex; align-items:center; gap:24px; color:#555; font-size:28px; }17 /* Search bar */18 .search-row {19 padding:0 28px; display:flex; align-items:center; gap:18px;20 }21 .icon-btn {22 width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center;23 background:transparent;24 }25 .search-box {26 flex:1; height:96px; border-radius:20px; background:#f2f4f6; display:flex; align-items:center;27 padding:0 24px; border:1px solid #e3e7ea; gap:18px;28 }29 .search-input {30 flex:1; font-size:34px; color:#111;31 }32 .search-placeholder { color:#666; }33 .trail-icons { display:flex; gap:12px; }34 /* Filters */35 .filters { padding:26px 28px 12px; display:flex; flex-wrap:wrap; gap:18px; }36 .chip {37 height:88px; padding:0 28px; border:1px solid #dfe3e6; border-radius:44px;38 display:flex; align-items:center; gap:16px; font-size:34px; color:#222; background:#fff;39 }40 .chip .sub { color:#6c6f73; font-size:30px; }41 .chip .caret { margin-left:10px; color:#777; }42 .green-dot { width:18px; height:18px; background:#28a745; border-radius:50%; }43 .content {44 padding:8px 20px 120px;45 }46 .grid { display:flex; flex-wrap:wrap; gap:22px; }47 .card {48 width:512px; background:#fff; border:1px solid #e6e8ea; border-radius:16px; overflow:hidden;49 }50 .card-inner { padding:22px; }51 .img-wrap {52 position:relative; width:100%; height:420px; background:#E0E0E0; border:1px solid #BDBDBD;53 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;54 border-radius:10px;55 }56 .heart {57 position:absolute; right:16px; top:16px; width:64px; height:64px; border-radius:32px;58 background:#ffffffcc; display:flex; align-items:center; justify-content:center; border:1px solid #d9d9d9;59 }60 .bestseller {61 position:absolute; left:20px; top:-30px; background:#21b7aa; color:#fff; font-size:28px; padding:10px 18px; border-radius:12px;62 box-shadow:0 2px 0 rgba(0,0,0,0.08);63 }64 .title {65 font-size:36px; color:#111; line-height:1.2; margin-top:18px;66 }67 .price-row { display:flex; align-items:center; gap:18px; margin-top:16px; }68 .off { color:#21a453; font-weight:700; font-size:36px; }69 .mrp { color:#8a8d90; text-decoration:line-through; font-size:32px; }70 .final { color:#111; font-weight:800; font-size:38px; }71 .tag { color:#178f43; font-size:32px; margin-top:10px; font-weight:700; }72 .rating-row { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:30px; color:#ffb400; }73 .plus { color:#2367ff; font-size:28px; margin-left:8px; }74 .text-muted { color:#6b6e71; font-size:32px; margin-top:14px; }75 /* Bottom safe area bar */76 .bottom-bar {77 position:absolute; left:0; right:0; bottom:0; height:36px; background:#2b2350;78 }79 /* Simple star sequence */80 .stars { letter-spacing:2px; }81 /* SVG basics */82 svg { width:40px; height:40px; }83</style>84</head>85<body>86<div id="render-target">87 88 <!-- Status bar -->89 <div class="status-bar">90 <div>10:59</div>91 <div class="status-icons">92 <span>S</span>93 <span>ib</span>94 <span>temu</span>95 <span>LR</span>96 <span>•</span>97 <span>98 <!-- WiFi dot -->99 <svg viewBox="0 0 24 24"><path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z" fill="#666"/></svg>100 </span>101 <span>102 <!-- battery -->103 <svg viewBox="0 0 24 24">104 <rect x="2" y="6" width="18" height="12" rx="2" fill="#666"/>105 <rect x="20" y="9" width="2" height="6" fill="#666"/>106 </svg>107 </span>108 </div>109 </div>110 111 <!-- Search row -->112 <div class="search-row">113 <button class="icon-btn" aria-label="Back">114 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20" stroke="#222" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>115 </button>116 <div class="search-box">117 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#777" stroke-width="2.4" fill="none"/><path d="M14.5 14.5 L20 20" stroke="#777" stroke-width="2.4" stroke-linecap="round"/></svg>118 <div class="search-input"><span class="search-placeholder">wireless mouse</span></div>119 <div class="trail-icons">120 <!-- mic -->121 <svg viewBox="0 0 24 24"><rect x="9" y="4" width="6" height="10" rx="3" fill="#666"/><path d="M6 11c0 3.5 3 5 6 5s6-1.5 6-5" stroke="#666" stroke-width="2" fill="none"/><path d="M12 16v4" stroke="#666" stroke-width="2" /></svg>122 <!-- camera -->123 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/><circle cx="12" cy="13" r="4" stroke="#666" stroke-width="2" fill="none"/><rect x="8" y="4" width="8" height="3" rx="1.5" fill="#666"/></svg>124 </div>125 </div>126 <button class="icon-btn" aria-label="Cart">127 <svg viewBox="0 0 24 24"><path d="M3 4h2l2 12h10l2-8H7" stroke="#222" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="2" fill="#222"/><circle cx="17" cy="20" r="2" fill="#222"/></svg>128 </button>129 </div>130 131 <!-- Filter chips -->132 <div class="filters">133 <div class="chip">134 <span>Sort By</span>135 <span class="caret">▼</span>136 </div>137 <div class="chip">138 <span>139 <svg viewBox="0 0 24 24"><path d="M4 6h16M6 12h12M8 18h8" stroke="#333" stroke-width="2.2" stroke-linecap="round"/></svg>140 </span>141 <span>Filter</span>142 </div>143 <div class="chip">144 <span>Brand</span>145 <span class="caret">▼</span>146 </div>147 <div class="chip">148 <span>Price</span>149 <span class="caret">▼</span>150 </div>151 <div class="chip">152 <span>Discount</span>153 <span class="caret">▼</span>154 </div>155 156 <div class="chip" style="background:#fffbe8;">157 <span>158 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.5 7 .9-5 4.8 1.4 6.8L12 17l-6.5 4 1.4-6.8-5-4.8 7-.9L12 2z" fill="#f4c343"/></svg>159 </span>160 <div>161 <div>Top</div>162 <div class="sub">Rated</div>163 </div>164 </div>165 166 <div class="chip" style="background:#fffbe8;">167 <span>168 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.5 7 .9-5 4.8 1.4 6.8L12 17l-6.5 4 1.4-6.8-5-4.8 7-.9L12 2z" fill="#f4c343"/></svg>169 </span>170 <div>171 <div>Premium</div>172 <div class="sub">Brands</div>173 </div>174 </div>175 </div>176 177 <!-- Product grid -->178 <div class="content">179 <div class="grid">180 181 <!-- Card 1 -->182 <div class="card">183 <div class="card-inner">184 <div class="img-wrap">185 <div class="bestseller">BESTSELLER</div>186 [IMG: Portronics Toad 14 Wireless Mouse + USB Dongle]187 <div class="heart">188 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4.3 4.3 0 0 1 7-3.3A4.3 4.3 0 0 1 19 10c0 5.4-7 10-7 10z" fill="none" stroke="#888" stroke-width="2"/></svg>189 </div>190 </div>191 <div class="title">Portronics Toad 14 Wireless...</div>192 <div class="price-row">193 <div class="off">40% off</div>194 <div class="mrp">499</div>195 <div class="final">₹299</div>196 </div>197 <div class="tag">Daily Saver</div>198 <div class="rating-row">199 <span class="stars">★★★★☆</span>200 <span class="plus">Plus F-ASSURED</span>201 </div>202 </div>203 </div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="card-inner">208 <div class="img-wrap">209 [IMG: Portronics Toad 23 Adjustable DPI Mouse]210 <div class="heart">211 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4.3 4.3 0 0 1 7-3.3A4.3 4.3 0 0 1 19 10c0 5.4-7 10-7 10z" fill="none" stroke="#888" stroke-width="2"/></svg>212 </div>213 </div>214 <div class="title">Portronics Toad 23 Adjus...</div>215 <div class="price-row">216 <div class="off">50% off</div>217 <div class="mrp">599</div>218 <div class="final">₹299</div>219 </div>220 <div class="tag">Daily Saver</div>221 <div class="rating-row">222 <span class="stars">★★★★☆</span>223 <span class="plus">Plus F-ASSURED</span>224 </div>225 </div>226 </div>227 228 <!-- Card 3 -->229 <div class="card">230 <div class="card-inner">231 <div class="img-wrap">232 [IMG: Lenovo 130 Wireless Optical Mouse]233 <div class="heart">234 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4.3 4.3 0 0 1 7-3.3A4.3 4.3 0 0 1 19 10c0 5.4-7 10-7 10z" fill="none" stroke="#888" stroke-width="2"/></svg>235 </div>236 </div>237 <div class="title">Lenovo 130 Wireless Opti...</div>238 <div class="price-row">239 <div class="off">51% off</div>240 <div class="mrp">1,090</div>241 <div class="final">₹533</div>242 </div>243 <div class="tag">Daily Saver</div>244 <div class="rating-row">245 <span class="stars">★★★★☆</span>246 <span class="plus">Plus F-ASSURED</span>247 </div>248 <div class="text-muted">Free delivery</div>249 </div>250 </div>251 252 <!-- Card 4 -->253 <div class="card">254 <div class="card-inner">255 <div class="img-wrap">256 [IMG: Logitech B175 / Optical Wireless Mouse + USB Dongle]257 <div class="heart">258 <svg viewBox="0 0 24 24"><path d="M12 20s-7-4.6-7-10a4.3 4.3 0 0 1 7-3.3A4.3 4.3 0 0 1 19 10c0 5.4-7 10-7 10z" fill="none" stroke="#888" stroke-width="2"/></svg>259 </div>260 </div>261 <div class="title">Logitech B175 / Optical T...</div>262 <div class="price-row">263 <div class="off">35% off</div>264 <div class="mrp">995</div>265 <div class="final">₹645</div>266 </div>267 <div class="tag">Daily Saver</div>268 <div class="rating-row">269 <span class="stars">★★★★☆</span>270 <span class="plus">Plus F-ASSURED</span>271 </div>272 <div class="text-muted">Free delivery</div>273 </div>274 </div>275 276 </div>277 </div>278 279 <!-- Bottom gesture/navigation area -->280 <div class="bottom-bar"></div>281</div>282</body>283</html>