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>Product Details - Basmati Rice</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;13 border-radius: 24px;14 box-shadow: 0 8px 24px rgba(0,0,0,0.08);15 }16 17 /* Top gradient header */18 .header {19 position: relative;20 height: 280px;21 background: linear-gradient(90deg, #9EE2D5, #CFEDE7);22 padding: 20px 36px 0 36px;23 box-sizing: border-box;24 }25 26 /* Status bar */27 .status-bar {28 height: 48px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #222;33 font-size: 30px;34 letter-spacing: 0.2px;35 margin-bottom: 16px;36 }37 .status-icons {38 display: flex; align-items: center; gap: 14px;39 }40 .dot { width: 10px; height: 10px; background:#4a4a4a; border-radius:50%; display:inline-block; opacity:0.7; }41 .battery { width: 36px; height: 20px; border: 2px solid #333; border-radius: 4px; position: relative; }42 .battery::after { content:""; position:absolute; right:-6px; top:6px; width:4px; height:8px; background:#333; border-radius:2px; }43 .wifi {44 width: 26px; height: 18px; position: relative;45 }46 .wifi::before, .wifi::after {47 content:""; position:absolute; left:0; right:0; margin:auto; border:2px solid #333; border-top-color:#333; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; border-radius:50%;48 }49 .wifi::before { top:0; width:26px; height:26px; transform:scale(0.7); }50 .wifi::after { top:6px; width:18px; height:18px; transform:scale(0.7); }51 52 /* Search row */53 .search-row { display:flex; align-items:center; gap:24px; }54 .back-btn {55 width: 72px; height: 72px; display:flex; align-items:center; justify-content:center;56 }57 .search-bar {58 flex:1;59 height: 110px;60 background:#fff;61 border-radius: 24px;62 box-shadow: 0 4px 16px rgba(0,0,0,0.15);63 display:flex;64 align-items:center;65 padding: 0 28px;66 box-sizing: border-box;67 gap: 22px;68 }69 .search-icon svg { width: 40px; height: 40px; fill: none; stroke: #4a4a4a; stroke-width: 3; }70 .scan-icon {71 margin-left: auto;72 width: 56px; height: 56px; border: 2px solid #A5A5A5; border-radius: 12px;73 display:flex; align-items:center; justify-content:center; color:#777; font-size: 22px;74 }75 .search-text { font-size: 38px; color:#222; }76 77 /* Tabs */78 .tabs {79 height: 124px;80 display:flex; align-items:flex-end;81 background:#fff;82 border-bottom: 1px solid #e6e6e6;83 }84 .tab {85 padding: 0 36px 22px 36px;86 font-size: 36px; color:#333;87 }88 .tab.active { color:#f08a22; position:relative; }89 .tab.active::after {90 content:""; position:absolute; left:36px; right:36px; bottom:-1px; height:8px; background:#f08a22; border-radius:4px;91 }92 .tab-spacer { margin-left:auto; display:flex; align-items:center; justify-content:center; width:140px; height:100%; background:#f2fbf8; border-left:1px solid #e6e6e6; }93 .up-icon svg { width: 36px; height:36px; fill:#2f7767; }94 95 /* Feature icons row (below tabs) */96 .features {97 display:flex; align-items:center; justify-content:space-between;98 padding: 30px 36px 24px 36px; color:#2878a5;99 border-bottom: 1px solid #eaeaea;100 }101 .feature {102 width: 200px; text-align:center;103 color:#388e3c;104 }105 .feature .icon {106 width: 74px; height:74px; border:2px solid #c9c9c9; border-radius:50%; margin:0 auto 12px auto;107 display:flex; align-items:center; justify-content:center; color:#8c8c8c; font-size: 30px;108 background:#f7f7f7;109 }110 .feature span { font-size: 30px; color:#3a5a7a; }111 112 /* Product details section */113 .section {114 padding: 20px 36px;115 }116 .section h2 {117 font-size: 46px; margin: 18px 0 24px 0; color:#111; font-weight: 700;118 }119 .details-grid {120 display:grid; grid-template-columns: 1.1fr 1.4fr; row-gap: 18px; column-gap: 24px;121 font-size: 34px; color:#333;122 }123 .label { color:#7a7a7a; }124 .value { color:#222; font-weight: 600; }125 .divider { height:1px; background:#e1e1e1; margin: 24px 0; }126 127 .bullet-list { font-size: 34px; color:#1f1f1f; padding-left: 20px; }128 .bullet-list li { margin: 18px 0; }129 .link { color:#0B86EC; font-size: 34px; margin-top: 12px; display:flex; align-items:center; gap: 10px; }130 .chev { transform: rotate(90deg); width: 24px; height: 24px; border-left: 3px solid #555; border-bottom: 3px solid #555; }131 132 /* Frequently bought together */133 .fbt-title { font-size: 44px; font-weight: 700; color:#111; margin: 10px 36px; }134 .bundle-card {135 margin: 18px 36px;136 border: 1px solid #e3e3e3; border-radius: 22px; padding: 24px;137 display:flex; align-items:center; justify-content:center; gap: 28px;138 background:#fff;139 }140 .img-ph {141 width: 220px; height: 260px; background:#E0E0E0; border:1px solid #BDBDBD;142 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 28px; text-align:center; border-radius: 12px;143 }144 .plus { font-size: 54px; color:#777; }145 146 /* Bottom navigation */147 .bottom-nav {148 position:absolute; left:0; right:0; bottom:86px;149 height: 160px; border-top: 1px solid #e6e6e6; background:#ffffff;150 display:flex; align-items:center; justify-content:space-around;151 }152 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; font-size: 28px; color:#5a5a5a; }153 .nav-item .icon svg { width: 48px; height:48px; stroke:#5a5a5a; fill:none; stroke-width:3; }154 .nav-item.active { color:#00a8a0; }155 .nav-item.active .icon svg { stroke:#00a8a0; }156 .gesture {157 position:absolute; left:50%; transform:translateX(-50%); bottom:24px;158 width: 300px; height: 18px; background:#bdbdbd; border-radius: 9px; opacity:0.6;159 }160</style>161</head>162<body>163<div id="render-target">164 <div class="header">165 <div class="status-bar">166 <div style="display:flex; align-items:center; gap:12px;">167 <span>1:06</span>168 <span class="dot"></span>169 <span class="dot"></span>170 <span class="dot"></span>171 <svg width="36" height="36" viewBox="0 0 24 24" style="opacity:0.7;">172 <circle cx="10" cy="10" r="8" fill="none" stroke="#555" stroke-width="2"></circle>173 <path d="M16 16l5 5" stroke="#555" stroke-width="2"></path>174 </svg>175 </div>176 <div class="status-icons">177 <div class="wifi"></div>178 <div class="battery"></div>179 </div>180 </div>181 182 <div class="search-row">183 <div class="back-btn">184 <svg width="42" height="42" viewBox="0 0 24 24">185 <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>186 </svg>187 </div>188 <div class="search-bar">189 <div class="search-icon">190 <svg viewBox="0 0 24 24">191 <circle cx="10" cy="10" r="7"></circle>192 <line x1="15" y1="15" x2="22" y2="22"></line>193 </svg>194 </div>195 <div class="search-text">basmati rice</div>196 <div class="scan-icon">[]</div>197 </div>198 </div>199 </div>200 201 <div class="tabs">202 <div class="tab active">Details</div>203 <div class="tab">Compare</div>204 <div class="tab">Questions</div>205 <div class="tab">Reviews</div>206 <div class="tab-spacer">207 <div class="up-icon">208 <svg viewBox="0 0 24 24">209 <path d="M12 6l6 6H6z" fill="#2f7767"></path>210 </svg>211 </div>212 </div>213 </div>214 215 <div class="features">216 <div class="feature">217 <div class="icon">FD</div>218 <span>Free Delivery</span>219 </div>220 <div class="feature">221 <div class="icon">PO</div>222 <span>Pay on Delivery</span>223 </div>224 <div class="feature">225 <div class="icon">NR</div>226 <span>Non-Returnable</span>227 </div>228 <div class="feature">229 <div class="icon">TB</div>230 <span>Top Brand</span>231 </div>232 <div class="feature">233 <div class="icon">AD</div>234 <span>Amazon Delivery</span>235 </div>236 </div>237 238 <div class="section">239 <h2>Product details</h2>240 <div class="details-grid">241 <div class="label">Brand</div> <div class="value">DAAWAT</div>242 <div class="label">Diet Type</div> <div class="value">Vegetarian</div>243 <div class="label">Number of Items</div> <div class="value">1</div>244 <div class="label">Net Quantity</div> <div class="value">5000.0 gram</div>245 <div class="label">Item Weight</div> <div class="value">5000 Grams</div>246 <div class="label">Package Information</div> <div class="value">Bag</div>247 </div>248 <div class="divider"></div>249 <ul class="bullet-list">250 <li>Zero cholesterol: Good for your heart and cardio vascular functioning</li>251 <li>Whole grain (Lower carbohydrates): Helps in overall health</li>252 <li>Country of Origin: India</li>253 <li>Lower GI: Diabetic friendly</li>254 </ul>255 <div class="link">256 <div class="chev"></div>257 <span>See more product details</span>258 </div>259 </div>260 261 <div class="fbt-title">Frequently bought together</div>262 <div class="bundle-card">263 <div class="img-ph">[IMG: Daawat Basmati Rice Pack]</div>264 <div class="plus">+</div>265 <div class="img-ph">[IMG: Tata Salt Pack]</div>266 <div class="plus">+</div>267 <div class="img-ph">[IMG: Fortune Oil Bottle]</div>268 </div>269 270 <!-- Bottom navigation -->271 <div class="bottom-nav">272 <div class="nav-item active">273 <div class="icon">274 <svg viewBox="0 0 24 24">275 <path d="M3 10l9-7 9 7v10H3V10z" stroke-linejoin="round"></path>276 </svg>277 </div>278 <div>Home</div>279 </div>280 <div class="nav-item">281 <div class="icon">282 <svg viewBox="0 0 24 24">283 <circle cx="12" cy="8" r="4"></circle>284 <path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke-linecap="round"></path>285 </svg>286 </div>287 <div>You</div>288 </div>289 <div class="nav-item">290 <div class="icon">291 <svg viewBox="0 0 24 24">292 <rect x="4" y="4" width="16" height="6" rx="2"></rect>293 <rect x="6" y="12" width="12" height="6" rx="2"></rect>294 </svg>295 </div>296 <div>More</div>297 </div>298 <div class="nav-item">299 <div class="icon">300 <svg viewBox="0 0 24 24">301 <path d="M6 6h15l-2 9H7L6 6z"></path>302 <circle cx="9" cy="20" r="2"></circle>303 <circle cx="17" cy="20" r="2"></circle>304 </svg>305 </div>306 <div>Cart</div>307 </div>308 <div class="nav-item">309 <div class="icon">310 <svg viewBox="0 0 24 24">311 <path d="M4 6h16M4 12h16M4 18h16"></path>312 </svg>313 </div>314 <div>Menu</div>315 </div>316 </div>317 <div class="gesture"></div>318</div>319</body>320</html>