GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Product Details UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 32px;15 box-shadow: 0 12px 30px rgba(0,0,0,0.12);16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 160px;24 background: #2e2430;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 font-size: 40px;30 box-sizing: border-box;31 letter-spacing: 0.5px;32 }33 .sb-left { font-weight: 600; }34 .sb-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }35 .icon { width: 40px; height: 40px; }36 .battery {37 display: inline-flex; align-items: center; gap: 10px; font-size: 34px;38 }39 .divider-top {40 position: absolute;41 top: 160px;42 left: 0; right: 0;43 height: 4px;44 background: #e9e9e9;45 }46 47 /* Content area */48 .content {49 position: absolute;50 top: 164px;51 left: 0; right: 0;52 bottom: 470px; /* space for CTA + bottom nav */53 overflow: hidden;54 padding: 0 44px;55 box-sizing: border-box;56 }57 58 .page-title {59 font-size: 48px;60 font-weight: 600;61 margin: 36px 0 12px;62 }63 .hr {64 height: 2px;65 background: #e5e5e5;66 margin: 18px 0 24px;67 }68 69 .location-row {70 display: flex;71 justify-content: flex-end;72 align-items: center;73 gap: 16px;74 margin-bottom: 20px;75 }76 .chip {77 display: inline-flex;78 align-items: center;79 gap: 14px;80 border-left: 2px solid #e5e5e5;81 padding: 0 26px;82 font-size: 36px;83 color: #222;84 }85 .pin {86 width: 34px; height: 34px;87 }88 89 .section-title {90 font-size: 52px;91 font-weight: 700;92 margin: 22px 0 28px;93 }94 95 .details-grid {96 display: grid;97 grid-template-columns: 1fr 1fr;98 column-gap: 40px;99 row-gap: 26px;100 font-size: 36px;101 }102 .detail-item { display: grid; grid-template-columns: 52% 48%; }103 .label { color: #777; }104 .value { font-weight: 700; }105 .up-arrow {106 position: absolute;107 right: 30px;108 top: 330px;109 width: 40px; height: 40px;110 }111 112 .section-row {113 display: flex;114 align-items: center;115 justify-content: space-between;116 padding: 32px 0;117 font-size: 44px;118 font-weight: 600;119 border-top: 2px solid #ececec;120 }121 .chev {122 width: 40px; height: 40px;123 }124 125 /* Floating chat */126 .chat-float {127 position: absolute;128 right: 20px;129 top: 1380px;130 display: flex;131 align-items: center;132 gap: 12px;133 }134 .chat-tag {135 background: #ff6f2e;136 color: #fff;137 font-weight: 700;138 font-size: 36px;139 padding: 22px 28px;140 border-radius: 16px;141 box-shadow: 0 8px 18px rgba(255,111,46,0.35);142 }143 .chat-close {144 position: absolute;145 right: 16px;146 top: -10px;147 width: 44px; height: 44px;148 }149 150 /* CTA bar */151 .cta-bar {152 position: absolute;153 left: 0; right: 0; bottom: 260px;154 padding: 28px 44px 34px;155 box-sizing: border-box;156 background: #fff;157 border-top: 2px solid #efefef;158 }159 .cta-actions {160 display: grid;161 grid-template-columns: 1fr 1fr;162 gap: 28px;163 }164 .btn-outline {165 border: 4px solid #ff6f2e;166 color: #ff6f2e;167 font-size: 44px;168 font-weight: 800;169 padding: 34px 24px;170 border-radius: 16px;171 text-align: center;172 }173 .btn-solid {174 background: #ff6f2e;175 color: #fff;176 font-size: 44px;177 font-weight: 800;178 padding: 34px 24px;179 border-radius: 16px;180 text-align: center;181 }182 183 /* Bottom navigation */184 .bottom-nav {185 position: absolute;186 left: 0; right: 0; bottom: 0;187 height: 260px;188 background: #fff;189 border-top: 6px solid #f6f6f6;190 display: grid;191 grid-template-columns: repeat(5, 1fr);192 align-items: center;193 padding: 12px 40px 22px;194 box-sizing: border-box;195 }196 .nav-item {197 display: flex; flex-direction: column;198 align-items: center; justify-content: center;199 gap: 18px;200 color: #7a7a7a;201 font-size: 34px;202 }203 .nav-item.active { color: #ff6f2e; font-weight: 700; }204 .nav-icon { width: 64px; height: 64px; }205 206 /* Safe-area indicator (gesture pill) */207 .gesture {208 position: absolute;209 bottom: 20px; left: 50%;210 transform: translateX(-50%);211 width: 280px; height: 14px;212 background: #d9d9d9;213 border-radius: 14px;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Status Bar -->221 <div class="status-bar">222 <div class="sb-left">9:15</div>223 <div class="sb-right">224 <!-- simple icons -->225 <svg class="icon" viewBox="0 0 24 24">226 <circle cx="12" cy="12" r="10" fill="#fff" opacity="0.25"></circle>227 <path d="M12 7v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>228 </svg>229 <svg class="icon" viewBox="0 0 24 24">230 <path d="M12 2l9 5-9 5-9-5 9-5z" fill="#fff" opacity="0.3"></path>231 </svg>232 <svg class="icon" viewBox="0 0 24 24">233 <path d="M3 12h18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>234 <circle cx="12" cy="12" r="6" fill="#fff" opacity="0.25"></circle>235 </svg>236 <svg class="icon" viewBox="0 0 24 24">237 <path d="M3 3h18v18H3z" fill="#fff" opacity="0.25"></path>238 <path d="M6 12h12" stroke="#fff" stroke-width="2"></path>239 </svg>240 <span class="battery">241 <svg class="icon" viewBox="0 0 26 14">242 <rect x="1" y="1" width="20" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>243 <rect x="3" y="3" width="16" height="8" rx="1" fill="#fff"></rect>244 <rect x="22" y="4" width="3" height="6" rx="1" fill="#fff"></rect>245 </svg>246 94%247 </span>248 </div>249 </div>250 <div class="divider-top"></div>251 252 <!-- Main Content -->253 <div class="content">254 255 <div class="page-title">Pepperfry Banaswadi</div>256 <div class="hr"></div>257 258 <div class="location-row">259 <svg class="pin" viewBox="0 0 24 24">260 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#ff6f2e"></path>261 </svg>262 <div class="chip">10 Km</div>263 </div>264 265 <div class="section-title">Product Details</div>266 267 <!-- Up arrow icon to indicate expanded -->268 <svg class="up-arrow" viewBox="0 0 24 24">269 <path d="M6 15l6-6 6 6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>270 </svg>271 272 <div class="details-grid">273 <div class="detail-item">274 <div class="label">Brand</div>275 <div class="value">Mintwud from Pepperfry</div>276 </div>277 <div class="detail-item">278 <div class="label">Sku</div>279 <div class="value">FN1883728-P-WH35490</div>280 </div>281 282 <div class="detail-item">283 <div class="label">Product Rating</div>284 <div class="value">4.5</div>285 </div>286 <div class="detail-item">287 <div class="label">Seating Height</div>288 <div class="value">15</div>289 </div>290 291 <div class="detail-item">292 <div class="label">Assembly</div>293 <div class="value">Carpenter Assembly</div>294 </div>295 <div class="detail-item">296 <div class="label">Colour</div>297 <div class="value">Brown</div>298 </div>299 300 <div class="detail-item">301 <div class="label">Warranty</div>302 <div class="value">12 Months' Warranty</div>303 </div>304 <div class="detail-item">305 <div class="label">Dimensions (in Inches)</div>306 <div class="value">H 29 x W 71 x D 32.5</div>307 </div>308 309 <div class="detail-item">310 <div class="label">Primary Material</div>311 <div class="value">Fabric</div>312 </div>313 <div class="detail-item">314 <div class="label">Weight</div>315 <div class="value">28 KG</div>316 </div>317 318 <div class="detail-item">319 <div class="label">Dimensions (In Centimeters)</div>320 <div class="value">H 74 x W 181 x D 83</div>321 </div>322 <div class="detail-item">323 <div class="label">Room Type</div>324 <div class="value">Living Room</div>325 </div>326 </div>327 328 <div class="hr" style="margin-top:34px;"></div>329 330 <div class="section-row">331 <div>Specifications</div>332 <svg class="chev" viewBox="0 0 24 24">333 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>334 </svg>335 </div>336 337 <div class="section-row">338 <div>Brand & Collection Overview</div>339 <svg class="chev" viewBox="0 0 24 24">340 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>341 </svg>342 </div>343 344 <div class="section-row">345 <div>Care & Maintenance</div>346 <svg class="chev" viewBox="0 0 24 24">347 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>348 </svg>349 </div>350 351 <div class="section-row">352 <div>Seller</div>353 <svg class="chev" viewBox="0 0 24 24">354 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>355 </svg>356 </div>357 358 <div class="section-row">359 <div>Warranty</div>360 <svg class="chev" viewBox="0 0 24 24">361 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>362 </svg>363 </div>364 365 <div class="section-row">366 <div>Customer Reviews & Images</div>367 <svg class="chev" viewBox="0 0 24 24">368 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>369 </svg>370 </div>371 372 <!-- Floating chat -->373 <div class="chat-float">374 <svg class="chat-close" viewBox="0 0 24 24">375 <path d="M6 6l12 12M18 6L6 18" stroke="#000" stroke-width="3" stroke-linecap="round"></path>376 </svg>377 <div class="chat-tag">Let's Chat</div>378 </div>379 380 </div>381 382 <!-- CTA Bar -->383 <div class="cta-bar">384 <div class="cta-actions">385 <div class="btn-outline">ADD TO CART</div>386 <div class="btn-solid">BUY NOW</div>387 </div>388 </div>389 390 <!-- Bottom Navigation -->391 <div class="bottom-nav">392 <div class="nav-item active">393 <svg class="nav-icon" viewBox="0 0 24 24">394 <path d="M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#ff6f2e"></path>395 </svg>396 <div>Home</div>397 </div>398 <div class="nav-item">399 <svg class="nav-icon" viewBox="0 0 24 24">400 <circle cx="12" cy="8" r="4" fill="#777"></circle>401 <path d="M4 21c1.5-5 6.5-5 8-5s6.5 0 8 5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"></path>402 </svg>403 <div>My Account</div>404 </div>405 <div class="nav-item">406 <svg class="nav-icon" viewBox="0 0 24 24">407 <rect x="3" y="5" width="18" height="14" rx="2" fill="#777"></rect>408 <path d="M7 9h10M7 13h7" stroke="#fff" stroke-width="2"></path>409 <circle cx="17.5" cy="13.5" r="2.5" fill="#fff"></circle>410 </svg>411 <div>Gift Cards</div>412 </div>413 <div class="nav-item">414 <svg class="nav-icon" viewBox="0 0 24 24">415 <circle cx="12" cy="12" r="10" fill="#fff" stroke="#777" stroke-width="2"></circle>416 <text x="12" y="16" text-anchor="middle" font-size="10" font-family="Arial" fill="#777">pf</text>417 </svg>418 <div>Stores</div>419 </div>420 <div class="nav-item">421 <svg class="nav-icon" viewBox="0 0 24 24">422 <rect x="3" y="3" width="7" height="7" fill="#777"></rect>423 <rect x="14" y="3" width="7" height="7" fill="#777"></rect>424 <rect x="3" y="14" width="7" height="7" fill="#777"></rect>425 <rect x="14" y="14" width="7" height="7" fill="#777"></rect>426 </svg>427 <div>Categories</div>428 </div>429 </div>430 431 <div class="gesture"></div>432</div>433</body>434</html>