GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon - Oatmeal 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, #b9e1d9 0%, #cdebe5 100%);10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:110px;15 display:flex; align-items:center; justify-content:space-between;16 padding:0 40px; color:#1a1a1a; font-weight:600; font-size:34px;17 }18 .status-icons { display:flex; gap:28px; align-items:center; }19 .dot { width:20px; height:20px; border-radius:50%; background:#4b4b4b; }20 .wifi { width:36px; height:26px; border:3px solid #333; border-radius:6px; position:relative; }21 .wifi:after { content:''; position:absolute; right:4px; top:4px; width:20px; height:18px; background:#333; border-radius:2px; }22 23 /* Search header */24 .search-header {25 position:absolute; top:110px; left:0; width:100%; height:160px; display:flex; align-items:center;26 padding:0 30px; box-sizing:border-box;27 }28 .back-btn {29 width:90px; height:90px; display:flex; align-items:center; justify-content:center; margin-right:20px;30 }31 .search-box {32 flex:1; height:120px; background:#fff; border-radius:28px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);33 display:flex; align-items:center; padding:0 26px; gap:22px; box-sizing:border-box;34 border:1px solid #d9d9d9;35 }36 .search-input { flex:1; font-size:40px; color:#222; }37 .cam-btn { width:90px; height:90px; border-radius:18px; display:flex; align-items:center; justify-content:center; }38 39 /* Location row */40 .location-row {41 position:absolute; top:270px; left:0; width:100%; height:110px;42 display:flex; align-items:center; padding:0 40px; box-sizing:border-box; gap:24px;43 color:#1f2a2a; font-size:36px; font-weight:600;44 }45 .loc-pin {46 width:40px; height:40px; border-radius:50%; background:#2e6b5f; position:relative;47 }48 .loc-pin:after { content:''; position:absolute; left:13px; top:13px; width:14px; height:14px; background:#fff; border-radius:50%; }49 50 .dropdown { margin-left:auto; display:flex; align-items:center; gap:10px; }51 .caret { width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:12px solid #2f3e3e; }52 53 /* Prime & Filters row */54 .filter-row {55 position:absolute; top:370px; left:0; width:100%; height:110px; display:flex; align-items:center;56 padding:0 40px; box-sizing:border-box;57 }58 .prime-toggle { display:flex; align-items:center; gap:18px; color:#f3a935; font-weight:700; font-size:36px; }59 .toggle {60 width:100px; height:56px; border-radius:28px; background:#e8e8e8; position:relative;61 box-shadow: inset 0 0 0 2px #cfcfcf;62 }63 .toggle:after { content:''; position:absolute; left:6px; top:6px; width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.2); }64 .filters-btn { margin-left:auto; display:flex; align-items:center; gap:18px; font-size:36px; color:#2f3e3e; }65 .filters-btn .caret { border-top-color:#2f3e3e; }66 67 /* Notice */68 .notice {69 position:absolute; top:480px; left:0; width:100%; color:#666; font-size:32px;70 padding:0 40px; box-sizing:border-box;71 }72 73 /* Product card */74 .card {75 position:absolute; left:30px; right:30px; background:#fff; border-radius:24px; box-shadow:0 6px 16px rgba(0,0,0,0.08);76 padding:26px; box-sizing:border-box;77 border:1px solid #e5e5e5;78 }79 .card .sponsored { color:#6b6b6b; font-size:28px; margin-bottom:14px; }80 .card-content { display:flex; gap:26px; }81 .product-img {82 width:260px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;83 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:12px;84 }85 .product-info { flex:1; }86 .title { font-size:38px; font-weight:700; color:#1c1c1c; line-height:1.28; }87 .chips { display:flex; gap:16px; margin:18px 0; flex-wrap:wrap; }88 .chip {89 border:1px solid #cfd8dc; color:#2f3e3e; padding:12px 18px; border-radius:18px; font-size:28px; background:#f7fbfb;90 }91 .rating { display:flex; align-items:center; gap:14px; font-size:30px; color:#1f2a2a; margin:6px 0 8px 0; }92 .stars { display:flex; gap:4px; }93 .star { width:30px; height:30px; fill:#f5a623; }94 .subtext { color:#5b5b5b; font-size:28px; }95 .price { margin-top:12px; font-size:46px; font-weight:800; color:#111; display:flex; align-items:flex-end; gap:12px; }96 .perkg { font-size:28px; color:#666; }97 .deal-badge {98 display:inline-block; background:#8b2b15; color:#fff; padding:10px 16px; border-radius:10px; font-size:30px; margin:10px 0;99 }100 .prime-row { display:flex; align-items:center; gap:14px; margin-top:16px; color:#3f3f3f; font-size:30px; }101 .prime-logo { color:#f3a935; font-weight:800; }102 .free-delivery { color:#6b6b6b; font-size:28px; margin-top:6px; }103 104 /* Bottom navigation */105 .bottom-nav {106 position:absolute; bottom:0; left:0; width:100%; height:160px; background:#fff;107 display:flex; align-items:center; justify-content:space-around; border-top:1px solid #ddd;108 }109 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; font-size:32px; }110 .nav-icon { width:60px; height:60px; }111 .active-dot {112 position:absolute; bottom:180px; left:50%; transform:translateX(-50%);113 width:520px; height:14px; background:#cfcfcf; border-radius:7px;114 }115 116 /* positions of cards */117 #card1 { top:560px; }118 #card2 { top:980px; }119 /* Next cards space demonstration (not rendered) */120 121</style>122</head>123<body>124<div id="render-target">125 126 <!-- Status bar -->127 <div class="status-bar">128 <div>9:02</div>129 <div class="status-icons">130 <div class="dot"></div>131 <div class="wifi"></div>132 </div>133 </div>134 135 <!-- Search header -->136 <div class="search-header">137 <div class="back-btn">138 <!-- Back arrow -->139 <svg width="52" height="52" viewBox="0 0 24 24">140 <path d="M15 18l-6-6 6-6" stroke="#1f2a2a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 </div>143 <div class="search-box">144 <!-- Magnifier -->145 <svg width="46" height="46" viewBox="0 0 24 24">146 <circle cx="10" cy="10" r="7" stroke="#4a4a4a" stroke-width="2" fill="none"/>147 <path d="M21 21l-6-6" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>148 </svg>149 <div class="search-input">1 Kg Oatmeal</div>150 <!-- Camera icon -->151 <div class="cam-btn">152 <svg width="48" height="48" viewBox="0 0 24 24">153 <rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="#3a3a3a"/>154 <circle cx="12" cy="12" r="4" fill="#fff"/>155 </svg>156 </div>157 </div>158 </div>159 160 <!-- Location row -->161 <div class="location-row">162 <div class="loc-pin"></div>163 <div>Delivering to Delhi 110001 - Update location</div>164 <div class="dropdown">165 <div class="caret"></div>166 </div>167 </div>168 169 <!-- Prime & Filters -->170 <div class="filter-row">171 <div class="prime-toggle">172 ✓prime173 <div class="toggle"></div>174 </div>175 <div class="filters-btn">176 Filters177 <div class="caret"></div>178 </div>179 </div>180 181 <!-- Notice -->182 <div class="notice">Check each product page for other buying options.</div>183 184 <!-- Product Card 1 -->185 <div class="card" id="card1">186 <div class="sponsored">Sponsored</div>187 <div class="card-content">188 <div class="product-img">[IMG: Nestlé Ceregrow Box]</div>189 <div class="product-info">190 <div class="title">NESTLÉ CEREGROW Grain Selection with Nutri-cereal Ragi, Mixed Fruit & Ghee | Tasty &...</div>191 <div class="chips">192 <div class="chip">Fruit</div>193 <div class="chip">300 g (Pack of 1)</div>194 </div>195 <div class="rating">196 4.1197 <div class="stars">198 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>199 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>200 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>201 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>202 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>203 </div>204 <div class="subtext">(306)</div>205 </div>206 <div class="subtext">700+ bought in past month</div>207 <div class="price">₹345 <span class="perkg">(₹1,150/kg)</span></div>208 <div class="subtext">Save 5% more with Subscribe & Save</div>209 <div class="prime-row"><span class="prime-logo">✓ prime</span> Get it by Today, 21 November</div>210 <div class="free-delivery">FREE Delivery over ₹499. Fulfilled by Amazon.</div>211 </div>212 </div>213 </div>214 215 <!-- Product Card 2 -->216 <div class="card" id="card2">217 <div class="sponsored">Sponsored</div>218 <div class="card-content">219 <div class="product-img" style="height:360px;">[IMG: True Elements Oatmeal Jar]</div>220 <div class="product-info">221 <div class="title">True Elements Multigrain Oatmeal 1kg - With 37% Millets (Jowar & Barley) | Overnight Oats | 100%...</div>222 <div class="chips">223 <div class="chip">Multigrain</div>224 <div class="chip">1 kg (Pack of 1)</div>225 </div>226 <div class="rating">227 4.3228 <div class="stars">229 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>230 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>231 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>232 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>233 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.1L18 20l-6-3.7L6 20l1.5-6.9L2 9h7z"/></svg>234 </div>235 <div class="subtext">(997)</div>236 </div>237 <div class="deal-badge">Deal of the Day</div>238 <div class="price">₹556 <span class="perkg">(₹556/kg)</span></div>239 <div class="subtext">M.R.P: ₹695 (20% off)</div>240 <div class="subtext">Receive 1 FREE Peanut Butter 350g on...</div>241 <div class="prime-row"><span class="prime-logo">✓ prime</span> Get it by Today, 21 November</div>242 <div class="free-delivery">FREE Delivery by Amazon</div>243 </div>244 </div>245 </div>246 247 <!-- Bottom navigation indicator -->248 <div class="active-dot"></div>249 250 <!-- Bottom Navigation -->251 <div class="bottom-nav">252 <div class="nav-item">253 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="#2c2c2c"/></svg>254 <div>Home</div>255 </div>256 <div class="nav-item">257 <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#2c2c2c"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="#2c2c2c"/></svg>258 <div>You</div>259 </div>260 <div class="nav-item">261 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="12" fill="#2c2c2c"/><path d="M4 20h16" stroke="#2c2c2c" stroke-width="2"/></svg>262 <div>More</div>263 </div>264 <div class="nav-item">265 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M6 6h15l-2 10H7L6 6z" stroke="#2c2c2c" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#2c2c2c"/><circle cx="18" cy="20" r="2" fill="#2c2c2c"/></svg>266 <div>Cart</div>267 </div>268 <div class="nav-item">269 <svg class="nav-icon" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2" fill="#2c2c2c"/><rect x="3" y="11" width="18" height="2" fill="#2c2c2c"/><rect x="3" y="18" width="18" height="2" fill="#2c2c2c"/></svg>270 <div>Menu</div>271 </div>272 </div>273 274</div>275</body>276</html>