GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Results - Wireless Mouse</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#1A1A1A;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:120px;17 background:#484848; color:#fff; display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; box-sizing:border-box; font-size:42px;19 }20 .status-left { display:flex; align-items:center; gap:24px; }21 .status-right { display:flex; align-items:center; gap:26px; }22 .dot { width:10px; height:10px; background:#CFCFCF; border-radius:50%; display:inline-block; }23 .icon-battery, .icon-wifi { width:40px; height:40px; background:#fff; color:#484848; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:26px; }24 .status-app { width:36px; height:36px; border-radius:6px; background:#D9D9D9; }25 26 /* Header / toolbar */27 .header {28 position:absolute; top:120px; left:0; width:100%; height:540px;29 background:#121212; color:#fff; box-sizing:border-box;30 padding:24px 40px 0 40px;31 }32 .header-top {33 display:flex; align-items:center; justify-content:flex-start; gap:28px; margin-bottom:24px;34 }35 .hdr-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }36 .hdr-icon svg { width:52px; height:52px; fill:none; stroke:#fff; stroke-width:6; }37 .title { font-size:86px; font-weight:800; margin:18px 0 12px 0; }38 .search-query { font-size:44px; color:#EDEDED; margin-bottom:18px; }39 .tab-indicator { width:360px; height:14px; background:#FFB300; border-radius:6px; }40 .tool-icons {41 position:absolute; right:40px; top:160px; display:flex; flex-direction:column; gap:46px; align-items:flex-end;42 }43 .tool { width:76px; height:76px; border-radius:16px; background:#1E1E1E; border:1px solid #2E2E2E; display:flex; align-items:center; justify-content:center; position:relative; }44 .tool svg { width:46px; height:46px; stroke:#BDBDBD; fill:none; stroke-width:5; }45 .badge {46 position:absolute; top:-8px; right:-8px; background:#FFB300; color:#000; font-weight:700; font-size:28px;47 width:48px; height:48px; border-radius:24px; display:flex; align-items:center; justify-content:center;48 box-shadow:0 2px 0 rgba(0,0,0,0.3);49 }50 .header-divider { position:absolute; bottom:0; left:0; width:100%; height:12px; background:#2A2A2A; }51 52 /* Product grid */53 .content {54 position:absolute; top:660px; left:0; right:0; bottom:260px; overflow:auto; padding:24px 16px 260px 16px; box-sizing:border-box;55 }56 .grid {57 display:grid; grid-template-columns:1fr 1fr; gap:18px;58 }59 .product-card {60 background:#1F1F1F; border:4px solid #2B2B2B; border-radius:6px; overflow:hidden; color:#EDEDED;61 display:flex; flex-direction:column;62 }63 .p-image {64 height:360px; background:#E0E0E0; border-bottom:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; text-align:center;65 }66 .p-info { padding:22px; position:relative; }67 .deal-badge {68 display:inline-block; background:#000; color:#fff; border-radius:12px; padding:10px 16px; font-size:32px; font-weight:800; margin-bottom:8px;69 border:1px solid #3A3A3A;70 }71 .strike { color:#9B9B9B; text-decoration:line-through; font-size:28px; margin-top:8px; }72 .price-row { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }73 .price { color:#FFB300; font-size:44px; font-weight:800; }74 .mini-tools { display:flex; gap:12px; }75 .mini-tool {76 width:44px; height:44px; border-radius:8px; background:#2A2A2A; border:1px solid #3A3A3A; display:flex; align-items:center; justify-content:center;77 }78 .mini-tool svg { width:26px; height:26px; stroke:#CFCFCF; fill:none; stroke-width:4; }79 .p-title { font-size:32px; color:#DADADA; line-height:1.3; margin-top:10px; }80 81 /* Bottom nav */82 .bottom-nav {83 position:absolute; left:0; bottom:70px; width:100%; height:200px;84 background:#2C2C2C; border-top:1px solid #3A3A3A; display:flex; align-items:center; justify-content:space-around; color:#fff;85 }86 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; font-size:30px; color:#DADADA; }87 .nav-icon { width:64px; height:64px; }88 .nav-icon svg { width:64px; height:64px; stroke:#EDEDED; fill:none; stroke-width:6; }89 .us-flag {90 position:absolute; left:50%; transform:translateX(-50%); bottom:230px;91 width:120px; height:120px; border-radius:60px; background:#E0E0E0; border:1px solid #BDBDBD;92 display:flex; align-items:center; justify-content:center; color:#757575; font-weight:bold;93 }94 .home-indicator {95 position:absolute; bottom:22px; left:50%; transform:translateX(-50%);96 width:300px; height:10px; background:#EDEDED; border-radius:10px;97 }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div class="status-left">106 <div>8:30</div>107 <div class="dot"></div>108 <div class="status-app"></div>109 <div class="status-app"></div>110 <div class="status-app"></div>111 <div class="dot"></div>112 </div>113 <div class="status-right">114 <div class="icon-wifi">⌁</div>115 <div class="icon-battery">🔋</div>116 </div>117 </div>118 119 <!-- Header -->120 <div class="header">121 <div class="header-top">122 <div class="hdr-icon">123 <svg viewBox="0 0 24 24"><path d="M14 20 L6 12 L14 4"/></svg>124 </div>125 <div class="hdr-icon">126 <svg viewBox="0 0 24 24">127 <path d="M3 6 H21"/><path d="M3 12 H21"/><path d="M3 18 H13"/>128 </svg>129 </div>130 </div>131 <div class="title">Results</div>132 <div class="search-query">wireless mouse</div>133 <div class="tab-indicator"></div>134 135 <div class="tool-icons">136 <div class="tool">137 <svg viewBox="0 0 24 24">138 <path d="M4 8 H20 L18 20 H6 Z"/><path d="M8 8 V6 H16 V8"/>139 </svg>140 <div class="badge">0</div>141 </div>142 <div class="tool">143 <svg viewBox="0 0 24 24">144 <path d="M4 4 H20 L13 12 V20 H11 V12 Z"/>145 </svg>146 </div>147 <div class="tool">148 <svg viewBox="0 0 24 24">149 <path d="M8 5 L12 1 L16 5"/><path d="M8 19 L12 23 L16 19"/>150 </svg>151 </div>152 <div class="tool">153 <svg viewBox="0 0 24 24">154 <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>155 <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>156 </svg>157 </div>158 </div>159 160 <div class="header-divider"></div>161 </div>162 163 <!-- Content Grid -->164 <div class="content">165 <div class="grid">166 167 <!-- Card 1 -->168 <div class="product-card">169 <div class="p-image">[IMG: Microsoft Bluetooth Ergonomic Mouse - Pastel Blue]</div>170 <div class="p-info">171 <div class="deal-badge">12% OFF</div>172 <div class="strike">INR 5675.00</div>173 <div class="price-row">174 <div class="price">INR 5048.00</div>175 <div class="mini-tools">176 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>177 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>178 </div>179 </div>180 <div class="p-title">Microsoft Bluetooth Ergonomic Mouse - Pastel Blue - with</div>181 </div>182 </div>183 184 <!-- Card 2 -->185 <div class="product-card">186 <div class="p-image">[IMG: Microsoft Wireless Bluetooth Mouse (2022) - Sculpted Blue]</div>187 <div class="p-info">188 <div class="deal-badge">12% OFF</div>189 <div class="strike">INR 4626.00</div>190 <div class="price-row">191 <div class="price">INR 4102.00</div>192 <div class="mini-tools">193 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>194 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>195 </div>196 </div>197 <div class="p-title">Microsoft Wireless Bluetooth Mouse (2022), Sculpted Design for Ultimate</div>198 </div>199 </div>200 201 <!-- Card 3 -->202 <div class="product-card">203 <div class="p-image">[IMG: Microsoft Bluetooth Mobile Mouse 3600 - Dark Red]</div>204 <div class="p-info">205 <div class="price-row">206 <div class="price">INR 3577.00</div>207 <div class="mini-tools">208 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>209 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>210 </div>211 </div>212 <div class="p-title">Microsoft Bluetooth Mobile Mouse 3600 - Dark Red. Comfortable</div>213 </div>214 </div>215 216 <!-- Card 4 -->217 <div class="product-card">218 <div class="p-image">[IMG: Microsoft Bluetooth Mouse - Peach]</div>219 <div class="p-info">220 <div class="price-row">221 <div class="price">INR 3048.00</div>222 <div class="mini-tools">223 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>224 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>225 </div>226 </div>227 <div class="p-title">Microsoft Bluetooth Mouse - Peach. Comfortable design, Right/Left</div>228 </div>229 </div>230 231 <!-- Placeholder row showing continuation -->232 <div class="product-card">233 <div class="p-image">[IMG: Wireless Mouse - Burgundy]</div>234 <div class="p-info">235 <div class="price-row">236 <div class="price">INR 3299.00</div>237 <div class="mini-tools">238 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>239 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>240 </div>241 </div>242 <div class="p-title">Wireless Mouse - Burgundy finish</div>243 </div>244 </div>245 246 <div class="product-card">247 <div class="p-image">[IMG: Wireless Mouse - Pink]</div>248 <div class="p-info">249 <div class="price-row">250 <div class="price">INR 2899.00</div>251 <div class="mini-tools">252 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M6 12 H18"/><path d="M12 6 V18"/></svg></div>253 <div class="mini-tool"><svg viewBox="0 0 24 24"><path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/></svg></div>254 </div>255 </div>256 <div class="p-title">Wireless Mouse - Pink edition</div>257 </div>258 </div>259 260 </div>261 </div>262 263 <!-- US flag floating badge -->264 <div class="us-flag">[IMG: US Flag]</div>265 266 <!-- Bottom navigation -->267 <div class="bottom-nav">268 <div class="nav-item">269 <div class="nav-icon">270 <svg viewBox="0 0 24 24">271 <circle cx="12" cy="12" r="8"/>272 <path d="M12 12 L17 17"/>273 </svg>274 </div>275 <div>Explore</div>276 </div>277 <div class="nav-item">278 <div class="nav-icon">279 <svg viewBox="0 0 24 24">280 <circle cx="7" cy="7" r="3"/><circle cx="17" cy="17" r="3"/><path d="M20 4 L4 20"/>281 </svg>282 </div>283 <div>Deals</div>284 </div>285 <div class="nav-item">286 <div class="nav-icon">287 <svg viewBox="0 0 24 24">288 <rect x="4" y="4" width="16" height="16"/><path d="M4 10 H20"/><path d="M10 4 V20"/>289 </svg>290 </div>291 <div>US Store</div>292 </div>293 <div class="nav-item">294 <div class="nav-icon">295 <svg viewBox="0 0 24 24">296 <path d="M12 21 C8 17 4 14 4 9 C4 6 6 4 8.5 4 C10 4 11.2 4.8 12 6 C12.8 4.8 14 4 15.5 4 C18 4 20 6 20 9 C20 14 16 17 12 21 Z"/>297 </svg>298 </div>299 <div>Favorites</div>300 </div>301 <div class="nav-item">302 <div class="nav-icon">303 <svg viewBox="0 0 24 24">304 <circle cx="10" cy="10" r="6"/><path d="M15 15 L21 21"/>305 </svg>306 </div>307 <div>Search</div>308 </div>309 </div>310 311 <!-- Home indicator -->312 <div class="home-indicator"></div>313 314</div>315</body>316</html>