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>E-commerce 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;11 position:relative; overflow:hidden;12 background:#ffffff; border-radius:0;13 box-shadow: 0 0 0 rgba(0,0,0,0);14 color:#263238;15 }16 .statusbar {17 height:160px; background:#159CA6; color:#fff; padding:0 48px;18 display:flex; align-items:center; justify-content:space-between;19 font-weight:600; letter-spacing:1px;20 }21 .toolbar {22 height:140px; background:#ffffff; display:flex; align-items:center;23 padding:0 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);24 }25 .toolbar .left, .toolbar .right { display:flex; align-items:center; }26 .toolbar .right { margin-left:auto; gap:36px; }27 .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; cursor:default; }28 .back { color:#159CA6; }29 .search, .cart { color:#30AEB6; }30 .cart-badge {31 position:absolute; right:42px; top:220px;32 width:54px; height:54px; background:#ff3b30; color:#fff; border-radius:50%;33 display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700;34 border:4px solid #fff;35 }36 37 .section { padding: 32px 48px; }38 .pincode {39 padding: 18px 48px 8px 48px;40 }41 .pin-row {42 display:flex; align-items:center; gap:24px; margin-top:8px;43 }44 .pin-input {45 flex:1; padding:24px 0; border:none; border-bottom:2px solid #e0e0e0; outline:none;46 font-size:36px; color:#9e9e9e;47 }48 .pin-btn {49 width:220px; height:88px; border:2px solid #9cd7db; color:#7CBFC3; background:#ffffff;50 border-radius:12px; font-size:38px; font-weight:700;51 }52 .bullets { padding: 18px 48px; color:#666; font-size:36px; line-height:1.6; }53 .bullets li { margin: 8px 0; }54 .policy {55 margin-top:10px; display:flex; align-items:center; justify-content:space-between;56 padding:36px 48px; background:#fafafa; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;57 font-weight:700; color:#616161; font-size:40px;58 }59 60 .heading {61 padding:40px 48px 12px 48px; font-size:48px; font-weight:800; color:#263238;62 }63 64 .products-row { display:flex; align-items:flex-start; gap:40px; padding:20px 48px 12px 48px; }65 .product-card {66 width:440px;67 }68 .img {69 width:100%; height:260px; background:#E0E0E0; border:1px solid #BDBDBD;70 display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px;71 }72 .title { font-size:36px; color:#263238; margin-top:18px; line-height:1.3; }73 .price-row { margin-top:12px; display:flex; align-items:baseline; gap:16px; }74 .price { font-size:44px; font-weight:800; }75 .old { font-size:34px; color:#9e9e9e; text-decoration:line-through; }76 .off { font-size:36px; color:#09a44b; font-weight:800; margin-top:6px; }77 78 .view-more {79 margin-left:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding-right:48px;80 min-width:220px;81 }82 .view-text { font-size:38px; color:#616161; }83 .circle-arrow {84 width:160px; height:160px; border-radius:50%; border:2px solid #d3d3d3; display:flex; align-items:center; justify-content:center;85 }86 87 .subheading { padding:36px 48px 8px 48px; font-size:46px; font-weight:800; color:#263238; }88 89 .products-row.small .product-card { width:360px; }90 .products-row.small .img { height:220px; }91 92 .bottom-bar {93 position:absolute; left:0; right:0; bottom:48px; height:136px;94 display:flex; box-shadow:0 -2px 10px rgba(0,0,0,0.08);95 }96 .bb-left, .bb-right { flex:1; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:44px; }97 .bb-left { background:#ffffff; color:#ff6d00; border-top:1px solid #ffe0c2; }98 .bb-right { background: linear-gradient(90deg, #ff8a00, #ff4f7b); color:#ffffff; }99 .safe-area { position:absolute; left:0; right:0; bottom:0; height:48px; background:#000; border-top-left-radius:16px; border-top-right-radius:16px; opacity:0.85; }100 .divider { height:16px; background:#eeeeee; margin:24px 0; }101 102 /* Small helpers */103 .muted { color:#9e9e9e; }104</style>105</head>106<body>107<div id="render-target">108 <!-- Status bar -->109 <div class="statusbar">110 <div style="display:flex; align-items:center; gap:28px;">111 <span style="font-size:42px;">12:08</span>112 </div>113 <div style="display:flex; align-items:center; gap:26px;">114 <!-- Placeholder status icons -->115 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" opacity="0.25"/></svg>116 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M3 18h18l-9-12-9 12z"/></svg>117 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><rect x="5" y="6" width="14" height="12" rx="2"/></svg>118 </div>119 </div>120 121 <!-- Toolbar -->122 <div class="toolbar">123 <div class="left icon-btn back">124 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#159CA6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">125 <polyline points="15 18 9 12 15 6"></polyline>126 </svg>127 </div>128 <div class="right">129 <div class="icon-btn search">130 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#30AEB6" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">131 <circle cx="11" cy="11" r="7"></circle>132 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>133 </svg>134 </div>135 <div class="icon-btn cart" style="position:relative;">136 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#30AEB6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">137 <circle cx="9" cy="21" r="1.8"></circle>138 <circle cx="18" cy="21" r="1.8"></circle>139 <path d="M5 6h2l1.5 9h9l1.5-7H7.2"></path>140 </svg>141 </div>142 </div>143 </div>144 <div class="cart-badge">1</div>145 146 <!-- Pincode -->147 <div class="pincode">148 <div class="pin-row">149 <input class="pin-input" placeholder="Enter pincode to check delivery" />150 <button class="pin-btn">Check</button>151 </div>152 </div>153 154 <!-- Delivery bullets -->155 <ul class="bullets">156 <li>Cash on Delivery Maybe Available</li>157 <li>Delivery in 2-5 business days</li>158 </ul>159 160 <!-- Policy strip -->161 <div class="policy">162 <div>No Returns & Replacement</div>163 <div>164 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2">165 <circle cx="12" cy="12" r="10"></circle>166 <line x1="12" y1="8" x2="12" y2="12"></line>167 <circle cx="12" cy="16" r="1.3" fill="#9e9e9e" stroke="none"></circle>168 </svg>169 </div>170 </div>171 172 <!-- Best Selling -->173 <div class="heading">Best Selling Products in Television Bestsellers</div>174 <div class="products-row">175 <div class="product-card">176 <div class="img">[IMG: Television Product]</div>177 <div class="title">7 cm (55) Ultra HD S...</div>178 <div class="price-row">179 <div class="price">₹41,819</div>180 <div class="old">₹54,900</div>181 </div>182 <div class="off">23% off</div>183 </div>184 185 <div class="product-card">186 <div class="img">[IMG: Samsung Crystal UHD TV]</div>187 <div class="title">Samsung Crystal Ultra Hd 4k Smart Tv L...</div>188 <div class="price-row">189 <div class="price">₹41,819</div>190 <div class="old">₹54,900</div>191 </div>192 <div class="off">23% off</div>193 </div>194 195 <div class="view-more">196 <div class="view-text">View More</div>197 <div class="circle-arrow">198 <svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">199 <polyline points="9 18 15 12 9 6"></polyline>200 </svg>201 </div>202 </div>203 </div>204 205 <div class="divider"></div>206 207 <!-- More Products -->208 <div class="subheading">More Products with min 20% Off</div>209 <div class="products-row small">210 <div class="product-card">211 <div class="img">[IMG: 4K Smart TV Box]</div>212 <div class="title">New Mxq 4k Smart</div>213 </div>214 <div class="product-card">215 <div class="img">[IMG: Inverter Device]</div>216 <div class="title">Inverters 875va</div>217 </div>218 <div class="product-card">219 <div class="img">[IMG: Lithium Batteries Pack]</div>220 <div class="title">30 Pcs Micro Cells</div>221 </div>222 </div>223 224 <!-- Bottom sticky bar -->225 <div class="bottom-bar">226 <div class="bb-left">SHOP MORE</div>227 <div class="bb-right">GO TO CART</div>228 </div>229 <div class="safe-area"></div>230</div>231</body>232</html>