GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Amazon - iPhone 15 Search</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, #bfe7dc 0%, #c7edf0 100%);10 color:#111;11 }12 .status-bar{13 height:72px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;14 font-weight:600; color:#1b1b1b; font-size:32px;15 }16 .status-right{ display:flex; gap:24px; align-items:center; }17 /* Top search area */18 .search-row{19 padding:16px 24px 20px; display:flex; align-items:center; gap:18px;20 }21 .icon-btn{22 width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;23 }24 .search-field{25 flex:1; height:96px; border-radius:24px; background:#fff; display:flex; align-items:center; padding:0 24px;26 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;27 border:1px solid #d9d9d9;28 }29 .search-chip-text{ color:#222; font-size:36px; font-weight:600; margin-left:14px; }30 .search-right{ margin-left:auto; opacity:.85; }31 /* Location bar */32 .location-row{33 margin:0 0 8px; padding:14px 24px; display:flex; align-items:center; gap:18px; color:#1d2e2b;34 border-top:1px solid rgba(0,0,0,0.05);35 }36 .location-row .text{ font-size:34px; }37 .chip-row{38 display:flex; align-items:center; gap:18px; padding:12px 24px 10px;39 }40 .prime-toggle{41 display:flex; align-items:center; gap:8px; font-size:30px; color:#0f1111;42 }43 .toggle{44 width:84px; height:44px; background:#efefef; border-radius:28px; position:relative; border:1px solid #d0d0d0;45 }46 .toggle::after{47 content:""; position:absolute; left:4px; top:4px; width:36px; height:36px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.2);48 }49 .pill{50 padding:14px 26px; background:#eaf5ff; color:#0a5; border-radius:24px; border:1px solid #cfe6ff; font-weight:700; font-size:30px;51 }52 .filter-pill{53 margin-left:auto; padding:14px 26px; border-radius:20px; border:1px solid #d1d1d1; background:#fff; font-size:30px;54 display:flex; align-items:center; gap:12px; color:#0f1111;55 }56 .section-title{ padding:18px 24px 0; font-size:46px; font-weight:800; color:#0f1111; }57 .sponsored{ padding:6px 24px; font-size:28px; color:#5f6b70; display:flex; align-items:center; gap:10px; }58 .promo-row{ display:flex; gap:26px; padding:10px 24px 4px; }59 .promo-card{60 width:320px; height:240px; background:#fff; border-radius:16px; border:1px solid #ddd; padding:12px;61 display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:center;62 }63 .img{64 width:100%; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center;65 }66 .big-card{67 flex:1; background:#fff; border:1px solid #ddd; border-radius:16px; padding:12px;68 }69 .deal-tag{70 display:inline-block; background:#a33a1e; color:#fff; padding:10px 18px; border-radius:10px; font-weight:700; font-size:30px;71 }72 .price-line{ font-size:46px; font-weight:800; margin-top:10px; display:flex; align-items:center; gap:12px; }73 .mrp{ color:#666; text-decoration:line-through; font-weight:600; font-size:30px; margin-top:6px; }74 .off{ color:#444; font-size:30px; }75 /* Amazon Choice big list card */76 .choice-banner{77 position:relative; height:56px; margin:18px 24px 0;78 }79 .choice-pill{80 position:absolute; left:0; top:0; background:#0f3329; color:#fff; padding:12px 20px; border-radius:12px;81 font-weight:800; font-size:30px;82 }83 .list-card{84 margin:12px 24px; background:#fff; border:1px solid #dedede; border-radius:18px; display:flex; gap:18px; padding:18px;85 }86 .product-thumb{ width:290px; height:360px; border-radius:12px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; }87 .p-details{ flex:1; }88 .spon{ color:#6a737a; font-size:28px; }89 .p-title{ font-size:40px; font-weight:800; margin:8px 0 4px; }90 .p-sub{ font-size:34px; color:#1a1a1a; }91 .rating{ display:flex; align-items:center; gap:8px; margin:8px 0; }92 .stars svg{ width:28px; height:28px; fill:#f7a700; }93 .rating .count{ color:#4a4a4a; font-size:30px; }94 .deliver{ margin-top:10px; color:#0f1111; font-size:30px; }95 .prime-badge{96 display:inline-flex; align-items:center; gap:8px; background:#e6f1ff; border:1px solid #cddff9; color:#2b69ff; padding:6px 14px; border-radius:20px; font-weight:800; font-size:28px;97 }98 .link{ color:#0a61c9; text-decoration:underline; font-size:32px; margin-top:12px; display:inline-block; }99 /* Bottom nav */100 .bottom-nav{101 position:absolute; bottom:0; left:0; right:0; height:178px; background:#fff; border-top:1px solid #ddd;102 display:flex; justify-content:space-around; align-items:center;103 }104 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:8px; color:#111; }105 .nav-item.active{ color:#0c6; }106 .nav-item span{ font-size:30px; }107 /* simple chevron */108 .muted{ color:#6a737a; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="status-bar">116 <div>9:52</div>117 <div class="status-right">118 <span>🙂</span>119 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M2 18h20v2H2zM4 14h16v2H4zM6 10h12v2H6zM8 6h8v2H8z" fill="#222"/></svg>120 <svg width="18" height="28" viewBox="0 0 24 24"><path d="M6 2h12l2 3v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5l2-3zm0 3v15h12V5H6z" fill="#222"/></svg>121 </div>122 </div>123 124 <!-- Search row -->125 <div class="search-row">126 <div class="icon-btn">127 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>128 </div>129 <div class="search-field">130 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M21 21l-4.35-4.35M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>131 <div class="search-chip-text">iphone 15</div>132 <div class="search-right">133 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M7 4h10l2 3v10l-2 3H7l-2-3V7l2-3zm5 3a4 4 0 1 0 .001 8.001A4 4 0 0 0 12 7z" fill="#555"/></svg>134 </div>135 </div>136 </div>137 138 <!-- Location -->139 <div class="location-row">140 <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#1f3130"/></svg>141 <div class="text">Delivering to Delhi 110001 - Update location</div>142 <svg width="22" height="22" viewBox="0 0 24 24" style="margin-left:auto;"><path d="M7 10l5 5 5-5" stroke="#1f3130" stroke-width="2" fill="none" stroke-linecap="round"/></svg>143 </div>144 145 <!-- Chips -->146 <div class="chip-row">147 <div class="prime-toggle">148 <svg width="86" height="40" viewBox="0 0 86 24"><text x="0" y="18" font-size="18" fill="#1a75ff">prime</text></svg>149 <div class="toggle"></div>150 </div>151 <div class="pill">Electronics</div>152 <div class="filter-pill">153 <span>Filters (1)</span>154 <svg width="20" height="20" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>155 </div>156 </div>157 158 <!-- Section -->159 <div class="section-title">iPhone 15. Newphoria</div>160 <div class="sponsored">161 <svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#95a0a6" fill="none"/></svg>162 <span>Sponsored</span>163 </div>164 165 <div class="promo-row">166 <div class="promo-card">167 <div class="img">[IMG: Apple iPhone logo]</div>168 <div class="muted" style="font-size:30px;">Shop Apple</div>169 </div>170 <div class="big-card">171 <div class="img" style="height:180px;">[IMG: iPhone 15 front and back]</div>172 <div class="deal-tag">Limited time Deal</div>173 <div class="price-line">₹83,999 <span class="prime-badge">prime</span></div>174 <div class="mrp">₹89,900 <span class="off">(7% off)</span></div>175 </div>176 </div>177 178 <!-- Amazon's Choice -->179 <div class="choice-banner">180 <div class="choice-pill">Amazon's Choice</div>181 </div>182 183 <div class="list-card">184 <div class="product-thumb">[IMG: iPhone 15 - Blue]</div>185 <div class="p-details">186 <div class="spon">Sponsored</div>187 <div class="p-title">Apple</div>188 <div class="p-sub">iPhone 15 (128 GB) - Blue</div>189 <div class="rating">190 <div style="font-size:34px; font-weight:800; color:#0a61c9; margin-right:6px;">4.5</div>191 <div class="stars">192 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z"/></svg>193 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z"/></svg>194 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z"/></svg>195 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z"/></svg>196 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#ddd"/></svg>197 </div>198 <div class="count">(467)</div>199 </div>200 <div class="price-line">₹72,990</div>201 <div class="mrp">M.R.P: ₹79,900 <span class="off">(9% off)</span></div>202 <div>203 <span class="prime-badge">prime</span>204 </div>205 <div class="deliver">FREE delivery Wed, 10 Jan</div>206 <div class="deliver">Or fastest delivery Tomorrow, 9 Jan</div>207 <div class="muted" style="font-size:30px; margin-top:8px;">Service: Setup at delivery</div>208 <a class="link">+4 colours/patterns</a>209 </div>210 </div>211 212 <!-- Next list card (partial) -->213 <div class="list-card" style="margin-bottom:200px;">214 <div class="product-thumb">[IMG: iPhone 14 - Midnight]</div>215 <div class="p-details">216 <div class="spon">Sponsored</div>217 <div class="p-title">Apple</div>218 <div class="p-sub">iPhone 14 (128 GB) - Midnight</div>219 <div class="rating">220 <div class="stars">221 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#f7a700"/></svg>222 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#f7a700"/></svg>223 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#f7a700"/></svg>224 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#f7a700"/></svg>225 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 1.5-6.5L2 8l6.5-.5L12 2l3.5 5.5L22 8l-5.5 5.5L18 20z" fill="#ddd"/></svg>226 </div>227 </div>228 <div class="price-line">₹XX,XXX</div>229 <div class="prime-badge">prime</div>230 </div>231 </div>232 233 <!-- Bottom Navigation -->234 <div class="bottom-nav">235 <div class="nav-item active">236 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#0c6"/></svg>237 <span>Home</span>238 </div>239 <div class="nav-item">240 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z" fill="#111"/></svg>241 <span>You</span>242 </div>243 <div class="nav-item">244 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 3h18v4H3V3zm2 6h14v12H5V9zm3 2v8h8v-8H8z" fill="#111"/></svg>245 <span>More</span>246 </div>247 <div class="nav-item">248 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M7 4h-2l-1 2H1v2h2l3.6 7.59L5.25 18A2 2 0 0 0 7 21h12v-2H7.42a.25.25 0 0 1-.23-.14l.03-.06L8.1 16h8.9a2 2 0 0 0 1.8-1.11L21 9H6.42l-.94-2H7V4z" fill="#111"/></svg>249 <span>Cart</span>250 </div>251 <div class="nav-item">252 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="#111"/></svg>253 <span>Menu</span>254 </div>255 </div>256 257</div>258</body>259</html>