GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Detail UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 color: #111;13 }14 15 /* Status bar */16 .status-bar {17 position: relative;18 height: 110px;19 background: #eeeeee;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 40px;24 font-size: 40px;25 color: #333;26 box-sizing: border-box;27 }28 .status-right {29 display: flex; align-items: center; gap: 24px;30 font-size: 32px; color: #333;31 }32 .icon { width: 40px; height: 40px; display: inline-block; }33 .icon svg { width: 100%; height: 100%; }34 35 /* Content sections */36 .section { padding: 0 40px; box-sizing: border-box; }37 .spec-list { padding-top: 24px; padding-bottom: 24px; }38 .spec-row {39 display: flex; justify-content: space-between; align-items: baseline;40 margin: 28px 0;41 font-size: 40px;42 }43 .spec-row .label { color: #9E9E9E; }44 .read-more { color: #4C5BFF; font-weight: 600; font-size: 40px; margin: 22px 0 30px 0; }45 .details-link {46 display: flex; justify-content: space-between; align-items: center;47 font-size: 44px; font-weight: 600; padding: 30px 0;48 border-top: 1px solid #eaeaea;49 border-bottom: 1px solid #eaeaea;50 }51 .chevron { width: 40px; height: 40px; }52 .section-title {53 font-weight: 800; font-size: 54px; margin: 38px 0 26px 0;54 }55 56 /* Product cards */57 .cards { display: flex; gap: 30px; }58 .card {59 width: 300px;60 }61 .img-plc {62 width: 300px; height: 300px;63 background: #E0E0E0;64 border: 1px solid #BDBDBD;65 display: flex; justify-content: center; align-items: center;66 color: #757575; font-size: 26px; text-align: center;67 }68 .card-title {69 margin-top: 22px;70 font-size: 34px; color: #333;71 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;72 }73 .price-row { margin-top: 10px; font-size: 30px; display: flex; gap: 12px; align-items: baseline; }74 .old-price { color: #9E9E9E; text-decoration: line-through; }75 .new-price { color: #1b5e20; font-weight: 700; }76 .off { color: #1b5e20; font-weight: 700; }77 .rating-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 28px; color: #666; }78 .star { width: 30px; height: 30px; }79 .star svg { width: 100%; height: 100%; }80 81 /* Banner */82 .banner {83 margin: 26px 0;84 height: 170px;85 background: #5B47E7;86 border-radius: 12px;87 color: #fff;88 display: flex; align-items: center; justify-content: space-between;89 padding: 0 40px;90 box-sizing: border-box;91 }92 .banner-left { display: flex; align-items: center; gap: 16px; font-size: 44px; font-weight: 800; }93 .coin { width: 64px; height: 64px; }94 .banner-right { text-align: right; font-size: 34px; line-height: 1.35; opacity: 0.95; }95 96 /* Ratings & reviews */97 .rate-header { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }98 .rate-title { font-size: 52px; font-weight: 800; }99 .rate-btn {100 background: #fff; border: 1px solid #DADADA; border-radius: 14px;101 padding: 22px 28px; font-size: 36px; color: #4C5BFF; box-shadow: 0 2px 6px rgba(0,0,0,0.08);102 }103 .ratings-block {104 display: flex; gap: 30px; align-items: stretch;105 margin-top: 26px; padding-bottom: 60px;106 }107 .summary {108 flex: 1; padding-right: 30px; box-sizing: border-box;109 border-right: 1px solid #E0E0E0;110 }111 .summary .verdict { font-size: 44px; font-weight: 700; color: #555; margin-bottom: 12px; }112 .big-stars { display: flex; gap: 8px; margin: 10px 0 18px; }113 .big-stars .star { width: 40px; height: 40px; }114 .summary .meta { color: #888; font-size: 32px; }115 116 .distribution { flex: 1.2; display: flex; flex-direction: column; gap: 18px; }117 .dist-row { display: flex; align-items: center; gap: 16px; font-size: 34px; color: #333; }118 .bar {119 flex: 1; height: 22px; background: #E6E6E6; border-radius: 12px; overflow: hidden;120 }121 .bar .fill { height: 100%; background: #2E7D32; }122 .count { width: 80px; text-align: right; color: #333; font-size: 34px; }123 .small-star { width: 28px; height: 28px; }124 125 /* Bottom action bar */126 .bottom-bar {127 position: absolute; left: 0; right: 0; bottom: 90px;128 height: 180px; background: #fff;129 box-shadow: 0 -4px 16px rgba(0,0,0,0.08);130 display: flex; align-items: center; justify-content: center; gap: 28px;131 padding: 0 40px; box-sizing: border-box;132 }133 .btn {134 height: 120px; border-radius: 16px; font-size: 44px; font-weight: 700;135 display: flex; align-items: center; justify-content: center; flex: 1;136 }137 .btn-outline {138 border: 2px solid #D6D6D6; color: #4C5BFF; background: #fff;139 }140 .btn-primary {141 background: #4C5BFF; color: #fff; border: none;142 }143 144 /* Gesture bar */145 .gesture {146 position: absolute; left: 50%; transform: translateX(-50%);147 bottom: 20px; width: 240px; height: 12px;148 background: #D1D1D1; border-radius: 6px;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status bar -->156 <div class="status-bar">157 <div>2:34</div>158 <div class="status-right">159 <!-- Do Not Disturb icon (simple circle with minus) -->160 <span class="icon">161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="12" r="10" fill="none" stroke="#555" stroke-width="2"></circle>163 <rect x="6" y="11" width="12" height="2" fill="#555"></rect>164 </svg>165 </span>166 <!-- WiFi icon -->167 <span class="icon">168 <svg viewBox="0 0 24 24">169 <path d="M2 9c5-4 15-4 20 0" fill="none" stroke="#555" stroke-width="2" />170 <path d="M5 12c3-3 11-3 14 0" fill="none" stroke="#555" stroke-width="2" />171 <path d="M8 15c2-2 6-2 8 0" fill="none" stroke="#555" stroke-width="2" />172 <circle cx="12" cy="18" r="1.5" fill="#555"></circle>173 </svg>174 </span>175 <!-- Battery icon -->176 <span class="icon" style="width:46px;">177 <svg viewBox="0 0 26 24">178 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"></rect>179 <rect x="4" y="8" width="14" height="8" fill="#4CAF50"></rect>180 <rect x="20" y="9" width="3" height="6" rx="1" fill="#555"></rect>181 </svg>182 </span>183 <span>98%</span>184 </div>185 </div>186 187 <!-- Specs section -->188 <div class="section spec-list">189 <div class="spec-row">190 <div class="label">color</div>191 <div class="value">White</div>192 </div>193 <div class="spec-row">194 <div class="label">Ideal For</div>195 <div class="value">Men</div>196 </div>197 <div class="read-more">Read More</div>198 199 <div class="details-link">200 <div>All Details</div>201 <div class="chevron">202 <svg viewBox="0 0 24 24">203 <path d="M9 6l6 6-6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>204 </svg>205 </div>206 </div>207 208 <div class="section-title">Similar Value Products</div>209 210 <div class="cards">211 <!-- Card 1 -->212 <div class="card">213 <div class="img-plc">[IMG: White Sneakers on table]</div>214 <div class="card-title">Trending Stylish Cas...</div>215 <div class="price-row">216 <span class="old-price">999</span>217 <span class="new-price">₹289</span>218 <span class="off">71% off</span>219 </div>220 <div class="rating-row">221 <span class="star">222 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>223 </span>224 <span class="star">225 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>226 </span>227 <span class="star">228 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>229 </span>230 <span class="star">231 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>232 </span>233 <span class="star">234 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#CFCFCF"/></svg>235 </span>236 <span>(445)</span>237 </div>238 </div>239 240 <!-- Card 2 -->241 <div class="card">242 <div class="img-plc">[IMG: White Sneakers on foot]</div>243 <div class="card-title">Stylish Casual Sneak...</div>244 <div class="price-row">245 <span class="old-price">1,499</span>246 <span class="new-price">₹379</span>247 <span class="off">74% off</span>248 </div>249 <div class="rating-row">250 <span class="star">251 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>252 </span>253 <span class="star">254 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>255 </span>256 <span class="star">257 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>258 </span>259 <span class="star">260 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>261 </span>262 <span class="star">263 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#CFCFCF"/></svg>264 </span>265 <span>(4)</span>266 </div>267 </div>268 269 <!-- Card 3 -->270 <div class="card">271 <div class="img-plc">[IMG: White Sneakers close-up]</div>272 <div class="card-title">Sneakers For Men</div>273 <div class="price-row">274 <span class="old-price">1,999</span>275 <span class="new-price">₹388</span>276 <span class="off">80% off</span>277 </div>278 <div class="rating-row">279 <span class="star">280 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>281 </span>282 <span class="star">283 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>284 </span>285 <span class="star">286 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>287 </span>288 <span class="star">289 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg>290 </span>291 <span class="star">292 <svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#CFCFCF"/></svg>293 </span>294 <span>(1)</span>295 </div>296 </div>297 </div>298 299 <!-- Banner -->300 <div class="banner">301 <div class="banner-left">302 <span class="coin">303 <svg viewBox="0 0 64 64">304 <circle cx="32" cy="32" r="28" fill="#FFD54F"></circle>305 <path d="M20 32h24" stroke="#9C6F00" stroke-width="6" stroke-linecap="round"/>306 </svg>307 </span>308 <span>Super Coin</span>309 </div>310 <div class="banner-right">311 <div>Earn SuperCoin on every purchase</div>312 <div>Redeem on your next orders</div>313 </div>314 </div>315 316 <!-- Ratings & Reviews -->317 <div class="rate-header">318 <div class="rate-title">Ratings & Reviews</div>319 <div class="rate-btn">Rate Product</div>320 </div>321 322 <div class="ratings-block">323 <div class="summary">324 <div class="verdict">Good</div>325 <div class="big-stars">326 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg></span>327 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg></span>328 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg></span>329 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#2E7D32"/></svg></span>330 <span class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4.2L18 22l-6-4-6 4 1.5-8.8L2 9h7z" fill="#CFCFCF"/></svg></span>331 </div>332 <div class="meta">170 ratings and 24 reviews</div>333 </div>334 335 <div class="distribution">336 <div class="dist-row">337 <div>5★</div>338 <div class="bar"><div class="fill" style="width:89%;"></div></div>339 <div class="count">89</div>340 </div>341 <div class="dist-row">342 <div>4★</div>343 <div class="bar"><div class="fill" style="width:38%; background:#63A355;"></div></div>344 <div class="count">38</div>345 </div>346 <div class="dist-row">347 <div>3★</div>348 <div class="bar"><div class="fill" style="width:9%; background:#6CB26B;"></div></div>349 <div class="count">9</div>350 </div>351 <div class="dist-row">352 <div>2★</div>353 <div class="bar"><div class="fill" style="width:15%; background:#6BB96F;"></div></div>354 <div class="count">15</div>355 </div>356 <div class="dist-row">357 <div>1★</div>358 <div class="bar"><div class="fill" style="width:19%; background:#74C177;"></div></div>359 <div class="count">19</div>360 </div>361 </div>362 </div>363 364 </div>365 366 <!-- Bottom actions -->367 <div class="bottom-bar">368 <div class="btn btn-outline">Add to cart</div>369 <div class="btn btn-primary">Buy Now</div>370 </div>371 372 <!-- Gesture handle -->373 <div class="gesture"></div>374</div>375</body>376</html>