GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Amazon iPhone 15 Listing - Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background: linear-gradient(180deg, #b9e5df 0%, #c6ebe3 40%, #ffffff 40%, #ffffff 100%);10 }11 /* Status bar */12 .status-bar {13 position:absolute; top:0; left:0; width:100%; height:80px; padding:0 36px;14 display:flex; align-items:center; justify-content:space-between; color:#1a1a1a;15 font-size:34px; letter-spacing:0.5px;16 }17 .status-icons { display:flex; gap:24px; align-items:center; }18 .icon-dot { width:26px; height:26px; border-radius:50%; background:#333; opacity:0.85; }19 .icon-battery { width:38px; height:22px; border:3px solid #333; border-radius:4px; position:relative; }20 .icon-battery::after { content:""; position:absolute; right:-8px; top:5px; width:6px; height:12px; background:#333; border-radius:2px; }21 .icon-battery .level { position:absolute; left:2px; top:2px; height:16px; width:24px; background:#46c37b; }22 /* Header with search */23 .header {24 position:absolute; top:80px; left:0; width:100%; height:160px; display:flex; align-items:center; padding:0 24px; gap:20px;25 }26 .btn-back {27 width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center;28 background:transparent;29 }30 .btn-back svg { width:44px; height:44px; fill:#222; }31 .search-bar {32 flex:1; height:96px; background:#fff; border-radius:48px; box-shadow:0 2px 6px rgba(0,0,0,0.15);33 display:flex; align-items:center; padding:0 28px; gap:22px;34 }35 .search-bar svg { width:42px; height:42px; fill:#777; }36 .search-input {37 flex:1; font-size:38px; color:#111;38 }39 .camera-btn {40 width:84px; height:84px; border-radius:42px; display:flex; align-items:center; justify-content:center;41 background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.15);42 }43 .camera-btn svg { width:42px; height:42px; fill:#333; }44 45 /* Content area */46 .content {47 position:absolute; top:240px; left:0; width:100%; bottom:140px; overflow-y:auto; padding:24px;48 box-sizing:border-box;49 }50 .card {51 display:flex; gap:24px; background:#fff; border-radius:18px; padding:18px; margin-bottom:28px;52 border:1px solid #e6e6e6;53 }54 .product-img {55 width:280px; height:360px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;56 display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; font-size:28px;57 }58 .details { flex:1; }59 .brand { font-size:36px; color:#222; font-weight:600; margin-bottom:8px; }60 .title { font-size:36px; color:#111; margin-bottom:10px; }61 .rating { display:flex; align-items:center; gap:12px; margin:6px 0 14px; }62 .stars { color:#f5a623; font-size:32px; }63 .reviews { color:#666; font-size:28px; }64 65 .pill-deal {66 display:inline-block; background:#b03629; color:#fff; padding:10px 16px; border-radius:12px; font-size:28px; margin:10px 0;67 }68 .price-row { display:flex; align-items:flex-end; gap:18px; margin:12px 0; }69 .price { font-size:44px; font-weight:700; color:#222; }70 .mrp { font-size:30px; color:#777; text-decoration:line-through; }71 .off { font-size:30px; color:#1f8f2f; }72 .subtext { font-size:28px; color:#666; margin-top:6px; }73 .prime { display:inline-flex; align-items:center; gap:12px; font-size:30px; color:#0a73e8; font-weight:700; margin-top:14px; }74 .check {75 width:28px; height:28px; border-radius:50%; background:#0a73e8; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:22px;76 }77 .freedelivery { font-size:30px; color:#111; margin-top:10px; }78 .service { font-size:30px; color:#666; margin-top:8px; }79 .link { font-size:30px; color:#1976d2; text-decoration:underline; margin-top:8px; }80 81 .swatches { display:flex; align-items:center; gap:18px; margin-top:14px; }82 .swatch { width:64px; height:64px; border-radius:50%; border:2px solid #cfcfcf; }83 .swatch.dark { background:#3a3a3a; }84 .swatch.light { background:#e8e8e8; }85 .swatch.green { background:#d9e3cf; }86 .swatch.pink { background:#e7c9c9; }87 .plus { font-size:32px; color:#444; margin-left:8px; }88 89 /* Bottom nav */90 .bottom-nav {91 position:absolute; left:0; bottom:0; width:100%; height:140px; background:#f7f7f7; border-top:1px solid #ddd;92 display:flex; align-items:center; justify-content:space-around;93 }94 .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; color:#222; font-size:26px; }95 .nav-item svg { width:52px; height:52px; fill:#333; }96 .nav-item.active { color:#0a73e8; }97 .nav-item.active svg { fill:#0a73e8; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div>9:56</div>106 <div class="status-icons">107 <div class="icon-dot"></div>108 <div class="icon-battery"><div class="level"></div></div>109 </div>110 </div>111 112 <!-- Header with search -->113 <div class="header">114 <div class="btn-back">115 <svg viewBox="0 0 24 24">116 <path d="M15.5 4.5L6 12l9.5 7.5v-3.8L9.7 12l5.8-3.7V4.5z"></path>117 </svg>118 </div>119 120 <div class="search-bar">121 <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 105 12l5 5-1.5 1.5-5-5A7 7 0 1010 3z"></path></svg>122 <div class="search-input">iphone 15</div>123 <svg viewBox="0 0 24 24"><path d="M9 4h6l2 2h3v12H4V6h3l2-2zm3 4a4 4 0 110 8 4 4 0 010-8z"></path></svg>124 </div>125 126 <div class="camera-btn">127 <svg viewBox="0 0 24 24"><path d="M9 4h6l2 2h5v14H2V6h5l2-2zm3 5a5 5 0 110 10 5 5 0 010-10z"></path></svg>128 </div>129 </div>130 131 <!-- Content list -->132 <div class="content">133 134 <!-- Card 1 -->135 <div class="card">136 <div class="product-img">[IMG: iPhone 15 front/back]</div>137 <div class="details">138 <div class="pill-deal">Limited time deal</div>139 <div class="price-row">140 <div class="price">₹58,999</div>141 <div class="mrp">M.R.P: ₹69,900</div>142 <div class="off">(16% off)</div>143 </div>144 <div class="subtext">Save extra with No Cost EMI</div>145 <div class="prime">146 <div class="check">✓</div> prime147 </div>148 <div class="freedelivery">FREE delivery Wed, 10 Jan</div>149 <div class="service">Service: Setup at delivery</div>150 <div class="link">+4 colours/patterns</div>151 </div>152 </div>153 154 <!-- Card 2 -->155 <div class="card">156 <div class="product-img">[IMG: iPhone 15 - Black]</div>157 <div class="details">158 <div class="brand">Apple</div>159 <div class="title">iPhone 15 (128 GB) - Black</div>160 <div class="rating">161 <div class="stars">★ ★ ★ ★ ★</div>162 <div class="reviews">(467)</div>163 </div>164 <div class="price-row">165 <div class="price">₹72,990</div>166 <div class="mrp">M.R.P: ₹79,900</div>167 <div class="off">(9% off)</div>168 </div>169 <div class="subtext">Save extra with No Cost EMI</div>170 <div class="prime"><div class="check">✓</div> prime</div>171 <div class="freedelivery">FREE delivery Wed, 10 Jan</div>172 <div class="subtext">Or fastest delivery Tomorrow, 9 Jan</div>173 <div class="service">Service: Setup at delivery</div>174 <div class="swatches">175 <div class="swatch dark"></div>176 <div class="swatch light"></div>177 <div class="swatch green"></div>178 <div class="swatch pink"></div>179 <div class="plus">+1</div>180 </div>181 </div>182 </div>183 184 <!-- Card 3 -->185 <div class="card">186 <div class="product-img">[IMG: iPhone 15 - Black (256 GB)]</div>187 <div class="details">188 <div class="brand">Apple</div>189 <div class="title">iPhone 15 (256 GB) - Black</div>190 <div class="rating">191 <div class="stars">★ ★ ★ ★ ★</div>192 <div class="reviews">(467)</div>193 </div>194 <div class="pill-deal">Limited time deal</div>195 <div class="price-row">196 <div class="price">₹83,999</div>197 <div class="mrp">M.R.P: ₹89,900</div>198 <div class="off">(7% off)</div>199 </div>200 <div class="subtext">Save extra with No Cost EMI</div>201 <div class="prime"><div class="check">✓</div> prime</div>202 <div class="freedelivery">FREE delivery Wed, 10 Jan</div>203 <div class="subtext">Or fastest delivery Tomorrow, 9 Jan</div>204 <div class="service">Service: Setup at delivery</div>205 <div class="swatches">206 <div class="swatch dark"></div>207 <div class="swatch light"></div>208 <div class="swatch green"></div>209 <div class="swatch pink"></div>210 <div class="plus">+1</div>211 </div>212 </div>213 </div>214 215 </div>216 217 <!-- Bottom navigation -->218 <div class="bottom-nav">219 <div class="nav-item active">220 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"></path></svg>221 <div>Home</div>222 </div>223 <div class="nav-item">224 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9v-2a7 7 0 0114 0v2H5z"></path></svg>225 <div>You</div>226 </div>227 <div class="nav-item">228 <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm0 6h16v4H4v-4zm0 6h16v4H4v-4z"></path></svg>229 <div>More</div>230 </div>231 <div class="nav-item">232 <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 10H8L7 6zm-1 14a2 2 0 110-4 2 2 0 010 4zm10 0a2 2 0 110-4 2 2 0 010 4z"></path></svg>233 <div>Cart</div>234 </div>235 <div class="nav-item">236 <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"></path></svg>237 <div>Menu</div>238 </div>239 </div>240 241</div>242</body>243</html>