GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Listing Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:0;12 box-shadow: 0 0 0 rgba(0,0,0,0);13 color:#222;14 }15 .status-bar{16 height:120px; background:#2e2432; color:#fff; padding:0 32px; box-sizing:border-box;17 display:flex; align-items:center; justify-content:space-between; font-weight:600;18 }19 .status-left{ display:flex; align-items:center; gap:20px; font-size:36px; }20 .status-right{ display:flex; align-items:center; gap:26px; }21 .sb-dot{ width:14px; height:14px; background:#fff; border-radius:50%; opacity:.85; }22 .top-controls{23 height:180px; border-bottom:1px solid #eee; border-top:1px solid #ececec; background:#fff;24 display:flex;25 }26 .ctrl{27 flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;28 gap:12px; position:relative; font-size:38px; color:#444;29 }30 .ctrl:not(:last-child)::after{31 content:""; position:absolute; right:0; top:30px; bottom:30px; width:1px; background:#eee;32 }33 .ctrl .sub{ font-size:28px; color:#8b8b8b; margin-top:-8px; }34 .row-cats{ height:150px; display:flex; align-items:center; gap:56px; padding:0 36px; box-sizing:border-box; overflow:hidden; }35 .cat-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }36 .cat-icon{ width:64px; height:40px; }37 .cat-item span{ font-size:32px; color:#333; white-space:nowrap; }38 .cat-item .active{ color:#ff6c37; }39 .grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 24px 200px; box-sizing:border-box; }40 .card{ border:1px solid #eaeaea; border-radius:16px; overflow:hidden; background:#fff; position:relative; }41 .imgph{42 height:420px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;43 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; text-align:center; padding:16px;44 }45 .wish{46 position:absolute; top:18px; right:18px; background:rgba(255,255,255,.95); border-radius:50%; width:64px; height:64px; display:flex; align-items:center; justify-content:center; border:1px solid #eee;47 }48 .card-body{ padding:20px 22px 26px; }49 .title{ font-size:34px; line-height:1.25; color:#333; margin-bottom:8px; }50 .brand{ font-size:26px; color:#8b8b8b; margin-bottom:10px; }51 .rating{ color:#ff9f1a; font-size:28px; display:flex; align-items:center; gap:10px; margin-bottom:8px; }52 .rating .count{ color:#666; font-size:26px; }53 .price-row{ display:flex; align-items:flex-end; gap:16px; margin:10px 0 6px; }54 .price{ font-size:42px; font-weight:700; }55 .strike{ color:#9e9e9e; text-decoration:line-through; font-size:30px; }56 .off{ color:#27ae60; font-size:30px; font-weight:700; }57 .save{ font-size:26px; color:#6a6a6a; margin-top:6px; }58 .credits{ font-size:26px; color:#1e88e5; margin-top:6px; }59 .colors-pill{ position:absolute; left:18px; bottom:440px; display:flex; align-items:center; gap:12px;60 background:#fff; border-radius:28px; border:1px solid #e3e3e3; padding:10px 16px; font-size:26px; color:#666;61 }62 .wheel{63 width:34px; height:34px; border-radius:50%;64 background: conic-gradient(#e74c3c 0 72deg, #f1c40f 72deg 144deg, #2ecc71 144deg 216deg, #3498db 216deg 288deg, #9b59b6 288deg 360deg);65 border:2px solid #fff; box-shadow:0 0 0 1px #dcdcdc inset;66 }67 /* Floating chat */68 .chat{69 position:absolute; right:34px; bottom:280px; display:flex; align-items:center; gap:10px;70 }71 .chat .close{72 width:50px; height:50px; border-radius:50%; background:#000; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; opacity:.85;73 margin-right:10px;74 }75 .chat .bubble{76 background:#ff6c37; color:#fff; border-radius:16px 16px 16px 0; padding:18px 24px; font-size:32px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.15);77 }78 /* Bottom nav */79 .bottom-nav{80 position:absolute; left:0; right:0; bottom:0; height:180px; border-top:1px solid #ececec; background:#fff; display:flex; justify-content:space-around; align-items:center;81 }82 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#777; font-size:26px; }83 .nav-item.active{ color:#ff6c37; }84 .nav-icon{ width:56px; height:56px; }85 .home-underline{86 position:absolute; left:80px; bottom:178px; width:150px; height:6px; background:#ff6c37; border-radius:3px;87 }88 .home-indicator{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:300px; height:10px; background:#cfcfcf; border-radius:8px; opacity:.9; }89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status bar -->95 <div class="status-bar">96 <div class="status-left">97 <span>11:49</span>98 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M6 19a7 7 0 1 1 12 0H6zM12 3a5 5 0 0 1 5 5H7a5 5 0 0 1 5-5z"/></svg>99 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M19 7l-7 10-5-5" stroke="#fff" stroke-width="2" fill="none"/></svg>100 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 6h18v12H3zM7 10h10v2H7z" opacity=".85"/></svg>101 <span class="sb-dot"></span>102 </div>103 <div class="status-right">104 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 5h2l3 9h8l3-6H8" stroke="#fff" stroke-width="2" fill="none"/></svg>105 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M2 12a10 10 0 0 1 20 0" stroke="#fff" stroke-width="2" fill="none"/></svg>106 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M17 18a3 3 0 1 0 0-6M3 21h14" stroke="#fff" stroke-width="2" fill="none"/></svg>107 <svg width="44" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 4l7 4v8l-7 4-7-4V8l7-4z"/></svg>108 <svg width="42" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M6 20h12l2-12H4l2 12zM8 4h8v2H8z"/></svg>109 </div>110 </div>111 112 <!-- Controls -->113 <div class="top-controls">114 <div class="ctrl">115 <div style="display:flex; align-items:center; gap:12px;">116 <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M6 9l6-6 6 6" stroke="#333" stroke-width="2"/><path d="M6 15l6 6 6-6" stroke="#333" stroke-width="2" opacity=".7"/></svg>117 <span>Categories</span>118 </div>119 <div class="sub"> </div>120 </div>121 <div class="ctrl">122 <div style="display:flex; align-items:center; gap:12px;">123 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">124 <path d="M7 3v10M7 3l-2 2M7 3l2 2M17 21V11M17 21l-2-2M17 21l2-2" stroke="#333" stroke-width="2"/>125 </svg>126 <span>Sort By</span>127 </div>128 <div class="sub">Customer Rating</div>129 </div>130 <div class="ctrl">131 <div style="display:flex; align-items:center; gap:12px;">132 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">133 <path d="M4 7h10M4 12h14M4 17h6" stroke="#333" stroke-width="2"/>134 <circle cx="16" cy="7" r="2" fill="#333"/><circle cx="10" cy="17" r="2" fill="#333"/>135 </svg>136 <span>Filter</span>137 </div>138 <div class="sub">0 Filters Applied</div>139 </div>140 </div>141 142 <!-- Category quick row -->143 <div class="row-cats">144 <div class="cat-item">145 <svg class="cat-icon" viewBox="0 0 24 24" fill="#333"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>146 <span class="active">All (230)</span>147 </div>148 <div class="cat-item">149 <svg class="cat-icon" viewBox="0 0 24 24" fill="#555"><path d="M3 15h18v5H3zM5 9h14l-2 6H7L5 9zm4-4h6v3H9V5z"/></svg>150 <span>1 Seater Recliners (185)</span>151 </div>152 <div class="cat-item">153 <svg class="cat-icon" viewBox="0 0 24 24" fill="#555"><path d="M2 15h20v5H2zM4 8h16l-2 7H6L4 8zm3-3h4v2H7V5zm6 0h4v2h-4V5z"/></svg>154 <span>2 Seater Recliners (26)</span>155 </div>156 <div class="cat-item">157 <svg class="cat-icon" viewBox="0 0 24 24" fill="#555"><path d="M1 15h22v5H1zM3 7h18l-2 8H5L3 7zm3-3h4v2H6V4zm8 0h4v2h-4V4z"/></svg>158 <span>3 Seater Recliners (19)</span>159 </div>160 </div>161 162 <!-- Product grid -->163 <div class="grid">164 <!-- Banner-like tile -->165 <div class="card">166 <div class="imgph">[IMG: Push Back & Relax Banner]</div>167 <div class="card-body">168 <div class="title">Discover Cozy Recliners</div>169 <div class="brand">Curated for Comfort</div>170 <div class="price-row">171 <div class="price">₹14,999</div>172 <div class="strike">₹24,999</div>173 <div class="off">40% OFF</div>174 </div>175 <div class="credits">Seasonal picks just for you</div>176 </div>177 </div>178 179 <!-- Product 1 -->180 <div class="card">181 <div class="imgph">[IMG: Brown 1 Seater Recliner]</div>182 <div class="wish">183 <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" stroke="#888" stroke-width="2"/></svg>184 </div>185 <div class="card-body">186 <div class="title">Avalon Fabric Manual 1 Seater Recliner In Brown</div>187 <div class="brand">By Duroflex</div>188 <div class="rating">189 <span>★★★★★</span><span class="count">(2 Sold)</span>190 </div>191 <div class="price-row">192 <div class="price">₹15,819</div>193 <div class="strike">₹30,834</div>194 <div class="off">49%</div>195 </div>196 <div class="save">You Save ₹15,015</div>197 <div class="credits">Earn 4,070 Extra Pepperfry Credits</div>198 </div>199 </div>200 201 <!-- Product 2 -->202 <div class="card">203 <div class="imgph">[IMG: 2 Seater Recliner in Brown]</div>204 <div class="colors-pill"><span class="wheel"></span> +4 more colors</div>205 <div class="wish">206 <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" stroke="#888" stroke-width="2"/></svg>207 </div>208 <div class="card-body">209 <div class="title">Avalon Fabric Manual 2 Seater Recliner In Brown Colour</div>210 <div class="brand">By Duroflex</div>211 <div class="rating"><span>★★★★★</span><span class="count">(2 Sold)</span></div>212 <div class="price-row">213 <div class="price">₹40,015</div>214 <div class="strike">₹78,180</div>215 <div class="off">49% off</div>216 </div>217 <div class="save">You Save ₹38,165</div>218 <div class="credits">Earn 10,004 Extra Pepperfry Credits</div>219 </div>220 </div>221 222 <!-- Product 3 -->223 <div class="card">224 <div class="imgph">[IMG: Midnight Blue 1 Seater Recliner]</div>225 <div class="colors-pill"><span class="wheel"></span> +7 more colors</div>226 <div class="wish">227 <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" stroke="#888" stroke-width="2"/></svg>228 </div>229 <div class="card-body">230 <div class="title">Avalon Fabric Manual 1 Seater Recliner In Midnight Blue Colour</div>231 <div class="brand">By Duroflex</div>232 <div class="rating"><span>★★★★★</span><span class="count">(24 Sold)</span></div>233 <div class="price-row">234 <div class="price">₹16,277</div>235 <div class="strike">₹31,800</div>236 <div class="off">48% off</div>237 </div>238 <div class="save">You Save ₹15,523</div>239 <div class="credits">Earn 4,070 Extra Pepperfry Credits</div>240 </div>241 </div>242 </div>243 244 <!-- Floating chat -->245 <div class="chat">246 <div class="close">×</div>247 <div class="bubble">Let's Chat</div>248 </div>249 250 <!-- Bottom navigation -->251 <div class="bottom-nav">252 <div class="nav-item active">253 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10z" stroke="#ff6c37" stroke-width="2"/></svg>254 <div>Home</div>255 </div>256 <div class="nav-item">257 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="7" r="4" stroke="#777" stroke-width="2"/><path d="M4 21a8 8 0 0 1 16 0" stroke="#777" stroke-width="2"/></svg>258 <div>My Account</div>259 </div>260 <div class="nav-item">261 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M20 7H4l2-3h12l2 3zM5 7v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7" stroke="#777" stroke-width="2"/><path d="M8 11h8M8 15h8" stroke="#777" stroke-width="2"/></svg>262 <div>Gift Cards</div>263 </div>264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2"/><text x="12" y="15" text-anchor="middle" font-size="10" fill="#777" font-family="Arial">pf</text></svg>266 <div>Studios</div>267 </div>268 <div class="nav-item">269 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1" stroke="#777" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="#777" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="#777" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="#777" stroke-width="2"/></svg>270 <div>Categories</div>271 </div>272 <div class="home-underline"></div>273 </div>274 275 <div class="home-indicator"></div>276</div>277</body>278</html>