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>Quaker Oats Product Page Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9 #render-target {10 position: relative; overflow: hidden;11 width: 1080px; height: 2400px;12 background: #ffffff;13 }14 /* Status bar */15 .status-bar {16 height: 90px;17 padding: 0 30px;18 display: flex; align-items: center; justify-content: space-between;19 font-size: 36px; color: #1f1f1f;20 }21 .status-right { display: flex; gap: 22px; align-items: center; }22 .dot { width: 10px; height: 10px; background: #333; border-radius: 50%; display: inline-block; }23 /* Header */24 .header {25 height: 200px;26 background: linear-gradient(180deg, #9bd6d5 0%, #cfe9e8 100%);27 padding: 24px 24px 24px 24px;28 box-sizing: border-box;29 }30 .header-row {31 display: flex; align-items: center; gap: 20px;32 }33 .icon-btn {34 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;35 }36 .search-bar {37 flex: 1;38 height: 96px; background: #fff; border-radius: 48px;39 box-shadow: 0 2px 0 #e6e6e6;40 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;41 font-size: 36px; color: #555;42 }43 .search-input-text { flex: 1; color: #111; }44 .scan-btn {45 width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;46 background: #f7f7f7;47 }48 /* Sponsored ad strip */49 .ad-strip {50 height: 150px;51 display: flex; align-items: center;52 padding: 0 24px; box-sizing: border-box;53 border-bottom: 1px solid #ececec;54 background: #ffffff;55 }56 .ad-thumb {57 width: 160px; height: 120px;58 background: #E0E0E0; border: 1px solid #BDBDBD;59 display: flex; align-items: center; justify-content: center;60 color: #757575; font-size: 28px;61 margin-right: 20px;62 }63 .ad-content { flex: 1; }64 .ad-title { font-size: 34px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }65 .price-row { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }66 .price-new { color: #e65100; font-size: 40px; font-weight: 700; }67 .price-old { color: #8d8d8d; text-decoration: line-through; font-size: 34px; }68 .prime-tag { color: #00a8e1; font-size: 32px; font-weight: 700; }69 .sponsored { font-size: 28px; color: #8d8d8d; margin-left: 16px; white-space: nowrap; }70 /* Product info */71 .content {72 padding: 20px 28px;73 }74 .store-row { display: flex; align-items: center; justify-content: space-between; }75 .store-link { color: #1272db; font-size: 34px; }76 .rating { display: flex; align-items: center; gap: 8px; }77 .rating-value { font-size: 32px; color: #444; }78 .rating-stars { display: inline-flex; gap: 4px; }79 .rating-count { font-size: 32px; color: #1272db; margin-left: 8px; }80 .desc { margin-top: 12px; font-size: 32px; color: #555; line-height: 1.35; }81 .choice-row { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }82 .choice-badge {83 display: inline-flex; align-items: center; border-radius: 8px; overflow: hidden;84 background: #2f3640; color: #fff; font-size: 30px;85 }86 .choice-badge .amazon { background: #f0992b; padding: 8px 12px; }87 .choice-badge .text { padding: 8px 14px; }88 .for-text { font-size: 30px; color: #555; margin-left: 14px; }89 /* Image block */90 .image-block {91 position: relative;92 margin-top: 20px;93 padding: 0 40px;94 }95 .product-img {96 width: 100%; height: 1220px;97 background: #E0E0E0; border: 1px solid #BDBDBD;98 display: flex; align-items: center; justify-content: center;99 color: #757575; font-size: 40px; text-align: center;100 }101 .share-btn {102 position: absolute; right: 50px; top: 20px;103 width: 72px; height: 72px; border-radius: 36px; background: #ffffff;104 box-shadow: 0 2px 5px rgba(0,0,0,0.1);105 display: flex; align-items: center; justify-content: center;106 }107 .discount-badge {108 position: absolute; left: 60px; top: 40px;109 width: 160px; height: 160px; border-radius: 80px;110 background: #c63a3a; color: #fff; display: flex; align-items: center; justify-content: center;111 font-size: 34px; font-weight: 700; text-align: center;112 box-shadow: 0 2px 5px rgba(0,0,0,0.15);113 }114 .carousel {115 margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px;116 }117 .dot-page {118 width: 24px; height: 24px; border-radius: 12px; border: 2px solid #9fb9c4;119 background: transparent;120 }121 .dot-page.active { background: #3aa7b2; border-color: #3aa7b2; }122 .play { width: 0; height: 0; border-left: 18px solid #7b8b96; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 10px; }123 /* Bottom navigation */124 .bottom-nav {125 position: absolute; left: 0; right: 0; bottom: 70px;126 height: 170px; background: #ffffff; border-top: 1px solid #e7e7e7;127 display: grid; grid-template-columns: repeat(5, 1fr);128 align-items: center; text-align: center;129 }130 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #222; font-size: 28px; }131 .nav-item.active { color: #3aa7b2; }132 .home-indicator {133 position: absolute; left: 50%; transform: translateX(-50%);134 bottom: 20px; width: 360px; height: 16px; background: #dcdcdc; border-radius: 10px;135 }136 /* Small helpers */137 .muted { color: #7a7a7a; }138 .light { color: #9c9c9c; }139</style>140</head>141<body>142<div id="render-target">143 <!-- Status bar -->144 <div class="status-bar">145 <div>10:14</div>146 <div class="status-right">147 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 8h18v8H3z" fill="#777"/><path d="M5 10h14v4H5z" fill="#fff"/></svg>148 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 9l9-6 9 6v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" fill="#777"/></svg>149 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 8h12v8H6z" fill="#777"/><path d="M18 8l3 3v2l-3 3V8z" fill="#777"/></svg>150 <span class="dot"></span>151 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M5 16a7 7 0 0 1 14 0" stroke="#333" stroke-width="2" fill="none"/><circle cx="12" cy="16" r="2" fill="#333"/></svg>152 </div>153 </div>154 155 <!-- Header with back and search -->156 <div class="header">157 <div class="header-row">158 <div class="icon-btn">159 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>160 </div>161 <div class="search-bar">162 <span class="search-input-text">quaker oats</span>163 <div class="scan-btn">164 <svg width="34" height="34" viewBox="0 0 24 24">165 <path d="M4 8V4h4M16 4h4v4M4 16v4h4M16 20h4v-4" stroke="#555" stroke-width="2" fill="none"/>166 <rect x="7" y="7" width="10" height="10" rx="2" stroke="#555" stroke-width="2" fill="none"/>167 </svg>168 </div>169 </div>170 </div>171 </div>172 173 <!-- Sponsored ad strip -->174 <div class="ad-strip">175 <div class="ad-thumb">[IMG: Oats Pack]</div>176 <div class="ad-content">177 <div class="ad-title">True Elements Rolled Oats 1kg (Buy 1 Get 1 FREE) - ...</div>178 <div class="price-row">179 <span class="price-new">₹560.00</span>180 <span class="price-old">₹800.00</span>181 <span class="prime-tag">prime</span>182 <span class="sponsored">Sponsored</span>183 </div>184 </div>185 </div>186 187 <!-- Product info -->188 <div class="content">189 <div class="store-row">190 <div class="store-link">Visit the Quaker Store</div>191 <div class="rating">192 <span class="rating-value">4.4</span>193 <span class="rating-stars">194 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.7L6 20l1.5-6.8L2 9h7z" fill="#f39c12"/></svg>195 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.7L6 20l1.5-6.8L2 9h7z" fill="#f39c12"/></svg>196 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.7L6 20l1.5-6.8L2 9h7z" fill="#f39c12"/></svg>197 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.7L6 20l1.5-6.8L2 9h7z" fill="#f39c12"/></svg>198 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 20l-6-3.7L6 20l1.5-6.8L2 9h7z" fill="#f1c40f"/></svg>199 </span>200 <span class="rating-count">35,672</span>201 </div>202 </div>203 <div class="desc">204 Quaker Oats 1kg, Rolled Oats Natural Wholegrain, Nutritious Breakfast Cereals, Dalia Porridge, Easy to Cook205 </div>206 <div class="choice-row">207 <div style="display:flex; align-items:center;">208 <div class="choice-badge">209 <div class="amazon">Amazon's</div>210 <div class="text">Choice</div>211 </div>212 <div class="for-text">for "oats 1kg"</div>213 </div>214 </div>215 216 <!-- Product image block -->217 <div class="image-block">218 <div class="discount-badge">10%<br/>off</div>219 <div class="share-btn">220 <svg width="34" height="34" viewBox="0 0 24 24">221 <path d="M18 8l-6 4-6-4v8h12V8z" fill="#555" opacity="0.15"/>222 <circle cx="6" cy="12" r="2" fill="#555"/>223 <circle cx="12" cy="8" r="2" fill="#555"/>224 <circle cx="18" cy="12" r="2" fill="#555"/>225 <path d="M8 11l3-2M13 9l3 2" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>226 </svg>227 </div>228 <div class="product-img">[IMG: Quaker Oats Product Photo]</div>229 <div class="carousel">230 <div class="dot-page active"></div>231 <div class="dot-page"></div>232 <div class="dot-page"></div>233 <div class="dot-page"></div>234 <div class="dot-page"></div>235 <div class="play"></div>236 </div>237 </div>238 </div>239 240 <!-- Bottom navigation -->241 <div class="bottom-nav">242 <div class="nav-item active">243 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="#3aa7b2" stroke-width="2" fill="none"/><path d="M9 21v-6h6v6" stroke="#3aa7b2" stroke-width="2" fill="none"/></svg>244 <div>Home</div>245 </div>246 <div class="nav-item">247 <svg width="44" height="44" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#222" stroke-width="2" fill="none"/><path d="M4 20c1.5-4 6-4 8-4s6.5 0 8 4" stroke="#222" stroke-width="2" fill="none"/></svg>248 <div>You</div>249 </div>250 <div class="nav-item">251 <svg width="44" height="44" viewBox="0 0 24 24"><rect x="4" y="4" width="6" height="6" stroke="#222" stroke-width="2" fill="none"/><rect x="14" y="4" width="6" height="6" stroke="#222" stroke-width="2" fill="none"/><rect x="4" y="14" width="6" height="6" stroke="#222" stroke-width="2" fill="none"/><rect x="14" y="14" width="6" height="6" stroke="#222" stroke-width="2" fill="none"/></svg>252 <div>More</div>253 </div>254 <div class="nav-item">255 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#222" stroke-width="2" fill="none"/><circle cx="9" cy="20" r="2" fill="#222"/><circle cx="17" cy="20" r="2" fill="#222"/></svg>256 <div>Cart</div>257 </div>258 <div class="nav-item">259 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>260 <div>Menu</div>261 </div>262 </div>263 <div class="home-indicator"></div>264</div>265</body>266</html>