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>Screwdriver Listing</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target{10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#FFFFFF; border-radius:0;13 font-family: Arial, Helvetica, sans-serif; color:#222;14 }15 16 /* Top status bar (teal) */17 .status-bar{18 position:absolute; left:0; top:0; width:100%; height:110px;19 background:#4FA4AA; color:#fff;20 display:flex; align-items:center; padding:0 36px; box-sizing:border-box;21 font-size:36px; letter-spacing:1px;22 }23 .status-right{ margin-left:auto; display:flex; align-items:center; gap:22px; opacity:0.95; }24 .status-dot{ width:20px; height:20px; background:#fff; border-radius:50%; opacity:0.7; }25 26 /* App bar */27 .app-bar{28 position:absolute; left:0; top:110px; width:100%; height:130px;29 background:#fff; display:flex; align-items:center; padding:0 28px; box-sizing:border-box;30 border-bottom:1px solid #e5e5e5;31 }32 .app-title{ font-weight:800; font-size:46px; margin-left:18px; letter-spacing:1px; }33 .app-actions{ margin-left:auto; display:flex; align-items:center; gap:40px; }34 .icon-teal svg{ width:54px; height:54px; fill:#4FA4AA; }35 36 .back-btn{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; }37 .back-btn svg{ width:48px; height:48px; fill:#4FA4AA; }38 39 /* Filter segment bar */40 .filter-bar{41 position:absolute; left:0; top:240px; width:100%; height:120px; background:#fff;42 border-bottom:1px solid #e9e9e9; display:flex;43 }44 .seg{ flex:1; display:flex; align-items:center; justify-content:center; gap:16px;45 font-size:36px; color:#6a6a6a; border-right:1px solid #efefef; }46 .seg:last-child{ border-right:none; }47 .seg .badge{48 background:#4FA4AA; color:#fff; width:48px; height:48px; border-radius:24px;49 display:inline-flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;50 }51 .seg .arrow{ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid #6a6a6a; margin-top:8px; }52 53 /* Chips row */54 .chips{55 position:absolute; left:0; top:360px; width:100%; padding:22px 24px 18px; box-sizing:border-box;56 display:flex; gap:26px; overflow:hidden;57 }58 .chip{59 background:#fff; padding:28px 34px; border-radius:18px; color:#6c6c6c; font-size:34px;60 box-shadow:0 2px 8px rgba(0,0,0,0.1);61 border:1px solid #efefef;62 }63 64 /* Grid listing */65 .grid{66 position:absolute; left:0; top:460px; right:0; bottom:0;67 padding:10px 20px 160px; box-sizing:border-box; overflow:hidden;68 }69 .grid-inner{70 height:100%; overflow:auto; padding:12px 10px 260px; box-sizing:border-box;71 }72 .products{73 display:grid; grid-template-columns:1fr 1fr; gap:34px 26px; padding:8px 10px 160px;74 }75 .card{76 background:#fff; border-radius:14px; padding:0; overflow:hidden; position:relative;77 }78 .img{79 width:100%; height:520px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;80 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;81 }82 .wishlist{83 position:absolute; right:26px; top:26px; width:96px; height:96px; border-radius:48px;84 background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center;85 }86 .wishlist svg{ width:46px; height:46px; fill:#9e9e9e; }87 .wishlist.filled svg{ fill:#ff5a53; }88 89 .details{ padding:26px 24px 28px; }90 .title{ font-size:34px; color:#555; line-height:1.25; max-height:88px; overflow:hidden; }91 .price-row{ margin-top:18px; display:flex; align-items:baseline; gap:16px; }92 .price{ font-size:44px; font-weight:800; }93 .mrp{ font-size:34px; color:#9e9e9e; text-decoration:line-through; }94 .offer{ margin-top:8px; font-size:34px; color:#1e9c8d; font-weight:700; }95 96 /* Snackbar */97 .snack{98 position:absolute; left:50%; bottom:160px; transform:translateX(-50%);99 background:rgba(33,33,33,0.92); color:#fff; border-radius:48px;100 padding:22px 34px; display:flex; align-items:center; gap:22px;101 box-shadow:0 6px 18px rgba(0,0,0,0.25); font-size:34px;102 }103 .snack .logo{104 width:64px; height:64px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:32px;105 display:flex; align-items:center; justify-content:center; color:#757575; font-size:20px;106 }107 108 /* Bottom gesture bar */109 .gesture{110 position:absolute; left:50%; bottom:60px; transform:translateX(-50%);111 width:340px; height:10px; background:#CFCFCF; border-radius:6px;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div style="font-weight:700;">10:39</div>121 <div class="status-right">122 <div class="status-dot"></div>123 <div class="status-dot"></div>124 <div class="status-dot"></div>125 <div style="width:26px; height:26px; border:3px solid #fff; border-radius:50%; opacity:0.8;"></div>126 <div style="display:flex; align-items:center; gap:8px;">127 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M16 4h-1V3a1 1 0 0 0-1-1H10a1 1 0 0 0-1 1v1H8a4 4 0 0 0-4 4v9a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8a4 4 0 0 0-4-4zM9 3h6v1H9V3z"/></svg>128 <div>100%</div>129 </div>130 </div>131 </div>132 133 <!-- App bar -->134 <div class="app-bar">135 <div class="back-btn">136 <svg viewBox="0 0 24 24"><path d="M15.5 5 9 11.5 15.5 18l1.5-1.5-5-5 5-5z"/></svg>137 </div>138 <div class="app-title">SCREWDRIVER</div>139 <div class="app-actions">140 <div class="icon-teal">141 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21.49 21.49 20l-5.99-6zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>142 </div>143 <div class="icon-teal">144 <svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2v2h16V6l-1-2h-2l-1-2H9L8 4zm-3 6v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V10H4z"/></svg>145 </div>146 </div>147 </div>148 149 <!-- Filter segments -->150 <div class="filter-bar">151 <div class="seg">Category <div class="arrow"></div></div>152 <div class="seg"><span class="badge">1</span> Filter</div>153 <div class="seg">₹ ↓ Price</div>154 <div class="seg">⇅ Sort</div>155 </div>156 157 <!-- Chips -->158 <div class="chips">159 <div class="chip">Screwdrivers</div>160 <div class="chip">Cutting Tools</div>161 <div class="chip">Hand Tool Sets</div>162 </div>163 164 <!-- Product grid -->165 <div class="grid">166 <div class="grid-inner">167 <div class="products">168 169 <!-- Card 1 -->170 <div class="card">171 <div class="img">[IMG: Multi screwdriver set]</div>172 <div class="wishlist">173 <svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.35-9.33-7.37A5.5 5.5 0 0 1 12 5.67a5.5 5.5 0 0 1 9.33 7.96C18.7 16.65 12 21 12 21z" fill="none" stroke="#9e9e9e" stroke-width="2"/></svg>174 </div>175 <div class="details">176 <div class="title">Multi-screwdriver letsgrab 8 in 1 ...</div>177 <div class="price-row">178 <div class="price">₹299</div>179 <div class="mrp">₹599</div>180 </div>181 <div class="offer">50% off</div>182 </div>183 </div>184 185 <!-- Card 2 -->186 <div class="card">187 <div class="img">[IMG: 8 in 1 screwdriver toolkit]</div>188 <div class="wishlist filled">189 <svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.35-9.33-7.37A5.5 5.5 0 0 1 12 5.67a5.5 5.5 0 0 1 9.33 7.96C18.7 16.65 12 21 12 21z"/></svg>190 </div>191 <div class="details">192 <div class="title">8 in 1 Screwdrivers Toolkit</div>193 <div class="price-row">194 <div class="price">₹299</div>195 <div class="mrp">₹499</div>196 </div>197 <div class="offer">40% off</div>198 </div>199 </div>200 201 <!-- Card 3 -->202 <div class="card">203 <div class="img">[IMG: 8 in 1 screwdriver toolkit]</div>204 <div class="wishlist">205 <svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.35-9.33-7.37A5.5 5.5 0 0 1 12 5.67a5.5 5.5 0 0 1 9.33 7.96C18.7 16.65 12 21 12 21z" fill="none" stroke="#9e9e9e" stroke-width="2"/></svg>206 </div>207 <div class="details">208 <div class="title">8 in 1 Screwdrivers Toolkit</div>209 <div class="price-row">210 <div class="price">₹299</div>211 <div class="mrp">₹499</div>212 </div>213 <div class="offer">40% off</div>214 </div>215 </div>216 217 <!-- Card 4 -->218 <div class="card">219 <div class="img">[IMG: Multi screwdriver set]</div>220 <div class="wishlist">221 <svg viewBox="0 0 24 24"><path d="M12 21s-6.7-4.35-9.33-7.37A5.5 5.5 0 0 1 12 5.67a5.5 5.5 0 0 1 9.33 7.96C18.7 16.65 12 21 12 21z" fill="none" stroke="#9e9e9e" stroke-width="2"/></svg>222 </div>223 <div class="details">224 <div class="title">Multi-screwdriver letsgrab 8 in 1 ...</div>225 <div class="price-row">226 <div class="price">₹299</div>227 <div class="mrp">₹599</div>228 </div>229 <div class="offer">50% off</div>230 </div>231 </div>232 233 </div>234 </div>235 </div>236 237 <!-- Snackbar -->238 <div class="snack">239 <div class="logo">SC</div>240 <div>Added to wishlist</div>241 </div>242 243 <!-- Gesture bar -->244 <div class="gesture"></div>245 246</div>247</body>248</html>